3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-14 16:42:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improves assets sidebar scroll

Browse source
This commit is contained in:
alonso.torres 2020-09-14 12:37:52 +02:00 • committed by Andrey Antukh
parent 4f7603a0a4
commit a3419312d7
3 changed files with 98 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

31
frontend/resources/styles/main/partials/sidebar-assets.scss
View file

@ -8,6 +8,8 @@
.assets-bar { .assets-bar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
height: 100%;
.assets-bar-title { .assets-bar-title {
color: $color-gray-10; color: $color-gray-10;
@ -125,11 +127,25 @@
// overflow-y: scroll; // overflow-y: scroll;
.group-title { .group-title {
display: flex; display: flex;
cursor: pointer;
& span { & .num-assets {
color: $color-gray-30; color: $color-gray-30;
} }
& svg {
height: 8px;
width: 8px;
fill: $color-gray-30;
margin-right: 4px;
transform: rotate(90deg);
}
&.closed svg {
transform: rotate(0deg);
transition: transform 0.3s;
}
} }
.group-button { .group-button {
@ -141,6 +157,10 @@
height: 0.7rem; height: 0.7rem;
fill: #F0F0F0; fill: #F0F0F0;
} }
&:hover svg {
fill: $color-primary;
}
} }
.group-grid { .group-grid {
@ -279,3 +299,10 @@
font-weight: normal; font-weight: normal;
} }
.libraries-wrapper {
overflow: auto;
display: flex;
flex-direction: column;
flex: 1;
}

7
frontend/resources/styles/main/partials/sidebar.scss
View file

@ -134,11 +134,12 @@ $width-settings-bar: 15rem;
} }
} }
} }
}
.assets-bar .tool-window {
flex: none;
height: auto;
} }
} }
} }

115
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -39,7 +39,7 @@
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
(mf/defc graphics-box (mf/defc graphics-box
[{:keys [file-id local? objects] :as props}] [{:keys [file-id local? objects open? on-open on-close] :as props}]
(let [input-ref (mf/use-ref nil) (let [input-ref (mf/use-ref nil)
state (mf/use-state {:menu-open false state (mf/use-state {:menu-open false
:top nil :top nil
@ -48,7 +48,9 @@
add-graphic add-graphic
(mf/use-callback (mf/use-callback
(fn [] (dom/click (mf/ref-val input-ref)))) (fn []
(on-open)
(dom/click (mf/ref-val input-ref))))
on-media-uploaded on-media-uploaded
(mf/use-callback (mf/use-callback
@ -94,9 +96,9 @@
(dnd/set-allowed-effect! event "move")))] (dnd/set-allowed-effect! event "move")))]
[:div.asset-group [:div.asset-group
[:div.group-title [:div.group-title {:class (when (not open?) "closed")}
(tr "workspace.assets.graphics") [:span {:on-click #(if open? (on-close) (on-open))} i/arrow-slide (tr "workspace.assets.graphics")]
[:span (str "\u00A0(") (count objects) ")"] ;; Unicode 00A0 is non-breaking space [:span.num-assets (str "\u00A0(") (count objects) ")"] ;; Unicode 00A0 is non-breaking space
(when local? (when local?
[:div.group-button {:on-click add-graphic} [:div.group-button {:on-click add-graphic}
i/plus i/plus
@ -104,24 +106,25 @@
:multi true :multi true
:input-ref input-ref :input-ref input-ref
:on-selected on-selected}]])] :on-selected on-selected}]])]
[:div.group-grid (when open?
(for [object objects] [:div.group-grid
[:div.grid-cell {:key (:id object) (for [object objects]
:draggable true [:div.grid-cell {:key (:id object)
:on-context-menu (on-context-menu (:id object)) :draggable true
:on-drag-start (partial on-drag-start (:path object))} :on-context-menu (on-context-menu (:id object))
[:img {:src (cfg/resolve-media-path (:thumb-path object)) :on-drag-start (partial on-drag-start (:path object))}
:draggable false}] ;; Also need to add css pointer-events: none [:img {:src (cfg/resolve-media-path (:thumb-path object))
[:div.cell-name (:name object)]]) :draggable false}] ;; Also need to add css pointer-events: none
[:div.cell-name (:name object)]])
(when local? (when local?
[:& context-menu [:& context-menu
{:selectable false {:selectable false
:show (:menu-open @state) :show (:menu-open @state)
:on-close #(swap! state assoc :menu-open false) :on-close #(swap! state assoc :menu-open false)
:top (:top @state) :top (:top @state)
:left (:left @state) :left (:left @state)
:options [[(tr "workspace.assets.delete") on-delete]]}])]])) :options [[(tr "workspace.assets.delete") on-delete]]}])])]))
(mf/defc color-item (mf/defc color-item
@ -231,7 +234,7 @@
[(t locale "workspace.assets.delete") delete-color]]}])])) [(t locale "workspace.assets.delete") delete-color]]}])]))
(mf/defc colors-box (mf/defc colors-box
[{:keys [file-id local? colors locale] :as props}] [{:keys [file-id local? colors locale open? on-open on-close] :as props}]
(let [add-color (let [add-color
(mf/use-callback (mf/use-callback
(mf/deps file-id) (mf/deps file-id)
@ -242,6 +245,7 @@
(mf/use-callback (mf/use-callback
(mf/deps file-id) (mf/deps file-id)
(fn [event] (fn [event]
(on-open)
(modal/show! :colorpicker (modal/show! :colorpicker
{:x (.-clientX event) {:x (.-clientX event)
:y (.-clientY event) :y (.-clientY event)
@ -250,18 +254,19 @@
:disable-opacity true :disable-opacity true
:position :right})))] :position :right})))]
[:div.asset-group [:div.asset-group
[:div.group-title [:div.group-title {:class (when (not open?) "closed")}
(t locale "workspace.assets.colors") [:span {:on-click #(if open? (on-close) (on-open))} i/arrow-slide (t locale "workspace.assets.colors")]
[:span (str "\u00A0(") (count colors) ")"] ;; Unicode 00A0 is non-breaking space [:span.num-assets (str "\u00A0(") (count colors) ")"] ;; Unicode 00A0 is non-breaking space
(when local? (when local?
[:div.group-button {:on-click add-color-clicked} i/plus])] [:div.group-button {:on-click add-color-clicked} i/plus])]
[:div.group-list (when open?
(for [color colors] [:div.group-list
[:& color-item {:key (:id color) (for [color colors]
:color color [:& color-item {:key (:id color)
:file-id file-id :color color
:local? local? :file-id file-id
:locale locale}])]])) :local? local?
:locale locale}])])]))
(defn file-colors-ref (defn file-colors-ref
[id] [id]
@ -296,6 +301,8 @@
router (mf/deref refs/router) router (mf/deref refs/router)
toggle-open #(swap! open? not) toggle-open #(swap! open? not)
toggles (mf/use-state #{:graphics :colors})
url (rt/resolve router :workspace url (rt/resolve router :workspace
{:project-id (:project-id file) {:project-id (:project-id file)
:file-id (:id file)} :file-id (:id file)}
@ -306,6 +313,7 @@
media-ref (mf/use-memo (mf/deps (:id file)) #(file-media-ref (:id file))) media-ref (mf/use-memo (mf/deps (:id file)) #(file-media-ref (:id file)))
media (apply-filters (mf/deref media-ref) filters)] media (apply-filters (mf/deref media-ref) filters)]
[:div.tool-window [:div.tool-window
[:div.tool-window-bar [:div.tool-window-bar
[:div.collapse-library [:div.collapse-library
@ -336,12 +344,18 @@
(when show-graphics? (when show-graphics?
[:& graphics-box {:file-id (:id file) [:& graphics-box {:file-id (:id file)
:local? local? :local? local?
:objects media}]) :objects media
:open? (contains? @toggles :graphics)
:on-open #(swap! toggles conj :graphics)
:on-close #(swap! toggles disj :graphics)}])
(when show-colors? (when show-colors?
[:& colors-box {:file-id (:id file) [:& colors-box {:file-id (:id file)
:local? local? :local? local?
:locale locale :locale locale
:colors colors}]) :colors colors
:open? (contains? @toggles :colors)
:on-open #(swap! toggles conj :colors)
:on-close #(swap! toggles disj :colors)}])
(when (and (not show-graphics?) (not show-colors?)) (when (and (not show-graphics?) (not show-colors?))
[:div.asset-group [:div.asset-group
@ -404,20 +418,21 @@
[:option {:value ":graphics"} (t locale "workspace.assets.box-filter-graphics")] [:option {:value ":graphics"} (t locale "workspace.assets.box-filter-graphics")]
[:option {:value ":colors"} (t locale "workspace.assets.box-filter-colors")]]]] [:option {:value ":colors"} (t locale "workspace.assets.box-filter-colors")]]]]
[:& file-library [:div.libraries-wrapper
{:file file [:& file-library
:locale locale {:file file
:local? true :locale locale
:open? true :local? true
:filters @filters}] :open? true
:filters @filters}]
(for [file (->> (vals libraries) (for [file (->> (vals libraries)
(sort-by #(str/lower (:name %))))] (sort-by #(str/lower (:name %))))]
[:& file-library [:& file-library
{:key (:id file) {:key (:id file)
:file file :file file
:local? false :local? false
:locale locale :locale locale
:open? false :open? false
:filters @filters}])])) :filters @filters}])]]))