spaces-fixed bugfix + demos

pink-gorilla · Oct 22, 2023 · 7bccaf5 · 7bccaf5
1 parent a0cfee5
commit 7bccaf5
Show file tree

Hide file tree

Showing 22 changed files with 325 additions and 128 deletions.
diff --git a/.gitignore b/.gitignore
@@ -21,4 +21,6 @@ shadow-cljs.edn
 goldly_bindings_generated.cljs
 .lsp
 .webly
-.clj-kondo
+.clj-kondo
+demo/node_modules/
+demo/target/
diff --git a/README.md b/README.md
@@ -48,10 +48,10 @@
 # Demo
 
 ```
-clojure -X:goldly-build :profile "npm-install"
-clojure -X:goldly-build :profile "compile"
-clojure -X:goldly-run
-
+cd demo
+clojure -X:demo:npm-install"
+clojure -X:demo:compile
+clojure -X:demo
 ```
 
 Navigate your webbrowser to port 8080. 

diff --git a/demo/config.edn b/demo/config.edn
@@ -1,9 +1,11 @@
-{:goldly {;:lazy true 
-          :watch-cljs-dir ["src/demo/page"]
-          :routes {:app {"" demo.page.welcome/welcome-page
-                         "input" demo.page.input/input-page
-                         "description-list" demo.page.desclist/desclist-page
-                         "layout" demo.page.layout/layout-page
-                         "grid-layout" demo.page.gridlayout/grid-layout-page
-                         "spaces" demo.page.spaces/spaces-page
-                         }}}}
+{:goldly {:watch-cljs-dir ["src/demo/page"]
+          :routes {:app {} ; demo route are in demo/resources/Ext/app.edn
+                   :api {}}}
+
+
+  :reval {:collections {:ui-input [:cljs "notebook/"]
+                        ;:demo [:clj "demo/notebook/"]
+                        :demo-cljs [:cljs "demo/notebook/"]
+                       }}
+
+ }
diff --git a/demo/demo/page/spaces.cljs b/demo/demo/page/spaces.cljs
diff --git a/demo/deps.edn b/demo/deps.edn
@@ -0,0 +1,32 @@
+{:paths ["src"
+         "resources" ; goldly-ext, css
+         "target/node_modules" ; css from npm modules
+         ]
+ :deps
+ {org.clojure/clojure    {:mvn/version "1.11.1"}
+  ; goldly
+  org.pinkgorilla/goldly {:mvn/version "0.4.635"}
+  ; goldly extensions
+  org.pinkgorilla/ui-input {:local/root "../" :deps/manifest :deps}
+  org.pinkgorilla/ui-repl {:mvn/version "0.0.73"} ; reagent
+  org.pinkgorilla/devtools {:mvn/version "0.0.18"} ; devtools
+  }
+
+ :aliases
+ {:demo {:exec-fn modular.system/start!
+         :exec-args {:profile "jetty"
+                     :config ["webly/config.edn"
+                              "goldly/config.edn"
+                              "config.edn"]
+                     :services "goldly/services.edn"}}
+
+  :npm-install
+  {:exec-fn goldly.app.build/goldly-build
+   :exec-args {:profile "npm-install"}}
+
+  :compile
+  {:exec-fn goldly.app.build/goldly-build
+   :exec-args {:profile "compile2"}}}}
+
+
+
diff --git a/demo/resources/ext/app.edn b/demo/resources/ext/app.edn
@@ -0,0 +1,14 @@
+{:name "demo-app"
+ :cljs-routes {"" demo.page.welcome/welcome-page
+               "input" demo.page.input/input-page
+               "description-list" demo.page.desclist/desclist-page
+               "layout" demo.page.layout/layout-page
+               "grid-layout" demo.page.gridlayout/grid-layout-page
+               "spaces/" {"main" demo.page.spaces/spaces-page
+                          "layout-viewport-lrt"  demo.page.spaces/spaces-layout-lrt-viewport-page
+                          "layout-viewport-lrm"  demo.page.spaces/spaces-layout-lrm-viewport-page
+                          "layout-fixed-lrt"  demo.page.spaces/spaces-layout-lrt-fixed-page
+                          "layout-fixed-lrm"  demo.page.spaces/spaces-layout-lrm-fixed-page}}
+
+
+}
diff --git a/demo/demo/lib/debounce.cljs → demo/src/demo/lib/debounce.cljs b/demo/demo/lib/debounce.cljs → demo/src/demo/lib/debounce.cljs
@@ -1,8 +1,7 @@
 (ns demo.lib.debounce
- (:require
+  (:require
    [ui.debounce :refer [debounce]]))
 
-
 (defn save-input! [input & args]
   (js/console.log "debounce test: Saving input: " input))
 

diff --git a/demo/demo/lib/link.cljs → demo/src/demo/lib/link.cljs b/demo/demo/lib/link.cljs → demo/src/demo/lib/link.cljs
@@ -1,6 +1,6 @@
 (ns demo.lib.link
   (:require
-    [re-frame.core :as rf]))
+   [re-frame.core :as rf]))
 
 (rf/dispatch [:css/set-theme-component :tailwind-full "light"])
 

diff --git a/demo/demo/page/desclist.cljs → demo/src/demo/page/desclist.cljs b/demo/demo/page/desclist.cljs → demo/src/demo/page/desclist.cljs
@@ -1,5 +1,5 @@
 (ns demo.page.desclist
-  (:require 
+  (:require
    [container]))
 
 (defn desclist-page [{:keys [route-params query-params handler] :as route}]

diff --git a/demo/demo/page/gridlayout.cljs → demo/src/demo/page/gridlayout.cljs b/demo/demo/page/gridlayout.cljs → demo/src/demo/page/gridlayout.cljs
@@ -2,7 +2,6 @@
   (:require
    [ui.gridlayout :refer [gridlayout]]))
 
-
 (defn grid-layout-page [{:keys [route-params query-params handler] :as route}]
   [:div.bg-green-300 {:style {:width 1000
                               :height 600}}

diff --git a/demo/demo/page/input.cljs → demo/src/demo/page/input.cljs b/demo/demo/page/input.cljs → demo/src/demo/page/input.cljs
@@ -1,13 +1,11 @@
 (ns demo.page.input
-  (:require 
+  (:require
    [reagent.core :as r]
    [input]
    [input2]
    [container]
    [demo.lib.link :refer [link-href]]
-   [demo.lib.debounce :refer [save-input-debounced!]]
-
-   ))
+   [demo.lib.debounce :refer [save-input-debounced!]]))
 
 (defn input-page [{:keys [route-params query-params handler] :as route}]
   (let [*state (r/atom {:name "Someone Special"

diff --git a/demo/demo/page/layout.cljs → demo/src/demo/page/layout.cljs b/demo/demo/page/layout.cljs → demo/src/demo/page/layout.cljs
@@ -3,7 +3,6 @@
    [ui.webly :refer [dialog notify]]
    [ui.popover :refer [popover tooltip]]))
 
-
 (defn my-dialog []
   [:div
    {:style {:background-color "white"
@@ -28,11 +27,11 @@
                 :title  "oranges"
                 :content "Lets make orange juice"}]]
     [popover {:color "green"
-                        :placement "right"
-                        :button-text "trees-r"}
+              :placement "right"
+              :button-text "trees-r"}
      [tooltip {:color "green"
-                         :title  "tree"
-                         :content "How many trees are in a forest?"}]]]
+               :title  "tree"
+               :content "How many trees are in a forest?"}]]]
 
 ;[:h2.mt-5 "Tabs"]
    #_[:div

diff --git a/demo/src/demo/page/spaces.cljs b/demo/src/demo/page/spaces.cljs
@@ -0,0 +1,71 @@
+(ns demo.page.spaces
+  (:require
+   [spaces.core :as spaces]
+   [spaces.layout.screen :as layout-viewport]
+   [spaces.layout.fixed :as layout-fixed]
+   [demo.lib.link :refer [link-href]]))
+
+(defn nav-layout []
+  [:<>
+   [link-href "/spaces/main" "goto spaces/main"]
+   [link-href "/spaces/layout-viewport-lrt" "goto spaces/layout-viewport-lrt"]
+   [link-href "/spaces/layout-viewport-lrm" "goto spaces/layout-viewport-lrm"]
+   [link-href "/spaces/layout-fixed-lrt" "goto spaces/layout-fixed-lrt"]
+   [link-href "/spaces/layout-fixed-lrm" "goto spaces/layout-fixed-lrm"]])
+
+(defn spaces-1 []
+  [spaces/viewport
+   [spaces/left {:size "20%" :style "blue" :trackSize true}
+    [spaces/description "Left"]]
+   [spaces/fill {:style "green" :trackSize true}
+    [spaces/bottom {:size "20%" :style "red" :trackSize true}]
+    [spaces/right {:size "20%" :style "blue" :trackSize true}]]])
+
+(defn spaces-page [_]
+  [spaces/viewport
+   [spaces/top-resizeable {:size 50} [:div "top" [nav-layout]]]
+   [spaces/fill {:class "bg-green-500"}
+    [:div
+     [spaces/left-resizeable {:size 200} "left"]
+     [spaces/right-resizeable {:size 200}
+              ;"right"
+      [:div
+       [spaces/fill {:class "bg-blue-500"} "fill"]
+       [spaces/bottom-resizeable {:size 50 :class "bg-gray-300"} "bottom"]]]
+     [spaces/fill {:class "bg-green-500"}
+             ;[spaces-1]
+      [:div.bg-red-300.w-full.h-full "filling"]]]]])
+
+;; spaces layout viewport
+
+(defn spaces-layout-lrt-viewport-page [_]
+  [:div.bg-red-200
+   [layout-viewport/screen-left-right-top {:left [:div.bg-green-300.w-full.h-full "left"]
+                                           :right [:div.bg-blue-300.w-full.h-full "right"]
+                                           :top [:div.bg-gray-200.w-full.h-full "top"
+                                                 [nav-layout]]}]])
+
+(defn spaces-layout-lrm-viewport-page [_]
+  [layout-viewport/screen-left-right-middle {:left [:div.bg-green-300.w-full.h-full "left"]
+                                             :right [:div.bg-blue-300.w-full.h-full "right"]
+                                             :middle [:div.bg-gray-200.w-full.h-full "middle"
+                                                      [nav-layout]]}])
+
+;; spaces layout fixed
+
+(defn spaces-layout-lrt-fixed-page [_]
+  [:div.bg-blue-200 {:style {:width "100vw" :height "100vh"}}
+   [layout-fixed/left-right-top {:left [:div.bg-green-300.w-full.h-full "left"]
+                                 :right [:div.bg-blue-300.w-full.h-full "right"]
+                                 :top [:div.bg-gray-200.w-full.h-full "top"
+                                       [nav-layout]]}]])
+
+(defn spaces-layout-lrm-fixed-page [_]
+  [:div.bg-blue-200 {:style {:width "100vw" :height "100vh"}}
+   [layout-fixed/left-right-middle {:left [:div.bg-green-300.w-full.h-full "left"]
+                                    :right [:div.bg-blue-300.w-full.h-full "right"]
+                                    :middle [:div.bg-gray-200.w-full.h-full "middle"
+                                             [nav-layout]]}]])
+
+
+
diff --git a/demo/demo/page/welcome.cljs → demo/src/demo/page/welcome.cljs b/demo/demo/page/welcome.cljs → demo/src/demo/page/welcome.cljs
@@ -1,10 +1,10 @@
 (ns demo.page.welcome
-  (:require 
-     [reagent.core :as r]
-     [re-frame.core :as rf]
-     [input]
-     [ui.rnd :refer [rnd]]
-     [demo.lib.debounce :refer [save-input-debounced!]]))
+  (:require
+   [reagent.core :as r]
+   [re-frame.core :as rf]
+   [input]
+   [ui.rnd :refer [rnd]]
+   [demo.lib.debounce :refer [save-input-debounced!]]))
 
 (rf/dispatch [:css/set-theme-component :tailwind-full "light"])
 (rf/dispatch [:css/set-theme-component :tailwind-girouette false])
@@ -22,16 +22,16 @@
 
 (defn info-box []
   [rnd {:bounds "window"
-                  :scale 0.7
-                  :default {:width 200
-                            :height 200
-                            :x 200
-                            :y 100}
-                  :style {:display "flex"
+        :scale 0.7
+        :default {:width 200
+                  :height 200
+                  :x 200
+                  :y 100}
+        :style {:display "flex"
                        ;:alignItems "center"
-                          :justifyContent "center"
-                          :border "solid 1px #ddd"
-                          :background "#f0f0f0"}}
+                :justifyContent "center"
+                :border "solid 1px #ddd"
+                :background "#f0f0f0"}}
     ;[:h1 "asdf"]
    [info-content]])
 
@@ -41,9 +41,9 @@
    [:h1 "ui-input demos"]
 
    [:a {:href "input"} [:p "input"]]
-   [:a {:href "layout"} [:p "layout"]]
+   [:a {:href "/spaces/main"} [:p "layout"]]
    [:a {:href "description-list"} [:p "Description List"]]
    [:a {:href "grid-layout"} [:p "Grid Layout"]]
-   [:a {:href "spaces"} [:p "Spaces Layout"]]])
+   [:a {:href "spaces/main"} [:p "Spaces Layout"]]])
 
 
diff --git a/demo/src/notebook/spaces.cljs b/demo/src/notebook/spaces.cljs
@@ -0,0 +1,17 @@
+(ns notebook.spaces
+  (:require
+   [spaces.layout.screen :as layout-viewport]
+   [spaces.layout.fixed :as layout-fixed]))
+
+(pr-str
+ (layout-viewport/screen-left-right-middle
+  {:left [:div.bg-green-300.w-full.h-full "left"]
+   :right [:div.bg-blue-300.w-full.h-full "right"]
+   :middle [:div.bg-gray-200.w-full.h-full "middle"]}))
+
+(pr-str
+ (layout-fixed/left-right-middle
+  {:left [:div.bg-green-300.w-full.h-full "left"]
+   :right [:div.bg-blue-300.w-full.h-full "right"]
+   :middle [:div.bg-gray-200.w-full.h-full "middle"]}))
+
diff --git a/deps.edn b/deps.edn
@@ -38,33 +38,19 @@
   {:main-opts ["-m" "garamond.main"]
    :extra-deps {com.workframe/garamond {:mvn/version "0.4.0"}}}
 
-  ; demo ui
+  ; ci
 
-  :goldly-build ; goldly compile (show reval in goldly, but with up to date reval!)
+  :goldly-build ; ci only
   {:extra-paths ["target/webly" ; to include the sci-bindings info
-                 "demo"]
-   :extra-deps {org.pinkgorilla/goldly {:mvn/version "0.4.619"}
-                org.pinkgorilla/ui-repl {:mvn/version "0.0.72"} ; reagent
+                 "demo/src"
+                 "demo/resources"]
+   :extra-deps {org.pinkgorilla/goldly {:mvn/version "0.4.635"}
                 }
    :exec-fn goldly.app.build/goldly-build
    :exec-args {:profile "npm-install"
                :config  ["webly/config.edn" "goldly/config.edn" "demo/config.edn"]}}
 
-
-  :goldly-run ; goldly compile (show reval in goldly, but with up to date reval!)
-  {:extra-paths ["target/webly" ; to include the sci-bindings info
-                 "node_modules"
-                 "demo"]
-   :extra-deps {org.pinkgorilla/goldly {:mvn/version "0.4.619"}
-                org.pinkgorilla/ui-repl {:mvn/version "0.0.72"} ; reagent atoms in cljs
-                }
-   :exec-fn modular.system/start!
-   :exec-args {:profile "jetty"
-               :services "goldly/services.edn"
-               :config  ["webly/config.edn" "goldly/config.edn" "demo/config.edn"]}}
-
-
-
+   ; for demo see README.md or go to "demo" folder and run aliases there.
 
 ;
   }}