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,11 +19,19 @@
             </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">
+                <div class="at-Row-container">
                     <at-row-item
                         status="{{ project.statusIcon }}"
                         status-tip="{{ project.statusTip }}"
@@ -32,26 +40,6 @@
                         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"
@@ -81,6 +69,29 @@
                             && project.summary_fields.user_capabilities.start">
                         </at-row-action>
                     </div>
+                </div>
+                <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>
     <paginate

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--collapsed {
+        max-height: 60px;
+    }
     .at-Row-actions {   
-        flex-direction: column;
         align-items: center;
     }
 

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

@@ -1,16 +1,19 @@
 .at-Truncate {
-    display: flex;
+    display: inline-block;
-    align-items: center;
-    height: 100%;
 
     .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;