mirror of
https://github.com/ansible/awx.git
synced 2024-10-31 15:21:13 +03:00
Add toggle-able dropdown for workflow key
This commit is contained in:
parent
7ba47eadca
commit
5f5a91a72c
@ -151,9 +151,7 @@
|
||||
color: @default-interface-txt;
|
||||
}
|
||||
.WorkflowLegend-maker--left {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.WorkflowLegend-maker--right {
|
||||
flex: 0 0 215px;
|
||||
@ -213,16 +211,20 @@
|
||||
padding-right: 20px;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.Key-menuIcon,
|
||||
.WorkflowMaker-manualControlsIcon {
|
||||
color: @default-icon;
|
||||
vertical-align: middle;
|
||||
font-size: 1.2em;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.Key-menuIcon:hover,
|
||||
.WorkflowMaker-manualControlsIcon:hover {
|
||||
color: @default-link-hov;
|
||||
cursor: pointer;
|
||||
}
|
||||
.Key-menuIcon--active,
|
||||
.WorkflowMaker-manualControlsIcon--active {
|
||||
color: @default-link-hov;
|
||||
}
|
||||
@ -248,3 +250,67 @@
|
||||
.WorkflowMaker-formTab {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.Key-list {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
background-color: @default-bg;
|
||||
border: 1px solid @default-list-header-bg;
|
||||
}
|
||||
.Key-listItem {
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
.Key-listItemContent {
|
||||
margin: 0;
|
||||
line-height: 20px;
|
||||
}
|
||||
.Key-listItemContent--circle {
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.Key-icon {
|
||||
height: 3px;
|
||||
width: 20px;
|
||||
margin: 9px 5px 9px 0px;
|
||||
}
|
||||
.Key-heading {
|
||||
font-weight: 700;
|
||||
margin: 0 0 10px;
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.Key-icon--success {
|
||||
background-color: @submit-button-bg;
|
||||
}
|
||||
.Key-icon--fail {
|
||||
background-color: @default-err;
|
||||
}
|
||||
.Key-icon--always {
|
||||
background-color: @default-link;
|
||||
}
|
||||
.Key-icon--warning {
|
||||
background: @default-warning;
|
||||
}
|
||||
.Key-icon--default {
|
||||
background: @default-icon;
|
||||
}
|
||||
.Key-icon--circle {
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: @default-bg;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
margin: 4px 5px 5px 0px;
|
||||
}
|
||||
.Key-details {
|
||||
display: flex;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 20px;
|
||||
border: 1px solid @default-no-items-bord;
|
||||
margin-top:10px;
|
||||
}
|
||||
|
@ -35,6 +35,10 @@ export default ['$scope', 'WorkflowService', 'GetBasePath', 'TemplatesService',
|
||||
$scope.associateRequests = [];
|
||||
$scope.disassociateRequests = [];
|
||||
|
||||
$scope.showKey = false;
|
||||
$scope.toggleKey = () => $scope.showKey = !$scope.showKey;
|
||||
$scope.keyClassList = `{ 'Key-menuIcon--active': showKey }`;
|
||||
|
||||
function init() {
|
||||
|
||||
let allNodes = [];
|
||||
|
@ -33,27 +33,36 @@
|
||||
<div class="WorkflowMaker-contentLeft">
|
||||
<div class="WorkflowLegend-maker">
|
||||
<div class="WorkflowLegend-maker--left">
|
||||
<div class="WorkflowLegend-legendItem">KEY:</div>
|
||||
<div class="WorkflowLegend-legendItem">
|
||||
<div class="WorkflowLegend-onSuccessLegend"></div>
|
||||
<div>On Success</div>
|
||||
</div>
|
||||
<div class="WorkflowLegend-legendItem">
|
||||
<div class="WorkflowLegend-onFailLegend"></div>
|
||||
<div>On Fail</div>
|
||||
</div>
|
||||
<div class="WorkflowLegend-legendItem">
|
||||
<div class="WorkflowLegend-alwaysLegend"></div>
|
||||
<div>Always</div>
|
||||
</div>
|
||||
<div class="WorkflowLegend-legendItem">
|
||||
<div class="WorkflowLegend-letterCircle">P</div>
|
||||
<div>Project Sync</div>
|
||||
</div>
|
||||
<div class="WorkflowLegend-legendItem">
|
||||
<div class="WorkflowLegend-letterCircle">I</div>
|
||||
<div>Inventory Sync</div>
|
||||
</div>
|
||||
<i ng-class="{{ keyClassList }}" class="fa fa-key Key-menuIcon" ng-click="toggleKey()"></i>
|
||||
<ul ng-show="showKey" class="Key-list noselect">
|
||||
<li class="Key-listItem">
|
||||
<p class="Key-heading">KEY</p>
|
||||
</li>
|
||||
<li class="Key-listItem">
|
||||
<div class="Key-icon Key-icon--success"></div>
|
||||
<p class="Key-listItemContent">On Success</p>
|
||||
</li>
|
||||
<li class="Key-listItem">
|
||||
<div class="Key-icon Key-icon--fail"></div>
|
||||
<p class="Key-listItemContent">On Fail</p>
|
||||
</li>
|
||||
<li class="Key-listItem">
|
||||
<div class="Key-icon Key-icon--always"></div>
|
||||
<p class="Key-listItemContent">Always</p>
|
||||
</li>
|
||||
<li class="Key-listItem">
|
||||
<div class="Key-icon Key-icon--circle Key-icon--default">P</div>
|
||||
<p class="Key-listItemContent Key-listItemContent--circle">Project Sync</p>
|
||||
</li>
|
||||
<li class="Key-listItem">
|
||||
<div class="Key-icon Key-icon--circle Key-icon--default">I</div>
|
||||
<p class="Key-listItemContent Key-listItemContent--circle">Inventory Sync</p>
|
||||
</li>
|
||||
<li class="Key-listItem">
|
||||
<div class="Key-icon Key-icon--circle Key-icon--warning">!</div>
|
||||
<p class="Key-listItemContent Key-listItemContent--circle">Warning</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="WorkflowLegend-maker--right">
|
||||
<span class="WorkflowMaker-totalJobs">TOTAL TEMPLATES</span>
|
||||
|
Loading…
Reference in New Issue
Block a user