Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-13 23:41:24 -05:00
Code Issues Activity

fix dashboard grid visual bug

Browse source
This commit is contained in:
elhombretecla 2016-05-06 08:08:33 +02:00
parent a9d38db076
commit 1391c9e671
5 changed files with 125 additions and 113 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
resources/styles/partials/dashboard-grid.scss
View file

@ -66,6 +66,14 @@
overflow: scroll;
width: 100%;
.dashboard-grid-row {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.grid-item {
align-items: center;
border-radius: $br-medium;

35
src/uxbox/ui/dashboard/colors.cljs
View file

@ -133,23 +133,24 @@
[:section.dashboard-grid.library
(page-title coll)
[:div.dashboard-grid-content
(when own?
[:div.grid-item.small-item.add-project
{:on-click #(udl/open! :color-form {:coll coll})}
[:span "+ New color"]])
(for [color (remove nil? (:colors coll))
:let [color-rgb (hex->rgb color)]]
[:div.grid-item.small-item.project-th {:key color}
[:span.color-swatch {:style {:background-color color}}]
[:span.color-data color]
[:span.color-data (apply str "RGB " (interpose ", " color-rgb))]
(if own?
[:div.project-th-actions
[:div.project-th-icon.edit
{:on-click #(edit-cb color)} i/pencil]
[:div.project-th-icon.delete
{:on-click #(remove-cb color)}
i/trash]])])]]))))
[:div.dashboard-grid-row
(when own?
[:div.grid-item.small-item.add-project
{:on-click #(udl/open! :color-form {:coll coll})}
[:span "+ New color"]])
(for [color (remove nil? (:colors coll))
:let [color-rgb (hex->rgb color)]]
[:div.grid-item.small-item.project-th {:key color}
[:span.color-swatch {:style {:background-color color}}]
[:span.color-data color]
[:span.color-data (apply str "RGB " (interpose ", " color-rgb))]
(if own?
[:div.project-th-actions
[:div.project-th-icon.edit
{:on-click #(edit-cb color)} i/pencil]
[:div.project-th-icon.delete
{:on-click #(remove-cb color)}
i/trash]])])]]]))))
(def ^:const ^:private grid
(mx/component

163
src/uxbox/ui/dashboard/elements.cljs
View file

@ -41,87 +41,88 @@
[own]
(html
[:div.dashboard-grid-content
[:div.grid-item.add-project
{on-click #(udl/open! :new-element)}
[:span "+ New element"]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]]))
[:div.dashboard-grid-row
[:div.grid-item.add-project
{on-click #(udl/open! :new-element)}
[:span "+ New element"]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]
[:div.grid-item.project-th
[:span.grid-item-image i/image]
[:h3 "Custom element"]
[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]]]]))
(def ^:const ^:private grid
(mx/component

15
src/uxbox/ui/dashboard/icons.cljs
View file

@ -108,13 +108,14 @@
[:section.dashboard-grid.library
(page-title coll)
[:div.dashboard-grid-content
(for [icon (:icons coll)]
[:div.grid-item.small-item.project-th {}
[:span.grid-item-image #_i/toggle (uusc/render-shape-svg icon nil)]
[:h3 (:name icon)]
#_[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]])]]))))
[:div.dashboard-grid-row
(for [icon (:icons coll)]
[:div.grid-item.small-item.project-th {}
[:span.grid-item-image #_i/toggle (uusc/render-shape-svg icon nil)]
[:h3 (:name icon)]
#_[:div.project-th-actions
[:div.project-th-icon.edit i/pencil]
[:div.project-th-icon.delete i/trash]]])]]]))))
(def grid
(mx/component

17
src/uxbox/ui/dashboard/projects.cljs
View file

@ -200,14 +200,15 @@
[:section.dashboard-grid
[:h2 "Your projects"]
[:div.dashboard-grid-content
[:div.grid-item.add-project
{:on-click on-click}
[:span "+ New project"]]
(for [item (->> (vals projects)
(dp/filter-projects-by filtering)
(dp/sort-projects-by ordering))]
(-> (grid-item item)
(rum/with-key (:id item))))]]))))
[:div.dashboard-grid-row
[:div.grid-item.add-project
{:on-click on-click}
[:span "+ New project"]]
(for [item (->> (vals projects)
(dp/filter-projects-by filtering)
(dp/sort-projects-by ordering))]
(-> (grid-item item)
(rum/with-key (:id item))))]]]))))
(def grid
(mx/component