mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 07:29:08 -05:00
🐧 adds layout for libraries sidebar
This commit is contained in:
alonso.torres
parent
c09fe46790
commit
4102dca55c
12 changed files with 187 additions and 40 deletions
|
|
@ -42,8 +42,9 @@
|
|||
//#################################################
|
||||
|
||||
@import 'main/partials/main-bar';
|
||||
@import 'main/partials/workspace-bar';
|
||||
@import 'main/partials/workspace';
|
||||
@import 'main/partials/workspace-bar';
|
||||
@import 'main/partials/workspace-libraries';
|
||||
@import 'main/partials/tool-bar';
|
||||
@import 'main/partials/project-bar';
|
||||
@import 'main/partials/sidebar';
|
||||
|
|
|
|||
|
|
@ -6,8 +6,6 @@
|
|||
// Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
.sitemap {
|
||||
max-height: 180px;
|
||||
|
||||
.tool-window-bar {
|
||||
|
||||
.add-page {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
height: 100%;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
width: 230px;
|
||||
width: 15rem;
|
||||
z-index: 10;
|
||||
|
||||
&.settings-bar-left {
|
||||
|
|
@ -20,10 +20,22 @@
|
|||
|
||||
.settings-bar-inside {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
display: grid;
|
||||
|
||||
&[data-layout*='layers'] {
|
||||
grid-template-rows: 30% 70%;
|
||||
}
|
||||
|
||||
&[data-layout*='libraries'] {
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
|
||||
&[data-layout*='layers'][data-layout*='libraries'] {
|
||||
grid-template-rows: 15% 25% 60%;
|
||||
}
|
||||
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
padding-top: 40px;
|
||||
height: 100%;
|
||||
|
||||
|
|
@ -33,12 +45,14 @@
|
|||
flex-direction: column;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.tool-window-bar {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
padding: $small;
|
||||
overflow: hidden;
|
||||
|
||||
svg {
|
||||
fill: $color-gray-20;
|
||||
|
|
@ -80,13 +94,6 @@
|
|||
padding-bottom: $medium;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&#layers {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
height: 2.5rem;
|
||||
padding: 0 0.25rem;
|
||||
}
|
||||
|
||||
.tab-container-tab-title {
|
||||
|
|
@ -29,3 +30,14 @@
|
|||
background: $color-gray-50;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-container-content {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tab-element, .tab-element-content {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
.library-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
.library-tab-content {
|
||||
display: grid;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 0.25rem;
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
.icons-tab & {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
|
||||
.images-tab & {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.library-tab-element {
|
||||
border-radius: 4px;
|
||||
border: 1px solid #1F1F1F;
|
||||
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
margin: 0.25rem;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
& svg, & img {
|
||||
height: auto;
|
||||
margin: auto;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
|
||||
& .library-tab-element-name {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.icons-tab & {
|
||||
background: $color-white;
|
||||
color: $color-black;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
padding: $size-3;
|
||||
}
|
||||
|
||||
.images-tab & {
|
||||
height: 4rem;
|
||||
width: 6.2rem;
|
||||
color: $color-white;
|
||||
padding: $size-2 0;
|
||||
}
|
||||
}
|
||||
|
||||
.library-tab-element-name {
|
||||
display: none;
|
||||
position: absolute;
|
||||
font-size: 9px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.library-tab-libraries {
|
||||
margin: 0.5rem;
|
||||
width: 90%;
|
||||
padding: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.library-tab-libraries-item {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
|
@ -269,7 +269,9 @@
|
|||
|
||||
(declare initialize-alignment)
|
||||
|
||||
(def default-layout #{:sitemap :layers :element-options :rules})
|
||||
#_(def default-layout #{:sitemap :layers :element-options :rules})
|
||||
(def default-layout #{:libraries :rules})
|
||||
|
||||
|
||||
(def workspace-default
|
||||
{:zoom 1
|
||||
|
|
@ -770,16 +772,20 @@
|
|||
;; --- Toggle layout flag
|
||||
|
||||
(defn toggle-layout-flag
|
||||
[flag]
|
||||
(us/verify keyword? flag)
|
||||
[& flags]
|
||||
;; Verify all?
|
||||
#_(us/verify keyword? flag)
|
||||
(ptk/reify ::toggle-layout-flag
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :workspace-layout
|
||||
(fn [flags]
|
||||
(if (contains? flags flag)
|
||||
(disj flags flag)
|
||||
(conj flags flag)))))))
|
||||
(let [reduce-fn
|
||||
(fn [state flag]
|
||||
(update state :workspace-layout
|
||||
(fn [flags]
|
||||
(if (contains? flags flag)
|
||||
(disj flags flag)
|
||||
(conj flags flag)))))]
|
||||
(reduce reduce-fn state flags)))))
|
||||
|
||||
;; --- Tooltip
|
||||
|
||||
|
|
@ -1103,6 +1109,7 @@
|
|||
(rx/empty))))))
|
||||
|
||||
|
||||
|
||||
;; --- Toggle shape's selection status (selected or deselected)
|
||||
|
||||
(defn select-shape
|
||||
|
|
|
|||
|
|
@ -7,16 +7,21 @@
|
|||
[:div.tab-element-content children]])
|
||||
|
||||
(mf/defc tab-container
|
||||
[{:keys [children selected]}]
|
||||
[{:keys [children selected on-change-tab]}]
|
||||
(.log js/console (map #(-> % .-props .-title) children))
|
||||
(let [first-id (-> children first .-props .-id)
|
||||
state (mf/use-state {:selected first-id})]
|
||||
state (mf/use-state {:selected first-id})
|
||||
selected (or selected (:selected @state))
|
||||
handle-select (fn [tab]
|
||||
(let [id (-> tab .-props .-id)]
|
||||
(swap! state assoc :selected id)
|
||||
(on-change-tab id)))]
|
||||
[:div.tab-container
|
||||
[:div.tab-container-tabs
|
||||
(for [tab children]
|
||||
[:div.tab-container-tab-title
|
||||
{:on-click #(swap! state assoc :selected (-> tab .-props .-id))
|
||||
:class (when (= (:selected @state) (-> tab .-props .-id)) "current")}
|
||||
{:on-click (partial handle-select tab)
|
||||
:class (when (= selected (-> tab .-props .-id)) "current")}
|
||||
(-> tab .-props .-title)])]
|
||||
[:div.tab-container-content
|
||||
(filter #(= (:selected @state) (-> % .-props .-id)) children)]]))
|
||||
(filter #(= selected (-> % .-props .-id)) children)]]))
|
||||
|
|
|
|||
|
|
@ -60,10 +60,8 @@
|
|||
(mf/defc workspace-content
|
||||
[{:keys [page file layout] :as params}]
|
||||
(let [frame (mf/use-ref nil)
|
||||
left-sidebar? (not (empty? (keep layout [:layers :sitemap
|
||||
:document-history])))
|
||||
right-sidebar? (not (empty? (keep layout [:icons :drawtools
|
||||
:element-options])))
|
||||
left-sidebar? (not (empty? (keep layout [:layers :sitemap :document-history :libraries])))
|
||||
right-sidebar? (not (empty? (keep layout [:icons :drawtools :element-options])))
|
||||
classes (classnames
|
||||
:no-tool-bar-right (not right-sidebar?)
|
||||
:no-tool-bar-left (not left-sidebar?))]
|
||||
|
|
|
|||
|
|
@ -68,10 +68,12 @@
|
|||
[:li.tooltip.tooltip-right
|
||||
{:alt "Layers"
|
||||
:class (when (contains? layout :layers) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :layers))}
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :layers :sitemap))}
|
||||
i/layers]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "Libraries"}
|
||||
{:alt "Libraries"
|
||||
:class (when (contains? layout :libraries) "selected")
|
||||
:on-click #(st/emit! (dw/toggle-layout-flag :libraries))}
|
||||
i/icon-set]
|
||||
[:li.tooltip.tooltip-right
|
||||
{:alt "History"}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,13 @@
|
|||
(ns uxbox.main.ui.workspace.sidebar
|
||||
(:require
|
||||
[rumext.alpha :as mf]
|
||||
[cuerdas.core :as str]
|
||||
[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]]
|
||||
[uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]))
|
||||
[uxbox.main.ui.workspace.sidebar.sitemap :refer [sitemap-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.libraries :refer [libraries-toolbox]]))
|
||||
|
||||
;; --- Left Sidebar (Component)
|
||||
|
||||
|
|
@ -24,12 +26,15 @@
|
|||
[{:keys [layout page file] :as props}]
|
||||
[:aside.settings-bar.settings-bar-left
|
||||
[:div.settings-bar-inside
|
||||
{:data-layout (str/join "," layout)}
|
||||
(when (contains? layout :sitemap)
|
||||
[:& sitemap-toolbox {:file file :page page}])
|
||||
(when (contains? layout :document-history)
|
||||
[:& history-toolbox])
|
||||
(when (contains? layout :layers)
|
||||
[:& layers-toolbox {:page page}])]])
|
||||
[:& layers-toolbox {:page page}])
|
||||
(when (contains? layout :libraries)
|
||||
[:& libraries-toolbox])]])
|
||||
|
||||
;; --- Right Sidebar (Component)
|
||||
|
||||
|
|
|
|||
|
|
@ -24,6 +24,30 @@
|
|||
[uxbox.util.i18n :as i18n :refer [t]]
|
||||
[uxbox.main.ui.components.tab-container :refer [tab-container tab-element]]))
|
||||
|
||||
(mf/defc library-tab []
|
||||
[:div.library-tab.icons-tab
|
||||
[:select.library-tab-libraries
|
||||
[:option.library-tab-libraries-item "Material design"]
|
||||
[:option.library-tab-libraries-item "Icon library 1"]
|
||||
[:option.library-tab-libraries-item "Icon library 2"]]
|
||||
[:div.library-tab-content
|
||||
(for [_ (range 0 200)]
|
||||
[:div.library-tab-element
|
||||
i/trash
|
||||
[:span.library-tab-element-name "my-icon.svg"]])]])
|
||||
|
||||
(mf/defc images-tab []
|
||||
[:div.library-tab.images-tab
|
||||
[:select.library-tab-libraries
|
||||
[:option.library-tab-libraries-item "Material design"]
|
||||
[:option.library-tab-libraries-item "Icon library 1"]
|
||||
[:option.library-tab-libraries-item "Icon library 2"]]
|
||||
[:div.library-tab-content
|
||||
(for [_ (range 0 200)]
|
||||
[:div.library-tab-element
|
||||
[:img {:src "https://www.placecage.com/c/200/300"}]
|
||||
[:span.library-tab-element-name "my-icon.svg"]])]])
|
||||
|
||||
(mf/defc libraries-toolbox
|
||||
[]
|
||||
(let [locale (i18n/use-locale)]
|
||||
|
|
@ -32,8 +56,6 @@
|
|||
[:div "Libraries"]
|
||||
[:div "All libraries"]]
|
||||
[:div.tool-window-content
|
||||
[:& tab-container {:selected :icons :on-change-tab #(println "Change tab")}
|
||||
[:& tab-element {:id :icons :title "Icons"}
|
||||
[:p "ICONS TAB"]]
|
||||
[:& tab-element {:id :images :title "Images"}
|
||||
[:p "IMAGES TAB"]]]]]))
|
||||
[:& tab-container {}
|
||||
[:& tab-element {:id :icons :title "Icons"} [:& library-tab]]
|
||||
[:& tab-element {:id :images :title "Images"} [:& images-tab]]]]]))
|
||||
|
|
|
|||
|
|
@ -205,3 +205,4 @@
|
|||
;; (if (::some-interrupt (ex-data e#))
|
||||
;; nil
|
||||
;; (throw e#)))))))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue