mirror of
https://github.com/penpot/penpot.git
synced 2025-01-25 07:58:49 -05:00
add page icon fixed
This commit is contained in:
Juan de la Cruz
parent
5c17c9b98d
commit
9dcd64c186
6 changed files with 126 additions and 50 deletions
|
|
@ -6,22 +6,9 @@
|
|||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-top: 50px;
|
||||
padding-top: 40px;
|
||||
height: 100%;
|
||||
|
||||
.tool-window {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
111
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap-v2.cljs
Normal file
111
frontend/src/uxbox/main/ui/workspace/sidebar/sitemap-v2.cljs
Normal file
|
|
@ -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 <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(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}]]]))
|
||||
|
|
@ -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}]]]))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue