External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-08 01:47:35 -02:30
Code Issues Packages Projects Releases Wiki Activity

Baseline for styling updates to list view. General styling of action buttons, header tags and the table itself.

Browse Source
This commit is contained in:
Michael Abashian
2016-01-08 16:18:43 -05:00
parent 1b14d9c12b
commit 4df231917f
20 changed files with 171 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
awx/ui/client/legacy-styles/lists.less
View File

@@ -7,29 +7,87 @@
* *
*/ */
.list-well { @import "src/shared/branding/colors.default.less";
margin-top: 20px;
table >thead >tr >th { // .List-panel {
font-weight: normal; // 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 { .List-well {
background-color: #E4F1FF !important; margin-top: 25px;
} }
.select-column { .List-table{
text-align: center; width: 100%;
table-layout: fixed;
} }
th.select-column { .List-tableHeader{
label { height: 30px;
// overrides the default style of font-size: 14px;
// display: inline-block, which allowed font-weight: normal;
// margins to push down the label, text-transform: uppercase;
// thus breaking the vertical-alignment color: @list-header-txt;
// of the cell background-color: @list-header-bg;
display: inline; 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;
} }

10
awx/ui/client/legacy-styles/main-layout.less
View File

@@ -7,6 +7,8 @@
* *
*/ */
@import "src/shared/branding/colors.less";
html { height: 100%; } html { height: 100%; }
body { body {
@@ -81,6 +83,14 @@ body {
height: 15px; height: 15px;
} }
.Panel {
background-color: @panel-bg;
border-radius: 5px;
padding: 20px;
border: 1px solid @panel-border;
margin-top: 20px;
}
@media (max-width: 1075px) { @media (max-width: 1075px) {
#main-menu-container { #main-menu-container {

10
awx/ui/client/src/bread-crumb/bread-crumb.block.less
View File

@@ -41,7 +41,7 @@
flex: initial; flex: initial;
} }
.BreadCrumb > ol { .BreadCrumb-list {
padding: 0px 20px; padding: 0px 20px;
list-style: none; list-style: none;
background-color: #FFFFFF; background-color: #FFFFFF;
@@ -49,21 +49,17 @@
line-height: 40px; line-height: 40px;
} }
.BreadCrumb > ol > li { .BreadCrumb-item {
display: inline-block; display: inline-block;
color: #B7B7B7; color: #B7B7B7;
} }
.BreadCrumb > ol > li + li:before { .BreadCrumb-item + .BreadCrumb-item:before {
content: "/"; content: "/";
padding: 0 5px; padding: 0 5px;
color: #B7B7B7; color: #B7B7B7;
} }
.BreadCrumb > ol > li > .active {
color: #123123;
}
@breadcrumb-breakpoint: 900px; @breadcrumb-breakpoint: 900px;
@media screen and (max-width: @breadcrumb-breakpoint) { @media screen and (max-width: @breadcrumb-breakpoint) {

5
awx/ui/client/src/bread-crumb/bread-crumb.directive.js
View File

@@ -13,10 +13,7 @@ export default
}; };
scope.isActive = function (path) { scope.isActive = function (path) {
if ($state.current && $state.current.regexp) { return $state.is(path);
return $state.current.regexp.test(path);
}
return false;
}; };
} }
}; };

6
awx/ui/client/src/bread-crumb/bread-crumb.partial.html
View File

@@ -7,7 +7,7 @@
data-trigger="hover" data-trigger="hover"
data-container="body" data-container="body"
ng-class="{'BreadCrumb-menuLinkActive' : activityStreamActive}" ng-class="{'BreadCrumb-menuLinkActive' : activityStreamActive}"
ng-if="isActive('/home')" ng-if="isActive('dashboard')"
ng-click="toggleActivityStreamActive()"> ng-click="toggleActivityStreamActive()">
<i class="BreadCrumb-menuLinkImage icon-activity-stream" <i class="BreadCrumb-menuLinkImage icon-activity-stream"
alt="Activity Stream"> alt="Activity Stream">
@@ -15,12 +15,12 @@
</div> </div>
<a class="BreadCrumb-menuLink" <a class="BreadCrumb-menuLink"
id="bread_crumb_dashboard" id="bread_crumb_dashboard"
ng-href="/#/home" ui-sref="dashboard"
aw-tool-tip="View Dashboard" aw-tool-tip="View Dashboard"
data-placement="left" data-placement="left"
data-trigger="hover" data-trigger="hover"
data-container="body" data-container="body"
ng-if="!isActive('/home')"> ng-if="!isActive('dashboard')">
<i class="BreadCrumb-menuLinkImage fa fa-tachometer" <i class="BreadCrumb-menuLinkImage fa fa-tachometer"
alt="Dashboard"> alt="Dashboard">
</i> </i>

42
awx/ui/client/src/dashboard/lists/dashboard-list.block.less
View File

@@ -62,20 +62,6 @@
padding: 20px; 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 { .DashboardList-tableHeader--name {
border-top-left-radius: 5px; border-top-left-radius: 5px;
padding-left: 15px; padding-left: 15px;
@@ -101,16 +87,6 @@
text-align: right; text-align: right;
} }
.DashboardList-tableRow {
height: 50px;
font-size: 14px;
color: @list-item;
}
.DashboardList-tableRow--evenRow {
background-color: @list-alt-item-bg;
}
.DashboardList-status{ .DashboardList-status{
padding-right: 5px; padding-right: 5px;
} }
@@ -159,29 +135,11 @@
justify-content: flex-end; 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 { .DashboardList-tableRow--evenRow > .DashboardList-actionButtonCell > .DashboardList-actionButton {
background-color: @list-actn-alt-bg; background-color: @list-actn-alt-bg;
border: 1px solid @list-actn-alt-bord; 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 { .DashboardList-actionButton--launch {
margin-right: 10px; margin-right: 10px;
} }

25
awx/ui/client/src/dashboard/lists/job-templates/job-templates-list.partial.html
View File

@@ -8,23 +8,23 @@
</a> </a>
</div> </div>
<div class="DashboardList-container"> <div class="DashboardList-container">
<table class="DashboardList-table"> <table class="List-table">
<tr class="DashboardList-tableHeaderRow"> <tr class="List-tableHeaderRow">
<th class="DashboardList-tableHeader DashboardList-tableHeader--name" <th class="List-tableHeader DashboardList-tableHeader--name"
ng-click="sort('job_templates','name')"> ng-click="sort('job_templates','name')">
Title Title
<i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i> <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i>
</th> </th>
<th class="DashboardList-tableHeader DashboardList-tableHeader--activity"> <th class="List-tableHeader DashboardList-tableHeader--activity">
Activity Activity
</th> </th>
<th class="DashboardList-tableHeader DashboardList-tableHeader--actions"> <th class="List-tableHeader DashboardList-tableHeader--actions">
Actions Actions
</th> </th>
</tr> </tr>
<tr class="DashboardList-tableRow" <tr class="List-tableRow"
ng-class-odd="'DashboardList-tableRow--oddRow'" ng-class-odd="'List-tableRow--oddRow'"
ng-class-even="'DashboardList-tableRow--evenRow'" ng-class-even="'List-tableRow--evenRow'"
ng-repeat = "job_template in job_templates"> ng-repeat = "job_template in job_templates">
<td class="DashboardList-nameCell"> <td class="DashboardList-nameCell">
<a href="#/job_templates/{{ job_template.id }}" class="DashboardList-nameContainer"> <a href="#/job_templates/{{ job_template.id }}" class="DashboardList-nameContainer">
@@ -34,13 +34,12 @@
<td class="DashboardList-activityCell"> <td class="DashboardList-activityCell">
<aw-smart-status jobs="job_template.recent_jobs"></aw-smart-status> <aw-smart-status jobs="job_template.recent_jobs"></aw-smart-status>
</td> </td>
<td class="DashboardList-actionButtonCell"> <td class="List-actionButtonCell">
<button class="DashboardList-actionButton DashboardList-actionButton--launch" ng-click="launchJobTemplate(job_template.id)"> <button class="List-actionButton" ng-click="launchJobTemplate(job_template.id)">
<i class="icon-launch"></i> <i class="icon-launch"></i>
</button> </button>
<button class="DashboardList-actionButton DashboardList-actionButton--edit" <button class="List-actionButton" ng-click="editJobTemplate(job_template.id)">
ng-click="editJobTemplate(job_template.id)"> <i class="fa fa-pencil"></i>
<i class="fa fa-pencil"></i>
</button> </button>
</td> </td>
</tr> </tr>

12
awx/ui/client/src/dashboard/lists/jobs/jobs-list.partial.html
View File

@@ -8,14 +8,14 @@
</a> </a>
</div> </div>
<div class="DashboardList-container"> <div class="DashboardList-container">
<table class="DashboardList-table"> <table class="List-table">
<tr> <tr>
<th class="DashboardList-tableHeader DashboardList-tableHeader--name" ng-click="sort('job_templates','name')">Title <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i></th> <th class="List-tableHeader DashboardList-tableHeader--name" ng-click="sort('job_templates','name')">Title <i class="DashboardList-tableHeaderIcon fa fa-sort-up"></i></th>
<th class="DashboardList-tableHeader DashboardList-tableHeader--time">Time</th> <th class="List-tableHeader DashboardList-tableHeader--time">Time</th>
</tr> </tr>
<tr class="DashboardList-tableRow" <tr class="List-tableRow"
ng-class-odd="'DashboardList-tableRow--oddRow'" ng-class-odd="'List-tableRow--oddRow'"
ng-class-even="'DashboardList-tableRow--evenRow'" ng-class-even="'List-tableRow--evenRow'"
ng-repeat = "job in jobs"> ng-repeat = "job in jobs">
<td class="DashboardList-nameCell"> <td class="DashboardList-nameCell">
<i class="fa <i class="fa

4
awx/ui/client/src/lists/JobTemplates.js
View File

@@ -3,7 +3,7 @@
* *
* All Rights Reserved * All Rights Reserved
*************************************************/ *************************************************/
export default export default
angular.module('JobTemplatesListDefinition', []) angular.module('JobTemplatesListDefinition', [])
@@ -30,7 +30,7 @@ export default
}, },
smart_status: { smart_status: {
label: 'Status', label: 'Status',
columnClass: 'col-lg-1 col-md-2 col-sm-2 col-xs-4', columnClass: 'List-tableCell col-lg-1 col-md-2 col-sm-2 col-xs-4',
searchable: false, searchable: false,
nosort: true, nosort: true,
ngInclude: "'/static/partials/job-template-smart-status.html'", ngInclude: "'/static/partials/job-template-smart-status.html'",

6
awx/ui/client/src/partials/breadcrumb.html
View File

@@ -1,8 +1,8 @@
<ol> <ol class="BreadCrumb-list">
<li ng-repeat="step in steps | limitTo:(steps.length-1)"> <li class="BreadCrumb-item" ng-repeat="step in steps | limitTo:(steps.length-1)">
<a href="{{step.ncyBreadcrumbLink}}" ng-bind-html="step.ncyBreadcrumbLabel"></a> <a href="{{step.ncyBreadcrumbLink}}" ng-bind-html="step.ncyBreadcrumbLabel"></a>
</li> </li>
<li ng-repeat="step in steps | limitTo:-1" class="active"> <li class="BreadCrumb-item" ng-repeat="step in steps | limitTo:-1" class="active">
<span ng-bind-html="step.ncyBreadcrumbLabel"></span> <span ng-bind-html="step.ncyBreadcrumbLabel"></span>
</li> </li>
</ol> </ol>

2
awx/ui/client/src/partials/credentials.html
View File

@@ -1,4 +1,4 @@
<div class="tab-pane" id="credentials"> <div class="tab-pane" id="credentials">
<div ui-view></div> <div ui-view></div>
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
</div> </div>

2
awx/ui/client/src/partials/inventories.html
View File

@@ -1,6 +1,6 @@
<div class="tab-pane" id="inventories"> <div class="tab-pane" id="inventories">
<div ui-view></div> <div ui-view></div>
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
<div id="inventory-edit-modal-dialog"></div> <div id="inventory-edit-modal-dialog"></div>
<div id="scan-jobs-list" style="padding-top:40px"></div> <div id="scan-jobs-list" style="padding-top:40px"></div>
<div ng-include="'/static/partials/logviewer.html'"></div> <div ng-include="'/static/partials/logviewer.html'"></div>

2
awx/ui/client/src/partials/job_templates.html
View File

@@ -1,6 +1,6 @@
<div class="tab-pane" id="job_templates"> <div class="tab-pane" id="job_templates">
<div ui-view></div> <div ui-view></div>
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
<div ng-include="'/static/partials/schedule_dialog.html'"></div> <div ng-include="'/static/partials/schedule_dialog.html'"></div>
<div ng-include="'/static/partials/logviewer.html'"></div> <div ng-include="'/static/partials/logviewer.html'"></div>
<div id="survey-modal-dialog"></div> <div id="survey-modal-dialog"></div>

2
awx/ui/client/src/partials/jobs.html
View File

@@ -1,5 +1,5 @@
<div class="tab-pane" id="jobs-page"> <div class="tab-pane" id="jobs-page">
<div ng-cloak id="htmlTemplate"> <div ng-cloak id="htmlTemplate" class="Panel">
<div class="row"> <div class="row">
<div class="col-md-12" id="breadcrumbs"></div> <div class="col-md-12" id="breadcrumbs"></div>
</div> </div>

2
awx/ui/client/src/partials/projects.html
View File

@@ -1,6 +1,6 @@
<div class="tab-pane" id="projects"> <div class="tab-pane" id="projects">
<div ui-view></div> <div ui-view></div>
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
<div ng-include="'/static/partials/logviewer.html'"></div> <div ng-include="'/static/partials/logviewer.html'"></div>
<div ng-include="'/static/partials/schedule_dialog.html'"></div> <div ng-include="'/static/partials/schedule_dialog.html'"></div>
</div> </div>

2
awx/ui/client/src/partials/teams.html
View File

@@ -1,4 +1,4 @@
<div class="tab-pane" id="teams"> <div class="tab-pane" id="teams">
<div ui-view></div> <div ui-view></div>
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
</div> </div>

2
awx/ui/client/src/partials/users.html
View File

@@ -1,4 +1,4 @@
<div class="tab-pane" id="users"> <div class="tab-pane" id="users">
<div ui-view></div> <div ui-view></div>
<div ng-cloak id="htmlTemplate"></div> <div ng-cloak id="htmlTemplate" class="Panel"></div>
</div> </div>

41
awx/ui/client/src/shared/branding/colors.default.less
View File

@@ -28,24 +28,25 @@
@btn-txt-sel: @default-bg; @btn-txt-sel: @default-bg;
// lists // lists
@list-empty-txt: @default-interface-txt; @list-empty-txt: @default-interface-txt;
@list-header-bord: @default-bg; @list-header-bord: @default-bg;
@list-header-bg: #EBEBEB; @list-header-bg: #EBEBEB;
@list-header-txt: @default-interface-txt; @list-header-txt: @default-interface-txt;
@list-header-icon: @default-icon; @list-header-icon: @default-icon;
@list-item: @default-data-txt; @list-item: @default-data-txt;
@list-item-link: @default-link; @list-item-link: @default-link;
@list-item-link-hov: @default-link-hov; @list-item-link-hov: @default-link-hov;
@list-item-bg: @default-bg; @list-item-bg: @default-bg;
@list-alt-item-bg: @default-tertiary-bg; @list-alt-item-bg: @default-tertiary-bg;
@list-action-icon: @default-icon; @list-action-icon: @default-icon;
@list-actn-bg: @default-bg; @list-actn-bg: inherit;
@list-actn-bord: @default-bg; @list-actn-bord: @default-bg;
@list-actn-alt-bg: @default-tertiary-bg; @list-actn-alt-bg: @default-tertiary-bg;
@list-actn-alt-bord: @default-tertiary-bg; @list-actn-alt-bord: @default-tertiary-bg;
@list-actn-icn-hov: @default-bg; @list-actn-icn-hov: @default-bg;
@list-actn-bg-hov: @default-link; @list-actn-bg-hov: @default-link;
@list-actn-bord-hov: @default-link; @list-actn-del-bg-hov: @default-err;
@list-actn-bord-hov: @default-link;
// tooltups // tooltups
@tooltip-bg: @default-interface-txt; @tooltip-bg: @default-interface-txt;
@@ -124,3 +125,7 @@
@db-graph-per-dd-bg-hov:@default-tertiary-bg; @db-graph-per-dd-bg-hov:@default-tertiary-bg;
@db-graph-axis: @default-border; @db-graph-axis: @default-border;
@db-graph-axis-label: @default-interface-txt; @db-graph-axis-label: @default-interface-txt;
// panel
@panel-bg: @default-bg;
@panel-border: @default-border;

2
awx/ui/client/src/shared/generator-helpers.js
View File

@@ -463,7 +463,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
} else if (field.type === 'template') { } else if (field.type === 'template') {
html = Template(field); html = Template(field);
} else { } else {
html += "<td class=\"" + fld + "-column"; html += "<td class=\"List-tableCell " + fld + "-column";
html += (field['class']) ? " " + field['class'] : ""; html += (field['class']) ? " " + field['class'] : "";
if (options.mode === 'lookup' && field.modalColumnClass) { if (options.mode === 'lookup' && field.modalColumnClass) {
html += " " + field.modalColumnClass; html += " " + field.modalColumnClass;

50
awx/ui/client/src/shared/list-generator/list-generator.factory.js
View File

@@ -42,7 +42,6 @@
* *
* | Attribute | Description | * | Attribute | Description |
* | --------- | ----------- | * | --------- | ----------- |
* | hover | true or false. If true, 'table-hover' class will be added to the &lt;table&gt; element. |
* | index | true or false. If false, the index column, which adds a sequential number to each table row starting with 1, will not be added to the table. | * | index | true or false. If false, the index column, which adds a sequential number to each table row starting with 1, will not be added to the table. |
* | iterator | String containing a descriptive name of a single row in the collection - inventory, organization, credential, etc. Used to generate name and ID attributes in the list HTML. | * | iterator | String containing a descriptive name of a single row in the collection - inventory, organization, credential, etc. Used to generate name and ID attributes in the list HTML. |
* | name | Name of the collection. Generally matches the endpoint name - inventories, organizations, etc. Will match the $scope variable containing the array of rows comprising the collection. | * | name | Name of the collection. Generally matches the endpoint name - inventories, organizations, etc. Will match the $scope variable containing the array of rows comprising the collection. |
@@ -315,7 +314,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
} }
if (options.mode !== 'lookup' && (list.well === undefined || list.well)) { if (options.mode !== 'lookup' && (list.well === undefined || list.well)) {
html += "<div class=\"list-well\">\n"; html += "<div class=\"List-well\">\n";
} }
if (options.activityStream) { if (options.activityStream) {
@@ -416,21 +415,13 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
var extraClasses = list['class']; var extraClasses = list['class'];
var multiSelect = list.multiSelect ? 'multi-select-list' : null; 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') { if (options.mode === 'summary') {
extraClasses += ' table-summary'; extraClasses += ' table-summary';
} }
return $('<table>') return $('<table>')
.attr('id', list.name + '_table') .attr('id', list.name + '_table')
.addClass('table table-condensed') .addClass('List-table')
.addClass(extraClasses) .addClass(extraClasses)
.attr('multi-select-list', multiSelect); .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 += ", rowBeingEdited === '{{ " + list.iterator + ".id }}' && listBeingEdited === '" + list.name + "' ? 'editedRow' : ''";
innerTable += "]\" "; innerTable += "]\" ";
innerTable += "id=\"{{ " + list.iterator + ".id }}\" "; 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 += "ng-repeat=\"" + list.iterator + " in " + list.name;
innerTable += (list.orderBy) ? " | orderBy:'" + list.orderBy + "'" : ""; innerTable += (list.orderBy) ? " | orderBy:'" + list.orderBy + "'" : "";
innerTable += (list.filterBy) ? " | filter: " + list.filterBy : ""; innerTable += (list.filterBy) ? " | filter: " + list.filterBy : "";
innerTable += "\">\n"; innerTable += "\">\n";
if (list.index) { if (list.index) {
innerTable += "<td class=\"index-column hidden-xs\">{{ $index + ((" + list.iterator + "_page - 1) * " + list.iterator + "_page_size) + 1 }}.</td>\n"; innerTable += "<td class=\"index-column hidden-xs List-tableCell\">{{ $index + ((" + list.iterator + "_page - 1) * " + list.iterator + "_page_size) + 1 }}.</td>\n";
} }
if (list.multiSelect) { if (list.multiSelect) {
innerTable += '<td class="col-xs-1 select-column"><select-list-item item=\"' + list.iterator + '\"></select-list-item></td>'; innerTable += '<td class="col-xs-1 select-column List-tableCell"><select-list-item item=\"' + list.iterator + '\"></select-list-item></td>';
} }
cnt = 2; cnt = 2;
@@ -486,12 +479,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
if (options.mode === 'select' || options.mode === 'lookup') { 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 if(options.input_type==="radio"){ //added by JT so that lookup forms can be either radio inputs or check box inputs
innerTable += "<td><input type=\"radio\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" + innerTable += "<td class=\"List-tableCell\"><input type=\"radio\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-value=\"1\" " + list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-value=\"1\" " +
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>"; "ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
} }
else { // its assumed that options.input_type = checkbox else { // its assumed that options.input_type = checkbox
innerTable += "<td><input type=\"checkbox\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" + innerTable += "<td class=\"List-tableCell\"><input type=\"checkbox\" ng-model=\"" + list.iterator + ".checked\" name=\"check_{{" +
list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-true-value=\"1\" " + list.iterator + ".id }}\" ng-click=\"toggle_" + list.iterator + "(" + list.iterator + ".id, true)\" ng-true-value=\"1\" " +
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>"; "ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
} }
@@ -499,7 +492,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
// Row level actions // Row level actions
innerTable += "<td class=\"actions\">"; innerTable += "<td class=\"List-actionButtonCell List-tableCell\">";
for (field_action in list.fieldActions) { for (field_action in list.fieldActions) {
if (field_action !== 'columnClass') { if (field_action !== 'columnClass') {
@@ -514,12 +507,15 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
}); });
} else { } else {
fAction = list.fieldActions[field_action]; fAction = list.fieldActions[field_action];
innerTable += "<a id=\""; innerTable += "<button id=\"";
innerTable += (fAction.id) ? fAction.id : field_action + "-action"; innerTable += (fAction.id) ? fAction.id : field_action + "-action";
innerTable += "\" "; innerTable += "\" ";
innerTable += (fAction.href) ? "href=\"" + fAction.href + "\" " : ""; innerTable += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
innerTable += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : ""; innerTable += (fAction.ngHref) ? "ng-href=\"" + fAction.ngHref + "\" " : "";
innerTable += (field_action === 'cancel') ? "class=\"cancel red-txt\" " : ""; innerTable += "class=\"List-actionButton ";
innerTable += (field_action === 'delete') ? "List-actionButton--delete" : "";
innerTable += (field_action === 'cancel') ? "cancel red-txt" : "";
innerTable += "\" ";
innerTable += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : ""; innerTable += (fAction.awPopOver) ? "aw-pop-over=\"" + fAction.awPopOver + "\" " : "";
innerTable += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : ""; innerTable += (fAction.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
innerTable += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : ""; innerTable += (fAction.dataTitle) ? Attr(fAction, 'dataTitle') : "";
@@ -540,7 +536,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
} }
//html += (fAction.label) ? "<span class=\"list-action-label\"> " + list.fieldActions[field_action].label + //html += (fAction.label) ? "<span class=\"list-action-label\"> " + list.fieldActions[field_action].label +
// "</span>" : ""; // "</span>" : "";
innerTable += "</a>"; innerTable += "</button>";
} }
} }
} }
@@ -550,12 +546,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
// Message for when a collection is empty // Message for when a collection is empty
innerTable += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == false && " + list.name + ".length == 0\">\n"; innerTable += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == false && " + list.name + ".length == 0\">\n";
innerTable += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">No records matched your search.</div></td>\n"; innerTable += "<td colspan=\"" + cnt + "\" class=\"List-tableCell\"><div class=\"loading-info\">No records matched your search.</div></td>\n";
innerTable += "</tr>\n"; innerTable += "</tr>\n";
// Message for loading // Message for loading
innerTable += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == true\">\n"; innerTable += "<tr class=\"loading-info\" ng-show=\"" + list.iterator + "Loading == true\">\n";
innerTable += "<td colspan=\"" + cnt + "\"><div class=\"loading-info\">Loading...</div></td>\n"; innerTable += "<td colspan=\"" + cnt + "\" class=\"List-tableCell\"><div class=\"loading-info\">Loading...</div></td>\n";
innerTable += "</tr>\n"; innerTable += "</tr>\n";
// End List // End List
@@ -610,7 +606,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
} }
html = "<thead>\n"; html = "<thead>\n";
html += "<tr>\n"; html += "<tr class=\"List-tableHeaderRow\">\n";
if (list.index) { if (list.index) {
html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n"; html += "<th class=\"col-lg-1 col-md-1 col-sm-2 hidden-xs\">#</th>\n";
} }
@@ -622,7 +618,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
for (fld in list.fields) { for (fld in list.fields) {
if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) && if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
!(options.mode === 'lookup' && list.fields[fld].excludeModal === true)) { !(options.mode === 'lookup' && list.fields[fld].excludeModal === true)) {
html += "<th class=\"list-header"; html += "<th class=\"List-tableHeader list-header";
if (options.mode === 'lookup' && list.fields[fld].modalColumnClass) { if (options.mode === 'lookup' && list.fields[fld].modalColumnClass) {
html += " " + list.fields[fld].modalColumnClass; html += " " + list.fields[fld].modalColumnClass;
} }
@@ -635,7 +631,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
html += ">"; html += ">";
html += list.fields[fld].label; html += list.fields[fld].label;
if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) { if (list.fields[fld].nosort === undefined || list.fields[fld].nosort !== true) {
html += " <i class=\"fa "; html += "<i class=\"fa ";
if (list.fields[fld].key) { if (list.fields[fld].key) {
if (list.fields[fld].desc) { if (list.fields[fld].desc) {
html += "fa-sort-down"; html += "fa-sort-down";
@@ -651,9 +647,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
} }
} }
if (options.mode === 'select' || options.mode === 'lookup') { if (options.mode === 'select' || options.mode === 'lookup') {
html += "<th class=\"col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>"; html += "<th class=\"List-tableHeader col-lg-1 col-md-1 col-sm-2 col-xs-2\">Select</th>";
} else if (options.mode === 'edit' && list.fieldActions) { } else if (options.mode === 'edit' && list.fieldActions) {
html += "<th class=\"actions-column"; html += "<th class=\"List-tableHeader actions-column";
html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : ""; html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
html += "\">"; html += "\">";
html += (list.fieldActions.label === undefined || list.fieldActions.label) ? "Actions" : ""; html += (list.fieldActions.label === undefined || list.fieldActions.label) ? "Actions" : "";