Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-20 19:51:23 -05:00
Code Issues Activity

Merge branch 'ui-improvements'

Browse source
This commit is contained in:
Andrey Antukh 2016-11-07 20:36:01 +01:00
commit aec2166759
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
18 changed files with 490 additions and 255 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

121
resources/public/images/project-placeholder.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

4
resources/public/images/svg/actions.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500.00001 500.00001">
<use xlink:href="#symbol16714" transform="matrix(.48876 0 0 .48876 266.597 18.21)" width="100%" height="100%"/>
<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"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 778 B

52
resources/styles/common/framework.scss
View file

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

120
resources/styles/main/partials/dashboard-grid.scss
View file

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

3
resources/styles/main/partials/library-bar.scss
View file

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

5
resources/styles/main/partials/lightbox.scss
View file

@ -55,8 +55,9 @@
width: 100%;
.input-text {
width: 35%;
}
margin-right: $small;
// width: 35%;
}
.toggle-layout {

9
src/uxbox/main/ui/dashboard/icons.cljs
View file

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

9
src/uxbox/main/ui/dashboard/images.cljs
View file

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

11
src/uxbox/main/ui/dashboard/projects.cljs
View file

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

11
src/uxbox/main/ui/icons.cljs
View file

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

34
src/uxbox/main/ui/workspace/settings.cljs
View file

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

65
src/uxbox/main/ui/workspace/sidebar/options/circle_measures.cljs
View file

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

7
src/uxbox/main/ui/workspace/sidebar/options/fill.cljs
View file

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

65
src/uxbox/main/ui/workspace/sidebar/options/icon_measures.cljs
View file

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

118
src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs
View file

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

68
src/uxbox/main/ui/workspace/sidebar/options/rect_measures.cljs
View file

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

13
src/uxbox/main/ui/workspace/sidebar/options/stroke.cljs
View file

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

30
src/uxbox/main/ui/workspace/sidebar/sitemap.cljs
View file

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