Add chevron icons for togglable titles

joshuanianji · Oct 11, 2023 · b431b76 · b431b76
1 parent 4dc9fda
commit b431b76
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/src/Lib/Views.elm b/src/Lib/Views.elm
@@ -116,20 +116,24 @@ unselectable =
 
 togglableTitle : List (Attribute msg) -> { label : String, activeWhen : Bool, onClick : msg } -> Element msg
 togglableTitle attrs { label, activeWhen, onClick } =
-    Element.el
-        ([ Font.size 32
-         , Font.color <|
+    let
+        ( fontColor, icon ) =
             if activeWhen then
-                Colours.grey
+                ( Colours.grey, FeatherIcons.chevronDown )
 
             else
-                Colours.greyAlpha 0.5
+                ( Colours.greyAlpha 0.5, FeatherIcons.chevronRight )
+    in
+    Element.el
+        ([ Font.size 32
+         , Font.color fontColor
          , Font.bold
          , Events.onClick onClick
          , unselectable
          , Element.pointer
          , Element.mouseOver
             [ Font.color <| Colours.lightGrey ]
+         , Element.onLeft (Util.viewIcon [ Element.scale 1.25, Font.bold, Element.centerY, Element.paddingXY 8 0 ] icon)
          ]
             ++ attrs
         )

diff --git a/src/Views/VM.elm b/src/Views/VM.elm
@@ -435,12 +435,13 @@ view : Model -> Element Msg
 view model =
     let
         title =
-            Lib.Views.togglableTitle
-                [ Element.paddingEach { eachZero | bottom = 16 } ]
-                { label = "Execute Program on VM"
-                , activeWhen = True
-                , onClick = NoOp
-                }
+            Element.el
+                [ Font.size 32
+                , Font.color Colours.grey
+                , Font.bold
+                , Element.paddingEach { eachZero | bottom = 16 }
+                ]
+                (Element.text "Execute Program on VM")
 
         totalSize =
             Element.paragraph