From 19d9f9cbb175f7665c9431647da1043724545dbe Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 20 Jan 2016 11:34:08 -0500 Subject: [PATCH 1/3] Posts: Decode entities in post selector label --- client/my-sites/post-selector/selector.jsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/my-sites/post-selector/selector.jsx b/client/my-sites/post-selector/selector.jsx index 396207b533f2..cb2f43ed4753 100644 --- a/client/my-sites/post-selector/selector.jsx +++ b/client/my-sites/post-selector/selector.jsx @@ -18,6 +18,7 @@ import NoResults from './no-results'; import analytics from 'analytics'; import Search from './search'; import TreeConvert from 'lib/tree-convert'; +import { decodeEntities } from 'lib/formatting'; /** * Constants @@ -117,7 +118,7 @@ export default React.createClass( { renderItem( item ) { const itemId = item.ID; - const name = item.title || this.translate( 'Untitled' ); + const name = item.title ? decodeEntities( item.title ) : this.translate( 'Untitled' ); const checked = this.props.selected === item.ID; const inputType = this.props.multiple ? 'checkbox' : 'radio'; const domId = camelCase( this.props.analyticsPrefix ) + '-option-' + itemId; From 03dc37d520f53aec6f13d51e5fae81767090a187 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 20 Jan 2016 11:34:41 -0500 Subject: [PATCH 2/3] Posts: Consolidate post selector styles to base component --- client/my-sites/post-selector/search.scss | 20 ----- client/my-sites/post-selector/selector.jsx | 14 ++-- client/my-sites/post-selector/style.scss | 81 ++++++++++++++++--- .../post-editor/editor-page-parent/style.scss | 37 +-------- 4 files changed, 83 insertions(+), 69 deletions(-) delete mode 100644 client/my-sites/post-selector/search.scss diff --git a/client/my-sites/post-selector/search.scss b/client/my-sites/post-selector/search.scss deleted file mode 100644 index 8ab9ee6c7410..000000000000 --- a/client/my-sites/post-selector/search.scss +++ /dev/null @@ -1,20 +0,0 @@ -.post-selector__search { - position: relative; - margin-bottom: 4px; -} - -.post-selector__search .gridicon { - position: absolute; - left: 0; - padding: 8px 8px; -} - -.post-selector__search input { - right: 0; - width: 100%; - height: 35px; - padding: 4px 8px 4px 30px; - background: $white; - font-size: 14px; - -webkit-appearance: none; -} diff --git a/client/my-sites/post-selector/selector.jsx b/client/my-sites/post-selector/selector.jsx index cb2f43ed4753..a141c05e1c23 100644 --- a/client/my-sites/post-selector/selector.jsx +++ b/client/my-sites/post-selector/selector.jsx @@ -124,10 +124,14 @@ export default React.createClass( { const domId = camelCase( this.props.analyticsPrefix ) + '-option-' + itemId; const input = ( - + checked={ checked } + className="post-selector__input" /> ); return ( @@ -176,8 +180,8 @@ export default React.createClass( { return (
  • - - + +
    • ); }, @@ -228,7 +232,7 @@ export default React.createClass( { { this.props.emptyMessage } : null } -
    + { posts ? this.renderHierarchy( posts ) : this.renderPlaceholder() }
    diff --git a/client/my-sites/post-selector/style.scss b/client/my-sites/post-selector/style.scss index 9ec4bfc3be94..8731e2f1375c 100644 --- a/client/my-sites/post-selector/style.scss +++ b/client/my-sites/post-selector/style.scss @@ -1,4 +1,47 @@ -@import 'search'; +.post-selector { + position: relative; + background-color: $white; + border: 1px solid lighten( $gray, 20% ); + + &.is-compact { + background-color: transparent; + border: none; + } +} + +.post-selector__search { + position: relative; +} + +.post-selector__search .gridicon { + position: absolute; + left: 0; + padding: 8px; +} + +.post-selector__search input { + right: 0; + width: 100%; + height: 35px; + padding: 4px 8px 4px 30px; + border-width: 0; + border-bottom-width: 1px; + background: $white; + font-size: 14px; + -webkit-appearance: none; +} + +.post-selector__results { + max-height: 300px; + overflow: hidden; + overflow-y: auto; + padding: 8px; + + .post-selector.is-compact & { + padding: 0; + overflow: visible; + } +} .post-selector .placeholder-text { color: transparent; @@ -16,15 +59,11 @@ font-size: 14px; } -.post-selector__nested-list { - margin-left: 1em; -} - -.post-selector__list-item { - padding: 2px 0; +input[type=radio].post-selector__input, +input[type=checkbox].post-selector__input { + margin-top: 4px; - input[type=radio] + label, - input[type=checkbox] + label { + & + label { display: block; margin-left: 24px; transition: all 200ms ease-out; @@ -34,8 +73,28 @@ color: $blue-medium; } } +} + +input[type=checkbox].post-selector__input { + margin-right: 8px; +} + +.post-selector__nested-list { + margin-left: 1em; +} + +.post-selector__list-item { + padding: 2px 0; + font-size: 13px; +} + +.post-selector__label { + display: block; + margin-left: 24px; + margin-top: 2px; - input[type=checkbox] { - margin-right: 8px; + .post-selector.is-compact & { + font-size: 14px; + margin-top: 0; } } diff --git a/client/post-editor/editor-page-parent/style.scss b/client/post-editor/editor-page-parent/style.scss index bf80f459a79c..3e2147b9a9ad 100644 --- a/client/post-editor/editor-page-parent/style.scss +++ b/client/post-editor/editor-page-parent/style.scss @@ -1,42 +1,13 @@ .editor-page-parent .post-selector { - border: 1px solid lighten( $gray, 20% ); - height: 186px; - padding: 8px; - overflow: hidden; - overflow-y: auto; margin: 8px 0 0 0; - - &.is-compact { - border: none; - height: auto; - padding: 0; - overflow: visible; - - .post-selector__label { - font-size: 14px; - margin-top: 0; - } - } -} - -.editor-page-parent .post-selector__search { - position: relative; - margin: -9px -9px 4px; } -.editor-page-parent .post-selector__list-item { - padding: 2px 0; - font-size: 13px; -} - -.editor-page-parent input[type=radio] { - margin-right: 8px +.editor-page-parent .post-selector__results { + height: 186px; } -.editor-page-parent .post-selector__label { - display: block; - margin-left: 24px; - margin-top: 2px; +.editor-page-parent .post-selector.is-compact .post-selector__results { + height: auto; } .editor-page-parent__label-text { From 34e340b3f7c67b1fd56815897846a52a701180f4 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Wed, 20 Jan 2016 11:34:57 -0500 Subject: [PATCH 3/3] DevDocs: Add PostSelector example to App Components --- client/devdocs/controller.js | 9 ++-- client/devdocs/design/app-components.jsx | 2 + .../my-sites/post-selector/docs/example.jsx | 47 +++++++++++++++++++ 3 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 client/my-sites/post-selector/docs/example.jsx diff --git a/client/devdocs/controller.js b/client/devdocs/controller.js index 3eddebb50f6d..ece0de1ad1eb 100644 --- a/client/devdocs/controller.js +++ b/client/devdocs/controller.js @@ -6,6 +6,7 @@ var ReactDom = require( 'react-dom' ), qs = require( 'qs' ), debounce = require( 'lodash/function/debounce' ), page = require( 'page' ), + ReduxProvider = require( 'react-redux' ).Provider, setSection = require( 'state/ui/actions' ).setSection, EmptyContent = require( 'components/empty-content' ); @@ -100,9 +101,11 @@ var devdocs = { context.store.dispatch( setSection( 'devdocs' ) ); ReactDom.render( - React.createElement( AppComponents, { - component: context.params.component - } ), + React.createElement( ReduxProvider, { store: context.store }, + React.createElement( AppComponents, { + component: context.params.component + } ) + ), document.getElementById( 'primary' ) ); }, diff --git a/client/devdocs/design/app-components.jsx b/client/devdocs/design/app-components.jsx index 424ebaedfcb9..47ade9793409 100644 --- a/client/devdocs/design/app-components.jsx +++ b/client/devdocs/design/app-components.jsx @@ -11,6 +11,7 @@ var React = require( 'react' ), */ var SearchCard = require( 'components/search-card' ), CommentButtons = require( 'components/comment-button/docs/example' ), + PostSelector = require( 'my-sites/post-selector/docs/example' ), LikeButtons = require( 'components/like-button/docs/example' ), FollowButtons = require( 'components/follow-button/docs/example' ), Sites = require( 'lib/sites-list/docs/example' ), @@ -143,6 +144,7 @@ module.exports = React.createClass( { } + diff --git a/client/my-sites/post-selector/docs/example.jsx b/client/my-sites/post-selector/docs/example.jsx new file mode 100644 index 000000000000..e74a5dbf1059 --- /dev/null +++ b/client/my-sites/post-selector/docs/example.jsx @@ -0,0 +1,47 @@ +/** + * External dependencies + */ +import React from 'react'; +import PureRenderMixin from 'react-pure-render/mixin'; + +/** + * Internal dependencies + */ +import PostSelector from '../'; +import observe from 'lib/mixins/data-observe'; +import sites from 'lib/sites-list'; + +const PostSelectorExample = React.createClass( { + mixins: [ observe( 'sites' ), PureRenderMixin ], + + render() { + const primary = this.props.sites.getPrimary(); + + return ( +
    +

    + Post Selector +

    +
    + { this.props.sites.initialized && ( + + ) } +
    +
    + ); + } +} ); + +export default React.createClass( { + displayName: 'PostSelector', + + mixins: [ PureRenderMixin ], + + render() { + return ; + } +} );