mirror of
https://github.com/penpot/penpot.git
synced 2025-04-09 13:31:23 -05:00
✨ Improve usability of assets tab on search
Automatically uncollapse assets groups when a total searched results is less than a threshold of 60 (current default)
This commit is contained in:
Andrey Antukh
parent
9804bd88c2
commit
e278d042ea
5 changed files with 56 additions and 20 deletions
frontend/src/app/main/ui/workspace/sidebar/assets
|
|
@ -303,11 +303,12 @@
|
|||
[:div.dragging])])))
|
||||
|
||||
(mf/defc colors-group
|
||||
[{:keys [file-id prefix groups open-groups local? selected
|
||||
[{:keys [file-id prefix groups open-groups force-open? local? selected
|
||||
multi-colors? multi-assets? on-asset-click on-assets-delete
|
||||
on-clear-selection on-group on-rename-group on-ungroup colors
|
||||
selected-full]}]
|
||||
(let [group-open? (get open-groups prefix true)
|
||||
(let [group-open? (or ^boolean force-open?
|
||||
^boolean (get open-groups prefix (if (= prefix "") true false)))
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
dragging* (mf/use-state false)
|
||||
dragging? (deref dragging*)
|
||||
|
|
@ -391,6 +392,7 @@
|
|||
:key (dm/str "group-" path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:local? local?
|
||||
:selected selected
|
||||
:multi-colors? multi-colors?
|
||||
|
|
@ -454,6 +456,7 @@
|
|||
:key (dm/str "group-" path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:local? local?
|
||||
:selected selected
|
||||
:multi-colors? multi-colors?
|
||||
|
|
@ -468,7 +471,7 @@
|
|||
:selected-full selected-full}]))])])))
|
||||
|
||||
(mf/defc colors-section
|
||||
[{:keys [file-id local? colors open? open-status-ref selected reverse-sort?
|
||||
[{:keys [file-id local? colors open? force-open? open-status-ref selected reverse-sort?
|
||||
on-asset-click on-assets-delete on-clear-selection] :as props}]
|
||||
|
||||
(let [selected (:colors selected)
|
||||
|
|
@ -607,6 +610,7 @@
|
|||
:prefix ""
|
||||
:groups groups
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:local? local?
|
||||
:selected selected
|
||||
:multi-colors? multi-colors?
|
||||
|
|
|
|||
|
|
@ -202,11 +202,12 @@
|
|||
|
||||
(mf/defc components-group
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file-id prefix groups open-groups renaming listing-thumbs? selected on-asset-click
|
||||
[{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected on-asset-click
|
||||
on-drag-start do-rename cancel-rename on-rename-group on-group on-ungroup on-context-menu
|
||||
selected-full]}]
|
||||
|
||||
(let [group-open? (get open-groups prefix (if (= prefix "") true false))
|
||||
(let [group-open? (or ^boolean force-open?
|
||||
^boolean (get open-groups prefix (if (= prefix "") true false)))
|
||||
new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
dragging* (mf/use-state false)
|
||||
dragging? (deref dragging*)
|
||||
|
|
@ -295,6 +296,7 @@
|
|||
:prefix (cph/merge-path-item prefix path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:renaming renaming
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:selected selected
|
||||
|
|
@ -368,6 +370,7 @@
|
|||
:prefix (cph/merge-path-item prefix path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:renaming renaming
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:selected selected
|
||||
|
|
@ -382,8 +385,9 @@
|
|||
|
||||
(mf/defc components-section
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file-id local? components listing-thumbs? open? reverse-sort? selected
|
||||
on-asset-click on-assets-delete on-clear-selection open-status-ref]}]
|
||||
[{:keys [file-id local? components listing-thumbs? open? force-open?
|
||||
reverse-sort? selected on-asset-click on-assets-delete
|
||||
on-clear-selection open-status-ref]}]
|
||||
|
||||
(let [input-ref (mf/use-ref nil)
|
||||
|
||||
|
|
@ -607,6 +611,7 @@
|
|||
:prefix ""
|
||||
:groups groups
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:renaming (when ^boolean renaming? current-component-id)
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:selected selected
|
||||
|
|
|
|||
|
|
@ -149,7 +149,6 @@
|
|||
(or (pos? (count typographies))
|
||||
(str/empty? filters-term)))
|
||||
|
||||
|
||||
selected-lens (mf/with-memo [file-id]
|
||||
(-> (l/key file-id)
|
||||
(l/derived lens:selected)))
|
||||
|
|
@ -160,6 +159,12 @@
|
|||
(count (get selected :colors))
|
||||
(count (get selected :typographies)))
|
||||
|
||||
has-term? (not ^boolean (str/empty? filters-term))
|
||||
force-open-components? (when ^boolean has-term? (> 60 (count components)))
|
||||
force-open-colors? (when ^boolean has-term? (> 60 (count colors)))
|
||||
force-open-graphics? (when ^boolean has-term? (> 60 (count media)))
|
||||
force-open-typographies? (when ^boolean has-term? (> 60 (count typographies)))
|
||||
|
||||
extend-selected
|
||||
(fn [type asset-groups asset-id]
|
||||
(letfn [(flatten-groups [groups]
|
||||
|
|
@ -248,7 +253,9 @@
|
|||
:local? local?
|
||||
:components components
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:open? (get open-status :components false)
|
||||
:open? (or ^boolean force-open-components?
|
||||
^boolean (get open-status :components false))
|
||||
:force-open? force-open-components?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
@ -263,7 +270,9 @@
|
|||
:local? local?
|
||||
:objects media
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:open? (get open-status :graphics false)
|
||||
:open? (or ^boolean force-open-graphics?
|
||||
^boolean (get open-status :graphics false))
|
||||
:force-open? force-open-graphics?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
@ -276,7 +285,9 @@
|
|||
{:file-id file-id
|
||||
:local? local?
|
||||
:colors colors
|
||||
:open? (get open-status :colors false)
|
||||
:open? (or ^boolean force-open-colors?
|
||||
^boolean (get open-status :colors false))
|
||||
:force-open? force-open-colors?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
@ -290,7 +301,9 @@
|
|||
:file-id (:id file)
|
||||
:local? local?
|
||||
:typographies typographies
|
||||
:open? (get open-status :typographies false)
|
||||
:open? (or ^boolean force-open-typographies?
|
||||
^boolean (get open-status :typographies false))
|
||||
:force-open? force-open-typographies?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
@ -327,7 +340,9 @@
|
|||
:local? local?
|
||||
:components components
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:open? (get open-status :components false)
|
||||
:open? (or ^boolean force-open-components?
|
||||
^boolean (get open-status :components false))
|
||||
:force-open? force-open-components?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
@ -342,7 +357,9 @@
|
|||
:local? local?
|
||||
:objects media
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:open? (get open-status :graphics false)
|
||||
:open? (or ^boolean force-open-graphics?
|
||||
^boolean (get open-status :graphics false))
|
||||
:force-open? force-open-graphics?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
@ -355,7 +372,9 @@
|
|||
{:file-id file-id
|
||||
:local? local?
|
||||
:colors colors
|
||||
:open? (get open-status :colors false)
|
||||
:open? (or ^boolean force-open-colors?
|
||||
^boolean (get open-status :colors false))
|
||||
:force-open? force-open-colors?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
@ -369,7 +388,9 @@
|
|||
:file-id (:id file)
|
||||
:local? local?
|
||||
:typographies typographies
|
||||
:open? (get open-status :typographies false)
|
||||
:open? (or ^boolean force-open-typographies?
|
||||
^boolean (get open-status :typographies false))
|
||||
:force-open? force-open-typographies?
|
||||
:open-status-ref open-status-ref
|
||||
:reverse-sort? reverse-sort?
|
||||
:selected selected
|
||||
|
|
|
|||
|
|
@ -161,7 +161,7 @@
|
|||
[:div.dragging])])])])))
|
||||
|
||||
(mf/defc graphics-group
|
||||
[{:keys [file-id prefix groups open-groups renaming listing-thumbs? selected-objects on-asset-click
|
||||
[{:keys [file-id prefix groups open-groups force-open? renaming listing-thumbs? selected-objects on-asset-click
|
||||
on-drag-start do-rename cancel-rename on-rename-group on-ungroup
|
||||
on-context-menu selected-full]}]
|
||||
(let [group-open? (get open-groups prefix true)
|
||||
|
|
@ -249,6 +249,7 @@
|
|||
:prefix (cph/merge-path-item prefix path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:renaming renaming
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:selected-objects selected-objects
|
||||
|
|
@ -315,6 +316,7 @@
|
|||
:prefix (cph/merge-path-item prefix path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:renaming renaming
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:selected-objects selected-objects
|
||||
|
|
@ -330,7 +332,7 @@
|
|||
|
||||
(mf/defc graphics-section
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file-id project-id local? objects listing-thumbs? open? open-status-ref selected reverse-sort?
|
||||
[{:keys [file-id project-id local? objects listing-thumbs? open? force-open? open-status-ref selected reverse-sort?
|
||||
on-asset-click on-assets-delete on-clear-selection]}]
|
||||
(let [input-ref (mf/use-ref nil)
|
||||
state (mf/use-state {:renaming nil :object-id nil})
|
||||
|
|
@ -518,6 +520,7 @@
|
|||
:prefix ""
|
||||
:groups groups
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:renaming (:renaming @state)
|
||||
:listing-thumbs? listing-thumbs?
|
||||
:selected selected
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@
|
|||
|
||||
(mf/defc typographies-group
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file-id prefix groups open-groups file local? selected local-data
|
||||
[{:keys [file-id prefix groups open-groups force-open? file local? selected local-data
|
||||
editing-id renaming-id on-asset-click handle-change apply-typography on-rename-group
|
||||
on-ungroup on-context-menu selected-full]}]
|
||||
(let [group-open? (get open-groups prefix true)
|
||||
|
|
@ -236,6 +236,7 @@
|
|||
:key (dm/str "group-" path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:file file
|
||||
:local? local?
|
||||
:selected selected
|
||||
|
|
@ -297,6 +298,7 @@
|
|||
:key (dm/str "group-" path-item)
|
||||
:groups content
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:file file
|
||||
:local? local?
|
||||
:selected selected
|
||||
|
|
@ -312,7 +314,7 @@
|
|||
|
||||
(mf/defc typographies-section
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [file file-id local? typographies open? open-status-ref selected reverse-sort?
|
||||
[{:keys [file file-id local? typographies open? force-open? open-status-ref selected reverse-sort?
|
||||
on-asset-click on-assets-delete on-clear-selection]}]
|
||||
(let [state (mf/use-state {:detail-open? false :id nil})
|
||||
local-data (mf/deref lens:typography-section-state)
|
||||
|
|
@ -506,6 +508,7 @@
|
|||
:prefix ""
|
||||
:groups groups
|
||||
:open-groups open-groups
|
||||
:force-open? force-open?
|
||||
:state state
|
||||
:file file
|
||||
:local? local?
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue