mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-04 07:08:34 +02:00
Converted grid-field to table markup and SCSS to BEM
Also added tab index
This commit is contained in:
parent
ccb4041326
commit
7f59a7e6f7
@ -5,7 +5,7 @@ class AccordionItem extends SilverStripeComponent {
|
|||||||
render() {
|
render() {
|
||||||
let className = `list-group-item ${this.props.className}`;
|
let className = `list-group-item ${this.props.className}`;
|
||||||
return (
|
return (
|
||||||
<a className={className}>
|
<a tabIndex="0" className={className}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
|
@ -10,7 +10,7 @@ class GridFieldActionComponent extends SilverStripeComponent {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
className={`grid-field-action-component font-icon-${this.props.icon}`}
|
className={`grid-field__icon-action font-icon-${this.props.icon}`}
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
@ -10,12 +10,12 @@ class GridFieldCellComponent extends SilverStripeComponent {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
const props = {
|
const props = {
|
||||||
className: `grid-field-cell-component ${this.props.className}`,
|
className: `grid-field__cell ${this.props.className}`,
|
||||||
onClick: this.handleDrillDown,
|
onClick: this.handleDrillDown,
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div {...props}>{this.props.children}</div>
|
<td {...props}>{this.props.children}</td>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,7 +5,7 @@ class GridFieldHeaderCellComponent extends SilverStripeComponent {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="grid-field-header-cell-component">{this.props.children}</div>
|
<th>{this.props.children}</th>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -50,7 +50,7 @@ class GridField extends SilverStripeComponent {
|
|||||||
const columns = this.props.data.columns;
|
const columns = this.props.data.columns;
|
||||||
|
|
||||||
// Placeholder to align the headers correctly with the content
|
// Placeholder to align the headers correctly with the content
|
||||||
const actionPlaceholder = <span key={'actionPlaceholder'} />;
|
const actionPlaceholder = <th className={'grid-field__action-placeholder'} ></th>;
|
||||||
const headerCells = columns.map((column, i) =>
|
const headerCells = columns.map((column, i) =>
|
||||||
<GridFieldHeaderCell key={i}>{column.name}</GridFieldHeaderCell>
|
<GridFieldHeaderCell key={i}>{column.name}</GridFieldHeaderCell>
|
||||||
);
|
);
|
||||||
@ -64,7 +64,7 @@ class GridField extends SilverStripeComponent {
|
|||||||
const val = column.field.split('.').reduce((a, b) => a[b], record);
|
const val = column.field.split('.').reduce((a, b) => a[b], record);
|
||||||
const cellProps = {
|
const cellProps = {
|
||||||
handleDrillDown: handleDrillDown ? (event) => handleDrillDown(event, record) : null,
|
handleDrillDown: handleDrillDown ? (event) => handleDrillDown(event, record) : null,
|
||||||
className: handleDrillDown ? 'grid-field-cell-component--drillable' : '',
|
className: handleDrillDown ? 'grid-field__cell--drillable' : '',
|
||||||
key: j,
|
key: j,
|
||||||
width: column.width,
|
width: column.width,
|
||||||
};
|
};
|
||||||
@ -82,19 +82,19 @@ class GridField extends SilverStripeComponent {
|
|||||||
handleClick={this.editRecord}
|
handleClick={this.editRecord}
|
||||||
key={`action-${i}-edit`}
|
key={`action-${i}-edit`}
|
||||||
record={record}
|
record={record}
|
||||||
/>,
|
/>
|
||||||
<GridFieldAction
|
<GridFieldAction
|
||||||
icon={'cancel'}
|
icon={'cancel'}
|
||||||
handleClick={this.deleteRecord}
|
handleClick={this.deleteRecord}
|
||||||
key={`action-${i}-delete`}
|
key={`action-${i}-delete`}
|
||||||
record={record}
|
record={record}
|
||||||
/>,
|
/>
|
||||||
</GridFieldCell>
|
</GridFieldCell>
|
||||||
);
|
);
|
||||||
|
|
||||||
const rowProps = {
|
const rowProps = {
|
||||||
key: i,
|
key: i,
|
||||||
className: handleDrillDown ? 'grid-field-row-component--drillable' : '',
|
className: handleDrillDown ? 'grid-field__row--drillable' : '',
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -4,8 +4,8 @@ import SilverStripeComponent from 'silverstripe-component';
|
|||||||
class GridFieldRowComponent extends SilverStripeComponent {
|
class GridFieldRowComponent extends SilverStripeComponent {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const className = `grid-field-row-component [ list-group-item ] ${this.props.className}`;
|
const className = `grid-field__row ${this.props.className}`;
|
||||||
return <li className={className}>{this.props.children}</li>;
|
return <tr tabIndex="0" className={className}>{this.props.children}</tr>;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,99 +1,98 @@
|
|||||||
.grid-field-action-component {
|
// Grid-field
|
||||||
|
// Extends basic table styles, requires .table .table-hover
|
||||||
|
|
||||||
|
.grid-field__table {
|
||||||
|
// Todo: Add extends
|
||||||
|
// @extend .table;
|
||||||
|
// @extend .table-hover;
|
||||||
|
}
|
||||||
|
.grid-field__row--drillable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.grid-field__cell[data-reactid$=-actions] {
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
.grid-field__icon-action {
|
||||||
background: none;
|
background: none;
|
||||||
border: 0;
|
border: 0;
|
||||||
color: $body-color;
|
color: lighten($body-color, 10%);
|
||||||
padding: 0 $spacer-x/2;
|
padding: $spacer-y $spacer-x/2;
|
||||||
height: 20px;
|
margin-top: -$spacer-y;
|
||||||
|
margin-bottom: -$spacer-y;
|
||||||
|
height: #{$line-height-base + $table-cell-padding*2};
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: darken($body-color, 10%);
|
color: $body-color;
|
||||||
|
background: darken($body-bg,3%);
|
||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-field-cell-component {
|
// Responsive grid-field
|
||||||
display: table-cell;
|
// Todo:
|
||||||
padding: $spacer-y $spacer-x;
|
// * replace with mixins - @include media-breakpoint-down(sm)
|
||||||
line-height: 20px;
|
// * add .text-truncate for overflowing cells
|
||||||
|
@media (max-width: 47.9em) {
|
||||||
&:first-child {
|
.grid-field__table td,
|
||||||
padding-left: #{$spacer-x + $spacer-x*.25};
|
.grid-field__table th {
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: #{$spacer-x + $spacer-x*.25};
|
|
||||||
width: 1px;
|
|
||||||
|
|
||||||
span { // TEMP, remove commas in js
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) {
|
&:first-child {
|
||||||
text-align: center;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-reactid$=actionPlaceholder] {
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&[data-reactid$=-actions] {
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-field-header-cell-component {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: $font-size-sm;
|
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
padding: $spacer-y $spacer-x;
|
|
||||||
line-height: 20px;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
padding-left: $grid-x*2.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child {
|
|
||||||
padding-right: $grid-x*2.5;
|
|
||||||
width: 1px !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-field-table-component {
|
|
||||||
border-collapse: collapse;
|
|
||||||
|
|
||||||
li.grid-field-row-component {
|
|
||||||
display: table-row;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
// Header row
|
|
||||||
&:first-child {
|
|
||||||
background: none;
|
|
||||||
border-bottom: 1px solid $border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Drillable rows highlight on hover
|
|
||||||
&--drillable:hover {
|
|
||||||
color: #555;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
|
|
||||||
.grid-field-cell-component--drillable {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
}
|
||||||
|
&.grid-field__cell[data-reactid$=-actions],
|
||||||
|
&.grid-field__action-placeholder {
|
||||||
|
display: table-cell;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.grid-field-table-component {
|
|
||||||
display: table;
|
// OLD gridfield makeover - currently not in use.
|
||||||
|
// Replace .ss-gridfield-table with .grid-field & .table
|
||||||
|
// Has known scroll bugs
|
||||||
|
.grid-field {
|
||||||
|
|
||||||
|
.ss-gridfield-sort { // Todo: rename to grid-filed__sort
|
||||||
|
background: transparent url(../images/arrows.png) no-repeat right -1px;
|
||||||
|
border: none;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
text-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
.ui-button-text {
|
||||||
|
padding: 0;
|
||||||
|
line-height: 20px;
|
||||||
|
color: $body-color-light;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
background: transparent url(../images/arrows.png) no-repeat right -41px;
|
||||||
|
}
|
||||||
|
&.ss-gridfield-sorted-asc,
|
||||||
|
&.ss-gridfield-sorted-asc:hover {
|
||||||
|
background-position-y: -118px;
|
||||||
|
}
|
||||||
|
&.ss-gridfield-sorted-desc,
|
||||||
|
&.ss-gridfield-sorted-desc:hover {
|
||||||
|
background-position-y: -78px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
thead tr.title th {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: none;
|
||||||
|
border-bottom: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -5,10 +5,12 @@ class GridFieldTableComponent extends SilverStripeComponent {
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<ul className="grid-field-table-component [ list-group ]">
|
<div className="container-fluid grid-field">
|
||||||
{this.generateHeader()}
|
<table className="table table-hover grid-field__table">
|
||||||
{this.generateRows()}
|
<thead>{this.generateHeader()}</thead>
|
||||||
</ul>
|
<tbody>{this.generateRows()}</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
37
admin/javascript/src/styles/_typography.scss
Normal file
37
admin/javascript/src/styles/_typography.scss
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
// Tables
|
||||||
|
// Used as a base for components: Grid-field.
|
||||||
|
|
||||||
|
.table {
|
||||||
|
margin-left: -$spacer-x;
|
||||||
|
margin-right: -$spacer-x;
|
||||||
|
min-width: calc(100% + #{$spacer-x*2});
|
||||||
|
|
||||||
|
thead th {
|
||||||
|
background-color: $body-bg;
|
||||||
|
border-bottom: $table-border-width solid $table-border-color;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
border-top: 0;
|
||||||
|
border-bottom: $table-border-width solid $table-border-color;
|
||||||
|
line-height: 20px;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
padding-left: #{$spacer-x + $spacer-x*.25};
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
padding-right: #{$spacer-x + $spacer-x*.25};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tfoot {
|
||||||
|
background-color: transparent;
|
||||||
|
font-size: $font-size-sm;
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: 0;
|
||||||
|
background-color: $body-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,3 +1,8 @@
|
|||||||
|
/** -----------------------------
|
||||||
|
* Base styles
|
||||||
|
* ------------------------------ */
|
||||||
|
@import "_typography.scss";
|
||||||
|
|
||||||
/** -----------------------------
|
/** -----------------------------
|
||||||
* Sections
|
* Sections
|
||||||
* ------------------------------ */
|
* ------------------------------ */
|
||||||
|
@ -97,8 +97,8 @@ $border-width: 1px;
|
|||||||
|
|
||||||
$body-bg: #f6f7f8;
|
$body-bg: #f6f7f8;
|
||||||
$body-color: $gray-dark;
|
$body-color: $gray-dark;
|
||||||
$body-color-light: lighten($body-color,10);
|
$body-color-light: lighten($gray-dark, 10);
|
||||||
$body-color-lighter: lighten($body-color,20);
|
$body-color-lightest: lighten($gray-dark, 20);
|
||||||
|
|
||||||
|
|
||||||
// Links
|
// Links
|
||||||
@ -185,14 +185,14 @@ $font-size-h6: 12px; /* 1rem; */
|
|||||||
// $display3-weight: 300;
|
// $display3-weight: 300;
|
||||||
// $display4-weight: 300;
|
// $display4-weight: 300;
|
||||||
|
|
||||||
$line-height: 1.538; /* relative to font-size */
|
$line-height: 1.538;
|
||||||
$line-height-base: 20px; /* can be used with varying font-sizes, holds grid sizing */
|
$line-height-base: 20px; /* can be used with varying font-sizes, holds grid sizing */
|
||||||
|
|
||||||
$headings-margin-bottom: $spacer;
|
$headings-margin-bottom: $spacer;
|
||||||
$headings-font-family: inherit;
|
// $headings-font-family: inherit;
|
||||||
$headings-font-weight: 500;
|
// $headings-font-weight: 500;
|
||||||
$headings-line-height: 1.3;
|
// $headings-line-height: 1.1;
|
||||||
$headings-color: inherit;
|
// $headings-color: inherit;
|
||||||
//
|
//
|
||||||
// $lead-font-size: 1.25rem;
|
// $lead-font-size: 1.25rem;
|
||||||
// $lead-font-weight: 300;
|
// $lead-font-weight: 300;
|
||||||
@ -237,13 +237,13 @@ $text-muted: #7f8b97;
|
|||||||
//
|
//
|
||||||
// Customizes the `.table` component with basic values, each used across all table variations.
|
// Customizes the `.table` component with basic values, each used across all table variations.
|
||||||
|
|
||||||
$table-cell-padding: .75rem;
|
$table-cell-padding: 16px; // update to $spacer
|
||||||
$table-sm-cell-padding: .3rem;
|
$table-sm-cell-padding: 12px; // update to $spacer
|
||||||
|
|
||||||
$table-bg: transparent;
|
$table-bg: #FFF;
|
||||||
$table-bg-accent: #f9f9f9;
|
$table-bg-accent: #f9f9f9;
|
||||||
$table-bg-hover: #f5f5f5;
|
$table-bg-hover: #f5f5f5;
|
||||||
$table-bg-active: $table-bg-hover;
|
$table-bg-active: $brand-primary;
|
||||||
|
|
||||||
$table-border-width: $border-width;
|
$table-border-width: $border-width;
|
||||||
$table-border-color: $gray-lighter;
|
$table-border-color: $gray-lighter;
|
||||||
@ -303,9 +303,9 @@ $btn-danger-border: transparent;
|
|||||||
|
|
||||||
// Forms
|
// Forms
|
||||||
|
|
||||||
$input-padding-x: .75rem;
|
// $input-padding-x: .75rem;
|
||||||
$input-padding-y: .54rem; //.375rem;
|
// $input-padding-y: .375rem;
|
||||||
|
//
|
||||||
// $input-bg: #fff;
|
// $input-bg: #fff;
|
||||||
// $input-bg-disabled: $gray-lighter;
|
// $input-bg-disabled: $gray-lighter;
|
||||||
//
|
//
|
||||||
@ -386,10 +386,10 @@ $input-padding-y: .54rem; //.375rem;
|
|||||||
|
|
||||||
$navbar-height: 52px;
|
$navbar-height: 52px;
|
||||||
$navbar-total-height: 53px;
|
$navbar-total-height: 53px;
|
||||||
$navbar-border-radius: 0;
|
// $navbar-border-radius: $border-radius;
|
||||||
$navbar-padding-horizontal: $spacer;
|
// $navbar-padding-horizontal: $spacer;
|
||||||
$navbar-padding-vertical: ($spacer / 2);
|
// $navbar-padding-vertical: ($spacer / 2);
|
||||||
|
//
|
||||||
// $navbar-dark-color: rgba(255,255,255,.5);
|
// $navbar-dark-color: rgba(255,255,255,.5);
|
||||||
// $navbar-dark-hover-color: rgba(255,255,255,.75);
|
// $navbar-dark-hover-color: rgba(255,255,255,.75);
|
||||||
// $navbar-dark-active-color: rgba(255,255,255,1);
|
// $navbar-dark-active-color: rgba(255,255,255,1);
|
||||||
@ -403,23 +403,23 @@ $navbar-padding-vertical: ($spacer / 2);
|
|||||||
|
|
||||||
// Navs
|
// Navs
|
||||||
|
|
||||||
$nav-link-padding: 12px 8px;
|
// $nav-link-padding: .5em 1em;
|
||||||
$nav-link-hover-bg: red; //$gray-lighter;
|
// $nav-link-hover-bg: $gray-lighter;
|
||||||
|
//
|
||||||
$nav-disabled-link-color: $text-muted;
|
// $nav-disabled-link-color: $gray-light;
|
||||||
$nav-disabled-link-hover-color: $text-muted;
|
// $nav-disabled-link-hover-color: $gray-light;
|
||||||
|
//
|
||||||
$nav-tabs-border-color: #d9dee2;
|
// $nav-tabs-border-color: #ddd;
|
||||||
|
//
|
||||||
$nav-tabs-link-border-width: 0;
|
// $nav-tabs-link-border-width: $border-width;
|
||||||
$nav-tabs-link-hover-border-color: green; //$gray-lighter;
|
// $nav-tabs-link-hover-border-color: $gray-lighter;
|
||||||
|
//
|
||||||
$nav-tabs-active-link-hover-bg: $body-bg;
|
// $nav-tabs-active-link-hover-bg: $body-bg;
|
||||||
$nav-tabs-active-link-hover-color: $body-color;
|
// $nav-tabs-active-link-hover-color: $gray;
|
||||||
$nav-tabs-active-link-hover-border-color: #ddd;
|
// $nav-tabs-active-link-hover-border-color: #ddd;
|
||||||
|
//
|
||||||
$nav-tabs-justified-link-border-color: #ddd;
|
// $nav-tabs-justified-link-border-color: #ddd;
|
||||||
$nav-tabs-justified-active-link-border-color: $body-bg;
|
// $nav-tabs-justified-active-link-border-color: $body-bg;
|
||||||
//
|
//
|
||||||
// $nav-pills-border-radius: $border-radius;
|
// $nav-pills-border-radius: $border-radius;
|
||||||
// $nav-pills-active-link-hover-bg: $component-active-bg;
|
// $nav-pills-active-link-hover-bg: $component-active-bg;
|
||||||
@ -643,8 +643,13 @@ $nav-tabs-justified-active-link-border-color: $body-bg;
|
|||||||
|
|
||||||
// Breadcrumbs
|
// Breadcrumbs
|
||||||
|
|
||||||
$breadcrumb-padding-vertical: 6px;
|
// $breadcrumb-padding-vertical: .75rem;
|
||||||
$breadcrumb-padding-horizontal: 0;
|
// $breadcrumb-padding-horizontal: 1rem;
|
||||||
|
//
|
||||||
|
// $breadcrumb-bg: $gray-lighter;
|
||||||
|
// $breadcrumb-divider-color: $gray-light;
|
||||||
|
// $breadcrumb-active-color: $gray-light;
|
||||||
|
// $breadcrumb-divider: "/";
|
||||||
|
|
||||||
$breadcrumb-bg: transparent;
|
$breadcrumb-bg: transparent;
|
||||||
$breadcrumb-divider-color: $border-color-dark;
|
$breadcrumb-divider-color: $border-color-dark;
|
||||||
|
Loading…
Reference in New Issue
Block a user