From 4f9b3ad8cbfb6175d0b2d553bd7364cb3f9e173d Mon Sep 17 00:00:00 2001 From: Andrey Antukh Date: Thu, 9 Jan 2020 16:32:36 +0100 Subject: [PATCH] :sparkles: Adapt to new ux the page creation/renaming on workspace. --- frontend/src/uxbox/main/data/projects.cljs | 36 +++++---- frontend/src/uxbox/main/data/workspace.cljs | 1 - .../main/ui/workspace/sidebar/sitemap.cljs | 81 +++++++++++++------ .../ui/workspace/sidebar/sitemap_forms.cljs | 72 ----------------- 4 files changed, 76 insertions(+), 114 deletions(-) delete mode 100644 frontend/src/uxbox/main/ui/workspace/sidebar/sitemap_forms.cljs diff --git a/frontend/src/uxbox/main/data/projects.cljs b/frontend/src/uxbox/main/data/projects.cljs index 2c50fff33c..9f95c455aa 100644 --- a/frontend/src/uxbox/main/data/projects.cljs +++ b/frontend/src/uxbox/main/data/projects.cljs @@ -350,23 +350,26 @@ (declare page-created) -(s/def ::create-page - (s/keys :req-un [::name ::file-id])) +(def default-page-data + {:version 1 + :shapes [] + :canvas [] + :options {:grid-x 10 + :grid-y 10 + :grid-color "#cccccc"} + :shapes-by-id {}}) -(defn create-page - [{:keys [file-id name] :as data}] - (s/assert ::create-page data) - (ptk/reify ::create-page +(def create-empty-page + (ptk/reify ::create-empty-page ptk/WatchEvent - (watch [this state s] - (let [ordering (count (get-in state [:files file-id :pages])) + (watch [this state stream] + (let [file-id (get-in state [:workspace-local :file-id]) + name (str "Page " (gensym "p")) + ordering (count (get-in state [:files file-id :pages])) params {:name name :file-id file-id :ordering ordering - :data {:shapes [] - :canvas [] - :shapes-by-id {}} - :metadata {}}] + :data default-page-data}] (->> (rp/mutation :create-project-page params) (rx/map page-created)))))) @@ -398,8 +401,9 @@ (s/keys :req-un [::id ::name])) (defn rename-page - [{:keys [id name] :as data}] - (s/assert ::rename-page data) + [id name] + (s/assert ::us/uuid id) + (s/assert string? name) (ptk/reify ::rename-page ptk/UpdateEvent (update [_ state] @@ -411,8 +415,8 @@ ptk/WatchEvent (watch [_ state stream] (let [params {:id id :name name}] - (->> (rp/mutation :rename-page params) - (rx/map #(ptk/data-event ::page-renamed data))))))) + (->> (rp/mutation :rename-project-page params) + (rx/map #(ptk/data-event ::page-renamed params))))))) ;; --- Delete Page (by ID) diff --git a/frontend/src/uxbox/main/data/workspace.cljs b/frontend/src/uxbox/main/data/workspace.cljs index 50190c93b0..03a8fe7f79 100644 --- a/frontend/src/uxbox/main/data/workspace.cljs +++ b/frontend/src/uxbox/main/data/workspace.cljs @@ -263,7 +263,6 @@ (rx/finalize #(prn "FINALIZE" %)) (rx/take-until stoper)))))) - ;; --- Fetch Workspace Users (declare users-fetched) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index 6f54ec0cdd..e532dd8bb1 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -16,8 +16,8 @@ [uxbox.main.store :as st] [uxbox.main.refs :as refs] [uxbox.main.ui.confirm :refer [confirm-dialog]] + [uxbox.main.ui.keyboard :as kbd] [uxbox.main.ui.modal :as modal] - [uxbox.main.ui.workspace.sidebar.sitemap-forms :refer [page-form-dialog]] [uxbox.main.ui.workspace.sortable :refer [use-sortable]] [uxbox.util.data :refer [classnames enumerate]] [uxbox.util.dom :as dom] @@ -28,12 +28,40 @@ (mf/defc page-item [{:keys [page index deletable? selected?] :as props}] - (let [on-edit #(modal/show! page-form-dialog {:page page}) + (let [local (mf/use-state {}) + on-double-click + (fn [event] + (dom/prevent-default event) + (dom/stop-propagation event) + ;; (let [parent (.-parentNode (.-target event)) + ;; parent (.-parentNode parent)] + ;; (set! (.-draggable parent) false)) + (swap! local assoc :edition true)) + + on-blur + (fn [event] + (let [target (dom/event->target event) + ;; parent (.-parentNode target) + ;; parent (.-parentNode parent) + name (dom/get-value target)] + ;; (set! (.-draggable parent) true) + (st/emit! (dp/rename-page (:id page) name)) + (swap! local assoc :edition false))) + + on-key-down (fn [event] + (cond + (kbd/enter? event) + (on-blur event) + + (kbd/esc? event) + (swap! local assoc :edition false))) + delete-fn #(st/emit! (dp/delete-page (:id page))) on-delete #(do (dom/prevent-default %) (dom/stop-propagation %) (modal/show! confirm-dialog {:on-accept delete-fn})) + on-drop #(do (prn "TODO")) on-hover #(st/emit! (dw/change-page-order {:id (:id page) :index index})) @@ -45,19 +73,24 @@ :on-hover on-hover :on-drop on-drop})] [:li {:ref ref :class (classnames :selected selected?)} - [:div.element-list-body - {:class (classnames :selected selected? - :dragging (:dragging? dprops)) - :on-click navigate-fn - :on-double-click #(dom/stop-propagation %) - :draggable true} - + [:div.element-list-body {:class (classnames + :selected selected? + :dragging (:dragging? dprops)) + :on-click navigate-fn + :on-double-click on-double-click} [:div.page-icon i/page] - [:span (:name page)] - [:div.page-actions {} - [:a {:on-click on-edit} i/pencil] - (when deletable? - [:a {:on-click on-delete} i/trash])]]])) + (if (:edition @local) + [:* + [:input.element-name {:type "text" + :on-blur on-blur + :on-key-down on-key-down + :auto-focus true + :default-value (:name page "")}]] + [:* + [:span (:name page)] + [:div.page-actions + (when deletable? + [:a {:on-click on-delete} i/trash])]])]])) ;; --- Page Item Wrapper @@ -69,7 +102,7 @@ (mf/defc page-item-wrapper [{:keys [page-id index deletable? selected?] :as props}] - (let [page-ref (mf/use-memo {:deps #js [page-id] + (let [page-ref (mf/use-memo {:deps (mf/deps page-id) :fn #(make-page-ref page-id)}) page (mf/deref page-ref)] [:& page-item {:page page @@ -85,22 +118,20 @@ deletable? (> (count pages) 1)] [:ul.element-list (for [[index page-id] pages] - [:& page-item-wrapper - {:page-id page-id - :index index - :deletable? deletable? - :selected? (= page-id (:id current-page)) - :key page-id}])])) + [:& page-item-wrapper {:page-id page-id + :index index + :deletable? deletable? + :selected? (= page-id (:id current-page)) + :key page-id}])])) ;; --- Sitemap Toolbox (mf/defc sitemap-toolbox [{:keys [file page] :as props}] - (let [create-fn #(modal/show! page-form-dialog {:page {:file-id (:file-id page)}}) - close-fn #(st/emit! (dw/toggle-layout-flag :sitemap))] + (let [on-create-click #(st/emit! dp/create-empty-page)] [:div.sitemap.tool-window [:div.tool-window-bar - [:span (tr "ds.settings.sitemap")] - [:div.add-page {:on-click create-fn} i/close]] + [:span (tr "workspace.sidebar.sitemap")] + [:div.add-page {:on-click on-create-click} i/close]] [:div.tool-window-content [:& pages-list {:file file :current-page page}]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap_forms.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap_forms.cljs deleted file mode 100644 index 05274c6625..0000000000 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap_forms.cljs +++ /dev/null @@ -1,72 +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) 2015-2019 Andrey Antukh -;; Copyright (c) 2015-2019 Juan de la Cruz - -(ns uxbox.main.ui.workspace.sidebar.sitemap-forms - (:require - [rumext.alpha :as mf] - [cljs.spec.alpha :as s] - [uxbox.builtins.icons :as i] - [uxbox.main.constants :as c] - [uxbox.main.data.projects :as dp] - [uxbox.main.data.workspace :as udw] - [uxbox.main.store :as st] - [uxbox.main.ui.modal :as modal] - [uxbox.util.dom :as dom] - [uxbox.util.spec :as us] - [uxbox.util.forms :as fm] - [uxbox.util.i18n :refer [tr]])) - -(s/def ::id ::us/uuid) -(s/def ::file-id ::us/uuid) -(s/def ::name ::us/not-empty-string) - -(s/def ::page-form - (s/keys :req-un [::file-id ::name] - :opt-un [::id])) - -(defn- on-submit - [event form] - (dom/prevent-default event) - (modal/hide!) - (let [data (:clean-data form)] - (if (nil? (:id data)) - (st/emit! (dp/create-page data)) - (st/emit! (dp/rename-page data))))) - -(defn- initial-data - [page] - (merge {:name ""} - (select-keys page [:name :id :file-id]))) - -(mf/defc page-form - [{:keys [page] :as props}] - (let [{:keys [data] :as form} (fm/use-form ::page-form #(initial-data page))] - [:form {:on-submit #(on-submit % form)} - [:input.input-text - {:placeholder (tr "ds.page.placeholder") - :type "text" - :name "name" - :class (fm/error-class form :name) - :on-blur (fm/on-input-blur form :name) - :on-change (fm/on-input-change form :name) - :value (:name data) - :auto-focus true}] - [:input.btn-primary - {:value (tr "ds.go") - :type "submit" - :class (when-not (:valid form) "btn-disabled") - :disabled (not (:valid form))}]])) - -(mf/defc page-form-dialog - [{:keys [page] :as props}] - [:div.lightbox-body - (if (nil? (:id page)) - [:h3 (tr "ds.page.new")] - [:h3 (tr "ds.page.edit")]) - [:& page-form {:page page}] - [:a.close {:on-click modal/hide!} i/close]]) -