From 11df9c578fee7d719ca981732b2ddbb16fb73057 Mon Sep 17 00:00:00 2001 From: David Mosbach Date: Thu, 23 May 2024 01:24:44 +0000 Subject: [PATCH] style(frontend): adjusted styling to svg icons --- frontend/src/_common.sass | 11 +- frontend/src/app.sass | 20 ++- frontend/src/icons.scss | 133 +++++++++++++++++- frontend/src/utils/alerts/alerts.js | 4 +- frontend/src/utils/alerts/alerts.sass | 13 +- .../src/utils/exam-correct/exam-correct.js | 16 +-- .../src/utils/hide-columns/hide-columns.js | 10 +- .../src/utils/hide-columns/hide-columns.sass | 8 +- frontend/src/utils/inputs/password.js | 6 +- frontend/src/utils/modal/modal.sass | 7 +- frontend/src/utils/navbar/navbar.sass | 13 +- frontend/src/utils/tooltips/tooltips.sass | 12 +- src/Utils/Icon.hs | 12 +- templates/exam-correct.hamlet | 4 +- templates/table/course/course-teaser.hamlet | 4 +- templates/widgets/alerts/alerts.hamlet | 4 +- templates/widgets/notification.hamlet | 3 +- templates/widgets/tooltip.hamlet | 4 +- utils/rename-fa.json | 95 +++++++++++++ utils/renamer.pl | 4 +- 20 files changed, 324 insertions(+), 59 deletions(-) create mode 100644 utils/rename-fa.json diff --git a/frontend/src/_common.sass b/frontend/src/_common.sass index e79fefb05..1205f78b3 100644 --- a/frontend/src/_common.sass +++ b/frontend/src/_common.sass @@ -3,14 +3,19 @@ // SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design -@use "~@fortawesome/fontawesome-pro/scss/fontawesome" with ( $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts" ) +//@use "~@fortawesome/fontawesome-pro/scss/fontawesome" with ( $fa-font-path: "~@fortawesome/fontawesome-pro/webfonts" ) -@forward "~@fortawesome/fontawesome-pro/scss/fontawesome" +//@forward "~@fortawesome/fontawesome-pro/scss/fontawesome" -@use "~@fortawesome/fontawesome-pro/scss/solid" +//@use "~@fortawesome/fontawesome-pro/scss/solid" @use "icons.scss" +$icons: '~/Assets/icons/fradrive' + +@function ico-content($ico) + @return url('#{$icons}/#{$ico}.svg') + @font-face font-family: "FRADrive Sans" src: url('./../../static/wp-5.73/FRADriveSans-Regular.woff2') format('woff2'), url('./../../static/wp-5.73/FRADriveSans-Regular.woff') format('woff') diff --git a/frontend/src/app.sass b/frontend/src/app.sass index 70fa24432..fd899af65 100644 --- a/frontend/src/app.sass +++ b/frontend/src/app.sass @@ -4,6 +4,7 @@ // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design @use "common" as * +@use "icons" \:root // THEME INDEPENDENT COLORS @@ -450,9 +451,9 @@ input[type="button"].btn-info:not(.btn-link):hover, color: inherit &::before - @extend .fas + @extend .ico-link - content: fa-content($fa-var-link) + content:"" margin-right: 0.25em &.table__th-link::before @@ -655,7 +656,6 @@ section margin: 0 auto 0.5rem &::before - @extend .fas position: absolute display: flex @@ -675,6 +675,13 @@ section &.notification--broad max-width: none + .fas + position: absolute + left: 20px + top: 0 + height: 100% + width: 60px + &:first-child margin-top: 0 &:last-child @@ -1271,6 +1278,9 @@ ul.breadcrumbs__list margin: 0 5px margin-top: 1px + span + @extend .white-ico + a.breadcrumbs__home opacity: 0.5 margin-right: 7px @@ -1281,6 +1291,10 @@ a.breadcrumbs__home &:hover opacity: 1 + i + @extend .white-ico + + .breadcrumbs__last-item font-weight: 600 opacity: 1 diff --git a/frontend/src/icons.scss b/frontend/src/icons.scss index a689629f9..87f3c0aed 100644 --- a/frontend/src/icons.scss +++ b/frontend/src/icons.scss @@ -4,9 +4,101 @@ // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design -$icons: ok, +$ico-width: 30px; + +$icons: new, + ok, not-ok, - placeholder; + warning, + problem, + visible, + invisible, + course-favourite-manual, + course-favourite-automatic, + course-favourite-off, + enrol-true, + enrol-false, + planned, + announce, + exam, + exam-register-true, + exam-register-false, + exam-auto-occurrence-nudge-up, + exam-auto-occurrence-nudge-down, + exam-auto-occurrence-ignore, + exam-auto-occurrence-reconsider, + comment-true, + comment-false, + link, + file-donwload, + file-upload, + file-zip, + file-csv, + sft-question, + sft-hint, + sft-solution, + sft-marking, + email, + register-template, + no-correctors, + remove-user, + tooltip-default, + notification-success, + notification-info, + notification-warning, + notification-error, + notification-nonactive, + favourite, + language, + nav-container-close, + page-action-children-close, + menu-news, + menu-help, + menu-profile, + menu-login, + menu-logout, + breadcrumbs-home, + menu-extra, + menu-course-list, + menu-corrections, + menu-exams, + menu-admin, + menu-lms, + menu-qualification, + page-action-primary-expand, + page-action-secondary, + breadcrumb-separator, + file-upload-session, + standalone-field-error, + file-user, + notification, + notification-sent, + no-notification, + personal-identification, + menu-workflows, + video, + submission-user-duplicate, + submission-no-users, + reset, + blocked, + certificate, + print-center, + letter, + at, + supervisor, + supervisor-foreign, + waiting-for-user, + expired, + locked, + unlocked, + trash, + reset-tries, + company, + edit, + user-edit, + placeholder, + loading; + @each $name in $icons { .ico-#{$name} { @@ -19,10 +111,17 @@ $icons: ok, font-size: inherit; display: inline-block; vertical-align: middle; - filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%); } } +.white-ico { + filter: invert(100%) sepia(20%) saturate(901%) hue-rotate(47deg) brightness(106%) contrast(101%); +} + +.fw-ico { + width: $ico-width; +} + .small-ico { font-size: 1em; } @@ -35,3 +134,31 @@ $icons: ok, font-size: 2em; } +.ico-spin { + animation-name: ico-spin; + animation-delay: 0s; + animation-duration: 3s; + animation-direction: normal; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@media (prefers-reduced-motion: reduce) { + .ico-spin { + animation-delay: -1ms; + animation-duration: 1ms; + animation-iteration-count: 1; + transition-delay: 0s; + transition-duration: 0s; + } +} + +@keyframes ico-spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + diff --git a/frontend/src/utils/alerts/alerts.js b/frontend/src/utils/alerts/alerts.js index e46b6791a..153b77952 100644 --- a/frontend/src/utils/alerts/alerts.js +++ b/frontend/src/utils/alerts/alerts.js @@ -171,7 +171,7 @@ export class Alerts { } }; - _createAlertElement(type, content, icon = 'info-circle') { + _createAlertElement(type, content, icon = 'notification-info') { const alertElement = document.createElement('div'); alertElement.classList.add(ALERT_CLASS, 'alert-' + type); @@ -179,7 +179,7 @@ export class Alerts { alertCloser.classList.add(ALERT_CLOSER_CLASS); const alertIcon = document.createElement('div'); - alertIcon.classList.add(ALERT_ICON_CLASS, 'fas', 'fa-' + icon); + alertIcon.classList.add(ALERT_ICON_CLASS, 'ico-' + icon); const alertContent = document.createElement('div'); alertContent.classList.add(ALERT_CONTENT_CLASS); diff --git a/frontend/src/utils/alerts/alerts.sass b/frontend/src/utils/alerts/alerts.sass index 2011be88e..811f2b62e 100644 --- a/frontend/src/utils/alerts/alerts.sass +++ b/frontend/src/utils/alerts/alerts.sass @@ -1,9 +1,10 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design @use "../../common" as * +@use '../../icons' .alerts position: fixed @@ -24,9 +25,9 @@ cursor: pointer &::before - @extend .fas + @extend .ico-nav-container-close - content: fa-content($fa-var-chevron-up) + content: "" position: absolute left: 50% top: 0 @@ -111,7 +112,7 @@ .alert__icon text-align: right position: absolute - left: 0px + left: 8px bottom: 0 width: 50px height: 100% @@ -152,9 +153,9 @@ color: white &::before - @extend .fas + @extend .ico-not-ok - content: fa-content($fa-var-times) + content: "" position: absolute top: 50% left: 50% diff --git a/frontend/src/utils/exam-correct/exam-correct.js b/frontend/src/utils/exam-correct/exam-correct.js index 7685c00e1..1af83031d 100644 --- a/frontend/src/utils/exam-correct/exam-correct.js +++ b/frontend/src/utils/exam-correct/exam-correct.js @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later @@ -461,7 +461,7 @@ export class ExamCorrect { for (let [k, v] of Object.entries(newEntry.results)) { const resultCell = row.cells.item(this._cIndices.get(k)); if (v === null) { - resultCell.innerHTML = ''; + resultCell.innerHTML = ''; resultCell.classList.remove('exam-correct--result-unconfirmed'); } else if (v && v.result !== undefined && v.result !== null) { resultCell.innerHTML = v.result; @@ -499,7 +499,7 @@ export class ExamCorrect { else html = examResult.status; } else if (examResult === null) { - html = ''; + html = ''; } return html; @@ -598,7 +598,7 @@ export class ExamCorrect { const partCell = document.createElement('TD'); if (partResult === null) { - partCell.innerHTML = ''; + partCell.innerHTML = ''; } else { partCell.innerHTML = partResult; } @@ -683,10 +683,10 @@ function userToHTML(user) { } function setStatus(elem, status) { - const successClasses = ['fas', 'fa-fw', 'fa-check', 'exam-correct--success']; - const ambiguousClasses = ['fas', 'fa-fw', 'fa-question', 'exam-correct--ambiguous']; - const errorClasses = ['fas', 'fa-fw', 'fa-times', 'exam-correct--error']; - const loadingClasses = ['fas', 'fa-fw', 'fa-spinner-third', 'fa-spin']; + const successClasses = ['fas', 'fw-ico', 'ico-ok', 'exam-correct--success']; + const ambiguousClasses = ['fas', 'fw-ico', 'ico-menu-help', 'exam-correct--ambiguous']; + const errorClasses = ['fas', 'fw-ico', 'ico-not-ok', 'exam-correct--error']; + const loadingClasses = ['fas', 'fw-ico', 'ico-loading', 'ico-spin']; elem.classList.remove(...successClasses, ...ambiguousClasses, ...errorClasses, ...loadingClasses); diff --git a/frontend/src/utils/hide-columns/hide-columns.js b/frontend/src/utils/hide-columns/hide-columns.js index 44dfa52e0..2374ca83f 100644 --- a/frontend/src/utils/hide-columns/hide-columns.js +++ b/frontend/src/utils/hide-columns/hide-columns.js @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later @@ -104,8 +104,8 @@ export class HideColumns { const hider = document.createElement('span'); - const hiderIcon = document.createElement('i'); - hiderIcon.classList.add('fas', 'fa-fw'); + const hiderIcon = document.createElement('span'); + hiderIcon.classList.add('fas'); hider.appendChild(hiderIcon); const hiderContent = document.createElement('span'); @@ -240,8 +240,8 @@ export class HideColumns { updateHiderIcon(hider, hidden) { Array.from(hider.getElementsByClassName('fas')).forEach(hiderIcon => { - hiderIcon.classList.remove(hidden ? 'fa-eye' : 'fa-eye-slash'); - hiderIcon.classList.add(hidden ? 'fa-eye-slash' : 'fa-eye'); + hiderIcon.classList.remove(hidden ? 'ico-visible' : 'ico-invisible'); + hiderIcon.classList.add(hidden ? 'ico-invisible' : 'ico-visible'); }); } diff --git a/frontend/src/utils/hide-columns/hide-columns.sass b/frontend/src/utils/hide-columns/hide-columns.sass index 62f5dc0b2..3d537df22 100644 --- a/frontend/src/utils/hide-columns/hide-columns.sass +++ b/frontend/src/utils/hide-columns/hide-columns.sass @@ -1,8 +1,10 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design +@use "../../icons.scss" + .table-hider background-color: #fff color: var(--color-link) @@ -66,5 +68,9 @@ &:empty margin: 0 + .fas + @extend .white-ico + + .hide-columns--hidden-cell display: none diff --git a/frontend/src/utils/inputs/password.js b/frontend/src/utils/inputs/password.js index 5ccc048b0..2f9398c98 100644 --- a/frontend/src/utils/inputs/password.js +++ b/frontend/src/utils/inputs/password.js @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen ,Sarah Vaupel +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,Sarah Vaupel ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later @@ -42,7 +42,7 @@ export class Password { this._wrapperEl.appendChild(this._toggleContainerEl); this._iconEl = document.createElement('i'); - this._iconEl.classList.add('fas', 'fa-fw'); + this._iconEl.classList.add('fas'); this._toggleContainerEl.appendChild(this._iconEl); parentEl.insertBefore(this._wrapperEl, siblingEl); @@ -91,7 +91,7 @@ export class Password { updateVisibleIcon(visible) { function visibleClass(visible) { - return 'fa-' + (visible ? 'eye' : 'eye-slash'); + return `ico-${visible ? '' : 'in'}visible`; } this._iconEl.classList.remove(visibleClass(!visible)); diff --git a/frontend/src/utils/modal/modal.sass b/frontend/src/utils/modal/modal.sass index 4622f1f69..b2eab110c 100644 --- a/frontend/src/utils/modal/modal.sass +++ b/frontend/src/utils/modal/modal.sass @@ -1,4 +1,4 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design @@ -98,9 +98,10 @@ div.modal__trigger z-index: 20 &::before - @extend .fas + @extend .ico-not-ok + @extend .white-ico - content: fa-content($fa-var-times) + content: "" color: white .modal__content diff --git a/frontend/src/utils/navbar/navbar.sass b/frontend/src/utils/navbar/navbar.sass index ee11954e4..869a72b81 100644 --- a/frontend/src/utils/navbar/navbar.sass +++ b/frontend/src/utils/navbar/navbar.sass @@ -1,8 +1,10 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design +@use '../../icons.scss' + .navbar-container position: relative @@ -170,6 +172,9 @@ transition: opacity 0.2s ease margin-bottom: 7px + span + @extend .white-ico + .navbar__link-label transition: opacity .2s ease padding: 2px 4px @@ -253,6 +258,11 @@ .navbar__link-wrapper color: var(--color-dark) + .navbar__link-icon + .white-ico + filter: none + + .navbar__list-item--active .navbar__link-wrapper color: var(--color-dark) @@ -263,6 +273,7 @@ .navbar__link-icon opacity: 1 + // sticky state .navbar--sticky height: var(--header-height-collapsed) diff --git a/frontend/src/utils/tooltips/tooltips.sass b/frontend/src/utils/tooltips/tooltips.sass index 888dfc87d..c54ab078b 100644 --- a/frontend/src/utils/tooltips/tooltips.sass +++ b/frontend/src/utils/tooltips/tooltips.sass @@ -1,9 +1,10 @@ -// SPDX-FileCopyrightText: 2022 Gregor Kleen +// SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,David Mosbach // // SPDX-License-Identifier: AGPL-3.0-or-later // SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design @use "../../common" as * +@use "../../icons.scss" .tooltip position: relative @@ -63,6 +64,9 @@ .table__th & color: white + .fas + @extend .white-ico + .tooltip.tooltip__inline .tooltip__handle height: 1.0rem @@ -123,10 +127,10 @@ padding: 4px 17px 4px 4px &::after - @extend .fas - @extend .fa-fw + @extend .ico-notification-nonactive + @extend .fw-ico - content: '\f129' + content: '' position: absolute right: 2px top: 6px diff --git a/src/Utils/Icon.hs b/src/Utils/Icon.hs index 67076d161..6bae13eee 100644 --- a/src/Utils/Icon.hs +++ b/src/Utils/Icon.hs @@ -213,10 +213,7 @@ iconText = \case IconResetTries -> "trash-undo" -} iconText :: Icon -> Text -iconText = \case - IconOK -> "ok" - IconNotOK -> "not-ok" - _ -> "placeholder" +iconText = camelToPathPiece' 1 . tshow nullaryPathPiece ''Icon $ camelToPathPiece' 1 deriveLift ''Icon @@ -236,7 +233,7 @@ icon ic = [shamlet| icon :: Icon -> Markup icon ic = [shamlet| $newline never - + |] @@ -249,7 +246,10 @@ iconFixed ic = [shamlet| -} iconFixed :: Icon -> Markup -iconFixed = icon -- TODO +iconFixed ic = [shamlet| + $newline never + + |] -- Stack two icons from font-awesome without additional space diff --git a/templates/exam-correct.hamlet b/templates/exam-correct.hamlet index 965bb9856..5f4b341f2 100644 --- a/templates/exam-correct.hamlet +++ b/templates/exam-correct.hamlet @@ -1,6 +1,6 @@ $newline never -$# SPDX-FileCopyrightText: 2022 Gregor Kleen ,Sarah Vaupel ,Winnie Ros +$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,Sarah Vaupel ,Winnie Ros ,David Mosbach $# $# SPDX-License-Identifier: AGPL-3.0-or-later @@ -37,7 +37,7 @@ $# SPDX-License-Identifier: AGPL-3.0-or-later ^{ptsInput examPartNumber} -