From af8bc9d3b8d201371ce3be1a9dbee435ddb573d7 Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Tue, 29 Nov 2016 17:33:58 +0100 Subject: [PATCH] Remove workspace settings lightbox. --- frontend/src/uxbox/main/ui/users.cljs | 67 ++---- .../src/uxbox/main/ui/workspace/header.cljs | 205 ++++++++---------- .../src/uxbox/main/ui/workspace/settings.cljs | 120 ---------- 3 files changed, 119 insertions(+), 273 deletions(-) delete mode 100644 frontend/src/uxbox/main/ui/workspace/settings.cljs diff --git a/frontend/src/uxbox/main/ui/users.cljs b/frontend/src/uxbox/main/ui/users.cljs index d1dcd4a2c..6e51edb36 100644 --- a/frontend/src/uxbox/main/ui/users.cljs +++ b/frontend/src/uxbox/main/ui/users.cljs @@ -5,10 +5,8 @@ ;; Copyright (c) 2016 Andrey Antukh (ns uxbox.main.ui.users - (:require [sablono.core :as html :refer-macros [html]] - [cuerdas.core :as str] + (:require [cuerdas.core :as str] [lentes.core :as l] - [rum.core :as rum] [uxbox.util.router :as r] [potok.core :as ptk] [uxbox.store :as st] @@ -20,33 +18,22 @@ ;; --- User Menu -(defn menu-render - [own open?] - (let [open-settings-dialog #(udl/open! :settings)] - (html - [:ul.dropdown {:class (when-not open? - "hide")} - [:li - i/page - [:span "Page settings"]] - [:li {:on-click open-settings-dialog} - i/grid - [:span "Grid settings"]] - [:li - i/eye - [:span "Preview"]] - [:li {:on-click #(r/go :settings/profile)} - i/user - [:span "Your account"]] - [:li {:on-click #(st/emit! (da/logout))} - i/exit - [:span "Exit"]]]))) - -(def user-menu - (mx/component - {:render menu-render - :name "user-menu" - :mixins []})) +(mx/defc user-menu + {:mixins [mx/static]} + [open?] + [:ul.dropdown {:class (when-not open? "hide")} + [:li + i/page + [:span "Page settings"]] + [:li + i/eye + [:span "Preview"]] + [:li {:on-click #(r/go :settings/profile)} + i/user + [:span "Your account"]] + [:li {:on-click #(st/emit! (da/logout))} + i/exit + [:span "Exit"]]]) ;; --- User Widget @@ -54,22 +41,16 @@ (as-> (l/key :profile) $ (l/derive $ st/state))) -(defn user-render +(mx/defcs user + {:mixins [mx/static mx/reactive (mx/local {:open false})]} [own] (let [profile (mx/react profile-ref) local (:rum/local own) photo (if (str/empty? (:photo profile "")) "/images/avatar.jpg" (:photo profile))] - (html - [:div.user-zone {:on-mouse-enter #(swap! local assoc :open true) - :on-mouse-leave #(swap! local assoc :open false)} - [:span (:fullname profile)] - [:img {:src photo}] - (user-menu (:open @local))]))) - -(def user - (mx/component - {:render user-render - :name "user" - :mixins [mx/reactive (rum/local {:open false})]})) + [:div.user-zone {:on-mouse-enter #(swap! local assoc :open true) + :on-mouse-leave #(swap! local assoc :open false)} + [:span (:fullname profile)] + [:img {:src photo}] + (user-menu (:open @local))])) diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index c88b19de2..c504115dd 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -6,9 +6,7 @@ ;; Copyright (c) 2015-2016 Juan de la Cruz (ns uxbox.main.ui.workspace.header - (:require [sablono.core :as html :refer-macros [html]] - [rum.core :as rum] - [beicon.core :as rx] + (:require [beicon.core :as rx] [uxbox.config :as cfg] [uxbox.util.router :as r] [potok.core :as ptk] @@ -17,7 +15,6 @@ [uxbox.main.data.history :as udh] [uxbox.main.data.lightbox :as udl] [uxbox.main.ui.workspace.clipboard] - [uxbox.main.ui.workspace.settings] [uxbox.main.ui.workspace.base :as wb] [uxbox.main.ui.icons :as i] [uxbox.main.ui.users :as ui.u] @@ -28,30 +25,24 @@ ;; --- Coordinates Widget -(defn- coordenates-render - [own] +(mx/defc coordinates + {:mixins [mx/reactive mx/static]} + [] (let [zoom (mx/react wb/zoom-ref) coords (some-> (mx/react wb/mouse-canvas-a) (gpt/divide zoom) (gpt/round 1)) increase #(st/emit! (dw/increase-zoom)) decrease #(st/emit! (dw/decrease-zoom))] - (html - [:ul.options-view - [:li.coordinates {:alt "x"} - (str "X: " (:x coords "-"))] - [:li.coordinates {:alt "y"} - (str "Y: " (:y coords "-"))] - [:li.zoom-input - [:span.add-zoom {:on-click increase} "+"] - [:span (str (mth/round (* 100 zoom)) "%")] - [:span.remove-zoom {:on-click decrease} "-"]]]))) - -(def coordinates - (mx/component - {:render coordenates-render - :name "coordenates" - :mixins [mx/reactive]})) + [:ul.options-view + [:li.coordinates {:alt "x"} + (str "X: " (:x coords "-"))] + [:li.coordinates {:alt "y"} + (str "Y: " (:y coords "-"))] + [:li.zoom-input + [:span.add-zoom {:on-click increase} "+"] + [:span (str (mth/round (* 100 zoom)) "%")] + [:span.remove-zoom {:on-click decrease} "-"]]])) ;; --- Header Component @@ -62,8 +53,9 @@ url (str cfg/viewurl "#/" token "/" index)] (js/open url "new tab" ""))) -(defn header-render - [own] +(mx/defc header + {:mixins [mx/static mx/reactive]} + [] (let [project (mx/react wb/project-ref) page (mx/react wb/page-ref) flags (mx/react wb/flags-ref) @@ -72,90 +64,83 @@ on-redo #(st/emit! (udh/forward-to-next-version)) on-image #(udl/open! :import-image) on-download #(udl/open! :download)] - (html - [:header#workspace-bar.workspace-bar - [:div.main-icon - (nav/link (r/route-for :dashboard/projects) i/logo-icon)] - [:div.project-tree-btn - {:alt "Sitemap (Ctrl + Shift + M)" - :class (when (contains? flags :sitemap) "selected") - :on-click (partial toggle :sitemap)} - i/project-tree - [:span (:name page)]] - [:div.workspace-options - [:ul.options-btn - [:li.tooltip.tooltip-bottom - {:alt "Shapes (Ctrl + Shift + S)" - :class (when (contains? flags :drawtools) "selected") - :on-click (partial toggle :drawtools)} - i/shapes] - [:li.tooltip.tooltip-bottom - {:alt "Color Palette (---)" - :class (when (contains? flags :colorpalette) "selected") - :on-click (partial toggle :colorpalette)} - i/palette] - [:li.tooltip.tooltip-bottom - {:alt "Icons (Ctrl + Shift + I)" - :class (when (contains? flags :icons) "selected") - :on-click (partial toggle :icons)} - i/icon-set] - [:li.tooltip.tooltip-bottom - {:alt "Layers (Ctrl + Shift + L)" - :class (when (contains? flags :layers) "selected") - :on-click (partial toggle :layers)} - i/layers] - [:li.tooltip.tooltip-bottom - {:alt "Element options (Ctrl + Shift + O)" - :class (when (contains? flags :element-options) "selected") - :on-click (partial toggle :element-options)} - i/options] - [:li.tooltip.tooltip-bottom - {:alt "History (Ctrl + Shift + H)" - :class (when (contains? flags :document-history) "selected") - :on-click (partial toggle :document-history)} - i/undo-history]] - [:ul.options-btn - [:li.tooltip.tooltip-bottom - {:alt "Undo (Ctrl + Z)" - :on-click on-undo} - i/undo] - [:li.tooltip.tooltip-bottom - {:alt "Redo (Ctrl + Shift + Z)" + [:header#workspace-bar.workspace-bar + [:div.main-icon + (nav/link (r/route-for :dashboard/projects) i/logo-icon)] + [:div.project-tree-btn + {:alt "Sitemap (Ctrl + Shift + M)" + :class (when (contains? flags :sitemap) "selected") + :on-click (partial toggle :sitemap)} + i/project-tree + [:span (:name page)]] + [:div.workspace-options + [:ul.options-btn + [:li.tooltip.tooltip-bottom + {:alt "Shapes (Ctrl + Shift + S)" + :class (when (contains? flags :drawtools) "selected") + :on-click (partial toggle :drawtools)} + i/shapes] + [:li.tooltip.tooltip-bottom + {:alt "Color Palette (---)" + :class (when (contains? flags :colorpalette) "selected") + :on-click (partial toggle :colorpalette)} + i/palette] + [:li.tooltip.tooltip-bottom + {:alt "Icons (Ctrl + Shift + I)" + :class (when (contains? flags :icons) "selected") + :on-click (partial toggle :icons)} + i/icon-set] + [:li.tooltip.tooltip-bottom + {:alt "Layers (Ctrl + Shift + L)" + :class (when (contains? flags :layers) "selected") + :on-click (partial toggle :layers)} + i/layers] + [:li.tooltip.tooltip-bottom + {:alt "Element options (Ctrl + Shift + O)" + :class (when (contains? flags :element-options) "selected") + :on-click (partial toggle :element-options)} + i/options] + [:li.tooltip.tooltip-bottom + {:alt "History (Ctrl + Shift + H)" + :class (when (contains? flags :document-history) "selected") + :on-click (partial toggle :document-history)} + i/undo-history]] + [:ul.options-btn + [:li.tooltip.tooltip-bottom + {:alt "Undo (Ctrl + Z)" + :on-click on-undo} + i/undo] + [:li.tooltip.tooltip-bottom + {:alt "Redo (Ctrl + Shift + Z)" :on-click on-redo} - i/redo]] - [:ul.options-btn - [:li.tooltip.tooltip-bottom - {:alt "Export (Ctrl + E)" - :on-click on-download} - i/export] - [:li.tooltip.tooltip-bottom - {:alt "Image (Ctrl + I)" - :on-click on-image} - i/image]] - [:ul.options-btn - [:li.tooltip.tooltip-bottom - {:alt "Ruler (Ctrl + R)" - :class (when (contains? flags :ruler) "selected") - :on-click (partial toggle :ruler)} - i/ruler] - [:li.tooltip.tooltip-bottom - {:alt "Grid (Ctrl + G)" - :class (when (contains? flags :grid) "selected") - :on-click (partial toggle :grid)} - i/grid] - [:li.tooltip.tooltip-bottom - {:alt "Align (Ctrl + A)"} - i/alignment]] - [:ul.options-btn - [:li.tooltip.tooltip-bottom.view-mode - {:alt "View mode (Ctrl + P)" - :on-click #(on-view-clicked % project page)} - i/play]] - (coordinates)] - (ui.u/user)]))) - -(def header - (mx/component - {:render header-render - :name "workspace-header" - :mixins [mx/static mx/reactive]})) + i/redo]] + [:ul.options-btn + [:li.tooltip.tooltip-bottom + {:alt "Export (Ctrl + E)" + :on-click on-download} + i/export] + [:li.tooltip.tooltip-bottom + {:alt "Image (Ctrl + I)" + :on-click on-image} + i/image]] + [:ul.options-btn + [:li.tooltip.tooltip-bottom + {:alt "Ruler (Ctrl + R)" + :class (when (contains? flags :ruler) "selected") + :on-click (partial toggle :ruler)} + i/ruler] + [:li.tooltip.tooltip-bottom + {:alt "Grid (Ctrl + G)" + :class (when (contains? flags :grid) "selected") + :on-click (partial toggle :grid)} + i/grid] + [:li.tooltip.tooltip-bottom + {:alt "Align (Ctrl + A)"} + i/alignment]] + [:ul.options-btn + [:li.tooltip.tooltip-bottom.view-mode + {:alt "View mode (Ctrl + P)" + :on-click #(on-view-clicked % project page)} + i/play]] + (coordinates)] + (ui.u/user)])) diff --git a/frontend/src/uxbox/main/ui/workspace/settings.cljs b/frontend/src/uxbox/main/ui/workspace/settings.cljs deleted file mode 100644 index 951638b83..000000000 --- a/frontend/src/uxbox/main/ui/workspace/settings.cljs +++ /dev/null @@ -1,120 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; 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) 2016 Andrey Antukh -;; Copyright (c) 2016 Juan de la Cruz - -(ns uxbox.main.ui.workspace.settings - (:require [lentes.core :as l] - [uxbox.main.constants :as c] - [uxbox.store :as st] - [potok.core :as ptk] - [uxbox.main.data.pages :as udp] - [uxbox.main.data.workspace :as udw] - [uxbox.main.data.lightbox :as udl] - [uxbox.main.ui.icons :as i] - [uxbox.util.forms :as forms] - [uxbox.util.mixins :as mx :include-macros true] - [uxbox.main.ui.lightbox :as lbx] - [uxbox.main.ui.colorpicker :as uucp] - [uxbox.main.ui.workspace.base :as wb] - [uxbox.util.dom :as dom] - [uxbox.util.data :refer (parse-int)])) - -(def form-data (forms/focus-data :workspace-settings st/state)) -(def form-errors (forms/focus-errors :workspace-settings st/state)) -(def set-value! (partial forms/set-value! :workspace-settings)) -(def set-errors! (partial forms/set-errors! :workspace-settings)) -(def page-ref wb/page-ref) - -;; --- Form Component - -(def +settings-defaults+ - {:grid-x-axis c/grid-x-axis - :grid-y-axis c/grid-y-axis - :grid-color "#b5bdb9" - :grid-alignment false}) - -(def +settings-form+ - {:grid-y-axis [forms/required forms/integer [forms/in-range 2 100]] - :grid-x-axis [forms/required forms/integer [forms/in-range 2 100]] - :grid-alignment [forms/boolean] - :grid-color [forms/required forms/color]}) - -(mx/defc settings-form - {:mixins [mx/reactive]} - [] - (let [{:keys [id] :as page} (mx/react page-ref) - errors (mx/react form-errors) - data (merge +settings-defaults+ - (:metadata page) - (mx/react form-data))] - (letfn [(on-field-change [field event] - (let [value (dom/event->value event) - value (parse-int value "")] - (set-value! field value))) - (on-color-change [color] - (set-value! :grid-color color)) - (on-align-change [event] - (let [checked? (-> (dom/get-target event) - (dom/checked?))] - (set-value! :grid-alignment checked?))) - (on-submit [event] - (dom/prevent-default event) - (let [[errors data] (forms/validate data +settings-form+)] - (if errors - (set-errors! errors) - (st/emit! (udw/update-metadata id data) - (forms/clear :workspace-settings) - (udl/hide-lightbox)))))] - [:form {:on-submit on-submit} - [:span.lightbox-label "Grid size"] - [:div.project-size - [:div.input-element.pixels - [:input#grid-x.input-text - {:placeholder "X" - :type "number" - :class (forms/error-class errors :grid-x-axis) - :value (:grid-x-axis data "") - :on-change (partial on-field-change :grid-x-axis) - :min 2 - :max 100}]] - [:div.input-element.pixels - [:input#grid-y.input-text - {:placeholder "Y" - :type "number" - :class (forms/error-class errors :grid-y-axis) - :value (:grid-y-axis data "") - :on-change (partial on-field-change :grid-y-axis) - :min 2 - :max 100}]]] - [:span.lightbox-label "Grid color"] - (uucp/colorpicker - :value (:grid-color data) - :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-alignment data) - :id "magnet" - :value "Yes"}] - [:label {:for "magnet"} "Activate magnet"]] - [:input.btn-primary - {:type "submit" - :value "Save"}]]))) - -(mx/defc settings-dialog - [own] - [:div.lightbox-body.settings - [:h3 "Grid settings"] - (settings-form) - [:a.close {:href "#" - :on-click #(do (dom/prevent-default %) - (udl/close!))} i/close]]) - -(defmethod lbx/render-lightbox :settings - [_] - (settings-dialog))