1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-23 15:29:42 +02:00

refactor(docker/switch/component): implement new design [EE-3688] (#7239)

* refactor(docker/switch/component): implement new design [EE=3688]

* revert create volume

* revert por-switch on exec.html

* refactor(container): switch fields on container creation page and edition page

* refactor(container): switch fields on networking/secret/servicewebhook/swarmvisual

* bug fixed

* code review issues

* merge code

* fix teaser for container edition

* fix encode secret toggle bug on adding secret page

* fixed a bug for service webhook toggle
This commit is contained in:
Zhang Hao 2022-07-20 08:39:44 +08:00 committed by GitHub
parent e07253bcef
commit 43bbeed141
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 194 additions and 86 deletions

View file

@ -0,0 +1,23 @@
export default class ContainerCapabilitiesController {
/* @ngInject */
constructor($scope) {
this.$scope = $scope;
this.oldCapabilities = [];
}
createOnChangeHandler(capability) {
return (checked) => {
this.$scope.$evalAsync(() => {
capability.allowed = checked;
});
};
}
$doCheck() {
if (this.oldCapabilities.length !== this.capabilities.length) {
this.oldCapabilities = this.capabilities;
this.capabilitiesOnChange = Object.fromEntries(this.capabilities.map((cap) => [cap.capability, this.createOnChangeHandler(cap)]));
}
}
}

View file

@ -1,6 +1,9 @@
import controller from './container-capabilities.controller';
angular.module('portainer.docker').component('containerCapabilities', {
templateUrl: './containerCapabilities.html',
bindings: {
capabilities: '=',
},
controller,
});

View file

@ -1,18 +1,15 @@
<form class="form-horizontal" style="margin-top: 15px">
<div class="col-sm-12 form-section-title"> Container capabilities </div>
<div class="form-group">
<div ng-repeat="cap in $ctrl.capabilities" class="col-xs-12 col-sm-6 col-md-4">
<div class="row">
<div class="col-xs-8">
<label for="capability" class="control-label text-left" style="display: flex; padding: 0">
{{ cap.capability }}
<portainer-tooltip message="cap.description"></portainer-tooltip>
</label>
</div>
<div class="col-xs-4">
<label class="switch"> <input type="checkbox" name="capability" ng-model="cap.allowed" /><i></i> </label>
</div>
</div>
<div class="form-group flex flex-wrap gap-y-2 px-5">
<div ng-repeat="cap in $ctrl.capabilities" class="w-1/3 text-center">
<por-switch-field
label-class="'col-sm-6'"
tooltip="cap.description"
checked="cap.allowed"
label="cap.capability"
name="'capability'"
on-change="($ctrl.capabilitiesOnChange[cap.capability])"
></por-switch-field>
</div>
</div>
</form>