Swap text-based on and off toggles to non-text based #4425
Conversation
|
Build succeeded.
|
|
👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍 |
| html += " class='ScheduleToggle-switch' ng-click='" + field.ngClick + "' translate>" + i18n._("OFF") + "</button></div></div>"; | ||
| html += ` | ||
| <div class="Field-header--${key} ${field['class']} ${field.columnClass}"> | ||
| <span class="awxSwitch-outer" ng-class="{'awxSwitch-on': ${"flag" in field} ? ${form.iterator}.${field.flag} : ${form.iterator}.enabled, 'awxSwitch-disabled': ${"ngDisabled" in field} ? ${field.ngDisabled} : false}" aw-tool-tip="${field.awToolTip}" data-placement="${field.dataPlacement ? field.dataPlacement : 'right'}" data-tip-watch="${field.dataTipWatch}"> |
There was a problem hiding this comment.
I haven't seen a ternary with an in iterator like this before. is this an angular thing? I'm not sure how it works.
There was a problem hiding this comment.
Yea you can have a ternary inside of the ng-class directive. We use this same syntax in a couple of other places.
|
Merge Failed. This change or one of its cross-repo dependencies was unable to be automatically merged with the current state of its repository. Please rebase the change and upload a new patchset. |
|
Merge Failed. This change or one of its cross-repo dependencies was unable to be automatically merged with the current state of its repository. Please rebase the change and upload a new patchset. |
|
Build succeeded.
|
|
Build succeeded.
|
|
Build succeeded (gate pipeline).
|
SUMMARY
Our text-based toggles are particularly problematic when translated to other languages. This is a proposal to use toggles that look like Patternfly's switches. The non-disabled versions would look like this:
The disabled versions would look like this:
Here's an example screenshot of the poor behavior:
A lot of the code removal here has to do with old job submission code. Some of this old code referenced the
ScheduleToggleclass(es) which is what led me down that path. This PR should replace all of the old on/off toggles with these new toggles. Most, if not all, of these toggles appear in lists and forms throughout the application. They are particularly pervasive in the settings forms and host lists but they also appear in the Job Template form, Notifications list and Survey Maker amongst others.ISSUE TYPE
COMPONENT NAME
AWX VERSION
6.1.0
ADDITIONAL INFORMATION
Manually tested as many of the toggles as I could reasonably locate. I also cruised through the UI with a system auditor user to make sure that toggles were properly disabled. I did find that the survey maker toggle has never been disabled for users that cannot edit the JT so I fixed that.