From 4df231917fc9cc7db91f3298d785b543e426b615 Mon Sep 17 00:00:00 2001 From: Michael Abashian Date: Fri, 8 Jan 2016 16:18:43 -0500 Subject: [PATCH] Baseline for styling updates to list view. General styling of action buttons, header tags and the table itself. --- awx/ui/client/legacy-styles/lists.less | 96 +++++++++++++++---- awx/ui/client/legacy-styles/main-layout.less | 10 ++ .../src/bread-crumb/bread-crumb.block.less | 10 +- .../src/bread-crumb/bread-crumb.directive.js | 5 +- .../src/bread-crumb/bread-crumb.partial.html | 6 +- .../dashboard/lists/dashboard-list.block.less | 42 -------- .../job-templates-list.partial.html | 25 +++-- .../lists/jobs/jobs-list.partial.html | 12 +-- awx/ui/client/src/lists/JobTemplates.js | 4 +- awx/ui/client/src/partials/breadcrumb.html | 6 +- awx/ui/client/src/partials/credentials.html | 2 +- awx/ui/client/src/partials/inventories.html | 2 +- awx/ui/client/src/partials/job_templates.html | 2 +- awx/ui/client/src/partials/jobs.html | 2 +- awx/ui/client/src/partials/projects.html | 2 +- awx/ui/client/src/partials/teams.html | 2 +- awx/ui/client/src/partials/users.html | 2 +- .../src/shared/branding/colors.default.less | 41 ++++---- awx/ui/client/src/shared/generator-helpers.js | 2 +- .../list-generator/list-generator.factory.js | 50 +++++----- 20 files changed, 171 insertions(+), 152 deletions(-) diff --git a/awx/ui/client/legacy-styles/lists.less b/awx/ui/client/legacy-styles/lists.less index a7653cb01f..7e3efd7b6f 100644 --- a/awx/ui/client/legacy-styles/lists.less +++ b/awx/ui/client/legacy-styles/lists.less @@ -7,29 +7,87 @@ * */ - .list-well { - margin-top: 20px; + @import "src/shared/branding/colors.default.less"; - table >thead >tr >th { - font-weight: normal; - } - } +// .List-panel { +// background-color: @list-panel-bg; +// border-radius: 5px; +// padding: 20px; +// border: 1px solid @list-panel-border; +// margin-top: 20px; +// } -.is-selected-row, .is-selected-row td { - background-color: #E4F1FF !important; +.List-well { + margin-top: 25px; } -.select-column { - text-align: center; +.List-table{ + width: 100%; + table-layout: fixed; } -th.select-column { - label { - // overrides the default style of - // display: inline-block, which allowed - // margins to push down the label, - // thus breaking the vertical-alignment - // of the cell - display: inline; - } +.List-tableHeader{ + height: 30px; + font-size: 14px; + font-weight: normal; + text-transform: uppercase; + color: @list-header-txt; + background-color: @list-header-bg; + padding-left: 15px; + padding-right: 15px; +} + +.List-tableHeader:first-of-type { + border-top-left-radius: 5px; +} + +.List-tableHeader:last-of-type { + border-top-right-radius: 5px; + text-align: right; +} + +.List-tableRow { + height: 40px; + font-size: 14px; + color: @list-item; +} + +.List-tableRow--evenRow { + background-color: @list-alt-item-bg; +} + +.List-tableCell { + padding-left: 15px; + padding-right: 15px; +} + +.List-actionButtonCell { + padding-top:5px; + padding-right: 15px; + display:flex; + justify-content: flex-end; +} + +.List-actionButton { + font-size: 16px; + height: 30px; + width: 30px; + color: @list-action-icon; + background-color: @list-actn-bg; + border: none; + border-radius: 50%; + transition: background-color 0.2s, border-color 0.2s;; +} + +.List-actionButton:hover { + background-color: @list-actn-bg-hov !important; + color: @list-actn-icn-hov; +} + +.List-actionButton--delete:hover { + background-color: @list-actn-del-bg-hov !important; +} + +.List-actionButton + .List-actionButton { + margin-left: 15px; } diff --git a/awx/ui/client/legacy-styles/main-layout.less b/awx/ui/client/legacy-styles/main-layout.less index e67a4d617e..803d554eaf 100644 --- a/awx/ui/client/legacy-styles/main-layout.less +++ b/awx/ui/client/legacy-styles/main-layout.less @@ -7,6 +7,8 @@ * */ +@import "src/shared/branding/colors.less"; + html { height: 100%; } body { @@ -81,6 +83,14 @@ body { height: 15px; } +.Panel { + background-color: @panel-bg; + border-radius: 5px; + padding: 20px; + border: 1px solid @panel-border; + margin-top: 20px; +} + @media (max-width: 1075px) { #main-menu-container { diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.block.less b/awx/ui/client/src/bread-crumb/bread-crumb.block.less index 77e4c3c2ef..e1397788d0 100644 --- a/awx/ui/client/src/bread-crumb/bread-crumb.block.less +++ b/awx/ui/client/src/bread-crumb/bread-crumb.block.less @@ -41,7 +41,7 @@ flex: initial; } -.BreadCrumb > ol { +.BreadCrumb-list { padding: 0px 20px; list-style: none; background-color: #FFFFFF; @@ -49,21 +49,17 @@ line-height: 40px; } -.BreadCrumb > ol > li { +.BreadCrumb-item { display: inline-block; color: #B7B7B7; } -.BreadCrumb > ol > li + li:before { +.BreadCrumb-item + .BreadCrumb-item:before { content: "/"; padding: 0 5px; color: #B7B7B7; } -.BreadCrumb > ol > li > .active { - color: #123123; -} - @breadcrumb-breakpoint: 900px; @media screen and (max-width: @breadcrumb-breakpoint) { diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.directive.js b/awx/ui/client/src/bread-crumb/bread-crumb.directive.js index 2ffc037268..f7da02fcaa 100644 --- a/awx/ui/client/src/bread-crumb/bread-crumb.directive.js +++ b/awx/ui/client/src/bread-crumb/bread-crumb.directive.js @@ -13,10 +13,7 @@ export default }; scope.isActive = function (path) { - if ($state.current && $state.current.regexp) { - return $state.current.regexp.test(path); - } - return false; + return $state.is(path); }; } }; diff --git a/awx/ui/client/src/bread-crumb/bread-crumb.partial.html b/awx/ui/client/src/bread-crumb/bread-crumb.partial.html index 7a91909d1c..bef217bd04 100644 --- a/awx/ui/client/src/bread-crumb/bread-crumb.partial.html +++ b/awx/ui/client/src/bread-crumb/bread-crumb.partial.html @@ -7,7 +7,7 @@ data-trigger="hover" data-container="body" ng-class="{'BreadCrumb-menuLinkActive' : activityStreamActive}" - ng-if="isActive('/home')" + ng-if="isActive('dashboard')" ng-click="toggleActivityStreamActive()"> @@ -15,12 +15,12 @@ + ng-if="!isActive('dashboard')"> diff --git a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less index 35a5974a33..a8b1ebed58 100644 --- a/awx/ui/client/src/dashboard/lists/dashboard-list.block.less +++ b/awx/ui/client/src/dashboard/lists/dashboard-list.block.less @@ -62,20 +62,6 @@ padding: 20px; } -.DashboardList-table { - width: 100%; - table-layout: fixed; -} - -.DashboardList-tableHeader { - height: 30px; - font-size: 14px; - font-weight: normal; - text-transform: uppercase; - color: @list-header-txt; - background-color: @list-header-bg; -} - .DashboardList-tableHeader--name { border-top-left-radius: 5px; padding-left: 15px; @@ -101,16 +87,6 @@ text-align: right; } -.DashboardList-tableRow { - height: 50px; - font-size: 14px; - color: @list-item; -} - -.DashboardList-tableRow--evenRow { - background-color: @list-alt-item-bg; -} - .DashboardList-status{ padding-right: 5px; } @@ -159,29 +135,11 @@ justify-content: flex-end; } -.DashboardList-actionButton { - font-size: 16px; - height: 30px; - width: 30px; - color: @list-action-icon; - background-color: @list-actn-bg; - border: 1px solid @list-actn-bord; - border-radius: 50%; - transition: background-color 0.2s, border-color 0.2s, color 0.2s; -} - .DashboardList-tableRow--evenRow > .DashboardList-actionButtonCell > .DashboardList-actionButton { background-color: @list-actn-alt-bg; border: 1px solid @list-actn-alt-bord; } -.DashboardList-actionButton:hover { - background-color: @list-actn-bg-hov !important; - border: 1px solid @list-actn-bord-hov !important; - color: @list-actn-icn-hov; - border: none; -} - .DashboardList-actionButton--launch { margin-right: 10px; } diff --git a/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html b/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html index 4c57f4b60c..103de983c9 100644 --- a/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html +++ b/awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html @@ -8,23 +8,23 @@
- - - + - - - - diff --git a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html index 4c4c770387..86235f700f 100644 --- a/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html +++ b/awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html @@ -8,14 +8,14 @@
-
+
Title + Activity + Actions
@@ -34,13 +34,12 @@ - + -
+
- - + + -
Title TimeTitle Time
-
  • +
      +
      2. -
    2. +
    diff --git a/awx/ui/client/src/partials/credentials.html b/awx/ui/client/src/partials/credentials.html index db64ab99c1..d24cb645f2 100644 --- a/awx/ui/client/src/partials/credentials.html +++ b/awx/ui/client/src/partials/credentials.html @@ -1,4 +1,4 @@
    -
    +
    diff --git a/awx/ui/client/src/partials/inventories.html b/awx/ui/client/src/partials/inventories.html index 10c2f9a7a3..78d2be1c99 100644 --- a/awx/ui/client/src/partials/inventories.html +++ b/awx/ui/client/src/partials/inventories.html @@ -1,6 +1,6 @@
    -
    +
    diff --git a/awx/ui/client/src/partials/job_templates.html b/awx/ui/client/src/partials/job_templates.html index 8097ecb546..9aa018d9bc 100644 --- a/awx/ui/client/src/partials/job_templates.html +++ b/awx/ui/client/src/partials/job_templates.html @@ -1,6 +1,6 @@
    -
    +
    diff --git a/awx/ui/client/src/partials/jobs.html b/awx/ui/client/src/partials/jobs.html index bf40e231fe..1c100d120d 100644 --- a/awx/ui/client/src/partials/jobs.html +++ b/awx/ui/client/src/partials/jobs.html @@ -1,5 +1,5 @@
    -
    +
    diff --git a/awx/ui/client/src/partials/projects.html b/awx/ui/client/src/partials/projects.html index e29553bcd8..a841c78152 100644 --- a/awx/ui/client/src/partials/projects.html +++ b/awx/ui/client/src/partials/projects.html @@ -1,6 +1,6 @@
    -
    +
    diff --git a/awx/ui/client/src/partials/teams.html b/awx/ui/client/src/partials/teams.html index ec43954940..5263e08b5b 100644 --- a/awx/ui/client/src/partials/teams.html +++ b/awx/ui/client/src/partials/teams.html @@ -1,4 +1,4 @@
    -
    +
    diff --git a/awx/ui/client/src/partials/users.html b/awx/ui/client/src/partials/users.html index c495d5db22..dbaaee9f93 100644 --- a/awx/ui/client/src/partials/users.html +++ b/awx/ui/client/src/partials/users.html @@ -1,4 +1,4 @@
    -
    +
    diff --git a/awx/ui/client/src/shared/branding/colors.default.less b/awx/ui/client/src/shared/branding/colors.default.less index 07661c8b67..a4c6c72a13 100644 --- a/awx/ui/client/src/shared/branding/colors.default.less +++ b/awx/ui/client/src/shared/branding/colors.default.less @@ -28,24 +28,25 @@ @btn-txt-sel: @default-bg; // lists -@list-empty-txt: @default-interface-txt; -@list-header-bord: @default-bg; -@list-header-bg: #EBEBEB; -@list-header-txt: @default-interface-txt; -@list-header-icon: @default-icon; -@list-item: @default-data-txt; -@list-item-link: @default-link; -@list-item-link-hov: @default-link-hov; -@list-item-bg: @default-bg; -@list-alt-item-bg: @default-tertiary-bg; -@list-action-icon: @default-icon; -@list-actn-bg: @default-bg; -@list-actn-bord: @default-bg; -@list-actn-alt-bg: @default-tertiary-bg; -@list-actn-alt-bord: @default-tertiary-bg; -@list-actn-icn-hov: @default-bg; -@list-actn-bg-hov: @default-link; -@list-actn-bord-hov: @default-link; +@list-empty-txt: @default-interface-txt; +@list-header-bord: @default-bg; +@list-header-bg: #EBEBEB; +@list-header-txt: @default-interface-txt; +@list-header-icon: @default-icon; +@list-item: @default-data-txt; +@list-item-link: @default-link; +@list-item-link-hov: @default-link-hov; +@list-item-bg: @default-bg; +@list-alt-item-bg: @default-tertiary-bg; +@list-action-icon: @default-icon; +@list-actn-bg: inherit; +@list-actn-bord: @default-bg; +@list-actn-alt-bg: @default-tertiary-bg; +@list-actn-alt-bord: @default-tertiary-bg; +@list-actn-icn-hov: @default-bg; +@list-actn-bg-hov: @default-link; +@list-actn-del-bg-hov: @default-err; +@list-actn-bord-hov: @default-link; // tooltups @tooltip-bg: @default-interface-txt; @@ -124,3 +125,7 @@ @db-graph-per-dd-bg-hov:@default-tertiary-bg; @db-graph-axis: @default-border; @db-graph-axis-label: @default-interface-txt; + +// panel +@panel-bg: @default-bg; +@panel-border: @default-border; diff --git a/awx/ui/client/src/shared/generator-helpers.js b/awx/ui/client/src/shared/generator-helpers.js index ca4197243e..40403d4d63 100644 --- a/awx/ui/client/src/shared/generator-helpers.js +++ b/awx/ui/client/src/shared/generator-helpers.js @@ -463,7 +463,7 @@ angular.module('GeneratorHelpers', [systemStatus.name]) } else if (field.type === 'template') { html = Template(field); } else { - html += "
    		• \n"; + html += "
    \n"; } if (options.activityStream) { @@ -416,21 +415,13 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate var extraClasses = list['class']; var multiSelect = list.multiSelect ? 'multi-select-list' : null; - if (options.mode !== 'summary' && options.mode !== 'edit' && (options.mode === 'lookup' || options.id)) { - extraClasses += ' table-hover-inverse'; - } - - if (list.hover) { - extraClasses += ' table-hover'; - } - if (options.mode === 'summary') { extraClasses += ' table-summary'; } return $('') .attr('id', list.name + '_table') - .addClass('table table-condensed') + .addClass('List-table') .addClass(extraClasses) .attr('multi-select-list', multiSelect); @@ -454,18 +445,20 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate innerTable += ", rowBeingEdited === '{{ " + list.iterator + ".id }}' && listBeingEdited === '" + list.name + "' ? 'editedRow' : ''"; innerTable += "]\" "; innerTable += "id=\"{{ " + list.iterator + ".id }}\" "; - innerTable += "class=\"" + list.iterator + "_class\" "; + innerTable += "class=\"List-tableRow " + list.iterator + "_class\" "; + innerTable += "ng-class-odd=\"'List-tableRow--oddRow'\" "; + innerTable += "ng-class-even=\"'List-tableRow--evenRow'\" "; innerTable += "ng-repeat=\"" + list.iterator + " in " + list.name; innerTable += (list.orderBy) ? " | orderBy:'" + list.orderBy + "'" : ""; innerTable += (list.filterBy) ? " | filter: " + list.filterBy : ""; innerTable += "\">\n"; if (list.index) { - innerTable += "\n"; + innerTable += "\n"; } if (list.multiSelect) { - innerTable += ''; + innerTable += ''; } cnt = 2; @@ -486,12 +479,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate if (options.mode === 'select' || options.mode === 'lookup') { if(options.input_type==="radio"){ //added by JT so that lookup forms can be either radio inputs or check box inputs - innerTable += ""; } else { // its assumed that options.input_type = checkbox - innerTable += ""; } @@ -499,7 +492,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate // Row level actions - innerTable += "\n"; - innerTable += "\n"; + innerTable += "\n"; innerTable += "\n"; // Message for loading innerTable += "\n"; - innerTable += "\n"; + innerTable += "\n"; innerTable += "\n"; // End List @@ -610,7 +606,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate } html = "\n"; - html += "\n"; + html += "\n"; if (list.index) { html += "\n"; } @@ -622,7 +618,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate for (fld in list.fields) { if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) && !(options.mode === 'lookup' && list.fields[fld].excludeModal === true)) { - html += ""; + html += ""; } else if (options.mode === 'edit' && list.fieldActions) { - html += "
    {{ $index + ((" + list.iterator + "_page - 1) * " + list.iterator + "_page_size) + 1 }}.{{ $index + ((" + list.iterator + "_page - 1) * " + list.iterator + "_page_size) + 1 }}."; + innerTable += ""; for (field_action in list.fieldActions) { if (field_action !== 'columnClass') { @@ -514,12 +507,15 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate }); } else { fAction = list.fieldActions[field_action]; - innerTable += " " + list.fieldActions[field_action].label + // "" : ""; - innerTable += ""; + innerTable += ""; } } } @@ -550,12 +546,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate // Message for when a collection is empty innerTable += "
    No records matched your search.
    No records matched your search.
    Loading...
    Loading...
    #SelectSelect"; html += (list.fieldActions.label === undefined || list.fieldActions.label) ? "Actions" : "";