mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 16:21:57 -05:00
feat(frontend): more work on refactoring components
This commit is contained in:
Andrey Antukh
parent
56b8922dbb
commit
f341b5b3fe
8 changed files with 126 additions and 119 deletions
|
|
@ -20,7 +20,7 @@
|
|||
:aliases
|
||||
{:dev {:extra-deps {com.bhauman/rebel-readline-cljs {:mvn/version "0.1.4"}
|
||||
com.bhauman/rebel-readline {:mvn/version "0.1.4"}
|
||||
com.bhauman/figwheel-main {:mvn/version "0.2.1"}
|
||||
com.bhauman/figwheel-main {:mvn/version "0.2.3"}
|
||||
org.clojure/tools.namespace {:mvn/version "0.3.0"}}
|
||||
:extra-paths ["test"]}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
[uxbox.util.router :as rt]
|
||||
[uxbox.util.timers :as ts]))
|
||||
|
||||
|
||||
|
||||
;; --- i18n
|
||||
|
||||
(declare reinit)
|
||||
|
|
@ -84,8 +86,3 @@
|
|||
(defn ^:after-load after-load
|
||||
[]
|
||||
(reinit))
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
(mx/defc header-link
|
||||
[{:keys [section content] :as props}]
|
||||
(let [on-click #(st/emit! (rt/navigate section))]
|
||||
(let [on-click #(st/emit! (rt/nav section))]
|
||||
[:a {:on-click on-click} content]))
|
||||
|
||||
(mf/def header
|
||||
|
|
|
|||
|
|
@ -6,45 +6,51 @@
|
|||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.settings.header
|
||||
(:require [potok.core :as ptk]
|
||||
[lentes.core :as l]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.auth :as da]
|
||||
[uxbox.main.data.projects :as dp]
|
||||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.users :refer [user]]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[lentes.core :as l]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.auth :as da]
|
||||
[uxbox.main.data.projects :as dp]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.main.ui.users :refer [user]]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
(def ^:private section-ref
|
||||
(-> (l/in [:route :id])
|
||||
(l/derive st/state)))
|
||||
|
||||
(mx/defc header-link
|
||||
[section content]
|
||||
(let [link (r/route-for section)]
|
||||
[:a {:href (str "/#" link)} content]))
|
||||
(mf/defc header-link
|
||||
[{:keys [section content] :as props}]
|
||||
(let [on-click #(st/emit! (rt/nav section))]
|
||||
[:a {:on-click on-click} content]))
|
||||
|
||||
(mx/defc header
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[]
|
||||
(let [section (mx/react section-ref)
|
||||
profile? (= section :settings/profile)
|
||||
password? (= section :settings/password)
|
||||
notifications? (= section :settings/notifications)]
|
||||
[:header#main-bar.main-bar
|
||||
[:div.main-logo
|
||||
(header-link :dashboard/projects i/logo)]
|
||||
[:ul.main-nav
|
||||
[:li {:class (when profile? "current")}
|
||||
(header-link :settings/profile (tr "settings.profile"))]
|
||||
[:li {:class (when password? "current")}
|
||||
(header-link :settings/password (tr "settings.password"))]
|
||||
[:li {:class (when notifications? "current")}
|
||||
(header-link :settings/notifications (tr "settings.notifications"))]
|
||||
[:li {:on-click #(st/emit! (da/logout))}
|
||||
(header-link :auth/login (tr "settings.exit"))]]
|
||||
(user)]))
|
||||
(mf/def header
|
||||
:mixins [mf/static mf/reactive]
|
||||
:render
|
||||
(fn [own props]
|
||||
(let [section (mf/react section-ref)
|
||||
profile? (= section :settings/profile)
|
||||
password? (= section :settings/password)
|
||||
notifications? (= section :settings/notifications)]
|
||||
[:header#main-bar.main-bar
|
||||
[:div.main-logo
|
||||
[:& header-link {:section :dashboard/projects
|
||||
:content i/logo}]]
|
||||
[:ul.main-nav
|
||||
[:li {:class (when profile? "current")}
|
||||
[:& header-link {:setion :settings/profile
|
||||
:content (tr "settings.profile")}]]
|
||||
[:li {:class (when password? "current")}
|
||||
[:& header-link {:section :settings/password
|
||||
:content (tr "settings.password")}]]
|
||||
[:li {:class (when notifications? "current")}
|
||||
[:& header-link {:section :settings/notifications
|
||||
:content (tr "settings.notifications")}]]
|
||||
[:li {:on-click #(st/emit! (da/logout))}
|
||||
[:& header-link {:section :auth/login
|
||||
:content (tr "settings.exit")}]]]
|
||||
(user)])))
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
[cuerdas.core :as str]
|
||||
[lentes.core :as l]
|
||||
[potok.core :as ptk]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.auth :as da]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
|
|
@ -20,17 +20,16 @@
|
|||
|
||||
;; --- User Menu
|
||||
|
||||
(mx/defc user-menu
|
||||
{:mixins [mx/static]}
|
||||
[open?]
|
||||
[:ul.dropdown {:class (when-not open? "hide")}
|
||||
[:li {:on-click #(st/emit! (rt/navigate :settings/profile))}
|
||||
(mf/defc user-menu
|
||||
[props]
|
||||
[:ul.dropdown #_{:class (when-not open? "hide")}
|
||||
[:li {:on-click #(st/emit! (rt/nav :settings/profile))}
|
||||
i/user
|
||||
[:span (tr "ds.user.profile")]]
|
||||
[:li {:on-click #(st/emit! (rt/navigate :settings/password))}
|
||||
[:li {:on-click #(st/emit! (rt/nav :settings/password))}
|
||||
i/lock
|
||||
[:span (tr "ds.user.password")]]
|
||||
[:li {:on-click #(st/emit! (rt/navigate :settings/notifications))}
|
||||
[:li {:on-click #(st/emit! (rt/nav :settings/notifications))}
|
||||
i/mail
|
||||
[:span (tr "ds.user.notifications")]]
|
||||
[:li {:on-click #(st/emit! (da/logout))}
|
||||
|
|
@ -43,17 +42,19 @@
|
|||
(-> (l/key :profile)
|
||||
(l/derive st/state)))
|
||||
|
||||
(mx/defcs user
|
||||
{:mixins [mx/static mx/reactive (mx/local {:open false})]}
|
||||
[own]
|
||||
(let [profile (mx/react profile-ref)
|
||||
local (::mx/local own)
|
||||
photo (if (str/empty? (:photo profile ""))
|
||||
"/images/avatar.jpg"
|
||||
(:photo profile))]
|
||||
[:div.user-zone {:on-click #(st/emit! (rt/navigate :settings/profile))
|
||||
: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))]))
|
||||
(mf/def user
|
||||
:mixins [mf/static mf/reactive (mf/local false)]
|
||||
|
||||
:render
|
||||
(fn [{:keys [::mf/local] :as own} props]
|
||||
(let [profile (mf/react profile-ref)
|
||||
photo (if (str/empty? (:photo profile ""))
|
||||
"/images/avatar.jpg"
|
||||
(:photo profile))]
|
||||
[:div.user-zone {:on-click #(st/emit! (rt/navigate :settings/profile))
|
||||
:on-mouse-enter #(reset! local true)
|
||||
:on-mouse-leave #(reset! local false)}
|
||||
[:span (:fullname profile)]
|
||||
[:img {:src photo}]
|
||||
(when @local
|
||||
[:& user-menu])])))
|
||||
|
|
|
|||
|
|
@ -278,5 +278,3 @@
|
|||
(when (contains? flags :ruler)
|
||||
(ruler zoom))
|
||||
(selrect)]]))))
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -6,39 +6,42 @@
|
|||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.clipboard
|
||||
(:require [lentes.core :as l]
|
||||
[potok.core :as ptk]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.time :as dt]))
|
||||
(:require
|
||||
[lentes.core :as l]
|
||||
[potok.core :as ptk]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
(def ^:private clipboard-ref
|
||||
(-> (l/key :clipboard)
|
||||
(l/derive st/state)))
|
||||
(mf/def clipboard-dialog
|
||||
:mixins [mf/reactive]
|
||||
:init
|
||||
(fn [own props]
|
||||
(assoc own ::clipboard (-> (l/key :clipboard)
|
||||
(l/derive st/state))))
|
||||
|
||||
(mx/defc clipboard-dialog
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[]
|
||||
(letfn [(on-paste [item]
|
||||
(st/emit! (udw/paste-from-clipboard (:id item)))
|
||||
(udl/close!))
|
||||
(on-close [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!))]
|
||||
[:div.lightbox-body.clipboard
|
||||
[:div.clipboard-list
|
||||
(for [item (mx/react clipboard-ref)]
|
||||
[:div.clipboard-item
|
||||
{:key (str (:id item))
|
||||
:on-click (partial on-paste item)}
|
||||
[:span.clipboard-icon i/box]
|
||||
[:span {} (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]]))
|
||||
:render
|
||||
(fn [own props]
|
||||
[]
|
||||
(letfn [(on-paste [item]
|
||||
(st/emit! (udw/paste-from-clipboard (:id item)))
|
||||
(udl/close!))
|
||||
(on-close [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!))]
|
||||
[:div.lightbox-body.clipboard
|
||||
[:div.clipboard-list
|
||||
(for [item (mf/react (::clipboard own))]
|
||||
[:div.clipboard-item {:key (str (:id item))
|
||||
:on-click (partial on-paste item)}
|
||||
[:span.clipboard-icon i/box]
|
||||
[:span (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]])))
|
||||
|
||||
(defmethod lbx/render-lightbox :clipboard
|
||||
[_]
|
||||
|
|
|
|||
|
|
@ -6,36 +6,38 @@
|
|||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.grid
|
||||
(:require [cuerdas.core :as str]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.refs :as refs]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
(:require
|
||||
[cuerdas.core :as str]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.refs :as refs]))
|
||||
|
||||
;; --- Grid (Component)
|
||||
|
||||
(declare vertical-line)
|
||||
(declare horizontal-line)
|
||||
|
||||
(mx/defcs grid
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[own]
|
||||
(let [options (:metadata (mx/react refs/selected-page))
|
||||
color (:grid-color options "#cccccc")
|
||||
width c/viewport-width
|
||||
height c/viewport-height
|
||||
x-ticks (range (- 0 c/canvas-start-x)
|
||||
(- width c/canvas-start-x)
|
||||
(:grid-x-axis options 10))
|
||||
(mf/def grid
|
||||
:mixins [mf/static mf/reactive]
|
||||
:render
|
||||
(fn [own props]
|
||||
(let [options (:metadata (mf/react refs/selected-page))
|
||||
color (:grid-color options "#cccccc")
|
||||
width c/viewport-width
|
||||
height c/viewport-height
|
||||
x-ticks (range (- 0 c/canvas-start-x)
|
||||
(- width c/canvas-start-x)
|
||||
(:grid-x-axis options 10))
|
||||
|
||||
y-ticks (range (- 0 c/canvas-start-x)
|
||||
(- height c/canvas-start-x)
|
||||
(:grid-y-axis options 10))
|
||||
y-ticks (range (- 0 c/canvas-start-x)
|
||||
(- height c/canvas-start-x)
|
||||
(:grid-y-axis options 10))
|
||||
|
||||
path (as-> [] $
|
||||
(reduce (partial vertical-line height) $ x-ticks)
|
||||
(reduce (partial horizontal-line width) $ y-ticks))]
|
||||
[:g.grid {:style {:pointer-events "none"}}
|
||||
[:path {:d (str/join " " path) :stroke color :opacity "0.3"}]]))
|
||||
path (as-> [] $
|
||||
(reduce (partial vertical-line height) $ x-ticks)
|
||||
(reduce (partial horizontal-line width) $ y-ticks))]
|
||||
[:g.grid {:style {:pointer-events "none"}}
|
||||
[:path {:d (str/join " " path) :stroke color :opacity "0.3"}]])))
|
||||
|
||||
;; --- Helpers
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue