From c58227b4437c87ca7c4d42af3b78ab42ccaf503b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 22 Jul 2015 15:59:05 +0200 Subject: [PATCH 1/5] first cut flowtype boilerplate --- .../react_flow_type/react_flow_type.js | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 js/components/react_flow_type/react_flow_type.js diff --git a/js/components/react_flow_type/react_flow_type.js b/js/components/react_flow_type/react_flow_type.js new file mode 100644 index 00000000..f82c5447 --- /dev/null +++ b/js/components/react_flow_type/react_flow_type.js @@ -0,0 +1,73 @@ +'use strict'; +/** + * This component is essentially a port of https://github.com/simplefocus/FlowType.JS + * to Reactjs in order to not being forced to use jQuery + * + * Author: Tim Daubenschütz + * + * Thanks to the guys at Simple Focus http://simplefocus.com/ + */ + +import React from 'react'; +import ReactAddons from 'react/addons'; + +let FlowType = React.createClass({ + propTypes: { + + // standard FlowTypes.JS options + maximum: React.PropTypes.number, + minimum: React.PropTypes.number, + maxFont: React.PropTypes.number, + minFont: React.PropTypes.number, + fontRatio: React.PropTypes.number, + + // react specific options + children: React.PropTypes.element.isRequired // only supporting one child element at once right now + }, + + // Establish default settings/variables + // ==================================== + getDefaultProps() { + return { + maximum: 9999, + minimum: 1, + maxFont: 9999, + minFont: 1, + fontRatio: 35 + }; + }, + + getInitialState() { + return { + fontSize: 1 + }; + }, + + componentDidMount() { + window.addEventListener('resize', this.handleResize); + }, + + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); + }, + + renderChildren() { + return ReactAddons.Children.map(this.props.children, (child) => { + return ReactAddons.addons.cloneWithProps(child, { + style: { + fontSize: this.state.fontSize + } + }); + }); + }, + + render() { + return ( + + {this.renderChildren()} + + ); + } +}); + +export default FlowType; \ No newline at end of file From 370a3b43ddee9c24bcd30fdeec02edda6dbb3a1e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 22 Jul 2015 16:12:52 +0200 Subject: [PATCH 2/5] add font rendering logic --- .../react_flow_type/react_flow_type.js | 21 +++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/js/components/react_flow_type/react_flow_type.js b/js/components/react_flow_type/react_flow_type.js index f82c5447..caa3f6ca 100644 --- a/js/components/react_flow_type/react_flow_type.js +++ b/js/components/react_flow_type/react_flow_type.js @@ -25,8 +25,6 @@ let FlowType = React.createClass({ children: React.PropTypes.element.isRequired // only supporting one child element at once right now }, - // Establish default settings/variables - // ==================================== getDefaultProps() { return { maximum: 9999, @@ -39,18 +37,33 @@ let FlowType = React.createClass({ getInitialState() { return { - fontSize: 1 + // 32 because that's the default font display size + // doesn't really matter though + fontSize: 32 }; }, componentDidMount() { + // Make changes upon resize, calculate changes and rerender window.addEventListener('resize', this.handleResize); }, componentWillUnmount() { + // stop listening to window once the component was unmounted window.removeEventListener('resize', this.handleResize); }, + handleResize() { + let elemWidth = this.refs.flowTypeElement.getDOMNode().offsetWidth; + let width = elemWidth > this.props.maximum ? this.props.maximum : elemWidth < this.props.minimum ? this.props.minimum : elemWidth; + let fontBase = width / this.props.fontRatio; + let fontSize = fontBase > this.props.maxFont ? this.props.maxFont : fontBase < this.props.minFont ? this.props.minFont : fontBase; + + this.setState({ fontSize }); + }, + + // The child the user passes to this component needs to have it's + // style.fontSize property to be updated renderChildren() { return ReactAddons.Children.map(this.props.children, (child) => { return ReactAddons.addons.cloneWithProps(child, { @@ -63,7 +76,7 @@ let FlowType = React.createClass({ render() { return ( - + {this.renderChildren()} ); From c2d76034af91d7b92d79363b22a8e3bf79b0bd6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 22 Jul 2015 17:20:40 +0200 Subject: [PATCH 3/5] add flowtype functionality for piece list --- .../accordion_list_item.js | 78 ++++++++++--------- .../react_flow_type/react_flow_type.js | 22 ++++-- 2 files changed, 55 insertions(+), 45 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 96fe619c..ede61501 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -14,13 +14,14 @@ import PieceListActions from '../../actions/piece_list_actions'; import PieceListStore from '../../stores/piece_list_store'; import WhitelabelStore from '../../stores/whitelabel_store'; -import WhitelabelActions from '../../actions/whitelabel_actions'; import EditionListActions from '../../actions/edition_list_actions'; import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; +import FlowType from '../react_flow_type/react_flow_type'; + import AclProxy from '../acl_proxy'; import SubmitToPrizeButton from '../ascribe_buttons/submit_to_prize_button'; @@ -94,7 +95,7 @@ let AccordionListItem = React.createClass({ GlobalNotificationActions.appendGlobalNotification(notification); }, - onPollingSuccess(pieceId, numEditions) { + onPollingSuccess(pieceId) { PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc); EditionListActions.toggleEditionList(pieceId); @@ -159,44 +160,47 @@ let AccordionListItem = React.createClass({ -
- -

{this.props.content.title}

- +
+ + +

{this.props.content.title}

+ -

{getLangText('by %s', this.props.content.artist_name)}

+

{getLangText('by %s', this.props.content.artist_name)}

-
- {this.props.content.date_created.split('-')[0]} +
+ {this.props.content.date_created.split('-')[0]} - - - - - - - - - - {this.getLicences()} -
+ + + + + + + + + + {this.getLicences()} +
+
diff --git a/js/components/react_flow_type/react_flow_type.js b/js/components/react_flow_type/react_flow_type.js index caa3f6ca..063eaf1c 100644 --- a/js/components/react_flow_type/react_flow_type.js +++ b/js/components/react_flow_type/react_flow_type.js @@ -39,12 +39,13 @@ let FlowType = React.createClass({ return { // 32 because that's the default font display size // doesn't really matter though - fontSize: 32 + fontSize: 0 }; }, componentDidMount() { // Make changes upon resize, calculate changes and rerender + this.handleResize(); window.addEventListener('resize', this.handleResize); }, @@ -67,18 +68,23 @@ let FlowType = React.createClass({ renderChildren() { return ReactAddons.Children.map(this.props.children, (child) => { return ReactAddons.addons.cloneWithProps(child, { - style: { - fontSize: this.state.fontSize - } - }); + ref: 'flowTypeFontElement', + + }); }); }, render() { return ( - - {this.renderChildren()} - +
+ {this.props.children} +
); } }); From 1a1ba8bbb1f2849f781c9dc02f3266e7b3bc5f35 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 27 Jul 2015 18:19:55 +0200 Subject: [PATCH 4/5] add ellipsis again --- .../accordion_list_item.js | 72 +++++++++---------- .../ascribe_detail/detail_property.js | 19 +++-- js/components/ascribe_detail/edition.js | 3 +- js/components/ascribe_detail/piece.js | 3 +- js/components/whitelabel/prize/routes.js | 2 +- sass/ascribe_accordion_list.scss | 3 + sass/main.scss | 7 +- 7 files changed, 59 insertions(+), 50 deletions(-) diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index ede61501..5c47d060 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -20,8 +20,6 @@ import EditionListActions from '../../actions/edition_list_actions'; import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationActions from '../../actions/global_notification_actions'; -import FlowType from '../react_flow_type/react_flow_type'; - import AclProxy from '../acl_proxy'; import SubmitToPrizeButton from '../ascribe_buttons/submit_to_prize_button'; @@ -161,46 +159,42 @@ let AccordionListItem = React.createClass({
- - -

{this.props.content.title}

- + +

{this.props.content.title}

+ -

{getLangText('by %s', this.props.content.artist_name)}

+

{getLangText('by %s', this.props.content.artist_name)}

-
- {this.props.content.date_created.split('-')[0]} +
+ {this.props.content.date_created.split('-')[0]} - - - - - - - - - - {this.getLicences()} -
- + + + + + + + + + + {this.getLicences()} +
diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js index d293f6a3..e6e12ec5 100644 --- a/js/components/ascribe_detail/detail_property.js +++ b/js/components/ascribe_detail/detail_property.js @@ -11,26 +11,35 @@ let DetailProperty = React.createClass({ ]), separator: React.PropTypes.string, labelClassName: React.PropTypes.string, - valueClassName: React.PropTypes.string + valueClassName: React.PropTypes.string, + breakWord: React.PropTypes.bool }, getDefaultProps() { return { separator: ':', - labelClassName: 'col-xs-3 col-sm-4 col-md-3 col-lg-3', - valueClassName: 'col-xs-9 col-sm-8 col-md-9 col-lg-9' + labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2', + valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10' }; }, render() { let value = this.props.value; + let style; + + if(this.props.breakWord) { + style = { + wordBreak: 'break-all' + }; + } + if (this.props.children){ value = (
{ this.props.value }
-
+
{ this.props.children }
); @@ -41,7 +50,7 @@ let DetailProperty = React.createClass({
{ this.props.label + this.props.separator}
-
+
{value}
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js index 409f94b9..98bfe654 100644 --- a/js/components/ascribe_detail/edition.js +++ b/js/components/ascribe_detail/edition.js @@ -98,7 +98,8 @@ let Edition = React.createClass({
- {this.props.edition.title}
} /> +

{this.props.edition.title}

+
diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js index 94ac82a4..e73984a9 100644 --- a/js/components/ascribe_detail/piece.js +++ b/js/components/ascribe_detail/piece.js @@ -131,7 +131,8 @@ let Piece = React.createClass({
- {this.props.piece.title}
} /> +

{this.props.piece.title}

+
{this.props.piece.num_editions > 0 ? : null} diff --git a/js/components/whitelabel/prize/routes.js b/js/components/whitelabel/prize/routes.js index 72513419..ac490c4e 100644 --- a/js/components/whitelabel/prize/routes.js +++ b/js/components/whitelabel/prize/routes.js @@ -39,4 +39,4 @@ function getRoutes(commonRoutes) { } -export default getRoutes; +export default getRoutes; \ No newline at end of file diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss index 33cf18a8..74ae86af 100644 --- a/sass/ascribe_accordion_list.scss +++ b/sass/ascribe_accordion_list.scss @@ -48,6 +48,9 @@ $ascribe-accordion-list-font: 'Source Sans Pro'; margin: .1em 0 .1em 0; font-size: 2.2em; cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } h3 { font-size: 1.3em; diff --git a/sass/main.scss b/sass/main.scss index 473e57d4..2b6a15e6 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -215,7 +215,8 @@ hr { .ascribe-detail-title { font-size: 2em; - margin-bottom: -0.2em; + font-weight: bold; + margin-top: 0; } .ascribe-detail-property { @@ -227,8 +228,8 @@ hr { } .ascribe-detail-property-value { - white-space: nowrap; - overflow: hidden; + /* white-space: nowrap; + overflow: hidden; */ text-overflow: ellipsis; } From 275f6c839e2188b604d5878855f0a6cb9abdabc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 27 Jul 2015 18:24:21 +0200 Subject: [PATCH 5/5] minor fixes --- js/components/ascribe_detail/detail_property.js | 11 ++--------- sass/main.scss | 1 - 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js index e6e12ec5..b2d8170d 100644 --- a/js/components/ascribe_detail/detail_property.js +++ b/js/components/ascribe_detail/detail_property.js @@ -25,13 +25,6 @@ let DetailProperty = React.createClass({ render() { let value = this.props.value; - let style; - - if(this.props.breakWord) { - style = { - wordBreak: 'break-all' - }; - } if (this.props.children){ value = ( @@ -39,7 +32,7 @@ let DetailProperty = React.createClass({
{ this.props.value }
-
+
{ this.props.children }
); @@ -50,7 +43,7 @@ let DetailProperty = React.createClass({
{ this.props.label + this.props.separator}
-
+
{value}
diff --git a/sass/main.scss b/sass/main.scss index 2b6a15e6..4c54ed24 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -215,7 +215,6 @@ hr { .ascribe-detail-title { font-size: 2em; - font-weight: bold; margin-top: 0; }