Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

add input measures

Browse source
This commit is contained in:
elhombretecla 2016-11-04 13:32:03 +01:00 • committed by Andrey Antukh
parent 9d196e7c9f
commit c8ebc7ea87
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
10 changed files with 265 additions and 192 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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,

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 {

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