WIP: starting to add controls, polishing interface

frontend/resources/public/site.css

@@ -7,6 +7,7 @@ body {
   font-size: 1.125em;
   color: #333;
   line-height: 1.5em;
+  overflow: hidden;
 }
 
 h1, h2, h3 {
@@ -33,6 +34,12 @@ a:hover {
   text-decoration: underline;
 }
 
+#main-table {
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
 table {
     border-collapse: collapse;
 }
@@ -66,6 +73,69 @@ td input:not(:focus) {
 }
 
 
+#controls {
+    --controls-width: 75px;
+    --controls-padding: 5px;
+    --controls-opener-width: 15px;
+}
+#controls > div, #controls > button {
+    position: fixed;
+    overflow: hidden;
+}
+/* TODO: design square logo for microtables */
+#main-logo {
+    background-color: lightblue;
+    z-index: 999;
+    left: 0;
+    bottom: 0;
+    padding: var(--controls-padding);
+    height: var(--controls-width);
+    width: var(--controls-width);
+    font-size: xxx-large;
+    font-weight: bold;
+    text-align: center;
+}
+#left-controls-button {
+    left: 0;
+    width: calc(var(--controls-width) + 2 * var(--controls-padding));
+    height: var(--controls-opener-width);
+    z-index: 999;
+    bottom: calc(var(--controls-width) + 2 * var(--controls-padding));
+}
+#bottom-controls-button {
+    bottom: 0;
+    height: calc(var(--controls-width) + 2 * var(--controls-padding));
+    width: var(--controls-opener-width);
+    z-index: 999;
+    left: calc(var(--controls-width) + 2 * var(--controls-padding));
+}
+#controls-left {
+    background-color: pink;
+    z-index: 998;
+    top: 0;
+    left: calc(-1 * var(--controls-width) - 2 * var(--controls-padding));
+    padding: 5px;
+    height: calc(100vh - var(--controls-padding));
+    width: var(--controls-width);
+}
+/*TODO: link left controls with position of the whole table*/
+#controls-left.open {
+    left: 0;
+}
+#controls-bottom {
+    background-color: lightblue;
+    z-index: 998;
+    left: 0;
+    bottom: calc(-1 * var(--controls-width) - 2 * var(--controls-padding));
+    height: var(--controls-width);
+    padding: var(--controls-padding);
+    padding-left: calc(var(--controls-width) + 3 * var(--controls-padding) + var(--controls-opener-width));
+    width: calc(100vw - var(--controls-width) - 4 * var(--controls-padding) - var(--controls-opener-width));
+}
+#controls-bottom.open {
+    bottom: 0;
+}
+
 .smartborder {
     width: calc(100% + 2px);
     height: calc(100% + 2px);

frontend/src/cljs/microtables_frontend/db.cljs

@@ -2,6 +2,7 @@
 
 (def default-db
   {
+   :controls nil
    ;TODO: add "start" and "end" corners as selection
    :position {:cursor nil
               :selection nil}

frontend/src/cljs/microtables_frontend/events.cljs

@@ -67,3 +67,9 @@
     (println "fx for :press-enter" c r)
     (.focus (.getElementById js/document (str c r)))))
 
+
+(re-frame/reg-event-db
+ ::set-controls-state
+ (fn [db [_ new-state]]
+   (println "::set-controls-state" new-state)
+   (assoc-in db [:controls] new-state)))

frontend/src/cljs/microtables_frontend/subs.cljs

@@ -2,6 +2,12 @@
   (:require
    [re-frame.core :as re-frame]))
 
+(re-frame/reg-sub
+ ::controls-state
+ (fn [db]
+  (println "reporting state of controls")
+  (:controls db)))
+
 
 ;TODO: insert other display mode data? ("value": formula (cursor), "display" (default): evaluated, "highlighted": in a selection (just a class?))
 (re-frame/reg-sub

frontend/src/cljs/microtables_frontend/utils.cljs

@@ -152,6 +152,10 @@
   [data pred]
   (reduce-kv (fn [l c column] (concat l (map (fn [[r _]] {:col c :row r}) (filter (fn [[r datum]] (pred c r datum)) column)))) '() data))
 
+; proposed alternative (the beginning of one) to walk-get-refs
+;(defn col-map? [m] (and (map? m) (every? #(and (string? %) (re-matches #"[A-Z]+" %)) (keys m))))
+;(defn row-map? [m] (and (map? m) (every? #(and (integer? %) (pos? %)) (keys m))))
+;(defn get-all-cells [data] (filter #(not (or (col-map? %) (row-map? %))) (tree-seq #(and (map? %) (or (col-map? %) (row-map? %))) vals data)))
 
 (defn create-all-back-references
   "Assuming all references have been added, insert all back references."

frontend/src/cljs/microtables_frontend/views.cljs

@@ -34,18 +34,60 @@
                       (map (fn [c] ^{:key (str "col-head-" c)} [:th c]) cols))])
 
 (defn sheet [data]
-  [:table [:tbody
-           (let [maxrow (utils/highest-row data)
-                 cols (take-while (partial not= (utils/next-letter (utils/highest-col data))) utils/col-letters)]
-             (cons
-               (header-row cols)
-               (map #(row % cols data) (range 1 (inc maxrow)))))]])
+  [:table
+   {:id "main-table"}
+   [:tbody
+    ;TODO: figure out appropriate starting values for maxrow and maxcol (maybe keep them intentionally small)
+    ;TODO: figure out movement (maybe allow scroll overflow)
+    (let [maxrow 50;(utils/highest-row data)
+          maxcol "L";(utils/highest-col data)
+          cols (take-while (partial not= (utils/next-letter maxcol)) utils/col-letters)]
+      (cons
+        (header-row cols)
+        (map #(row % cols data) (range 1 (inc maxrow)))))]])
 
+(defn controls []
+  [:div
+   [:button "one"]
+   ;extend range (number field, then shrink/left/up and expand/right/down buttons on either side)
+   ;fill range (single tap, single column/row fill? number field and button?)
+   ;move range (designate new "top-left corner" cell for range, figure out overwriting destination cells)
+   ;empty range (delete contents, re-evaluate)
+   ;delete range (figure out how to move cells over)
+   ;copy range (figure out clipboard)
+   [:button "two"]])
+
+(defn controls-group [state]
+  [:div
+   {:id "controls"}
+   [:div
+    ;TODO: link left controls with position of the whole table
+    {:id "controls-left"
+     :class (if (= state :left) "open" "")}
+    [controls]]
+   [:div
+    {:id "controls-bottom"
+     :class (if (= state :bottom) "open" "")}
+    [controls]]
+   ;←↑→↓
+   [:button
+    {:id "left-controls-button"
+     :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :left) nil :left)])}
+    (if (= state :left) "←" "→")]
+   [:button
+    {:id "bottom-controls-button"
+     :on-click #(re-frame/dispatch [::events/set-controls-state (if (= state :bottom) nil :bottom)])}
+    (if (= state :bottom) "↓" "↑")]
+   [:div
+    {:id "main-logo"
+     :title "Microtables"}
+    "M"]])
 
 (defn main-panel []
-  (let [data (re-frame/subscribe [::subs/table-data])]
+  (let [data (re-frame/subscribe [::subs/table-data])
+        controls-state (re-frame/subscribe [::subs/controls-state])]
     [:div
-     [:h1 "Microtables"]
-     [sheet @data]]))
+     [sheet @data]
+     [controls-group @controls-state]]))