Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00
Code Issues Activity

Remove workspace settings lightbox.

Browse source
This commit is contained in:
Andrey Antukh 2016-11-29 17:33:58 +01:00
parent e8a4bbea6c
commit af8bc9d3b8
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
3 changed files with 119 additions and 273 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
frontend/src/uxbox/main/ui/users.cljs
View file

@ -5,10 +5,8 @@
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
(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))]))

205
frontend/src/uxbox/main/ui/workspace/header.cljs
View file

@ -6,9 +6,7 @@
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
(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)]))

120
frontend/src/uxbox/main/ui/workspace/settings.cljs
View file

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