Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request woocommerce/woocommerce-admin#2216 from woocommerce/fix/dashboard-title-order 

Dashboard: re-arrange section dropdown order
This commit is contained in:
Paul Sealock 2019-05-15 09:13:06 +12:00 committed by GitHub
parent d7d630558d b4fa697a71
commit ea74f23822
9 changed files with 82 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
plugins/woocommerce-admin/client/dashboard/dashboard-charts/index.js
View File

@ -64,17 +64,6 @@ class DashboardCharts extends Component {
label={ __( 'Choose which charts to display', 'woocommerce-admin' ) }
renderContent={ ( { onToggle } ) => (
<Fragment>
{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
<div className="woocommerce-ellipsis-menu__item">
<TextControl
label={ __( 'Section Title', 'woocommerce-admin' ) }
onBlur={ onTitleBlur }
onChange={ onTitleChange }
required
value={ titleInput }
/>
</div>
) }
<MenuTitle>{ __( 'Charts', 'woocommerce-admin' ) }</MenuTitle>
{ uniqCharts.map( chart => {
return (
@ -90,13 +79,24 @@ class DashboardCharts extends Component {
);
} ) }
{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
/>
<Fragment>
<div className="woocommerce-ellipsis-menu__item">
<TextControl
label={ __( 'Section Title', 'woocommerce-admin' ) }
onBlur={ onTitleBlur }
onChange={ onTitleChange }
required
value={ titleInput }
/>
</div>
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
/>
</Fragment>
) }
</Fragment>
) }

13
plugins/woocommerce-admin/client/dashboard/dashboard-charts/style.scss
View File

@ -16,16 +16,3 @@
margin: 0;
}
}
.woocommerce-section-controls {
border-top: $border-width solid $core-grey-light-500;
.dashicon {
margin: 0 $gap-smaller 0 0;
vertical-align: bottom;
}
.woocommerce-ellipsis-menu__item {
padding-bottom: 10px;
}
}

38
plugins/woocommerce-admin/client/dashboard/leaderboards/index.js
View File

@ -62,17 +62,6 @@ class Leaderboards extends Component {
) }
renderContent={ ( { onToggle } ) => (
<Fragment>
{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
<div className="woocommerce-ellipsis-menu__item">
<TextControl
label={ __( 'Section Title', 'woocommerce-admin' ) }
onBlur={ onTitleBlur }
onChange={ onTitleChange }
required
value={ titleInput }
/>
</div>
) }
<MenuTitle>{ __( 'Leaderboards', 'woocommerce-admin' ) }</MenuTitle>
{ allLeaderboards.map( leaderboard => {
return (
@ -89,7 +78,7 @@ class Leaderboards extends Component {
} ) }
<SelectControl
className="woocommerce-dashboard__dashboard-leaderboards__select"
label={ <MenuTitle>{ __( 'Rows Per Table', 'woocommerce-admin' ) }</MenuTitle> }
label={ __( 'Rows Per Table', 'woocommerce-admin' ) }
value={ rowsPerTable }
options={ Array.from( { length: 20 }, ( v, key ) => ( {
v: key + 1,
@ -98,13 +87,24 @@ class Leaderboards extends Component {
onChange={ this.setRowsPerTable }
/>
{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
/>
<Fragment>
<div className="woocommerce-ellipsis-menu__item">
<TextControl
label={ __( 'Section Title', 'woocommerce-admin' ) }
onBlur={ onTitleBlur }
onChange={ onTitleChange }
required
value={ titleInput }
/>
</div>
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
/>
</Fragment>
) }
</Fragment>
) }

2
plugins/woocommerce-admin/client/dashboard/section-controls.js
View File

@ -36,7 +36,7 @@ class SectionControls extends Component {
const { onRemove, isFirst, isLast } = this.props;
return (
<div className="woocommerce-section-controls">
<div className="woocommerce-dashboard-section-controls">
{ ! isFirst && (
<MenuItem isClickable onInvoke={ this.onMoveUp }>
<Icon icon={ 'arrow-up-alt2' } label={ __( 'Move up' ) } />

36
plugins/woocommerce-admin/client/dashboard/store-performance/index.js
View File

@ -57,17 +57,6 @@ class StorePerformance extends Component {
) }
renderContent={ ( { onToggle } ) => (
<Fragment>
{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
<div className="woocommerce-ellipsis-menu__item">
<TextControl
label={ __( 'Section Title', 'woocommerce-admin' ) }
onBlur={ onTitleBlur }
onChange={ onTitleChange }
required
value={ titleInput }
/>
</div>
) }
<MenuTitle>{ __( 'Display Stats:', 'woocommerce-admin' ) }</MenuTitle>
{ indicators.map( ( indicator, i ) => {
const checked = ! hiddenBlocks.includes( indicator.stat );
@ -84,13 +73,24 @@ class StorePerformance extends Component {
);
} ) }
{ window.wcAdminFeatures[ 'analytics-dashboard/customizable' ] && (
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
/>
<Fragment>
<div className="woocommerce-ellipsis-menu__item">
<TextControl
label={ __( 'Section Title', 'woocommerce-admin' ) }
onBlur={ onTitleBlur }
onChange={ onTitleChange }
required
value={ titleInput }
/>
</div>
<Controls
onToggle={ onToggle }
onMove={ onMove }
onRemove={ onRemove }
isFirst={ isFirst }
isLast={ isLast }
/>
</Fragment>
) }
</Fragment>
) }

14
plugins/woocommerce-admin/client/dashboard/style.scss
View File

@ -60,3 +60,17 @@
color: $core-grey-dark-300;
padding-top: 8px;
}
.woocommerce-dashboard-section-controls {
border-top: $border-width solid $core-grey-light-500;
padding-top: $gap-smaller;
.dashicon {
margin: 0 $gap-smaller 0 0;
vertical-align: bottom;
}
.woocommerce-ellipsis-menu__item {
padding-bottom: 10px;
}
}

8
plugins/woocommerce-admin/client/stylesheets/abstracts/_colors.scss
View File

@ -2,14 +2,6 @@
$white: rgba(255, 255, 255, 1);
// Grays (deprecated. Use greys below as we move to HiFi designs)
$gray: #ccc;
$gray-darken-10: darken($gray, 10%);
$gray-darken-20: darken($gray, 20%);
$gray-darken-30: darken($gray, 30%);
$gray-darken-40: darken($gray, 40%);
$gray-light-10: lighten($gray, 10%);
// Greys
$core-grey-light-100: #f8f9f9;
$core-grey-light-200: #f3f4f5;

14
plugins/woocommerce-admin/packages/components/src/ellipsis-menu/style.scss
View File

@ -37,11 +37,12 @@
.woocommerce-ellipsis-menu__title,
.woocommerce-ellipsis-menu__item {
padding: 10px 12px 4px;
padding: 4px 12px;
}
.woocommerce-ellipsis-menu__item {
cursor: pointer;
color: $core-grey-dark-300;
&:focus {
box-shadow: inset 0 0 0 1px #6c7781, inset 0 0 0 2px #fff;
@ -52,8 +53,15 @@
.components-base-control__label,
.woocommerce-ellipsis-menu__title {
color: #6c7781;
padding-bottom: 8px;
color: $core-grey-dark-800;
padding-top: $gap-smaller;
padding-bottom: $gap-smaller;
@include font-size( 15 );
margin-bottom: $gap-smallest;
}
.components-toggle-control .components-base-control__field {
margin: $gap-smallest 0;
}
.components-base-control {

2
plugins/woocommerce-admin/packages/components/src/pagination/style.scss
View File

@ -37,7 +37,7 @@
}
.components-icon-button:not(:disabled):not([aria-disabled='true']):hover {
color: $gray-darken-40;
color: $core-grey-dark-300;
}
button:first-child {