tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

Toolbar renaming from north-header and move styles to component

Browse Source
This commit is contained in:
Paul Clarke 2016-04-26 10:47:07 +12:00 committed by Ingo Schommer
parent 0b9a339b79
commit ec99452ce1
9 changed files with 34 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
admin/client/src/components/Breadcrumb/README.md
View File

@ -1,4 +1,4 @@
#NorthHeaderBreadcrumbs
# Breadcrumb
The breadcrumbs for the current section of the CMS.

7
admin/client/src/components/NorthHeader/tests/NorthHeader-test.js
View File

@ -1,7 +0,0 @@
/* global jest, describe */
jest.dontMock('../NorthHeader');
describe('NorthHeaderComponent', () => {
});

3
admin/client/src/components/NorthHeader/README.md → admin/client/src/components/toolbar/README.md
View File

@ -1,7 +1,6 @@
# NorthHeader
# Toolbar
The main header for sections in the CMS.
Styles are contained within layout.scss
## Props

11
admin/client/src/components/NorthHeader/NorthHeader.js → admin/client/src/components/toolbar/Toolbar.js
View File

@ -1,7 +1,7 @@
import React from 'react';
import SilverStripeComponent from 'lib/SilverStripeComponent';
class NorthHeader extends SilverStripeComponent {
class Toolbar extends SilverStripeComponent {
constructor(props) {
super(props);
@ -14,8 +14,9 @@ class NorthHeader extends SilverStripeComponent {
'btn',
'btn-secondary',
'action',
'font-icon-left-open',
'font-icon-left-open-big',
'toolbar__back-button',
'btn--no-text',
];
const backButtonProps = {
className: buttonClassNames.join(' '),
@ -52,13 +53,13 @@ class NorthHeader extends SilverStripeComponent {
}
}
NorthHeader.propTypes = {
Toolbar.propTypes = {
handleBackButtonClick: React.PropTypes.func,
showBackButton: React.PropTypes.bool,
};
NorthHeader.defaultProps = {
Toolbar.defaultProps = {
showBackButton: false,
};
export default NorthHeader;
export default Toolbar;

20
admin/client/src/components/NorthHeader/NorthHeader.scss → admin/client/src/components/toolbar/Toolbar.scss
View File

@ -1,5 +1,8 @@
.toolbar {
width: 100%; // Todo: replace with mixin @include make-container();
.toolbar,
.toolbar--north,
.toolbar--content,
.toolbar--south {
@include make-container();
height: $toolbar-total-height;
background-color: $body-bg;
@ -12,9 +15,6 @@
// Northern bar containing breadcrum, tabs etc.
.toolbar--north {
@extend .toolbar;
padding-left: $spacer-x; // Todo: replace with mixin @include make-container();
padding-right: $spacer-x; // Todo: replace with mixin @include make-container();
display: block;
background-image: none;
background-color: $background-north;
@ -24,15 +24,14 @@
// Secondary content actions eg. Add page button
.toolbar--content {
@extend .toolbar;
padding: $spacer-y*.625 $spacer-x*.75;
margin-bottom: $spacer-y/2;
}
// Primary content actions
.toolbar--south {
@extend .toolbar;
padding: $spacer-y*.625 $spacer-x;
padding-top: $spacer-y*.625;
padding-bottom: $spacer-y*.625;
position: absolute;
bottom: 0;
border-top: 1px solid $border-color;
@ -40,5 +39,8 @@
.toolbar__back-button {
float: left;
margin: $spacer-y/2 $spacer-x $spacer-y/2 0;
margin: $spacer-y*.625 $spacer-x/2 $spacer-y*.625 #{-$spacer-x/4};
padding-left: $spacer-x/4;
padding-right: $spacer-x/4;
border: 0;
}

16
admin/client/src/containers/CampaignAdmin/CampaignAdmin.js
View File

@ -6,7 +6,7 @@ import * as actions from 'state/campaign/CampaignActions';
import SilverStripeComponent from 'lib/SilverStripeComponent';
import FormAction from 'components/FormAction/FormAction';
import i18n from 'i18n';
import NorthHeader from 'components/NorthHeader/NorthHeader';
import Toolbar from 'components/Toolbar/Toolbar';
import FormBuilder from 'components/FormBuilder/FormBuilder';
import CampaignAdminList from './CampaignAdminList';
@ -98,11 +98,11 @@ class CampaignAdmin extends SilverStripeComponent {
return (
<div className="cms-content__inner no-preview">
<div className="cms-content__left cms-campaigns collapse in" aria-expanded="true">
<NorthHeader>
<Toolbar>
<div className="breadcrumb breadcrumb--current-only">
<h2 className="breadcrumb__item-title breadcrumb__item-title--last">Campaigns</h2>
</div>
</NorthHeader>
</Toolbar>
<div className="panel-scrollable--single-toolbar">
<div className="toolbar--content">
<div className="btn-toolbar">
@ -144,11 +144,11 @@ class CampaignAdmin extends SilverStripeComponent {
return (
<div className="cms-middle no-preview">
<div className="cms-campaigns collapse in" aria-expanded="true">
<NorthHeader showBackButton>
<Toolbar showBackButton>
<div className="breadcrumb breadcrumb--current-only">
<h2 className="text-truncate toolbar__heading">Campaigns</h2>
</div>
</NorthHeader>
</Toolbar>
<FormBuilder schemaUrl={schemaUrl} />
</div>
</div>
@ -168,11 +168,11 @@ class CampaignAdmin extends SilverStripeComponent {
return (
<div className="cms-middle no-preview">
<div className="cms-campaigns collapse in" aria-expanded="true">
<NorthHeader showBackButton>
<Toolbar showBackButton>
<div className="breadcrumb breadcrumb--current-only">
<h2 className="text-truncate toolbar__heading">Campaigns</h2>
<h2 className="text-truncate breadcrumb__item-title--last">Campaigns</h2>
</div>
</NorthHeader>
</Toolbar>
<div className="cms-middle__scrollable">
<FormBuilder {...formBuilderProps} />
</div>

6
admin/client/src/containers/CampaignAdmin/CampaignAdminList.js
View File

@ -7,7 +7,7 @@ import SilverStripeComponent from 'lib/SilverStripeComponent';
import Accordion from 'components/Accordion/Accordion';
import AccordionGroup from 'components/Accordion/AccordionGroup';
import AccordionItem from 'components/Accordion/AccordionItem';
import NorthHeader from 'components/NorthHeader/NorthHeader';
import Toolbar from 'components/Toolbar/Toolbar';
import FormAction from 'components/FormAction/FormAction';
import CampaignAdminItem from './CampaignAdminItem';
import BreadcrumbComponent from 'components/Breadcrumb/Breadcrumb';
@ -85,9 +85,9 @@ class CampaignAdminList extends SilverStripeComponent {
return (
<div className={classNames}>
<div className="cms-content__left collapse in" aria-expanded="true">
<NorthHeader>
<Toolbar>
<BreadcrumbComponent crumbs={this.props.breadcrumbs} multiline />
</NorthHeader>
</Toolbar>
<div className="container-fluid campaign-items panel-scrollable--double-toolbar">
<Accordion>
{accordionGroups}

2
admin/client/src/styles/bundle.scss
View File

@ -34,7 +34,7 @@
@import "../components/HiddenField/HiddenField";
@import "../components/Label/Label";
@import "../components/Preview/Preview";
@import "../components/NorthHeader/NorthHeader";
@import "../components/Toolbar/Toolbar";
@import "../components/Form/Form";
// Layout and sections

6
gulpfile.js
View File

@ -285,8 +285,8 @@ gulp.task('bundle-lib', function bundleLib() {
.require(`${PATHS.ADMIN_JS_SRC}/components/TextField/TextField`,
{ expose: 'components/TextField/TextField' }
)
.require(`${PATHS.ADMIN_JS_SRC}/components/NorthHeader/NorthHeader`,
{ expose: 'components/NorthHeader/NorthHeader' }
.require(`${PATHS.ADMIN_JS_SRC}/components/Toolbar/Toolbar`,
{ expose: 'components/Toolbar/Toolbar' }
)
.require(`${PATHS.ADMIN_JS_SRC}/components/Breadcrumb/Breadcrumb`,
{ expose: 'components/Breadcrumb/Breadcrumb' }
@ -373,7 +373,7 @@ gulp.task('bundle-framework', function bundleBoot() {
gulpUtil.log('Finished', `bundled ${bundleFileName} ${msg}`);
})
.transform('babelify', babelifyOptions)
.external('components/NorthHeader/NorthHeader')
.external('components/Toolbar/Toolbar')
.external('components/FormBuilder/FormBuilder')
.external('components/FormAction/FormAction')
.external('deep-freeze')