3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki 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
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; overflow: scroll;
width: 100%; width: 100%;
.dashboard-grid-row {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.grid-item { .grid-item {
align-items: center; align-items: center;
border-radius: $br-medium; border-radius: $br-medium;

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

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

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

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

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

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

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

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