mirror of
https://github.com/penpot/penpot.git
synced 2025-03-20 03:31:24 -05:00
Merge branch 'ui-improvements'
This commit is contained in:
Andrey Antukh
commit
aec2166759
18 changed files with 490 additions and 255 deletions
resources
public/images
styles
src/uxbox/main/ui
121
resources/public/images/project-placeholder.svg
Normal file
121
resources/public/images/project-placeholder.svg
Normal file
File diff suppressed because one or more lines are too long
|
After 
(image error) Size: 15 KiB |
4
resources/public/images/svg/actions.svg
Normal file
4
resources/public/images/svg/actions.svg
Normal 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 
(image error) Size: 778 B |
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -55,8 +55,9 @@
|
|||
width: 100%;
|
||||
|
||||
.input-text {
|
||||
width: 35%;
|
||||
}
|
||||
margin-right: $small;
|
||||
// width: 35%;
|
||||
}
|
||||
|
||||
.toggle-layout {
|
||||
|
||||
|
|
|
|||
|
|
@ -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]]]))
|
||||
|
|
|
|||
|
|
@ -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]}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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"}}]]]]))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"}}]
|
||||
]]]))))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"}}]
|
||||
]]])))
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue