system: distill service widget essence based on #9608#10178
system: distill service widget essence based on #9608#10178
Conversation
| <button data-service_action="${action}" data-service="${id}" | ||
| class="btn btn-xs btn-default srv_status_act2" | ||
| style="font-size: 10px; padding: 2px 6px;" | ||
| <span data-service_action="${action}" data-service="${id}" |
There was a problem hiding this comment.
one could argue cursor: pointer here
| <span data-service_action="${action}" data-service="${id}" | ||
| class="srv_status_act2" | ||
| title="${title}" data-toggle="tooltip"> | ||
| <i class="fa fa-fw fa-${icon}"></i> |
There was a problem hiding this comment.
The icons seem a bit transparent / lower in opacity / muted to me, or is this an optical illusion?
There was a problem hiding this comment.
after fighting button styles this was a happy little accident removing the button, but we can improve visibility further I think
There was a problem hiding this comment.
I for one will not stand in the way of Bob Rossin' the UI.
There was a problem hiding this comment.
A happy tree is all that is missing.
|
|
||
| getMarkup() { | ||
| return $(`<div id="services-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 5px; gap: 5px;"></div>`); | ||
| return $(`<div id="services-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 1px; gap: 1px;"></div>`); |
There was a problem hiding this comment.
My review is solely visual.
I think it is a bit foreign to the opnsense design language and also makes it more difficult to read the services due to being crammed together.
But my eyes don't like this shade of green at larger dosages, so this might be part of the problem :)
There was a problem hiding this comment.
but if one is stopped it sticks out really well.. I still have to see if another color makes more sense and pinning it for all themes instead of trying to softcode the bootgrid defaults.. I theory the background color should be lighter but I don't think we've followed it as closely with out theming, see https://getbootstrap.com/docs/4.0/components/alerts/
as far as scaling and grid goes these are the previous defaults but I've made the font bigger again. I don't like it being smashed as much horizontally but it simply needs more tweaking.
There was a problem hiding this comment.
The original has more vertical space and horizontally is night and day.
I believe the correct green would actually be darker and not lighter.
OPNsense orange is dark, and the interfaces/ traffic/ firewall graphs use very dark/bold colors, this and lighter greens feel washed up here.
Also, I still believe this feels more opnsense and not because I did it :)
5 services become 9
There was a problem hiding this comment.
I'd generally not lean too much into red and green color coding, and more into distinct icons, as there are a lot of visually impairments regarding red green or similiar shapes.
As reference I had to clean up this:
#9704
And affected users will always report quickly.
|
Just a different idea, how about sorting services by state (stopped, then started) first, and afterwards alphabetically. I do it in a few widgets to quickly show connected clients first (e.g. wireguard, ipsec, openvpn, etc...) or the certificate widget (expired show first). That way saving space isn't too important, stopped services will always migrate to the first spots in the view. |
I think in this instance predictability wins as users may be used to a particular ordering. Having elements jump around serves no particular purpose IMO. |
That makes sense, its just a personal preference of mine to see the most important things first in the list. Others might have different preferences. It's why GUI related things are always hard to distill to one size fits all. I guess what I want could be destilled into a new sort of widget that is a meta status of all things that are currently not okay and displays them in a list or something. "Show me everything that is currently degraded" -> though scope creep would immediately kill such a "god" widget. |
|
I’m all for not falling in the Material Design trap, one of the poorest design choices implemented at scale in what can only be described as anti-consumer move (almost white text over a white background model is what I’m referring to, with all the possible variations). It already looks like the green background status idea with slightly darker green controls has been tossed but I felt necessary to comment about the similarity with Material Design. One last thing I want to add is that for consistency I’d would evaluate color changes not only on how good they look on the white theme but on the dark one as well |
5 participants
Important notices
Before you submit a pull request, we ask you kindly to acknowledge the following:
Describe the problem
See ticket.
Describe the proposed solution
Less wasted space, move process status to background color.
Related issue
#7887