Skip to content
Permalink
Browse files

Add many sections to help

  • Loading branch information...
mattboehm committed Dec 5, 2017
1 parent 56b83e2 commit 66a193ce9ed76d3e74d8af457947f99d91ab9050
@@ -5,10 +5,10 @@ Give it a try at http://dottask.mattboehm.rocks

# Developing

Install leiningen, cd into the repo and run `lein figwheel`. If using the arrow keys in the repl doesn't work, install rlwrap and run `rlwrap lein figwheel` instead.
Install leiningen, cd into the repo and run `lein figwheel dev help`. If using the arrow keys in the repl doesn't work, install rlwrap and run `rlwrap lein figwheel dev help` instead.

Once running, visit `file:///path/to/repo/index.html` to see the site.

# Building a new release

This project is designed to be hosted on gh-pages. To make a new build, check out the `gh-pages` branch, merge master into it, run `lein cljsbuild once release`, and commit the changes.
This project is designed to be hosted on gh-pages. To make a new build, check out the `gh-pages` branch, merge master into it, run `lein cljsbuild once release help-release`, and commit the changes.
@@ -1,6 +1,5 @@
(ns dottask.core
(:require
[dottask.help :as help]
[reagent.core :as reagent]
[clojure.string :as string]
[cljs.reader :as reader]
@@ -10,12 +9,7 @@
[goog.events :as events]
[goog.html.SafeHtml :as shtml]
[goog.string :as gstring]
[historian.core :as hist]
[tubax.core :as tbx])
(:require-macros
[historian.core :as hist]
)
(:import [goog.events EventType])
)
;; Constants
;Colors for the nodes. :shortcut is the keyboard shortcut to set selected node that color
@@ -37,7 +31,7 @@
{:name "blue" :hex "#4E638E" :shortcut "b"}
;{:name "#2D4471" :hex "#2D4471"}
;{:name "#7788AA" :hex "#7788AA"}
{:name "purple" :hex "#744B8E" :shortcut "v"}
{:name "violet" :hex "#744B8E" :shortcut "v"}
;{:name "#562A72" :hex "#562A72"}
;{:name "#9675AB" :hex "#9675AB"}
])
@@ -135,41 +129,26 @@
(defn get-node [nodes id]
(first (filter #(= id (:id %)) nodes))
)
(defn show-help []
(js/alert (str
"Mouse:\n"
"\tclick on card text: change text\n"
"\tdouble-click on card: add box around card\n"
"\tdrag from one card to another: link/unlink cards\n"
"\t hold down shift to set/change the label for the link\n"
"\tdrag from one card to empty space above/below:\n"
"\t create card linked to/from start card\n"
"\t hold down shift to 'split' the card into 2\n"
"\tdrag between cards and box titles: box/unbox cards\n"
"Buttons:\n"
"\tx: delete card/box\n"
"\thandle at bottom right: resize card\n"
"Keyboard Shortcuts:\n"
"\tj/k: go to previous/next card\n"
"\tEsc: de-select card\n"
"\td: delete selected card\n"
"\te: edit text of selected card\n"
"\ti: put selected card inside a new box\n"
"\t" (clojure.string/join "/" (map :shortcut colors)) ": change color of selected card to " (clojure.string/join "/" (map :name colors)) "\n"
"\t</>: add card before/after\n"
"\t-: link/unlink cards (first on source, then target)\n"
"Saving: clicking save adds all the page state to the url hash. "
"This can be bookmarked so that you can reload the page later "
"and pick up where you left off."
))
)
;get a node's width/height, using the proper defaults if they're not set
(defn get-node-dim [node dim]
(case dim
:width (or (:width node) 2)
:height (or (:height node) 1.2)
)
)
(defn get-el [selector]
(.querySelector js/document selector)
)
(defn a-link
([id text]
(a-link id text nil)
)
([id text func]
[:a {
:href "javascript:"
:on-click (fn [] (when func (func)) (js/setTimeout (fn [] (->> (str "#" id) (get-el) (.scrollIntoView) )) 1))}
text]
))
;get the node id off of a clicked element. looks it up via the data-nodeid html attribute
(defn el->nodeid [el]
(let [node (dom/getAncestorByClass el "node-overlay")
@@ -47,7 +47,7 @@
; This is separate from the app-state because we don't want undo/redo to toggle popups, only the graph state
(defonce ui-state (reagent/atom {
:bulk-add-modal-visible? false ;setting this to true makes the bulk add modal pop up
:help-visible? true
:help-visible? false
:resize-points nil ;while dragging the node resize handle, this stores size for the node (upper left corner is node's upper left, bottom right is position of the mouse). When this is set, a preview of the new node is rendered.
;:resize-points {:x {:min 162, :max 326}, :y {:min -452, :max -316}}
}))
@@ -757,7 +757,8 @@
(keyed-modal ui-state :bulk-add-modal-visible? {:class "bulk-modal"}
[:div
[:div {:class "modal-title"} "Bulk Add"]
[:div "Add a line of text for each node you want created"]
[:div "Add a line of text for each node you want created " [core/a-link "bulk-add" "help" (fn [] (swap! ui-state assoc :help-visible? true))]]

[:select {:value @mode :on-change #(reset! mode (-> % .-target .-value))}
[:option {:value "ignore"} "ignore"]
[:option {:value "link"} "link"]
@@ -803,13 +804,15 @@
[:button {:on-click hist/redo!} "Redo"]
[:button {:on-click #(let [w (js/window.open)] (.write (.-document w) (str "<pre>" (core/hesc (graph->dot (:nodes @app-state) (:deps @app-state) (:clusters @app-state) ((:direction @app-state) core/directions) true)) "</pre>")))} "Show dot"]
[:button {:on-click (core/toggler ui-state :help-visible?)} "Help"]
[:div {:class (str "help-window" (when-not (:help-visible? @ui-state) " hidden")) :style {:position "fixed" :right "0px" :width "35%" :height "100%" :z-index "99999" :background-color "#f6f6f6" :overflow-y "auto" :padding "10px" :box-shadow "0 0 8px 2px #666" :border "1px solid #666"}}
[:div {:style {:position "absolute" :right "0px" :top "0px"}}
[:div {:class (str "help-window" (when-not (:help-visible? @ui-state) " hidden")) :style {:position "fixed" :right "0px" :width "35%" :height "100%" :z-index "99999" :background-color "#f6f6f6" :padding "10px" :box-shadow "0 0 8px 2px #666" :border "1px solid #666"}}
[:div {:style {:position "relative" :width "100%" :text-align "right" :padding-right "20px"}}
[:a {:href "./help.html" :target "_blank" :on-click (core/toggler ui-state :help-visible?)} "Pop out"]
" "
[:a {:href "javascript:" :on-click (core/toggler ui-state :help-visible?)} "Close"]
]
[help/page help/dottask-help]
[:div {:style {:overflow-y "auto" :height "100%"}}
[help/page help/dottask-help]
]
]
[bulk-add-modal]
[:div {:class "dotgraph"
@@ -1,70 +1,91 @@
(ns dottask.help
(:require
[reagent.core :as reagent]
;[clojure.string :as string]
;[cljs.reader :as reader]
;[devtools.core :as devtools]
;[goog.dom :as dom]
;[goog.dom.classlist :as classlist]
;[goog.events :as events]
;[goog.html.SafeHtml :as shtml]
;[goog.string :as gstring]
;[historian.core :as hist]
;[tubax.core :as tbx]
[dottask.core :as core]
)
(:require-macros
;[historian.core :as hist]
)
;(:import [goog.events EventType])
)

(defn get-el [selector]
(.querySelector js/document selector)
)
(defn a-link [id text]
[:a {
:href "javascript:"
:on-click (fn [] (->> (str "#" id) (get-el) (.scrollIntoView) ))}
text]
)
(def dottask-help [
{:id "cards" :title "Cards" :contents [
[:div {:style {:display "block" :position "relative"} :class "node-overlay"} [:div {:class "task-text"} "sample card"]]
"Cards (or 'nodes') are the basic units of the graph"
{:id "add-card" :title "Add a card" :contents ["Click the 'Add card' button"]}
{:id "delete-card" :title "Delete a card" :contents ["Hover over it then clicking the x button that appears in the upper right"]}
{:id "card-text" :title "Change card text" :contents ["Click on the light box inside the card"]}
{:id "card-color" :title "Change card color" :contents ["Hover over it and click a colored square in the right panel"]}
]}
[:div {:style {:display "block" :position "relative"} :class "node-overlay"} [:div {:class "task-text"} "sample card"]]
"Cards (or 'nodes') are the basic units of the graph"
{:id "add-card" :title "Add a card" :contents ["Click the 'Add card' button"]}
{:id "delete-card" :title "Delete a card" :contents ["Hover over it then clicking the x button that appears in the upper right"]}
{:id "card-text" :title "Change card text" :contents ["Click on the light box inside the card"]}
{:id "card-color" :title "Change card color" :contents ["Hover over it and click a colored square in the right panel"]}
]}
{:id "links" :title "Links" :contents [
"Cards can be linked together"
{:id "link-card" :title "Link/unlink cards" :contents ["Drag the mouse from the source to the target"]}
{:id "link-label" :title "Change link label" :contents ["Hold down shift while dragging from source to target cards"]}
]}
"Cards can be linked together"
{:id "link-card" :title "Link/unlink cards" :contents ["Drag the mouse from the source to the target"]}
{:id "link-label" :title "Change link label" :contents ["Hold down shift while dragging from source to target cards"]}
]}
{:id "card-drag" :title "Add cards via dragging" :contents [
[:span {} "If you already have card A and you know you want to create B then link A -> B, you could do this by " (a-link "add-card" "adding the card") " and then " (a-link "link-card" "creating the link") ". However, using dragging can be much faster"]
{:id "drag-card" :title "Add card and link it to an existing card" :contents ["Click down on the card and drag your mouse to empty space above/below the card to add a linked card before/after."]}
"If your graph has A->C and you want to change this to A->B->C, you can quickly do this by 'splitting' one of the cards"
{:id "split-card" :title "Split a card" :contents ["Hold down shift while dragging from the card to an empty space before/after"]}
]}
[:span {} "If you already have card A and you know you want to create B then link A -> B, you could do this by " (core/a-link "add-card" "adding the card") " and then " (core/a-link "link-card" "creating the link") ". However, using dragging can be much faster"]
{:id "drag-card" :title "Add card and link it to an existing card" :contents ["Click down on the card and drag your mouse to empty space above/below the card to add a linked card before/after."]}
"If your graph has A->C and you want to change this to A->B->C, you can quickly do this by 'splitting' one of the cards"
{:id "split-card" :title "Split a card" :contents ["Hold down shift while dragging from the card to an empty space before/after"]}
]}
{:id "clusters" :title "Clusters" :contents [
"Cards can be grouped into clusters which appear as a box with a label. If all of a cluster's contents are deleted, it is removed."
{:id "add-cluster-card" :title "Create a cluster around a card" :contents ["Double click on the card's border (outside the white text area)"]}
{:id "add-cluster-cluster" :title "Create a cluster around a cluster" :contents ["Drag from the cluster text to empty space above"]}
{:id "toggle-card-cluster" :title "Add/remove card to/from cluster" :contents ["Drag from the card to the cluster text (or vice versa)"]}
{:id "toggle-cluster-cluster" :title "Add/remove cluster to/from cluster" :contents ["Drag from the child cluster text to the parent cluster text"]}
{:id "collapse-cluster" :title "Collapse a cluster" :contents ["Click the minus sign in the upper right. The cluster is shrunk to look like a card, all its contents are hidden, and any links going in/out of contents of the cluster now go in/out of the cluster card."]}
{:id "expand-cluster" :title "Expand a collapsed cluster" :contents ["Click on its dark border"]}
{:id "delete-cluster" :title "Delete a cluster" :contents ["Click the x in the upper right. If it is collapsed, its contents are also deleted."]}

"Cards can be grouped into clusters which appear as a box with a label. If all of a cluster's contents are deleted, it is removed."
{:id "add-cluster-card" :title "Create a cluster around a card" :contents ["Double click on the card's border (outside the white text area)"]}
{:id "add-cluster-cluster" :title "Create a cluster around a cluster" :contents ["Drag from the cluster text to empty space above"]}
{:id "toggle-card-cluster" :title "Add/remove card to/from cluster" :contents ["Drag from the card to the cluster text (or vice versa)"]}
{:id "toggle-cluster-cluster" :title "Add/remove cluster to/from cluster" :contents ["Drag from the child cluster text to the parent cluster text"]}
{:id "collapse-cluster" :title "Collapse a cluster" :contents ["Click the minus sign in the upper right. The cluster is shrunk to look like a card, all its contents are hidden, and any links going in/out of contents of the cluster now go in/out of the cluster card."]}
{:id "expand-cluster" :title "Expand a collapsed cluster" :contents ["Click on its dark border"]}
{:id "delete-cluster" :title "Delete a cluster" :contents ["Click the x in the upper right. If it is collapsed, its contents are also deleted."]}
]}
{:id "bulk-add" :title "Bulk Add" :contents [
"If you want to add multiple cards at the same time, click 'Bulk add' and put each node label on a separate line"
"There are three different modes for handling indented lines. For the examples below, let's look at what happens if the following text were used:"
[:pre "1\n 1.1\n 1.2\n 1.2.1\n 1.2.2"]
{:id "bulk-add-ignore" :title "ignore mode" :contents ["Whitespace is trimmed from the ends and ignored" [:img {:src "static/bulk_ignore.png" :style {:zoom 0.6}}]]}
{:id "bulk-add-link" :title "link mode" :contents ["Parents are linked to their children" [:img {:src "static/bulk_link.png" :style {:zoom 0.6}}]]}
{:id "bulk-add-cluster" :title "cluster mode" :contents ["Parents are turned into clusters that contain their children" [:img {:src "static/bulk_cluster.png" :style {:zoom 0.6}}]]}
]
}
{:id "saving" :title "Saving" :contents [
"When you click 'Save', the graph's state is serialized and saved to the URL hash."
"You can now bookmark the URL, put it in a shortener, send it to a friend, and more."
"If you save to a URL and update the graph, you need to click save again to get a new URL in order to preserve your changes."
"Some browsers have limits on how long the URL can be that may impact saving. I haven't hit the limit in chrome yet, but be forewarned that it may be possible."
]
}
{:id "keyboard-shortcuts" :title "Keyboard Shortcuts" :contents [
"Many of the site's actions also have keyboard shortcuts, which may sometimes be faster or more convenient than using a mouse"
{:id "shortcut-selecting" :title "Selecting cards" :contents [
"Many of the shortcuts below act on the selected card. You can select a card by clicking on its border or using the following keys:"
[:ul
[:li [:b "j: "] "Select next card"]
[:li [:b "k: "] "Select previous card"]
[:li [:b "Esc: "] "De-select card"]

]]}
{:id "shortcut-changing" :title "Changing cards" :contents [
"The following keys allow you to change the selected card (highlighted with a yellow border)"
[:ul
[:li [:b "d: "] "Delete card"]
[:li [:b "e: "] "Edit card text"]
[:li "Change card color:"
[:ul
(map (fn [color] [:li [:b (str (:shortcut color) ": ")] (:name color)]) core/colors)
]
]
]]}
{:id "shortcut-adding" :title "Adding items" :contents [
"Many of the shortcuts below act on the selected card. You can select a card by clicking on its border or using the following keys:"
[:ul
[:li [:b "</>: "] "Add card before/after selected one (like " (core/a-link "drag-card" "dragging from a card") ")"]
[:li [:b "-: "] "Link/unlink cards. The first time you hit it, it marks that node as the source. Then select the target node and hit it again to mark the target and create the link"]
]]}
]}
])

;[{:id "foo" :title "fooing a bar" :contents ["this is how you foo a bar"]}]
;anchor-link that scrolls to the element with the given ID
(defn toc-row[sect]
[:div {:class "toc-row"}
(a-link (:id sect) (:title sect))
(core/a-link (:id sect) (:title sect))
(->>
(:contents sect [])
(filter :contents)
@@ -102,5 +123,7 @@
(reagent/render
[page dottask-help]
(.getElementById js/document "help")))
(render!)
(when (core/get-el "#help")
(.log js/console "TST!!!!!")
(render!)
)
Binary file not shown.
BIN +2.93 KB static/bulk_ignore.png
Binary file not shown.
BIN +14.3 KB static/bulk_link.png
Binary file not shown.

0 comments on commit 66a193c

Please sign in to comment.
You can’t perform that action at this time.