From 19b6d6b0fe28e2b126ba4c7abae50e92a62bcb5e Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Wed, 16 Dec 2015 10:15:16 +0100 Subject: [PATCH] add icons and colors libraries --- frontend/uxbox/ui/elements.cljs | 262 +++++++++++++++++- frontend/uxbox/ui/header.cljs | 4 +- frontend/uxbox/ui/icons.cljs | 2 +- frontend/uxbox/ui/library_bar.cljs | 58 ++-- .../styles/partials/dashboard-grid.scss | 21 +- 5 files changed, 310 insertions(+), 37 deletions(-) diff --git a/frontend/uxbox/ui/elements.cljs b/frontend/uxbox/ui/elements.cljs index a9e65dc78..566466583 100644 --- a/frontend/uxbox/ui/elements.cljs +++ b/frontend/uxbox/ui/elements.cljs @@ -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 diff --git a/frontend/uxbox/ui/header.cljs b/frontend/uxbox/ui/header.cljs index fa952167d..3d4ee4cde 100644 --- a/frontend/uxbox/ui/header.cljs +++ b/frontend/uxbox/ui/header.cljs @@ -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"]] diff --git a/frontend/uxbox/ui/icons.cljs b/frontend/uxbox/ui/icons.cljs index 99b6da380..e3fdca76b 100644 --- a/frontend/uxbox/ui/icons.cljs +++ b/frontend/uxbox/ui/icons.cljs @@ -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" diff --git a/frontend/uxbox/ui/library_bar.cljs b/frontend/uxbox/ui/library_bar.cljs index 44fe3360e..48c5d2e8a 100644 --- a/frontend/uxbox/ui/library_bar.cljs +++ b/frontend/uxbox/ui/library_bar.cljs @@ -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"] ] ] ] diff --git a/resources/public/styles/partials/dashboard-grid.scss b/resources/public/styles/partials/dashboard-grid.scss index 5e5606465..12a9877e3 100644 --- a/resources/public/styles/partials/dashboard-grid.scss +++ b/resources/public/styles/partials/dashboard-grid.scss @@ -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; + } + } }