From 87ab97de0067414005805525e350283613701506 Mon Sep 17 00:00:00 2001 From: Gregor Kleen Date: Tue, 13 Apr 2021 20:08:10 +0200 Subject: [PATCH] style: fancify favourite toggle --- frontend/src/app.sass | 10 ++----- frontend/src/utils/asidenav/asidenav.sass | 35 ++++++++++++++++++++-- src/Foundation/SiteLayout.hs | 15 ++++++++-- src/Model/Types/Misc.hs | 5 ++-- src/Utils/Icon.hs | 18 +++++------ templates/widgets/asidenav/asidenav.hamlet | 18 ++++++----- 6 files changed, 68 insertions(+), 33 deletions(-) diff --git a/frontend/src/app.sass b/frontend/src/app.sass index fccc3a85a..f6bd8a949 100644 --- a/frontend/src/app.sass +++ b/frontend/src/app.sass @@ -275,8 +275,8 @@ button:not(.btn-link), display: grid grid: min-content / auto-flow max-content -.buttongroup--inline - display: inline-block + .buttongroup--inline + display: inline-grid input[type="submit"][disabled]:not(.btn-link), input[type="button"][disabled]:not(.btn-link), @@ -331,13 +331,9 @@ input[type="button"].btn-info:not(.btn-link):hover, &:not([disabled]):hover color: var(--color-link-hover) -.button--favourite-toggle - font-size: 0.5em - vertical-align: top - // STACK ICON STYLE .icon--stacked - vertical-align: top + font-size: 0.5rem // GENERAL TABLE STYLES .table diff --git a/frontend/src/utils/asidenav/asidenav.sass b/frontend/src/utils/asidenav/asidenav.sass index abab6ffd1..5bca8b347 100644 --- a/frontend/src/utils/asidenav/asidenav.sass +++ b/frontend/src/utils/asidenav/asidenav.sass @@ -1,3 +1,6 @@ +@use "../../common" as * +@use "../../app" as * + .main__aside position: fixed box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) @@ -91,11 +94,16 @@ margin: 3px 0 .asidenav__box-explanation - color: var(--color-fontsec) - font-size: 0.9rem - font-weight: 400 + @extend .explanation padding: 0 13px margin: 3px 0 + opacity: .66 + font-size: .7rem + + /* transition: opacity .2s ease, font-size .2s ease + /* &:hover + /* font-size: .9rem + /* opacity: 1 // LOGO @@ -224,9 +232,30 @@ .asidenav__link-shorthand display: none +.asidenav__link-favourite-toggle + opacity: .33 + + &:hover + opacity: 1 + + button + display: flex + text-decoration: none + .asidenav__link-label + display: flex + justify-content: space-between + align-items: center line-height: 1 + & > .asidenav__link-label-text + word-break: break-word + flex: 1 1 auto + + & > .asidenav__link-favourite-toggle + flex: 0 0 $fa-fw-width + margin: 0 5px + // hover sub-menus .asidenav__nested-list-wrapper position: absolute diff --git a/src/Foundation/SiteLayout.hs b/src/Foundation/SiteLayout.hs index 6dd2a888f..f7d2a0192 100644 --- a/src/Foundation/SiteLayout.hs +++ b/src/Foundation/SiteLayout.hs @@ -50,9 +50,9 @@ nullaryPathPiece ''CourseFavouriteToggleButton $ camelToPathPiece' 4 instance Button UniWorX CourseFavouriteToggleButton where btnLabel BtnCourseFavouriteToggleManual - = toWidget $ icon2x IconCourseFavouriteManual + = toWidget $ iconFixed IconCourseFavouriteManual btnLabel BtnCourseFavouriteToggleAutomatic - = toWidget $ icon2x IconCourseFavouriteAutomatic + = toWidget $ iconFixed IconCourseFavouriteAutomatic btnLabel BtnCourseFavouriteToggleOff = toWidget $ iconStacked IconCourseFavouriteManual IconCourseFavouriteOff @@ -283,7 +283,14 @@ siteLayout' overrideHeading widget = do } let favouriteTerms :: [TermIdentifier] - favouriteTerms = take maxFavouriteTerms . Set.toDescList $ foldMap (\((_, tid, _, _), _, _, _, _) -> Set.singleton $ unTermKey tid) favourites' + favouriteTerms = Set.toDescList . prune $ toTermKeySet favourites' + where + prune ts = currentTerms `Set.union` setTakeEnd (maxFavouriteTerms - Set.size currentTerms) (ts `Set.difference` currentTerms) + setTakeEnd n ts + | n <= 0 = Set.empty + | otherwise = Set.drop (Set.size ts - n) ts + currentTerms = toTermKeySet $ filter (views (_2 . _Value) . maybe True $ is _FavouriteCurrent) favourites' + toTermKeySet = setOf $ folded . _1 . _2 . to unTermKey favourites <- fmap catMaybes . forM favourites' $ \(c@(_, tid, ssh, csh), E.Value mFavourite, courseVisible, mayView, mayEdit) -> let courseRoute = CourseR tid ssh csh CShowR @@ -332,6 +339,8 @@ siteLayout' overrideHeading widget = do favouriteTermReason tid favReason' = favourites & filter (\((_, tid', _, _), _, _, favReason, _, _, _) -> unTermKey tid' == tid && favReason == favReason') & sortOn (\((cName, _, _, _), _, _, _, _, _, _) -> cName) + anyFavToggle = flip any ((,) <$> universeF <*> favouriteTerms) $ \(reason, term) -> + showFavToggle reason && not (null $ favouriteTermReason term reason) -- We break up the default layout into two components: -- default-layout is the contents of the body tag, and diff --git a/src/Model/Types/Misc.hs b/src/Model/Types/Misc.hs index 6bfae3fc6..2369dff95 100644 --- a/src/Model/Types/Misc.hs +++ b/src/Model/Types/Misc.hs @@ -54,8 +54,6 @@ $(deriveSimpleWith ''ToMessage 'toMessage (over Text.packed $ Text.intercalate " derivePersistField "Theme" - - data FavouriteReason = FavouriteVisited | FavouriteParticipant @@ -68,6 +66,9 @@ deriveJSON defaultOptions } ''FavouriteReason derivePersistFieldJSON ''FavouriteReason +makePrisms ''FavouriteReason + + data Sex = SexNotKnown | SexMale diff --git a/src/Utils/Icon.hs b/src/Utils/Icon.hs index 36d207284..d11a99b77 100644 --- a/src/Utils/Icon.hs +++ b/src/Utils/Icon.hs @@ -194,17 +194,15 @@ icon ic = [shamlet| $newline never |] + +-- Create an icon from font-awesome with fixed width +iconFixed :: Icon -> Markup +iconFixed ic = [shamlet| + $newline never + + |] --- Create an icon from font-awesome without additional space at 2x size -icon2x :: Icon -> Markup -icon2x ic - = [shamlet| - $newline never - - |] - --- Stack two icons from font-awesome without additional space (both at 2x size) --- stacked Icons are always double size, so they are correctly aligned with those produced by 'icon2x' +-- Stack two icons from font-awesome without additional space iconStacked :: Icon -> Icon -> Markup iconStacked ic0 ic1 = [shamlet| diff --git a/templates/widgets/asidenav/asidenav.hamlet b/templates/widgets/asidenav/asidenav.hamlet index 702de4f69..67f6d890e 100644 --- a/templates/widgets/asidenav/asidenav.hamlet +++ b/templates/widgets/asidenav/asidenav.hamlet @@ -9,11 +9,9 @@ $newline never _{MsgLogo}
- $if null favouriteTerms + $if null favouriteTerms && is _Just muid