Datepicker: Add styles
This commit is contained in:
parent
323807c074
commit
a4305347ce
|
@ -10,6 +10,7 @@ import { Component, Fragment } from '@wordpress/element';
|
|||
*/
|
||||
import Header from 'layout/header';
|
||||
import DatePicker from 'components/date-picker';
|
||||
import DropdownButton from 'components/dropdown-button';
|
||||
|
||||
export default class extends Component {
|
||||
render() {
|
||||
|
@ -18,6 +19,8 @@ export default class extends Component {
|
|||
<Fragment>
|
||||
<Header sections={ [ __( 'Analytics', 'woo-dash' ) ] } />
|
||||
<DatePicker query={ query } path={ path } />
|
||||
<p>Example single line button - default width 100% of container</p>
|
||||
<DropdownButton labels={ [ 'All Products Sold' ] } />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -93,14 +93,14 @@ class DatePickerContent extends Component {
|
|||
<ComparePeriods onSelect={ onSelect } compare={ compare } />
|
||||
{ isValidSelection( selectedTab ) ? (
|
||||
<Link
|
||||
className="woocommerce-date-picker__update-btn"
|
||||
className="woocommerce-date-picker__update-btn components-button is-button is-primary"
|
||||
to={ getUpdatePath( selectedTab ) }
|
||||
onClick={ onClose }
|
||||
>
|
||||
{ __( 'Update', 'woo-dash' ) }
|
||||
</Link>
|
||||
) : (
|
||||
<Button className="woocommerce-date-picker__update-btn" disabled>
|
||||
<Button className="woocommerce-date-picker__update-btn" isPrimary disabled>
|
||||
{ __( 'Update', 'woo-dash' ) }
|
||||
</Button>
|
||||
) }
|
||||
|
|
|
@ -2,8 +2,9 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Component } from '@wordpress/element';
|
||||
import { Button, Dropdown } from '@wordpress/components';
|
||||
import { Component, Fragment } from '@wordpress/element';
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Dropdown } from '@wordpress/components';
|
||||
import { stringify as stringifyQueryObject } from 'qs';
|
||||
import moment from 'moment';
|
||||
import PropTypes from 'prop-types';
|
||||
|
@ -12,6 +13,7 @@ import PropTypes from 'prop-types';
|
|||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
import DropdownButton from 'components/dropdown-button';
|
||||
import DatePickerContent from './content';
|
||||
import { getCurrentDates, isoDateFormat } from 'lib/date';
|
||||
|
||||
|
@ -68,16 +70,10 @@ class DatePicker extends Component {
|
|||
getButtonLabel() {
|
||||
const queryWithDefaults = this.addQueryDefaults( this.props.query );
|
||||
const { primary, secondary } = getCurrentDates( queryWithDefaults );
|
||||
return (
|
||||
<div className="woocommerce-date-picker__toggle-label">
|
||||
<p>
|
||||
{ primary.label } ({ primary.range })
|
||||
</p>
|
||||
<p>
|
||||
vs. { secondary.label } ({ secondary.range })
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
return [
|
||||
`${ primary.label } (${ primary.range })`,
|
||||
`${ __( 'vs.', 'woo-dash' ) } ${ secondary.label } (${ secondary.range })`,
|
||||
];
|
||||
}
|
||||
|
||||
isValidSelection( selectedTab ) {
|
||||
|
@ -91,33 +87,34 @@ class DatePicker extends Component {
|
|||
render() {
|
||||
const { period, compare, after, before } = this.state;
|
||||
return (
|
||||
<Dropdown
|
||||
className="woocommerce-date-picker"
|
||||
contentClassName="woocommerce-date-picker__content"
|
||||
position="bottom"
|
||||
expandOnMobile
|
||||
renderToggle={ ( { isOpen, onToggle } ) => (
|
||||
<Button
|
||||
className="woocommerce-date-picker__toggle"
|
||||
onClick={ onToggle }
|
||||
aria-expanded={ isOpen }
|
||||
>
|
||||
{ this.getButtonLabel() }
|
||||
</Button>
|
||||
) }
|
||||
renderContent={ ( { onClose } ) => (
|
||||
<DatePickerContent
|
||||
period={ period }
|
||||
compare={ compare }
|
||||
after={ after }
|
||||
before={ before }
|
||||
onSelect={ this.select }
|
||||
onClose={ onClose }
|
||||
getUpdatePath={ this.getUpdatePath }
|
||||
isValidSelection={ this.isValidSelection }
|
||||
/>
|
||||
) }
|
||||
/>
|
||||
<Fragment>
|
||||
<p>{ __( 'Date Range', 'woo-dash' ) }:</p>
|
||||
<Dropdown
|
||||
className="woocommerce-date-picker"
|
||||
contentClassName="woocommerce-date-picker__content"
|
||||
position="bottom"
|
||||
expandOnMobile
|
||||
renderToggle={ ( { isOpen, onToggle } ) => (
|
||||
<DropdownButton
|
||||
onClick={ onToggle }
|
||||
isOpen={ isOpen }
|
||||
labels={ this.getButtonLabel() }
|
||||
/>
|
||||
) }
|
||||
renderContent={ ( { onClose } ) => (
|
||||
<DatePickerContent
|
||||
period={ period }
|
||||
compare={ compare }
|
||||
after={ after }
|
||||
before={ before }
|
||||
onSelect={ this.select }
|
||||
onClose={ onClose }
|
||||
getUpdatePath={ this.getUpdatePath }
|
||||
isValidSelection={ this.isValidSelection }
|
||||
/>
|
||||
) }
|
||||
/>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,13 +1,20 @@
|
|||
/** @format */
|
||||
|
||||
.woocommerce-date-picker {
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
width: 33.3%;
|
||||
|
||||
@include breakpoint( '<1100px' ) {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
@include breakpoint( '<782px' ) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-date-picker__content {
|
||||
.components-popover__content {
|
||||
width: 360px;
|
||||
width: 320px;
|
||||
padding: 1em 0;
|
||||
border: 1px solid $gray;
|
||||
background-color: $white;
|
||||
|
@ -74,7 +81,7 @@
|
|||
|
||||
.woocommerce-date-picker__tab {
|
||||
outline: none;
|
||||
border: 1px solid $black;
|
||||
border: 1px solid $woocommerce;
|
||||
padding: 10px;
|
||||
margin: 0;
|
||||
border-radius: 5px 0 0 5px;
|
||||
|
@ -85,7 +92,7 @@
|
|||
}
|
||||
|
||||
&.is-active {
|
||||
background-color: $black;
|
||||
background-color: $woocommerce;
|
||||
color: $white;
|
||||
}
|
||||
|
||||
|
@ -106,57 +113,9 @@
|
|||
}
|
||||
|
||||
.woocommerce-date-picker__text {
|
||||
@include font-size( 14 );
|
||||
font-weight: 200;
|
||||
@include font-size( 12 );
|
||||
font-weight: 100;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
color: $gray-text;
|
||||
}
|
||||
|
||||
.woocommerce-date-picker__toggle {
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
border: 1px solid $gray;
|
||||
border-radius: 5px;
|
||||
padding: 0 40px 0 0;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 6px 6px 0 6px;
|
||||
border-color: #444 transparent transparent transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-date-picker__toggle-label {
|
||||
text-align: left;
|
||||
padding: 2px 7px;
|
||||
border-right: 1px solid $gray;
|
||||
|
||||
p:first-child {
|
||||
margin: 0 0 3px 0;
|
||||
@include font-size( 14 );
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
@include font-size( 12 );
|
||||
margin: 0;
|
||||
color: $gray-text;
|
||||
}
|
||||
|
||||
@include breakpoint( '<400px' ) {
|
||||
p:first-child {
|
||||
@include font-size( 12 );
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
@include font-size( 10 );
|
||||
}
|
||||
}
|
||||
color: $core-grey-dark-500;
|
||||
}
|
||||
|
|
|
@ -0,0 +1,34 @@
|
|||
Dropdown Button
|
||||
====
|
||||
|
||||
A button meant for use as the launching button in Gutenberg's `<Dropdown />` component. The button is 100% width of its container and displays single or multiple lines rendered as `<p/>` elments.
|
||||
|
||||
## How to use:
|
||||
|
||||
```jsx
|
||||
import { Dropdown } from '@wordpress/components';
|
||||
import DropdownButton from 'components/dropdown-button';
|
||||
|
||||
render: function() {
|
||||
return (
|
||||
<Dropdown
|
||||
renderToggle={ ( { isOpen, onToggle } ) => (
|
||||
<DropdownButton
|
||||
onClick={ onToggle }
|
||||
isOpen={ isOpen }
|
||||
labels={ [ 'All Products Sold' ] }
|
||||
/>
|
||||
) }
|
||||
renderContent={ () => (
|
||||
<p>Dropdown content here</p>
|
||||
) }
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Props
|
||||
|
||||
* `labels`: An array of elements to be rendered as the content of the button
|
||||
* `isOpen`: boolean describing if the dropdown in open or not
|
||||
* `*`: All other props are passed to Gutenberg's `<Button />` component
|
|
@ -0,0 +1,34 @@
|
|||
/** @format */
|
||||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
import { Button } from '@wordpress/components';
|
||||
import PropTypes from 'prop-types';
|
||||
import classnames from 'classnames';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
const DropdownButton = props => {
|
||||
const { labels, isOpen, ...otherProps } = props;
|
||||
const buttonClasses = classnames( 'woocommerce-dropdown-button', {
|
||||
'is-open': isOpen,
|
||||
'is-multi-line': labels.length > 1,
|
||||
} );
|
||||
return (
|
||||
<Button className={ buttonClasses } aria-expanded={ isOpen } { ...otherProps }>
|
||||
<div className="woocommerce-dropdown-button__labels">
|
||||
{ labels.map( label => <p>{ label }</p> ) }
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
DropdownButton.propTypes = {
|
||||
labels: PropTypes.array,
|
||||
isOpen: PropTypes.bool,
|
||||
};
|
||||
|
||||
export default DropdownButton;
|
|
@ -0,0 +1,73 @@
|
|||
/** @format */
|
||||
|
||||
.woocommerce-dropdown-button {
|
||||
background-color: $white;
|
||||
position: relative;
|
||||
border: 1px solid $core-grey-light-500;
|
||||
color: $core-grey-dark-500;
|
||||
border-radius: 5px;
|
||||
padding: 0 40px 0 0;
|
||||
width: 100%;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 6px 6px 0 6px;
|
||||
border-color: $core-grey-dark-500 transparent transparent transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.is-open {
|
||||
background-color: $core-grey-light-100;
|
||||
}
|
||||
|
||||
&.is-multi-line .woocommerce-dropdown-button__labels {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-dropdown-button__labels {
|
||||
text-align: left;
|
||||
padding: 5px 10px;
|
||||
min-height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint( '<400px' ) {
|
||||
min-height: 46px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
|
||||
&:last-child {
|
||||
@include font-size( 12 );
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin: 0 0 3px 0;
|
||||
@include font-size( 14 );
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@include breakpoint( '<400px' ) {
|
||||
&:last-child {
|
||||
@include font-size( 10 );
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@include font-size( 12 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -2,24 +2,33 @@
|
|||
|
||||
.woocommerce-segmented-selection {
|
||||
width: 100%;
|
||||
color: $core-grey-dark-500;
|
||||
}
|
||||
|
||||
.woocommerce-segmented-selection__container {
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
display: grid;
|
||||
border-top: 1px solid $gray;
|
||||
border-bottom: 1px solid $gray;
|
||||
border-top: 1px solid $core-grey-light-700;
|
||||
border-bottom: 1px solid $core-grey-light-700;
|
||||
grid-gap: 1px;
|
||||
background-color: $gray;
|
||||
background-color: $core-grey-light-700;
|
||||
}
|
||||
|
||||
.woocommerce-segmented-selection__label {
|
||||
background-color: $white;
|
||||
padding: 1em;
|
||||
background-color: $core-grey-light-100;
|
||||
padding: 12px 12px 12px 24px;
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
&:active {
|
||||
background-color: $core-grey-light-300;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $core-grey-light-200;
|
||||
}
|
||||
}
|
||||
|
||||
.woocommerce-segmented-selection__input {
|
||||
|
@ -27,23 +36,36 @@
|
|||
position: absolute;
|
||||
left: -9999px;
|
||||
|
||||
&:active + label .woocommerce-segmented-selection__label {
|
||||
background-color: $core-grey-light-300;
|
||||
}
|
||||
|
||||
&:checked + label .woocommerce-segmented-selection__label {
|
||||
background-color: $gray-light-10;
|
||||
padding-left: calc(1em + 20px);
|
||||
background-color: $white;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: #444;
|
||||
border-radius: 4px;
|
||||
background-color: $woocommerce;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-20px, -50%);
|
||||
transform: translate(-16px, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus + label .woocommerce-segmented-selection__label {
|
||||
outline: 1px solid lightseagreen;
|
||||
/**
|
||||
Must use outline instead of border here to avoid having the
|
||||
elements below shift by 2 pixel on focus. This trickery is needed
|
||||
so that left and right edges can be seen as those borders are actually
|
||||
part of the parent CSS grid.
|
||||
*/
|
||||
outline: 1px solid $black;
|
||||
width: calc(100% - 1px);
|
||||
}
|
||||
|
||||
&:nth-child(4n + 1):focus + label .woocommerce-segmented-selection__label {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,16 +2,24 @@
|
|||
|
||||
$white: rgba(255, 255, 255, 1);
|
||||
|
||||
// Grays
|
||||
// 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-text: $gray-darken-40;
|
||||
|
||||
$gray-light-10: lighten($gray, 10%);
|
||||
|
||||
// Greys
|
||||
$core-grey-light-100: #f8f9f9;
|
||||
$core-grey-light-200: #f3f4f5;
|
||||
$core-grey-light-300: #f3f4f5; // same as 200? By accident?
|
||||
$core-grey-light-500: #e2e4e7;
|
||||
$core-grey-light-700: #ccd0d4;
|
||||
//$core-grey-dark-500: #E8EAEB;
|
||||
$core-grey-dark-500: #3c3d3e; // This seems really light, so I made one up
|
||||
|
||||
$wp-admin-background: #f1f1f1;
|
||||
|
||||
// Black
|
||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue