Add true mode icons

ravichugh · Sep 16, 2018 · 311c2b5 · 311c2b5
1 parent b004be6
commit 311c2b5
Show file tree

Hide file tree

Showing 9 changed files with 5,561 additions and 9 deletions.
diff --git a/build/out/main.css b/build/out/main.css
@@ -587,13 +587,13 @@ code {
 .mode-indicator {
   align-self: center;
 
-  width: 5px;
-  height: 5px;
+  width: 6px;
+  height: 6px;
   background-color: var(--pop-color-clear);
   transition: background-color 0.2s;
 
   border: 1px solid var(--subtle-border-color);
-  border-radius: 5px;
+  border-radius: 6px;
 }
 
 .mode-icon-wrapper.active .mode-indicator {
@@ -618,6 +618,11 @@ code {
   text-align: center;
 }
 
+.mode-icon .text-button img {
+  width: 100%;
+  height: 100%;
+}
+
 .mode-separator {
   background-color: var(--subtle-border-color);
   width: 1px;

diff --git a/img/mode-icons/Deuce.ai b/img/mode-icons/Deuce.ai
diff --git a/img/mode-icons/Deuce.svg b/img/mode-icons/Deuce.svg
diff --git a/img/mode-icons/Text.ai b/img/mode-icons/Text.ai
diff --git a/img/mode-icons/Text.svg b/img/mode-icons/Text.svg
diff --git a/img/mode-icons/TypeInspector.ai b/img/mode-icons/TypeInspector.ai
diff --git a/img/mode-icons/TypeInspector.svg b/img/mode-icons/TypeInspector.svg
diff --git a/src/Makefile b/src/Makefile
@@ -13,7 +13,7 @@ html: elm-stuff/packages
 	cd ../ace-builds/src && cp $(out_from_ace-builds) ../../build/out/
 	cp ../viz.js/viz.js ../build/out/
 	mkdir -p ../build/out/img
-	cp ../img/* ../build/out/img/
+	cp -r ../img/* ../build/out/img/
 	# sed -i '' 's/var Elm = {};/var Elm = {};\nElm["EvalUpdate"] = Elm["EvalUpdate"] || {};\nElm["EvalUpdate"].api = _user$$project$$EvalUpdate$$api;/g' ../build/out/sns.js
 
 all: elm-stuff/packages prelude examples html

diff --git a/src/View.elm b/src/View.elm
@@ -1586,14 +1586,14 @@ codePanel model =
         active =
           Model.modeActive model mode
 
-        caption =
+        (modeName, imageName) =
           case mode of
             Model.CEText ->
-              "Text"
+              ("Text", "Text")
             Model.CEDeuceClick ->
-              "Deuce"
+              ("Deuce", "Deuce")
             Model.CETypeInspector ->
-              "Type Inspector"
+              ("Type Inspector", "TypeInspector")
       in
         Html.div
           [ Attr.classList
@@ -1606,7 +1606,20 @@ codePanel model =
               []
           , Html.div
               [ Attr.class "mode-icon" ]
-              [ simpleTextButton caption (Controller.msgSetCodeEditorMode mode)
+              [ textButton
+                  { defaultTb
+                      | content =
+                          [ Html.img
+                              [ Attr.src <|
+                                  "img/mode-icons/" ++ imageName ++ ".svg"
+                              , Attr.title <|
+                                  modeName ++ " Mode"
+                              ]
+                              []
+                          ]
+                      , onClick =
+                          Controller.msgSetCodeEditorMode mode
+                  }
               ]
           ]
     modeSeparator =