mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 01:01:30 -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;
|
margin-right: 10px;
|
||||||
background-color: $color-white;
|
background-color: $color-white;
|
||||||
border: 1px solid $color-gray-lighter;
|
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;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -28,6 +28,17 @@
|
||||||
width: 500px;
|
width: 500px;
|
||||||
@include animation(.1s,1s,fadeInDown);
|
@include animation(.1s,1s,fadeInDown);
|
||||||
|
|
||||||
|
.lightbox-label {
|
||||||
|
display: flex;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: $medium 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.input-text {
|
.input-text {
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -80,7 +91,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary {
|
.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.data.auth :as da]
|
||||||
[uxbox.ui.icons :as i]
|
[uxbox.ui.icons :as i]
|
||||||
[uxbox.ui.navigation :as nav]
|
[uxbox.ui.navigation :as nav]
|
||||||
|
[uxbox.ui.lightbox :as lightbox]
|
||||||
[uxbox.ui.mixins :as mx]))
|
[uxbox.ui.mixins :as mx]))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
@ -16,6 +17,7 @@
|
||||||
|
|
||||||
(defn menu-render
|
(defn menu-render
|
||||||
[own open?]
|
[own open?]
|
||||||
|
(let [open-settings-dialog #(lightbox/open! :settings)]
|
||||||
(html
|
(html
|
||||||
[:ul.dropdown {:class (when-not open?
|
[:ul.dropdown {:class (when-not open?
|
||||||
"hide")}
|
"hide")}
|
||||||
|
@ -24,7 +26,7 @@
|
||||||
[:span "Page settings"]]
|
[:span "Page settings"]]
|
||||||
[:li
|
[:li
|
||||||
i/grid
|
i/grid
|
||||||
[:span "Grid settings"]]
|
[:span {:on-click open-settings-dialog} "Grid settings"]]
|
||||||
[:li
|
[:li
|
||||||
i/eye
|
i/eye
|
||||||
[:span "Preview"]]
|
[:span "Preview"]]
|
||||||
|
@ -33,7 +35,7 @@
|
||||||
[:span "Your account"]]
|
[:span "Your account"]]
|
||||||
[:li {:on-click #(rs/emit! (da/logout))}
|
[:li {:on-click #(rs/emit! (da/logout))}
|
||||||
i/exit
|
i/exit
|
||||||
[:span "Exit"]]]))
|
[:span "Exit"]]])))
|
||||||
|
|
||||||
(def user-menu
|
(def user-menu
|
||||||
(mx/component
|
(mx/component
|
||||||
|
@ -129,4 +131,3 @@
|
||||||
;; [:div.login-body
|
;; [:div.login-body
|
||||||
;; [:a i/logo]
|
;; [:a i/logo]
|
||||||
;; (recover-password-form)]])
|
;; (recover-password-form)]])
|
||||||
|
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
(:require [sablono.core :as html :refer-macros [html]]
|
(:require [sablono.core :as html :refer-macros [html]]
|
||||||
[uxbox.ui.icons :as i]
|
[uxbox.ui.icons :as i]
|
||||||
[uxbox.ui.mixins :as mx]
|
[uxbox.ui.mixins :as mx]
|
||||||
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.ui.lightbox :as lightbox]))
|
[uxbox.ui.lightbox :as lightbox]))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
@ -23,7 +24,10 @@
|
||||||
(for [i (range 5)]
|
(for [i (range 5)]
|
||||||
[:div.clipboard-item {:key i}
|
[:div.clipboard-item {:key i}
|
||||||
[:span.clipboard-icon i/box]
|
[: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
|
(def clipboard-dialog
|
||||||
(mx/component
|
(mx/component
|
||||||
|
|
|
@ -60,8 +60,7 @@
|
||||||
flags (rum/react wb/flags-l)
|
flags (rum/react wb/flags-l)
|
||||||
toggle #(rs/emit! (dw/toggle-flag %))
|
toggle #(rs/emit! (dw/toggle-flag %))
|
||||||
;; TODO: temporary
|
;; TODO: temporary
|
||||||
open-clipboard-dialog #(lightbox/open! :clipboard)
|
open-clipboard-dialog #(lightbox/open! :clipboard)]
|
||||||
open-settings-dialog #(lightbox/open! :settings)]
|
|
||||||
(html
|
(html
|
||||||
[:header#workspace-bar.workspace-bar
|
[:header#workspace-bar.workspace-bar
|
||||||
[:div.main-icon
|
[:div.main-icon
|
||||||
|
@ -103,8 +102,7 @@
|
||||||
:on-click open-clipboard-dialog}
|
:on-click open-clipboard-dialog}
|
||||||
i/undo]
|
i/undo]
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Redo (Ctrl + Shift + Z)"
|
{:alt "Redo (Ctrl + Shift + Z)"}
|
||||||
:on-click open-settings-dialog}
|
|
||||||
i/redo]]
|
i/redo]]
|
||||||
[:ul.options-btn
|
[:ul.options-btn
|
||||||
;; TODO: refactor
|
;; TODO: refactor
|
||||||
|
|
|
@ -9,6 +9,7 @@
|
||||||
(:require [sablono.core :as html :refer-macros [html]]
|
(:require [sablono.core :as html :refer-macros [html]]
|
||||||
[uxbox.ui.icons :as i]
|
[uxbox.ui.icons :as i]
|
||||||
[uxbox.ui.mixins :as mx]
|
[uxbox.ui.mixins :as mx]
|
||||||
|
[uxbox.util.dom :as dom]
|
||||||
[uxbox.ui.lightbox :as lightbox]))
|
[uxbox.ui.lightbox :as lightbox]))
|
||||||
|
|
||||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||||
|
@ -19,10 +20,33 @@
|
||||||
[own]
|
[own]
|
||||||
(html
|
(html
|
||||||
[:div.lightbox-body.settings
|
[:div.lightbox-body.settings
|
||||||
[:div.settings-list
|
[:h3 "Grid settings"]
|
||||||
(for [i (range 5)]
|
[:form {:on-submit (constantly nil)}
|
||||||
[:div {:key i}
|
[:span.lightbox-label "Grid size"]
|
||||||
[:span (str "shape " i)]])]]))
|
[: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
|
(def settings-dialog
|
||||||
(mx/component
|
(mx/component
|
||||||
|
|
Loading…
Add table
Reference in a new issue