Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
U4-11168 : Making the dropdown menu more user friendly within the Document Type icon picker #2555
changed the title from
Temp u4 11168 - Making the dropdown menu more user friendly within the Document Type icon picker
U4-11168 : Making the dropdown menu more user friendly within the Document Type icon picker
Mar 31, 2018
Thanks @OwainWilliams - I understand the thought behind this but unfortunately it becomes a bit of an unreadable mess. I think it would be way better to have each color represented as a square in front of it's name, like the way Chrome does it for example:
Any chance you can look into doing that instead?
I agree it should use a different approach than changing the text color of the options.
An option could be to use the
Maybe @madsrasmussen has some input on this?
I think it is a great idea to add the colored box next to the label instead of coloring the label itself.
As far as I remember the umbDropdown component should be able to do what you are looking for. You might need to set a max-height on the drop-down element though to allow scrolling.
A few other ideas could be to list the defined colors and act like a radiobutton list http://prplv.me/ngjs-color-picker/#/ or some kind of dialog (e.g. by using the
Alternatively there is a swatch picker like this.
I think it is fine to limit the colors to some predefined colors for consistency.
I like all these three examples.
@madsrasmussen any thoughts on these examples? should we have a "swatch picker" component like this in core? Maybe to be re-useable in prevalue editors and property editors?
@OwainWilliams I haven't looked code, but your screenshots look awesome
One tiny detail I've noticed is that the rounded corners (border radius) may be a little too much compared to other components in Umbraco.
Umbraco appears to be using a border radius of 3 pixels - eg:
I'll look forward to seeing this in the core ;)
@OwainWilliams I think it would be great to create a array of objects for the colors and then use ng-repeat and ng-model
It would also be great to create it as a directive, so it could be re-used e.g. as a property editor or a prevalue editor editor, incl. in grid editor settings/styles config.
referenced this pull request
Jun 4, 2018
Yes, I think.
and I guess you could revert this change or merge this part from
@OwainWilliams Alright mate, had a bit of a look and indeed it's a bit of a mess!
Not to worry though. Let's just start over. The easiest thing for you to do now is to create a fresh clone of your fork in a different directory than your current clone. You'll end up with
Make sure to fetch the changes from the main repository, there's a few commands listed here that will help you get the latest changed from
Then you can create a new branch from
I see that in the process, you've deleted all kinds of files and updated
Note that I've recently merged a PR that affects your changes as well: #2712
Another thing I noticed in your changes is that you've collapsed some of the
We process and minify less files during the grunt build already.
I'll close this one for now. I think starting fresh with all the knowledge we have from the discussions above is going to make it very easy to implement this feature easily now by just copy/pasting the changes over!
Great work so far Owain, I tested out the changes earlier and they work wonderfully. So once you can submit a new PR, we'll be able to merge them in pretty quickly. Good times!