mirror of
https://github.com/penpot/penpot.git
synced 2025-08-02 20:48:22 +02:00
✨ Enable history sidebar and dialog.
This commit is contained in:
Andrey Antukh
parent
006fcaa511
commit
7598637efc
6 changed files with 305 additions and 374 deletions
|
|
@ -29,7 +29,7 @@
|
|||
[uxbox.main.ui.workspace.scroll :as scroll]
|
||||
[uxbox.main.ui.workspace.shortcuts :as shortcuts]
|
||||
[uxbox.main.ui.workspace.sidebar :refer [left-sidebar right-sidebar]]
|
||||
;; [uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]]
|
||||
[uxbox.main.ui.workspace.sidebar.history :refer [history-dialog]]
|
||||
[uxbox.main.ui.workspace.streams :as uws]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]
|
||||
|
|
@ -61,12 +61,14 @@
|
|||
|
||||
(defn- subscribe
|
||||
[canvas page]
|
||||
;; (scroll/scroll-to-page-center (mf/ref-node canvas) page)
|
||||
(st/emit! (udp/watch-page-changes (:id page))
|
||||
(udu/watch-page-changes (:id page))
|
||||
(udh/initialize (:id page))
|
||||
(udh/watch-page-changes (:id page))
|
||||
(dw/start-shapes-watcher (:id page)))
|
||||
(let [sub (shortcuts/init)]
|
||||
#(do (st/emit! ::udp/stop-page-watcher
|
||||
::udh/stop-page-watcher
|
||||
::dw/stop-shapes-watcher)
|
||||
(rx/cancel! sub))))
|
||||
|
||||
|
|
@ -74,7 +76,6 @@
|
|||
[{:keys [page] :as props}]
|
||||
(let [flags (or (mf/deref refs/flags) #{})
|
||||
canvas (mf/use-ref nil)
|
||||
|
||||
left-sidebar? (not (empty? (keep flags [:layers :sitemap
|
||||
:document-history])))
|
||||
right-sidebar? (not (empty? (keep flags [:icons :drawtools
|
||||
|
|
@ -101,7 +102,7 @@
|
|||
:on-scroll on-scroll
|
||||
:on-wheel #(on-wheel % canvas)}
|
||||
|
||||
;; (history-dialog)
|
||||
[:& history-dialog]
|
||||
|
||||
;; Rules
|
||||
(when (contains? flags :rules)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
|
||||
;; [uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.layers :refer [layers-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.options :refer [options-toolbox]]
|
||||
|
|
@ -27,8 +27,8 @@
|
|||
[:& sitemap-toolbox {:project-id (:project page)
|
||||
:current-page-id (:id page)
|
||||
:page page}])
|
||||
#_(when (contains? flags :document-history)
|
||||
(history-toolbox page-id))
|
||||
(when (contains? flags :document-history)
|
||||
[:& history-toolbox])
|
||||
(when (contains? flags :layers)
|
||||
[:& layers-toolbox {:page page}])]])
|
||||
|
||||
|
|
|
|||
|
|
@ -2,134 +2,115 @@
|
|||
;; 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) 2015-2017 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2019 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.history
|
||||
(:require [uxbox.builtins.icons :as i]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.time :as dt]))
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.data.history :as udh]
|
||||
[uxbox.main.data.pages :as udp]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
;; --- History Item (Component)
|
||||
|
||||
;; (mf/def history-item
|
||||
;; :mixins [mf/memo]
|
||||
;; :key-fn :id
|
||||
;; :render
|
||||
;; (fn [own {:keys [::selected] :as item}]
|
||||
;; (letfn [(on-select [event]
|
||||
;; (dom/prevent-default event)
|
||||
;; (st/emit! (udh/select-page-history (:version item))))
|
||||
;; (on-pinned [event]
|
||||
;; (dom/prevent-default event)
|
||||
;; (dom/stop-propagation event)
|
||||
;; (let [item (assoc item
|
||||
;; :label "no label"
|
||||
;; :pinned (not (:pinned item)))]
|
||||
;; (st/emit! (udh/update-history-item item))))]
|
||||
;; [:li {:class (when (= selected (:version item)) "current")
|
||||
;; :on-click on-select}
|
||||
;; [:div.pin-icon {:on-click on-pinned
|
||||
;; :class (when (:pinned item) "selected")}
|
||||
;; i/pin]
|
||||
;; [:span (str "Version " (:version item)
|
||||
;; " (" (dt/timeago (:created-at item)) ")")]])))
|
||||
(mf/defc history-item
|
||||
[{:keys [item selected?] :as props}]
|
||||
(letfn [(on-select [event]
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (udh/select (:version item))))
|
||||
(on-pinned [event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(let [item (assoc item
|
||||
:label "no label"
|
||||
:pinned (not (:pinned item)))]
|
||||
(st/emit! (udh/update-history-item item))))]
|
||||
[:li {:class (when selected? "current")
|
||||
:on-click on-select}
|
||||
[:div.pin-icon {:on-click on-pinned
|
||||
:class (when (:pinned item) "selected")}
|
||||
i/pin]
|
||||
[:span (str "Version " (:version item)
|
||||
" (" (dt/timeago (:created-at item)) ")")]]))
|
||||
|
||||
;; ;; --- History List (Component)
|
||||
;; --- History List (Component)
|
||||
|
||||
;; (mf/def history-list
|
||||
;; :mixins [mf/memo mf/reactive]
|
||||
;; :render
|
||||
;; (fn [own {:keys [selected items min-version] :as history}]
|
||||
;; (let [items (reverse (sort-by :version items))
|
||||
;; page (mf/react refs/selected-page)
|
||||
;; show-more? (pos? min-version)
|
||||
;; load-more #(st/emit! (udh/load-more))]
|
||||
;; [:ul.history-content
|
||||
;; (for [item items]
|
||||
;; (history-item (assoc item ::selectd selected)))
|
||||
;; (when show-more?
|
||||
;; [:li {:on-click load-more}
|
||||
;; [:a.btn-primary.btn-small
|
||||
;; "view more"]])])))
|
||||
(mf/defc history-list
|
||||
[{:keys [history] :as props}]
|
||||
(let [items (reverse (sort-by :version (:items history)))
|
||||
show-more? (pos? (:min-version history))
|
||||
load-more #(st/emit! udh/load-more)]
|
||||
[:ul.history-content
|
||||
(for [item items]
|
||||
[:& history-item {:item item
|
||||
:key (:id item)
|
||||
:selected? (= (:selected history)
|
||||
(:version item))}])
|
||||
(when show-more?
|
||||
[:li {:on-click load-more}
|
||||
[:a.btn-primary.btn-small "view more"]])]))
|
||||
|
||||
;; ;; --- History Pinned List (Component)
|
||||
;; --- History Pinned List (Component)
|
||||
|
||||
;; (mf/def history-pinned-list
|
||||
;; :mixins [mf/memo]
|
||||
;; :render
|
||||
;; (fn [own {:keys [pinned selected] :as history}]
|
||||
;; [:ul.history-content
|
||||
;; (for [item (reverse (sort-by :version pinned))]
|
||||
;; (let [selected (= (:version item) selected)]
|
||||
;; (history-item (assoc item ::selected selected))))]))
|
||||
(mf/defc history-pinned-list
|
||||
[{:keys [history] :as props}]
|
||||
[:ul.history-content
|
||||
(for [item (reverse (sort-by :version (:pinned history)))]
|
||||
[:& history-item {:item item
|
||||
:key (:id item)
|
||||
:selected? (= (:selected history)
|
||||
(:version item))}])])
|
||||
|
||||
;; ;; --- History Toolbox (Component)
|
||||
;; --- History Toolbox (Component)
|
||||
|
||||
;; (mf/def history-toolbox
|
||||
;; :mixins [mf/memo mf/reactive]
|
||||
(mf/defc history-toolbox
|
||||
[props]
|
||||
(let [history (mf/deref refs/history)
|
||||
section (mf/use-state :main)
|
||||
close #(st/emit! (dw/toggle-flag :history))
|
||||
main? (= @section :main)
|
||||
pinned? (= @section :pinned)
|
||||
show-main #(st/emit! (udh/select-section :main))
|
||||
show-pinned #(st/emit! (udh/select-section :pinned))]
|
||||
[:div.document-history.tool-window
|
||||
[:div.tool-window-bar
|
||||
[:div.tool-window-icon i/undo-history]
|
||||
[:span (tr "ds.settings.document-history")]
|
||||
[:div.tool-window-close {:on-click close} i/close]]
|
||||
[:div.tool-window-content
|
||||
[:ul.history-tabs
|
||||
[:li {:on-click #(reset! section :main)
|
||||
:class (when main? "selected")}
|
||||
(tr "ds.history.versions")]
|
||||
[:li {:on-click #(reset! section :pinned)
|
||||
:class (when pinned? "selected")}
|
||||
(tr "ds.history.pinned")]]
|
||||
(if (= @section :pinned)
|
||||
[:& history-pinned-list {:history history}]
|
||||
[:& history-list {:history history}])]]))
|
||||
|
||||
;; :init
|
||||
;; (fn [own page-id]
|
||||
;; (st/emit! (udh/initialize page-id))
|
||||
;; own)
|
||||
;; --- History Dialog
|
||||
|
||||
;; :will-unmount
|
||||
;; (fn [own]
|
||||
;; (st/emit! ::udh/stop-changes-watcher)
|
||||
;; own)
|
||||
(mf/defc history-dialog
|
||||
[props]
|
||||
(let [history (mf/deref refs/history)
|
||||
version (:selected history)
|
||||
on-accept #(st/emit! udh/apply-selected)
|
||||
on-cancel #(st/emit! udh/deselect)]
|
||||
(when (or version (:deselecting history))
|
||||
[:div.message-version
|
||||
{:class (when (:deselecting history) "hide-message")}
|
||||
[:span (tr "history.alert-message" (or version "00"))
|
||||
[:div.message-action
|
||||
[:a.btn-transparent {:on-click on-accept} (tr "ds.accept")]
|
||||
[:a.btn-transparent {:on-click on-cancel} (tr "ds.cancel")]]]])))
|
||||
|
||||
;; :render
|
||||
;; (fn [own page-id]
|
||||
;; (let [history (mf/react refs/history)
|
||||
;; section (:section history :main)
|
||||
|
||||
;; close #(st/emit! (dw/toggle-flag :document-history))
|
||||
;; main? (= section :main)
|
||||
;; pinned? (= section :pinned)
|
||||
|
||||
;; show-main #(st/emit! (udh/select-section :main))
|
||||
;; show-pinned #(st/emit! (udh/select-section :pinned))]
|
||||
;; [:div.document-history.tool-window {}
|
||||
;; [:div.tool-window-bar {}
|
||||
;; [:div.tool-window-icon {} i/undo-history]
|
||||
;; [:span {} (tr "ds.settings.document-history")]
|
||||
;; [:div.tool-window-close {:on-click close} i/close]]
|
||||
;; [:div.tool-window-content {}
|
||||
;; [:ul.history-tabs {}
|
||||
;; [:li {:on-click show-main
|
||||
;; :class (when main? "selected")}
|
||||
;; (tr "ds.history.versions")]
|
||||
;; [:li {:on-click show-pinned
|
||||
;; :class (when pinned? "selected")}
|
||||
;; (tr "ds.history.pinned")]]
|
||||
;; (if (= section :pinned)
|
||||
;; (history-pinned-list history)
|
||||
;; (history-list history))]])))
|
||||
|
||||
;; ;; --- History Dialog
|
||||
|
||||
;; (mf/def history-dialog
|
||||
;; :mixins [mf/memo mf/reactive]
|
||||
;; :render
|
||||
;; (fn [own]
|
||||
;; (let [history (mf/react refs/history)
|
||||
;; version (:selected history)
|
||||
;; on-accept #(st/emit! (udh/apply-selected-history))
|
||||
;; on-cancel #(st/emit! (udh/deselect-page-history))]
|
||||
;; (when (or version (:deselecting history))
|
||||
;; [:div.message-version
|
||||
;; {:class (when (:deselecting history) "hide-message")}
|
||||
;; [:span {} (tr "history.alert-message" (or version "00"))
|
||||
;; [:div.message-action {}
|
||||
;; [:a.btn-transparent {:on-click on-accept} (tr "ds.accept")]
|
||||
;; [:a.btn-transparent {:on-click on-cancel} (tr "ds.cancel")]]]]))))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue