From 2030b76499c88504eccfa074521135c2c61d28f4 Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Feb 2015 13:25:47 -0600 Subject: [PATCH 1/5] Refractored css into js for menu and menu-item --- src/js/menu-item.jsx | 113 ++++++++++++++++--- src/js/menu.jsx | 86 +++++++++++---- src/js/styles/variables/custom-variables.js | 27 ++++- src/less/components/menu-item.less | 114 ++++++++++---------- src/less/variables/custom-variables.less | 8 -- 5 files changed, 250 insertions(+), 98 deletions(-) diff --git a/src/js/menu-item.jsx b/src/js/menu-item.jsx index 3f7198fa042d48..283bf72865e4ce 100644 --- a/src/js/menu-item.jsx +++ b/src/js/menu-item.jsx @@ -1,5 +1,6 @@ var React = require('react'); -var Classable = require('./mixins/classable'); +var StylePropable = require('./mixins/style-propable'); +var CustomVariables = require('./styles/variables/custom-variables'); var FontIcon = require('./font-icon'); var Toggle = require('./toggle'); @@ -11,12 +12,14 @@ var Types = { var MenuItem = React.createClass({ - mixins: [Classable], + mixins: [StylePropable], propTypes: { index: React.PropTypes.number.isRequired, iconClassName: React.PropTypes.string, iconRightClassName: React.PropTypes.string, + iconStyle: React.PropTypes.object, + iconRightStyle: React.PropTypes.object, attribute: React.PropTypes.string, number: React.PropTypes.string, data: React.PropTypes.string, @@ -37,10 +40,79 @@ var MenuItem = React.createClass({ }; }, - render: function() { - var classes = this.getClasses('mui-menu-item', { - 'mui-is-selected': this.props.selected + getInitialState: function() { + return { + hovered: false + } + }, + + /** Styles */ + _main: function() { + var style = this.mergeAndPrefix({ + userSelect: 'none', + cursor: 'pointer', + lineHeight: CustomVariables.menuItemHeight + 'px', + paddingLeft: CustomVariables.menuItemPadding, + paddingRight: CustomVariables.menuItemPadding, }); + + if (this.state.hovered) style.backgroundColor = CustomVariables.menuItemHoverColor; + if (this.props.selected) style.color = CustomVariables.menuItemSelectedTextColor; + + return style; + }, + + _number: function() { + return { + float: 'right', + width: 24, + textAlign: 'center' + } + }, + + _attribute: function() { + return { + float: 'right' + } + }, + + _iconRight: function() { + return this.mergeStyles({ + lineHeight: CustomVariables.menuItemHeight + 'px', + float: 'right' + }, this.props.iconRightStyle); + }, + + _icon: function () { + return this.mergeStyles({ + float: 'left', + lineHeight: CustomVariables.menuItemHeight + 'px', + marginRight: CustomVariables.spacing.desktopGutter + }, this.props.iconStyle); + }, + + _data: function() { + return { + display: 'block', + paddingLeft: CustomVariables.spacing.desktopGutter * 2, + lineHeight: CustomVariables.menuItemDataHeight + 'px', + height: CustomVariables.menuItemDataHeight + 'px', + verticalAlign: 'top', + top: -12, + position: 'relative', + fontWeight: 300, + } + }, + + _toggle: function() { + return { + marginTop: ((CustomVariables.menuItemHeight - CustomVariables.radioButtonSize) / 2), + float: 'right', + width: 42, + } + }, + + render: function() { var icon; var data; var iconRight; @@ -48,30 +120,35 @@ var MenuItem = React.createClass({ var number; var toggle; - if (this.props.iconClassName) icon = ; - if (this.props.iconRightClassName) iconRight = ; - if (this.props.data) data = {this.props.data}; - if (this.props.number !== undefined) number = {this.props.number}; - if (this.props.attribute !== undefined) attribute = {this.props.attribute}; + if (this.props.iconClassName) icon = ; + if (this.props.iconRightClassName) iconRight = ; + if (this.props.data) data = {this.props.data}; + if (this.props.number !== undefined) number = {this.props.number}; + if (this.props.attribute !== undefined) attribute = {this.props.attribute}; if (this.props.toggle) { var { toggle, onClick, onToggle, + onMouseOver, + onMouseOut, children, label, + style, ...other } = this.props; - toggle = ; + toggle = ; } return (
+ onClick={this._handleOnClick} + onMouseOver={this._handleMouseOver} + onMouseOut={this._handleMouseOut}> {icon} {this.props.children} @@ -95,6 +172,16 @@ var MenuItem = React.createClass({ _handleToggle: function(e, toggled) { if (this.props.onToggle) this.props.onToggle(e, this.props.index, toggled); + }, + + _handleMouseOver: function(e) { + this.setState({hovered: true}); + if (this.props.onMouseOver) this.props.onMouseOver(e); + }, + + _handleMouseOut: function(e) { + this.setState({hovered: false}); + if (this.props.onMouseOut) this.props.onMouseOut(e); } }); diff --git a/src/js/menu.jsx b/src/js/menu.jsx index 74cfe4f72509d2..d400c626db47a1 100644 --- a/src/js/menu.jsx +++ b/src/js/menu.jsx @@ -3,6 +3,9 @@ var CssEvent = require('./utils/css-event'); var Dom = require('./utils/dom'); var KeyLine = require('./utils/key-line'); var Classable = require('./mixins/classable'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/mixins/transitions'); +var CustomVariables = require('./styles/variables/custom-variables'); var ClickAwayable = require('./mixins/click-awayable'); var Paper = require('./paper'); var MenuItem = require('./menu-item'); @@ -12,7 +15,7 @@ var MenuItem = require('./menu-item'); ***********************/ var NestedMenuItem = React.createClass({ - mixins: [Classable, ClickAwayable], + mixins: [Classable, ClickAwayable, StylePropable], propTypes: { index: React.PropTypes.number.isRequired, @@ -40,14 +43,23 @@ var NestedMenuItem = React.createClass({ }, render: function() { - var classes = this.getClasses('mui-nested-menu-item', { - 'mui-open': this.state.open + var styles = this.mergeStyles({ + position: 'relative', }); + var iconCustomArrowDropRight = { + marginRight: CustomVariables.spacing.desktopGutterMini * -1, + color: CustomVariables.dropDownMenuIconColor + } + return ( -
- - {this.props.text} +
+ + {this.props.text} + {this._getChildren()} ); @@ -179,7 +225,7 @@ var Menu = React.createClass({ case MenuItem.Types.SUBHEADER: itemComponent = ( -
{menuItem.text}
+
{menuItem.text}
); break; @@ -236,13 +282,13 @@ var Menu = React.createClass({ _renderVisibility: function() { var el; - if (this.props.hideable) { + if (this.props.hideable) { el = this.getDOMNode(); var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode(); if (this.props.visible) { - - //Open the menu + //Open the men, u +console.log('_renderVisibility open', el.style.height, this._initialMenuHeight); el.style.height = this._initialMenuHeight + 'px'; //Set the overflow to visible after the animation is done so @@ -251,10 +297,12 @@ var Menu = React.createClass({ //Make sure the menu is open before setting the overflow. //This is to accout for fast clicks if (this.props.visible) innerContainer.style.overflow = 'visible'; + console.log(innerContainer.style); }.bind(this)); } else { +console.log('_renderVisibility close'); //Close the menu el.style.height = '0px'; diff --git a/src/js/styles/variables/custom-variables.js b/src/js/styles/variables/custom-variables.js index d5aaca5dcf5940..9bc562ab780312 100644 --- a/src/js/styles/variables/custom-variables.js +++ b/src/js/styles/variables/custom-variables.js @@ -4,9 +4,24 @@ var Theme = require('../theme').get(); module.exports = { + //Border Colors + borderColor: Colors.grey300, + // Disabled Colors disabledColor: Theme.textColor, // fadeout 30% + + //Component Colors + appBarColor: Theme.primary1Color, + appBarTextColor: Colors.darkWhite, + canvasColor: Colors.white, + dropDownMenuIconColor: Colors.minBlack, + leftNavColor: Colors.white, + subheaderBorderColor: this.borderColor, + subheaderTextColor: Theme.primary1Color, + + + // Spacing spacing: Spacing, @@ -16,6 +31,16 @@ module.exports = { checkboxRequiredColor: Theme.primary1Color, checkboxDisabledColor: this.disabledColor, + // menu + menuBackgroundColor: Colors.white, + menuItemDataHeight: 32, + menuItemHeight: 48, + menuItemHoverColor: 'rgba(0, 0, 0, .035)', + menuItemPadding: Spacing.desktopGutter, + menuItemSelectedTextColor: Theme.accent1Color, + menuContainerBackgroundColor: Colors.white, + menuSubheaderPadding: Spacing.desktopGutter, + // toggle toggleThumbOnColor: Theme.primary1Color, toggleThumbOffColor: Colors.grey50, @@ -32,5 +57,5 @@ module.exports = { radioButtonCheckedColor: Theme.primary1Color, radioButtonRequiredColor: Theme.primary1Color, radioButtonDisabledColor: this.disabledColor, - + radioButtonSize: 24, } \ No newline at end of file diff --git a/src/less/components/menu-item.less b/src/less/components/menu-item.less index 96ae63829b3149..b3ebb3b5ffcd79 100644 --- a/src/less/components/menu-item.less +++ b/src/less/components/menu-item.less @@ -1,62 +1,62 @@ .mui-menu-item { - * { user-select: none } + // * { user-select: none } - cursor: pointer; - line-height: @menu-item-height; - padding-left: @menu-item-padding; - padding-right: @menu-item-padding; - background-color: fade(@menu-item-hover-color, 0%); - - &:hover { - background-color: @menu-item-hover-color; - } - - .mui-menu-item-number { - float: right; - width: 24px; - text-align: center; - } - - .mui-menu-item-attribute { - float: right; - } - - .mui-menu-item-icon-right { - line-height: @menu-item-height; - float: right; - } - - .mui-menu-item-icon { - float: left; - line-height: @menu-item-height; - margin-right: @desktop-gutter; - } - - .mui-menu-item-data { - display: block; - padding-left: (@desktop-gutter * 2); - line-height: @menu-item-data-height; - height: @menu-item-data-height; - vertical-align: top; - top: -12px; - position: relative; - .mui-font-weight-light; - } - - .muidocs-icon-custom-arrow-drop-right { - margin-right: (@desktop-gutter-mini * -1); - color: @drop-down-menu-icon-color; - } - - .mui-toggle { - margin-top: ((@menu-item-height - @radio-button-size) / 2); - float: right; - width: 42px; - } - - &.mui-is-selected { - color: @menu-item-selected-text-color; - } + // cursor: pointer; + // line-height: @menu-item-height; + // padding-left: @menu-item-padding; + // padding-right: @menu-item-padding; + // background-color: fade(@menu-item-hover-color, 0%); + + // &:hover { + // background-color: @menu-item-hover-color; + // } + + // .mui-menu-item-number { + // float: right; + // width: 24px; + // text-align: center; + // } + + // .mui-menu-item-attribute { + // float: right; + // } + + // .mui-menu-item-icon-right { + // line-height: @menu-item-height; + // float: right; + // } + + // .mui-menu-item-icon { + // float: left; + // line-height: @menu-item-height; + // margin-right: @desktop-gutter; + // } + + // .mui-menu-item-data { + // display: block; + // padding-left: (@desktop-gutter * 2); + // line-height: @menu-item-data-height; + // height: @menu-item-data-height; + // vertical-align: top; + // top: -12px; + // position: relative; + // .mui-font-weight-light; + // } + + // .muidocs-icon-custom-arrow-drop-right { + // margin-right: (@desktop-gutter-mini * -1); + // color: @drop-down-menu-icon-color; + // } + + // .mui-toggle { + // margin-top: ((@menu-item-height - @radio-button-size) / 2); + // float: right; + // width: 42px; + // } + + // &.mui-is-selected { + // color: @menu-item-selected-text-color; + // } } \ No newline at end of file diff --git a/src/less/variables/custom-variables.less b/src/less/variables/custom-variables.less index a0e3282f33de59..c1da3b389cba97 100644 --- a/src/less/variables/custom-variables.less +++ b/src/less/variables/custom-variables.less @@ -40,12 +40,6 @@ // menu @menu-background-color: @white; -@menu-item-data-height: 32px; -@menu-item-height: 48px; -@menu-item-hover-color: rgba(0, 0, 0, .035); -@menu-item-padding: @desktop-gutter; -@menu-item-selected-text-color: @accent-1-color; -@menu-container-background-color: white; @menu-subheader-padding: @desktop-gutter; // buttons @@ -107,8 +101,6 @@ @input-error-color: red; @input-bar-height: 2px; -// radio button -@radio-button-size: 24px; // snackbar @mui-snackbar-text-color: white; From 1c762eefc9fce9015209ada164ad3879aee7b82e Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Feb 2015 15:06:57 -0600 Subject: [PATCH 2/5] Completed refractoring for menu and menu-items --- .../components/pages/components/sliders.jsx | 4 + src/js/menu.jsx | 6 +- src/js/slider.jsx | 288 ++++++++++++++++-- src/js/styles/variables/custom-variables.js | 95 +++--- src/less/components/components.less | 3 - src/less/components/menu-item.less | 62 ---- src/less/components/menu.less | 45 --- src/less/components/slider.less | 163 ---------- 8 files changed, 314 insertions(+), 352 deletions(-) delete mode 100644 src/less/components/menu-item.less delete mode 100644 src/less/components/menu.less delete mode 100644 src/less/components/slider.less diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx index 66c51e6a273c3f..cc4acbc478b421 100644 --- a/docs/src/app/components/pages/components/sliders.jsx +++ b/docs/src/app/components/pages/components/sliders.jsx @@ -5,6 +5,10 @@ var ComponentDoc = require('../../component-doc.jsx'); var SlidersPage = React.createClass({ + handleMouseDown: function(e){ + console.log('hmd', e); + }, + render: function() { var code = diff --git a/src/js/menu.jsx b/src/js/menu.jsx index d400c626db47a1..0a02ac1582a0a0 100644 --- a/src/js/menu.jsx +++ b/src/js/menu.jsx @@ -287,8 +287,8 @@ var Menu = React.createClass({ var innerContainer = this.refs.paperContainer.getInnerContainer().getDOMNode(); if (this.props.visible) { - //Open the men, u -console.log('_renderVisibility open', el.style.height, this._initialMenuHeight); + //Open the menu + el.style.transition = Transitions.easeOut(); el.style.height = this._initialMenuHeight + 'px'; //Set the overflow to visible after the animation is done so @@ -297,12 +297,10 @@ console.log('_renderVisibility open', el.style.height, this._initialMenuHeight) //Make sure the menu is open before setting the overflow. //This is to accout for fast clicks if (this.props.visible) innerContainer.style.overflow = 'visible'; - console.log(innerContainer.style); }.bind(this)); } else { -console.log('_renderVisibility close'); //Close the menu el.style.height = '0px'; diff --git a/src/js/slider.jsx b/src/js/slider.jsx index f2195de130946b..74a0bf355836a4 100644 --- a/src/js/slider.jsx +++ b/src/js/slider.jsx @@ -1,11 +1,18 @@ - -var React = require('react'), - Paper = require('./paper'), - Classable = require('./mixins/classable'), - Draggable = require('react-draggable2'); + +var React = require('react'); +var Paper = require('./paper'); +var Classable = require('./mixins/classable'); +var StylePropable = require('./mixins/style-propable'); +var Draggable = require('react-draggable2'); +var Transitions = require('./styles/mixins/transitions.js'); +var CustomVariables = require('./styles/variables/custom-variables.js'); +var FocusRipple = require('./ripples/focus-ripple'); +var Paper = require('./paper'); var Slider = React.createClass({ + mixins: [Classable, StylePropable], + propTypes: { required: React.PropTypes.bool, disabled: React.PropTypes.bool, @@ -20,8 +27,6 @@ var Slider = React.createClass({ onDragStop: React.PropTypes.func }, - mixins: [Classable], - getDefaultProps: function() { return { required: true, @@ -40,7 +45,10 @@ var Slider = React.createClass({ if (isNaN(percent)) percent = 0; return { value: value, - percent: percent + percent: percent, + focused: false, + active: false, + hovered: false } }, @@ -50,18 +58,198 @@ var Slider = React.createClass({ } }, + // Styles + main: function() { + return { + touchCallout: 'none', + userSelect: 'none', + cursor: 'default', + height: CustomVariables.sliderHandleSizeActive, + position: 'relative', + marginTop: 24, + marginBottom: 48 + } + }, + + track: function() { + return { + position: 'absolute', + top: (CustomVariables.sliderHandleSizeActive - CustomVariables.sliderTrackSize) / 2, + left: 0, + width: '100%', + height: CustomVariables.sliderTrackSize + } + }, + + filledAndRemaining: function() { + return { + position: 'absolute', + top: 0, + height: '100%', + transition: Transitions.easeOut(null, 'margin'), + } + }, + + filled: function(fillGutter) { + return this.mergeAndPrefix(this.filledAndRemaining(), { + left: 0, + backgroundColor: (this.props.disabled) ? + CustomVariables.sliderTrackColor : + CustomVariables.sliderSelectionColor, + marginRight: fillGutter, + width: (this.state.percent * 100) + (this.props.disabled ? -2 : 0) + '%' + }); + }, + + remaining: function(fillGutter) { + return this.mergeAndPrefix(this.filledAndRemaining(), { + right: 0, + backgroundColor: CustomVariables.sliderTrackColor, + marginLeft: fillGutter, + width: ((1 - this.state.percent) * 100) + (this.props.disabled ? -2 : 0) + '%' + }); + }, + + percentZeroRemaining: function(gutter) { + var style = { + left: 1, + marginLeft: gutter + } + + style.width = this.remaining().width - style.left; + + return style; + }, + + handle: function() { + return { + position: 'absolute', + cursor: 'pointer', + pointerEvents: 'inherit', + top: ((CustomVariables.sliderHandleSizeActive - CustomVariables.sliderTrackSize) / 2) + 'px', + left: '0%', + zIndex: 1, + margin: (CustomVariables.sliderTrackSize / 2) + 'px 0 0 0', + width: CustomVariables.sliderHandleSize, + height: CustomVariables.sliderHandleSize, + backgroundColor: CustomVariables.sliderSelectionColor, + backgroundClip: 'padding-box', + border: '0px solid transparent', + borderRadius: '50%', + transform: 'translate(-50%, -50%)', + transition: + Transitions.easeOut('450ms', 'border') + ',' + + Transitions.easeOut('450ms', 'width') + ',' + + Transitions.easeOut('450ms', 'height'), + overflow: 'visible' + } + }, + + disabledHandle: function() { + var size = CustomVariables.sliderHandleSize + CustomVariables.sliderTrackSize; + var style = { + cursor: 'not-allowed', + backgroundColor: CustomVariables.sliderTrackColor, + width: CustomVariables.sliderHandleSizeDisabled, + height: CustomVariables.sliderHandleSizeDisabled, + border: '2px solid white' + }; + + if (this.state.percent !== 0) { + style.width = size; + style.height = size; + } + + return style; + }, + + percentZeroHandle: function() { + var size = CustomVariables.sliderHandleSize + CustomVariables.sliderTrackSize; + var style = { + border: CustomVariables.sliderTrackSize + 'px solid ' + CustomVariables.sliderTrackColor, + backgroundColor: CustomVariables.sliderHandleFillColor, + boxShadow: 'none' + }; + + if ((this.state.hovered) && !this.props.disabled) { + style = this.mergeAndPrefix(style, { + border: CustomVariables.sliderTrackSize + 'px solid ' + CustomVariables.sliderHandleColorZero, + width: size, + height: size + }); + } + + return style; + }, + + activeHandle: function() { + return { + borderColor: CustomVariables.sliderTrackColorSelected, + width: CustomVariables.sliderHandleSizeActive, + height: CustomVariables.sliderHandleSizeActive, + transition: + Transitions.easeOut('450ms', 'backgroundColor') + ',' + + Transitions.easeOut('450ms', 'width') + ',' + + Transitions.easeOut('450ms', 'height') + } + }, + + ripples: function(rippleType) { + return { + height: '300%', + width: '300%', + top: '-12px', + left: '-12px' + } + }, + render: function() { var classes = this.getClasses('mui-input', { 'mui-error': this.props.error != null }); - var sliderClasses = this.getClasses('mui-slider', { - 'mui-slider-zero': this.state.percent == 0, - 'mui-disabled': this.props.disabled - }); - + var gutter = (CustomVariables.sliderHandleSizeDisabled + CustomVariables.sliderTrackSize) / 2; + var fillGutter = CustomVariables.sliderHandleSizeDisabled - CustomVariables.sliderTrackSize; var percent = this.state.percent; if (percent > 1) percent = 1; else if (percent < 0) percent = 0; + + var sliderStyles = this.main(); + var trackStyles = this.track(); + var filledStyles = this.filled(fillGutter); + var remainingStyles = this.remaining(fillGutter); + var handleStyles = this.handle(); + + var rippleShowCondition = (this.state.hovered && !this.state.active) && this.state.percent !== 0; + + var focusRipple = ( + + ); + + var ripples = this.props.disabled || this.props.disableFocusRipple ? null : focusRipple; + + if (this.props.disabled) { + handleStyles = this.mergeAndPrefix(handleStyles, this.disabledHandle()); + } else if (this.state.active) { + handleStyles = this.mergeAndPrefix(handleStyles, this.activeHandle()); + } else if (this.state.hovered || this.state.focused) { + remainingStyles.backgroundColor = CustomVariables.sliderTrackColorSelected; + } + + if (percent === 0) { + handleStyles = this.mergeAndPrefix(handleStyles, this.percentZeroHandle()); + remainingStyles = this.mergeAndPrefix(remainingStyles, this.percentZeroRemaining(gutter)); + filledStyles.marginRight = gutter; + } + + if (this.state.focused) handleStyles.outline = 'none'; + if (this.state.percent === 0 && this.state.active) remainingStyles.marginLeft = fillGutter; return (
@@ -69,25 +257,28 @@ var Slider = React.createClass({ {this.props.description} {this.props.error} -
-
- -
- -
-
+
+
+
+
+ +
+ {ripples} +
+
-
-
-
-
.mui-paper-container { - padding-top: @desktop-gutter-mini; - padding-bottom: @desktop-gutter-mini; - } - } - } - - .mui-paper-container { - padding-top: @desktop-gutter-mini; - padding-bottom: @desktop-gutter-mini; - } - - .mui-subheader { - padding-left: @menu-subheader-padding; - padding-right: @menu-subheader-padding; - } - - .mui-nested-menu-item { - position: relative; - - &.mui-open { - & > .mui-menu { - opacity: 1; - } - } - } -} \ No newline at end of file diff --git a/src/less/components/slider.less b/src/less/components/slider.less deleted file mode 100644 index f0f4234096ca89..00000000000000 --- a/src/less/components/slider.less +++ /dev/null @@ -1,163 +0,0 @@ -.react-draggable-dragging { - user-select: none; -} - -.mui-slider { - @fill-gutter: @slider-handle-size-disabled - @slider-track-size; - - -webkit-touch-callout: none; - cursor: default; - height: @slider-handle-size-active; - position: relative; - - .handle-size(@size) { - width: @size; - height: @size; - } - - .mui-slider-track { - position: absolute; - top: (@slider-handle-size-active - @slider-track-size) / 2; - left: 0; - width: 100%; - height: @slider-track-size; - } - - .mui-slider-selection { - position: absolute; - top: 0; - height: 100%; - - .mui-slider-selection-fill { - height: 100%; - .ease-out(@property: margin); - } - } - - .mui-slider-selection-low { - left: 0; - - .mui-slider-selection-fill { - background-color: @slider-selection-color; - margin-right: @fill-gutter; - } - } - - .mui-slider-selection-high { - right: 0; - - .mui-slider-selection-fill { - background-color: @slider-track-color; - margin-left: @fill-gutter; - } - } - - .mui-slider-handle { - cursor: pointer; - position: absolute; - top: 0; - left: 0%; - z-index: 1; - margin: (@slider-track-size / 2) 0 0 0; - - background-clip: padding-box; - border-radius: 50%; - transform: translate(-50%, -50%); - transition: - border 450ms @ease-out-function, - width 450ms @ease-out-function, - height 450ms @ease-out-function; - - .handle-size(@slider-handle-size); - - &:focus { - outline: none; - } - } - - &:not(.mui-disabled) { - .mui-slider-handle { - border: 0px solid transparent; - background-color: @slider-selection-color; - &:active { - .handle-size(@slider-handle-size-active); - } - } - - &:hover, &:focus { - .mui-slider-selection-high { - .mui-slider-selection-fill { - background: @slider-track-color-selected; - } - } - - &:not(.mui-slider-zero) { - .mui-slider-handle:not(:active) { - border: @slider-handle-size solid fade(@slider-selection-color, 20%); - .handle-size(@slider-handle-size-active + @slider-handle-size); - } - } - } - - &.mui-slider-zero { - .mui-slider-handle { - border: @slider-track-size solid @slider-track-color; - background-color: transparent; - box-shadow: none; - - &:active { - border-color: @slider-track-color-selected; - width: @slider-handle-size-active !important; - height: @slider-handle-size-active !important; - transition: - background-color 450ms @ease-out-function, - width 450ms @ease-out-function, - height 450ms @ease-out-function; - - & ~ .mui-slider-selection-high .mui-slider-selection-fill { - margin-left: @slider-handle-size !important; - .ease-out(@property: margin); - } - } - } - - &:hover, &:focus { - .mui-slider-handle { - @size: @slider-handle-size + @slider-track-size; - border: @slider-track-size solid @slider-handle-color-zero; - width: @size; - height: @size; - } - } - } - } - - &.mui-disabled { - @gutter: (@slider-handle-size-disabled + @slider-track-size) / 2; - - cursor: not-allowed; - - .mui-slider-selection-fill { - background-color: @slider-track-color; - } - - .mui-slider-handle { - cursor: not-allowed; - background-color: @slider-track-color; - .handle-size(@slider-handle-size-disabled); - } - - &.mui-slider-zero { - .mui-slider-selection-low .mui-slider-selection-fill { - margin-right: @gutter; - } - .mui-slider-selection-high .mui-slider-selection-fill { - margin-left: @gutter; - } - .mui-slider-handle { - border: @slider-track-size solid @slider-track-color; - background-color: transparent; - } - } - } -} From 4cb095b80e15943310f5264fa1dcbe8bb178cda6 Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Feb 2015 15:10:44 -0600 Subject: [PATCH 3/5] Removed some debugging code in sliders page --- docs/src/app/components/pages/components/sliders.jsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx index cc4acbc478b421..66c51e6a273c3f 100644 --- a/docs/src/app/components/pages/components/sliders.jsx +++ b/docs/src/app/components/pages/components/sliders.jsx @@ -5,10 +5,6 @@ var ComponentDoc = require('../../component-doc.jsx'); var SlidersPage = React.createClass({ - handleMouseDown: function(e){ - console.log('hmd', e); - }, - render: function() { var code = From 4ee43886b8c151df1544d1e77e0b792af1d22db0 Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Feb 2015 16:19:37 -0600 Subject: [PATCH 4/5] Refractored css into js for snackbar --- src/js/snackbar.jsx | 67 ++++++++++++++++++--- src/js/styles/variables/custom-variables.js | 6 ++ src/less/components/components.less | 1 - 3 files changed, 65 insertions(+), 9 deletions(-) diff --git a/src/js/snackbar.jsx b/src/js/snackbar.jsx index ab3740ed010610..0a975a6be90815 100644 --- a/src/js/snackbar.jsx +++ b/src/js/snackbar.jsx @@ -1,12 +1,14 @@ var React = require('react'); var CssEvent = require('./utils/css-event'); -var Classable = require('./mixins/classable'); +var StylePropable = require('./mixins/style-propable'); +var Transitions = require('./styles/mixins/transitions'); +var CustomVariables = require('./styles/variables/custom-variables'); var ClickAwayable = require('./mixins/click-awayable'); var FlatButton = require('./flat-button'); var Snackbar = React.createClass({ - mixins: [Classable, ClickAwayable], + mixins: [StylePropable, ClickAwayable], manuallyBindClickAway: true, @@ -40,23 +42,72 @@ var Snackbar = React.createClass({ } }, + _main: function() { + return this.mergeAndPrefix({ + color: CustomVariables.snackbarTextColor, + backgroundColor: CustomVariables.snackbarBackgroundColor, + borderRadius: 2, + padding: '0px ' + CustomVariables.spacing.desktopGutter + 'px', + height: CustomVariables.spacing.desktopSubheaderHeight, + lineHeight: CustomVariables.spacing.desktopSubheaderHeight + 'px', + minWidth: 288, + maxWidth: 568, + + position: 'fixed', + zIndex: 10, + bottom: CustomVariables.spacing.desktopGutter, + marginLeft: CustomVariables.spacing.desktopGutter, + + left: -10000, + opacity: 0, + transform: 'translate3d(0, 20px, 0)', + transition: + Transitions.easeOut('0ms', 'left', '400ms') + ',' + + Transitions.easeOut('400ms', 'opacity') + ',' + + Transitions.easeOut('400ms', 'transform'), + }); + }, + + _openMain: function() { + return { + left: 0, + opacity: 1, + transform: 'translate3d(0, 0, 0)', + transition: + Transitions.easeOut('0ms', 'left', '0ms') + ',' + + Transitions.easeOut('400ms', 'opacity', '0ms') + ',' + + Transitions.easeOut('400ms', 'transform', '0ms'), + } + }, + + _action: function() { + return { + color: CustomVariables.snackbarActionColor, + float: 'right', + marginTop: 6, + marginRight: -16, + marginLeft: CustomVariables.spacing.desktopGutter, + backgroundColor: 'transparent', + } + }, + render: function() { - var classes = this.getClasses('mui-snackbar', { - 'mui-is-open': this.state.open - }); - var action; + var styles = this._main(); + if (this.state.open) styles = this.mergeStyles(styles, this._openMain()); + + var action; if (this.props.action) { action = ( ); } return ( - + {this.props.message} {action} diff --git a/src/js/styles/variables/custom-variables.js b/src/js/styles/variables/custom-variables.js index ee4c97b5d27bbf..b8a546ac5f6481 100644 --- a/src/js/styles/variables/custom-variables.js +++ b/src/js/styles/variables/custom-variables.js @@ -26,6 +26,7 @@ var customVariables = new (function() { this.checkboxCheckedColor = Theme.primary1Color; this.checkboxRequiredColor = Theme.primary1Color; this.checkboxDisabledColor = this.disabledColor; + // menu this.menuBackgroundColor = Colors.white; this.menuItemDataHeight = 32; @@ -56,6 +57,11 @@ var customVariables = new (function() { this.sliderSelectionColor = Theme.primary3Color; this.sliderRippleColor = Theme.primary1Color; + // snackbar + this.snackbarTextColor = Colors.white; + this.snackbarBackgroundColor = '#323232'; + this.snackbarActionColor = Theme.accent1Color; + // toggle this.toggleThumbOnColor = Theme.primary1Color; this.toggleThumbOffColor = Colors.grey50; diff --git a/src/less/components/components.less b/src/less/components/components.less index 7788d148a3c05b..0f6147c3af083a 100644 --- a/src/less/components/components.less +++ b/src/less/components/components.less @@ -13,7 +13,6 @@ @import "left-nav.less"; @import "paper.less"; @import "raised-button.less"; -@import "snackbar.less"; @import "subheader.less"; @import "table.less"; @import "tabs.less"; From 10618cea670a54133f11094a65a5f732be3d89ca Mon Sep 17 00:00:00 2001 From: M03M Date: Mon, 23 Feb 2015 16:28:06 -0600 Subject: [PATCH 5/5] Forgot to delete less corresponding less file --- src/less/components/snackbar.less | 44 ------------------------------- 1 file changed, 44 deletions(-) delete mode 100644 src/less/components/snackbar.less diff --git a/src/less/components/snackbar.less b/src/less/components/snackbar.less deleted file mode 100644 index 3e2a463ea57fb2..00000000000000 --- a/src/less/components/snackbar.less +++ /dev/null @@ -1,44 +0,0 @@ -.mui-snackbar { - - color: @mui-snackbar-text-color; - background-color: @mui-snackbar-background-color; - border-radius: 2px; - padding: 0 @desktop-gutter; - height: @desktop-subheader-height; - line-height: @desktop-subheader-height; - min-width: 288px; - max-width: 568px; - - position: fixed; - z-index: 10; - bottom: @desktop-gutter; - margin-left: @desktop-gutter; - - left: -10000px; - opacity: 0; - transform: translate3d(0, 20px, 0); - transition: - left 0ms @ease-out-function 400ms, - opacity 400ms @ease-out-function 0ms, - transform 400ms @ease-out-function 0ms; - - .mui-snackbar-action { - color: @mui-snackbar-action-color; - float: right; - margin-top: 6px; - margin-right: -16px; - margin-left: @desktop-gutter; - background-color: transparent; - } - - &.mui-is-open { - left: 0; - opacity: 1; - transform: translate3d(0, 0, 0); - transition: - left 0ms @ease-out-function 0ms, - opacity 400ms @ease-out-function 0ms, - transform 400ms @ease-out-function 0ms; - } - -} \ No newline at end of file