diff --git a/resources/public/images/project-placeholder.svg b/resources/public/images/project-placeholder.svg new file mode 100644 index 000000000..10739d974 --- /dev/null +++ b/resources/public/images/project-placeholder.svg @@ -0,0 +1,121 @@ + + + + + + + Octoface + + + + Mark Github + + + + Twitter + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + diff --git a/resources/public/images/svg/actions.svg b/resources/public/images/svg/actions.svg new file mode 100644 index 000000000..44acb5b3c --- /dev/null +++ b/resources/public/images/svg/actions.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/styles/common/framework.scss b/resources/styles/common/framework.scss index 2e5b92a01..3d7fdb33f 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/dashboard-grid.scss b/resources/styles/main/partials/dashboard-grid.scss index 94bf27b83..25d6c044d 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,40 @@ &.small-item { max-width: 12%; min-width: 190px; + padding: $medium; + justify-content: center; + } + + .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 { @@ -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; + } + } } @@ -215,34 +253,9 @@ &.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; - - span { - color: $main-ui-color; - } - - } - - span { - padding: $small; - text-align: left; - width: 100%; - @include text-ellipsis; - } - - .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%; - } } @@ -252,7 +265,7 @@ svg { height: 20%; max-width: 120px; - width: 40%; + width: 3vw; } } @@ -291,23 +304,20 @@ // STYLES FOR LIBRARIES &.library { padding: $medium $medium $medium 250px; - - .dashboard-grid-content { - - .grid-item { - - h3 { - font-size: $fs18; - } - - } - - } - } } +.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/resources/styles/main/partials/library-bar.scss b/resources/styles/main/partials/library-bar.scss index 7f46e5901..5141ba594 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; diff --git a/resources/styles/main/partials/lightbox.scss b/resources/styles/main/partials/lightbox.scss index c63ef1174..212cf0a80 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/dashboard/icons.cljs b/src/uxbox/main/ui/dashboard/icons.cljs index afde64f90..c02c02787 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} @@ -304,7 +307,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 6e7ee8059..c6d070aa5 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} @@ -304,7 +307,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 165101eda..e1c0aa532 100644 --- a/src/uxbox/main/ui/dashboard/projects.cljs +++ b/src/uxbox/main/ui/dashboard/projects.cljs @@ -153,9 +153,12 @@ (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.grid-item-th + {:style {:background-image "url('/images/project-placeholder.svg')"}}] + [: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 +166,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} diff --git a/src/uxbox/main/ui/icons.cljs b/src/uxbox/main/ui/icons.cljs index 971789806..cf90d8757 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 diff --git a/src/uxbox/main/ui/workspace/settings.cljs b/src/uxbox/main/ui/workspace/settings.cljs index c143c77ac..c66518325 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 31a73e70b..7da27c083 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 1477450db..50bf77148 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 dacdf8bb6..3f45fcb14 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 a7a188745..73b9adac7 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 7c1ab47c0..2725d006b 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 dd5b3f7e2..2078649fa 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 dd2745348..a6e1fac1a 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")