From b6e3a702679b28639c3be45ea1c1635a0934ed74 Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Wed, 2 Mar 2016 17:11:18 +0100 Subject: [PATCH] add grid settings lightbox --- resources/styles/framework.scss | 2 +- resources/styles/partials/lightbox.scss | 19 ++++++++++++++- src/uxbox/ui/users.cljs | 7 +++--- src/uxbox/ui/workspace/clipboard.cljs | 6 ++++- src/uxbox/ui/workspace/header.cljs | 6 ++--- src/uxbox/ui/workspace/settings.cljs | 32 +++++++++++++++++++++---- 6 files changed, 58 insertions(+), 14 deletions(-) diff --git a/resources/styles/framework.scss b/resources/styles/framework.scss index 12b1e205fb..1e4f3695b7 100644 --- a/resources/styles/framework.scss +++ b/resources/styles/framework.scss @@ -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; } diff --git a/resources/styles/partials/lightbox.scss b/resources/styles/partials/lightbox.scss index 7f9efe5940..fe2242d13a 100644 --- a/resources/styles/partials/lightbox.scss +++ b/resources/styles/partials/lightbox.scss @@ -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 { + +} diff --git a/src/uxbox/ui/users.cljs b/src/uxbox/ui/users.cljs index 4aadb21db8..be33f7b0bc 100644 --- a/src/uxbox/ui/users.cljs +++ b/src/uxbox/ui/users.cljs @@ -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)]]) - diff --git a/src/uxbox/ui/workspace/clipboard.cljs b/src/uxbox/ui/workspace/clipboard.cljs index bb37930ba8..92684884bf 100644 --- a/src/uxbox/ui/workspace/clipboard.cljs +++ b/src/uxbox/ui/workspace/clipboard.cljs @@ -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 diff --git a/src/uxbox/ui/workspace/header.cljs b/src/uxbox/ui/workspace/header.cljs index 6ac828d497..fc07d7af77 100644 --- a/src/uxbox/ui/workspace/header.cljs +++ b/src/uxbox/ui/workspace/header.cljs @@ -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 diff --git a/src/uxbox/ui/workspace/settings.cljs b/src/uxbox/ui/workspace/settings.cljs index 5373422e7d..036f63d3a5 100644 --- a/src/uxbox/ui/workspace/settings.cljs +++ b/src/uxbox/ui/workspace/settings.cljs @@ -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