From dda0821d96ee3f4d0fca3fb954e8f076a68949ee Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 10 Apr 2017 15:49:03 +0200 Subject: [PATCH 1/4] Change mode switcher to use a select box. --- editor/header/mode-switcher/index.js | 45 +++++++++------------------- languages/gutenberg.pot | 8 ++--- 2 files changed, 16 insertions(+), 37 deletions(-) diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js index 9e07b70387be0f..2fe2a6914e5843 100644 --- a/editor/header/mode-switcher/index.js +++ b/editor/header/mode-switcher/index.js @@ -7,55 +7,38 @@ import { connect } from 'react-redux'; * Internal dependencies */ import './style.scss'; -import Dashicon from '../../components/dashicon'; class ModeSwitcher extends wp.element.Component { constructor() { super( ...arguments ); - this.toggle = this.toggle.bind( this ); this.state = { - opened: false + value: this.props.mode }; + + this.switchMode = this.switchMode.bind( this ); } - toggle() { - this.setState( { - opened: ! this.state.opened - } ); + switchMode( mode ) { + this.setState( { value: mode.target.value } ); + this.props.onSwitch( mode.target.value ); } render() { - const { opened } = this.state; const modes = [ { value: 'visual', label: wp.i18n.__( 'Visual' ) }, { value: 'text', label: wp.i18n._x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) }, ]; - const switchMode = ( mode ) => () => { - this.setState( { opened: false } ); - this.props.onSwitch( mode ); - }; - const currentMode = modes.find( ( { value } ) => value === this.props.mode ); + //const currentMode = modes.find( ( { value } ) => value === this.props.mode ); return (
- - { opened && -
-
- { modes.map( ( mode ) => - - ) } -
- } +
); } diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 0a71bda01eca81..d97e00befba3d3 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -31,19 +31,15 @@ msgstr "" msgid "Align right" msgstr "" -#: editor/header/mode-switcher/index.js:30 +#: editor/header/mode-switcher/index.js:28 msgid "Visual" msgstr "" -#: editor/header/mode-switcher/index.js:31 +#: editor/header/mode-switcher/index.js:29 msgctxt "Name for the Text editor tab (formerly HTML)" msgid "Text" msgstr "" -#: editor/header/mode-switcher/index.js:44 -msgid "Switch the editor mode" -msgstr "" - #: editor/header/saved-state/index.js:11 msgid "Saved" msgstr "" From 3b3cd442e626131c46fdb6bce74e8cea3fb1912f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Mon, 10 Apr 2017 16:16:53 +0200 Subject: [PATCH 2/4] CSS style the selector. --- editor/assets/stylesheets/main.scss | 5 ++ editor/header/mode-switcher/index.js | 2 + editor/header/mode-switcher/style.scss | 64 ++++++++------------------ languages/gutenberg.pot | 4 +- 4 files changed, 27 insertions(+), 48 deletions(-) diff --git a/editor/assets/stylesheets/main.scss b/editor/assets/stylesheets/main.scss index dadc53e0bf0dac..aa30a7f2ddf3f7 100644 --- a/editor/assets/stylesheets/main.scss +++ b/editor/assets/stylesheets/main.scss @@ -33,6 +33,11 @@ body.toplevel_page_gutenberg { ol { list-style-type: decimal; } + + select { + font-size: 13px; + color: $dark-gray-500; + } } .gutenberg__editor { diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js index 2fe2a6914e5843..35d549dae4c15a 100644 --- a/editor/header/mode-switcher/index.js +++ b/editor/header/mode-switcher/index.js @@ -7,6 +7,7 @@ import { connect } from 'react-redux'; * Internal dependencies */ import './style.scss'; +import Dashicon from '../../components/dashicon'; class ModeSwitcher extends wp.element.Component { constructor() { @@ -39,6 +40,7 @@ class ModeSwitcher extends wp.element.Component { ) } +
); } diff --git a/editor/header/mode-switcher/style.scss b/editor/header/mode-switcher/style.scss index 2aba90546b838b..68a4e7e5824223 100644 --- a/editor/header/mode-switcher/style.scss +++ b/editor/header/mode-switcher/style.scss @@ -1,64 +1,36 @@ .editor-mode-switcher { position: relative; margin-right: $item-spacing; -} - -.editor-mode-switcher__toggle { + padding-right: $item-spacing; color: $dark-gray-500; - padding: $item-spacing; align-items: center; cursor: pointer; - border: none; - background: none; border-right: 1px solid $light-gray-500; outline: none; display: flex; align-items: center; -} -.editor-mode-switcher__content { - position: absolute; - top: 40px; - border: 1px solid $light-gray-500; - color: $dark-gray-500; - min-width: 100px; - - button { - padding: 8px; - display: block; - border: none; - background: white; + select { + background: transparent; + line-height: 1; + border: 0; + border-radius: 0; + -webkit-appearance: none; outline: none; cursor: pointer; - width: 100%; + box-shadow: none; + padding-right: 24px; } -} -.editor-mode-switcher__arrow { - border: 10px dashed $light-gray-500; - height: 0; - line-height: 0; - position: absolute; - width: 0; - z-index: 1; - top: -10px; - left: 50%; - margin-left: -10px; - border-bottom-style: solid; - border-top: none; - border-left-color: transparent; - border-right-color: transparent; + svg { + position: relative; + z-index: -1; + margin-left: -24px; + margin-top: -1px; + } - &:before { - top: 2px; - border: 10px solid white; - content: " "; - position: absolute; - left: 50%; - margin-left: -10px; - border-bottom-style: solid; - border-top: none; - border-left-color: transparent; - border-right-color: transparent; + &:hover, + select:hover { + color: $dark-gray-900; } } diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index d97e00befba3d3..59da971c232e25 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -31,11 +31,11 @@ msgstr "" msgid "Align right" msgstr "" -#: editor/header/mode-switcher/index.js:28 +#: editor/header/mode-switcher/index.js:29 msgid "Visual" msgstr "" -#: editor/header/mode-switcher/index.js:29 +#: editor/header/mode-switcher/index.js:30 msgctxt "Name for the Text editor tab (formerly HTML)" msgid "Text" msgstr "" From c3dc925cbe6cd0760ead1df6a851bc50ed250af2 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 10 Apr 2017 14:08:02 -0400 Subject: [PATCH 3/4] Use mode switcher mode value from state directly --- editor/header/mode-switcher/index.js | 68 +++++++++++++++------------- languages/gutenberg.pot | 4 +- 2 files changed, 38 insertions(+), 34 deletions(-) diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js index 35d549dae4c15a..c8c8e8e0e3cbdd 100644 --- a/editor/header/mode-switcher/index.js +++ b/editor/header/mode-switcher/index.js @@ -9,41 +9,45 @@ import { connect } from 'react-redux'; import './style.scss'; import Dashicon from '../../components/dashicon'; -class ModeSwitcher extends wp.element.Component { - constructor() { - super( ...arguments ); - this.state = { - value: this.props.mode - }; - - this.switchMode = this.switchMode.bind( this ); - } - - switchMode( mode ) { - this.setState( { value: mode.target.value } ); - this.props.onSwitch( mode.target.value ); +/** + * Set of available mode options. + * + * @type {Array} + */ +const MODES = [ + { + value: 'visual', + label: wp.i18n.__( 'Visual' ) + }, + { + value: 'text', + label: wp.i18n._x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) } +]; - render() { - const modes = [ - { value: 'visual', label: wp.i18n.__( 'Visual' ) }, - { value: 'text', label: wp.i18n._x( 'Text', 'Name for the Text editor tab (formerly HTML)' ) }, - ]; - //const currentMode = modes.find( ( { value } ) => value === this.props.mode ); +function ModeSwitcher( { mode, onSwitch } ) { + // Disable reason: Toggling between modes should take effect immediately, + // arguably even with keyboard navigation. `onBlur` only would require + // another action to remove focus from the select (tabbing or clicking + // outside the field), which is unexpected when submit button is omitted. - return ( -
- - -
- ); - } + /* eslint-disable jsx-a11y/no-onchange */ + return ( +
+ + +
+ ); + /* eslint-enable jsx-a11y/no-onchange */ } export default connect( diff --git a/languages/gutenberg.pot b/languages/gutenberg.pot index 59da971c232e25..289aa792e02030 100644 --- a/languages/gutenberg.pot +++ b/languages/gutenberg.pot @@ -31,11 +31,11 @@ msgstr "" msgid "Align right" msgstr "" -#: editor/header/mode-switcher/index.js:29 +#: editor/header/mode-switcher/index.js:20 msgid "Visual" msgstr "" -#: editor/header/mode-switcher/index.js:30 +#: editor/header/mode-switcher/index.js:24 msgctxt "Name for the Text editor tab (formerly HTML)" msgid "Text" msgstr "" From fe4cf93f914f631ecca3d8cfe3111858685f8fe7 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Mon, 10 Apr 2017 14:15:37 -0400 Subject: [PATCH 4/4] Target mode switcher child styles by classname Nesting input to defeat specificity of general `.wp-admin select` selector --- editor/header/mode-switcher/index.js | 1 + editor/header/mode-switcher/style.scss | 12 ++++++------ 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/editor/header/mode-switcher/index.js b/editor/header/mode-switcher/index.js index c8c8e8e0e3cbdd..59985814db8232 100644 --- a/editor/header/mode-switcher/index.js +++ b/editor/header/mode-switcher/index.js @@ -37,6 +37,7 @@ function ModeSwitcher( { mode, onSwitch } ) {