Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00
Code Issues Activity

add icons and colors libraries

Browse source
This commit is contained in:
Juan de la Cruz 2015-12-16 10:15:16 +01:00 committed by Andrey Antukh
parent b102b0d010
commit 19b6d6b0fe
5 changed files with 310 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

262
frontend/uxbox/ui/elements.cljs
View file

@ -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

4
frontend/uxbox/ui/header.cljs
View file

@ -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"]]

2
frontend/uxbox/ui/icons.cljs
View file

@ -11,7 +11,7 @@
[:path
{:d
"m-37.899907 126.28711-52.576754 74.05348 0 41.86097-45.753769 21.76184-0.41215-0.19478 0 17.20283 0 255.89706 178.379874 84.27243 10.902091 5.14617 10.899259-5.14617 178.382706-84.27243 0-273.09989-0.33594 0.15808-45.76788-21.76748 0-41.81863-1.60059-2.25269-50.97899-71.80079-52.579583 74.05348 0 0.0734-38.258936-53.88376-37.962526 53.46879-1.357831-1.91111-50.978981-71.80079zm9.301498 43.01555 20.3362663 28.64127-59.2755273 0 20.09914-28.30534 18.840121-0.33593zm181.137859 0 20.33626 28.64127-59.27552 0 20.09632-28.30534 18.84294-0.33593zm-90.838516 20.24593 20.336262 28.63845-59.272696 0 20.096308-28.30535 18.840126-0.3331zm-134.859024 22.8289 28.113391 0 0 94.66357-28.113391-13.28182 0-81.38175zm42.546945 0 27.972245 0-0.00289 114.69495-27.972245-13.21406 0.0029-101.48089zm138.588095 0 28.11621 0-0.003 101.38492-28.11057 13.27898-0.003-114.6639zm42.54694 0 27.97224 0 0 81.3507-27.97224 13.21406 0-94.56476zm-133.38264 20.24311 28.113388 0 0 117.07749-28.113388-13.2818 0-103.79569zm42.546945 0 27.972251 0-0.0029 104.02152-27.972237 13.21688 0.0029-117.2384zm136.126505 31.11132 24.7513 10.12015-24.7513 11.6925 0-21.81265zm-286.291361 0.0367 0 21.80983-24.748479-11.69252 24.748479-10.11731zM1085.4303 293.93709c-26.4791 0-47.8776 9.14921-63.6849 27.34839-15.7919 18.18144-23.66164 41.8944-23.66164 70.83253l0 36.20103c0 29.03883 7.87124 52.75579 23.66734 70.83818 15.9098 18.09349 37.3521 27.19311 63.8288 27.19313 26.8739 0 48.57-9.088 64.5855-27.17901 16.1059-18.08016 24.1359-41.80704 24.1359-70.8523l0-36.20103c0-28.94462-8.0258-52.66743-24.1275-70.84665-16.1159-18.19544-37.8635-27.33427-64.7435-27.33427zm-270.76532 3.20401 0 0.003 0 225.99958 1.81514 0 76.82275 0c21.881 0 39.56409-5.44164 52.77719-16.4491l0.009-0.009c13.35116-11.04245 20.04832-26.97133 20.04832-47.21604 0-13.82062-4.3954-26.15394-13.09267-36.73739-7.69758-9.36692-17.86714-15.07948-29.65752-18.14004 9.30101-3.53759 17.23505-8.69692 22.97287-16.25151 6.75761-8.76372 10.15406-19.14159 10.15401-30.89114 0-19.94328-6.7207-35.2523-20.11326-45.2767l-0.0145-0.009c-13.24636-10.08688-31.6375-15.02354-54.99882-15.02354l-66.72237 0zm-405.63848 0.003 0 152.55586c0 24.49603 7.46567 43.6489 22.44498 56.95228l0.009 0c14.92387 13.14971 34.47132 19.69829 58.32137 19.69829 24.14893 0 43.9385-6.54043 59.06664-19.68419 15.29363-13.19856 22.9277-32.36243 22.9277-56.96638l0-152.55586-1.81514 0-19.99187 0 0 152.55586c0 18.67383-5.55958 32.71936-16.64953 42.63164-11.14796 9.9641-25.55052 14.95862-43.5378 14.95862-17.67605 0-31.75828-4.98933-42.60058-14.94451-10.79347-10.01074-16.21763-24.06821-16.21763-42.64575l0-152.55586-21.95662 0zm194.34062 0 75.29556 111.46554-77.5934 114.53404 26.54666 0 64.09142-96.58596 64.23256 96.58596 26.2418 0-77.59341-114.53404 75.13748-111.46554-26.53256 0-61.79074 93.51182-61.49434-93.51182-26.54103 0zm593.18158 0 75.304 111.46554-77.5963 114.53404 26.5411 0 64.0914-96.58596 64.2382 96.58596 26.2362 0-77.5935-114.53404 75.146-111.46554-26.5411 0-61.785 93.50617-61.4916-93.50617-26.5494 0zm-1311.39275 1.03601 156.581344 73.96879 0 224.8789-156.581344-73.9688 0-224.87889zm334.96404 0 0 224.87889-156.581346 73.9688 0-224.8789L220.11999 298.18Zm865.31031 15.42723c21.1739 0 37.371 7.07946 49.1498 21.33274 11.9056 14.28671 17.9142 33.15235 17.9142 56.87323l0 36.50591c0 24.03274-5.9628 43.05217-17.7646 57.33336-11.6729 14.14589-27.8693 21.18314-49.1498 21.18314-20.7586 0-36.6434-7.07159-48.2238-21.32427-11.5016-14.28036-17.3073-33.2575-17.3073-57.19223l0-36.50591c0-23.73117 5.8007-42.60889 17.3073-56.89299 11.4781-14.24852 27.3155-21.31298 48.0742-21.31298zm-248.95831 2.74669 44.91536 0c17.67893 0 30.91128 3.5286 39.83413 10.31774l0 0.009 0.009 0c8.90205 6.67653 13.32697 16.51578 13.32697 30.16282 0 13.35501-4.19627 23.12222-12.60995 29.89182-8.33267 6.6855-20.30783 10.1399-36.13046 10.1399l-49.3417 0 0-80.51794-0.003-0.003zm0 99.5726 59.73284 0c15.86896 0 27.61591 4.15369 35.65903 12.29378l0.0116 0.009 0.009 0c8.2187 8.21873 12.29096 18.60196 12.29096 31.5517 0 14.17022-4.4659 24.89285-13.4286 32.68652-8.96884 7.69556-21.35194 11.61624-37.44028 11.61627l-56.8309 0 0-88.15392-0.003-0.003z"}]]])
(def search
[:svg
{:viewBox "0 0 500.00001 500.00001"

58
frontend/uxbox/ui/library_bar.cljs
View file

@ -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"]
]
]
]

21
resources/public/styles/partials/dashboard-grid.scss
View file

@ -36,7 +36,7 @@
svg {
fill: $color-gray-darker;
}
}
}
@ -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;
}
}
}