Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-12 18:18:24 -05:00
Code Issues Activity

Allow edition on collections lists, and adding images counter (except for Storage)

Browse source
This commit is contained in:
Jesús Espino 2016-12-20 11:23:01 +01:00
parent 8dd8258565
commit 9edb2a4ee0
4 changed files with 129 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend/resources/styles/main/partials/library-bar.scss
View file

@ -67,7 +67,7 @@
flex-shrink: 0;
padding: 10px;
.element-title {
span.element-title {
color: $color-gray-dark;
font-weight: bold;
margin-bottom: 5px;
@ -76,6 +76,25 @@
white-space: nowrap;
}
input.element-title {
border: 0;
height: 30px;
padding: 5px;
}
.close {
background: $color-white;
cursor: pointer;
padding: 5px 10px;
svg {
fill: $color-gray;
height: 20px;
transform: rotate(45deg) translateY(7px);
width: 20px;
}
}
.element-subtitle {
color: $color-gray-light;
font-style: italic;
@ -85,10 +104,13 @@
&.current {
background-color: $main-ui-color;
.element-title,
span.element-title,
.element-subtitle {
color: $color-white;
}
input.element-title {
color: $color-gray-dark;
}
}
}

44
frontend/src/uxbox/main/ui/dashboard/colors.cljs
View file

@ -90,17 +90,43 @@
;; --- Nav
(mx/defc nav-item
{:mixins [mx/static]}
[{:keys [id type name] :as coll} selected?]
(letfn [(on-click [event]
(let [type (or type :own)]
(st/emit! (dc/select-collection type id))))]
(let [colors (count (:colors coll))]
(mx/defcs nav-item
{:mixins [(mx/local) mx/static]}
[own {:keys [id type name] :as coll} selected?]
(let [colors (count (:colors coll))
editable? (= type :own)
local (:rum/local own)]
(letfn [(on-click [event]
(let [type (or type :own)]
(st/emit! (dc/select-collection type id))))
(on-input-change [event]
(let [value (dom/get-target event)
value (dom/get-value value)]
(swap! local assoc :name value)))
(on-cancel [event]
(swap! local dissoc :name)
(swap! local dissoc :edit))
(on-double-click [event]
(when editable?
(swap! local assoc :edit true)))
(on-input-keyup [event]
(when (k/enter? event)
(let [value (dom/get-target event)
value (dom/get-value value)]
(st/emit! (dc/rename-collection id (str/trim (:name @local))))
(swap! local assoc :edit false))))]
[:li {:on-click on-click
:on-double-click on-double-click
:class-name (when selected? "current")}
[:span.element-title
(if coll name "Storage")]
(if (:edit @local)
[:div
[:input.element-title
{:value (if (:name @local) (:name @local) (if coll name "Storage"))
:on-change on-input-change
:on-key-down on-input-keyup}]
[:span.close {:on-click on-cancel} i/close]]
[:span.element-title
(if coll name "Storage")])
[:span.element-subtitle
(tr "ds.num-elements" (t/c colors))]])))

44
frontend/src/uxbox/main/ui/dashboard/icons.cljs
View file

@ -128,17 +128,43 @@
(filter #(= id (:collection %)))
(count)))
(mx/defc nav-item
{:mixins [mx/static mx/reactive]}
[{:keys [id type name num-icons] :as coll} selected?]
(letfn [(on-click [event]
(let [type (or type :own)]
(st/emit! (di/select-collection type id))))]
(let [num-icons (or num-icons (react-count-icons id))]
(mx/defcs nav-item
{:mixins [(mx/local) mx/static mx/reactive]}
[own {:keys [id type name num-icons] :as coll} selected?]
(let [num-icons (or num-icons (react-count-icons id))
editable? (= type :own)
local (:rum/local own)]
(letfn [(on-click [event]
(let [type (or type :own)]
(st/emit! (di/select-collection type id))))
(on-input-change [event]
(let [value (dom/get-target event)
value (dom/get-value value)]
(swap! local assoc :name value)))
(on-cancel [event]
(swap! local dissoc :name)
(swap! local dissoc :edit))
(on-double-click [event]
(when editable?
(swap! local assoc :edit true)))
(on-input-keyup [event]
(when (kbd/enter? event)
(let [value (dom/get-target event)
value (dom/get-value value)]
(st/emit! (di/rename-collection id (str/trim (:name @local))))
(swap! local assoc :edit false))))]
[:li {:on-click on-click
:on-double-click on-double-click
:class-name (when selected? "current")}
[:span.element-title
(if coll name "Storage")]
(if (:edit @local)
[:div
[:input.element-title
{:value (if (:name @local) (:name @local) (if coll name "Storage"))
:on-change on-input-change
:on-key-down on-input-keyup}]
[:span.close {:on-click on-cancel} i/close]]
[:span.element-title
(if coll name "Storage")])
[:span.element-subtitle
(tr "ds.num-elements" (t/c num-icons))]])))

45
frontend/src/uxbox/main/ui/dashboard/images.cljs
View file

@ -126,19 +126,44 @@
(filter #(= id (:collection %)))
(count)))
(mx/defc nav-item
{:mixins [mx/static mx/reactive]}
[{:keys [id type name] :as coll} selected?]
(letfn [(on-click [event]
(let [type (or type :own)]
(st/emit! (di/select-collection type id))))]
(let [num-images (react-count-images id)]
(mx/defcs nav-item
{:mixins [(mx/local) mx/static mx/reactive]}
[own {:keys [id type name num-images] :as coll} selected?]
(let [editable? (= type :own)
local (:rum/local own)]
(letfn [(on-click [event]
(let [type (or type :own)]
(st/emit! (di/select-collection type id))))
(on-input-change [event]
(let [value (dom/get-target event)
value (dom/get-value value)]
(swap! local assoc :name value)))
(on-cancel [event]
(swap! local dissoc :name)
(swap! local dissoc :edit))
(on-double-click [event]
(when editable?
(swap! local assoc :edit true)))
(on-input-keyup [event]
(when (kbd/enter? event)
(let [value (dom/get-target event)
value (dom/get-value value)]
(st/emit! (di/rename-collection id (str/trim (:name @local))))
(swap! local assoc :edit false))))]
[:li {:on-click on-click
:on-double-click on-double-click
:class-name (when selected? "current")}
[:span.element-title
(if coll name "Storage")]
(if (:edit @local)
[:div
[:input.element-title
{:value (if (:name @local) (:name @local) (if coll name "Storage"))
:on-change on-input-change
:on-key-down on-input-keyup}]
[:span.close {:on-click on-cancel} i/close]]
[:span.element-title
(if coll name "Storage")])
[:span.element-subtitle
(tr "ds.num-elements" (t/c num-images))]])))
(tr "ds.num-elements" (t/c (or num-images (react-count-images id))))]])))
(mx/defc nav-section
{:mixins [mx/static]}