mirror of
https://github.com/penpot/penpot.git
synced 2025-05-28 16:16:13 +02:00
Minor code reorganization and wip of colors page.
This commit is contained in:
parent
a93c6bfa45
commit
9c2c7f40ba
13 changed files with 221 additions and 56 deletions
36
frontend/uxbox/ui/dashboard/builtins.cljs
Normal file
36
frontend/uxbox/ui/dashboard/builtins.cljs
Normal file
|
@ -0,0 +1,36 @@
|
|||
(ns uxbox.ui.dashboard.builtins)
|
||||
|
||||
(def ^:static +colors+
|
||||
[{:name "Generic 1"
|
||||
:id 1
|
||||
:colors
|
||||
[{:hex "00f9ff"}
|
||||
{:hex "009fff"}
|
||||
{:hex "0078ff"}
|
||||
{:hex "005eff"}
|
||||
{:hex "0900ff"}
|
||||
{:hex "7502f1"}
|
||||
{:hex "ffe705"}
|
||||
{:hex "00ffab"}
|
||||
{:hex "f52105"}
|
||||
{:hex "7502f1"}
|
||||
{:hex "ffe705"}
|
||||
{:hex "00ffab"}
|
||||
{:hex "f52105"}]}
|
||||
{:name "Generic 2"
|
||||
:id 2
|
||||
:colors
|
||||
[{:hex "00f9ff"}
|
||||
{:hex "009fff"}
|
||||
{:hex "0078ff"}
|
||||
{:hex "005eff"}
|
||||
{:hex "0900ff"}
|
||||
{:hex "7502f1"}
|
||||
{:hex "ffe705"}
|
||||
{:hex "00ffab"}
|
||||
{:hex "f52105"}
|
||||
{:hex "7502f1"}
|
||||
{:hex "ffe705"}
|
||||
{:hex "00ffab"}
|
||||
{:hex "f52105"}]}])
|
||||
|
|
@ -1,13 +1,29 @@
|
|||
(ns uxbox.ui.dashboard.colors
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[uxbox.ui.library-bar :as ui.library-bar]
|
||||
[cats.labs.lens :as l]
|
||||
[uxbox.state :as s]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.data.dashboard :as dd]
|
||||
[uxbox.ui.dashboard.builtins :as builtins]
|
||||
[uxbox.ui.icons :as i]
|
||||
[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 $ s/state)))
|
||||
|
||||
(def ^:static colors-state
|
||||
(as-> (l/in [:colors-by-id]) $
|
||||
(l/focus-atom $ s/state)))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Menu
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
@ -53,25 +69,39 @@
|
|||
|
||||
(defn nav-render
|
||||
[own]
|
||||
(html
|
||||
[:div.library-bar
|
||||
[:div.library-bar-inside
|
||||
[:ul.library-tabs
|
||||
[:li.current "STANDARD"]
|
||||
[:li "YOUR LIBRARIES"]]
|
||||
[:ul.library-elements
|
||||
#_[:li
|
||||
[:a.btn-primary {:href "#"} "+ New library"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Library 1"]
|
||||
[:span.element-subtitle "21 elements"]]]]]))
|
||||
(let [dashboard (rum/react dashboard-state)
|
||||
colors (rum/react colors-state)
|
||||
collid (:collection-id dashboard)
|
||||
own? (= (:collection-type dashboard) :own)
|
||||
builtin? (= (:collection-type dashboard) :builtin)
|
||||
collections (if own?
|
||||
(sort-by :id (vals colors))
|
||||
builtins/+colors+)]
|
||||
(html
|
||||
[:div.library-bar
|
||||
[:div.library-bar-inside
|
||||
[:ul.library-tabs
|
||||
[:li (when builtin? {:class-name "current"})
|
||||
"STANDARD"]
|
||||
[:li (when own? {:class-name "current"})
|
||||
"YOUR LIBRARIES"]]
|
||||
[:ul.library-elements
|
||||
;; (when own?
|
||||
;; [:li
|
||||
;; [:a.btn-primary {:href "#"} "+ 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 (:colors props)) " elements")]])]]])))
|
||||
|
||||
(def ^:static nav
|
||||
(util/component
|
||||
{:render nav-render
|
||||
:name "nav"
|
||||
:mixins [mx/static]}))
|
||||
:mixins [rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Nav
|
||||
|
|
|
@ -17,10 +17,9 @@
|
|||
|
||||
(defn- header-link
|
||||
[section content]
|
||||
(let [link (r/route-for section)
|
||||
on-click #(rs/emit! (dp/set-dashboard-section section))]
|
||||
(let [link (r/route-for section)]
|
||||
(html
|
||||
[:a {:href (str "/#" link) :on-click on-click} content])))
|
||||
[:a {:href (str "/#" link)} content])))
|
||||
|
||||
(defn header-render
|
||||
[own]
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
[uxbox.state :as s]
|
||||
[uxbox.time :as time]
|
||||
[uxbox.data.projects :as dp]
|
||||
[uxbox.data.workspace :as dw]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.dom :as dom]
|
||||
[uxbox.ui.dashboard.header :as dsh.header]
|
||||
|
@ -187,7 +188,7 @@
|
|||
|
||||
(defn project-item-render
|
||||
[own project]
|
||||
(let [on-click #(rs/emit! (dp/go-to-project (:id project)))]
|
||||
(let [on-click #(rs/emit! (dp/go-to (:id project)))]
|
||||
(html
|
||||
[:div.grid-item.project-th {:on-click on-click
|
||||
:key (:id project)}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue