From 9dcd64c1865234c1a84c6128770911be305b1960 Mon Sep 17 00:00:00 2001 From: Juan de la Cruz Date: Tue, 17 Dec 2019 15:37:30 +0100 Subject: [PATCH] add page icon fixed --- .../styles/main/partials/sidebar-sitemap.scss | 28 ++--- .../styles/main/partials/sidebar.scss | 2 +- .../styles/main/partials/workspace-bar.scss | 27 +---- .../src/uxbox/main/ui/workspace/header.cljs | 2 +- .../main/ui/workspace/sidebar/sitemap-v2.cljs | 111 ++++++++++++++++++ .../main/ui/workspace/sidebar/sitemap.cljs | 6 +- 6 files changed, 126 insertions(+), 50 deletions(-) create mode 100644 frontend/src/uxbox/main/ui/workspace/sidebar/sitemap-v2.cljs diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss index 4ee457236..3727cf685 100644 --- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss +++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss @@ -6,22 +6,9 @@ // Copyright (c) 2015-2016 Juan de la Cruz .sitemap { - - .project-title { - align-items: center; - display: flex; - padding: $x-small; - width: 100%; - - span { - color: $intense-ui-text; - font-size: $fs13; - font-weight: bold; - max-width: 80%; - overflow-x: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } + max-height: 180px; + + .tool-window-bar { .add-page { align-items: center; @@ -41,12 +28,13 @@ } &:hover { - background-color: $dark-ui-bg; - border-color: $soft-ui-border; + background-color: $main-ui-color; + + svg { + fill: $soft-ui-icons; + } } - } - } .element-list { diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index e9c7470cc..9342d12df 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -24,7 +24,7 @@ flex-direction: column; overflow-y: auto; overflow-x: hidden; - padding-top: 50px; + padding-top: 40px; height: 100%; .tool-window { diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss index 66ecaa97e..c33c51ffa 100644 --- a/frontend/resources/styles/main/partials/workspace-bar.scss +++ b/frontend/resources/styles/main/partials/workspace-bar.scss @@ -51,13 +51,9 @@ .project-tree-btn { align-items: center; - background-color: $secondary-ui-bg; - border-radius: $br-small; - border: 1px solid transparent; cursor: pointer; display: flex; - padding: $x-small $x-small $x-small $medium; - width: 164px; + padding: $x-small; svg { fill: $intense-ui-icons; @@ -67,33 +63,18 @@ } span { - color: $intense-ui-text; + color: $soft-ui-text; + font-size: $fs14; overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; } - &:hover { - background-color: $dark-ui-bg; - border-color: $soft-ui-border; - } - - &.selected { - background-color: $main-ui-color; - - svg { - fill: $color-white; - } - - span { - color: $color-white; - } - - } } .workspace-options { display: flex; + margin: auto; .options-btn { align-items: center; diff --git a/frontend/src/uxbox/main/ui/workspace/header.cljs b/frontend/src/uxbox/main/ui/workspace/header.cljs index 575cdc655..1b7dfa31c 100644 --- a/frontend/src/uxbox/main/ui/workspace/header.cljs +++ b/frontend/src/uxbox/main/ui/workspace/header.cljs @@ -58,7 +58,7 @@ :class (when (contains? layout :sitemap) "selected") :on-click #(st/emit! (dw/toggle-layout-flag :sitemap))} i/project-tree - [:span {} (:name page)]] + [:span {} "Project name / File name / "(:name page)]] [:div.workspace-options [:ul.options-btn [:li.tooltip.tooltip-bottom diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap-v2.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap-v2.cljs new file mode 100644 index 000000000..499f09e22 --- /dev/null +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap-v2.cljs @@ -0,0 +1,111 @@ +;; 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-2016 Juan de la Cruz + +(ns uxbox.main.ui.workspace.sidebar.sitemap + (:require + [cuerdas.core :as str] + [lentes.core :as l] + [rumext.alpha :as mf] + [uxbox.builtins.icons :as i] + [uxbox.main.data.pages :as udp] + [uxbox.main.data.projects :as dp] + [uxbox.main.data.workspace :as dw] + [uxbox.main.store :as st] + [uxbox.main.refs :as refs] + [uxbox.main.ui.confirm :refer [confirm-dialog]] + [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] + [uxbox.util.i18n :refer [tr]] + [uxbox.util.router :as rt])) + +;; --- Page Item + +(mf/defc page-item + [{:keys [page index deletable? selected?] :as props}] + (let [on-edit #(modal/show! page-form-dialog {:page page}) + delete-fn #(st/emit! (udp/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})) + + navigate-fn #(st/emit! (dw/go-to-page (:id page))) + [dprops ref] (use-sortable {:type "page-item" + :data {:id (:id page) + :index index} + :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.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])]]])) + + +;; --- Page Item Wrapper + +(defn- make-page-ref + [page-id] + (-> (l/in [:pages page-id]) + (l/derive st/state))) + +(mf/defc page-item-wrapper + [{:keys [page-id index deletable? selected?] :as props}] + (let [page-ref (mf/use-memo {:deps #js [page-id] + :fn #(make-page-ref page-id)}) + page (mf/deref page-ref)] + [:& page-item {:page page + :index index + :deletable? deletable? + :selected? selected?}])) + +;; --- Pages List + +(mf/defc pages-list + [{:keys [file current-page] :as props}] + (let [pages (enumerate (:pages file)) + 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}])])) + +;; --- 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))] + [:div.sitemap.tool-window + [:div.tool-window-bar + [:div.tool-window-icon i/project-tree] + [:span (tr "ds.settings.sitemap")] + [:div.tool-window-close {:on-click close-fn} i/close]] + [:div.tool-window-content + [:div.project-title + #_[:span (:name project)] + [:div.add-page {:on-click create-fn} i/close]] + [:& pages-list {:file file :current-page page}]]])) diff --git a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs index 499f09e22..9793c01c5 100644 --- a/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs @@ -101,11 +101,7 @@ close-fn #(st/emit! (dw/toggle-layout-flag :sitemap))] [:div.sitemap.tool-window [:div.tool-window-bar - [:div.tool-window-icon i/project-tree] [:span (tr "ds.settings.sitemap")] - [:div.tool-window-close {:on-click close-fn} i/close]] + [:div.add-page {:on-click create-fn} i/close]] [:div.tool-window-content - [:div.project-title - #_[:span (:name project)] - [:div.add-page {:on-click create-fn} i/close]] [:& pages-list {:file file :current-page page}]]]))