shaba/awx
1
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2024-11-01 08:21:15 +03:00
Code Releases Activity

show credential kind icon on credential tags

Browse Source
This commit is contained in:
Jake McDermott 2018-01-17 13:18:07 -05:00
parent c50c63a9ff
commit e33604de71
No known key found for this signature in database
GPG Key ID: 3B02CAD476EECB35
4 changed files with 86 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
awx/ui/client/src/templates/job_templates/multi-credential/multi-credential-modal.partial.html
View File

@ -21,25 +21,37 @@
<div class="MultiCredential-tags"> <div class="MultiCredential-tags">
<div class="MultiCredential-tagSection"> <div class="MultiCredential-tagSection">
<div class="MultiCredential-flexContainer"> <div class="MultiCredential-flexContainer">
<div <div class="MultiCredential-tagContainer ng-scope" ng-repeat="tag in tags track by $index">
class="MultiCredential-tagContainer ng-scope" <div class="MultiCredential-deleteContainer"
ng-repeat="tag in tags track by $index"> ng-click="vm.deselectCredential(tag)"
<div class="MultiCredential-deleteContainer" ng-hide="fieldIsDisabled || tag.readOnly">
ng-click="vm.removeCredential(tag.id)" <i class="fa fa-times MultiCredential-tagDelete"></i>
ng-if="!tag.readOnly"> </div>
<i class="fa fa-times MultiCredential-tagDelete"></i> <div class="MultiCredential-iconContainer--disabled" ng-switch="tag.kind" ng-if="fieldIsDisabled || tag.readOnly">
</div> <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
<div class="MultiCredential-tag" ng-class="tag.readOnly ? 'MultiCredential-tag--disabled' : 'MultiCredential-tag--deletable'"> <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
<span ng-if="tag.info" class="MultiCredential-name--label ng-binding"> <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
{{ tag.typeName }} {{ tag.info }}: <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
</span> <i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
<span ng-if="!tag.info" class="MultiCredential-name--label ng-binding"> <i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
{{ tag.typeName }}: </div>
</span> <div class="MultiCredential-iconContainer" ng-switch="tag.kind" ng-if="!(fieldIsDisabled || tag.readOnly)">
<span class="MultiCredential-name u-wordwrap ng-binding"> <i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
{{ tag.name }} <i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
</span> <i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
</div> <i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
<i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
<i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
</div>
<div class="MultiCredential-tag"
ng-class="{'MultiCredential-tag--deletable': !fieldIsDisabled && !tag.readOnly, 'MultiCredential-tag--disabled': tag.readOnly}">
<span ng-if="!tag.info" class="MultiCredential-name--label ng-binding">
{{ tag.name }}
</span>
<span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
{{ tag.name }} | {{ tag.info }}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>

37
awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.block.less
View File

@ -53,6 +53,9 @@
.MultiCredential-tag--disabled { .MultiCredential-tag--disabled {
background-color: @default-icon; background-color: @default-icon;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding-left: 10px;
} }
.MultiCredential-tag--deletable { .MultiCredential-tag--deletable {
@ -79,7 +82,37 @@
} }
.MultiCredential-tagDelete { .MultiCredential-tagDelete {
font-size: 13px; font-size: 11px;
}
.MultiCredential-iconContainer {
background-color: @default-link!important;
color: @default-bg;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: 0px 5px;
margin: 3px 0px;
margin-left: -3px;
align-items: center;
display: flex;
}
.MultiCredential-iconContainer--disabled {
background-color: @default-icon;
color: @default-bg;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding: 0 5px;
padding-left: 10px;
margin: 3px 0px;
align-items: center;
display: flex;
}
.MultiCredential-tagIcon {
margin: 0px 0px;
font-size: 10px;
} }
.MultiCredential-name { .MultiCredential-name {
@ -91,7 +124,7 @@
.MultiCredential-name--label { .MultiCredential-name--label {
color: @default-list-header-bg; color: @default-list-header-bg;
font-size: 10px; font-size: 10px;
margin-left: -7px; margin-left: -8px;
margin-right: 5px; margin-right: 5px;
text-transform: uppercase; text-transform: uppercase;
} }

25
awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.partial.html
View File

@ -22,17 +22,30 @@
ng-hide="fieldIsDisabled || tag.readOnly"> ng-hide="fieldIsDisabled || tag.readOnly">
<i class="fa fa-times MultiCredential-tagDelete"></i> <i class="fa fa-times MultiCredential-tagDelete"></i>
</div> </div>
<div class="MultiCredential-iconContainer--disabled" ng-switch="tag.kind" ng-if="fieldIsDisabled || tag.readOnly">
<i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
<i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
<i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
<i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
<i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
<i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
</div>
<div class="MultiCredential-iconContainer" ng-switch="tag.kind" ng-if="!(fieldIsDisabled || tag.readOnly)">
<i class="fa fa-cloud MultiCredential-tagIcon" ng-switch-when="cloud"></i>
<i class="fa fa-info MultiCredential-tagIcon" ng-switch-when="insights"></i>
<i class="fa fa-sitemap MultiCredential-tagIcon" ng-switch-when="net"></i>
<i class="fa fa-code-fork MultiCredential-tagIcon" ng-switch-when="scm"></i>
<i class="fa fa-key MultiCredential-tagIcon" ng-switch-when="ssh"></i>
<i class="fa fa-archive MultiCredential-tagIcon" ng-switch-when="vault"></i>
</div>
<div class="MultiCredential-tag" <div class="MultiCredential-tag"
ng-class="{'MultiCredential-tag--deletable': !fieldIsDisabled && !tag.readOnly, 'MultiCredential-tag--disabled': tag.readOnly}"> ng-class="{'MultiCredential-tag--deletable': !fieldIsDisabled && !tag.readOnly, 'MultiCredential-tag--disabled': tag.readOnly}">
<span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
{{ tag.typeName }} {{ tag.info }}:
</span>
<span ng-if="!tag.info" class="MultiCredential-name--label ng-binding"> <span ng-if="!tag.info" class="MultiCredential-name--label ng-binding">
{{ tag.typeName }}:
</span>
<span class="MultiCredential-name u-wordwrap ng-binding">
{{ tag.name }} {{ tag.name }}
</span> </span>
<span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
{{ tag.name }} | {{ tag.info }}
</span>
</div> </div>
</div> </div>
</div> </div>

1
awx/ui/client/src/templates/job_templates/multi-credential/multi-credential.service.js
View File

@ -84,6 +84,7 @@ function MultiCredentialService (Rest, ProcessErrors, $q, GetBasePath) {
return { return {
id: credential.id, id: credential.id,
name: credential.name, name: credential.name,
kind: _.get(credentialType, 'kind'),
typeName: _.get(credentialType, 'name'), typeName: _.get(credentialType, 'name'),
info: _.get(credential, 'inputs.vault_id'), info: _.get(credential, 'inputs.vault_id'),
readOnly: this.isReadOnly(credential), readOnly: this.isReadOnly(credential),