0
Fork 0
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:
elhombretecla 2016-03-02 17:11:18 +01:00
parent dce8beab32
commit b6e3a70267
6 changed files with 58 additions and 14 deletions

View file

@ -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;
} }

View file

@ -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 {
}

View file

@ -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)]])

View file

@ -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

View file

@ -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

View file

@ -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