mirror of
https://github.com/ansible/awx.git
synced 2026-01-15 20:00:43 -03:30
Baseline for styling updates to list view. General styling of action buttons, header tags and the table itself.
This commit is contained in:
Michael Abashian
parent
1b14d9c12b
commit
4df231917f
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
@ -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()">
|
||||
<i class="BreadCrumb-menuLinkImage icon-activity-stream"
|
||||
alt="Activity Stream">
|
||||
@ -15,12 +15,12 @@
|
||||
</div>
|
||||
<a class="BreadCrumb-menuLink"
|
||||
id="bread_crumb_dashboard"
|
||||
ng-href="/#/home"
|
||||
ui-sref="dashboard"
|
||||
aw-tool-tip="View Dashboard"
|
||||
data-placement="left"
|
||||
data-trigger="hover"
|
||||
data-container="body"
|
||||
ng-if="!isActive('/home')">
|
||||
ng-if="!isActive('dashboard')">
|
||||
<i class="BreadCrumb-menuLinkImage fa fa-tachometer"
|
||||
alt="Dashboard">
|
||||
</i>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -8,23 +8,23 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="DashboardList-container">
|
||||
<table class="DashboardList-table">
|
||||
<tr class="DashboardList-tableHeaderRow">
|
||||
<th class="DashboardList-tableHeader DashboardList-tableHeader--name"
|
||||
<table class="List-table">
|
||||
<tr class="List-tableHeaderRow">
|
||||
<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--activity">
|
||||
<th class="List-tableHeader DashboardList-tableHeader--activity">
|
||||
Activity
|
||||
</th>
|
||||
<th class="DashboardList-tableHeader DashboardList-tableHeader--actions">
|
||||
<th class="List-tableHeader DashboardList-tableHeader--actions">
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
<tr class="DashboardList-tableRow"
|
||||
ng-class-odd="'DashboardList-tableRow--oddRow'"
|
||||
ng-class-even="'DashboardList-tableRow--evenRow'"
|
||||
<tr class="List-tableRow"
|
||||
ng-class-odd="'List-tableRow--oddRow'"
|
||||
ng-class-even="'List-tableRow--evenRow'"
|
||||
ng-repeat = "job_template in job_templates">
|
||||
<td class="DashboardList-nameCell">
|
||||
<a href="#/job_templates/{{ job_template.id }}" class="DashboardList-nameContainer">
|
||||
@ -34,13 +34,12 @@
|
||||
<td class="DashboardList-activityCell">
|
||||
<aw-smart-status jobs="job_template.recent_jobs"></aw-smart-status>
|
||||
</td>
|
||||
<td class="DashboardList-actionButtonCell">
|
||||
<button class="DashboardList-actionButton DashboardList-actionButton--launch" ng-click="launchJobTemplate(job_template.id)">
|
||||
<td class="List-actionButtonCell">
|
||||
<button class="List-actionButton" ng-click="launchJobTemplate(job_template.id)">
|
||||
<i class="icon-launch"></i>
|
||||
</button>
|
||||
<button class="DashboardList-actionButton DashboardList-actionButton--edit"
|
||||
ng-click="editJobTemplate(job_template.id)">
|
||||
<i class="fa fa-pencil"></i>
|
||||
<button class="List-actionButton" ng-click="editJobTemplate(job_template.id)">
|
||||
<i class="fa fa-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@ -8,14 +8,14 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="DashboardList-container">
|
||||
<table class="DashboardList-table">
|
||||
<table class="List-table">
|
||||
<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="DashboardList-tableHeader DashboardList-tableHeader--time">Time</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="List-tableHeader DashboardList-tableHeader--time">Time</th>
|
||||
</tr>
|
||||
<tr class="DashboardList-tableRow"
|
||||
ng-class-odd="'DashboardList-tableRow--oddRow'"
|
||||
ng-class-even="'DashboardList-tableRow--evenRow'"
|
||||
<tr class="List-tableRow"
|
||||
ng-class-odd="'List-tableRow--oddRow'"
|
||||
ng-class-even="'List-tableRow--evenRow'"
|
||||
ng-repeat = "job in jobs">
|
||||
<td class="DashboardList-nameCell">
|
||||
<i class="fa
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
*
|
||||
* All Rights Reserved
|
||||
*************************************************/
|
||||
|
||||
|
||||
|
||||
export default
|
||||
angular.module('JobTemplatesListDefinition', [])
|
||||
@ -30,7 +30,7 @@ export default
|
||||
},
|
||||
smart_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,
|
||||
nosort: true,
|
||||
ngInclude: "'/static/partials/job-template-smart-status.html'",
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<ol>
|
||||
<li ng-repeat="step in steps | limitTo:(steps.length-1)">
|
||||
<ol class="BreadCrumb-list">
|
||||
<li class="BreadCrumb-item" ng-repeat="step in steps | limitTo:(steps.length-1)">
|
||||
<a href="{{step.ncyBreadcrumbLink}}" ng-bind-html="step.ncyBreadcrumbLabel"></a>
|
||||
</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>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="tab-pane" id="credentials">
|
||||
<div ui-view></div>
|
||||
<div ng-cloak id="htmlTemplate"></div>
|
||||
<div ng-cloak id="htmlTemplate" class="Panel"></div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="tab-pane" id="inventories">
|
||||
<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="scan-jobs-list" style="padding-top:40px"></div>
|
||||
<div ng-include="'/static/partials/logviewer.html'"></div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="tab-pane" id="job_templates">
|
||||
<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/logviewer.html'"></div>
|
||||
<div id="survey-modal-dialog"></div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<div class="tab-pane" id="jobs-page">
|
||||
<div ng-cloak id="htmlTemplate">
|
||||
<div ng-cloak id="htmlTemplate" class="Panel">
|
||||
<div class="row">
|
||||
<div class="col-md-12" id="breadcrumbs"></div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<div class="tab-pane" id="projects">
|
||||
<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/schedule_dialog.html'"></div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="tab-pane" id="teams">
|
||||
<div ui-view></div>
|
||||
<div ng-cloak id="htmlTemplate"></div>
|
||||
<div ng-cloak id="htmlTemplate" class="Panel"></div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div class="tab-pane" id="users">
|
||||
<div ui-view></div>
|
||||
<div ng-cloak id="htmlTemplate"></div>
|
||||
<div ng-cloak id="htmlTemplate" class="Panel"></div>
|
||||
</div>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -463,7 +463,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
|
||||
} else if (field.type === 'template') {
|
||||
html = Template(field);
|
||||
} else {
|
||||
html += "<td class=\"" + fld + "-column";
|
||||
html += "<td class=\"List-tableCell " + fld + "-column";
|
||||
html += (field['class']) ? " " + field['class'] : "";
|
||||
if (options.mode === 'lookup' && field.modalColumnClass) {
|
||||
html += " " + field.modalColumnClass;
|
||||
|
||||
@ -42,7 +42,6 @@
|
||||
*
|
||||
* | Attribute | Description |
|
||||
* | --------- | ----------- |
|
||||
* | hover | true or false. If true, 'table-hover' class will be added to the <table> 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. |
|
||||
* | 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. |
|
||||
@ -315,7 +314,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
}
|
||||
|
||||
if (options.mode !== 'lookup' && (list.well === undefined || list.well)) {
|
||||
html += "<div class=\"list-well\">\n";
|
||||
html += "<div class=\"List-well\">\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 $('<table>')
|
||||
.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 += "<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) {
|
||||
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;
|
||||
@ -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 += "<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\" " +
|
||||
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
|
||||
}
|
||||
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\" " +
|
||||
"ng-false-value=\"0\" id=\"check_{{" + list.iterator + ".id}}\" /></td>";
|
||||
}
|
||||
@ -499,7 +492,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
|
||||
// Row level actions
|
||||
|
||||
innerTable += "<td class=\"actions\">";
|
||||
innerTable += "<td class=\"List-actionButtonCell List-tableCell\">";
|
||||
|
||||
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 += "<a id=\"";
|
||||
innerTable += "<button id=\"";
|
||||
innerTable += (fAction.id) ? fAction.id : field_action + "-action";
|
||||
innerTable += "\" ";
|
||||
innerTable += (fAction.href) ? "href=\"" + fAction.href + "\" " : "";
|
||||
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.dataPlacement) ? Attr(fAction, 'dataPlacement') : "";
|
||||
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 +
|
||||
// "</span>" : "";
|
||||
innerTable += "</a>";
|
||||
innerTable += "</button>";
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -550,12 +546,12 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
|
||||
// Message for when a collection is empty
|
||||
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";
|
||||
|
||||
// Message for loading
|
||||
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";
|
||||
|
||||
// End List
|
||||
@ -610,7 +606,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
}
|
||||
|
||||
html = "<thead>\n";
|
||||
html += "<tr>\n";
|
||||
html += "<tr class=\"List-tableHeaderRow\">\n";
|
||||
if (list.index) {
|
||||
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) {
|
||||
if ((list.fields[fld].searchOnly === undefined || list.fields[fld].searchOnly === false) &&
|
||||
!(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) {
|
||||
html += " " + list.fields[fld].modalColumnClass;
|
||||
}
|
||||
@ -635,7 +631,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
html += ">";
|
||||
html += list.fields[fld].label;
|
||||
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].desc) {
|
||||
html += "fa-sort-down";
|
||||
@ -651,9 +647,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
|
||||
}
|
||||
}
|
||||
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) {
|
||||
html += "<th class=\"actions-column";
|
||||
html += "<th class=\"List-tableHeader actions-column";
|
||||
html += (list.fieldActions && list.fieldActions.columnClass) ? " " + list.fieldActions.columnClass : "";
|
||||
html += "\">";
|
||||
html += (list.fieldActions.label === undefined || list.fieldActions.label) ? "Actions" : "";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user