diff --git a/frontend/uxbox/library.cljs b/frontend/uxbox/library.cljs index 34b738e05..e5aee8e93 100644 --- a/frontend/uxbox/library.cljs +++ b/frontend/uxbox/library.cljs @@ -1,5 +1,6 @@ (ns uxbox.library (:require [uxbox.library.colors :as colors] + [uxbox.library.icons :as icons] [uxbox.util.data :refer (index-by-id)])) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -11,3 +12,14 @@ (def ^:static +color-collections-by-id+ (index-by-id colors/+collections+)) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Icons +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(def ^:static +icon-collections+ + icons/+collections+) + +(def ^:static +icon-collections-by-id+ + (index-by-id icons/+collections+)) + diff --git a/frontend/uxbox/library/icons.cljs b/frontend/uxbox/library/icons.cljs new file mode 100644 index 000000000..adaf1a0c0 --- /dev/null +++ b/frontend/uxbox/library/icons.cljs @@ -0,0 +1,19 @@ +(ns uxbox.library.icons) + +(def ^:private +material+ + [{:name "Attachment" + :id :material/attachment + :type :builtin/icon + :svg [:path + {:d "M15 36c-6.08 0-11-4.93-11-11s4.92-11 11-11h21c4.42 0 8 3.58 8 8s-3.58 8-8 8h-17c-2.76 0-5-2.24-5-5s2.24-5 5-5h15v3h-15c-1.1 0-2 .89-2 2s.9 2 2 2h17c2.76 0 5-2.24 5-5s-2.24-5-5-5h-21c-4.42 0-8 3.58-8 8s3.58 8 8 8h19v3h-19z"}]} + {:name "Cloud" + :id :material/cloud + :type :builtin/icon + :svg [:path + {:d "M38.71 20.07c-1.36-6.88-7.43-12.07-14.71-12.07-5.78 0-10.79 3.28-13.3 8.07-6.01.65-10.7 5.74-10.7 11.93 0 6.63 5.37 12 12 12h26c5.52 0 10-4.48 10-10 0-5.28-4.11-9.56-9.29-9.93z"}]} + ]) + +(def +collections+ + [{:name "Material design" + :id 1 + :icons +material+}]) diff --git a/frontend/uxbox/shapes.cljs b/frontend/uxbox/shapes.cljs new file mode 100644 index 000000000..94e05e401 --- /dev/null +++ b/frontend/uxbox/shapes.cljs @@ -0,0 +1,12 @@ +(ns uxbox.shapes + (:require [sablono.core :refer-macros [html]])) + +(defmulti render + (fn [shape & params] + (:type shape))) + +(defmethod render :builtin/icon + [shape & [{:keys [width height] :or {width "500" height "500"}}]] + (let [content (:svg shape)] + (html + [:svg {:width width :height height} content]))) diff --git a/frontend/uxbox/ui/dashboard.cljs b/frontend/uxbox/ui/dashboard.cljs index 1fc0930e0..5bf2d1372 100644 --- a/frontend/uxbox/ui/dashboard.cljs +++ b/frontend/uxbox/ui/dashboard.cljs @@ -92,10 +92,8 @@ (header) [:section.dashboard-content (icons/menu) - (ui.library-bar/library-bar) - [:section.dashboard-grid.library - (icons/page-title) - (icons/grid)]]])) + (icons/nav) + (icons/grid)]])) (defn icons-page-will-mount [own] diff --git a/frontend/uxbox/ui/dashboard/colors.cljs b/frontend/uxbox/ui/dashboard/colors.cljs index 0b207885e..7dce10e92 100644 --- a/frontend/uxbox/ui/dashboard/colors.cljs +++ b/frontend/uxbox/ui/dashboard/colors.cljs @@ -50,7 +50,7 @@ (def ^:static menu (util/component {:render menu-render - :name "icons-menu" + :name "colors-menu" :mixins [rum/reactive]})) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -132,7 +132,7 @@ :mixins [rum/reactive]})) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Nav +;; Grid ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn grid-render diff --git a/frontend/uxbox/ui/dashboard/icons.cljs b/frontend/uxbox/ui/dashboard/icons.cljs index 05c95e4be..e2c0bbeff 100644 --- a/frontend/uxbox/ui/dashboard/icons.cljs +++ b/frontend/uxbox/ui/dashboard/icons.cljs @@ -1,12 +1,39 @@ (ns uxbox.ui.dashboard.icons - (:require [sablono.core :as html :refer-macros [html]] + (:require [sablono.core :refer-macros [html]] [rum.core :as rum] + [cuerdas.core :as str] + [cats.labs.lens :as l] + [uxbox.state :as st] + [uxbox.rstore :as rs] + [uxbox.schema :as sc] + [uxbox.library :as library] + [uxbox.shapes :as shapes] + [uxbox.data.dashboard :as dd] + [uxbox.util.lens :as ul] [uxbox.ui.icons :as i] + [uxbox.ui.form :as form] [uxbox.ui.lightbox :as lightbox] [uxbox.ui.dom :as dom] [uxbox.ui.mixins :as mx] [uxbox.ui.util :as util])) +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Lenses +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(def ^:static dashboard-state + (as-> (l/in [:dashboard]) $ + (l/focus-atom $ st/state))) + +;; (def ^:static collections-state +;; (as-> (l/in [:icons-by-id]) $ +;; (l/focus-atom $ st/state))) + +;; (def ^:static collection-state +;; (as-> (ul/dep-in [:icons-by-id] [:dashboard :collection-id]) $ +;; (l/focus-atom $ st/state))) + + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Menu ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; @@ -32,151 +59,238 @@ ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn page-title-render - [] - (html - [:div.dashboard-title - [:h2 "Icons library name"] - [:div.edition - [:span i/pencil] - [:span i/trash]]])) + [own coll] + (let [dashboard (rum/react dashboard-state) + own? (:builtin coll false)] + (html + [:div.dashboard-title {} + (if coll + [:h2 {} + [:span "Library: "] + [:span {:content-editable "" + :on-key-up (constantly nil)} + (:name coll)]] + [:h2 "No library selected"]) + (if (and (not own?) coll) + [:div.edition {} + [:span {:on-click (constantly nil)} + i/trash]])]))) (def ^:static page-title (util/component {:render page-title-render :name "page-title" - :mixins [mx/static]})) + :mixins [mx/static rum/reactive]})) + ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Icons +;; Nav +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +(defn nav-render + [own] + (let [dashboard (rum/react dashboard-state) + ;; colors (rum/react collections-state) + collid (:collection-id dashboard) + own? (= (:collection-type dashboard) :own) + builtin? (= (:collection-type dashboard) :builtin) + collections (if own? + [] #_(sort-by :id (vals colors)) + library/+icon-collections+)] + (html + [:div.library-bar + [:div.library-bar-inside + [:ul.library-tabs + [:li {:class-name (when builtin? "current") + :on-click #(rs/emit! (dd/set-collection-type :builtin))} + "STANDARD"] + [:li {:class-name (when own? "current") + :on-click #(rs/emit! (dd/set-collection-type :own))} + "YOUR LIBRARIES"]] + [:ul.library-elements + (when own? + [:li + [:a.btn-primary + {:on-click (constantly nil)} + "+ New library"]]) + (for [props collections] + [:li {:key (str (:id props)) + :on-click #(rs/emit! (dd/set-collection (:id props))) + :class-name (when (= (:id props) collid) "current")} + [:span.element-title (:name props)] + [:span.element-subtitle + (str (count (:icons props)) " elements")]])]]]))) + +(def ^:static nav + (util/component + {:render nav-render + :name "nav" + :mixins [rum/reactive]})) + +;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; Grid ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; (defn grid-render [own] - (html - [:div.dashboard-grid-content - [:div.grid-item.small-item.add-project - {on-click #(lightbox/open! :new-icon)} - [:span "+ New icon"]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/logo-icon] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/pencil] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/trash] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/search] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/image] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/toggle] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/chat] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/close] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/page] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/folder] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/infocard] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/fill] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/stroke] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/action] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/undo] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/redo] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/export] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/exit] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]] - [:div.grid-item.small-item.project-th - [:span.grid-item-image i/user] - [:h3 "Custom icon"] - [:div.project-th-actions - [:div.project-th-icon.edit i/pencil] - [:div.project-th-icon.delete i/trash]]]])) + (let [dashboard (rum/react dashboard-state) + coll-type (:collection-type dashboard) + coll-id (:collection-id dashboard) + own? (= coll-type :own) + coll (get library/+icon-collections-by-id+ coll-id)] + ;; coll (case coll-type + ;; :builtin (get library/+color-collections-by-id+ coll-id) + ;; :own (rum/react collection-state))] + ;; edit-cb #(lightbox/open! :icon-form {:coll coll :icon %}) + ;; remove-cb #(rs/emit! (dd/remove-icon {:id (:id coll) :icon %}))] + (when coll + (html + [:section.dashboard-grid.library + (page-title coll) + [:div.dashboard-grid-content + (for [icon (:icons coll) + :let [_ (println icon)]] + [:div.grid-item.small-item.project-th {:key (str (:id icon))} + [:span.grid-item-image #_i/toggle (shapes/render icon)] + [:h3 "Custom icon"] + #_[:div.project-th-actions + [:div.project-th-icon.edit i/pencil] + [:div.project-th-icon.delete i/trash]]])]])))) (def grid (util/component {:render grid-render :name "grid" - :mixins [mx/static]})) + :mixins [mx/static rum/reactive]})) + + +;; (defn grid-render +;; [own] +;; (html +;; [:div.dashboard-grid-content +;; [:div.grid-item.small-item.add-project +;; {on-click #(lightbox/open! :new-icon)} +;; [:span "+ New icon"]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/logo-icon] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/pencil] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/trash] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/search] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/image] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/toggle] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/chat] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/close] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/page] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/folder] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/infocard] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/fill] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/stroke] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/action] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/undo] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/redo] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/export] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/exit] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]] +;; [:div.grid-item.small-item.project-th +;; [:span.grid-item-image i/user] +;; [:h3 "Custom icon"] +;; [:div.project-th-actions +;; [:div.project-th-icon.edit i/pencil] +;; [:div.project-th-icon.delete i/trash]]]])) + +;; (def grid +;; (util/component +;; {:render grid-render +;; :name "grid" +;; :mixins [mx/static]})) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Lightbox