From 2a4bc2af891f39a47ea677d7abe1e0048e52bbf4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 23 Sep 2015 15:16:46 +0200 Subject: [PATCH 1/6] separate contract settings from account settings --- .../ascribe_settings/contract_settings.js | 180 +++++++++--------- .../ascribe_settings/settings_container.js | 1 - js/components/header.js | 14 +- .../whitelabel/wallet/wallet_routes.js | 4 +- js/routes.js | 2 + 5 files changed, 111 insertions(+), 90 deletions(-) diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index d0ded734..2ef600f0 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -8,6 +8,9 @@ import CreateContractForm from '../ascribe_forms/form_create_contract'; import ContractListStore from '../../stores/contract_list_store'; import ContractListActions from '../../actions/contract_list_actions'; +import UserStore from '../../stores/user_store'; +import UserActions from '../../actions/user_actions'; + import ActionPanel from '../ascribe_panel/action_panel'; import ContractSettingsUpdateButton from './contract_settings_update_button'; @@ -17,24 +20,27 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import AclProxy from '../acl_proxy'; import { getLangText } from '../../utils/lang_utils'; +import { mergeOptions } from '../../utils/general_utils'; let ContractSettings = React.createClass({ - propTypes: { - currentUser: React.PropTypes.object, - defaultExpanded: React.PropTypes.bool - }, - getInitialState(){ - return ContractListStore.getState(); + return mergeOptions( + ContractListStore.getState(), + UserStore.getState() + ); }, componentDidMount() { ContractListStore.listen(this.onChange); + UserStore.listen(this.onChange); + + UserActions.fetchCurrentUser(); ContractListActions.fetchContractList(true); }, componentWillUnmount() { + UserStore.unlisten(this.onChange); ContractListStore.unlisten(this.onChange); }, @@ -82,86 +88,88 @@ let ContractSettings = React.createClass({ } return ( - - - -
- {createPublicContractForm} - {publicContracts.map((contract, i) => { - return ( - - - - {getLangText('PREVIEW')} - - -
- } - leftColumnWidth="40%" - rightColumnWidth="60%"/> - ); - })} - - - -
- - {privateContracts.map((contract, i) => { - return ( - - - - {getLangText('PREVIEW')} - - -
- } - leftColumnWidth="40%" - rightColumnWidth="60%"/> - ); - })} - - - - +
+ + + +
+ {createPublicContractForm} + {publicContracts.map((contract, i) => { + return ( + + + + {getLangText('PREVIEW')} + + +
+ } + leftColumnWidth="40%" + rightColumnWidth="60%"/> + ); + })} +
+ + +
+ + {privateContracts.map((contract, i) => { + return ( + + + + {getLangText('PREVIEW')} + + +
+ } + leftColumnWidth="40%" + rightColumnWidth="60%"/> + ); + })} + + + + + ); } }); diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js index 2b3dc6a7..12c406ad 100644 --- a/js/components/ascribe_settings/settings_container.js +++ b/js/components/ascribe_settings/settings_container.js @@ -50,7 +50,6 @@ let SettingsContainer = React.createClass({ {this.props.children} - ); } diff --git a/js/components/header.js b/js/components/header.js index 0309b748..307ba663 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -3,7 +3,6 @@ import React from 'react'; import Router from 'react-router'; - import Nav from 'react-bootstrap/lib/Nav'; import Navbar from 'react-bootstrap/lib/Navbar'; import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav'; @@ -12,6 +11,8 @@ import MenuItem from 'react-bootstrap/lib/MenuItem'; import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink'; import NavItemLink from 'react-router-bootstrap/lib/NavItemLink'; +import AclProxy from './acl_proxy'; + import UserActions from '../actions/user_actions'; import UserStore from '../stores/user_store'; @@ -96,7 +97,7 @@ let Header = React.createClass({ } }, - onMenuItemClick(event) { + onMenuItemClick() { /* This is a hack to make the dropdown close after clicking on an item The function just need to be defined @@ -137,6 +138,15 @@ let Header = React.createClass({ onClick={this.onMenuItemClick}> {getLangText('Account Settings')} + + + {getLangText('Contract Settings')} + + {getLangText('Log out')} diff --git a/js/components/whitelabel/wallet/wallet_routes.js b/js/components/whitelabel/wallet/wallet_routes.js index 075901bd..43b983aa 100644 --- a/js/components/whitelabel/wallet/wallet_routes.js +++ b/js/components/whitelabel/wallet/wallet_routes.js @@ -12,7 +12,7 @@ import PieceList from '../../../components/piece_list'; import PieceContainer from '../../../components/ascribe_detail/piece_container'; import EditionContainer from '../../../components/ascribe_detail/edition_container'; import SettingsContainer from '../../../components/ascribe_settings/settings_container'; -import RegisterPiece from '../../../components/register_piece'; +import ContractSettings from '../../../components/ascribe_settings/contract_settings'; import CylandLanding from './components/cyland/cyland_landing'; import CylandPieceContainer from './components/cyland/ascribe_detail/cyland_piece_container'; @@ -49,6 +49,7 @@ let ROUTES = { + ), 'cc': ( @@ -79,6 +80,7 @@ let ROUTES = { + ) diff --git a/js/routes.js b/js/routes.js index 1d521cab..7a869f41 100644 --- a/js/routes.js +++ b/js/routes.js @@ -17,6 +17,7 @@ import LogoutContainer from './components/logout_container'; import SignupContainer from './components/signup_container'; import PasswordResetContainer from './components/password_reset_container'; +import ContractSettings from './components/ascribe_settings/contract_settings'; import SettingsContainer from './components/ascribe_settings/settings_container'; import CoaVerifyContainer from './components/coa_verify_container'; @@ -43,6 +44,7 @@ const COMMON_ROUTES = ( + From 74e7c9a3d92b8aef983d47c65afbd41a3af5473b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 23 Sep 2015 15:41:12 +0200 Subject: [PATCH 2/6] Integrate new ACLOptions into settings --- .../ascribe_settings/contract_settings.js | 156 +++++++++--------- .../ascribe_settings/settings_container.js | 29 +++- js/components/header.js | 2 +- 3 files changed, 102 insertions(+), 85 deletions(-) diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 2ef600f0..2050120c 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -89,86 +89,82 @@ let ContractSettings = React.createClass({ return (
- - - -
- {createPublicContractForm} - {publicContracts.map((contract, i) => { - return ( - - - - {getLangText('PREVIEW')} - - -
- } - leftColumnWidth="40%" - rightColumnWidth="60%"/> - ); - })} -
- - -
- - {privateContracts.map((contract, i) => { - return ( - - - - {getLangText('PREVIEW')} - - -
- } - leftColumnWidth="40%" - rightColumnWidth="60%"/> - ); - })} - - - - + + +
+ {createPublicContractForm} + {publicContracts.map((contract, i) => { + return ( + + + + {getLangText('PREVIEW')} + + +
+ } + leftColumnWidth="40%" + rightColumnWidth="60%"/> + ); + })} + + + +
+ + {privateContracts.map((contract, i) => { + return ( + + + + {getLangText('PREVIEW')} + + +
+ } + leftColumnWidth="40%" + rightColumnWidth="60%"/> + ); + })} + + + ); } diff --git a/js/components/ascribe_settings/settings_container.js b/js/components/ascribe_settings/settings_container.js index 12c406ad..0957bb78 100644 --- a/js/components/ascribe_settings/settings_container.js +++ b/js/components/ascribe_settings/settings_container.js @@ -6,11 +6,17 @@ import Router from 'react-router'; import UserStore from '../../stores/user_store'; import UserActions from '../../actions/user_actions'; +import WhitelabelStore from '../../stores/whitelabel_store'; +import WhitelabelActions from '../../actions/whitelabel_actions'; + import AccountSettings from './account_settings'; import BitcoinWalletSettings from './bitcoin_wallet_settings'; -import ContractSettings from './contract_settings'; import APISettings from './api_settings'; +import AclProxy from '../acl_proxy'; + +import { mergeOptions } from '../../utils/general_utils'; + let SettingsContainer = React.createClass({ propTypes: { @@ -22,15 +28,22 @@ let SettingsContainer = React.createClass({ mixins: [Router.Navigation], getInitialState() { - return UserStore.getState(); + return mergeOptions( + UserStore.getState(), + WhitelabelStore.getState() + ); }, componentDidMount() { UserStore.listen(this.onChange); + WhitelabelStore.listen(this.onChange); + + WhitelabelActions.fetchWhitelabel(); UserActions.fetchCurrentUser(); }, componentWillUnmount() { + WhitelabelStore.unlisten(this.onChange); UserStore.unlisten(this.onChange); }, @@ -48,8 +61,16 @@ let SettingsContainer = React.createClass({
{this.props.children} - - + + + + + +
); } diff --git a/js/components/header.js b/js/components/header.js index 307ba663..f227313f 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -139,7 +139,7 @@ let Header = React.createClass({ {getLangText('Account Settings')} Date: Wed, 23 Sep 2015 16:09:12 +0200 Subject: [PATCH 3/6] add acl for update button in ContractSettings --- .../ascribe_settings/contract_settings.js | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 2050120c..a2ff405e 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -11,6 +11,9 @@ import ContractListActions from '../../actions/contract_list_actions'; import UserStore from '../../stores/user_store'; import UserActions from '../../actions/user_actions'; +import WhitelabelStore from '../../stores/whitelabel_store'; +import WhitelabelActions from '../../actions/whitelabel_actions'; + import ActionPanel from '../ascribe_panel/action_panel'; import ContractSettingsUpdateButton from './contract_settings_update_button'; @@ -34,12 +37,15 @@ let ContractSettings = React.createClass({ componentDidMount() { ContractListStore.listen(this.onChange); UserStore.listen(this.onChange); + WhitelabelStore.listen(this.onChange); + WhitelabelActions.fetchWhitelabel(); UserActions.fetchCurrentUser(); ContractListActions.fetchContractList(true); }, componentWillUnmount() { + WhitelabelStore.unlisten(this.onChange); UserStore.unlisten(this.onChange); ContractListStore.unlisten(this.onChange); }, @@ -106,7 +112,11 @@ let ContractSettings = React.createClass({ content={contract.name} buttons={
- + + + - + + + Date: Fri, 25 Sep 2015 11:20:12 +0200 Subject: [PATCH 4/6] Implement word wrap for ContractSettings --- .../ascribe_settings/contract_settings.js | 10 +++++----- js/utils/general_utils.js | 17 +++++++++++++++++ sass/ascribe_panel.scss | 4 ++++ 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index a2ff405e..298caaee 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -23,7 +23,7 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import AclProxy from '../acl_proxy'; import { getLangText } from '../../utils/lang_utils'; -import { mergeOptions } from '../../utils/general_utils'; +import { mergeOptions, wrapTextAtCharIndex } from '../../utils/general_utils'; let ContractSettings = React.createClass({ @@ -109,7 +109,7 @@ let ContractSettings = React.createClass({
} - leftColumnWidth="40%" - rightColumnWidth="60%"/> + leftColumnWidth="60%" + rightColumnWidth="40%"/> ); })} diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index 7717a96a..3565a271 100644 --- a/js/utils/general_utils.js +++ b/js/utils/general_utils.js @@ -204,4 +204,21 @@ export function excludePropFromObject(obj, propList){ } } return clonedObj; +} + +/** + * Takes a string and breaks it at the supplied index and replaces it + * with a (potentially) short string that also has been provided + * @param {string} text The string to wrap + * @param {number} charIndex The char number at which the text should be wrapped + * @param {String} replacement All text after charIndex will be replaced with this string + * @return {string} The wrapped text + */ +export function wrapTextAtCharIndex(text, charIndex, replacement = '...') { + let wrappedText = ''; + + wrappedText = text.slice(0, charIndex); + wrappedText += text.length > charIndex ? replacement : ''; + + return wrappedText; } \ No newline at end of file diff --git a/sass/ascribe_panel.scss b/sass/ascribe_panel.scss index 9d53b911..0d156d7f 100644 --- a/sass/ascribe_panel.scss +++ b/sass/ascribe_panel.scss @@ -24,6 +24,10 @@ > .ascribe-panel-content { display: table-cell; vertical-align: middle; + + &:first-child { + font-size: .9em; + } } @media(max-width:767px) { From cb452ce7bf675781a42806c9e42e2a5755e85e66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Fri, 25 Sep 2015 15:22:16 +0200 Subject: [PATCH 5/6] PR Feedback: rename wrapTextAtCharIndex to truncateTextAtCharIndex --- js/components/ascribe_settings/contract_settings.js | 6 +++--- js/utils/general_utils.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 298caaee..ad329143 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -23,7 +23,7 @@ import GlobalNotificationActions from '../../actions/global_notification_actions import AclProxy from '../acl_proxy'; import { getLangText } from '../../utils/lang_utils'; -import { mergeOptions, wrapTextAtCharIndex } from '../../utils/general_utils'; +import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils'; let ContractSettings = React.createClass({ @@ -109,7 +109,7 @@ let ContractSettings = React.createClass({ Date: Fri, 25 Sep 2015 15:25:34 +0200 Subject: [PATCH 6/6] Minor renaming fix --- js/utils/general_utils.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index 3f610168..ba2b7752 100644 --- a/js/utils/general_utils.js +++ b/js/utils/general_utils.js @@ -215,10 +215,10 @@ export function excludePropFromObject(obj, propList){ * @return {string} The truncated text */ export function truncateTextAtCharIndex(text, charIndex, replacement = '...') { - let wrappedText = ''; + let truncatedText = ''; - wrappedText = text.slice(0, charIndex); - wrappedText += text.length > charIndex ? replacement : ''; + truncatedText = text.slice(0, charIndex); + truncatedText += text.length > charIndex ? replacement : ''; - return wrappedText; + return truncatedText; } \ No newline at end of file