From 7c5a62d57a4b156ffcf2dc5b678e5d7f8e904f7a Mon Sep 17 00:00:00 2001
From: Danila Fedorin <danila.fedorin@gmail.com>
Date: Fri, 31 May 2019 23:54:11 -0700
Subject: [PATCH] Add some visual changes to improve usability

---
 src/CacheSim/Model.elm  |  1 +
 src/CacheSim/Update.elm |  8 ++++++++
 src/CacheSim/View.elm   | 13 ++++++++-----
 src/Main.elm            |  1 +
 static/scss/style.scss  |  4 ++++
 5 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/CacheSim/Model.elm b/src/CacheSim/Model.elm
index f1b8f24..d8a1a23 100644
--- a/src/CacheSim/Model.elm
+++ b/src/CacheSim/Model.elm
@@ -17,5 +17,6 @@ type Msg
     | UseHierarchy (Maybe CacheModelHierarchy)
     | Access (List Int)
     | ChangeAccessInput String
+    | AccessViewCancel
     | AccessViewForward
     | AccessViewBack
diff --git a/src/CacheSim/Update.elm b/src/CacheSim/Update.elm
index d10ed3c..71f5c36 100644
--- a/src/CacheSim/Update.elm
+++ b/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
diff --git a/src/CacheSim/View.elm b/src/CacheSim/View.elm
index b2b8e34..792ec9c 100644
--- a/src/CacheSim/View.elm
+++ b/src/CacheSim/View.elm
@@ -39,7 +39,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
@@ -163,9 +166,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
+            [ [ primaryButton "Back" AccessViewBack, primaryButton "Forward" AccessViewForward ]
+            , [ dangerButton "Stop" AccessViewCancel ]
             ]
         , h3 [] [ text "Access event log" ]
         , viewAccessLog av
@@ -221,7 +224,7 @@ viewAccessInput m =
             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" ]
diff --git a/src/Main.elm b/src/Main.elm
index dd97deb..fcf0c7d 100644
--- a/src/Main.elm
+++ b/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
 
diff --git a/static/scss/style.scss b/static/scss/style.scss
index fcf8bc9..793442e 100644
--- a/static/scss/style.scss
+++ b/static/scss/style.scss
@@ -1,3 +1,7 @@
 .btn-group {
     width: min-content;
 }
+
+.btn:focus {
+    box-shadow: none;
+}