Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 15:59:41 +02:00
Code Issues Releases Activity

feat(ui): config-details-styling EE-3472 (#7367)

Browse source 
* feat(ui): config details EE-3472
This commit is contained in:
Ali 2022-08-02 14:21:14 +12:00 • committed by GitHub
parent e1c7079c81
commit 5469392ec7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 79 additions and 69 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/kubernetes/components/datatables/events-datatable/eventsDatatable.html
View file

@ -1,12 +1,10 @@
<div class="datatable">
<div class="toolBar">
<div class="toolBarTitle flex">
<div class="flex justify-center content-center mr-2 icon-nested-blue vertical-center">
<pr-icon icon="'rotate-ccw'" size="'sm'" mode="'primary'" feather="true"></pr-icon>
<div class="icon-nested-blue flex justify-center items-center">
<pr-icon icon="'rotate-ccw'" mode="'primary'" feather="true" class="vertical-center"></pr-icon>
</div>
<span class="vertical-center">
{{ $ctrl.titleText }}
</span>
{{ $ctrl.titleText }}
</div>
<div class="searchBar">
<pr-icon icon="'search'" class="vertical-center" feather="true"></pr-icon>

12
app/kubernetes/components/datatables/integrated-applications-datatable/integratedApplicationsDatatable.html
View file

@ -3,14 +3,14 @@
<rd-widget-body classes="no-padding">
<div class="toolBar">
<div class="toolBarTitle vertical-center">
<pr-icon icon="$ctrl.titleIcon" feather="true" mode="'primary'" class-name="'icon-nested-blue'"></pr-icon>
<pr-icon icon="$ctrl.titleIcon" class-name="'icon-nested-blue vertical-center'" mode="'primary'"></pr-icon>
{{ $ctrl.titleText }}
</div>
<div class="searchBar">
<div class="searchBar vertical-center">
<pr-icon icon="'search'" feather="true" class="vertical-center"></pr-icon>
<input
type="text"
class="searchInput ml-1"
class="searchInput"
ng-model="$ctrl.state.textFilter"
ng-change="$ctrl.onTextFilterChange()"
placeholder="Search for an application..."
@ -20,7 +20,9 @@
</div>
<div ng-if="$ctrl.refreshCallback" class="settings">
<span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
<span uib-dropdown-toggle><pr-icon icon="'more-vertical'" feather="true"></pr-icon></span>
<span uib-dropdown-toggle aria-label="Settings">
<pr-icon icon="'more-vertical'" feather="true" class-name="'!mr-0 !h-4'"></pr-icon>
</span>
<div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<div class="tableMenu">
<div class="menuHeader"> Table settings </div>
@ -40,7 +42,7 @@
<option value="300">5min</option>
</select>
<span>
<pr-icon id="refreshRateChange" style="display: none" icon="'check'" mode="'success'" feather="true"></pr-icon>
<pr-icon id="refreshRateChange" icon="'check'" feather="true" mode="'success'" size="'sm'"></pr-icon>
</span>
</div>
</div>

64
app/kubernetes/components/kubernetes-configuration-data/kubernetesConfigurationData.html
View file

@ -25,10 +25,10 @@
<div class="form-group" ng-if="$ctrl.formValues.IsSimple">
<div class="col-sm-12">
<button type="button" class="btn btn-sm btn-default" style="margin-left: 0" ng-click="$ctrl.addEntry()" data-cy="k8sConfigCreate-createEntryButton">
<pr-icon icon="'plus'" feather="true" class="vertical-center"></pr-icon> Create entry
<pr-icon class="vertical-center" icon="'plus'" feather="true"></pr-icon> Create entry
</button>
<button type="button" class="btn btn-sm btn-default" ngf-select="$ctrl.addEntryFromFile($file)" style="margin-left: 0" data-cy="k8sConfigCreate-createConfigsFromFileButton">
<pr-icon icon="'upload'" feather="true" class="vertical-center"></pr-icon> Create key/value from file
<pr-icon class="vertical-center" icon="'upload'" feather="true"></pr-icon> Create key/value from file
</button>
</div>
</div>
@ -36,7 +36,7 @@
<div ng-repeat="(index, entry) in $ctrl.formValues.Data" ng-if="$ctrl.formValues.IsSimple">
<div class="form-group">
<label for="configuration_data_key_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Key</label>
<div class="col-sm-8">
<div class="col-sm-8 col-lg-9">
<input
type="text"
class="form-control"
@ -47,33 +47,37 @@
required
ng-change="$ctrl.onChangeKey(entry)"
/>
</div>
<div
class="col-sm-11 small text-muted"
style="margin-top: 5px"
ng-show="
kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
(!entry.Used && $ctrl.state.duplicateKeys[index] !== undefined) ||
$ctrl.state.invalidKeys[index]
"
>
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
<p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required. </p>
</ng-messages>
<div>
<p ng-if="$ctrl.state.duplicateKeys[index] !== undefined" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is already defined.
<div
class="small text-muted"
style="margin-top: 5px"
ng-show="
kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$invalid ||
(!entry.Used && $ctrl.state.duplicateKeys[index] !== undefined) ||
$ctrl.state.invalidKeys[index]
"
>
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_key_' + index].$error">
<p ng-message="required" class="vertical-center">
<pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.
</p>
</ng-messages>
<div>
<p ng-if="$ctrl.state.duplicateKeys[index] !== undefined" class="vertical-center">
<pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon>This key is already defined.
</p>
</div>
<p ng-if="$ctrl.state.invalidKeys[index]" class="vertical-center">
<pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'" class="vertical-center"></pr-icon> This key is invalid. A valid key must
consist of alphanumeric characters, '-', '_' or '.'
</p>
</div>
<p ng-if="$ctrl.state.invalidKeys[index]" class="vertical-center">
<pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This key is invalid. A valid key must consist of alphanumeric characters, '-', '_' or '.'
</p>
</div>
<div class="col-sm-3 col-lg-2"></div>
</div>
<div class="form-group" ng-if="$ctrl.formValues.IsSimple && !entry.IsBinary">
<label for="configuration_data_value_{{ index }}" class="col-sm-3 col-lg-2 control-label text-left">Value</label>
<div class="col-sm-8">
<div class="col-sm-8 col-lg-9">
<textarea
class="form-control"
rows="5"
@ -82,11 +86,13 @@
ng-model="$ctrl.formValues.Data[index].Value"
required
></textarea>
</div>
<div class="col-sm-11 small text-muted" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
<p ng-message="required" class="vertical-center"><pr-icon icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p>
</ng-messages>
<div class="small text-muted" style="margin-top: 5px" ng-show="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$invalid">
<ng-messages for="kubernetesConfigurationDataCreationForm['configuration_data_value_' + index].$error">
<p ng-message="required" class="vertical-center"
><pr-icon class="vertical-center" icon="'alert-triangle'" feather="true" mode="'warning'"></pr-icon> This field is required.</p
>
</ng-messages>
</div>
</div>
</div>
@ -108,7 +114,7 @@
ng-click="$ctrl.removeEntry(index, entry)"
data-cy="k8sConfigDetail-removeEntryButton{{ index }}"
>
<pr-icon icon="'trash-2'" feather="true"></pr-icon> Remove entry
<pr-icon class="vertical-center" icon="'trash-2'" feather="true"></pr-icon> Remove entry
</button>
<span class="small text-muted" ng-if="entry.Used">
<pr-icon icon="'alert-circle'" feather="true" mode="'primary'"></pr-icon>

10
app/kubernetes/components/yaml-inspector/yamlInspector.html
View file

@ -1,17 +1,17 @@
<div>
<code-editor identifier="application-details-yaml" read-only="true" value="$ctrl.data"></code-editor>
<div style="margin: 15px">
<div class="py-5">
<span class="btn btn-light btn-sm" ng-click="$ctrl.copyYAML()">
<pr-icon icon="'copy'" feather="true"></pr-icon>
<pr-icon class="vertical-center" icon="'copy'" feather="true"></pr-icon>
Copy to clipboard
</span>
<span class="btn btn-light btn-sm space-left" ng-click="$ctrl.toggleYAMLInspectorExpansion()">
<pr-icon icon="'minus'" size="'sm'" ng-if="$ctrl.expanded" feather="true"></pr-icon>
<pr-icon icon="'plus'" size="'sm'" ng-if="!$ctrl.expanded" feather="true"></pr-icon>
<pr-icon class="vertical-center" icon="'minus'" size="'sm'" ng-if="$ctrl.expanded" feather="true"></pr-icon>
<pr-icon class="vertical-center" icon="'plus'" size="'sm'" ng-if="!$ctrl.expanded" feather="true"></pr-icon>
{{ $ctrl.expanded ? 'Collapse' : 'Expand' }}
</span>
<span id="copyNotificationYAML" style="display: none" class="small vertical-center ml-1">
<pr-icon icon="'check'" size="'md'" mode="'success'" feather="true"></pr-icon> copied
<pr-icon class="vertical-center" icon="'check'" size="'md'" mode="'success'" feather="true"></pr-icon> copied
</span>
</div>
</div>