Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 16:18:11 -05:00
Code Issues Activity

🎉 Sort assets ascending / descending

Browse source
This commit is contained in:
Andrés Moya 2021-04-12 12:27:10 +02:00
parent 77a2fd6e36
commit 112e656f40
8 changed files with 67 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/listing-list.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<path d="M37.5 437.5v25h425v-25zM25 400a25 25 0 00-25 25v50a25 25 0 0025 25h450a25 25 0 0025-25v-50a25 25 0 00-25-25zM37.5 37.5v25h425v-25zM25 0A25 25 0 000 25v50a25 25 0 0025 25h450a25 25 0 0025-25V25a25 25 0 00-25-25zm12.5 237.5v25h425v-25zM25 200a25 25 0 00-25 25v50a25 25 0 0025 25h450a25 25 0 0025-25v-50a25 25 0 00-25-25z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 446 B

3
frontend/resources/images/icons/listing-thumbs.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<path d="M37.5 37.5v150h150v-150zM25 0A25 25 0 000 25v175a25 25 0 0025 25h175a25 25 0 0025-25V25a25 25 0 00-25-25zm287.5 37.5v150h150v-150zM300 0a25 25 0 00-25 25v175a25 25 0 0025 25h175a25 25 0 0025-25V25a25 25 0 00-25-25zm12.5 312.5v150h150v-150zM300 275a25 25 0 00-25 25v175a25 25 0 0025 25h175a25 25 0 0025-25V300a25 25 0 00-25-25zM37.5 312.5v150h150v-150zM25 275a25 25 0 00-25 25v175a25 25 0 0025 25h175a25 25 0 0025-25V300a25 25 0 00-25-25z" clip-rule="evenodd" fill-rule="evenodd"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 565 B

3
frontend/resources/images/icons/sort-ascending.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<path d="M169.748 283.25a25.007 23.438 0 0120.24 37.219L85.49 455.125h84.257a25.007 23.438 0 010 46.875H36.378a25.007 23.438 0 01-20.24-37.219l104.496-134.656H36.378a25.007 23.438 0 010-46.875zM353.133 2a25.007 23.438 0 0125.007 23.438v399.187l82.956-72.562a25.007 23.438 0 0134.143 34.25L370.204 495.688a25.007 23.438 0 01-34.143 0L211.026 386.313a25.007 23.438 0 0134.143-34.25l82.957 72.562V25.438A25.007 23.438 0 01353.133 2zm-250.07 0a25.007 23.438 0 0123.64 15.781l75.02 203.125a25.027 23.457 0 01-47.312 15.313l-11.437-31.094H63.152l-11.437 31.094A25.043 23.471 0 014.37 220.906L79.423 17.781A25.007 23.438 0 01103.063 2zm0 95.094L80.49 158.25h45.18z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 736 B

3
frontend/resources/images/icons/sort-descending.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<path d="M353.133 2a25.007 23.436 0 0125.007 23.436v399.16l82.956-72.557a25.007 23.436 0 0134.143 34.248L370.204 495.654a25.007 23.436 0 01-34.143 0L211.026 386.287a25.007 23.436 0 0134.143-34.248l82.957 72.557V25.436A25.007 23.436 0 01353.133 2zm-250.07 249.983a25.007 23.436 0 0123.64 15.78l75.02 203.112a25.027 23.455 0 11-47.312 15.311l-11.437-31.092H63.152l-11.437 31.092A25.043 23.47 0 114.37 470.875l75.054-203.112a25.007 23.436 0 0123.64-15.78zm0 95.087L80.49 408.223h45.18zM169.748 2a25.007 23.436 0 0120.24 37.216L85.49 173.863h84.257a25.007 23.436 0 110 46.872H36.378a25.007 23.436 0 01-20.24-37.216L120.635 48.872H36.378a25.007 23.436 0 010-46.872z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 739 B

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

@ -118,9 +118,27 @@
cursor: pointer;
}
.listing-options {
background-color: $color-gray-60;
display: flex;
justify-content: flex-end;
align-items: center;
padding: $medium $small 0 $small;
.listing-option-btn {
cursor: pointer;
margin-left: $small;
svg {
fill: $color-gray-20;
height: 16px;
width: 16px;
}
}
}
.asset-section {
background-color: $color-gray-60;
border-top: 1px solid $color-gray-50;
padding: $small;
font-size: $fs12;
color: $color-gray-20;
@ -130,6 +148,11 @@
// max-height: 30rem;
// overflow-y: scroll;
// First child is the listing options buttons
&:not(:nth-child(2)) {
border-top: 1px solid $color-gray-50;
}
.asset-title {
display: flex;
cursor: pointer;

2
frontend/src/app/main/data/workspace/libraries.cljs
View file

@ -193,7 +193,7 @@
ptk/WatchEvent
(watch [_ state s]
(let [rchg {:type :add-typography
:typography (assoc typography :ts (.now js/Date))}
:typography typography}
uchg {:type :del-typography
:id (:id typography)}]
(rx/of (dwc/commit-changes [rchg] [uchg] {:commit-local? true})

4
frontend/src/app/main/ui/icons.cljs
View file

@ -60,6 +60,8 @@
(def libraries (icon-xref :libraries))
(def library (icon-xref :library))
(def line (icon-xref :line))
(def listing-list (icon-xref :listing-list))
(def listing-thumbs (icon-xref :listing-thumbs))
(def line-height (icon-xref :line-height))
(def loader (icon-xref :loader))
(def lock (icon-xref :lock))
@ -117,6 +119,8 @@
(def shape-vdistribute (icon-xref :shape-vdistribute))
(def size-horiz (icon-xref :size-horiz))
(def size-vert (icon-xref :size-vert))
(def sort-ascending (icon-xref :sort-ascending))
(def sort-descending (icon-xref :sort-descending))
(def strikethrough (icon-xref :strikethrough))
(def stroke (icon-xref :stroke))
(def sublevel (icon-xref :sublevel))

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

@ -794,7 +794,7 @@
[(t locale "workspace.assets.delete") handle-delete-typography]]}]
(when open?
[:div.asset-list
(for [typography (sort-by :ts typographies)]
(for [typography typographies]
[:& typography-entry
{:key (:id typography)
:typography typography
@ -852,12 +852,13 @@
(l/derived refs/workspace-local)))
(defn apply-filters
[coll filters]
(->> coll
(filter (fn [item]
(or (matches-search (:name item "!$!") (:term filters))
(matches-search (:value item "!$!") (:term filters)))))
(sort-by #(str/lower (:name %)))))
[coll filters reverse-sort?]
(let [comp-fn (if reverse-sort? > <)]
(->> coll
(filter (fn [item]
(or (matches-search (:name item "!$!") (:term filters))
(matches-search (:value item "!$!") (:term filters)))))
(sort-by #(str/lower (:name %)) comp-fn))))
(mf/defc file-library
[{:keys [file local? default-open? filters locale] :as props}]
@ -871,6 +872,9 @@
(d/nilv true)))
shared? (:is-shared file)
router (mf/deref refs/router)
reverse-sort? (mf/use-state false)
toggle-open (st/emitf (dwl/set-assets-box-open (:id file) :library (not open?)))
url (rt/resolve router :workspace
@ -879,16 +883,21 @@
{:page-id (get-in file [:data :pages 0])})
colors-ref (mf/use-memo (mf/deps (:id file)) #(file-colors-ref (:id file)))
colors (apply-filters (mf/deref colors-ref) filters)
colors (apply-filters (mf/deref colors-ref) filters @reverse-sort?)
typography-ref (mf/use-memo (mf/deps (:id file)) #(file-typography-ref (:id file)))
typographies (apply-filters (mf/deref typography-ref) filters)
typographies (apply-filters (mf/deref typography-ref) filters @reverse-sort?)
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 @reverse-sort?)
components-ref (mf/use-memo (mf/deps (:id file)) #(file-components-ref (:id file)))
components (apply-filters (mf/deref components-ref) filters)]
components (apply-filters (mf/deref components-ref) filters @reverse-sort?)
toggle-sort
(mf/use-callback
(fn [event]
(swap! reverse-sort? not)))]
[:div.tool-window
[:div.tool-window-bar.library-bar
@ -928,6 +937,12 @@
(or (> (count typographies) 0)
(str/empty? (:term filters))))]
[:div.tool-window-content
[:div.listing-options
[:div.listing-option-btn {:on-click toggle-sort}
(if @reverse-sort?
i/sort-descending
i/sort-ascending)]
[:div.listing-option-btn i/listing-thumbs]]
(when show-components?
[:& components-box {:file-id (:id file)
:local? local?