0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00

Merge branch 'ui-improvements'

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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

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>

After

Width:  |  Height:  |  Size: 778 B

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,

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

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;

View file

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

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

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

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}

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

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)

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

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

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

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

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

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

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