Improved labels display and editing

[iBelieve]

Problems:

• Label colors are hard to read on the background

Solution:

• Display small UbuntuShape with color and have regular colored label

[krnekhelesh]

I have started working on this. Here is a screenshot of my progress https://imgur.com/pNfdmSG. I have one issue which I need your thoughts on. At the moment I set the label color to white and the ubuntushape color to the label color defined by the user. However labels can be white in which case you will have white text on white (or light) background. Is there a way to detect light and dark background?

Is the placement of the ubuntushape + label look good? I was thinking of removing the listitem.standard that they are placed in.

[iBelieve]

I'm not sure if there is a way to do calculate a good label color based on the color of the UbuntuShape. What about having the UbuntuShape separate from the label, like I had done for Tasks last year? http://i.imgur.com/Zo74MZZ.png

What would be the benefit or reason from removing the list items they are in?

Also, the same changes will need to be made to the label edit sheet.

[krnekhelesh]

If I implement something like http://i.imgur.com/Zo74MZZ.png, it doesn't solve the issue of the label text not being visible clearly on a white background.

Well my reasoning for removing the list items was to use the QML Grid which will automatically put the ubuntushape labels in rows and columns according to the space available.

[iBelieve]

I like the idea of having the Grid. Let's go with that and have the UbuntuShape be behind the label, as in your original screenshot.

For choosing a good color, you could try the method described here: http://stackoverflow.com/a/1855903/1917313

But instead of using just white or black, you can use the light and dark colors defined in Theme (light is Theme.palette.normal.baseText, dark is Theme.palette.normal.overlayText)

[krnekhelesh]

How does this look? https://imgur.com/Ze9U45M

Some rationale behind the implementation: Each delegate in a grid should have the same dimension, otherwise it does not clip or align properly. For instance if one were to have dynamic width based on the label, then it could look like http://qt-project.org/doc/qt-5/images/gridLayout_aligntop.png where there are unnecessary gaps between them.

Do you like them? If yes, then I can start cleaning the code and propose a pull request

[iBelieve]

How do you think a flow layout would look, using the Flow component and each item the minimum width?

If you think the grid is better, it would be nice to have the margins on the left and right the same.

Also, there should probably be a ThinDivider above the "Edit" item

[krnekhelesh]

Wow I did not know about the Flow component. On testing, it is the tool I was looking for ;).. Here is another screenshot https://imgur.com/Ahi9DOk. I need to check some edge cases like if the label is wider than the sidebar width and so on. But I think I am almost done.

[iBelieve]

That looks super nice, thanks for your work on this!

[iBelieve]

For some reason GitHub didn't close this automatically.