pkp/pkp-lib#10792 WIP:update brand guideline

taslangraham · Jan 17, 2025 · 67f04d3 · 67f04d3
1 parent a6a3fe3
commit 67f04d3
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 5 deletions.
diff --git a/src/components/Form/fields/FieldOrcid.vue b/src/components/Form/fields/FieldOrcid.vue
@@ -27,10 +27,18 @@
 				class="h-6 w-6"
 				:inline="true"
 			/>
+
+			<Icon
+				v-if="!isVerified && hasOrcid"
+				:class="'mr-2'"
+				icon="OrcidUnauthenticated"
+				class="h-6 w-6"
+				:inline="true"
+			/>
 			<div
 				v-if="hasOrcid"
 				class="pkpFormField__control pkpFormField__control--html"
-				v-html="orcidDisplayValue"
+				v-html="orcidDisplayText"
 			/>
 			<PkpButton
 				v-if="hasOrcid"
@@ -107,6 +115,11 @@ export default {
 			type: Boolean,
 			required: true,
 		},
+		orcidDisplayValue: {
+			type: String,
+			required: true,
+			default: '',
+		},
 	},
 	data() {
 		return {
@@ -129,9 +142,9 @@ export default {
 		 * Wraps ORCID in <a> tag for HTML display
 		 * @returns {string}
 		 */
-		orcidDisplayValue: function () {
+		orcidDisplayText: function () {
 			if (this.hasOrcid) {
-				return `<a target="_blank" class="underline" href="${this.orcidValue}">${this.orcidValue}</a>`;
+				return `<a target="_blank" class="underline" href="${this.orcidValue}">${this.orcidDisplayValue}</a>`;
 			} else {
 				return this.orcidValue;
 			}

diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
@@ -85,6 +85,7 @@ import Notifications from './icons/Notifications.vue';
 import NotVisible from './icons/NotVisible.vue';
 import OpenReview from './icons/OpenReview.vue';
 import Orcid from './icons/Orcid.vue';
+import OrcidUnauthenticated from './icons/OrcidUnauthenticated.vue';
 import Overdue from './icons/Overdue.vue';
 import Paste from './icons/Paste.vue';
 import Payment from './icons/Payment.vue';
@@ -228,6 +229,7 @@ const svgIcons = {
 	User,
 	View,
 	Workflow,
+	OrcidUnauthenticated,
 };
 
 const props = defineProps({

diff --git a/src/components/Icon/icons/OrcidUnauthenticated.vue b/src/components/Icon/icons/OrcidUnauthenticated.vue
@@ -0,0 +1,27 @@
+<template>
+	<svg fill="none" xmlns="http://www.w3.org/2000/svg">
+		<g clip-path="url(#clip0_11_315)">
+			<path
+				clip-rule="evenodd"
+				d="M29.474 16c0 7.442-6.032 13.474-13.474 13.474S2.526 23.442 2.526 16 8.558 2.526 16 2.526 29.474 8.558 29.474 16Z"
+				fill="#fff"
+			/>
+			<path
+				clip-rule="evenodd"
+				d="M32 16c0 8.837-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0s16 7.163 16 16ZM16 29.474c7.442 0 13.474-6.032 13.474-13.474S23.442 2.526 16 2.526 2.526 8.558 2.526 16 8.558 29.474 16 29.474Z"
+				fill="#7FAA26"
+			/>
+			<path
+				clip-rule="evenodd"
+				d="M18.22 10.973h-4.547v11.6h4.569c3.8 0 6.133-2.82 6.133-5.8 0-1.365-.469-2.815-1.478-3.925-1.013-1.115-2.557-1.875-4.676-1.875Zm-.177 9.732h-2.347v-7.864h2.264c1.521 0 2.603.46 3.304 1.167.703.709 1.046 1.688 1.046 2.765 0 .654-.2 1.641-.83 2.46-.621.808-1.677 1.473-3.437 1.473Zm-.083-8.073c3.13 0 4.558 1.898 4.558 4.141 0-2.243-1.429-4.141-4.558-4.141h-2.472 2.472Zm6.205 4.017.001.124c0 2.869-2.242 5.591-5.924 5.591h-4.36V11.182v11.182h4.36c3.682 0 5.924-2.722 5.924-5.591l-.001-.124ZM9.5 11.005v11.588h2.024V11.005H9.5Zm1.815.208v11.172-11.172H9.71h1.606ZM10.512 10.15c.7 0 1.262-.575 1.262-1.263 0-.687-.561-1.262-1.262-1.262-.7 0-1.262.563-1.262 1.262 0 .688.561 1.262 1.262 1.262Zm.614-.408a1.044 1.044 0 0 0 0 0Z"
+				fill="#7FAA26"
+			/>
+		</g>
+
+		<defs>
+			<clipPath>
+				<rect fill="white" height="24" width="24" />
+			</clipPath>
+		</defs>
+	</svg>
+</template>
diff --git a/src/components/ListPanel/contributors/ContributorsListPanel.vue b/src/components/ListPanel/contributors/ContributorsListPanel.vue
@@ -392,6 +392,7 @@ export default {
 						if (field.name === 'orcid') {
 							field.orcid = author['orcid'] ?? '';
 							field.authorId = author['id'];
+							field.orcidDisplayValue = author['orcidDisplayValue'];
 							field.isVerified = author['orcidIsVerified'] ?? false;
 							field.orcidVerificationRequested =
 								author['orcidVerificationRequested'];

diff --git a/src/components/ListPanel/users/SelectReviewerListItem.vue b/src/components/ListPanel/users/SelectReviewerListItem.vue
@@ -45,8 +45,12 @@
 							class="listPanel__item--reviewer__orcid"
 							target="_blank"
 						>
-							<Icon icon="Orcid" :inline="true" class="me-1 h-5 w-5" />
-							{{ item.orcid }}
+							<Icon
+								:icon="item.orcidIsVerified ? 'Orcid' : 'OrcidUnauthenticated'"
+								:inline="true"
+								class="me-1 h-5 w-5"
+							/>
+							{{ item.orcidDisplayValue }}
 						</a>
 					</div>
 				</div>