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

show credential kind icon on credential tags

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

View File

@ -21,25 +21,37 @@
<div class="MultiCredential-tags">
<div class="MultiCredential-tagSection">
<div class="MultiCredential-flexContainer">
<div
class="MultiCredential-tagContainer ng-scope"
ng-repeat="tag in tags track by $index">
<div class="MultiCredential-deleteContainer"
ng-click="vm.removeCredential(tag.id)"
ng-if="!tag.readOnly">
<i class="fa fa-times MultiCredential-tagDelete"></i>
</div>
<div class="MultiCredential-tag" ng-class="tag.readOnly ? 'MultiCredential-tag--disabled' : 'MultiCredential-tag--deletable'">
<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">
{{ tag.typeName }}:
</span>
<span class="MultiCredential-name u-wordwrap ng-binding">
{{ tag.name }}
</span>
</div>
<div class="MultiCredential-tagContainer ng-scope" ng-repeat="tag in tags track by $index">
<div class="MultiCredential-deleteContainer"
ng-click="vm.deselectCredential(tag)"
ng-hide="fieldIsDisabled || tag.readOnly">
<i class="fa fa-times MultiCredential-tagDelete"></i>
</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"
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>

View File

@ -53,6 +53,9 @@
.MultiCredential-tag--disabled {
background-color: @default-icon;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding-left: 10px;
}
.MultiCredential-tag--deletable {
@ -79,7 +82,37 @@
}
.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 {
@ -91,7 +124,7 @@
.MultiCredential-name--label {
color: @default-list-header-bg;
font-size: 10px;
margin-left: -7px;
margin-left: -8px;
margin-right: 5px;
text-transform: uppercase;
}

View File

@ -22,17 +22,30 @@
ng-hide="fieldIsDisabled || tag.readOnly">
<i class="fa fa-times MultiCredential-tagDelete"></i>
</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"
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">
{{ tag.typeName }}:
</span>
<span class="MultiCredential-name u-wordwrap ng-binding">
{{ tag.name }}
</span>
<span ng-if="tag.info" class="MultiCredential-name--label ng-binding">
{{ tag.name }} | {{ tag.info }}
</span>
</div>
</div>
</div>

View File

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