fix(docker): style fixes [EE-4024] (#7569)

* EE-4042 update docker screens trash icon

* EE-4024 fix(docker): change styles
pull/7615/head
Rex Wang 2022-09-01 19:02:21 +08:00 committed by GitHub
parent d79586cf6a
commit 88757d2617
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 90 additions and 82 deletions

View File

@ -28,26 +28,28 @@
<!-- !config-data -->
<!-- labels -->
<div class="form-group">
<div class="col-sm-12" style="margin-top: 5px">
<label class="control-label text-left">Labels</label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="ctrl.addLabel()">
<div class="col-sm-12 mt-1">
<label class="control-label text-left space-right">Labels</label>
<span class="label label-default interactive vertical-center space-left" ng-click="ctrl.addLabel()">
<pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
</span>
</div>
<!-- labels-input-list -->
<div class="col-sm-12 form-inline" style="margin-top: 10px">
<div ng-repeat="label in ctrl.formValues.Labels" style="margin-top: 2px">
<div class="col-sm-12 form-inline mt-2">
<div ng-repeat="label in ctrl.formValues.Labels" class="mt-1">
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="label.name" placeholder="e.g. com.example.foo" />
</div>
<div class="input-group col-sm-5 input-group-sm">
<div class="input-group col-sm-6 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
<span class="input-group-btn">
<button class="btn btn-dangerlight" type="button" ng-click="ctrl.removeLabel($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>
<button class="btn btn-light" type="button" ng-click="ctrl.removeLabel($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button>
</div>
</div>
<!-- !labels-input-list -->

View File

@ -40,13 +40,15 @@
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="option.name" placeholder="e.g. com.docker.network.bridge.enable_icc" />
</div>
<div class="input-group col-sm-5 input-group-sm">
<div class="input-group col-sm-6 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="option.value" placeholder="e.g. true" />
<span class="input-group-btn">
<button class="btn btn-dangerlight" type="button" ng-click="removeDriverOption($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeDriverOption($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button>
</div>
<div class="small interactive text-muted vertical-center mt-1" ng-click="addDriverOption()">
<pr-icon icon="'plus'" size="'md'" feather="true"></pr-icon> Add driver option
@ -91,8 +93,8 @@
placeholder="e.g. my-router=172.20.10.129"
/>
</div>
<button class="btn btn-md btn-light" type="button" ng-click="removeIPV4AuxAddress($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeIPV4AuxAddress($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
<div class="col-sm-12 small text-warning" ng-if="state.IPV4AuxiliaryAddressesError[$index]">
<p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
@ -138,8 +140,8 @@
placeholder="e.g. my-router=2001:db8::1"
/>
</div>
<button class="btn btn-md btn-light" type="button" ng-click="removeIPV6AuxAddress($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeIPV6AuxAddress($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
<div class="col-sm-12 small text-warning" ng-show="state.IPV6AuxiliaryAddressesError[$index]">
<p class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'" feather="true"></pr-icon> Exclude ip cannot be the same as gateway.</p>
@ -162,13 +164,13 @@
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
</div>
<div class="input-group col-sm-5 input-group-sm">
<div class="input-group col-sm-6 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
<span class="input-group-btn">
<button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)"> <pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon> </button
></span>
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeLabel($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
</button>
</div>
<div class="form-group">
<div class="col-sm-12 small interactive text-muted vertical-center mt-1" ng-click="addLabel()">

View File

@ -37,8 +37,10 @@
<!-- labels -->
<div class="form-group">
<div class="col-sm-12 mt-1">
<label class="control-label text-left">Labels</label>
<span class="label label-default interactive space-left" ng-click="addLabel()"> <pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label </span>
<label class="control-label text-left space-right">Labels</label>
<span class="label label-default interactive vertical-center space-left" ng-click="addLabel()">
<pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> add label
</span>
</div>
<!-- labels-input-list -->
<div class="col-sm-12 form-inline mt-2">
@ -47,13 +49,15 @@
<span class="input-group-addon">name</span>
<input type="text" class="form-control" ng-model="label.key" placeholder="e.g. com.example.foo" />
</div>
<div class="input-group col-sm-5 input-group-sm">
<div class="input-group col-sm-6 input-group-sm">
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
<span class="input-group-btn">
<button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>
<button class="btn btn-dangerlight btn-only-icon" type="button" ng-click="removeLabel($index)">
<pr-icon icon="'trash-2'" feather="true"></pr-icon>
</button>
</div>
</div>
<!-- !labels-input-list -->

View File

@ -50,12 +50,12 @@
<div class="form-group">
<div class="col-sm-12" style="margin-top: 5px">
<label class="control-label text-left">Port mapping</label>
<span class="label label-default interactive" style="margin-left: 10px" ng-click="addPortBinding()">
<span class="label label-default interactive vertical-center" style="margin-left: 10px" ng-click="addPortBinding()">
<pr-icon icon="'plus'" mode="'alt'" feather="true"></pr-icon> map additional port
</span>
</div>
<div class="col-sm-12 form-inline" style="margin-top: 10px">
<div ng-repeat="portBinding in formValues.Ports" style="margin-top: 2px">
<div class="col-sm-12 form-inline mt-2">
<div ng-repeat="portBinding in formValues.Ports" class="mt-1">
<!-- host-port -->
<div class="input-group col-sm-3 input-group-sm">
<span class="input-group-addon">host</span>
@ -81,8 +81,8 @@
<label class="btn btn-light" ng-model="portBinding.PublishMode" uib-btn-radio="'ingress'">Ingress</label>
<label class="btn btn-light" ng-model="portBinding.PublishMode" uib-btn-radio="'host'">Host</label>
</div>
<button class="btn btn-sm btn-danger" type="button" ng-click="removePortBinding($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removePortBinding($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
<!-- !protocol-actions -->
@ -205,7 +205,7 @@
<!-- !logging-driver -->
<!-- logging-opts -->
<div class="form-group">
<div class="col-sm-12" style="margin-top: 5px">
<div class="col-sm-12 mt-1">
<label class="control-label text-left">
Options
<portainer-tooltip
@ -214,7 +214,7 @@
></portainer-tooltip>
</label>
<span
class="label label-default interactive"
class="label label-default interactive vertical-center"
style="margin-left: 10px"
ng-click="!formValues.LogDriverName || formValues.LogDriverName === 'none' || addLogDriverOpt(formValues.LogDriverName)"
>
@ -222,8 +222,8 @@
</span>
</div>
<!-- logging-opts-input-list -->
<div class="col-sm-12 form-inline" style="margin-top: 10px">
<div ng-repeat="opt in formValues.LogDriverOpts" style="margin-top: 2px">
<div class="col-sm-12 form-inline mt-2">
<div ng-repeat="opt in formValues.LogDriverOpts" class="mt-1">
<div class="input-group col-sm-5 input-group-sm">
<span class="input-group-addon">option</span>
<input type="text" class="form-control" ng-model="opt.name" placeholder="e.g. FOO" />
@ -232,8 +232,8 @@
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="opt.value" placeholder="e.g. bar" />
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeLogDriverOpt($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeLogDriverOpt($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>
@ -277,8 +277,8 @@
<label class="btn btn-light" ng-model="volume.Type" uib-btn-radio="'volume'" ng-click="volume.Source = null">Volume</label>
<label class="btn btn-light" ng-model="volume.Type" uib-btn-radio="'bind'" ng-click="volume.Source = null">Bind</label>
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeVolume($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeVolume($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
<!-- !volume-type -->
@ -366,8 +366,8 @@
<option selected disabled hidden value="">Select a network</option>
<option ng-repeat="net in availableNetworks" ng-value="net.Name">{{ net.Name }}</option>
</select>
<button class="btn btn-sm btn-light" type="button" ng-click="removeExtraNetwork($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeExtraNetwork($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>
@ -389,8 +389,8 @@
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="variable.value" placeholder="e.g. host:IP" />
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeHostsEntry($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeHostsEntry($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>
@ -431,8 +431,8 @@
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeLabel($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeLabel($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>
@ -458,8 +458,8 @@
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" />
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeContainerLabel($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeContainerLabel($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>

View File

@ -24,8 +24,8 @@
<span class="input-group-addon">Path in container</span>
<input class="form-control" ng-model="config.FileName" placeholder="e.g. /path/in/container" />
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeConfig($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeConfig($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>

View File

@ -75,8 +75,8 @@
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="constraint.value" placeholder="e.g. manager" />
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removePlacementConstraint($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removePlacementConstraint($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>
@ -100,8 +100,8 @@
<span class="input-group-addon">value</span>
<input type="text" class="form-control" ng-model="preference.value" placeholder="e.g. node.labels.datacenter" />
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removePlacementPreference($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removePlacementPreference($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>

View File

@ -35,8 +35,8 @@
<label class="btn btn-light" ng-model="secret.overrideTarget" uib-btn-radio="false">Default location</label>
<label class="btn btn-light" ng-model="secret.overrideTarget" uib-btn-radio="true">Override</label>
</div>
<button class="btn btn-sm btn-light" type="button" ng-click="removeSecret($index)">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeSecret($index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</div>

View File

@ -39,8 +39,8 @@
<td>{{ config.Gid }}</td>
<td>{{ config.Mode }}</td>
<td authorization="DockerServiceUpdate">
<button class="btn btn-xs btn-light pull-right" type="button" ng-click="removeConfig(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> Remove config
<button class="btn btn-dangerlight pull-right" type="button" ng-click="removeConfig(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</td>
</tr>

View File

@ -61,8 +61,8 @@
disable-authorization="DockerServiceUpdate"
/>
<span class="input-group-btn" authorization="DockerServiceUpdate">
<button class="btn btn-sm btn-light" type="button" ng-click="removePlacementConstraint(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removePlacementConstraint(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>

View File

@ -47,8 +47,8 @@
disable-authorization="DockerServiceUpdate"
/>
<span class="input-group-btn" authorization="DockerServiceUpdate">
<button class="btn btn-sm btn-light" type="button" ng-click="removeContainerLabel(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeContainerLabel(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>

View File

@ -45,8 +45,8 @@
disable-authorization="DockerServiceUpdate"
/>
<span class="input-group-btn" authorization="DockerServiceUpdate">
<button class="btn btn-sm btn-light" type="button" ng-click="removeHostsEntry(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeHostsEntry(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>

View File

@ -41,8 +41,8 @@
disable-authorization="DockerServiceUpdate"
/>
<span class="input-group-btn" authorization="DockerServiceUpdate">
<button class="btn btn-sm btn-light" type="button" ng-click="removeLogDriverOpt(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeLogDriverOpt(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>

View File

@ -80,8 +80,8 @@
</td>
<td authorization="DockerServiceUpdate">
<span class="input-group-btn">
<button class="btn btn-sm btn-light" type="button" ng-click="removeMount(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeMount(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</td>

View File

@ -44,8 +44,8 @@
</td>
<td ng-if="network.Editable" authorization="DockerServiceUpdate">
<span class="input-group-btn">
<button class="btn btn-sm btn-light" type="button" ng-click="removeNetwork(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeNetwork(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</td>

View File

@ -45,8 +45,8 @@
disable-authorization="DockerServiceUpdate"
/>
<span class="input-group-btn" authorization="DockerServiceUpdate">
<button class="btn btn-sm btn-light" type="button" ng-click="removePlacementPreference(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removePlacementPreference(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>

View File

@ -81,8 +81,8 @@
</td>
<td authorization="DockerServiceUpdate">
<span class="input-group-btn">
<button class="btn btn-light" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removePortPublishedBinding(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</td>

View File

@ -38,8 +38,8 @@
<td>{{ secret.Gid }}</td>
<td>{{ secret.Mode }}</td>
<td authorization="DockerServiceUpdate">
<button class="btn btn-xs btn-light pull-right" type="button" ng-click="removeSecret(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon> Remove secret
<button class="btn btn-dangerlight pull-right" type="button" ng-click="removeSecret(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</td>
</tr>

View File

@ -47,8 +47,8 @@
disable-authorization="DockerServiceUpdate"
/>
<span class="input-group-btn" authorization="DockerServiceUpdate">
<button class="btn btn-sm btn-light" type="button" ng-click="removeLabel(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" class-name="'icon-secondary icon-md'"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="removeLabel(service, $index)" ng-disabled="isUpdating">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</span>
</div>

View File

@ -54,8 +54,8 @@
<button class="btn btn-sm btn-light" type="button" ng-if="!$ctrl.hasValue()" ng-click="$ctrl.onChangeValue('')">
<pr-icon icon="'plus'" feather="true"></pr-icon> Add value
</button>
<button class="btn btn-light" type="button" ng-click="$ctrl.onRemove($ctrl.index)">
<pr-icon icon="'trash-2'" feather="true"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="$ctrl.onRemove($ctrl.index)">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
</ng-form>

View File

@ -13,8 +13,8 @@
required
/>
</div>
<button class="btn btn-sm btn-dangerlight btn-only-icon" type="button" ng-click="$ctrl.removeValue()" title="Remove">
<pr-icon icon="'trash-2'" size="'md'" feather="true"></pr-icon>
<button class="btn btn-dangerlight" type="button" ng-click="$ctrl.removeValue()" title="Remove">
<pr-icon icon="'trash-2'" feather="true" size="'md'"></pr-icon>
</button>
</div>
<div ng-show="$ctrl[$ctrl.formName].name.$invalid">