hide/show tag filters

assets/src/Page/Tiers.elm

@@ -39,6 +39,7 @@ type alias ShowingTiersState =
   ,    selected : Dict ( String, String ) Key -- ( uuid, version -> key )
   ,     allTags : Dict String Int
   , selectedTags : Set String
+  , tagFilterShown : Bool
   }
 
 type State
@@ -65,6 +66,8 @@ type Msg
   | PrepareCheckout
   | GotStoredSelection (Result JD.Error CheckoutRequest.CheckoutStorage)
   | ToggleTagFilter String Bool
+  | HideTagFilter
+  | ShowTagFilter
 
 
 
@@ -79,8 +82,8 @@ init flags path =
 
 -- VIEW -----------------------------------------------------------------------
 
-viewHeader : List String -> Dict ( String, String ) Key -> Dict String Int -> Set String -> Html Msg
-viewHeader path selectedTiers allTags selectedTags =
+viewHeader : Bool -> List String -> Dict ( String, String ) Key -> Dict String Int -> Set String -> Html Msg
+viewHeader tagFilterShown path selectedTiers allTags selectedTags =
   let
     name =
       case List.reverse path |> List.head of
@@ -91,12 +94,18 @@ viewHeader path selectedTiers allTags selectedTags =
       Dict.size selectedTiers
 
     search_ =
-      input
-        [       type_ "text"
-        ,     onInput SetSearchBase
-        , placeholder "search for a tier"
+      div [ class "row" ]
+        [ input
+            [       type_ "text"
+            ,     onInput SetSearchBase
+            , placeholder "search for a tier"
+            ]
+            []
+        , if tagFilterShown then
+            button [ onClick HideTagFilter, class "active" ] [ text "⋯" ]
+          else
+            button [ onClick ShowTagFilter ] [ text "⋯" ]
         ]
-        []
 
     tagCheckbox ( tag, count ) =
       let
@@ -116,11 +125,15 @@ viewHeader path selectedTiers allTags selectedTags =
         ]
 
     tagFilter =
-      div [ class "container" ] <|
-        List.map tagCheckbox (Dict.toList allTags)
+      if tagFilterShown then
+        [ div [ class "container" ] <|
+            List.map tagCheckbox (Dict.toList allTags)
+        ]
+      else
+        []
         
   in
-  header []
+  header [] <|
     [ div [ class "box" ]
         [ viewTierPath path
         , h1 []
@@ -138,13 +151,12 @@ viewHeader path selectedTiers allTags selectedTags =
             ]
         ]
     , search_
-    , tagFilter
-    ]
+    ] ++ tagFilter
 
 viewTierListing
-  :  Dict ( String, String ) Key -> Dict String (Dict String Version) -> TierListing
+  :  Bool -> Dict ( String, String ) Key -> Dict String (Dict String Version) -> TierListing
   -> Maybe String -> Dict String Int -> Set String -> Document Msg
-viewTierListing selected expanded tierListing search allTags selectedTags =
+viewTierListing tagFilterShown selected expanded tierListing search allTags selectedTags =
   let
     version : Uuid -> Key -> ( String, Version ) -> Html Msg
     version uuid key ( versionId, data ) =
@@ -245,7 +257,7 @@ viewTierListing selected expanded tierListing search allTags selectedTags =
               tier (Uuid.fromString uuid) key tags Nothing )
 
     header_ =
-      viewHeader tierListing.prefix selected allTags selectedTags
+      viewHeader tagFilterShown tierListing.prefix selected allTags selectedTags
 
     content =
       main_ [ class "no-border" ] tiers
@@ -259,7 +271,7 @@ view model =
   case model.state of
     Empty path ->
       { title = "loading"
-      ,  body = [ viewHeader path Dict.empty Dict.empty Set.empty, viewSpinner ]
+      ,  body = [ viewHeader False path Dict.empty Dict.empty Set.empty, viewSpinner ]
       }
 
     Error e ->
@@ -267,8 +279,8 @@ view model =
       ,  body = [ div [] [ text <| Error.errorToString e ] ]
       }
 
-    ShowingTiers { tierListing, expanded, selected, search, allTags, selectedTags } ->
-      viewTierListing selected expanded tierListing search allTags selectedTags
+    ShowingTiers { tierListing, expanded, selected, search, allTags, selectedTags, tagFilterShown } ->
+      viewTierListing tagFilterShown selected expanded tierListing search allTags selectedTags
 
 
 
@@ -283,6 +295,16 @@ incrementTagCount maybeInt =
 update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
   case ( msg, model.state ) of
+    ( ShowTagFilter, ShowingTiers showingTiersState ) ->
+      ( { model | state = ShowingTiers { showingTiersState | tagFilterShown = True } }
+      , Cmd.none
+      )
+
+    ( HideTagFilter, ShowingTiers showingTiersState ) ->
+      ( { model | state = ShowingTiers { showingTiersState | tagFilterShown = False } }
+      , Cmd.none
+      )
+
     ( GotTiers result, Empty _ ) ->
       case result of
         Ok tierListing ->
@@ -300,6 +322,7 @@ update msg model =
                         Dict.update tag incrementTagCount acc)
                       Dict.empty
                 , selectedTags = Set.empty
+                , tagFilterShown = False
                 }
             }
           , LocalStorage.get "checkout-tiers"

assets/style.scss

@@ -35,6 +35,9 @@ html {
   font-family: $base-font-stack;
   font-size:   $base-font-size;
   font-weight: $base-font-weight;
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: $blue $base-bg-color;
 }
 
 body {
@@ -400,9 +403,10 @@ button, a.button {
     }
   }
 
-  &:active {
+  &:active, &.active {
     top: 0;
     left: 0;
+    border-color: transparentize($blue, 0.25);
     box-shadow: none;
   }
 
@@ -558,7 +562,7 @@ a {
   width: 100%;
   display: flex;
   flex-flow: row nowrap;
-  align-items: center;
+  align-items: baseline;
   justify-content: space-between;
 }