Define ListItem's divider color
Closed this issue · 13 comments
I'm actually not sure whether this is a bug in the UITK or in the System Settings application, so please feel free to move this bug accordingly.
I noticed while playing with the SystemSettings, that a few of the ListItems defined there explicitly set the divider color to a hardcoded value of #eeeeee. My guess is that this is done because the SystemSettings uses a combination of old and new ListItems, and this hack is needed in order to obtain the same color as the old ListItems when using the new ListItem.
So, either the color for the new ListItem divider is wrong (too dark) and needs to be changed to #eeeeee, or we should remove all overrides from the SystemSettings and completely port it to use exclusively the new ListItem (the latter is a good idea in any case).
@cibersheep, would you be interest in looking into this?
Thanks for pinging me. I was trying to untangle what we are going to call the «DividerColorGate» :)
The Dividers look good mostly on Ambiance but not on SuruDark (except for the ones in the indicators). I would like to go through all of them. As you point #eeeeee is not in the palette since 1.3
My suggestion is try to make them look theme.palette.normal.base
I'll take a look in the next days
Ok, looks like ListItems is using an image for the divider and a gradient for the thindivider.
We should start moving old the ListItems to ListItem. How we do this? Do you want to take care, split, I take care?
Ok, looks like ListItems is using an image for the divider and a gradient for the thindivider.
Are you sure? I think it only has a thin divider. At the moment it's set as the base of the theme color, which seems to match your suggestion: https://github.com/ubports/ubuntu-ui-toolkit/blob/xenial/src/UbuntuToolkit/uclistitem.cpp#L96
We should start moving old the ListItems to ListItem. How we do this? Do you want to take care, split, I take care?
I have my working environment set up to work on the System Settings, so it makes sense if I do the porting to the new ListItems there. I'll remove all the hardcoded colors from the dividers, while at it. If there are changes to be done to the palette or to the ListItem itself in the UITK, I'd leave them to you, if you don't mind.
Ok, looks like ListItems is using an image for the divider and a gradient for the thindivider.
Are you sure? I think it only has a thin divider. At the moment it's set as the
baseof the theme color, which seems to match your suggestion: https://github.com/ubports/ubuntu-ui-toolkit/blob/xenial/src/UbuntuToolkit/uclistitem.cpp#L96
Not sure at all :)
But isn't that link for the ListItem?
These are the files I was referring to (from the old ListItemS):
We should start moving old the ListItems to ListItem. How we do this? Do you want to take care, split, I take care?
I have my working environment set up to work on the System Settings, so it makes sense if I do the porting to the new ListItems there. I'll remove all the hardcoded colors from the dividers, while at it. If there are changes to be done to the palette or to the ListItem itself in the UITK, I'd leave them to you, if you don't mind.
Perfect. Removing the harcoded color will improve the look in SuruDark.
Tell me if you need me to do something.
Tell me if you need me to do something.
Maybe you can help me with deciding what to do about dividers: I started working on the System Settings, and I realized that indeed, as you wrote, there also exist one type of divider (ListItem.Divider) which is an image. We don't have any equivalent component in the new UITK, so we need to decide what to do:
A. We decide that all instances of ListItem.Divider need just to be removed, with no replacement;
B. We undeprecate the ListItem.Divider item
C. We create a new Divider item, which effectively behaves like the old ListItem.Divider (with an image)
D. We create a new Divider item, which tries to look as the old ListItem.Divider, but which uses the proper theme color
D looks like the best option, but it might take time. Maybe the best option to be able to quickly move forward is C, and we move to a better implementation of the new Divider as time permits?
Yep, let's avoid the use of images when we can. I'm fan of the theme, so D.
What do you need a divider for? For the top of the ListView?
I can get one ready if you need it
Yep, let's avoid the use of images when we can. I'm fan of the theme, so D.
What do you need a divider for? For the top of the ListView?
See the About page in the System Settings: there's one divider between the "Bluetooth address" and the "Storage" items; also, under "Developer Mode", one divider right below the switch.
I can get one ready if you need it
The divider image is this semi-transparent PNG file; it seems to me that the same effect should be very easy to obtain by using a Rectangle item, which could be configured with a colour defined by the theme.
Are you confident enough with QML to develop such an item, or do you prefer me to do it?
I did two options:
- Divider, with two rectangles (shadow and line)
- DividerGradient, with one rectangle and grandients (according to the qt doc, gradient are not so performant)
Per order: ListItems.Divider (top), Divider and DividerGradient
Is that the thick divider?
ah, yeah. those are strange dividers. (and they disappear in dark mode)I think we might need them in some places - but I think many can be removed in favor of SettingsItemTitle headers.
If you use two regular dividers, with the them foreground color I think it will look nearly the same, and work in dark mode.
Here is a picture of what I'm going for with the SettingsItemTitle headers
@mateosalta right, indeed we could replace them with titles. Such a component would probably be more useful than just a divider (and probably that's the reason why it got deprecated).
I'm not 100% sure I'm sold on how your titles look like, though: they remind me the ListItem.MultiSelector a bit :-)
cool, if they are too dark, I could try it a bit lighter. Mostly I was placing a background to the existing titles, and a bit of spacing tweak.
Inspiration also from uttweak tool, and one of the design sketches
I agree that the Divider is a leftover from the old system more in the style of the old Header
Shadow headers look like the one in UTTT :)