add grid settings lightbox

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

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

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

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

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-clipboard-dialog #(lightbox/open! :clipboard)]
-        open-settings-dialog #(lightbox/open! :settings)]
     (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)"
+         {:alt "Redo (Ctrl + Shift + Z)"}
-          :on-click open-settings-dialog}
          i/redo]]
        [:ul.options-btn
         ;; TODO: refactor

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
+    [: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
   (mx/component