Added help dialog (displays keyboard shortcuts).

Author: Rob Whitaker

src/Planner/Component/Event.elm

@@ -44,4 +44,14 @@ loadProjectEvent event =
                         (Just { event | setContext <- Just Context.Default })
                         Nothing,
         setContext <- Just Context.Dialog
+    }
+
+showHelpEvent : Event
+showHelpEvent = 
+    { emptyEvent |
+        action <-
+            Event.Dialog <|
+                Dialog.Show  <|
+                    DialogBuilder.createDialog DialogBuilder.keyboardShortcutDialogModel,
+        setContext <- Just Context.Dialog 
     }

src/Planner/Component/Text.elm

@@ -12,34 +12,72 @@ confirmLoadProject = "Are you sure you want to load a new project? Any unsaved p
 
 newItemTitle = "new"
 
+---- KEYBOARD SHORTCUTS ----
+
+newProjectShortcut = ("New Project", "Ctrl+/")
+
+saveProjectShortcut = ("Save Project", "Ctrl+S")
+
+loadProjectShortcut = ("Load Project", "Ctrl+O")
+
+newNodeShortcut = ("New Node", "Ctrl+Return")
+
+renameNodeShortcut = ("Rename Node", "Return")
+
+toggleExpandedShortcut = ("Toggle Expanded", "Space")
+
+deleteNodeShortcut = ("Delete Node", "Del")
+
+moveNodeLeftShortcut = ("Move Node Left", "Ctrl+LeftArrow")
+
+moveNodeUpShortcut = ("Move Node Up", "Ctrl+UpArrow")
+
+moveNodeDownShortcut = ("Move Node Down", "Ctrl+DownArrow")
+
+moveNodeRightShortcut = ("Move Node Right", "Ctrl+RightArrow")
+
+moveSelectionUpShortcut = ("Move Selection Up", "UpArrow")
+
+moveSelectionDownShortcut = ("Move Selection Down", "DownArrow")
+
+editTitleShortcut = ("Focus Title", "Esc")
+
+toggleFocusShortcut = ("Change Focus", "Tab")
+
+showHelpShortcut = ("Show Keyboard Shortcuts", "h")
+
 ---- BUTTON ALT TEXT ----
 
-newProjectButtonAlt = "New Project (Ctrl+/)"
+scToAlt (actionStr, keyStr) = actionStr ++ " (" ++ keyStr ++ ")" 
 
-saveProjectButtonAlt = "Save Project (Ctrl+S)"
+newProjectButtonAlt = scToAlt newProjectShortcut
 
-loadProjectButtonAlt = "Load Project (Ctrl+O)"
+saveProjectButtonAlt = scToAlt saveProjectShortcut
 
-newNodeButtonAlt = "New Node (Ctrl+Return)"
+loadProjectButtonAlt = scToAlt loadProjectShortcut
 
-renameNodeButtonAlt = "Rename Node (Return)"
+newNodeButtonAlt = scToAlt newNodeShortcut
 
-toggleExpandedButtonAlt = "Toggle Expanded (Space)"
+renameNodeButtonAlt = scToAlt renameNodeShortcut
 
-deleteNodeButtonAlt = "Delete Node (Del)"
+toggleExpandedButtonAlt = scToAlt toggleExpandedShortcut
 
-moveNodeLeftButtonAlt = "Move Left (Ctrl+Left)"
+deleteNodeButtonAlt = scToAlt deleteNodeShortcut
 
-moveNodeUpButtonAlt = "Move Up (Ctrl+Up)"
+moveNodeLeftButtonAlt = scToAlt moveNodeLeftShortcut
 
-moveNodeDownButtonAlt = "Move Down (Ctrl+Down)"
+moveNodeUpButtonAlt = scToAlt moveNodeUpShortcut
 
-moveNodeRightButtonAlt = "Move Right (Ctrl+Right)"
+moveNodeDownButtonAlt = scToAlt moveNodeDownShortcut
+
+moveNodeRightButtonAlt = scToAlt moveNodeRightShortcut
 
 collapseAllButtonAlt = "Collapse All"
 
 expandAllButtonAlt = "Expand All"
 
+showHelpButtonAlt = scToAlt showHelpShortcut
+
 ---- MISC ----
 
 untitledSaveTitle = "untitled"

src/Planner/UI/Dialog.elm

@@ -12,8 +12,9 @@ type alias Dialog event = {
     keyboardInputMap : List Int -> Model event -> event
 }
 
-type Model event = 
-    ConfirmDialog { query : String, confirm : event, cancel : event, selectedOption : Int }
+type Model event 
+    = ConfirmDialog { query : String, confirm : event, cancel : event, selectedOption : Int }
+    | KeyboardShortcutDialog { keyMap : List (String, String) }
 
 type Action event
     = Show (Maybe (Dialog event))

src/Planner/UI/DialogBuilder.elm

@@ -4,11 +4,13 @@ import Planner.UI.Dialog as Dialog
 import Planner.Event as Event
 import Planner.Event exposing (emptyEvent)
 import Planner.UI.Context as Context
+import Planner.Component.Text as Text
 
 import Html exposing (..)
 import Html.Attributes exposing (..)
 import Html.Events exposing (..)
 import Maybe
+import List 
 
 ---- CONFIRM DIALOG ----
 
@@ -30,6 +32,40 @@ confirm query confirm cancel = let
             cancel <- Maybe.withDefault model.cancel cancel
         }
 
+---- KEYBOARD SHORTCUT DIALOG ----
+
+keyboardShortcutDialogModel : Dialog.Model Event.Event
+keyboardShortcutDialogModel = Dialog.KeyboardShortcutDialog {
+        keyMap = [
+                ("FILE", ""),
+                Text.newProjectShortcut,
+                Text.saveProjectShortcut,
+                Text.loadProjectShortcut, 
+
+                ("NODE OPERATIONS", ""),
+                Text.newNodeShortcut,
+                Text.renameNodeShortcut,
+                Text.toggleExpandedShortcut,
+                Text.deleteNodeShortcut,
+
+                ("NODE MOVEMENT", ""),
+                Text.moveNodeLeftShortcut,
+                Text.moveNodeUpShortcut,
+                Text.moveNodeDownShortcut,
+                Text.moveNodeRightShortcut,
+
+                ("SELECTION MOVEMENT", ""),
+                Text.moveSelectionUpShortcut,
+                Text.moveSelectionDownShortcut,
+
+                ("CHANGING FOCUS", ""),
+                Text.editTitleShortcut,
+                Text.toggleFocusShortcut,
+
+                ("HELP MENU", ""),
+                Text.showHelpShortcut
+            ]
+    }
 ---- DIALOG CREATION ----
 
 createDialog : Dialog.Model Event.Event -> Maybe (Dialog.Dialog Event.Event) 
@@ -52,7 +88,7 @@ createDialog model =
                         onClick address m'.cancel
                     ] [],
                     div [
-                        class "confirm-dialog",
+                        class "dialog",
                         style [("top", toString (h//2 - 167) ++ "px"), ("left", toString (w//2 - 257) ++ "px")]
                     ] [
                         h2 [] [text m'.query],
@@ -80,4 +116,39 @@ createDialog model =
                     [39]     -> { emptyEvent | action <- Event.Dialog (Dialog.Custom (Dialog.ChangeSelection 1)) }
                     _        -> emptyEvent
             }
+
+        Dialog.KeyboardShortcutDialog m -> Just {
+            model = model,
+
+            update action dialModel = dialModel,
+
+            keyboardInputMap keypresses dialModel = 
+                case keypresses of
+                    [27] -> { emptyEvent | action <- Event.Dialog Dialog.Hide, setContext <- Just Context.Default }
+                    [72] -> { emptyEvent | action <- Event.Dialog Dialog.Hide, setContext <- Just Context.Default }
+                    _ -> emptyEvent,
+
+            view (w,h) address dialModel =
+                let (Dialog.KeyboardShortcutDialog m') = dialModel
+                in div [] [
+                    div [
+                        class "modal-background",
+                        onClick address { emptyEvent | action <- Event.Dialog Dialog.Hide, setContext <- Just Context.Default }
+                    ] [],
+                    div [
+                        class "dialog keyboard-shortcuts",
+                        style [("top", toString ((toFloat h * 0.5) - (toFloat h * 0.8)/2) ++ "px"), ("left", toString (w//2 - 250) ++ "px"), ("height", toString (toFloat h * 0.8) ++ "px")]
+                    ] [
+                        ul [] <|
+                            List.foldr (\(actionStr, keyStr) acc -> let
+                                    color = (List.length acc) % 2
+                                    tag = if keyStr == "" 
+                                          then li [class "heading"] [h4 [] [text actionStr]] 
+                                          else li [class <| "color-" ++ toString color] [div [class "left-side"] [text actionStr], div [class "right-side"] [text keyStr]]
+                                    in tag :: acc
+                                ) [] m'.keyMap
+                    ]
+                ]
+            }
+
         _ -> Nothing 

src/Planner/Update.elm

@@ -6,7 +6,7 @@ import Planner.UI.Context as Context
 import Planner.UI.Context exposing (..)
 import Planner.Event as Event
 import Planner.Event exposing (..)
-import Planner.Component.Event exposing (newProjectEvent, deleteNodeEvent)
+import Planner.Component.Event exposing (newProjectEvent, deleteNodeEvent, showHelpEvent)
 import Planner.UI.Dialog as Dialog
 import Planner.UI.DialogBuilder as DialogBuilder
 import Util.List exposing (takeWhile, dropWhile)
@@ -135,6 +135,7 @@ keyPressesToEvent keypresses state = case keypresses of
             [40]     -> { emptyEvent | action <- MoveSelection Down }
             [27]     -> { emptyEvent | setContext <- Just TitleInput }
             [9]      -> { emptyEvent | setContext <- Just MainTextArea }
+            [72]     -> showHelpEvent
             _        -> emptyEvent
 
         Context.Dialog ->

src/Planner/View.elm

@@ -7,7 +7,7 @@ import Planner.Data.Tree exposing (Tree)
 import Planner.Data.Tree as T
 import Planner.Event as Event
 import Planner.Event exposing (..)
-import Planner.Component.Event exposing (newProjectEvent, deleteNodeEvent)
+import Planner.Component.Event exposing (newProjectEvent, deleteNodeEvent, showHelpEvent)
 import Planner.Component.Text as Text
 
 import Html exposing (..)
@@ -43,7 +43,6 @@ render address state (w, h) = let
         ],
         div [class "options-bar", onClick address {emptyEvent | setContext <- Just Context.Default } ] [
             i [class "fa fa-file-text-o icon", onClick address newProjectEvent, alt Text.newProjectButtonAlt, title Text.newProjectButtonAlt] [],
-            -- TODO : address was saveFile.address (fix wiring later)
             i [class "fa fa-download icon", onClick address { emptyEvent | action <- SaveProject }, alt Text.saveProjectButtonAlt, title Text.saveProjectButtonAlt] [],
             label [for "loadButton"] [
                 Html.form [id "loadWrapperForm"] [ 
@@ -63,7 +62,8 @@ render address state (w, h) = let
             i [class "fa fa-arrow-right icon", onClick address { emptyEvent | action <- MoveNode T.Lower, setContext <- Just Context.Default }, alt Text.moveNodeRightButtonAlt, title Text.moveNodeRightButtonAlt ] [],
             div [class "divider"] [],
             i [class "fa fa-caret-square-o-up icon", onClick address { emptyEvent | action <- SetAllExpanded False, setContext <- Just Context.Default }, alt Text.collapseAllButtonAlt, title Text.collapseAllButtonAlt ] [],
-            i [class "fa fa-caret-square-o-down icon", onClick address { emptyEvent | action <- SetAllExpanded True, setContext <- Just Context.Default }, alt Text.expandAllButtonAlt, title Text.expandAllButtonAlt ] []
+            i [class "fa fa-caret-square-o-down icon", onClick address { emptyEvent | action <- SetAllExpanded True, setContext <- Just Context.Default }, alt Text.expandAllButtonAlt, title Text.expandAllButtonAlt ] [],
+            i [class "fa fa-question-circle icon", style [("float","right")], onClick address showHelpEvent, alt Text.showHelpButtonAlt, title Text.showHelpButtonAlt] []
         ],
         div [
             class "main-container",

styles/dialog.css

@@ -9,9 +9,7 @@
     z-index: 10;
 }
 
-/*CONFIRM DIALOG*/
-
-.confirm-dialog {
+.dialog {
     position: absolute;
     top: 1em;
     width: 500px;
@@ -22,9 +20,56 @@
     border-radius: 1em;
     padding: 14px;
     text-align: center;
+    overflow: auto;
+}
+
+
+/* KEYBOARD SHORTCUTS DIALOG */
+
+.keyboard-shortcuts {
+    width: 500px;
+    /*height: 500px;*/
+    padding: 0;
+    text-align: center;
+    background-color: #fff;
+}
+
+.keyboard-shortcuts li {
+    display: block;
+    min-height: 2em;
+    padding-top: 1em;
+}
+
+.keyboard-shortcuts ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.left-side {
+    width: 50%;
+    float: left;
+    display: inline-block;
+    text-align: center;
+}
+
+.right-side {
+    width: 50%;
+    float: left;
+    display: inline-block;
+    text-align: center;
+}
+
+.color-0 {
+    background-color: rgba(10, 204, 222, 0.7);
 }
 
-.confirm-dialog button {
+.color-1 {
+    background-color: rgba(10, 204, 222, 0.3);
+}
+/*CONFIRM DIALOG*/
+
+.dialog button {
     border-radius: 0.5em;
     padding: 0.5em 1.5em;
     font-size: 24px;
@@ -33,7 +78,7 @@
     cursor: pointer;
 }
 
-.confirm-dialog h2 {
+.dialog h2 {
     padding-top: 2em;
 }
 
@@ -43,7 +88,7 @@
     margin: 1em 1em 0 0;
 }
 
-.confirm-dialog button.cancel-button {
+.dialog button.cancel-button {
     border: 1px solid #aaa;
     color: #999;
     margin: 1em 1em 0 0;
@@ -53,7 +98,7 @@
     background-color: #08bbcc;
 }
 
-.confirm-dialog button.cancel-button:hover {
+.dialog button.cancel-button:hover {
     background-color: #ccc;
     color: black;
     border: 1px solid black;