U4-7918 - Make icon picker for document type and list views consistent

Created by Bjarne Fyrstenborg 08 Feb 2016, 16:00:48 Updated by Warren Buckley 19 Feb 2016, 12:04:27

Is duplicated by: U4-7672

Relates to: U4-7967

The icon picker for document type and list views seems to be a bit different.

Also see this pull request to ensure each line of icons float all to the left andd optimize the filtering when using many icons (e.g. when you have installed Belle Icon Pack or Material Design Icon Pack). https://github.com/umbraco/Umbraco-CMS/pull/1045

2 Attachments


Simon Busborg 12 Feb 2016, 09:14:52

Hi @Bjarne.Fyrstenborg – Lovely PR, I've created a temp branch where I've done it in a different way (still with the same logic as you use in your PR) https://github.com/umbraco/Umbraco-CMS/tree/temp-U4-7918

I've created a dedicated less file for the iconpicker, styled it with flexbox and added hover/active state to the list and added our empty state directive to display if the search result doesn't return any icons.

I would love if you could checkout the branch at test it to see if the logic behind it is the same as your PR.

Once again, big H5YR for the great work on all the PR's :)

Bjarne Fyrstenborg 15 Feb 2016, 20:19:22

Hi @simonbusborg ... I have checkout your branch and it looks great! :)

If resizing the height of window (or open the console window) the preloader might be on top of the form fields above or close to them. If the preloader is an overlay

maybe it could have a rgba white background color making the content behind looking disabled/inactive?

Furthermore the preloader not always seems to be animating (when preloading for less than a second) - not sure if there is something to do about it?

Not sure which version of AngularJS that Umbraco at the moment use, but from Angular 1.3 it is possible to store the filtered results in a variable/property by using an alias: http://stackoverflow.com/questions/15316363/how-to-display-length-of-filtered-ng-repeat-data

A minor thing - can we support keyboard for selecting icon? e.g. from filter input I can click tabs and it focus the color dropdown, clicking tabs once again it hightlight the first icon. It would be nice if it was possible to navigate the icons with the arrow keys and selecting by hitting enter key. .. okay I can select next icon by hitting tabs, but with many icons in the view it takes a while to focus "close" link in the dialog. Ideally maybe the focus was limited to the dialog (not sure if it is possible?) .. because after focus on "close" link it start focus the view behind, which probably not is relevant while dialog is open. So again it takes a while to focus the filter input again (although you can revert the focus with shift+tabs (not sure if editors know about this shortcut?). Some thoughts, but not the most important part :)

I noticed it is possible the save both a document type and a listview (with a new custom layout), without an icon. How to reproduce: In icon picker (filter by e.g. "car" - just to limit the icons) - the click tabs key until it reach last icon and focus "close" link in dialog (or it focus something behind the dialog in the view). Then hit enter and click save. For document type it now breaks loadings the view because of a console error:

TypeError: Cannot read property 'startsWith' of null
    at Object.isLegacyIcon (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:831)
    at Object.convertFromLegacyIcon (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:837)
    at Object.formatContentTypeIcons (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:829)
    at DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:1619
    at i (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:14)
    at DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:14
    at Object.e.$eval (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:14)
    at Object.e.$digest (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:14)
    at Object.e.$apply (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:14)
    at j (DependencyHandler.axd?s=L3VtYnJhY28vbGliL2pxdWVyeS9qcXVlcnkubWluLmpzOy91bWJyYWNvL2xpYi9hbmd1bGFyLzE…:14)

I have created a new issue for that: http://issues.umbraco.org/issue/U4-7967 For listview layouts it maybe also should be required with a Name and Layout path?

Bjarne Fyrstenborg 15 Feb 2016, 22:27:26

I also just noticed in e.g. "move" dialog for media items that when filtering it has a back-arrow icon, but no "no results" text. Maybe the icon picker can have the back-arrow icon as well and the "move"-dialog has a "no results text too?

Maybe also consider it for the main search in the header next to the sections?

Bjarne Fyrstenborg 15 Feb 2016, 22:57:06

@simonbusborg probably we can also close this issue http://issues.umbraco.org/issue/U4-7354 with these changes?

Simon Busborg 17 Feb 2016, 08:18:48

@Bjarne.Fyrstenborg I'll create a PR for https://github.com/umbraco/Umbraco-CMS/tree/temp-U4-7918 now, and get it reviewed, just to get it out of this sprint. Let's create issues for the stuff you mention in your comment, so it get split up in smaller chunks, makes it easier to fix, review and merge :)

Priority: Normal

Type: Bug

State: Fixed


Difficulty: Normal


Backwards Compatible: True

Fix Submitted:

Affected versions: 7.4.0

Due in version: 7.4.2

Sprint: Sprint 9

Story Points: