pkp#9626 Use svg icons in smarty templates that use Icon component

blesildaramirez · Oct 30, 2024 · f51b80d · f51b80d
1 parent 29e73e7
commit f51b80d
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 15 deletions.
diff --git a/js/load.js b/js/load.js
@@ -31,6 +31,7 @@ import Badge from '@/components/Badge/Badge.vue';
 import Dropdown from '@/components/Dropdown/Dropdown.vue';
 import DropdownActions from '@/components/DropdownActions/DropdownActions.vue';
 import Icon from '@/components/Icon/Icon.vue';
+import InitialsAvatar from '@/components/InitialsAvatar/InitialsAvatar.vue';
 import SideNav from '@/components/SideNav/SideNav.vue';
 import Notification from '@/components/Notification/Notification.vue';
 import Panel from '@/components/Panel/Panel.vue';
@@ -117,6 +118,8 @@ VueRegistry.registerComponent('PkpDropdown', Dropdown);
 VueRegistry.registerComponent('DropdownActions', DropdownActions);
 VueRegistry.registerComponent('Icon', Icon);
 VueRegistry.registerComponent('PkpIcon', Icon);
+VueRegistry.registerComponent('InitialsAvatar', InitialsAvatar);
+VueRegistry.registerComponent('PkpInitialsAvatar', InitialsAvatar);
 VueRegistry.registerComponent('PkpSideNav', SideNav);
 VueRegistry.registerComponent('Notification', Notification);
 VueRegistry.registerComponent('PkpNotification', Notification);

diff --git a/templates/layouts/backend.tpl b/templates/layouts/backend.tpl
@@ -43,7 +43,7 @@
 			{if $availableContexts}
 				<dropdown class="app__headerAction app__contexts">
 					<template #button>
-						<icon icon="sitemap"></icon>
+						<icon icon="Sitemap" class="h-7 w-7"></icon>
 						<span class="-screenReader">{translate key="context.contexts"}</span>
 					</template>
 					<ul>
@@ -77,16 +77,16 @@
 					{call_hook name="Template::Layout::Backend::HeaderActions"}
 					<div class="app__headerAction app__tasks">
 						<button ref="tasksButton" @click="openTasks">
-							<icon icon="bell-o"></icon>
+							<icon icon="Notifications" class="h-7 w-7"></icon>
 							<span class="-screenReader">{translate key="common.tasks"}</span>
 							<span v-if="unreadTasksCount" class="app__tasksCount">{{ unreadTasksCount }}</span>
 						</button>
 					</div>
 					<dropdown class="app__headerAction app__userNav">
 						<template #button>
-							<icon icon="user-circle-o"></icon>
+							<initials-avatar :is-secondary="true"></initials-avatar>
 							{if $isUserLoggedInAs}
-								<icon icon="user-circle" class="app__userNav__isLoggedInAsWarning"></icon>
+								<icon icon="User" class="absolute right-2 top-2 text-on-dark bg-negative rounded-full h-5 w-5"></icon>
 							{/if}
 							<span class="-screenReader">{$currentUser->getData('userName')}</span>
 						</template>
@@ -99,7 +99,7 @@
 											<li>
 												<a href="{url router=PKP\core\PKPApplication::ROUTE_PAGE page="user" op="setLocale" path=$localeKey}" class="pkpDropdown__action">
 													{if $localeKey == $currentLocale}
-														<icon icon="check" :inline="true"></icon>
+														<icon icon="Complete" class="h-5 w-5" :inline="true"></icon>
 													{/if}
 													{$locale|escape}
 												</a>

diff --git a/templates/management/access.tpl b/templates/management/access.tpl
@@ -29,7 +29,7 @@
 		<tab id="notify" label="{translate key="manager.setup.notifyUsers"}">
 			<div v-if="totalBulkJobs" role="alert">
 				<p>
-					<icon icon="check" :inline="true"></icon>
+					<icon icon="Complete" :inline="true" class="h-5 w-5"></icon>
 					{translate key="manager.setup.notifyUsers.queued"}
 					<button class="-linkButton" @click="reload">
 						{translate key="manager.setup.notifyUsers.sendAnother"}

diff --git a/templates/management/manageEmails.tpl b/templates/management/manageEmails.tpl
@@ -49,7 +49,7 @@
 		<template #sidebar>
 			<pkp-header>
 				<h2>
-					<icon icon="filter" :inline="true"></icon>
+					<icon icon="Filter" class="h-4 w-4" :inline="true"></icon>
 					{translate key="common.filter"}
 				</h2>
 			</pkp-header>

diff --git a/templates/stats/editorial.tpl b/templates/stats/editorial.tpl
@@ -68,7 +68,7 @@
 						:is-active="isSidebarVisible"
 						@click="toggleSidebar"
 					>
-						<icon icon="filter" :inline="true"></icon>
+						<icon icon="Filter" class="h-4 w-4" :inline="true"></icon>
 						{translate key="common.filter"}
 					</pkp-button>
 				</template>

diff --git a/templates/stats/publications.tpl b/templates/stats/publications.tpl
@@ -46,7 +46,7 @@
 					:is-active="isSidebarVisible"
 					@click="toggleSidebar"
 				>
-					<icon icon="filter" :inline="true"></icon>
+					<icon icon="Filter" class="h-4 w-4" :inline="true"></icon>
 					{translate key="common.filter"}
 				</pkp-button>
 			</template>
@@ -64,7 +64,7 @@
 					:tabindex="isSidebarVisible ? 0 : -1"
 				>
 					<h2>
-						<icon icon="filter" :inline="true"></icon>
+						<icon icon="Filter" class="h-4 w-4" :inline="true"></icon>
 						{translate key="common.filter"}
 					</h2>
 				</pkp-header>

diff --git a/templates/submission/review-contributors.tpl b/templates/submission/review-contributors.tpl
@@ -28,7 +28,7 @@
         "
     >
         <notification v-if="!publication.authors.length" type="warning" class="submissionWizard__reviewEmptyWarning">
-            <icon icon="exclamation-triangle" :inline="true"></icon>
+            <icon icon="Error" class="h-5 w-5" :inline="true"></icon>
             {translate key="submission.wizard.noContributors"}
         </notification>
         <ul
@@ -40,7 +40,7 @@
                 :key="i"
             >
                 <notification type="warning">
-                    <icon icon="exclamation-triangle" :inline="true"></icon>
+                    <icon icon="Error" class="h-5 w-5" :inline="true"></icon>
                     {{ error }}
                 </notification>
             </li>

diff --git a/templates/submission/review-details.tpl b/templates/submission/review-details.tpl
@@ -45,7 +45,7 @@
                                 :key="i"
                                 type="warning"
                             >
-                                <icon icon="exclamation-triangle"></icon>
+                                <icon icon="Error" class="h-5 w-5"></icon>
                                 {{ error }}
                             </notification>
                         </template>

diff --git a/templates/submission/review-files.tpl b/templates/submission/review-files.tpl
@@ -32,7 +32,7 @@
             type="warning"
             class="submissionWizard__reviewEmptyWarning"
         >
-            <icon icon="exclamation-triangle" :inline="true"></icon>
+            <icon icon="Error" class="h-5 w-5" :inline="true"></icon>
             {{ error }}
         </notification>
         <ul class="submissionWizard__reviewPanel__list">

diff --git a/templates/submission/review-publication-field.tpl b/templates/submission/review-publication-field.tpl
@@ -26,7 +26,7 @@
             :key="i"
             type="warning"
         >
-            <icon icon="exclamation-triangle"></icon>
+            <icon icon="Error" class="h-5 w-5"></icon>
             {{ error }}
         </notification>
     </template>