Merge pull request #4 from Termina/dev

New UI; add process title

entry/main.css

@@ -2,7 +2,10 @@
 body {
   margin: 0;
   overscroll-behavior-y: none;
-}
+  background-color: rgb(44,66,92);
+  background-image: url(https://cdn.tiye.me/background/gnome-bg.jpg);
+  background-size: cover;
+ }
 
 body * {
   box-sizing: border-box;

package.json

@@ -25,6 +25,8 @@
   "license": "MIT",
   "dependencies": {
     "chalk": "^2.4.2",
+    "dayjs": "^1.8.11",
+    "feather-icons": "^4.19.0",
     "latest-version": "^5.0.0",
     "md5": "^2.2.1",
     "randomcolor": "^0.5.4",

src/app/client.cljs

@@ -43,7 +43,7 @@
       (case (:kind data)
         :patch
           (let [changes (:data data)]
-            (js/console.log "Changes" (clj->js changes))
+            (comment js/console.log "Changes" (clj->js changes))
             (reset! *store (patch-twig @*store changes)))
         (println "unknown kind:" data)))}))
 

src/app/comp/command.cljs

@@ -0,0 +1,119 @@
+
+(ns app.comp.command
+  (:require [hsl.core :refer [hsl]]
+            [respo-ui.core :as ui]
+            [respo-ui.colors :as colors]
+            [respo.core
+             :refer
+             [defcomp cursor-> mutation-> action-> <> span div input button a]]
+            [respo.comp.space :refer [=<]]
+            [feather.core :refer [comp-i]]
+            [inflow-popup.comp.popup :refer [comp-popup]]
+            [respo-alerts.comp.alerts :refer [comp-confirm]]
+            [app.style :as style]
+            [app.util :refer [join-path map-val]]))
+
+(defcomp
+ comp-command-button
+ (workflow)
+ (div
+  {:style {:background-color (hsl 60 90 47),
+           :padding "0 8px",
+           :display :inline-block,
+           :cursor :pointer,
+           :margin 8},
+   :on-click (fn [e d! m!]
+     (doseq [command (vals (:commands workflow))]
+       (d!
+        :effect/run
+        {:command (:code command),
+         :cwd (join-path (:base-dir workflow) (:path command)),
+         :title (:title command)})))}
+  (<> (:name workflow))))
+
+(defcomp
+ comp-command-editor
+ (states base-command on-submit)
+ (let [state (or (:data states)
+                 (if (some? base-command)
+                   (select-keys base-command [:code :path :title])
+                   {:title "", :code "", :path "./"}))]
+   (div
+    {:style ui/column}
+    (div {} (<> "Command" {:font-size 16, :font-family ui/font-fancy}))
+    (=< nil 8)
+    (input
+     {:style (merge ui/input {:width 320, :font-family ui/font-code}),
+      :value (:title state),
+      :placeholder "title...",
+      :on-input (mutation-> (assoc state :title (:value %e)))})
+    (=< nil 8)
+    (input
+     {:style (merge ui/input {:width 320, :font-family ui/font-code}),
+      :value (:code state),
+      :placeholder "Command code",
+      :on-input (mutation-> (assoc state :code (:value %e)))})
+    (=< nil 8)
+    (input
+     {:style (merge ui/input {:width 320, :font-family ui/font-code}),
+      :value (:path state),
+      :placeholder "Command path",
+      :on-input (mutation-> (assoc state :path (:value %e)))})
+    (=< nil 16)
+    (div
+     {:style ui/row-parted}
+     (span nil)
+     (button
+      {:style style/button, :on-click (fn [e d! m!] (on-submit state d! m!) (m! nil))}
+      (<> "Submit"))))))
+
+(defcomp
+ comp-command-row
+ (states command workflow-id)
+ (div
+  {:style (merge
+           ui/column
+           {:border (str "1px solid " (hsl 0 0 100 0.3)),
+            :border-radius "4px",
+            :padding "8px 8px",
+            :width 600,
+            :margin "16px 8px",
+            :color :white})}
+  (div
+   {:style ui/row-parted}
+   (<> (or (:title command) "Task") {:font-size 20})
+   (div
+    {:style ui/row-parted}
+    (cursor->
+     :add
+     comp-popup
+     states
+     {:trigger (comp-i :edit-2 14 (hsl 200 80 60)), :style {:display :inline-block}}
+     (fn [on-toggle]
+       (cursor->
+        :edit-command
+        comp-command-editor
+        states
+        command
+        (fn [command-draft d! m!]
+          (d! :workflow/edit-command [workflow-id (:id command) command-draft])
+          (on-toggle m!)))))
+    (=< 8 nil)
+    (cursor->
+     :remove
+     comp-confirm
+     states
+     {:trigger (comp-i :x 18 (hsl 0 80 60))}
+     (fn [e d! m!] (d! :workflow/remove-command [workflow-id (:id command)])))))
+  (div
+   {:style (merge ui/row-middle {:font-family ui/font-code})}
+   (<>
+    (:path command)
+    {:display :inline-block, :background-color (hsl 0 0 100 0.2), :padding "0 8px"})
+   (=< 24 nil)
+   (<>
+    (:code command)
+    {:background-color (hsl 0 0 100 0.2),
+     :padding "0 8px",
+     :display :inline-block,
+     :min-width 320}))))

src/app/comp/container.cljs

@@ -64,7 +64,7 @@
    (if (nil? store)
      (comp-offline)
      (div
-      {:style (merge ui/global ui/fullscreen ui/column)}
+      {:style (merge ui/global ui/fullscreen ui/column {:color (hsl 0 0 70)})}
       (comp-navigation (:logged-in? store) router (:count store))
       (if (:logged-in? store)
         (let [router (:router store), router-data (:data router)]

src/app/comp/history.cljs

@@ -4,23 +4,29 @@
             [respo-ui.core :as ui]
             [respo-ui.colors :as colors]
             [respo.core :refer [defcomp <> action-> list-> span div]]
-            [respo.comp.space :refer [=<]]))
+            [respo.comp.space :refer [=<]]
+            [app.style :as style]
+            ["dayjs" :as dayjs]))
 
 (defcomp
  comp-history
  (histories)
  (div
-  {:style {:padding "0 16px"}}
-  (list->
-   {}
-   (->> histories
-        (map
-         (fn [history]
-           [(:id history)
-            (div
-             {}
-             (<> (:command history))
-             (=< 16 nil)
-             (<> (:cwd history))
-             (=< 16 nil)
-             (<> (:started-at history)))]))))))
+  {:style (merge ui/flex {:padding "16px 16px", :font-family ui/font-code, :overflow :auto})}
+  (if (empty? histories)
+    (<> "Empty" {:font-family ui/font-fancy, :font-weight 100, :color :white})
+    (list->
+     {:style (merge ui/flex {:overflow :auto})}
+     (->> histories
+          (map
+           (fn [history]
+             [(:id history)
+              (div
+               {:style (merge ui/row-middle {:margin "16px 8px"})}
+               (<>
+                (-> (:started-at history) dayjs (.format "MM-DD HH:mm:ss"))
+                (merge style/text {:font-size 12}))
+               (=< 16 nil)
+               (<> (:cwd history) style/text)
+               (=< 16 nil)
+               (<> (:command history) style/text))])))))))

src/app/comp/home.cljs

@@ -4,43 +4,47 @@
             [respo-ui.core :as ui]
             [respo.comp.space :refer [=<]]
             [respo-ui.colors :as colors]
-            [respo.core :refer [defcomp cursor-> action-> list-> button <> span div]]
-            [app.comp.commander :refer [comp-commander]]
+            [respo.core :refer [defcomp cursor-> action-> list-> button <> span div a]]
             [app.comp.process :refer [comp-process]]
             [app.util :refer [join-path map-val]]
-            [app.style :as style]))
+            [app.style :as style]
+            [app.comp.command :refer [comp-command-button comp-command-editor]]
+            [inflow-popup.comp.popup :refer [comp-popup]]))
 
 (defcomp
  comp-home
  (router-data states)
  (div
-  {:style {:padding 8, :overflow :auto}}
+  {:style (merge ui/flex ui/column {:padding 8, :overflow :auto})}
   (div
    {:style (merge ui/row-parted {:align-items :center})}
    (list->
     {:style ui/row}
-    (->> (:workflows router-data)
-         (map-val
-          (fn [workflow]
-            (div
-             {:style {:background-color (hsl 60 90 47),
-                      :padding "0 8px",
-                      :display :inline-block,
-                      :cursor :pointer,
-                      :margin 8},
-              :on-click (fn [e d! m!]
-                (doseq [command (vals (:commands workflow))]
-                  (d!
-                   :effect/run
-                   {:command (:code command),
-                    :cwd (join-path (:base-dir workflow) (:path command))})))}
-             (<> (:name workflow)))))))
-   (button {:style style/button, :on-click (action-> :process/clear nil)} (<> "Clear")))
+    (->> (:workflows router-data) (map-val (fn [workflow] (comp-command-button workflow)))))
+   (div
+    {:style ui/row-middle}
+    (cursor->
+     :quick-panel
+     comp-popup
+     states
+     {:trigger (button {:style ui/button, :inner-text "Run"})}
+     (fn [on-toggle]
+       (cursor->
+        :quick-run
+        comp-command-editor
+        states
+        nil
+        (fn [draft d! m!]
+          (d! :effect/run {:command (:code draft), :cwd (:path draft), :title (:title draft)})
+          (on-toggle m!)))))
+    (=< 8 nil)
+    (a {:style style/link, :on-click (action-> :process/clear nil)} (<> "Clear"))))
   (=< nil 8)
   (list->
-   {:style (merge ui/row {:align-items :flex-start, :flex-wrap :wrap})}
+   {:style (merge
+            ui/flex
+            ui/row
+            {:align-items :flex-start, :flex-wrap :wrap, :overflow :auto})}
    (->> (:processes router-data)
         (sort (fn [x y] (- (:started-at (val y)) (:started-at (val x)))))
-        (map (fn [[pid process]] [pid (comp-process process)]))))
-  (=< nil 8)
-  (div {:style ui/row-parted} (span {}) (cursor-> :commander comp-commander states))))
+        (map (fn [[pid process]] [pid (comp-process process)]))))))

src/app/comp/navigation.cljs

@@ -10,7 +10,7 @@
 
 (defn render-entry [router router-name title]
   (div
-   {:style (merge style-logo (if (= router-name (:name router)) {:color :black})),
+   {:style (merge style-logo (if (= router-name (:name router)) {:color :white})),
     :on-click (action-> :router/change {:name router-name})}
    (<> title)))
 
@@ -20,12 +20,13 @@
  (div
   {:style (merge
            ui/row-center
-           {:height 48,
+           {:height 32,
             :justify-content :space-between,
             :padding "0 16px",
             :font-size 16,
             :border-bottom (str "1px solid " (hsl 0 0 0 0.1)),
-            :font-family ui/font-fancy})}
+            :font-family ui/font-fancy,
+            :background-color (hsl 0 0 0 0.6)})}
   (div
    {:style ui/row}
    (render-entry router :home "Termina")