diff --git a/frontend/src/_common.sass b/frontend/src/_common.sass index e79fefb05..bfda93323 100644 --- a/frontend/src/_common.sass +++ b/frontend/src/_common.sass @@ -9,7 +9,7 @@ @use "~@fortawesome/fontawesome-pro/scss/solid" -@use "icons.scss" +@use "icons.sass" @font-face font-family: "FRADrive Sans" diff --git a/frontend/src/icons.sass b/frontend/src/icons.sass new file mode 100644 index 000000000..15ea528f4 --- /dev/null +++ b/frontend/src/icons.sass @@ -0,0 +1,31 @@ +// 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 deleted file mode 100644 index bb9ddd73f..000000000 --- a/frontend/src/icons.scss +++ /dev/null @@ -1,36 +0,0 @@ -// 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 f7ebe0ee0..2c8d9de6a 100644 --- a/src/Utils/Icon.hs +++ b/src/Utils/Icon.hs @@ -1,4 +1,4 @@ --- SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel ,Steffen Jost ,Wolfgang Witt ,David Mosbach +-- SPDX-FileCopyrightText: 2022 Gregor Kleen ,Sarah Vaupel ,Sarah Vaupel ,Steffen Jost ,Wolfgang Witt -- -- 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,14 +204,7 @@ iconText = \case IconExpired -> "hourglass-end" IconLocked -> "lock" IconUnlocked -> "lock-open-alt" - IconResetTries -> "trash-undo" -} - -iconText :: Icon -> Text -iconText = \case - IconOK -> "ok" - IconNotOK -> "not-ok" - _ -> "placeholder" - + IconResetTries -> "trash-undo" nullaryPathPiece ''Icon $ camelToPathPiece' 1 deriveLift ''Icon @@ -221,34 +214,21 @@ 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 @@ -257,11 +237,6 @@ 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 e4374de76..553b72b57 100644 --- a/templates/widgets/navbar/container.hamlet +++ b/templates/widgets/navbar/container.hamlet @@ -1,10 +1,10 @@ $newline never -$# SPDX-FileCopyrightText: 2022-2024 Gregor Kleen ,David Mosbach +$# SPDX-FileCopyrightText: 2022 Gregor Kleen $# $# SPDX-License-Identifier: AGPL-3.0-or-later