Add expand/collapse toolbar to Projects List.

Add some responsive styling.

awx/ui/client/features/projects/projectsList.controller.js

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

awx/ui/client/features/projects/projectsList.view.html

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

awx/ui/client/lib/components/list/_index.less

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

awx/ui/client/lib/components/truncate/_index.less

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