mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
add grid settings lightbox
This commit is contained in:
parent
dce8beab32
commit
b6e3a70267
6 changed files with 58 additions and 14 deletions
|
@ -423,7 +423,7 @@ input[type="checkbox"]:focus {
|
|||
margin-right: 10px;
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray-lighter;
|
||||
box-shadow: inset 0 0 0 0 $color-gray-light ;
|
||||
box-shadow: inset 0 0 0 0 $main-ui-color ;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
|
|
@ -28,6 +28,17 @@
|
|||
width: 500px;
|
||||
@include animation(.1s,1s,fadeInDown);
|
||||
|
||||
.lightbox-label {
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
margin: $medium 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.input-text {
|
||||
margin: 1rem 0;
|
||||
width: 100%;
|
||||
|
@ -80,7 +91,8 @@
|
|||
}
|
||||
|
||||
.btn-primary {
|
||||
margin-top: 10px;
|
||||
margin: $big auto 0 auto;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -182,3 +194,8 @@
|
|||
}
|
||||
|
||||
}
|
||||
|
||||
// Project Settings
|
||||
.settings {
|
||||
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
[uxbox.data.auth :as da]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.navigation :as nav]
|
||||
[uxbox.ui.lightbox :as lightbox]
|
||||
[uxbox.ui.mixins :as mx]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
@ -16,6 +17,7 @@
|
|||
|
||||
(defn menu-render
|
||||
[own open?]
|
||||
(let [open-settings-dialog #(lightbox/open! :settings)]
|
||||
(html
|
||||
[:ul.dropdown {:class (when-not open?
|
||||
"hide")}
|
||||
|
@ -24,7 +26,7 @@
|
|||
[:span "Page settings"]]
|
||||
[:li
|
||||
i/grid
|
||||
[:span "Grid settings"]]
|
||||
[:span {:on-click open-settings-dialog} "Grid settings"]]
|
||||
[:li
|
||||
i/eye
|
||||
[:span "Preview"]]
|
||||
|
@ -33,7 +35,7 @@
|
|||
[:span "Your account"]]
|
||||
[:li {:on-click #(rs/emit! (da/logout))}
|
||||
i/exit
|
||||
[:span "Exit"]]]))
|
||||
[:span "Exit"]]])))
|
||||
|
||||
(def user-menu
|
||||
(mx/component
|
||||
|
@ -129,4 +131,3 @@
|
|||
;; [:div.login-body
|
||||
;; [:a i/logo]
|
||||
;; (recover-password-form)]])
|
||||
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.ui.lightbox :as lightbox]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
@ -23,7 +24,10 @@
|
|||
(for [i (range 5)]
|
||||
[:div.clipboard-item {:key i}
|
||||
[:span.clipboard-icon i/box]
|
||||
[:span (str "shape " i)]])]]))
|
||||
[:span (str "shape " i)]])]
|
||||
[:a.close {:href "#"
|
||||
:on-click #(do (dom/prevent-default %)
|
||||
(lightbox/close!))} i/close]]))
|
||||
|
||||
(def clipboard-dialog
|
||||
(mx/component
|
||||
|
|
|
@ -60,8 +60,7 @@
|
|||
flags (rum/react wb/flags-l)
|
||||
toggle #(rs/emit! (dw/toggle-flag %))
|
||||
;; TODO: temporary
|
||||
open-clipboard-dialog #(lightbox/open! :clipboard)
|
||||
open-settings-dialog #(lightbox/open! :settings)]
|
||||
open-clipboard-dialog #(lightbox/open! :clipboard)]
|
||||
(html
|
||||
[:header#workspace-bar.workspace-bar
|
||||
[:div.main-icon
|
||||
|
@ -103,8 +102,7 @@
|
|||
:on-click open-clipboard-dialog}
|
||||
i/undo]
|
||||
[:li.tooltip.tooltip-bottom
|
||||
{:alt "Redo (Ctrl + Shift + Z)"
|
||||
:on-click open-settings-dialog}
|
||||
{:alt "Redo (Ctrl + Shift + Z)"}
|
||||
i/redo]]
|
||||
[:ul.options-btn
|
||||
;; TODO: refactor
|
||||
|
|
|
@ -9,6 +9,7 @@
|
|||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.ui.lightbox :as lightbox]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
@ -19,10 +20,33 @@
|
|||
[own]
|
||||
(html
|
||||
[:div.lightbox-body.settings
|
||||
[:div.settings-list
|
||||
(for [i (range 5)]
|
||||
[:div {:key i}
|
||||
[:span (str "shape " i)]])]]))
|
||||
[:h3 "Grid settings"]
|
||||
[:form {:on-submit (constantly nil)}
|
||||
[:span.lightbox-label "Grid size"]
|
||||
[:div.project-size
|
||||
[:input#grid-x.input-text
|
||||
{:placeholder "X px"
|
||||
:type "number"
|
||||
:min 0 ;;TODO check this value
|
||||
:max 666666 ;;TODO check this value
|
||||
}]
|
||||
[:input#grid-y.input-text
|
||||
{:placeholder "Y px"
|
||||
:type "number"
|
||||
:min 0 ;;TODO check this value
|
||||
:max 666666 ;;TODO check this value
|
||||
}]]
|
||||
[:span.lightbox-label "Grid color"]
|
||||
[:span "COLOR PICKER HERE!"]
|
||||
[:span.lightbox-label "Grid magnet option"]
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input {:type "checkbox" :id "magnet" :value "Yes"}]
|
||||
[:label {:for "magnet"} "Activate magnet"]]
|
||||
[:input.btn-primary {:type "submit" :value "Save"}]
|
||||
]
|
||||
[:a.close {:href "#"
|
||||
:on-click #(do (dom/prevent-default %)
|
||||
(lightbox/close!))} i/close]]))
|
||||
|
||||
(def settings-dialog
|
||||
(mx/component
|
||||
|
|
Loading…
Add table
Reference in a new issue