tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-07-02 17:39:30 +02:00
Code Issues Projects Releases Wiki Activity

Converted grid-field to table markup and SCSS to BEM

Browse Source 
Also added tab index
This commit is contained in:
Paul Clarke 2016-04-15 12:28:56 +12:00 committed by Ingo Schommer
parent ccb4041326
commit 7f59a7e6f7
12 changed files with 177 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/javascript/src/components/accordion/item.js
View File

@ -5,7 +5,7 @@ class AccordionItem extends SilverStripeComponent {
render() {
let className = `list-group-item ${this.props.className}`;
return (
<a className={className}>
<a tabIndex="0" className={className}>
{this.props.children}
</a>
);

2
admin/javascript/src/components/grid-field/action.js
View File

@ -10,7 +10,7 @@ class GridFieldActionComponent extends SilverStripeComponent {
render() {
return (
<button
className={`grid-field-action-component font-icon-${this.props.icon}`}
className={`grid-field__icon-action font-icon-${this.props.icon}`}
onClick={this.handleClick}
/>
);

4
admin/javascript/src/components/grid-field/cell.js
View File

@ -10,12 +10,12 @@ class GridFieldCellComponent extends SilverStripeComponent {
render() {
const props = {
className: `grid-field-cell-component ${this.props.className}`,
className: `grid-field__cell ${this.props.className}`,
onClick: this.handleDrillDown,
};
return (
<div {...props}>{this.props.children}</div>
<td {...props}>{this.props.children}</td>
);
}

2
admin/javascript/src/components/grid-field/header-cell.js
View File

@ -5,7 +5,7 @@ class GridFieldHeaderCellComponent extends SilverStripeComponent {
render() {
return (
<div className="grid-field-header-cell-component">{this.props.children}</div>
<th>{this.props.children}</th>
);
}

10
admin/javascript/src/components/grid-field/index.js
View File

@ -50,7 +50,7 @@ class GridField extends SilverStripeComponent {
const columns = this.props.data.columns;
// 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) =>
<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 cellProps = {
handleDrillDown: handleDrillDown ? (event) => handleDrillDown(event, record) : null,
className: handleDrillDown ? 'grid-field-cell-component--drillable' : '',
className: handleDrillDown ? 'grid-field__cell--drillable' : '',
key: j,
width: column.width,
};
@ -82,19 +82,19 @@ class GridField extends SilverStripeComponent {
handleClick={this.editRecord}
key={`action-${i}-edit`}
record={record}
/>,
/>
<GridFieldAction
icon={'cancel'}
handleClick={this.deleteRecord}
key={`action-${i}-delete`}
record={record}
/>,
/>
</GridFieldCell>
);
const rowProps = {
key: i,
className: handleDrillDown ? 'grid-field-row-component--drillable' : '',
className: handleDrillDown ? 'grid-field__row--drillable' : '',
};
return (

4
admin/javascript/src/components/grid-field/row.js
View File

@ -4,8 +4,8 @@ import SilverStripeComponent from 'silverstripe-component';
class GridFieldRowComponent extends SilverStripeComponent {
render() {
const className = `grid-field-row-component [ list-group-item ] ${this.props.className}`;
return <li className={className}>{this.props.children}</li>;
const className = `grid-field__row ${this.props.className}`;
return <tr tabIndex="0" className={className}>{this.props.children}</tr>;
}
}

149
admin/javascript/src/components/grid-field/styles.scss
View File

@ -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;
border: 0;
color: $body-color;
padding: 0 $spacer-x/2;
height: 20px;
color: lighten($body-color, 10%);
padding: $spacer-y $spacer-x/2;
margin-top: -$spacer-y;
margin-bottom: -$spacer-y;
height: #{$line-height-base + $table-cell-padding*2};
vertical-align: top;
&:hover {
color: darken($body-color, 10%);
color: $body-color;
background: darken($body-bg,3%);
}
&::before {
font-size: 20px;
}
}
.grid-field-cell-component {
display: table-cell;
padding: $spacer-y $spacer-x;
line-height: 20px;
// Responsive grid-field
// Todo:
// * replace with mixins - @include media-breakpoint-down(sm)
// * add .text-truncate for overflowing cells
@media (max-width: 47.9em) {
.grid-field__table td,
.grid-field__table th {
display: none;
&:first-child {
padding-left: #{$spacer-x + $spacer-x*.25};
display: table-cell;
}
&:last-child {
padding-right: #{$spacer-x + $spacer-x*.25};
width: 1px;
span { // TEMP, remove commas in js
display: none;
}
}
&:nth-child(2) {
text-align: center;
width: 1px;
}
&[data-reactid$=actionPlaceholder] {
width: 1px;
}
&[data-reactid$=-actions] {
white-space: nowrap;
&.grid-field__cell[data-reactid$=-actions],
&.grid-field__action-placeholder {
display: table-cell;
}
}
}
.grid-field-header-cell-component {
text-transform: uppercase;
font-size: $font-size-sm;
display: table-cell;
padding: $spacer-y $spacer-x;
line-height: 20px;
&:first-child {
padding-left: $grid-x*2.5;
}
// OLD gridfield makeover - currently not in use.
// Replace .ss-gridfield-table with .grid-field & .table
// Has known scroll bugs
.grid-field {
&:last-child {
padding-right: $grid-x*2.5;
width: 1px !important;
}
}
.ss-gridfield-sort { // Todo: rename to grid-filed__sort
background: transparent url(../images/arrows.png) no-repeat right -1px;
border: none;
width: 100%;
padding: 0;
text-shadow: none;
border-radius: 0;
text-transform: uppercase;
font-weight: normal;
text-align: left;
.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;
.ui-button-text {
padding: 0;
line-height: 20px;
color: $body-color-light;
}
// Header row
&:first-child {
background: none;
border-bottom: 1px solid $border-color;
}
&: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;
}
}
// Drillable rows highlight on hover
&--drillable:hover {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
.grid-field-cell-component--drillable {
cursor: pointer;
}
}
}
}
.grid-field-table-component {
display: table;
width: 100%;
thead tr.title th {
font-size: 15px;
font-weight: bold;
text-transform: none;
border-bottom: 0;
padding-bottom: 0;
}
}

10
admin/javascript/src/components/grid-field/table.js
View File

@ -5,10 +5,12 @@ class GridFieldTableComponent extends SilverStripeComponent {
render() {
return (
<ul className="grid-field-table-component [ list-group ]">
{this.generateHeader()}
{this.generateRows()}
</ul>
<div className="container-fluid grid-field">
<table className="table table-hover grid-field__table">
<thead>{this.generateHeader()}</thead>
<tbody>{this.generateRows()}</tbody>
</table>
</div>
);
}

2
admin/javascript/src/sections/campaign-admin/styles.scss
View File

@ -9,7 +9,7 @@
background-color: #f6f7f8;
z-index: 2;
transition: width .2s;
padding-bottom: $navbar-height +1; // incl border
padding-bottom: $navbar-height+1; // incl border
}
.campaign-items {

37
admin/javascript/src/styles/_typography.scss Normal file
View 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;
}
}
}

5
admin/javascript/src/styles/main.scss
View File

@ -1,4 +1,9 @@
/** -----------------------------
* Base styles
* ------------------------------ */
@import "_typography.scss";
/** -----------------------------
* Sections
* ------------------------------ */
@import "../sections/campaign-admin/styles";

79
admin/scss/bootstrap/_variables.scss
View File

@ -97,8 +97,8 @@ $border-width: 1px;
$body-bg: #f6f7f8;
$body-color: $gray-dark;
$body-color-light: lighten($body-color,10);
$body-color-lighter: lighten($body-color,20);
$body-color-light: lighten($gray-dark, 10);
$body-color-lightest: lighten($gray-dark, 20);
// Links
@ -185,14 +185,14 @@ $font-size-h6: 12px; /* 1rem; */
// $display3-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 */
$headings-margin-bottom: $spacer;
$headings-font-family: inherit;
$headings-font-weight: 500;
$headings-line-height: 1.3;
$headings-color: inherit;
// $headings-font-family: inherit;
// $headings-font-weight: 500;
// $headings-line-height: 1.1;
// $headings-color: inherit;
//
// $lead-font-size: 1.25rem;
// $lead-font-weight: 300;
@ -237,13 +237,13 @@ $text-muted: #7f8b97;
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-cell-padding: .75rem;
$table-sm-cell-padding: .3rem;
$table-cell-padding: 16px; // update to $spacer
$table-sm-cell-padding: 12px; // update to $spacer
$table-bg: transparent;
$table-bg: #FFF;
$table-bg-accent: #f9f9f9;
$table-bg-hover: #f5f5f5;
$table-bg-active: $table-bg-hover;
$table-bg-active: $brand-primary;
$table-border-width: $border-width;
$table-border-color: $gray-lighter;
@ -303,9 +303,9 @@ $btn-danger-border: transparent;
// Forms
$input-padding-x: .75rem;
$input-padding-y: .54rem; //.375rem;
// $input-padding-x: .75rem;
// $input-padding-y: .375rem;
//
// $input-bg: #fff;
// $input-bg-disabled: $gray-lighter;
//
@ -386,10 +386,10 @@ $input-padding-y: .54rem; //.375rem;
$navbar-height: 52px;
$navbar-total-height: 53px;
$navbar-border-radius: 0;
$navbar-padding-horizontal: $spacer;
$navbar-padding-vertical: ($spacer / 2);
// $navbar-border-radius: $border-radius;
// $navbar-padding-horizontal: $spacer;
// $navbar-padding-vertical: ($spacer / 2);
//
// $navbar-dark-color: rgba(255,255,255,.5);
// $navbar-dark-hover-color: rgba(255,255,255,.75);
// $navbar-dark-active-color: rgba(255,255,255,1);
@ -403,23 +403,23 @@ $navbar-padding-vertical: ($spacer / 2);
// Navs
$nav-link-padding: 12px 8px;
$nav-link-hover-bg: red; //$gray-lighter;
$nav-disabled-link-color: $text-muted;
$nav-disabled-link-hover-color: $text-muted;
$nav-tabs-border-color: #d9dee2;
$nav-tabs-link-border-width: 0;
$nav-tabs-link-hover-border-color: green; //$gray-lighter;
$nav-tabs-active-link-hover-bg: $body-bg;
$nav-tabs-active-link-hover-color: $body-color;
$nav-tabs-active-link-hover-border-color: #ddd;
$nav-tabs-justified-link-border-color: #ddd;
$nav-tabs-justified-active-link-border-color: $body-bg;
// $nav-link-padding: .5em 1em;
// $nav-link-hover-bg: $gray-lighter;
//
// $nav-disabled-link-color: $gray-light;
// $nav-disabled-link-hover-color: $gray-light;
//
// $nav-tabs-border-color: #ddd;
//
// $nav-tabs-link-border-width: $border-width;
// $nav-tabs-link-hover-border-color: $gray-lighter;
//
// $nav-tabs-active-link-hover-bg: $body-bg;
// $nav-tabs-active-link-hover-color: $gray;
// $nav-tabs-active-link-hover-border-color: #ddd;
//
// $nav-tabs-justified-link-border-color: #ddd;
// $nav-tabs-justified-active-link-border-color: $body-bg;
//
// $nav-pills-border-radius: $border-radius;
// $nav-pills-active-link-hover-bg: $component-active-bg;
@ -643,8 +643,13 @@ $nav-tabs-justified-active-link-border-color: $body-bg;
// Breadcrumbs
$breadcrumb-padding-vertical: 6px;
$breadcrumb-padding-horizontal: 0;
// $breadcrumb-padding-vertical: .75rem;
// $breadcrumb-padding-horizontal: 1rem;
//
// $breadcrumb-bg: $gray-lighter;
// $breadcrumb-divider-color: $gray-light;
// $breadcrumb-active-color: $gray-light;
// $breadcrumb-divider: "/";
$breadcrumb-bg: transparent;
$breadcrumb-divider-color: $border-color-dark;