luci-base: refactoring overlay for connectivity change

[feckert]

Before with LuCI-Theme bootstrap:

After with LuCI-Theme bootstrap:

• Each commit has a valid ✒️ Signed-off-by: <my@email.address> row (via git commit --signoff)
• Each commit and PR title has a valid 📝 <package name>: title first line subject for packages
• ( Preferred ) Mention: @ the original code author for feedback
• ( Preferred ) Screenshot or mp4 of changes:
• Description: (describe the changes proposed in this PR)

[systemcrash]

Please don’t use the words with or without. The reason for gerunds is that the distinct separate actions remain clear because there are multiple actions. With implies "together with". Other languages can have what they like.

[systemcrash]

Otherwise centered is good. Just try to retain the gerunds after "Apply" so it's clear what's about to happen. Do you want the actions after apply to read similarly or something?

[feckert]

@systemcrash
I hope I have understood your change request correctly.
This is how it would look now.

[systemcrash]

"Apply, changes now" is odd. Two verbs, or noun verb? The other button is okay, though unreachable alone is tenuous. That button is the first time the GUI is mentioned, and it's not normally obvious that system and GUI are supposed to be client server (and thus distinct and separate).

[systemcrash]

Keep gerunds after Apply.

[jow-]

"Apply changes now" is not entirely correct. Changes are still applied in a delayed manner, the difference is whether they'll get rolled back or not if the browser does not interact with LuCI within the next 90 seconds. Can't suggest something suitable now but the verb should not refer to the "timing" of the change application but to the "stickiness" (for lack of a better word).

[systemcrash]

Yes. So "Apply, committing..." or "Apply, reverting..." pattern encompasses this distinction @jow- mentions.

[jow-]

In the generic uci dialog we're using "Apply unchecked" as button label. Would that work?

[feckert]

@systemcrash
The wording commiting doesn't seem to fit either, see @castillofrancodamian objection from yesterday.
a6f8361#r142789901

In the generic uci dialog we're using "Apply unchecked" as button label. Would that work?

@jow- I like that.

[systemcrash]

Verb + adverb (apply immediately), Verb + adjectival phrase (apply unchecked), verb + gerund (apply, doing x) all work, just a bit differently. Unchecked creates an expectation that all settings actually get checked somehow in another path, in this case the "checked" path. This construction focuses on the first action to the detriment of the successive one. (The gerund construction handles the second one.)

[systemcrash]

"Simplify as much as possible, but not further" 😅

[jow-]

Centering the buttons would make the layout for this modal different compared to any other modal. I'd prefer consistency here.

Maybe it makes sense to introduce new CSS after all, iteratively applying it to other modals too. E.g. change <div class="right"> to <div class="button-row"> and introduce the following new CSS rules:

.modal > .button-row {
  display: flex;
  justify-content: space-between;
}

.modal > .button-row > button:not(:first-of-type) {
  margin-left: .5em;
}

.modal > .button-row > button:last-of-type {
  margin-left: auto;
}

Then reorder the buttons so that Cancel comes last. The CSS rules are generic enough that it should be possible to copy-paste them into every theme. On my device (after dragging the cancel button to the end of the containing div in the inspector), the result looks like this (I didn't change any texts yet):

For the sake of consistency I'd prefer if we always put the "no action, abort" button to the lower right corner and the "do something" one(s) to the lower left.

[feckert]

Here are a few suggestions.





Or right-aligned:

[jow-]

Actually I had it backwards, "no action, cancel" should be the lower left and "do something" the lower right corner. Pressing Esc in an open modal will also perform a click on the first button (which should then be the non-destructive one).

Considering this, the suggested CSS should be:

.modal .button-row {
  display: flex;
  justify-content: space-between;
}

.modal .button-row > :not(:last-child) {
  margin-right: .5em;
}

.modal .button-row > :first-child {
  margin-right: auto;
}

... with the result looking like this:

Here's some examples with the style applied to a few other dialogs:

[systemcrash]

These button titles are the closest to sane and understandable.

The "changes have been made" is not yet concrete (are they or are they not in effect?). Changes are queued up, but are not in effect yet. Thus my changes had "could inhibit" only at the start.