Add some other minor visual fixes

src/CacheSim/Model.elm

@@ -17,5 +17,6 @@ type Msg
     | UseHierarchy (Maybe CacheModelHierarchy)
     | Access (List Int)
     | ChangeAccessInput String
+    | AccessViewCancel
     | AccessViewForward
     | AccessViewBack

src/CacheSim/Update.elm

@@ -60,6 +60,14 @@ updateAccess li m =
     in
         (newModel, cmd)
 
+updateAccessViewCancel : Model -> (Model, Cmd Msg)
+updateAccessViewCancel m =
+    let
+        newModel = { m | accessView = Nothing }
+        cmd = Cmd.none
+    in
+        (newModel, cmd)
+
 updateAccessViewForward : Model -> (Model, Cmd Msg)
 updateAccessViewForward m =
     let

src/CacheSim/View.elm

@@ -22,6 +22,9 @@ disabledButton attrs = button (attrs ++ [ disabled True ])
 dangerButton : String -> Msg -> Html Msg
 dangerButton s m = button [ onClick m, class "btn-danger" ] s
 
+infoButton : String -> Msg -> Html Msg
+infoButton s m = button [ onClick m, class "btn-info" ] s
+
 primaryButton : String -> Msg -> Html Msg
 primaryButton s m = button [ onClick m, class "btn-primary" ] s
 
@@ -39,7 +42,10 @@ resultButton = maybeButton << Result.toMaybe
 
 -- Button wrapper (button group)
 buttonWrapper : List (Html Msg) -> Html Msg
-buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True) ] ]
+buttonWrapper = div [ classList [("btn-group", True), ("mb-3", True), ("mr-3", True) ] ]
+
+buttonToolbar : List (List (Html Msg)) -> Html Msg
+buttonToolbar ll = div [ class "btn-toolbar" ] <| List.map buttonWrapper ll
 
 -- Input with a label
 labeledInput : String -> String -> (String -> Msg) -> Html Msg
@@ -102,8 +108,8 @@ viewRawCacheModelHierarchy rcmh =
                 Ok _ -> viewError True ""
                 Err e -> viewError False e
         
-        newButton = primaryButton "Add level" CreateRawModel
-        useButton = resultButton checkedResult [ class "btn-primary" ] "Start simulation" (UseHierarchy << Just) 
+        newButton = infoButton "Add level" CreateRawModel
+        useButton = resultButton checkedResult [ class "btn-info" ] "Start simulation" (UseHierarchy << Just) 
     in
         div []
             [ h2 [] [ text "Cache hierarchy" ]
@@ -163,9 +169,9 @@ viewAccessView m av =
     div []
         [ h2 [] [ text "Access Simulation" ]
         , p [] [ text ("Simulating access of address " ++ String.fromInt av.blockAddr) ]
-        , buttonWrapper
-            [ primaryButton "Back" AccessViewBack
-            , primaryButton "Forward" AccessViewForward
+        , buttonToolbar
+            [ [ infoButton "Back" AccessViewBack, infoButton "Forward" AccessViewForward ]
+            , [ dangerButton "Stop" AccessViewCancel ]
             ]
         , h3 [] [ text "Access event log" ]
         , viewAccessLog av
@@ -216,12 +222,12 @@ viewAccessInput m =
             case parseResult of
                 Ok is -> if is == [] then Err "Please enter at least one number." else Ok is
                 Err e -> Err <| parseErrorToString e
-        accessButton = resultButton checkedResult [ class "btn-primary" ] "Access address" Access
+        accessButton = resultButton checkedResult [ class "btn-info" ] "Access address" Access
         errorHtml =
             case checkedResult of
                 Ok _ -> viewError True ""
                 Err e -> viewError False e
-        editHierarchyButton = secondaryButton "Edit hierarchy" (UseHierarchy Nothing)
+        editHierarchyButton = button [ onClick (UseHierarchy Nothing), class "btn-dark" ] "Edit hierarchy"
     in
         div []
             [ h2 [] [ text "Run access simulation" ]

src/Main.elm

@@ -35,6 +35,7 @@ update msg m =
         UseHierarchy cmh -> updateUseHierarchy cmh m
         Access i -> updateAccess i m
         ChangeAccessInput s -> ({ m | accessInput = s }, Cmd.none)
+        AccessViewCancel -> updateAccessViewCancel m
         AccessViewForward -> updateAccessViewForward m
         AccessViewBack -> updateAccessViewBack m
 

static/scss/style.scss

@@ -1,3 +1,7 @@
 .btn-group {
     width: min-content;
 }
+
+.btn:focus {
+    box-shadow: none;
+}