External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-11 19:37:38 -02:30
Code Issues Packages Projects Releases Wiki Activity

Add expand/collapse toolbar to Projects List.

Browse Source 
Add some responsive styling.
This commit is contained in:
Kia Lam
2019-01-25 10:31:38 -05:00
parent 6726e203b9
commit 5421c243d7
4 changed files with 88 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
awx/ui/client/features/projects/projectsList.controller.js
View File

@@ -417,6 +417,16 @@ function projectsListController (
} }
return tooltip; return tooltip;
} }
vm.isCollapsed = true;
vm.onCollapse = () => {
vm.isCollapsed = true;
};
vm.onExpand = () => {
vm.isCollapsed = false;
};
} }
projectsListController.$inject = [ projectsListController.$inject = [

121
awx/ui/client/features/projects/projectsList.view.html
View File

@@ -19,67 +19,78 @@
</button> </button>
</div> </div>
</div> </div>
<at-list-toolbar
ng-if="vm.projects.length > 0"
sort-only="false"
on-collapse="vm.onCollapse"
on-expand="vm.onExpand"
is-collapsed="vm.isCollapsed">
</at-list-toolbar>
<at-list results="vm.projects"> <at-list results="vm.projects">
<at-row ng-repeat="project in vm.projects" <at-row ng-repeat="project in vm.projects"
ng-class="{'at-Row--active': (project.id === vm.activeId)}" ng-class="{'at-Row--active': (project.id === vm.activeId), 'at-Row--collapsed': vm.isCollapsed}"
id="row-{{ project.id }}"> id="row-{{ project.id }}">
<div class="at-Row-items"> <div class="at-Row-items">
<at-row-item <div class="at-Row-container">
status="{{ project.statusIcon }}" <at-row-item
status-tip="{{ project.statusTip }}" status="{{ project.statusIcon }}"
status-click="vm.showSCMStatus(project.id)" status-tip="{{ project.statusTip }}"
header-value="{{ project.name }}" status-click="vm.showSCMStatus(project.id)"
header-link="/#/projects/{{ project.id }}" header-value="{{ project.name }}"
header-tag="{{ vm.projectTypes[project.scm_type] }}"> header-link="/#/projects/{{ project.id }}"
</at-row-item> header-tag="{{ vm.projectTypes[project.scm_type] }}">
<div class="at-RowItem" ng-if="project.scm_revision"> </at-row-item>
<div class="at-RowItem-label"> <div class="at-Row-actions">
{{ :: vm.strings.get('list.ROW_ITEM_LABEL_REVISION') }} <div aw-tool-tip="{{ project.scm_update_tooltip }}"
</div> data-tip-watch="project.scm_update_tooltip"
<at-truncate string="{{ project.scm_revision }}" maxLength="7"></at-truncate> data-placement="top">
</div> <div class="at-RowAction"
<at-row-item ng-class="{'at-RowAction--disabled': project.scm_update_disabled }"
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_ORGANIZATION')}}" ng-click="vm.SCMUpdate(project.id, $event)"
value="{{ project.summary_fields.organization.name }}" ng-show="project.summary_fields.user_capabilities.start">
value-link="/#/organizations/{{ project.organization }}"> <i class="fa fa-refresh"></i>
</at-row-item> </div>
<at-row-item </div>
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}" <at-row-action icon="fa-copy" ng-click="vm.copyProject(project)"
value-bind-html="{{ vm.getLastModified(project) }}"> ng-show="project.summary_fields.user_capabilities.copy">
</at-row-item> </at-row-action>
<at-row-item <at-row-action icon="fa-trash" ng-click="vm.deleteProject(project.id, project.name)"
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED') }}" ng-show="(project.status !== 'updating'
value-bind-html="{{ vm.getLastUsed(project) }}"> && project.status !== 'running'
</at-row-item> && project.status !== 'pending'
</div> && project.status !== 'waiting')
<div class="at-Row-actions"> && project.summary_fields.user_capabilities.delete">
<div aw-tool-tip="{{ project.scm_update_tooltip }}" </at-row-action>
data-tip-watch="project.scm_update_tooltip" <at-row-action icon="fa-minus-circle" ng-click="vm.cancelUpdate(project)"
data-placement="top"> ng-show="(project.status == 'updating'
<div class="at-RowAction" || project.status == 'running'
ng-class="{'at-RowAction--disabled': project.scm_update_disabled }" || project.status == 'pending'
ng-click="vm.SCMUpdate(project.id, $event)" || project.status == 'waiting')
ng-show="project.summary_fields.user_capabilities.start"> && project.summary_fields.user_capabilities.start">
<i class="fa fa-refresh"></i> </at-row-action>
</div> </div>
</div> </div>
<at-row-action icon="fa-copy" ng-click="vm.copyProject(project)" <div class="at-Row-container--wrapped">
ng-show="project.summary_fields.user_capabilities.copy"> <div class="at-RowItem" ng-if="project.scm_revision">
</at-row-action> <div class="at-RowItem-label">
<at-row-action icon="fa-trash" ng-click="vm.deleteProject(project.id, project.name)" {{ :: vm.strings.get('list.ROW_ITEM_LABEL_REVISION') }}
ng-show="(project.status !== 'updating' </div>
&& project.status !== 'running' <at-truncate string="{{ project.scm_revision }}" maxLength="7"></at-truncate>
&& project.status !== 'pending' </div>
&& project.status !== 'waiting') <at-row-item
&& project.summary_fields.user_capabilities.delete"> label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_ORGANIZATION')}}"
</at-row-action> value="{{ project.summary_fields.organization.name }}"
<at-row-action icon="fa-minus-circle" ng-click="vm.cancelUpdate(project)" value-link="/#/organizations/{{ project.organization }}">
ng-show="(project.status == 'updating' </at-row-item>
|| project.status == 'running' <at-row-item
|| project.status == 'pending' label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
|| project.status == 'waiting') value-bind-html="{{ vm.getLastModified(project) }}">
&& project.summary_fields.user_capabilities.start"> </at-row-item>
</at-row-action> <at-row-item
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_USED') }}"
value-bind-html="{{ vm.getLastUsed(project) }}">
</at-row-item>
</div>
</div> </div>
</at-row> </at-row>
</at-list> </at-list>

9
awx/ui/client/lib/components/list/_index.less
View File

@@ -118,7 +118,7 @@
} }
.at-Row--collapsed { .at-Row--collapsed {
max-height: 50px !important; max-height: 50px;
} }
.at-Row--active { .at-Row--active {
border-left: @at-border-style-list-active-indicator; border-left: @at-border-style-list-active-indicator;
@@ -174,7 +174,6 @@
.at-Row-actions { .at-Row-actions {
display: flex; display: flex;
flex-wrap: wrap;
} }
.at-Row-items { .at-Row-items {
@@ -351,8 +350,10 @@
} }
@media screen and (max-width: @at-breakpoint-compact-list) { @media screen and (max-width: @at-breakpoint-compact-list) {
.at-Row-actions { .at-Row--collapsed {
flex-direction: column; max-height: 60px;
}
.at-Row-actions {
align-items: center; align-items: center;
} }

11
awx/ui/client/lib/components/truncate/_index.less
View File

@@ -1,16 +1,19 @@
.at-Truncate { .at-Truncate {
display: flex; display: inline-block;
align-items: center;
height: 100%;
.at-Truncate-text { .at-Truncate-text {
font-family: monospace, Courier, "Courier New", "Open Sans", sans-serif; font-family: monospace, Courier, "Courier New", "Open Sans", sans-serif;
} }
.at-Truncate-tag {
display: inherit;
}
.at-Truncate-copy { .at-Truncate-copy {
color: @at-gray-b7; color: @at-gray-b7;
cursor: pointer; cursor: pointer;
margin-left: 10px; margin: 0 20px 0 0;
display: inherit;
i:hover { i:hover {
color: @at-blue; color: @at-blue;