Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate icons to svg #9626

Open
jardakotesovec opened this issue Jan 18, 2024 · 0 comments
Open

Migrate icons to svg #9626

jardakotesovec opened this issue Jan 18, 2024 · 0 comments
Assignees
@blesildaramirez
Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. Housekeeping:1:Todo Any dependency management or refactor that would be nice to have some day. UI/UX Issues affecting the user interface/user experience
Milestone
3.5.0 LTS

Comments

@jardakotesovec
Copy link
Contributor

jardakotesovec commented Jan 18, 2024 •
edited by blesildaramirez
Loading

Issue

OJS/OMP/OPS are currently using FontAwesome font for most icons. Issue is that font based icons is difficult to extend with custom one, which we need when creating new custom interfaces. As result our current Icon.vue is balancing between two worlds when icons are either coming from FontAwesome or new svg icons.

Sizing and positioning svg and font based icons works differently, which causes confusion and layout challenges.

Solution

Identify icons that are used from FontAwesome and replace them by svg icons and adjust their positioning for given use cases.

Pull requests:
ui-library: pkp/ui-library#414
pkp-lib: #10574
ojs: pkp/ojs#4498
omp: pkp/omp#1746
ops: pkp/ops#800
@jardakotesovec jardakotesovec added the Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. label Jan 18, 2024
@jardakotesovec jardakotesovec added this to the 3.5.0 LTS milestone Jan 18, 2024
@jardakotesovec jardakotesovec self-assigned this Jan 18, 2024
@jonasraoni jonasraoni added the UI/UX Issues affecting the user interface/user experience label Jan 31, 2024
@jardakotesovec jardakotesovec added the Housekeeping:1:Todo Any dependency management or refactor that would be nice to have some day. label Jun 18, 2024
@blesildaramirez blesildaramirez mentioned this issue Sep 23, 2024
Merged
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update Expand, Orcid and UsefulTips icons based on n…
be8f980 
…ew icon designs from Figma
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Sep 24, 2024
@blesildaramirez
pkp/pkp-lib#9626 Add new icons
17fe569
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 30, 2024
@blesildaramirez
pkp#9626 Use svg icons in smarty templates that use Icon component
f51b80d
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update cypress test related to tooltips
a4748df
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
8d90dd6
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update Expand, Orcid and UsefulTips icons based on n…
df52fe9 
…ew icon designs from Figma
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Add new icons
caeac06
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Add InitialsAvatar component
fe5dcbf
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update svg for StarTicked icon
0d5df96
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Use svg icons for components that use Icon component
e0a7a77
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Rename Sitemap icon filename
874a8f6
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
a7e64df
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 30, 2024
@blesildaramirez
pkp#9626 Use svg icons in smarty templates that use Icon component
3d61962
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 30, 2024
@blesildaramirez
pkp#9626 Use small tooltip icon on editorial stats description
e7e5df6
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Adjust vertical alignment of icons next to texts
fe67219
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Oct 30, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
0b27a07
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Oct 31, 2024
@blesildaramirez
pkp#9626 Add name data when using InitialsAvatar component
577fc1b
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 31, 2024
@blesildaramirez
pkp/pkp-lib#9626 Add documentation for added new Tooltip props
63db0a2
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Oct 31, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update InitialsAvatar component
be52e4c
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Oct 31, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
1917552
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Oct 31, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update cypress test for clicking tooltip button
b8ab373
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Oct 31, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
a0331fd
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update Expand, Orcid and UsefulTips icons based on n…
a55f025 
…ew icon designs from Figma
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Add new icons
ccb0fb4
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Add InitialsAvatar component
52ba1e7
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update svg for StarTicked icon
c786f8b
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Use svg icons for components that use Icon component
c1722f4
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Rename Sitemap icon filename
1ea2a81
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Adjust vertical alignment of icons next to texts
7451c51
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Add documentation for added new Tooltip props
8ce1c27
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update InitialsAvatar component
17a935f
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Remove fontawesome support from icon component
34b9efe
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Use icon Orcid in UserInvitationManager component
e5d5946
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Use default colors for UsefulTips icon
3e89676
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Remove props in UsefulTips icon
8cd45cd
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Remove prop flex in Tooltip and HelpButton components
86ae6aa
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 8, 2024
@blesildaramirez
pkp#9626 Use svg icons in smarty templates that use Icon component
e2efad6
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 8, 2024
@blesildaramirez
pkp#9626 Use small tooltip icon on editorial stats description
ffc61d4
blesildaramirez added a commit to blesildaramirez/pkp-lib that referenced this issue Nov 8, 2024
@blesildaramirez
pkp#9626 Add name data when using InitialsAvatar component
c3916ab
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update cypress test related to tooltips
ff1fc03
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
ff943b7
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update cypress test for clicking tooltip button
adf61ed
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
f1646bd
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Use svg icon instead of fontawesome in review-galley…
d43db51 
…s template in submission wizard page
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update cypress test related to tooltip component
f591654
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
610041d
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Use align-middle for inline-block containers when di…
ca1358e 
…splaying icons
blesildaramirez added a commit to blesildaramirez/ojs that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
b3d1bb4
blesildaramirez added a commit to blesildaramirez/omp that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
bdca09c
blesildaramirez added a commit to blesildaramirez/ops that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Update submodules ##blesildaramirez/i9626##
e05350b
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Revert removed aria-hidden prop in Modal component
968fce3
blesildaramirez added a commit to blesildaramirez/ui-library that referenced this issue Nov 8, 2024
@blesildaramirez
pkp/pkp-lib#9626 Use InitialsAvatar component to display isLoggedInAs…
37d5364 
… icon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@blesildaramirez blesildaramirez

Labels
Enhancement:1:Minor A new feature or improvement that can be implemented in less than 3 days. Housekeeping:1:Todo Any dependency management or refactor that would be nice to have some day. UI/UX Issues affecting the user interface/user experience
Projects
None yet
Milestone
3.5.0 LTS
Development

No branches or pull requests
3 participants
@jonasraoni @jardakotesovec @blesildaramirez