Merge pull request #1659 from marshmalien/fix/ux-hit-list

UX Hit List

awx/ui/client/features/output/_index.less

@@ -135,6 +135,7 @@
         border-radius: 0;
         border-bottom-right-radius: 4px;
         border-bottom-left-radius: 4px;
+        max-height: ~"calc(100vh - 350px)";
 
         & > table {
             table-layout: fixed;
@@ -300,7 +301,7 @@
     display: grid;
     grid-gap: 20px;
     grid-template-columns: minmax(300px, 1fr) minmax(500px, 2fr);
-    grid-template-rows: minmax(500px, ~"calc(100vh - 140px)");
+    grid-template-rows: minmax(500px, ~"calc(100vh - 130px)");
 
     .at-Panel {
         overflow-y: auto;

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

@@ -120,6 +120,7 @@
 }
 
 .at-Row-toggle {
+    align-self: flex-start;
     margin-right: @at-space-4x;
 }
 

awx/ui/client/lib/theme/_variables.less

@@ -246,7 +246,7 @@
 @at-padding-list-empty: @at-space-2x;
 @at-padding-list-row-item-tag: 0 @at-space-2x;
 @at-padding-list-row-action: 7px;
-@at-padding-list-row: 10px 20px;
+@at-padding-list-row: 10px 20px 10px 10px;
 
 @at-margin-input-message: @at-space;
 @at-margin-item-column: @at-space-3x;
@@ -264,7 +264,7 @@
 
 @at-margin-top-search-key: @at-space-2x;
 
-@at-margin-top-list: @at-space-5x;
+@at-margin-top-list: @at-space-4x;
 @at-margin-bottom-list-toolbar: @at-space-4x;
 @at-margin-left-toolbar-action: @at-space-4x;
 @at-margin-left-toolbar-carat: @at-space;

awx/ui/client/src/home/dashboard/lists/dashboard-list.block.less

@@ -61,7 +61,7 @@
 
 .DashboardList-tableHeader--actions {
     border-top-right-radius: 5px;
-    width: 90px;
+    width: 110px;
     padding-right: 15px;
     text-align: right;
 }

awx/ui/client/src/home/dashboard/lists/job-templates/job-templates-list.partial.html

@@ -32,12 +32,12 @@
               </td>
               <td class="List-actionsContainer">
                   <div class="List-actionButtonCell">
-                      <at-launch-template template="template"
-                          ng-show="template.can_start">
-                      </at-launch-template>
                       <button class="List-actionButton" ng-click="editTemplate(template)">
                           <i class="fa fa-pencil"></i>
                       </button>
+                      <at-launch-template template="template"
+                          ng-show="template.can_start">
+                      </at-launch-template>
                   </div>
                </td>
            </tr>

awx/ui/client/src/inventories-hosts/inventories/inventory.list.js

@@ -93,13 +93,6 @@ export default ['i18n', function(i18n) {
 
         fieldActions: {
             columnClass: 'col-md-2 col-sm-3 col-xs-4',
-            network: {
-                label: i18n._('Network Visualization'),
-                ngClick: 'goToGraph(inventory)',
-                awToolTip: i18n._('Network Visualization'),
-                dataPlacement: 'top',
-                ngShow: '!inventory.pending_deletion'
-            },
             edit: {
                 label: i18n._('Edit'),
                 ngClick: 'editInventory(inventory)',
@@ -107,6 +100,13 @@ export default ['i18n', function(i18n) {
                 dataPlacement: 'top',
                 ngShow: '!inventory.pending_deletion && inventory.summary_fields.user_capabilities.edit'
             },
+            network: {
+                label: i18n._('Network Visualization'),
+                ngClick: 'goToGraph(inventory)',
+                awToolTip: i18n._('Network Visualization'),
+                dataPlacement: 'top',
+                ngShow: '!inventory.pending_deletion'
+            },
             copy: {
                 label: i18n._('Copy'),
                 ngClick: 'copyInventory(inventory)',

awx/ui/client/src/inventories-hosts/inventories/related/hosts/related-host.list.js

@@ -73,6 +73,13 @@ export default ['i18n', function(i18n) {
         fieldActions: {
 
             columnClass: 'col-lg-6 col-md-4 col-sm-4 col-xs-5 text-right',
+            edit: {
+                ngClick: "editHost(host)",
+                icon: 'icon-edit',
+                awToolTip: i18n._('Edit host'),
+                dataPlacement: 'top',
+                ngShow: 'host.summary_fields.user_capabilities.edit'
+            },
             insights: {
                 ngClick: "goToInsights(host)",
                 icon: 'fa-info',
@@ -81,13 +88,6 @@ export default ['i18n', function(i18n) {
                 ngShow: 'host.insights_system_id && host.summary_fields.inventory.hasOwnProperty("insights_credential_id")',
                 ngClass: "{'List-actionButton--selected': $stateParams['host_id'] == host.id && $state.is('inventories.edit.hosts.edit.insights')}"
             },
-            edit: {
-                ngClick: "editHost(host)",
-                icon: 'icon-edit',
-                awToolTip: i18n._('Edit host'),
-                dataPlacement: 'top',
-                ngShow: 'host.summary_fields.user_capabilities.edit'
-            },
             view: {
                 ngClick: "editHost(host)",
                 awToolTip: i18n._('View host'),

awx/ui/client/src/inventories-hosts/inventories/related/sources/sources.list.js

@@ -77,6 +77,13 @@
 
             columnClass: 'col-lg-4 col-md-4 col-sm-4 col-xs-4 text-right',
 
+            edit: {
+                mode: 'all',
+                ngClick: "editSource(inventory_source.id)",
+                awToolTip: i18n._('Edit source'),
+                dataPlacement: "top",
+                ngShow: "inventory_source.summary_fields.user_capabilities.edit"
+            },
             source_update: {
                 mode: 'all',
                 ngClick: 'updateSource(inventory_source)',
@@ -105,13 +112,6 @@
                 dataPlacement: 'top',
                 ngShow: "!(inventory_source.summary_fields.inventory_source.source === '') && inventory_source.summary_fields.user_capabilities.schedule"
             },
-            edit: {
-                mode: 'all',
-                ngClick: "editSource(inventory_source.id)",
-                awToolTip: i18n._('Edit source'),
-                dataPlacement: "top",
-                ngShow: "inventory_source.summary_fields.user_capabilities.edit"
-            },
             view: {
                 mode: 'all',
                 ngClick: "editSource(inventory_source.id)",

awx/ui/client/src/notifications/notificationTemplates.list.js

@@ -59,15 +59,7 @@ export default ['i18n', function(i18n){
         fieldActions: {
 
             columnClass: 'col-md-2 col-sm-3 col-xs-3',
-            test: {
+
-                ngClick: "testNotification(notification_template.id)",
-                icon: 'fa-bell-o',
-                label: i18n._('Edit'),
-                "class": 'btn-sm',
-                awToolTip: i18n._('Test notification'),
-                dataPlacement: 'top',
-                ngShow: 'notification_template.summary_fields.user_capabilities.edit'
-            },
             edit: {
                 ngClick: "editNotification(notification_template.id)",
                 icon: 'fa-edit',
@@ -77,6 +69,15 @@ export default ['i18n', function(i18n){
                 dataPlacement: 'top',
                 ngShow: 'notification_template.summary_fields.user_capabilities.edit'
             },
+            test: {
+                ngClick: "testNotification(notification_template.id)",
+                icon: 'fa-bell-o',
+                label: i18n._('Edit'),
+                "class": 'btn-sm',
+                awToolTip: i18n._('Test notification'),
+                dataPlacement: 'top',
+                ngShow: 'notification_template.summary_fields.user_capabilities.edit'
+            },
             copy: {
                 label: i18n._('Copy'),
                 ngClick: 'copyNotification(notification_template)',

awx/ui/client/src/portal-mode/portal-mode-layout.partial.html

@@ -5,6 +5,11 @@
             </div>
             <div class="PortalMode-panel--right">
                 <div id="portal-container-jobs" class="Panel">
+                    <div class="List-header">
+                        <div class="List-title">
+                            <div class="List-titleText" translate>JOBS</div>
+                        </div>
+                    </div>
                     <div class="PortalMode-filterHolder">
                         <div class="FormToggle-container">
                             <div class="btn-group">

awx/ui/client/src/portal-mode/portal-mode.block.less

@@ -17,7 +17,8 @@
 	}
 
     .List-header {
-        height: 20px;
+		height: 14px;
+		margin-bottom: 20px;
     }
 }
 .PortalMode-panelHeader{

awx/ui/client/src/projects/projects.list.js

@@ -35,7 +35,7 @@ export default ['i18n', function(i18n) {
             name: {
                 key: true,
                 label: i18n._('Name'),
-                columnClass: "col-lg-4 col-md-4 col-sm-5 col-xs-7 List-staticColumnAdjacent",
+                columnClass: "col-lg-4 col-md-4 col-sm-4 col-xs-7 List-staticColumnAdjacent",
                 modalColumnClass: 'col-md-8',
                 awToolTip: '{{project.description | sanitize}}',
                 dataPlacement: 'top'
@@ -44,18 +44,18 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Type'),
                 ngBind: 'project.type_label',
                 excludeModal: true,
-                columnClass: 'col-lg-2 col-md-2 col-sm-3 hidden-xs'
+                columnClass: 'col-lg-2 col-md-2 col-sm-2 hidden-xs'
             },
             scm_revision: {
                 label: i18n._('Revision'),
                 excludeModal: true,
-                columnClass: 'List-tableCell col-lg-4 col-md-2 col-sm-3 hidden-xs',
+                columnClass: 'List-tableCell col-lg-2 col-md-2 hidden-sm hidden-xs',
                 type: 'revision'
             },
             last_updated: {
                 label: i18n._('Last Updated'),
                 filter: "longDate",
-                columnClass: "col-lg-3 col-md-3 hidden-sm hidden-xs",
+                columnClass: "col-lg-3 hidden-md hidden-sm hidden-xs",
                 excludeModal: true,
                 nosort: true
             }
@@ -82,8 +82,13 @@ export default ['i18n', function(i18n) {
 
         fieldActions: {
 
-            columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-5',
+            columnClass: 'col-lg-4 col-md-3 col-sm-4 col-xs-5',
-
+            edit: {
+                ngClick: "editProject(project.id)",
+                awToolTip: i18n._('Edit the project'),
+                dataPlacement: 'top',
+                ngShow: "project.summary_fields.user_capabilities.edit"
+            },
             scm_update: {
                 ngClick: 'SCMUpdate(project.id, $event)',
                 awToolTip: "{{ project.scm_update_tooltip }}",
@@ -108,12 +113,6 @@ export default ['i18n', function(i18n) {
                 dataPlacement: 'top',
                 ngShow: 'project.summary_fields.user_capabilities.copy'
             },
-            edit: {
-                ngClick: "editProject(project.id)",
-                awToolTip: i18n._('Edit the project'),
-                dataPlacement: 'top',
-                ngShow: "project.summary_fields.user_capabilities.edit"
-            },
             view: {
                 ngClick: "editProject(project.id)",
                 awToolTip: i18n._('View the project'),

awx/ui/client/src/scheduler/scheduleToggle.block.less

@@ -15,8 +15,9 @@
     background-color: @default-link;
     margin-top: 2px;
     cursor: pointer;
-    display: inline-block;
+    display: flex;
-    min-width: 42px;
+    justify-content: flex-end;
+    width: 42px;
 
     &.ScheduleToggle--disabled  {
         cursor: not-allowed;
@@ -32,30 +33,27 @@
 .ScheduleToggle-switch {
     color: @default-link;
     background-color: @default-bg;
-    margin-left: 7px;
     border-left: 1px solid @default-link;
-    margin-right: 0px;
     text-align: center;
     text-transform: uppercase;
     font-size: 11px;
     border-top-right-radius: 4px;
     border-bottom-right-radius: 4px;
-    padding-top: 0px;
+    padding: 0px 5px;
     border-top: 0px;
     border-bottom: 0px;
     border-right: 0px;
-    display: inline-block;
+    height: 16px;
-    height: 22px;
+    line-height: 16px;
 }
 
 .ScheduleToggle.is-on {
     border-color: @default-link;
     background-color: @default-bg;
+    justify-content: flex-start;
 }
 
 .ScheduleToggle-switch.is-on {
-    margin-right: 5px;
-    margin-left: 0px;
     background-color: @default-link;
     color: @default-bg;
     border-left: 0;
@@ -63,6 +61,7 @@
     border-bottom-right-radius: 0px;
     border-top-left-radius: 4px;
     border-bottom-left-radius: 4px;
+    padding: 0 7px;
 }
 
 .ScheduleToggle-switch:hover {

awx/ui/client/src/templates/templates.list.js

@@ -76,6 +76,15 @@ export default ['i18n', function(i18n) {
 
             columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-3',
 
+            edit: {
+                label: i18n._('Edit'),
+                ngClick: "editJobTemplate(template)",
+                awToolTip: i18n._('Edit template'),
+                "class": 'btn-default btn-xs',
+                dataPlacement: 'top',
+                ngShow: 'template.summary_fields.user_capabilities.edit',
+                editStateParams: ['job_template_id', 'workflow_job_template_id']
+            },
             submit: {
                 // The submit key lets the list generator know that we want to use the
                 // at-launch-template directive
@@ -95,15 +104,6 @@ export default ['i18n', function(i18n) {
                 dataPlacement: 'top',
                 ngShow: 'template.summary_fields.user_capabilities.copy'
             },
-            edit: {
-                label: i18n._('Edit'),
-                ngClick: "editJobTemplate(template)",
-                awToolTip: i18n._('Edit template'),
-                "class": 'btn-default btn-xs',
-                dataPlacement: 'top',
-                ngShow: 'template.summary_fields.user_capabilities.edit',
-                editStateParams: ['job_template_id', 'workflow_job_template_id']
-            },
             view: {
                 label: i18n._('View'),
                 ngClick: "editJobTemplate(template)",

awx/ui/client/src/workflow-results/standard-out.block.less

@@ -2,122 +2,10 @@
 
 @breakpoint-md: 1180px;
 
-standard-out-log {
-    flex: 5;
-    display: flex;
-    min-height: 0;
-}
-
-.StandardOut-preContent{
-    font-size: 12px;
-    padding: 0 20px 0 20px;
-    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-}
-
-.StandardOut-container {
-    .OnePlusOne-container(100%, @breakpoint-md);
-
-    &.fullscreen {
-        .StandardOut-rightPanel {
-            max-width: 100%;
-        }
-    }
-}
-
-.StandardOut-leftPanel {
-    .OnePlusOne-panel--left(100%, @breakpoint-md);
-    max-width: 600px;
-    display: flex;
-    @media (max-width: @breakpoint-md - 1px) {
-        max-width: 100%;
-    }
-
-    .Panel {
-         height: ~"calc(100% - 20px)";
-         overflow-y: scroll;
-    }
-}
-
-.StandardOut-rightPanel {
-    .OnePlusOne-panel--right(100%, @breakpoint-md);
-    max-width: ~"calc(100% - 615px)";
-    @media (max-width: @breakpoint-md - 1px) {
-        padding-right: 15px;
-    }
-
-    .Panel {
-        display: flex;
-        flex-direction: column;
-        height: ~"calc(100% - 20px)";
-    }
-}
-
 .StandardOut-panelHeader {
     .OnePlusOne-panelHeader
 }
 
-.StandardOut-consoleOutput {
-    margin-top: 25px;
-    border-radius: 5px;
-    width: 100%;
-    overflow: auto;
-}
-
-.StandardOut-details {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    padding-top: 25px;
-}
-
-.StandardOut-detailsRow {
-    width: 100%;
-    display: flex;
-    margin: 0 -15px;
-}
-
-.StandardOut-detailsRow + .StandardOut-detailsRow {
-    margin-top: 20px;
-}
-
-.StandardOut-detailsRow--extraVars {
-    margin: 20px 0;
-    width: 100%;
-}
-
-.StandardOut-extraVarsContainer {
-    width: 100%;
-    padding-right: 15px;
-}
-
-.StandardOut-detailsLabel {
-    text-transform: uppercase;
-    color: @default-interface-txt;
-}
-
-.StandardOut-detailsContent {
-    width: 40%;
-    flex: 1 0 auto;
-    padding: 0px 29px;
-    text-transform: none;
-    word-wrap: break-word;
-}
-
-.StandardOut-statusText {
-    margin-left: 6px;
-}
-
-.StandardOut--capitalize {
-    text-transform: capitalize;
-}
-
-.StandardOut-preContainer {
-    height: 100%;
-    border: 1px solid @d7grey;
-    background: @default-secondary-bg;
-    color: @default-interface-txt;
-}
-
 .StandardOut-panelHeaderText {
     align-items: center;
     flex: 1 0 auto;
@@ -130,10 +18,6 @@ standard-out-log {
     font-size: 12px;
 }
 
-.StandardOut-actions {
-    display: flex;
-}
-
 .StandardOut-actionButton {
     font-size: 16px;
     height: 20px;
@@ -160,13 +44,3 @@ standard-out-log {
 .StandardOut-actionButton + a {
     margin-left: 15px;
 }
-
-.StandardOut-seeMoreLess {
-    color: #337AB7;
-    margin: 4px 0px;
-    text-transform: uppercase;
-    padding: 2px 0px;
-    cursor: pointer;
-    border-radius: 5px;
-    font-size: 11px;
-}