zware/awx
1
0
Fork 0
mirror of https://github.com/ZwareBear/awx.git synced 2026-04-18 22:11:49 -05:00
Code Issues Packages Projects Releases Wiki Activity

Swap text-based on and off toggles to non-text based

Browse Source
This commit is contained in:
mabashian
2019-08-05 11:25:08 -04:00
parent 4f3f87ebc7
commit c4700998af
30 changed files with 178 additions and 1941 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
awx/ui/client/src/shared/form-generator.js
View File

@@ -512,21 +512,16 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
var html = '';
// extend these blocks to include elements similarly buildField()
if (field.type === 'toggle'){
html += "<div class=\"Field-header--" + key;
html += (field['class']) ? " " + field['class'] : "";
html += " " + field.columnClass;
html += "\"><div class='ScheduleToggle' ng-class='{\"is-on\": " + form.iterator + ".";
html += (field.flag) ? field.flag : "enabled";
html += (field.ngDisabled) ? ', "ScheduleToggle--disabled": ' + field.ngDisabled : '';
html += "\}' aw-tool-tip='" + field.awToolTip + "' data-placement='" + field.dataPlacement + "' data-tip-watch='" + field.dataTipWatch + "'><button type='button' ng-show='" + form.iterator + "." ;
html += (field.flag) ? field.flag : 'enabled';
html += "' ";
html += (field.ngDisabled) ? `ng-disabled="${field.ngDisabled}" ` : "";
html += " class='ScheduleToggle-switch is-on' ng-click='" + field.ngClick + "' translate>" + i18n._("ON") + "</button><button type='button' ng-show='!" + form.iterator + "." ;
html += (field.flag) ? field.flag : "enabled";
html += "' ";
html += (field.ngDisabled) ? `ng-disabled="${field.ngDisabled}" ` : "";
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}">
<span class="awxSwitch-inner" ng-click="${field.ngClick}">
<span class="awxSwitch-slider"></span>
<i class="fa fa-check"></i>
</span>
</span>
</div>
`;
} else if (field.type === 'html') {
html += field.html;
}
@@ -676,17 +671,16 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
}
if (field.type === 'toggle'){
html += "<td class=\"List-tableCell " + fld + "-column";
html += (field['class']) ? " " + field['class'] : "";
html += " " + field.columnClass;
html += "\"><div class='ScheduleToggle' ng-class='{\"is-on\": " + form.iterator + ".";
html += (field.flag) ? field.flag : "enabled";
html += (field.ngDisabled) ? ', "ScheduleToggle--disabled": ' + field.ngDisabled : '';
html += "\}' aw-tool-tip='" + field.awToolTip + "' data-placement='" + field.dataPlacement + "' data-tip-watch='" + field.dataTipWatch + "'><div ng-show='" + form.iterator + "." ;
html += (field.flag) ? field.flag : 'enabled';
html += "' class='ScheduleToggle-switch is-on' ng-click='" + field.ngClick + "' translate>ON</div><div ng-show='!" + form.iterator + "." ;
html += (field.flag) ? field.flag : "enabled";
html += "' class='ScheduleToggle-switch' ng-click='" + field.ngClick + "' translate>OFF</div></div></td>";
html += `
<td class="List-tableCell-${fld}-column ${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}">
<span class="awxSwitch-inner" ng-click="${field.ngClick}">
<span class="awxSwitch-slider"></span>
<i class="fa fa-check"></i>
</span>
</span>
</td>
`;
}
if (field.type === 'alertblock') {
@@ -741,14 +735,16 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
html += label(labelOptions);
html += `<div class="ScheduleToggle" ng-class="{'is-on': ${field.toggleSource}, 'ScheduleToggle--disabled': ${field.ngDisabled}}" aw-tool-tip="" `;
html += (field.ngShow) ? "ng-show=\"" + field.ngShow + "\" " : "";
html += `data-placement="top">`;
html += `<button type="button" ng-show="${field.toggleSource}" class="ScheduleToggle-switch is-on" ng-click="toggleForm('${field.toggleSource}')"
ng-disabled="${field.ngDisabled}" translate>${i18n._("ON")}</button>
<button type="button" ng-show="!${field.toggleSource}" class="ScheduleToggle-switch" ng-click="toggleForm('${field.toggleSource}')"
ng-disabled="${field.ngDisabled}" translate>${i18n._("OFF")}</button>
</div>`;
html += `
<div>
<span class="awxSwitch-outer" ng-class="{'awxSwitch-on': ${field.toggleSource}, 'awxSwitch-disabled': ${"ngDisabled" in field} ? ${field.ngDisabled} : false}" ng-show="${"ngShow" in field ? field.ngShow : true}">
<span class="awxSwitch-inner" ng-click="toggleForm('${field.toggleSource}')">
<span class="awxSwitch-slider"></span>
<i class="fa fa-check"></i>
</span>
</span>
</div>
`;
}
//text fields