mirror of
https://github.com/penpot/penpot.git
synced 2025-01-07 15:39:42 -05:00
add icons and colors libraries
This commit is contained in:
Juan de la Cruz
Andrey Antukh
parent
b102b0d010
commit
19b6d6b0fe
5 changed files with 310 additions and 37 deletions
|
|
@ -26,7 +26,7 @@
|
|||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
[:div.dashboard-title
|
||||
[:h2 "Library name"]
|
||||
[:h2 "Element library name"]
|
||||
[:div.edition
|
||||
[:span icons/pencil]
|
||||
[:span icons/trash]
|
||||
|
|
@ -127,11 +127,149 @@
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Icons
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn icons-render
|
||||
[own]
|
||||
(html
|
||||
[:p "hello icons"]))
|
||||
[:main.dashboard-main
|
||||
(ui.header/header)
|
||||
[:section.dashboard-content
|
||||
[:section#dashboard-bar.dashboard-bar.library-gap
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects "20 icons"]
|
||||
[:span "Sort by"]
|
||||
#_(project-sort-selector (atom :name))]
|
||||
[:div.dashboard-search
|
||||
icons/search]]
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
[:div.dashboard-title
|
||||
[:h2 "Icon library name"]
|
||||
[:div.edition
|
||||
[:span icons/pencil]
|
||||
[:span icons/trash]
|
||||
]
|
||||
]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.small-item.add-project
|
||||
[:span "+ New icon"]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/logo-icon]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/pencil]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/trash]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/search]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/image]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/toggle]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/chat]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/close]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/page]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/folder]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/infocard]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/fill]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/stroke]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/action]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/undo]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/redo]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/export]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/exit]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.grid-item-image icons/user]
|
||||
[:h3 "Custom icon"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
]
|
||||
]
|
||||
]
|
||||
]))
|
||||
|
||||
(def icons
|
||||
(util/component
|
||||
|
|
@ -146,7 +284,123 @@
|
|||
(defn colors-render
|
||||
[own]
|
||||
(html
|
||||
[:p "hello colors"]))
|
||||
[:main.dashboard-main
|
||||
(ui.header/header)
|
||||
[:section.dashboard-content
|
||||
[:section#dashboard-bar.dashboard-bar.library-gap
|
||||
[:div.dashboard-info
|
||||
[:span.dashboard-projects "20 colors"]
|
||||
[:span "Sort by"]
|
||||
#_(project-sort-selector (atom :name))]
|
||||
[:div.dashboard-search
|
||||
icons/search]]
|
||||
(ui.library-bar/library-bar)
|
||||
[:section.dashboard-grid.library
|
||||
[:div.dashboard-title
|
||||
[:h2 "Colors library name"]
|
||||
[:div.edition
|
||||
[:span icons/pencil]
|
||||
[:span icons/trash]
|
||||
]
|
||||
]
|
||||
[:div.dashboard-grid-content
|
||||
[:div.grid-item.small-item.add-project
|
||||
[:span "+ New color"]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#81dadd"}}]
|
||||
[:span.color-data "#00f9ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#6eafd6"}}]
|
||||
[:span.color-data "#009fff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#0078ff"}}]
|
||||
[:span.color-data "#0078ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#005eff"}}]
|
||||
[:span.color-data "#005eff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#0900ff"}}]
|
||||
[:span.color-data "#0900ff"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#7502f1"}}]
|
||||
[:span.color-data "#7502f1"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#ffe705"}}]
|
||||
[:span.color-data "#ffe705"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#00ffab"}}]
|
||||
[:span.color-data "#00ffab"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#d56c5e"}}]
|
||||
[:span.color-data "#f52105"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#ae80df"}}]
|
||||
[:span.color-data "#7502f1"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#e7ba64"}}]
|
||||
[:span.color-data "#ffe705"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#73c2a8"}}]
|
||||
[:span.color-data "#00ffab"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
[:div.grid-item.small-item.project-th
|
||||
[:span.color-swatch {:style {:background-color "#f52105"}}]
|
||||
[:span.color-data "#f52105"]
|
||||
[:span.color-data "RGB 31,31,31"]
|
||||
[:div.project-th-actions
|
||||
[:div.project-th-icon.edit icons/pencil]
|
||||
[:div.project-th-icon.delete icons/trash]]]
|
||||
]
|
||||
]
|
||||
]
|
||||
]))
|
||||
|
||||
(def colors
|
||||
(util/component
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@
|
|||
[:div.main-logo
|
||||
(nav/link "/" i/logo)]
|
||||
[:ul.main-nav
|
||||
[:li
|
||||
[:a {:href "/#/"} "PROJECTS"]]
|
||||
[:li.current
|
||||
[:a {:href "/#/"} "PROJECTS"]]
|
||||
[:li
|
||||
[:a {:href "/#/elements"} "ELEMENTS"]]
|
||||
[:li
|
||||
[:a {:href "/#/icons"} "ICONS"]]
|
||||
|
|
|
|||
|
|
@ -11,67 +11,67 @@
|
|||
[:div.library-bar-inside
|
||||
[:ul.library-tabs
|
||||
[:li "STANDARD"]
|
||||
[:li.current "YOUR WIDGETS"]
|
||||
[:li.current "YOUR LIBRARIES"]
|
||||
]
|
||||
[:ul.library-elements
|
||||
[:li
|
||||
[:a.btn-primary {:href "#"} "+ New library"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 1"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 2"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 3"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 4"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 5"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 6"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 7"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 8"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 9"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 10"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 11"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 12"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 13"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
[:li
|
||||
[:span.element-title "Forms"]
|
||||
[:span.element-subtitle "21 widgets"]
|
||||
[:span.element-title "Library 14"]
|
||||
[:span.element-subtitle "21 elements"]
|
||||
]
|
||||
]
|
||||
]
|
||||
|
|
|
|||
|
|
@ -74,6 +74,10 @@
|
|||
text-align: center;
|
||||
width: 20%;
|
||||
|
||||
&.small-item {
|
||||
max-width: 12%;
|
||||
}
|
||||
|
||||
&.add-project {
|
||||
border: 2px dashed $color-gray-light;
|
||||
box-shadow: inset 0 0 0 transparent;
|
||||
|
|
@ -183,6 +187,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
border-top-left-radius: $br-medium;
|
||||
border-top-right-radius: $br-medium;
|
||||
height: 25%;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.color-data {
|
||||
color: $color-gray;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue