mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 15:51:37 -05:00
Remove workspace settings lightbox.
This commit is contained in:
Andrey Antukh
parent
e8a4bbea6c
commit
af8bc9d3b8
3 changed files with 119 additions and 273 deletions
|
|
@ -5,10 +5,8 @@
|
||||||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||||
|
|
||||||
(ns uxbox.main.ui.users
|
(ns uxbox.main.ui.users
|
||||||
(:require [sablono.core :as html :refer-macros [html]]
|
(:require [cuerdas.core :as str]
|
||||||
[cuerdas.core :as str]
|
|
||||||
[lentes.core :as l]
|
[lentes.core :as l]
|
||||||
[rum.core :as rum]
|
|
||||||
[uxbox.util.router :as r]
|
[uxbox.util.router :as r]
|
||||||
[potok.core :as ptk]
|
[potok.core :as ptk]
|
||||||
[uxbox.store :as st]
|
[uxbox.store :as st]
|
||||||
|
|
@ -20,33 +18,22 @@
|
||||||
|
|
||||||
;; --- User Menu
|
;; --- User Menu
|
||||||
|
|
||||||
(defn menu-render
|
(mx/defc user-menu
|
||||||
[own open?]
|
{:mixins [mx/static]}
|
||||||
(let [open-settings-dialog #(udl/open! :settings)]
|
[open?]
|
||||||
(html
|
[:ul.dropdown {:class (when-not open? "hide")}
|
||||||
[:ul.dropdown {:class (when-not open?
|
[:li
|
||||||
"hide")}
|
i/page
|
||||||
[:li
|
[:span "Page settings"]]
|
||||||
i/page
|
[:li
|
||||||
[:span "Page settings"]]
|
i/eye
|
||||||
[:li {:on-click open-settings-dialog}
|
[:span "Preview"]]
|
||||||
i/grid
|
[:li {:on-click #(r/go :settings/profile)}
|
||||||
[:span "Grid settings"]]
|
i/user
|
||||||
[:li
|
[:span "Your account"]]
|
||||||
i/eye
|
[:li {:on-click #(st/emit! (da/logout))}
|
||||||
[:span "Preview"]]
|
i/exit
|
||||||
[:li {:on-click #(r/go :settings/profile)}
|
[:span "Exit"]]])
|
||||||
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 []}))
|
|
||||||
|
|
||||||
;; --- User Widget
|
;; --- User Widget
|
||||||
|
|
||||||
|
|
@ -54,22 +41,16 @@
|
||||||
(as-> (l/key :profile) $
|
(as-> (l/key :profile) $
|
||||||
(l/derive $ st/state)))
|
(l/derive $ st/state)))
|
||||||
|
|
||||||
(defn user-render
|
(mx/defcs user
|
||||||
|
{:mixins [mx/static mx/reactive (mx/local {:open false})]}
|
||||||
[own]
|
[own]
|
||||||
(let [profile (mx/react profile-ref)
|
(let [profile (mx/react profile-ref)
|
||||||
local (:rum/local own)
|
local (:rum/local own)
|
||||||
photo (if (str/empty? (:photo profile ""))
|
photo (if (str/empty? (:photo profile ""))
|
||||||
"/images/avatar.jpg"
|
"/images/avatar.jpg"
|
||||||
(:photo profile))]
|
(:photo profile))]
|
||||||
(html
|
[:div.user-zone {:on-mouse-enter #(swap! local assoc :open true)
|
||||||
[:div.user-zone {:on-mouse-enter #(swap! local assoc :open true)
|
:on-mouse-leave #(swap! local assoc :open false)}
|
||||||
:on-mouse-leave #(swap! local assoc :open false)}
|
[:span (:fullname profile)]
|
||||||
[:span (:fullname profile)]
|
[:img {:src photo}]
|
||||||
[:img {:src photo}]
|
(user-menu (:open @local))]))
|
||||||
(user-menu (:open @local))])))
|
|
||||||
|
|
||||||
(def user
|
|
||||||
(mx/component
|
|
||||||
{:render user-render
|
|
||||||
:name "user"
|
|
||||||
:mixins [mx/reactive (rum/local {:open false})]}))
|
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,7 @@
|
||||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||||
|
|
||||||
(ns uxbox.main.ui.workspace.header
|
(ns uxbox.main.ui.workspace.header
|
||||||
(:require [sablono.core :as html :refer-macros [html]]
|
(:require [beicon.core :as rx]
|
||||||
[rum.core :as rum]
|
|
||||||
[beicon.core :as rx]
|
|
||||||
[uxbox.config :as cfg]
|
[uxbox.config :as cfg]
|
||||||
[uxbox.util.router :as r]
|
[uxbox.util.router :as r]
|
||||||
[potok.core :as ptk]
|
[potok.core :as ptk]
|
||||||
|
|
@ -17,7 +15,6 @@
|
||||||
[uxbox.main.data.history :as udh]
|
[uxbox.main.data.history :as udh]
|
||||||
[uxbox.main.data.lightbox :as udl]
|
[uxbox.main.data.lightbox :as udl]
|
||||||
[uxbox.main.ui.workspace.clipboard]
|
[uxbox.main.ui.workspace.clipboard]
|
||||||
[uxbox.main.ui.workspace.settings]
|
|
||||||
[uxbox.main.ui.workspace.base :as wb]
|
[uxbox.main.ui.workspace.base :as wb]
|
||||||
[uxbox.main.ui.icons :as i]
|
[uxbox.main.ui.icons :as i]
|
||||||
[uxbox.main.ui.users :as ui.u]
|
[uxbox.main.ui.users :as ui.u]
|
||||||
|
|
@ -28,30 +25,24 @@
|
||||||
|
|
||||||
;; --- Coordinates Widget
|
;; --- Coordinates Widget
|
||||||
|
|
||||||
(defn- coordenates-render
|
(mx/defc coordinates
|
||||||
[own]
|
{:mixins [mx/reactive mx/static]}
|
||||||
|
[]
|
||||||
(let [zoom (mx/react wb/zoom-ref)
|
(let [zoom (mx/react wb/zoom-ref)
|
||||||
coords (some-> (mx/react wb/mouse-canvas-a)
|
coords (some-> (mx/react wb/mouse-canvas-a)
|
||||||
(gpt/divide zoom)
|
(gpt/divide zoom)
|
||||||
(gpt/round 1))
|
(gpt/round 1))
|
||||||
increase #(st/emit! (dw/increase-zoom))
|
increase #(st/emit! (dw/increase-zoom))
|
||||||
decrease #(st/emit! (dw/decrease-zoom))]
|
decrease #(st/emit! (dw/decrease-zoom))]
|
||||||
(html
|
[:ul.options-view
|
||||||
[:ul.options-view
|
[:li.coordinates {:alt "x"}
|
||||||
[:li.coordinates {:alt "x"}
|
(str "X: " (:x coords "-"))]
|
||||||
(str "X: " (:x coords "-"))]
|
[:li.coordinates {:alt "y"}
|
||||||
[:li.coordinates {:alt "y"}
|
(str "Y: " (:y coords "-"))]
|
||||||
(str "Y: " (:y coords "-"))]
|
[:li.zoom-input
|
||||||
[:li.zoom-input
|
[:span.add-zoom {:on-click increase} "+"]
|
||||||
[:span.add-zoom {:on-click increase} "+"]
|
[:span (str (mth/round (* 100 zoom)) "%")]
|
||||||
[:span (str (mth/round (* 100 zoom)) "%")]
|
[:span.remove-zoom {:on-click decrease} "-"]]]))
|
||||||
[:span.remove-zoom {:on-click decrease} "-"]]])))
|
|
||||||
|
|
||||||
(def coordinates
|
|
||||||
(mx/component
|
|
||||||
{:render coordenates-render
|
|
||||||
:name "coordenates"
|
|
||||||
:mixins [mx/reactive]}))
|
|
||||||
|
|
||||||
;; --- Header Component
|
;; --- Header Component
|
||||||
|
|
||||||
|
|
@ -62,8 +53,9 @@
|
||||||
url (str cfg/viewurl "#/" token "/" index)]
|
url (str cfg/viewurl "#/" token "/" index)]
|
||||||
(js/open url "new tab" "")))
|
(js/open url "new tab" "")))
|
||||||
|
|
||||||
(defn header-render
|
(mx/defc header
|
||||||
[own]
|
{:mixins [mx/static mx/reactive]}
|
||||||
|
[]
|
||||||
(let [project (mx/react wb/project-ref)
|
(let [project (mx/react wb/project-ref)
|
||||||
page (mx/react wb/page-ref)
|
page (mx/react wb/page-ref)
|
||||||
flags (mx/react wb/flags-ref)
|
flags (mx/react wb/flags-ref)
|
||||||
|
|
@ -72,90 +64,83 @@
|
||||||
on-redo #(st/emit! (udh/forward-to-next-version))
|
on-redo #(st/emit! (udh/forward-to-next-version))
|
||||||
on-image #(udl/open! :import-image)
|
on-image #(udl/open! :import-image)
|
||||||
on-download #(udl/open! :download)]
|
on-download #(udl/open! :download)]
|
||||||
(html
|
[:header#workspace-bar.workspace-bar
|
||||||
[:header#workspace-bar.workspace-bar
|
[:div.main-icon
|
||||||
[:div.main-icon
|
(nav/link (r/route-for :dashboard/projects) i/logo-icon)]
|
||||||
(nav/link (r/route-for :dashboard/projects) i/logo-icon)]
|
[:div.project-tree-btn
|
||||||
[:div.project-tree-btn
|
{:alt "Sitemap (Ctrl + Shift + M)"
|
||||||
{:alt "Sitemap (Ctrl + Shift + M)"
|
:class (when (contains? flags :sitemap) "selected")
|
||||||
:class (when (contains? flags :sitemap) "selected")
|
:on-click (partial toggle :sitemap)}
|
||||||
:on-click (partial toggle :sitemap)}
|
i/project-tree
|
||||||
i/project-tree
|
[:span (:name page)]]
|
||||||
[:span (:name page)]]
|
[:div.workspace-options
|
||||||
[:div.workspace-options
|
[:ul.options-btn
|
||||||
[:ul.options-btn
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "Shapes (Ctrl + Shift + S)"
|
||||||
{:alt "Shapes (Ctrl + Shift + S)"
|
:class (when (contains? flags :drawtools) "selected")
|
||||||
:class (when (contains? flags :drawtools) "selected")
|
:on-click (partial toggle :drawtools)}
|
||||||
:on-click (partial toggle :drawtools)}
|
i/shapes]
|
||||||
i/shapes]
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "Color Palette (---)"
|
||||||
{:alt "Color Palette (---)"
|
:class (when (contains? flags :colorpalette) "selected")
|
||||||
:class (when (contains? flags :colorpalette) "selected")
|
:on-click (partial toggle :colorpalette)}
|
||||||
:on-click (partial toggle :colorpalette)}
|
i/palette]
|
||||||
i/palette]
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "Icons (Ctrl + Shift + I)"
|
||||||
{:alt "Icons (Ctrl + Shift + I)"
|
:class (when (contains? flags :icons) "selected")
|
||||||
:class (when (contains? flags :icons) "selected")
|
:on-click (partial toggle :icons)}
|
||||||
:on-click (partial toggle :icons)}
|
i/icon-set]
|
||||||
i/icon-set]
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "Layers (Ctrl + Shift + L)"
|
||||||
{:alt "Layers (Ctrl + Shift + L)"
|
:class (when (contains? flags :layers) "selected")
|
||||||
:class (when (contains? flags :layers) "selected")
|
:on-click (partial toggle :layers)}
|
||||||
:on-click (partial toggle :layers)}
|
i/layers]
|
||||||
i/layers]
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "Element options (Ctrl + Shift + O)"
|
||||||
{:alt "Element options (Ctrl + Shift + O)"
|
:class (when (contains? flags :element-options) "selected")
|
||||||
:class (when (contains? flags :element-options) "selected")
|
:on-click (partial toggle :element-options)}
|
||||||
:on-click (partial toggle :element-options)}
|
i/options]
|
||||||
i/options]
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "History (Ctrl + Shift + H)"
|
||||||
{:alt "History (Ctrl + Shift + H)"
|
:class (when (contains? flags :document-history) "selected")
|
||||||
:class (when (contains? flags :document-history) "selected")
|
:on-click (partial toggle :document-history)}
|
||||||
:on-click (partial toggle :document-history)}
|
i/undo-history]]
|
||||||
i/undo-history]]
|
[:ul.options-btn
|
||||||
[:ul.options-btn
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "Undo (Ctrl + Z)"
|
||||||
{:alt "Undo (Ctrl + Z)"
|
:on-click on-undo}
|
||||||
:on-click on-undo}
|
i/undo]
|
||||||
i/undo]
|
[:li.tooltip.tooltip-bottom
|
||||||
[:li.tooltip.tooltip-bottom
|
{:alt "Redo (Ctrl + Shift + Z)"
|
||||||
{:alt "Redo (Ctrl + Shift + Z)"
|
|
||||||
:on-click on-redo}
|
:on-click on-redo}
|
||||||
i/redo]]
|
i/redo]]
|
||||||
[:ul.options-btn
|
[:ul.options-btn
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Export (Ctrl + E)"
|
{:alt "Export (Ctrl + E)"
|
||||||
:on-click on-download}
|
:on-click on-download}
|
||||||
i/export]
|
i/export]
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Image (Ctrl + I)"
|
{:alt "Image (Ctrl + I)"
|
||||||
:on-click on-image}
|
:on-click on-image}
|
||||||
i/image]]
|
i/image]]
|
||||||
[:ul.options-btn
|
[:ul.options-btn
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Ruler (Ctrl + R)"
|
{:alt "Ruler (Ctrl + R)"
|
||||||
:class (when (contains? flags :ruler) "selected")
|
:class (when (contains? flags :ruler) "selected")
|
||||||
:on-click (partial toggle :ruler)}
|
:on-click (partial toggle :ruler)}
|
||||||
i/ruler]
|
i/ruler]
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Grid (Ctrl + G)"
|
{:alt "Grid (Ctrl + G)"
|
||||||
:class (when (contains? flags :grid) "selected")
|
:class (when (contains? flags :grid) "selected")
|
||||||
:on-click (partial toggle :grid)}
|
:on-click (partial toggle :grid)}
|
||||||
i/grid]
|
i/grid]
|
||||||
[:li.tooltip.tooltip-bottom
|
[:li.tooltip.tooltip-bottom
|
||||||
{:alt "Align (Ctrl + A)"}
|
{:alt "Align (Ctrl + A)"}
|
||||||
i/alignment]]
|
i/alignment]]
|
||||||
[:ul.options-btn
|
[:ul.options-btn
|
||||||
[:li.tooltip.tooltip-bottom.view-mode
|
[:li.tooltip.tooltip-bottom.view-mode
|
||||||
{:alt "View mode (Ctrl + P)"
|
{:alt "View mode (Ctrl + P)"
|
||||||
:on-click #(on-view-clicked % project page)}
|
:on-click #(on-view-clicked % project page)}
|
||||||
i/play]]
|
i/play]]
|
||||||
(coordinates)]
|
(coordinates)]
|
||||||
(ui.u/user)])))
|
(ui.u/user)]))
|
||||||
|
|
||||||
(def header
|
|
||||||
(mx/component
|
|
||||||
{:render header-render
|
|
||||||
:name "workspace-header"
|
|
||||||
:mixins [mx/static mx/reactive]}))
|
|
||||||
|
|
|
||||||
|
|
@ -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 <niwi@niwi.nz>
|
|
||||||
;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(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))
|
|
||||||
Loading…
Add table
Reference in a new issue