mirror of
https://github.com/penpot/penpot.git
synced 2025-03-13 08:11:30 -05:00
Add interaction to new sitemap markup.
This commit is contained in:
Andrey Antukh
parent
6f23272c63
commit
a2af628a14
2 changed files with 167 additions and 51 deletions
|
|
@ -60,34 +60,32 @@
|
|||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn create-page
|
||||
[{:keys [name width height project] :as data}]
|
||||
(sc/validate! +page-schema+ data)
|
||||
[{:keys [name width height project layout] :as data}]
|
||||
(sc/validate! +create-page-schema+ data)
|
||||
(reify
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(let [page {:id (random-uuid)
|
||||
:project project
|
||||
:created (time/now :unix)
|
||||
:layout layout
|
||||
:shapes []
|
||||
:name name
|
||||
:width width
|
||||
:height height}]
|
||||
(assoc-page state page)))
|
||||
(stpr/assoc-page state page)))))
|
||||
|
||||
IPrintWithWriter
|
||||
(-pr-writer [mv writer _]
|
||||
(-write writer "#<event:u.s.p/create-page>"))))
|
||||
|
||||
(defn update-page-name
|
||||
[pageid name]
|
||||
(defn update-page
|
||||
[{:keys [id name width height layout] :as data}]
|
||||
(sc/validate! +create-page-schema+ data)
|
||||
(reify
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(update-in state [:pages-by-id pageid] assoc :name name))
|
||||
|
||||
IPrintWithWriter
|
||||
(-pr-writer [mv writer _]
|
||||
(-write writer "#<event:u.s.p/update-page-name>"))))
|
||||
(let [page (merge (get-in state [:pages-by-id id])
|
||||
(when width {:width width})
|
||||
(when height {:height height})
|
||||
(when name {:name name}))]
|
||||
(assoc-in state [:pages-by-id id] page)))))
|
||||
|
||||
(defn delete-page
|
||||
[pageid]
|
||||
|
|
@ -97,11 +95,7 @@
|
|||
(let [shapeids (get-in state [:pages-by-id pageid :shapes])]
|
||||
(as-> state $
|
||||
(update $ :shapes-by-id without-keys shapeids)
|
||||
(update $ :pages-by-id dissoc pageid))))
|
||||
|
||||
IPrintWithWriter
|
||||
(-pr-writer [mv writer _]
|
||||
(-write writer "#<event:u.s.p/edit-page>"))))
|
||||
(update $ :pages-by-id dissoc pageid))))))
|
||||
|
||||
(defn create-project
|
||||
[{:keys [name width height layout] :as data}]
|
||||
|
|
@ -112,31 +106,22 @@
|
|||
(-apply-update [_ state]
|
||||
(let [proj {:id uuid
|
||||
:name name
|
||||
:width width
|
||||
:created (time/now :unix)
|
||||
:height height}]
|
||||
(assoc-project state proj)))
|
||||
:created (time/now :unix)}]
|
||||
(stpr/assoc-project state proj)))
|
||||
|
||||
rs/EffectEvent
|
||||
(-apply-effect [_ state]
|
||||
(rs/emit! (create-page {:name "Page 1"
|
||||
:layout layout
|
||||
:width width
|
||||
:height height
|
||||
:project uuid})))
|
||||
IPrintWithWriter
|
||||
(-pr-writer [mv writer _]
|
||||
(-write writer "#<event:u.s.p/create-project>")))))
|
||||
|
||||
:project uuid}))))))
|
||||
(defn delete-project
|
||||
[proj]
|
||||
(reify
|
||||
rs/UpdateEvent
|
||||
(-apply-update [_ state]
|
||||
(dissoc-project state proj))
|
||||
|
||||
IPrintWithWriter
|
||||
(-pr-writer [mv writer _]
|
||||
(-write writer "#<event:u.s.p/delete-project>"))))
|
||||
(stpr/dissoc-project state proj))))
|
||||
|
||||
(defn go-to
|
||||
"A shortcut event that redirects the user to the
|
||||
|
|
@ -150,10 +135,8 @@
|
|||
(if pageid
|
||||
(rs/emit! (r/navigate :workspace/page {:project-uuid projectid
|
||||
:page-uuid pageid}))
|
||||
(let [pages (project-pages state projectid)
|
||||
(let [pages (stpr/project-pages state projectid)
|
||||
pageid (:id (first pages))]
|
||||
(println "selected" pageid "projectid" projectid)
|
||||
(rs/emit! (r/navigate :workspace/page {:project-uuid projectid
|
||||
:page-uuid pageid})))))
|
||||
IPrintWithWriter
|
||||
(-pr-writer [mv writer _]
|
||||
(-write writer "#<event:u.s.p/go-to")))))
|
||||
:page-uuid pageid}))))))))
|
||||
|
|
|
|||
|
|
@ -2,26 +2,59 @@
|
|||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[cats.labs.lens :as l]
|
||||
[cuerdas.core :as str]
|
||||
[uxbox.locales :refer (tr)]
|
||||
[uxbox.router :as r]
|
||||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.shapes :as shapes]
|
||||
[uxbox.library :as library]
|
||||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.data.projects :as dp]
|
||||
[uxbox.data.workspace :as dw]
|
||||
[uxbox.ui.dashboard.projects :refer (+layouts+)]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.lightbox :as lightbox]
|
||||
[uxbox.util.data :refer (read-string parse-int)]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Component
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn page-item-render
|
||||
[own page total active?]
|
||||
(let [deletable? (> total 1)
|
||||
navigate #(rs/emit! (dp/go-to (:project page) (:id page)))
|
||||
edit #(lightbox/open! :page-form {:page page})
|
||||
delete (fn [e]
|
||||
(dom/prevent-default e)
|
||||
(dom/stop-propagation e)
|
||||
(rs/emit! (dp/delete-page (:id page))
|
||||
(dp/go-to (:project page))))]
|
||||
(html
|
||||
[:li {:class (when active? "selected")
|
||||
:on-click navigate}
|
||||
[:div.page-icon i/page]
|
||||
[:span (:name page)]
|
||||
[:div.page-actions
|
||||
[:a {:on-click edit} i/pencil]
|
||||
(if deletable?
|
||||
[:a {:on-click delete} i/trash])]])))
|
||||
|
||||
(def ^:const page-item
|
||||
(mx/component
|
||||
{:render page-item-render
|
||||
:name "page-item"
|
||||
:mixins [(mx/local) mx/static rum/reactive]}))
|
||||
|
||||
(defn sitemap-toolbox-render
|
||||
[open-toolboxes]
|
||||
(let [workspace (rum/react wb/workspace-l)
|
||||
[own]
|
||||
(let [project (rum/react wb/project-l)
|
||||
pages (rum/react wb/pages-l)
|
||||
current (rum/react wb/page-l)
|
||||
create #(lightbox/open! :page-form {:page {:project (:id project)}})
|
||||
close #(rs/emit! (dw/toggle-flag :sitemap))]
|
||||
(html
|
||||
[:div.sitemap.tool-window
|
||||
|
|
@ -31,20 +64,120 @@
|
|||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:div.project-title
|
||||
[:span "Project name"]
|
||||
[:div.add-page i/close]]
|
||||
[:span (:name project)]
|
||||
[:div.add-page {:on-click create} i/close]]
|
||||
[:ul.element-list
|
||||
(for [i (range 10)]
|
||||
[:li {:key i :class (when (= i 2) "selected")}
|
||||
[:div.page-icon i/page]
|
||||
[:span (str "Page " i)]
|
||||
[:div.page-actions
|
||||
[:a i/pencil]
|
||||
[:a i/trash]]])
|
||||
]]])))
|
||||
(for [page pages
|
||||
:let [active? (= (:id page) (:id current))]]
|
||||
(-> (page-item page (count pages) active?)
|
||||
(rum/with-key (:id page))))]]])))
|
||||
|
||||
(def ^:static sitemap-toolbox
|
||||
(mx/component
|
||||
{:render sitemap-toolbox-render
|
||||
:name "sitemap-toolbox"
|
||||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Lightbox
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(def ^:const +page-defaults+
|
||||
{:width 1920
|
||||
:height 1080
|
||||
:layout :desktop})
|
||||
|
||||
(defn- layout-input
|
||||
[local page id]
|
||||
(let [layout (get +layouts+ id)
|
||||
size (select-keys layout [:width :height])
|
||||
change #(swap! local merge {:layout id} size)]
|
||||
(html
|
||||
[:div
|
||||
[:input {:type "radio"
|
||||
:key id :id id
|
||||
:name "project-layout"
|
||||
:value (:id layout)
|
||||
:checked (= id (:layout page))
|
||||
:on-change change}]
|
||||
[:label {:value (:id layout) :for id} (:name layout)]])))
|
||||
|
||||
(defn- page-form-lightbox-render
|
||||
[own local page]
|
||||
(let [edition? (:id page)
|
||||
page (merge page @local)
|
||||
;; {:keys [name width height] :or {name ""} :as page} (merge page @local)
|
||||
valid? (and (not (str/empty? (str/trim (:name page ""))))
|
||||
(pos? (:width page))
|
||||
(pos? (:height page)))]
|
||||
(letfn [(update-size [field e]
|
||||
(let [value (dom/event->value e)
|
||||
value (parse-int value)]
|
||||
(swap! local assoc field value)))
|
||||
(update-name [e]
|
||||
(let [value (dom/event->value e)]
|
||||
(swap! local assoc :name value)))
|
||||
(toggle-sizes []
|
||||
(swap! local assoc
|
||||
:width (:height page)
|
||||
:height (:width page)))
|
||||
(cancel [e]
|
||||
(dom/prevent-default e)
|
||||
(lightbox/close!))
|
||||
(persist [e]
|
||||
(dom/prevent-default e)
|
||||
(lightbox/close!)
|
||||
(if edition?
|
||||
(rs/emit! (dp/update-page page))
|
||||
(rs/emit! (dp/create-page page))))]
|
||||
(html
|
||||
[:div.lightbox-body
|
||||
(if edition?
|
||||
[:h3 "Edit page"]
|
||||
[:h3 "New page"])
|
||||
[:form
|
||||
[:input#project-name.input-text
|
||||
{:placeholder "Page name"
|
||||
:type "text"
|
||||
:value (:name page "")
|
||||
:auto-focus true
|
||||
:on-change update-name}]
|
||||
[:div.project-size
|
||||
[:input#project-witdh.input-text
|
||||
{:placeholder "Width"
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 4000
|
||||
:value (:width page)
|
||||
:on-change #(update-size :width %)}]
|
||||
[:a.toggle-layout {:on-click toggle-sizes} i/toggle]
|
||||
[:input#project-height.input-text
|
||||
{:placeholder "Height"
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 4000
|
||||
:value (:height page)
|
||||
:on-change #(update-size :height %)}]]
|
||||
|
||||
[:div.input-radio.radio-primary
|
||||
(layout-input local page :mobile)
|
||||
(layout-input local page :tablet)
|
||||
(layout-input local page :notebook)
|
||||
(layout-input local page :desktop)]
|
||||
|
||||
(when valid?
|
||||
[:input#project-btn.btn-primary
|
||||
{:value "Go go go!"
|
||||
:on-click persist
|
||||
:type "button"}])]
|
||||
[:a.close {:on-click cancel} i/close]]))))
|
||||
|
||||
(def page-form-lightbox
|
||||
(mx/component
|
||||
{:render #(page-form-lightbox-render %1 (:rum/local %1) %2)
|
||||
:name "page-form-lightbox"
|
||||
:mixins [(mx/local)]}))
|
||||
|
||||
(defmethod lightbox/render-lightbox :page-form
|
||||
[{:keys [page]}]
|
||||
(page-form-lightbox page))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue