From 69a334e206604e315cb0fbb22fb0523853ea6511 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Sun, 3 Apr 2016 19:18:16 +0300 Subject: [PATCH] Persist page grid options. --- src/uxbox/data/pages.cljs | 3 +- src/uxbox/ui/settings/profile.cljs | 4 +- src/uxbox/ui/workspace/settings.cljs | 113 +++++++++++++++++++-------- src/uxbox/util/dom.cljs | 38 ++++++--- 4 files changed, 114 insertions(+), 44 deletions(-) diff --git a/src/uxbox/data/pages.cljs b/src/uxbox/data/pages.cljs index f200be6ed..649544552 100644 --- a/src/uxbox/data/pages.cljs +++ b/src/uxbox/data/pages.cljs @@ -149,11 +149,12 @@ ;; that does not sends the heavyweiht `:data` attribute ;; and only serves for update other page data. -(defrecord UpdatePageMetadata [id name width height layout] +(defrecord UpdatePageMetadata [id name width height layout options] rs/UpdateEvent (-apply-update [_ state] (letfn [(updater [page] (merge page + (when options {:options options}) (when width {:width width}) (when height {:height height}) (when name {:name name})))] diff --git a/src/uxbox/ui/settings/profile.cljs b/src/uxbox/ui/settings/profile.cljs index ddee0b41d..db100214a 100644 --- a/src/uxbox/ui/settings/profile.cljs +++ b/src/uxbox/ui/settings/profile.cljs @@ -2,8 +2,8 @@ ;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; -;; Copyright (c) 2015-2016 Andrey Antukh -;; Copyright (c) 2015-2016 Juan de la Cruz +;; Copyright (c) 2016 Andrey Antukh +;; Copyright (c) 2016 Juan de la Cruz (ns uxbox.ui.settings.profile (:require [sablono.core :as html :refer-macros [html]] diff --git a/src/uxbox/ui/workspace/settings.cljs b/src/uxbox/ui/workspace/settings.cljs index 036f63d3a..87a725954 100644 --- a/src/uxbox/ui/workspace/settings.cljs +++ b/src/uxbox/ui/workspace/settings.cljs @@ -2,51 +2,100 @@ ;; License, v. 2.0. If a copy of the MPL was not distributed with this ;; file, You can obtain one at http://mozilla.org/MPL/2.0/. ;; -;; Copyright (c) 2015-2016 Andrey Antukh -;; Copyright (c) 2015-2016 Juan de la Cruz +;; Copyright (c) 2016 Andrey Antukh +;; Copyright (c) 2016 Juan de la Cruz (ns uxbox.ui.workspace.settings (:require [sablono.core :as html :refer-macros [html]] + [lentes.core :as l] + [rum.core :as rum] + [uxbox.rstore :as rs] + [uxbox.data.pages :as udp] [uxbox.ui.icons :as i] [uxbox.ui.mixins :as mx] - [uxbox.util.dom :as dom] - [uxbox.ui.lightbox :as lightbox])) + [uxbox.ui.lightbox :as lightbox] + [uxbox.ui.colorpicker :as uucp] + [uxbox.ui.workspace.base :as wb] + [uxbox.util.dom :as dom])) -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; -;; Component -;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;; --- Lentes + +(def page-metadata-l + (-> (l/key :metadata) + (l/focus-atom wb/page-l))) + +;; --- Form Component + +(defn- settings-form-render + [own] + (let [local (:rum/local own) + page (rum/react wb/page-l) + opts (merge (:options page) + (deref local))] + (letfn [(on-field-change [field event] + (let [value (dom/event->value event)] + (swap! local assoc field value))) + (on-color-change [color] + (swap! local assoc :grid/color color)) + (on-align-change [event] + (let [checked? (-> (dom/get-target event) + (dom/checked?))] + (swap! local assoc :grid/align checked?))) + (on-submit [event] + (let [page (assoc page :options opts)] + (rs/emit! (udp/update-page-metadata page)) + (lightbox/close!)))] + (html + [:form {:on-submit on-submit} + [:span.lightbox-label "Grid size"] + [:div.project-size + [:input#grid-x.input-text + {:placeholder "X px" + :type "number" + :value (:grid/x-axis opts "2") + :on-change (partial on-field-change :grid/x-axis) + :min 1 ;;TODO check this value + :max 100}] + [:input#grid-y.input-text + {:placeholder "Y px" + :type "number" + :value (:grid/y-axis opts "2") + :on-change (partial on-field-change :grid/y-axis) + :min 1 + :max 100}]] + [:span.lightbox-label "Grid color"] + [:div.color-picker-default + (uucp/colorpicker + :value (:grid/color opts "#0000ff") + :on-change on-color-change)] + [:span.lightbox-label "Grid magnet option"] + [:div.input-checkbox.check-primary + [:input + {:type "checkbox" + :on-change on-align-change + :checked (:grid/align opts) + :id "magnet" + :value "Yes"}] + [:label {:for "magnet"} "Activate magnet"]] + [:input.btn-primary + {:type "submit" + :value "Save"}]])))) + +(def settings-form + (mx/component + {:render settings-form-render + :name "settings-form" + :mixins [(mx/local) rum/reactive mx/static]})) (defn- settings-dialog-render [own] (html [:div.lightbox-body.settings [: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"}] - ] + (settings-form) [:a.close {:href "#" - :on-click #(do (dom/prevent-default %) - (lightbox/close!))} i/close]])) + :on-click #(do (dom/prevent-default %) + (lightbox/close!))} i/close]])) (def settings-dialog (mx/component diff --git a/src/uxbox/util/dom.cljs b/src/uxbox/util/dom.cljs index 846d2becf..572058ddd 100644 --- a/src/uxbox/util/dom.cljs +++ b/src/uxbox/util/dom.cljs @@ -8,6 +8,22 @@ (ns uxbox.util.dom (:require [goog.dom :as dom])) +;; --- Deprecated methods + +(defn event->inner-text + [e] + (.-innerText (.-target e))) + +(defn event->value + [e] + (.-value (.-target e))) + +(defn event->target + [e] + (.-target e)) + +;; --- New methods + (defn get-element-by-class ([classname] (dom/getElementByClass classname)) @@ -24,14 +40,18 @@ (when e (.preventDefault e))) -(defn event->inner-text - [e] - (.-innerText (.-target e))) +(defn get-target + "Extract the target from event instance." + [event] + (.-target event)) -(defn event->value - [e] - (.-value (.-target e))) +(defn get-value + "Extract the value from dom node." + [node] + (.-value node)) -(defn event->target - [e] - (.-target e)) +(defn checked? + "Check if the node that reprsents a radio + or checkbox is checked or not." + [node] + (.-checked node))