Bug 393318 - Request: better, more universal "sort options" icon
Summary: Request: better, more universal "sort options" icon
Status: RESOLVED FIXED
Alias: None
Product: Breeze
Classification: Unclassified
Component: Icons (show other bugs)
Version: 5.11.2
Platform: Other Linux
: NOR normal
Target Milestone: ---
Assignee: visual-design
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-04-20 02:18 UTC by Nate Graham
Modified: 2018-11-18 02:42 UTC (History)
4 users (show)

See Also:
Latest Commit:
Version Fixed In: 5.53


Attachments
datasort (5.89 KB, image/png)
2018-05-08 20:39 UTC, andreas
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Nate Graham 2018-04-20 02:18:41 UTC
Right now we don't have a good universal icon that connotes "sorting options are here!" All of our existing sorting-related icons imply a sort order and a direction, and are not appropriate for communicating the idea of sorting in general.
Comment 1 Nate Graham 2018-04-20 02:21:39 UTC
This need came up in https://phabricator.kde.org/D12337. The best icon I could find was the proposed sorting menu was "itemize", but even that didn't really do it.
Comment 2 Nate Graham 2018-04-20 02:24:15 UTC
BTW other apps that have recently had a need for this icon include Discover and Elisa.
Comment 3 null 2018-04-20 08:50:47 UTC
We probably cannot avoid some subtle reference to order or direction in the visual language of a sort icon, but I agree it has to be generic enough to not fit only for one specific type of ordering.

FWIW, https://www.materialui.co/icon/sort known from many Android apps works well for me, although for Breeze probably some adjustments to the line weight are needed.
Comment 4 Nate Graham 2018-05-02 14:03:58 UTC
Options I like:

- https://image.flaticon.com/icons/svg/159/159799.svg
- https://image.flaticon.com/icons/svg/565/565620.svg
- https://image.flaticon.com/icons/svg/219/219380.svg
- https://image.flaticon.com/icons/svg/690/690319.svg

If the icon has arrows, we need them to be pointing in both directions to avoid suggesting descending or ascending order (it has to work for either one)

I'd also like to avoid numbers or letters, as that would imply that the current sort order is alphabetical or by size or something, when, again, the icon needs to work for either one.

Basically it needs to suggest the *concept* of sorting without seeming to imply a specific sorting mode.
Comment 5 Andres Betts 2018-05-02 14:09:28 UTC
The first two options are my favorite. It is as simple as the concept gets.
Comment 6 Nate Graham 2018-05-02 21:43:10 UTC
Another idea: https://image.flaticon.com/icons/png/512/644/644070.png
I'll leave it to icon folks now.

We'd really like to get this in for Frameworks 5.47, as it's required for us to land https://phabricator.kde.org/D12337
Comment 7 andreas 2018-05-08 20:39:15 UTC
Created attachment 112516 [details]
datasort

this is what LibreOffice use for data sort
Comment 8 Nate Graham 2018-05-09 02:02:13 UTC
I slightly prefer the ones that have horizontal bars in them; I think they help suggest what's being sorted. The arrows alone are a bit ambiguous.
Comment 9 Rafael Brandmaier 2018-11-17 14:55:52 UTC
I'm working on this at https://phabricator.kde.org/D16905

I would appreciate your thoughts on this as the proposal is close to final
Comment 10 Noah Davis 2018-11-17 20:31:20 UTC
Git commit 64b3a8fa6ff713c526e2ebdc607865b8475c72a2 by Noah Davis, on behalf of Rafael Brandmaier.
Committed on 17/11/2018 at 20:31.
Pushed by ndavis into branch 'master'.

Add new generic sorting icons; rename existing sorting icons

Summary:
Add a generic sorting options icons as requested in {D12337} as well as version with ascending and descending orders.

FIXED-IN: 5.53

The existing `view-sort-ascending` and `view-sort-descending` have been renamed `view-sort-ascending-name` and `view-sort-descending-name` as they show alphabetic characters to depict alphabetic sorting. The symbolic link `sort-name` has been changed to point to `view-sort-ascending-name` (from `view-sort-ascending`).
Their fallback colors in the embedded stylesheets have been updated to use Shade Black and Cardboard White, respectively.

Test Plan:
The new icons:

| size | `view-sort` |  `view-sort-descending` |  `view-sort-ascending`
| -----  | -----  | -----   | -----
|`16px`|{F6427148}|{F6428784}|{F6428785}
|`22px` and `24px`|{F6427153}|{F6428786}|{F6428787}
|`32px`|{F6429216}|{F6429219}|{F6429218}

Reviewers: #vdg, #breeze, ndavis

Reviewed By: #vdg, ndavis

Subscribers: cfeck, emateli, ndavis, ngraham, kde-frameworks-devel

Tags: #frameworks

Differential Revision: https://phabricator.kde.org/D16905

M  +1    -1    icons-dark/actions/16/sort-name.svg
C  +1    -1    icons-dark/actions/16/view-sort-ascending-name.svg [from: icons/actions/16/view-sort-ascending.svg - 097% similarity]
M  +1    -13   icons-dark/actions/16/view-sort-ascending.svg
C  +1    -1    icons-dark/actions/16/view-sort-descending-name.svg [from: icons-dark/actions/16/view-sort-descending.svg - 098% similarity]
M  +1    -13   icons-dark/actions/16/view-sort-descending.svg
A  +1    -0    icons-dark/actions/16/view-sort.svg
M  +1    -1    icons-dark/actions/22/sort-name.svg
C  +1    -1    icons-dark/actions/22/view-sort-ascending-name.svg [from: icons-dark/actions/22/view-sort-ascending.svg - 098% similarity]
M  +1    -14   icons-dark/actions/22/view-sort-ascending.svg
C  +1    -1    icons-dark/actions/22/view-sort-descending-name.svg [from: icons/actions/22/view-sort-descending.svg - 098% similarity]
M  +1    -14   icons-dark/actions/22/view-sort-descending.svg
A  +1    -0    icons-dark/actions/22/view-sort.svg
M  +1    -1    icons-dark/actions/24/sort-name.svg
C  +1    -1    icons-dark/actions/24/view-sort-ascending-name.svg [from: icons/actions/24/view-sort-ascending.svg - 098% similarity]
M  +1    -13   icons-dark/actions/24/view-sort-ascending.svg
C  +1    -1    icons-dark/actions/24/view-sort-descending-name.svg [from: icons/actions/24/view-sort-descending.svg - 098% similarity]
M  +1    -13   icons-dark/actions/24/view-sort-descending.svg
A  +1    -0    icons-dark/actions/24/view-sort.svg
C  +1    -1    icons-dark/actions/32/view-sort-ascending-name.svg [from: icons-dark/actions/32/view-sort-ascending.svg - 098% similarity]
M  +1    -18   icons-dark/actions/32/view-sort-ascending.svg
C  +1    -1    icons-dark/actions/32/view-sort-descending-name.svg [from: icons-dark/actions/32/view-sort-descending.svg - 098% similarity]
M  +1    -18   icons-dark/actions/32/view-sort-descending.svg
A  +1    -0    icons-dark/actions/32/view-sort.svg
M  +1    -1    icons/actions/16/sort-name.svg
C  +1    -1    icons/actions/16/view-sort-ascending-name.svg [from: icons/actions/16/view-sort-ascending.svg - 097% similarity]
M  +1    -13   icons/actions/16/view-sort-ascending.svg
C  +1    -1    icons/actions/16/view-sort-descending-name.svg [from: icons-dark/actions/16/view-sort-descending.svg - 098% similarity]
M  +1    -13   icons/actions/16/view-sort-descending.svg
A  +1    -0    icons/actions/16/view-sort.svg
M  +1    -1    icons/actions/22/sort-name.svg
C  +1    -1    icons/actions/22/view-sort-ascending-name.svg [from: icons-dark/actions/22/view-sort-ascending.svg - 098% similarity]
M  +1    -14   icons/actions/22/view-sort-ascending.svg
C  +1    -1    icons/actions/22/view-sort-descending-name.svg [from: icons/actions/22/view-sort-descending.svg - 098% similarity]
M  +1    -14   icons/actions/22/view-sort-descending.svg
A  +1    -0    icons/actions/22/view-sort.svg
M  +1    -1    icons/actions/24/sort-name.svg
C  +1    -1    icons/actions/24/view-sort-ascending-name.svg [from: icons/actions/24/view-sort-ascending.svg - 098% similarity]
M  +1    -13   icons/actions/24/view-sort-ascending.svg
C  +1    -1    icons/actions/24/view-sort-descending-name.svg [from: icons/actions/24/view-sort-descending.svg - 098% similarity]
M  +1    -13   icons/actions/24/view-sort-descending.svg
A  +1    -0    icons/actions/24/view-sort.svg
C  +1    -1    icons/actions/32/view-sort-ascending-name.svg [from: icons-dark/actions/32/view-sort-ascending.svg - 098% similarity]
M  +1    -18   icons/actions/32/view-sort-ascending.svg
C  +1    -1    icons/actions/32/view-sort-descending-name.svg [from: icons-dark/actions/32/view-sort-descending.svg - 098% similarity]
M  +1    -18   icons/actions/32/view-sort-descending.svg
A  +1    -0    icons/actions/32/view-sort.svg

https://commits.kde.org/breeze-icons/64b3a8fa6ff713c526e2ebdc607865b8475c72a2
Comment 11 Nate Graham 2018-11-18 02:42:38 UTC
Woohoo!