mirror of
https://github.com/penpot/penpot.git
synced 2025-01-10 08:50:57 -05:00
add labels to lightbox
This commit is contained in:
parent
960f2e7e7a
commit
177fa4621c
3 changed files with 43 additions and 25 deletions
|
@ -56,7 +56,7 @@
|
||||||
|
|
||||||
.input-text {
|
.input-text {
|
||||||
margin-right: $small;
|
margin-right: $small;
|
||||||
// width: 35%;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-layout {
|
.toggle-layout {
|
||||||
|
@ -108,6 +108,21 @@
|
||||||
&.big-lightbox {
|
&.big-lightbox {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.input-element {
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
top: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: $intense-ui-text;
|
||||||
|
font-size: $fs12;
|
||||||
|
margin-left: $small;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -317,31 +317,35 @@
|
||||||
[:div.lightbox-body
|
[:div.lightbox-body
|
||||||
[:h3 "New project"]
|
[:h3 "New project"]
|
||||||
[:form {:on-submit (constantly nil)}
|
[:form {:on-submit (constantly nil)}
|
||||||
[:input#project-name.input-text
|
[:input#project-name.input-text
|
||||||
{:placeholder "New project name"
|
{:placeholder "New project name"
|
||||||
:type "text"
|
:type "text"
|
||||||
:value name
|
:value name
|
||||||
:auto-focus true
|
:auto-focus true
|
||||||
:on-change #(swap! local assoc :name (.-value (.-target %)))}]
|
:on-change #(swap! local assoc :name (.-value (.-target %)))}]
|
||||||
[:div.project-size
|
[:div.project-size
|
||||||
[:input#project-witdh.input-text
|
[:div.input-element.pixels
|
||||||
{:placeholder "Width"
|
[:span "Width"]
|
||||||
:type "number"
|
[:input#project-witdh.input-text
|
||||||
:min 0 ;;TODO check this value
|
{:placeholder "Width"
|
||||||
:max 666666 ;;TODO check this value
|
:type "number"
|
||||||
:value width
|
:min 0 ;;TODO check this value
|
||||||
:on-change #(swap! local assoc :width (.-value (.-target %)))}]
|
:max 666666 ;;TODO check this value
|
||||||
|
:value width
|
||||||
|
:on-change #(swap! local assoc :width (.-value (.-target %)))}]]
|
||||||
[:a.toggle-layout
|
[:a.toggle-layout
|
||||||
{:href "#"
|
{:href "#"
|
||||||
:on-click #(swap! local assoc :width width :height height)}
|
:on-click #(swap! local assoc :width width :height height)}
|
||||||
i/toggle]
|
i/toggle]
|
||||||
[:input#project-height.input-text
|
[:div.input-element.pixels
|
||||||
{:placeholder "Height"
|
[:span "Height"]
|
||||||
:type "number"
|
[:input#project-height.input-text
|
||||||
:min 0 ;;TODO check this value
|
{:placeholder "Height"
|
||||||
:max 666666 ;;TODO check this value
|
:type "number"
|
||||||
:value height
|
:min 0 ;;TODO check this value
|
||||||
:on-change #(swap! local assoc :height (.-value (.-target %)))}]]
|
:max 666666 ;;TODO check this value
|
||||||
|
:value height
|
||||||
|
:on-change #(swap! local assoc :height (.-value (.-target %)))}]]]
|
||||||
;; Layout selector
|
;; Layout selector
|
||||||
(layout-selector local)
|
(layout-selector local)
|
||||||
;; Submit
|
;; Submit
|
||||||
|
|
|
@ -92,7 +92,7 @@
|
||||||
:on-change update-name}]
|
:on-change update-name}]
|
||||||
[:div.project-size
|
[:div.project-size
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
[:input#project-witdh.input-text
|
[:span "Width"] [:input#project-witdh.input-text
|
||||||
{:placeholder "Width"
|
{:placeholder "Width"
|
||||||
:type "number"
|
:type "number"
|
||||||
:min 0
|
:min 0
|
||||||
|
@ -101,13 +101,14 @@
|
||||||
:on-change #(update-size :width %)}]]
|
:on-change #(update-size :width %)}]]
|
||||||
[:a.toggle-layout {:on-click toggle-sizes} i/toggle]
|
[:a.toggle-layout {:on-click toggle-sizes} i/toggle]
|
||||||
[:div.input-element.pixels
|
[:div.input-element.pixels
|
||||||
|
[:span "Height"]
|
||||||
[:input#project-height.input-text
|
[:input#project-height.input-text
|
||||||
{:placeholder "Height"
|
{:placeholder "Height"
|
||||||
:type "number"
|
:type "number"
|
||||||
:min 0
|
:min 0
|
||||||
:max 4000
|
:max 4000
|
||||||
:value (:height data)
|
:value (:height data)
|
||||||
:on-change #(update-size :height %)}]]]
|
:on-change #(update-size :height %)}]]]
|
||||||
|
|
||||||
[:div.input-radio.radio-primary
|
[:div.input-radio.radio-primary
|
||||||
(layout-input data "mobile")
|
(layout-input data "mobile")
|
||||||
|
@ -141,5 +142,3 @@
|
||||||
(defmethod lbx/render-lightbox :page-form
|
(defmethod lbx/render-lightbox :page-form
|
||||||
[{:keys [page]}]
|
[{:keys [page]}]
|
||||||
(page-form-lightbox page))
|
(page-form-lightbox page))
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue