From bdbfa36112daf706d36f92f13fda292c1492d2ed Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Mon, 31 Oct 2016 10:41:28 +0100 Subject: [PATCH 1/6] fix library tabs --- resources/styles/main/partials/library-bar.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/resources/styles/main/partials/library-bar.scss b/resources/styles/main/partials/library-bar.scss index 7f46e59018..5141ba5944 100644 --- a/resources/styles/main/partials/library-bar.scss +++ b/resources/styles/main/partials/library-bar.scss @@ -34,7 +34,10 @@ color: $color-gray; cursor: pointer; font-weight: bold; + font-size: $fs14; padding: .6rem; + text-align: center; + width: 118px; &:hover { color: $color-white; From a1a7aa044a3511ab161d85905ea651930eb036e6 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Mon, 31 Oct 2016 14:28:11 +0100 Subject: [PATCH 2/6] add new actions icon --- resources/public/images/svg/actions.svg | 4 ++++ src/uxbox/main/ui/icons.cljs | 11 +++++++++++ 2 files changed, 15 insertions(+) create mode 100644 resources/public/images/svg/actions.svg diff --git a/resources/public/images/svg/actions.svg b/resources/public/images/svg/actions.svg new file mode 100644 index 0000000000..44acb5b3c5 --- /dev/null +++ b/resources/public/images/svg/actions.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/uxbox/main/ui/icons.cljs b/src/uxbox/main/ui/icons.cljs index 971789806f..cf90d87570 100644 --- a/src/uxbox/main/ui/icons.cljs +++ b/src/uxbox/main/ui/icons.cljs @@ -151,6 +151,17 @@ {:d "m191.64785 498.75262c-7.77969-2.11857-14.67898-5.99402-20.54139-11.53843-8.86314-8.38239-13.27097-17.70166-14.81986-31.33296-0.52235-4.59701-1.80728-9.96843-2.89433-12.09923-1.07523-2.10761-26.63047-40.84608-56.789439-86.0855-30.158969-45.23941-55.913166-84.69256-57.231546-87.67366-6.563748-14.84179-9.586791-33.37935-7.262342-44.53328 4.526246-21.71931 24.327108-37.85973 46.414415-37.83411 11.641878 0.0135 28.640132 5.54001 39.296402 12.77611 2.58564 1.75579 11.98611 10.37261 20.88992 19.14853 8.90381 8.7759 16.48667 15.65827 16.8508 15.29414 0.36413-0.36414 0.66206-44.01547 0.66206-97.00296 0-82.245655 0.21318-97.159375 1.45714-101.935253 4.41235-16.940112 17.39069-29.9600167 34.23876-34.3483807 8.05009-2.09678105 45.49218-2.12380205 53.49777-0.0386 15.5359 4.046588 26.73695 14.1690707 33.25353 30.0515047 2.01608 4.913664 2.12219 6.923979 2.59061 49.08212l0.48843 43.958619 12.69916 0.58638c13.37443 0.61757 18.47109 1.94455 27.10282 7.05653 5.81486 3.44375 12.72951 10.84436 16.58951 17.75539l3.27361 5.86115 14.12606 0.57445c14.94455 0.60774 19.54533 1.74762 28.52973 7.06847 5.81486 3.44374 12.72951 10.84435 16.58951 17.75539l3.27361 5.86115 14.12606 0.57445c14.92207 0.60682 19.46078 1.72797 28.54342 7.05074 9.68996 5.6787 18.81066 18.78004 21.24824 30.52183 0.7106 3.42294 0.95264 28.1032 0.74786 76.25841l-0.30276 71.19758-2.63402 8.43865c-1.4487 4.64126-3.6785 10.79546-4.9551 13.67601-2.79164 6.29914-50.84038 78.83494-56.42111 85.17498-5.31576 6.03902-16.27188 13.15029-25.79263 16.74118l-7.84989 2.96071-86.94036 0.19531c-72.67254 0.16326-87.77967-0.0332-92.05465-1.19741zM371.1514 465.8467c2.96605-1.45671 6.87807-4.09423 8.69336-5.86115 4.13916-4.02886 49.391-71.71439 52.53142-78.57398 4.99063-10.90096 5.14624-13.43644 5.16449-84.14958 0.0164-63.57187-0.0465-65.85708-1.91464-69.51886-1.06239-2.08243-3.37021-4.81234-5.12851-6.06645-2.86192-2.04126-4.27166-2.28019-13.45391-2.28019l-10.25701 0-0.48843 25.9654-0.48843 25.96541-2.63121 3.44708c-6.83226 8.9507-18.72512 8.69119-25.63731-0.55944-1.92902-2.58161-2.03471-4.25321-2.5025-39.58056l-0.48843-36.88512-2.63122-3.44757c-4.13845-5.42243-8.03678-6.77363-18.59664-6.44578l-9.05474 0.28112-0.48843 26.06201c-0.45694 24.3818-0.61827 26.23574-2.5025 28.75695-3.83003 5.12479-6.95081 6.72309-13.12722 6.72309-6.17669 0-9.29773-1.59856-13.12723-6.72359-1.92902-2.58161-2.0347-4.25321-2.5025-39.58057l-0.48843-36.88512-2.63122-3.44756c-4.13845-5.42243-8.03678-6.77363-18.59664-6.44578l-9.05474 0.28112-0.48843 25.9654-0.48843 25.96541-2.63121 3.44708c-3.56365 4.66861-8.71479 7.00414-14.10743 6.39631-4.51077-0.50843-10.18186-4.12146-12.30976-7.84251-0.95705-1.67358-1.34387-20.91329-1.72262-85.67957l-0.48843-83.521362-2.28019-3.196904c-1.25411-1.758296-4.03275-4.090984-6.17476-5.183755-3.60332-1.838271-5.37457-1.964462-23.68558-1.687386-19.78025 0.299309-19.79289 0.300902-23.23772 2.930691-7.16446 5.46935-6.65223-5.122027-6.65223 137.547896 0 142.67538 0.51262 132.08072-6.65522 137.5479-2.80603 2.14025-4.48058 2.63121-8.97451 2.63121-4.58326 0-6.15379-0.47975-9.21563-2.81513-5.11203-3.89914-6.41409-7.63565-6.41409-18.40647l0-9.07362-28.08467-27.98737c-16.84145-16.78309-29.648931-28.76278-31.992091-29.9243-5.491904-2.72239-13.890533-5.08594-18.004958-5.06697-7.975943 0.0367-15.64746 7.95753-15.680572 16.19004-0.02076 5.15985 3.17886 17.64199 5.878954 22.9346 1.159376 2.27258 26.640125 40.92627 56.623877 85.89711 29.98376 44.97083 55.39705 83.49229 56.47397 85.60323 2.81991 5.52749 5.01244 13.67096 5.96313 22.14824 0.95039 8.47465 3.16631 12.37269 8.70794 15.31822 3.48262 1.85112 5.94661 1.89927 86.61752 1.6925l83.03293-0.2128 5.39283-2.64857z"}]]])) +(def actions + (html + [:svg + {:viewBox "0 0 500.00001 500.00001" + :height "500" + :width "500"} + [:g + [:path + {:d + "M207.305 0c-6.64 0-11.987 5.345-11.987 11.984v85.393c0 6.64 5.347 11.984 11.987 11.984h85.39c6.64 0 11.987-5.343 11.987-11.983V11.984c0-6.64-5.347-11.984-11.987-11.984h-85.39zm0 195.318c-6.64 0-11.987 5.347-11.987 11.987v85.39c0 6.64 5.347 11.987 11.987 11.987h85.39c6.64 0 11.987-5.347 11.987-11.987v-85.39c0-6.64-5.347-11.987-11.987-11.987h-85.39zm0 195.32c-6.64 0-11.987 5.345-11.987 11.985v85.393c0 6.64 5.347 11.984 11.987 11.984h85.39c6.64 0 11.987-5.345 11.987-11.984v-85.393c0-6.64-5.347-11.984-11.987-11.984h-85.39z"}]]])) + (def action-mark (html [:svg From 4bbd8f809c055844673586febe7982359f7d7710 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Mon, 31 Oct 2016 15:56:12 +0100 Subject: [PATCH 3/6] add new dashboard elements info --- .../styles/main/partials/dashboard-grid.scss | 93 +++++++++++-------- src/uxbox/main/ui/dashboard/icons.cljs | 4 +- src/uxbox/main/ui/dashboard/images.cljs | 4 +- src/uxbox/main/ui/dashboard/projects.cljs | 9 +- 4 files changed, 64 insertions(+), 46 deletions(-) diff --git a/resources/styles/main/partials/dashboard-grid.scss b/resources/styles/main/partials/dashboard-grid.scss index 94bf27b839..1ad6cad948 100644 --- a/resources/styles/main/partials/dashboard-grid.scss +++ b/resources/styles/main/partials/dashboard-grid.scss @@ -109,6 +109,38 @@ min-width: 190px; } + .item-info { + bottom: 0; + display: flex; + flex-direction: column; + left: 0; + padding: $small; + position: absolute; + text-align: left; + width: 100%; + + h3 { + color: $intense-ui-text; + font-size: $fs16; + font-weight: 400; + overflow: hidden; + padding: 0; + padding-right: $small; + text-overflow: ellipsis; + width: 100%; + white-space: nowrap; + } + + span.date { + color: $soft-ui-text; + font-size: $fs12; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; + } + + } + &.add-project { border: 2px dashed $color-gray-light; box-shadow: inset 0 0 0 transparent; @@ -148,20 +180,12 @@ } - h3 { - color: $color-gray-darker; - font-weight: 400; - } - - .project-th-update { - color: $color-gray-light; - } - .project-th-actions { align-items: center; bottom: 0; display: flex; left: 0; + justify-content: flex-end; padding: $small; position: absolute; width: 100%; @@ -169,7 +193,7 @@ svg { fill: $color-gray-light; height: 14px; - margin-right: 5px; + margin-right: $x-small; width: 14px; } @@ -182,25 +206,39 @@ display: flex; margin-right: $small; - &.delete, - &.edit { - margin-left: auto; + &.delete { margin-right: 0; svg { - fill: $color-danger; + fill: $medium-ui-icons; + margin-right: 0; } &:hover { transform: scale(1.4); + + svg { + fill: $color-danger; + } + } } &.edit { + margin-right: 0; + + svg { + fill: $medium-ui-icons; + } &:hover { transform: scale(1.4); + + svg { + fill: $color-primary; + } + } } @@ -220,18 +258,6 @@ &:hover { border-color: $main-ui-color; - - span { - color: $main-ui-color; - } - - } - - span { - padding: $small; - text-align: left; - width: 100%; - @include text-ellipsis; } .grid-item-th { @@ -252,7 +278,7 @@ svg { height: 20%; max-width: 120px; - width: 40%; + width: 3vw; } } @@ -291,19 +317,6 @@ // STYLES FOR LIBRARIES &.library { padding: $medium $medium $medium 250px; - - .dashboard-grid-content { - - .grid-item { - - h3 { - font-size: $fs18; - } - - } - - } - } } diff --git a/src/uxbox/main/ui/dashboard/icons.cljs b/src/uxbox/main/ui/dashboard/icons.cljs index afde64f907..24e85ed61e 100644 --- a/src/uxbox/main/ui/dashboard/icons.cljs +++ b/src/uxbox/main/ui/dashboard/icons.cljs @@ -304,7 +304,9 @@ [:label {:for (:id icon)}]] [:span.grid-item-image (icon/icon-svg icon)] - [:h3 (:name icon)] + [:div.item-info + [:h3 (:name icon)] + [:span.date "Uploaded at 21/09/2016"]] #_[:div.project-th-actions [:div.project-th-icon.edit i/pencil] [:div.project-th-icon.delete i/trash]]])) diff --git a/src/uxbox/main/ui/dashboard/images.cljs b/src/uxbox/main/ui/dashboard/images.cljs index 6e7ee8059c..c0cebb1425 100644 --- a/src/uxbox/main/ui/dashboard/images.cljs +++ b/src/uxbox/main/ui/dashboard/images.cljs @@ -304,7 +304,9 @@ :on-click toggle-selection :checked selected?}] [:label {:for (:id image)}]]] - [:span (:name image)]])) + [:div.item-info + [:h3 (:name image)] + [:span.date "Uploaded at 12/11/2016"]]])) (mx/defc grid {:mixins [mx/static mx/reactive]} diff --git a/src/uxbox/main/ui/dashboard/projects.cljs b/src/uxbox/main/ui/dashboard/projects.cljs index 165101eda6..f050faac33 100644 --- a/src/uxbox/main/ui/dashboard/projects.cljs +++ b/src/uxbox/main/ui/dashboard/projects.cljs @@ -153,9 +153,10 @@ (dom/stop-propagation event) (udl/open! :confirm {:on-accept delete}))] [:div.grid-item.project-th {:on-click on-navigate} - [:h3 (:name project)] - [:span.project-th-update - (str "Updated " (dt/timeago (:modified-at project)))] + [:div.item-info + [:h3 (:name project)] + [:span.date + (str "Updated " (dt/timeago (:modified-at project)))]] [:div.project-th-actions [:div.project-th-icon.pages i/page @@ -163,7 +164,7 @@ #_[:div.project-th-icon.comments i/chat [:span "0"]] - #_[:div.project-th-icon.edit + [:div.project-th-icon.edit i/pencil] [:div.project-th-icon.delete {:on-click on-delete} From fed7d913c54d78e8fbb2abb26eacae3aa3a54c7b Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Thu, 3 Nov 2016 14:26:24 +0100 Subject: [PATCH 4/6] add rename icon --- src/uxbox/main/ui/dashboard/icons.cljs | 5 ++++- src/uxbox/main/ui/dashboard/images.cljs | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/uxbox/main/ui/dashboard/icons.cljs b/src/uxbox/main/ui/dashboard/icons.cljs index 24e85ed61e..c02c02787e 100644 --- a/src/uxbox/main/ui/dashboard/icons.cljs +++ b/src/uxbox/main/ui/dashboard/icons.cljs @@ -271,10 +271,13 @@ (if editable? [:div.multiselect-nav [:span.move-item.tooltip.tooltip-top - {:on-click on-toggle-move} + {:alt "Move items" :on-click on-toggle-move} (when (:show-move-tooltip @local) (grid-options-move id)) i/organize] + [:span.move-item.tooltip.tooltip-top + {:alt "Rename"} + i/pencil] [:span.delete.tooltip.tooltip-top {:alt "Delete" :on-click on-delete} diff --git a/src/uxbox/main/ui/dashboard/images.cljs b/src/uxbox/main/ui/dashboard/images.cljs index c0cebb1425..c6d070aa5d 100644 --- a/src/uxbox/main/ui/dashboard/images.cljs +++ b/src/uxbox/main/ui/dashboard/images.cljs @@ -272,10 +272,13 @@ (if editable? [:div.multiselect-nav [:span.move-item.tooltip.tooltip-top - {:on-click on-toggle-move} + {:alt "Move items":on-click on-toggle-move} (when (:show-move-tooltip @local) (grid-options-move id)) i/organize] + [:span.move-item.tooltip.tooltip-top + {:alt "Rename"} + i/pencil] [:span.delete.tooltip.tooltip-top {:alt "Delete" :on-click on-delete} From 9d196e7c9f228d63d317d1159e8837259c20421f Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Thu, 3 Nov 2016 17:03:34 +0100 Subject: [PATCH 5/6] add project placeholder img --- .../public/images/project-placeholder.svg | 121 ++++++++++++++++++ .../styles/main/partials/dashboard-grid.scss | 27 ++-- src/uxbox/main/ui/dashboard/projects.cljs | 2 + 3 files changed, 135 insertions(+), 15 deletions(-) create mode 100644 resources/public/images/project-placeholder.svg diff --git a/resources/public/images/project-placeholder.svg b/resources/public/images/project-placeholder.svg new file mode 100644 index 0000000000..10739d9748 --- /dev/null +++ b/resources/public/images/project-placeholder.svg @@ -0,0 +1,121 @@ + + + + + + + Octoface + + + + Mark Github + + + + Twitter + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/resources/styles/main/partials/dashboard-grid.scss b/resources/styles/main/partials/dashboard-grid.scss index 1ad6cad948..25d6c044d4 100644 --- a/resources/styles/main/partials/dashboard-grid.scss +++ b/resources/styles/main/partials/dashboard-grid.scss @@ -95,11 +95,9 @@ flex-direction: column; flex-shrink: 0; height: 200px; - justify-content: center; margin: $medium $medium 0 $medium; max-width: 300px; min-width: 260px; - padding: $medium; position: relative; text-align: center; width: 18%; @@ -107,6 +105,8 @@ &.small-item { max-width: 12%; min-width: 190px; + padding: $medium; + justify-content: center; } .item-info { @@ -253,24 +253,11 @@ &.images-th { background-color: $color-white; border-bottom: 2px solid lighten($color-gray-light, 12%); - justify-content: flex-start; - padding: 0; &:hover { border-color: $main-ui-color; } - .grid-item-th { - background-position: center; - background-size: cover; - border-top-left-radius: $br-medium; - border-top-right-radius: $br-medium; - height: 70%; - position: relative; - width: 100%; - - } - } .grid-item-image { @@ -321,6 +308,16 @@ } +.grid-item-th { + background-position: center; + background-size: cover; + border-top-left-radius: $br-medium; + border-top-right-radius: $br-medium; + height: 70%; + position: relative; + width: 100%; +} + // MULTISELECT OPTIONS BAR .multiselect-bar { @include animation(0,.5s,fadeInUp); diff --git a/src/uxbox/main/ui/dashboard/projects.cljs b/src/uxbox/main/ui/dashboard/projects.cljs index f050faac33..e1c0aa5321 100644 --- a/src/uxbox/main/ui/dashboard/projects.cljs +++ b/src/uxbox/main/ui/dashboard/projects.cljs @@ -153,6 +153,8 @@ (dom/stop-propagation event) (udl/open! :confirm {:on-accept delete}))] [:div.grid-item.project-th {:on-click on-navigate} + [:div.grid-item-th + {:style {:background-image "url('/images/project-placeholder.svg')"}}] [:div.item-info [:h3 (:name project)] [:span.date From c8ebc7ea87570c6562b56871e2a4649b1a585fc0 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Fri, 4 Nov 2016 13:32:03 +0100 Subject: [PATCH 6/6] add input measures --- resources/styles/common/framework.scss | 52 ++++++++ resources/styles/main/partials/lightbox.scss | 5 +- src/uxbox/main/ui/workspace/settings.cljs | 34 ++--- .../sidebar/options/circle_measures.cljs | 65 +++++----- .../ui/workspace/sidebar/options/fill.cljs | 7 -- .../sidebar/options/icon_measures.cljs | 65 +++++----- .../sidebar/options/interactions.cljs | 118 ++++++++++-------- .../sidebar/options/rect_measures.cljs | 68 +++++----- .../ui/workspace/sidebar/options/stroke.cljs | 13 +- .../main/ui/workspace/sidebar/sitemap.cljs | 30 ++--- 10 files changed, 265 insertions(+), 192 deletions(-) diff --git a/resources/styles/common/framework.scss b/resources/styles/common/framework.scss index 2e5b92a015..3d7fdb33f0 100644 --- a/resources/styles/common/framework.scss +++ b/resources/styles/common/framework.scss @@ -312,6 +312,56 @@ ul.slider-dots { } // Input elements +.input-element { + display: flex; + position: relative; + width: 100%; + + &::after { + color: $soft-ui-text; + font-size: $fs12; + height: 20px; + position: absolute; + right: 3px; + top: 26%; + width: 20px; + } + + // Input amounts + + &.pixels { + + &::after { + content: "px"; + } + + } + + &.percentail { + + &::after { + content: "%"; + } + + } + + &.miliseconds { + + &::after { + content: "ms"; + } + + } + + &.degrees { + + &::after { + content: "dg"; + } + + } + +} input, select { @@ -355,6 +405,7 @@ input[type="checkbox"]:focus { box-shadow: none; outline: none; padding: $small $big $small $small; + position: relative; @include placeholder { transition: all .3s ease; @@ -402,6 +453,7 @@ input[type="checkbox"]:focus { } + // Input radio .input-radio, diff --git a/resources/styles/main/partials/lightbox.scss b/resources/styles/main/partials/lightbox.scss index c63ef11749..212cf0a80e 100644 --- a/resources/styles/main/partials/lightbox.scss +++ b/resources/styles/main/partials/lightbox.scss @@ -55,8 +55,9 @@ width: 100%; .input-text { - width: 35%; - } + margin-right: $small; + // width: 35%; + } .toggle-layout { diff --git a/src/uxbox/main/ui/workspace/settings.cljs b/src/uxbox/main/ui/workspace/settings.cljs index c143c77acf..c665183252 100644 --- a/src/uxbox/main/ui/workspace/settings.cljs +++ b/src/uxbox/main/ui/workspace/settings.cljs @@ -63,22 +63,24 @@ [:form {:on-submit on-submit} [:span.lightbox-label "Grid size"] [:div.project-size - [:input#grid-x.input-text - {:placeholder "X px" - :type "number" - :class (forms/error-class errors :grid/x-axis) - :value (:grid/x-axis form "") - :on-change (partial on-field-change :grid/x-axis) - :min 1 - :max 100}] - [:input#grid-y.input-text - {:placeholder "Y px" - :type "number" - :class (forms/error-class errors :grid/y-axis) - :value (:grid/y-axis form "") - :on-change (partial on-field-change :grid/y-axis) - :min 1 - :max 100}]] + [:div.input-element.pixels + [:input#grid-x.input-text + {:placeholder "X" + :type "number" + :class (forms/error-class errors :grid/x-axis) + :value (:grid/x-axis form "") + :on-change (partial on-field-change :grid/x-axis) + :min 1 + :max 100}]] + [:div.input-element.pixels + [:input#grid-y.input-text + {:placeholder "Y" + :type "number" + :class (forms/error-class errors :grid/y-axis) + :value (:grid/y-axis form "") + :on-change (partial on-field-change :grid/y-axis) + :min 1 + :max 100}]]] [:span.lightbox-label "Grid color"] (uucp/colorpicker :value (:grid/color form) diff --git a/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs b/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs index 31a73e70b9..7da27c083b 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs @@ -53,35 +53,39 @@ ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Size"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:rx shape) - :on-change (partial on-size-change :rx)}] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:rx shape) + :on-change (partial on-size-change :rx)}]] [:div.lock-size {:class (when (:proportion-lock shape) "selected") :on-click on-proportion-lock-change} i/lock] - [:input.input-text - {:placeholder "Height" - :type "number" - :min "0" - :value (:ry shape) - :on-change (partial on-size-change :ry)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :type "number" + :min "0" + :value (:ry shape) + :on-change (partial on-size-change :ry)}]]] [:span "Position"] [:div.row-flex - [:input.input-text - {:placeholder "cx" - :type "number" - :value (:cx shape "") - :on-change (partial on-pos-change :x)}] - [:input.input-text - {:placeholder "cy" - :type "number" - :value (:cy shape "") - :on-change (partial on-pos-change :y)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "cx" + :type "number" + :value (:cx shape "") + :on-change (partial on-pos-change :x)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "cy" + :type "number" + :value (:cy shape "") + :on-change (partial on-pos-change :y)}]]] [:span "Rotation"] [:div.row-flex @@ -93,13 +97,14 @@ :on-change on-rotation-change}]] [:div.row-flex - [:input.input-text - {:placeholder "" - :type "number" - :min 0 - :max 360 - :value (:rotation shape "0") - :on-change on-rotation-change - }] + [:div.input-element.degrees + [:input.input-text + {:placeholder "" + :type "number" + :min 0 + :max 360 + :value (:rotation shape "0") + :on-change on-rotation-change + }]] [:input.input-text {:style {:visibility "hidden"}}]]]])) diff --git a/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs b/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs index 1477450db9..50bf771484 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/fill.cljs @@ -57,13 +57,6 @@ [:div.color-info [:span (:fill shape "#000000")]]] - [:div.row-flex - [:input.input-text - {:placeholder "#" - :type "text" - :value (:fill shape "") - :on-change on-color-change}]] - ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Opacity"] [:div.row-flex diff --git a/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs b/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs index dacdf8bb65..3f45fcb141 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs @@ -50,32 +50,36 @@ ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Size"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:width size) - :on-change (partial on-size-change :width)}] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:width size) + :on-change (partial on-size-change :width)}]] [:div.lock-size i/lock] - [:input.input-text - {:placeholder "Height" - :type "number" - :min "0" - :value (:height size) - :on-change (partial on-size-change :height)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :type "number" + :min "0" + :value (:height size) + :on-change (partial on-size-change :height)}]]] [:span "Position"] [:div.row-flex - [:input.input-text - {:placeholder "x" - :type "number" - :value (:x1 shape "") - :on-change (partial on-pos-change :x)}] - [:input.input-text - {:placeholder "y" - :type "number" - :value (:y1 shape "") - :on-change (partial on-pos-change :y)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "X" + :type "number" + :value (:x1 shape "") + :on-change (partial on-pos-change :x)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Y" + :type "number" + :value (:y1 shape "") + :on-change (partial on-pos-change :y)}]]] [:span "Rotation"] [:div.row-flex @@ -87,14 +91,15 @@ :on-change on-rotation-change}]] [:div.row-flex - [:input.input-text - {:placeholder "" - :type "number" - :min 0 - :max 360 - :value (:rotation shape "0") - :on-change on-rotation-change - }] + [:div.input-element.degrees + [:input.input-text + {:placeholder "" + :type "number" + :min 0 + :max 360 + :value (:rotation shape "0") + :on-change on-rotation-change + }]] [:input.input-text {:style {:visibility "hidden"}}] ]]])))) diff --git a/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs b/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs index a7a1887457..73b9adac70 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs @@ -228,18 +228,20 @@ (swap! form-ref assoc :moveto-y 0)) (html [:div - [:span "Move to position (px)"] + [:span "Move to position"] [:div.row-flex - [:input.input-text - {:placeholder "X" - :on-change (partial on-change form-ref :moveto-x) - :type "number" - :value (:moveto-x @form-ref "")}] - [:input.input-text - {:placeholder "Y" - :on-change (partial on-change form-ref :moveto-y) - :type "number" - :value (:moveto-y @form-ref "")}]]])) + [:div.input-element.pixels + [:input.input-text + {:placeholder "X" + :on-change (partial on-change form-ref :moveto-x) + :type "number" + :value (:moveto-x @form-ref "")}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Y" + :on-change (partial on-change form-ref :moveto-y) + :type "number" + :value (:moveto-y @form-ref "")}]]]])) (def moveto-input (mx/component @@ -256,18 +258,20 @@ (swap! form-ref assoc :moveby-y 0)) (html [:div - [:span "Move to position (px)"] + [:span "Move to position"] [:div.row-flex - [:input.input-text - {:placeholder "X" - :on-change (partial on-change form-ref :moveby-x) - :type "number" - :value (:moveby-x @form-ref "")}] - [:input.input-text - {:placeholder "Y" - :on-change (partial on-change form-ref :moveby-y) - :type "number" - :value (:moveby-y @form-ref "")}]]])) + [:div.input-element.pixels + [:input.input-text + {:placeholder "X" + :on-change (partial on-change form-ref :moveby-x) + :type "number" + :value (:moveby-x @form-ref "")}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Y" + :on-change (partial on-change form-ref :moveby-y) + :type "number" + :value (:moveby-y @form-ref "")}]]]])) (def moveby-input (mx/component @@ -282,15 +286,16 @@ (swap! form-ref assoc :opacity 100)) (html [:div - [:span "Opacity (%)"] + [:span "Opacity"] [:div.row-flex - [:input.input-text - {:placeholder "%" - :on-change (partial on-change form-ref :opacity) - :min "0" - :max "100" - :type "number" - :value (:opacity @form-ref "")}]]])) + [:div.input-element.percentail + [:input.input-text + {:placeholder "%" + :on-change (partial on-change form-ref :opacity) + :min "0" + :max "100" + :type "number" + :value (:opacity @form-ref "")}]]]])) (def opacity-input (mx/component @@ -305,11 +310,12 @@ [:div [:span "Rotate (dg)"] [:div.row-flex - [:input.input-text - {:placeholder "dg" - :on-change (partial on-change form-ref :rotation) - :type "number" - :value (:rotation @form-ref "")}]]])) + [:div.input-element.degrees + [:input.input-text + {:placeholder "dg" + :on-change (partial on-change form-ref :rotation) + :type "number" + :value (:rotation @form-ref "")}]]]])) (def rotate-input (mx/component @@ -322,18 +328,20 @@ [own form-ref] (html [:div - [:span "Resize (px)"] + [:span "Resize"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :on-change (partial on-change form-ref :resize-width) - :type "number" - :value (:resize-width @form-ref "")}] - [:input.input-text - {:placeholder "Height" - :on-change (partial on-change form-ref :resize-height) - :type "number" - :value (:resize-height @form-ref "")}]]])) + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :on-change (partial on-change form-ref :resize-width) + :type "number" + :value (:resize-width @form-ref "")}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :on-change (partial on-change form-ref :resize-height) + :type "number" + :value (:resize-height @form-ref "")}]]]])) (def resize-input (mx/component @@ -443,17 +451,19 @@ (swap! form-ref assoc :delay 0)) (html [:div - [:span "Duration | Delay (ms)"] + [:span "Duration | Delay"] [:div.row-flex - [:input.input-text - {:placeholder "Duration" - :type "number" - :on-change (partial on-change form-ref :duration) - :value (pr-str (:duration @form-ref))}] - [:input.input-text {:placeholder "Delay" + [:div.input-element.miliseconds + [:input.input-text + {:placeholder "Duration" + :type "number" + :on-change (partial on-change form-ref :duration) + :value (pr-str (:duration @form-ref))}]] + [:div.input-element.miliseconds + [:input.input-text {:placeholder "Delay" :type "number" :on-change (partial on-change form-ref :delay) - :value (pr-str (:delay @form-ref))}]]])) + :value (pr-str (:delay @form-ref))}]]]])) (def duration-input (mx/component diff --git a/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs b/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs index 7c1ab47c05..2725d006b6 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs @@ -57,35 +57,39 @@ ;; SLIDEBAR FOR ROTATION AND OPACITY [:span "Size"] [:div.row-flex - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:width size) - :on-change (partial on-size-change :width)}] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:width size) + :on-change (partial on-size-change :width)}]] [:div.lock-size {:class (when (:proportion-lock shape) "selected") :on-click on-proportion-lock-change} i/lock] - [:input.input-text - {:placeholder "Height" - :type "number" - :min "0" - :value (:height size) - :on-change (partial on-size-change :height)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Height" + :type "number" + :min "0" + :value (:height size) + :on-change (partial on-size-change :height)}]]] [:span "Position"] [:div.row-flex - [:input.input-text - {:placeholder "x" - :type "number" - :value (:x1 shape "") - :on-change (partial on-pos-change :x)}] - [:input.input-text - {:placeholder "y" - :type "number" - :value (:y1 shape "") - :on-change (partial on-pos-change :y)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "x" + :type "number" + :value (:x1 shape "") + :on-change (partial on-pos-change :x)}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "y" + :type "number" + :value (:y1 shape "") + :on-change (partial on-pos-change :y)}]]] [:span "Border radius"] [:div.row-flex @@ -111,17 +115,15 @@ :on-change on-rotation-change}]] [:div.row-flex - [:input.input-text - {:placeholder "" - :type "number" - :min 0 - :max 360 - :value (:rotation shape "0") - :on-change on-rotation-change - }] + [:div.input-element.degrees + [:input.input-text + {:placeholder "" + :type "number" + :min 0 + :max 360 + :value (:rotation shape "0") + :on-change on-rotation-change + }]] [:input.input-text {:style {:visibility "hidden"}}] ]]]))) - - - diff --git a/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs b/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs index dd5b3f7e2f..2078649fab 100644 --- a/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs @@ -64,12 +64,13 @@ [:option {:value ":dotted"} "Dotted"] [:option {:value ":dashed"} "Dashed"] [:option {:value ":mixed"} "Mixed"]] - [:input.input-text - {:placeholder "Width" - :type "number" - :min "0" - :value (:stroke-width shape "1") - :on-change on-width-change}]] + [:div.input-element.pixels + [:input.input-text + {:placeholder "Width" + :type "number" + :min "0" + :value (:stroke-width shape "1") + :on-change on-width-change}]]] [:span "Color"] [:div.row-flex.color-data diff --git a/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index dd27453488..a6e1fac1aa 100644 --- a/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -153,21 +153,23 @@ :auto-focus true :on-change update-name}] [:div.project-size - [:input#project-witdh.input-text - {:placeholder "Width" - :type "number" - :min 0 - :max 4000 - :value (:width metadata) - :on-change #(update-size :width %)}] + [:div.input-element.pixels + [:input#project-witdh.input-text + {:placeholder "Width" + :type "number" + :min 0 + :max 4000 + :value (:width metadata) + :on-change #(update-size :width %)}]] [:a.toggle-layout {:on-click toggle-sizes} i/toggle] - [:input#project-height.input-text - {:placeholder "Height" - :type "number" - :min 0 - :max 4000 - :value (:height metadata) - :on-change #(update-size :height %)}]] + [:div.input-element.pixels + [:input#project-height.input-text + {:placeholder "Height" + :type "number" + :min 0 + :max 4000 + :value (:height metadata) + :on-change #(update-size :height %)}]]] [:div.input-radio.radio-primary (layout-input local page "mobile")