diff --git a/frontend/src/_common.sass b/frontend/src/_common.sass index bfda93323..e79fefb05 100644 --- a/frontend/src/_common.sass +++ b/frontend/src/_common.sass @@ -9,7 +9,7 @@ @use "~@fortawesome/fontawesome-pro/scss/solid" -@use "icons.sass" +@use "icons.scss" @font-face font-family: "FRADrive Sans" diff --git a/frontend/src/icons.sass b/frontend/src/icons.sass deleted file mode 100644 index 15ea528f4..000000000 --- a/frontend/src/icons.sass +++ /dev/null @@ -1,31 +0,0 @@ -// SPDX-FileCopyrightText: 2024 David Mosbach -// -// SPDX-License-Identifier: AGPL-3.0-or-later -// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design - -@function icon-file($name) - @return url('../../assets/icons/fradrive/' + $name + '.svg') - -@mixin base-icon($name) - background-image: icon-file($name) - background-size: contain - background-repeat: no-repeat - background-position: center - height: 50px - width: 50px - aspect-ratio: 1/1 - filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%) - -.inline-icon - display: inline-block - font-size: 2em - width: 2em - - -// Icons - -.ico-check - @include base-icon(check) - -.ico-close - @include base-icon(close) diff --git a/frontend/src/icons.scss b/frontend/src/icons.scss new file mode 100644 index 000000000..bb9ddd73f --- /dev/null +++ b/frontend/src/icons.scss @@ -0,0 +1,36 @@ +// SPDX-FileCopyrightText: 2024 David Mosbach +// +// SPDX-License-Identifier: AGPL-3.0-or-later +// SPDX-License-Identifier: LicenseRef-Fraport-Corporate-Design + + +$icons: ok, + not-ok, + placeholder; + +@each $name in $icons { + .ico-#{$name} { + background-image: url('../../assets/icons/fradrive/#{$name}.svg'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + aspect-ratio: 1/1; + display: inline-block; + filter: invert(22%) sepia(84%) saturate(7448%) hue-rotate(357deg) brightness(102%) contrast(116%); + } +} + +.small-ico { + font-size: 1em; + width: 1em; +} + +.medium-ico { + font-size: 1.5em; + width: 1.5em; +} + +.large-ico { + font-size: 2em; + width: 2em; +} diff --git a/src/Utils/Icon.hs b/src/Utils/Icon.hs index 2c8d9de6a..f7ebe0ee0 100644 --- a/src/Utils/Icon.hs +++ b/src/Utils/Icon.hs @@ -1,4 +1,4 @@ --- SPDX-FileCopyrightText: 2022 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel ,Steffen Jost ,Wolfgang Witt +-- SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel ,Steffen Jost ,Wolfgang Witt ,David Mosbach -- -- SPDX-License-Identifier: AGPL-3.0-or-later @@ -117,7 +117,7 @@ data Icon deriving (Eq, Ord, Enum, Bounded, Show, Read, Generic) deriving anyclass (Universe, Finite, NFData) -iconText :: Icon -> Text +{- iconText :: Icon -> Text iconText = \case IconNew -> "seedling" IconOK -> "check" @@ -204,7 +204,14 @@ iconText = \case IconExpired -> "hourglass-end" IconLocked -> "lock" IconUnlocked -> "lock-open-alt" - IconResetTries -> "trash-undo" + IconResetTries -> "trash-undo" -} + +iconText :: Icon -> Text +iconText = \case + IconOK -> "ok" + IconNotOK -> "not-ok" + _ -> "placeholder" + nullaryPathPiece ''Icon $ camelToPathPiece' 1 deriveLift ''Icon @@ -214,21 +221,34 @@ deriveJSON defaultOptions } ''Icon -- Create an icon from font-awesome without additional space -icon :: Icon -> Markup +{- icon :: Icon -> Markup icon ic = [shamlet| $newline never |] +-} + +icon :: Icon -> Markup +icon ic = [shamlet| + $newline never + + |] + -- Create an icon from font-awesome with fixed width -iconFixed :: Icon -> Markup +{-iconFixed :: Icon -> Markup iconFixed ic = [shamlet| $newline never |] +-} + +iconFixed :: Icon -> Markup +iconFixed = icon -- TODO + -- Stack two icons from font-awesome without additional space -iconStacked :: Icon -> Icon -> Markup +{-iconStacked :: Icon -> Icon -> Markup iconStacked ic0 ic1 = [shamlet| $newline never @@ -237,6 +257,11 @@ iconStacked ic0 ic1 |] +-} + +iconStacked :: Icon -> Icon -> Markup +iconStacked i _ = icon i -- TODO + -- Create an icon (defaults to "?") with a specified tooltip; inline-bool just affects the size of the icon iconTooltip :: forall site. WidgetFor site () -> Maybe Icon -> Bool -> WidgetFor site () iconTooltip tooltip mIcon isInlineTooltip = let diff --git a/templates/widgets/navbar/container.hamlet b/templates/widgets/navbar/container.hamlet index 553b72b57..e4374de76 100644 --- a/templates/widgets/navbar/container.hamlet +++ b/templates/widgets/navbar/container.hamlet @@ -1,10 +1,10 @@ $newline never -$# SPDX-FileCopyrightText: 2022 Gregor Kleen +$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,David Mosbach $# $# SPDX-License-Identifier: AGPL-3.0-or-later