From 7039acf37f4748d47a3b9cf50339a7e83ca47e57 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Fri, 15 Sep 2017 00:53:51 +0300 Subject: [PATCH 1/7] Control panel visibility & animation with css --- react/package.json | 1 + .../components/dashboard/settings/settings.js | 2 +- .../dashboard/settings/settings.render.js | 36 +++++++------------ .../dashboard/settings/settings.scss | 25 +++++++++++-- 4 files changed, 36 insertions(+), 28 deletions(-) diff --git a/react/package.json b/react/package.json index f50b05ea7..b4a7c4a26 100644 --- a/react/package.json +++ b/react/package.json @@ -41,6 +41,7 @@ "qrcode.react": "^0.7.1", "rc-tree": "^1.4.6", "react": "^15.3.1", + "react-bootstrap": "^0.31.3", "react-dom": "^15.3.1", "react-hot-loader": "^1.3.0", "react-qr-reader": "^1.1.3", diff --git a/react/src/components/dashboard/settings/settings.js b/react/src/components/dashboard/settings/settings.js index 32c276daf..f7d097975 100644 --- a/react/src/components/dashboard/settings/settings.js +++ b/react/src/components/dashboard/settings/settings.js @@ -72,7 +72,7 @@ class Settings extends React.Component { } openTab(elemId, tab) { - this.setState(Object.assign({}, this.state, { + this.setState(Object.assign({}, this.state, { activeTab: tab, tabElId: elemId, })); diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js index 5a999d1cc..4e8d79875 100644 --- a/react/src/components/dashboard/settings/settings.render.js +++ b/react/src/components/dashboard/settings/settings.render.js @@ -27,8 +27,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }> { this.renderWalletInfo() }
@@ -44,8 +43,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }> { this.renderAddNode() }
@@ -61,8 +59,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }> { this.renderWalletBackup() }
@@ -78,8 +75,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }> { this.renderFiatCurrency() }
@@ -95,8 +91,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }> { this.renderExportKeys() }
@@ -112,8 +107,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }> { this.renderImportKeys() }
@@ -129,8 +123,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }> { this.renderDebugLog() }
@@ -145,8 +138,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }> { this.renderAppSettings() }
@@ -161,8 +153,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }> { this.renderAppInfoTab() }
@@ -178,8 +169,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }> { this.renderCliPanel() }
@@ -195,8 +185,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }> { this.renderAppUpdateTab() }
@@ -211,8 +200,7 @@ export const SettingsRender = function() {
+ className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }> { this.renderSupportPanel() }
diff --git a/react/src/components/dashboard/settings/settings.scss b/react/src/components/dashboard/settings/settings.scss index bc1a47c62..e27331fe8 100644 --- a/react/src/components/dashboard/settings/settings.scss +++ b/react/src/components/dashboard/settings/settings.scss @@ -93,10 +93,17 @@ #SettingsAccordion { .panel { .panel-collapse { - transition: all .3s; - + &.collapse { - height: 0; + max-height: 0; + overflow: hidden; + + } + &.in { + animation-name: max-height; + animation-duration: 1s; + animation-iteration-count: 1; + max-height: none; } } } @@ -118,4 +125,16 @@ } } } +} + +@keyframes max-height { + from { + max-height: 0; + } + 99% { + max-height: 2000px; + } + 100% { + max-height: none; + } } \ No newline at end of file From 4d4980cca51723ea1df6103fcf23ecf3a88e1c73 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Fri, 15 Sep 2017 00:55:16 +0300 Subject: [PATCH 2/7] Remove test package --- react/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/react/package.json b/react/package.json index b4a7c4a26..f50b05ea7 100644 --- a/react/package.json +++ b/react/package.json @@ -41,7 +41,6 @@ "qrcode.react": "^0.7.1", "rc-tree": "^1.4.6", "react": "^15.3.1", - "react-bootstrap": "^0.31.3", "react-dom": "^15.3.1", "react-hot-loader": "^1.3.0", "react-qr-reader": "^1.1.3", From fc0af4fc882a6a41dc0fba6ccffc460b16472304 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Sun, 17 Sep 2017 03:40:04 +0300 Subject: [PATCH 3/7] Reduce code repetion in settings --- .../settings/settings.appInfoPanel.js | 132 ++++----- .../components/dashboard/settings/settings.js | 113 +------- .../dashboard/settings/settings.panel.js | 86 ++++++ .../dashboard/settings/settings.panelBody.js | 85 ++++++ .../dashboard/settings/settings.panelUtils.js | 48 ++++ .../dashboard/settings/settings.render.js | 260 ++++++------------ .../settings/settings.walletInfoPanel.js | 4 +- 7 files changed, 372 insertions(+), 356 deletions(-) create mode 100644 react/src/components/dashboard/settings/settings.panel.js create mode 100644 react/src/components/dashboard/settings/settings.panelBody.js create mode 100644 react/src/components/dashboard/settings/settings.panelUtils.js diff --git a/react/src/components/dashboard/settings/settings.appInfoPanel.js b/react/src/components/dashboard/settings/settings.appInfoPanel.js index 030caf4ca..5453490b3 100644 --- a/react/src/components/dashboard/settings/settings.appInfoPanel.js +++ b/react/src/components/dashboard/settings/settings.appInfoPanel.js @@ -8,76 +8,82 @@ class AppInfoPanel extends React.Component { } render() { - return ( -
-
-
-
{ translate('SETTINGS.APP_RELEASE') }
-
- { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } -
-
- { translate('SETTINGS.VERSION') }: { `${this.props.Settings.appInfo.releaseInfo.version.replace('version=', '')}-beta` } -
-
- { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } + const releaseInfo = this.props.Settings.appInfo && this.props.Settings.appInfo.releaseInfo; + + if (!releaseInfo) { + return null + } else { + return ( +
+
+
+
{ translate('SETTINGS.APP_RELEASE') }
+
+ { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } +
+
+ { translate('SETTINGS.VERSION') }: { `${this.props.Settings.appInfo.releaseInfo.version.replace('version=', '')}-beta` } +
+
+ { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } +
-
-
-
-
{ translate('SETTINGS.SYS_INFO') }
-
- { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } -
-
- { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } -
-
- { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } -
-
- { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } -
-
- { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } -
-
- { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } -
-
- { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } +
+
+
{ translate('SETTINGS.SYS_INFO') }
+
+ { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } +
+
+ { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } +
+
+ { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } +
+
+ { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } +
+
+ { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } +
+
+ { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } +
+
+ { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } +
-
-
-
-
{ translate('SETTINGS.LOCATIONS') }
-
- { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } -
-
- { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } -
-
- Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } -
-
- Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } -
-
- Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } -
-
- Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } -
-
- Komodo wallet.dat: { this.props.Settings.appInfo.dirs.komodoDir } +
+
+
{ translate('SETTINGS.LOCATIONS') }
+
+ { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } +
+
+ { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } +
+
+ Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } +
+
+ Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } +
+
+ Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } +
+
+ Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } +
+
+ Komodo wallet.dat: { this.props.Settings.appInfo.dirs.komodoDir } +
-
- ); + ); + } }; } diff --git a/react/src/components/dashboard/settings/settings.js b/react/src/components/dashboard/settings/settings.js index f7d097975..25a37e288 100644 --- a/react/src/components/dashboard/settings/settings.js +++ b/react/src/components/dashboard/settings/settings.js @@ -1,15 +1,10 @@ import React from 'react'; import { connect } from 'react-redux'; import { translate } from '../../../translate/translate'; -import Config from '../../../config'; import { iguanaActiveHandle, getAppConfig, - getPeersList, - addPeerNode, getAppInfo, - shepherdCli, - triggerToaster, } from '../../../actions/actionCreators'; import Store from '../../../store'; @@ -17,19 +12,6 @@ import { SettingsRender, } from './settings.render'; -import AppUpdatePanel from './settings.appUpdatePanel'; -import AppInfoPanel from './settings.appInfoPanel'; -import AddNodePanel from './settings.addNodePanel'; -import AppSettingsPanel from './settings.appSettingsPanel'; -import CliPanel from './settings.cliPanel'; -import DebugLogPanel from './settings.debugLogPanel'; -import FiatCurrencyPanel from './settings.fiatCurrencyPanel'; -import ExportKeysPanel from './settings.exportKeysPanel'; -import ImportKeysPanel from './settings.importKeysPanel'; -import SupportPanel from './settings.supportPanel'; -import WalletInfoPanel from './settings.walletInfoPanel'; -import WalletBackupPanel from './settings.walletBackupPanel'; - /* TODO: 1) pre-select active coin in add node tab @@ -38,105 +20,20 @@ import WalletBackupPanel from './settings.walletBackupPanel'; 4) batch export/import wallet addresses */ class Settings extends React.Component { - constructor() { - super(); - this.state = { - activeTab: 0, - tabElId: null, - seedInputVisibility: false, - nativeOnly: Config.iguanaLessMode, - disableWalletSpecificUI: false, - }; - this.updateInput = this.updateInput.bind(this); + constructor(props) { + super(props); } componentDidMount(props) { if (!this.props.disableWalletSpecificUI) { Store.dispatch(iguanaActiveHandle()); } - Store.dispatch(getAppConfig()); Store.dispatch(getAppInfo()); document.getElementById('section-iguana-wallet-settings').setAttribute('style', 'height:auto; min-height: 100%'); } - componentWillReceiveProps(props) { - if (this.state.tabElId) { - this.setState(Object.assign({}, this.state, { - activeTab: this.state.activeTab, - tabElId: this.state.tabElId, - disableWalletSpecificUI: this.props.disableWalletSpecificUI, - })); - } - } - - openTab(elemId, tab) { - this.setState(Object.assign({}, this.state, { - activeTab: tab, - tabElId: elemId, - })); - } - - updateInput(e) { - this.setState({ - [e.target.name]: e.target.value, - }); - } - - renderAppInfoTab() { - const releaseInfo = this.props.Settings.appInfo && this.props.Settings.appInfo.releaseInfo; - - if (releaseInfo) { - return - } - - return null; - } - - renderAppUpdateTab() { - return - } - - renderWalletInfo() { - return - } - renderAddNode() { - return - } - - renderWalletBackup() { - return - } - - renderFiatCurrency() { - return - } - - renderExportKeys() { - return - } - - renderImportKeys() { - return - } - - renderDebugLog() { - return - } - - renderAppSettings() { - return - } - - renderCliPanel() { - return - } - - renderSupportPanel() { - return - } - render() { return SettingsRender.call(this); } @@ -146,13 +43,7 @@ const mapStateToProps = (state) => { return { Main: { coins: state.Main.coins, - activeHandle: state.Main.activeHandle, - }, - ActiveCoin: { - coin: state.ActiveCoin.coin, }, - Settings: state.Settings, - Dashboard: state.Dashboard, }; }; diff --git a/react/src/components/dashboard/settings/settings.panel.js b/react/src/components/dashboard/settings/settings.panel.js new file mode 100644 index 000000000..44f83707e --- /dev/null +++ b/react/src/components/dashboard/settings/settings.panel.js @@ -0,0 +1,86 @@ +import React from 'react'; +import className from 'classnames'; +import * as Utils from './settings.panelUtils'; + +class Panel extends React.Component { + + constructor(props) { + super(props); + this.toggleSection = this.toggleSection.bind(this); + this.state = { + singleOpen: this.props.singleOpen, + openByDefault: this.props.openByDefault, + activeSections: [], + }; + } + + componentWillMount() { + const { + singleOpen, + openByDefault, + uniqId, + children } = this.props; + + const settings = { + singleOpen, + openByDefault, + uniqId, + kids: children + }; + + const initialStateSections = Utils.setupAccordion(settings).activeSections; + this.setState({ activeSections: initialStateSections }); + } + + getChildrenWithProps() { + const { + children, + } = this.props; + + + const kids = React.Children.map(children, (child, i) => { + if(child) { + const unqId = `panel-sec-${i}`; + return React.cloneElement(child, { + toggle: (acId) => this.toggleSection(acId), + key: unqId, + unq: unqId, + active: (this.state.activeSections && this.state.activeSections.lastIndexOf(unqId) !== -1) + }); + } + }); + + + return kids; + } + + toggleSection(sectionId) { + const newActive = Utils.toggleSection( + sectionId, + this.state.activeSections, + this.state.singleOpen); + + this.setState({ + activeSections: newActive + }); + } + + render() { + const { + className: propClasses, + uniqId: propId + } = this.props; + + const childrenWithProps = this.getChildrenWithProps(); + const accordionClasses = className('panel-group', propClasses); + const uniqId = propId || ''; + + return( +
+ {childrenWithProps} +
+ ); + } +} + +export default Panel; \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.panelBody.js b/react/src/components/dashboard/settings/settings.panelBody.js new file mode 100644 index 000000000..1997c7907 --- /dev/null +++ b/react/src/components/dashboard/settings/settings.panelBody.js @@ -0,0 +1,85 @@ +import React from 'react'; +import className from 'classnames'; + +class PanelSection extends React.Component { + constructor(props) { + super(props); + this.state = { + sectionHeight: 0, + } + this.toggleSection = this.toggleSection.bind(this); + } + + componentDidMount() { + const { active } = this.props; + if (active) this.setState({sectionHeight: this.accordionContent.scrollHeight}); + } + + componentWillReceiveProps(nextProps) { + if(this.props.active) { + this.setState({ + sectionHeight: 'auto', + }); + } + if (nextProps.active !== this.props.active) { + this.toggleOpen(nextProps.active); + } + } + + getHeight() { + const { active } = this.props; + return (active) ? this.accordionContent.scrollHeight : 0; + } + + toggleSection() { + const { + unq, + toggle + } = this.props; + toggle(unq); + } + + toggleOpen(active) { + const height = (active) ? `${this.accordionContent.scrollHeight}px` : 0; + this.setState({ + sectionHeight: height, + }); + } + + render() { + const { + title, + icon, + children, + active, + className: propClasses + } = this.props; + + const contentStyles = { + height: this.state.sectionHeight, + overflow: 'hidden', + transition: 'height .25s ease', + }; + + const contentClasses = className('panel-collapse', { + active + }); + + return( +
this.toggleSection()}> + +
this.accordionContent = ref}> +
+ {children} +
+
+
+ ); + } +} + +export default PanelSection; diff --git a/react/src/components/dashboard/settings/settings.panelUtils.js b/react/src/components/dashboard/settings/settings.panelUtils.js new file mode 100644 index 000000000..e07614fda --- /dev/null +++ b/react/src/components/dashboard/settings/settings.panelUtils.js @@ -0,0 +1,48 @@ +export function checkUndef(item) { + return (typeof item !== 'undefined'); +} + +export function toggleSection(sectionId, activeSections, singleOpen) { + let present = null; + let newActiveSections = activeSections; + + newActiveSections.map((section) => { + if (section === sectionId) present = true; + return true; + }); + + if (!singleOpen) { + if (present) { + const pos = newActiveSections.indexOf(sectionId); + newActiveSections.splice(pos, 1); + } else { + newActiveSections.push(sectionId); + } + } else { + newActiveSections = [sectionId]; + } + + return newActiveSections; +} + +export function setupAccordion(info) { + const singleOpen = (checkUndef(info.singleOpen)) ? info.singleOpen : false; + const activeSections = []; + const singleChild = typeof info.kids.length === 'undefined'; + + if (!singleChild) { + info.kids.forEach((child, i) => { + const { openByDefault } = child ? child.props : false; + if (singleOpen && activeSections.length === 0 && openByDefault) { + activeSections.push(`panel-sec-${i}`); + } + if (!singleOpen && openByDefault) { + activeSections.push(`panel-sec-${i}`); + } + }); + } + + return { + activeSections, + }; +} \ No newline at end of file diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js index 4e8d79875..616329933 100644 --- a/react/src/components/dashboard/settings/settings.render.js +++ b/react/src/components/dashboard/settings/settings.render.js @@ -1,5 +1,20 @@ import React from 'react'; import { translate } from '../../../translate/translate'; +import PanelSection from './settings.panelBody'; +import Panel from './settings.panel'; + +import AppUpdatePanel from './settings.appUpdatePanel'; +import AppInfoPanel from './settings.appInfoPanel'; +import AddNodePanel from './settings.addNodePanel'; +import AppSettingsPanel from './settings.appSettingsPanel'; +import CliPanel from './settings.cliPanel'; +import DebugLogPanel from './settings.debugLogPanel'; +import FiatCurrencyPanel from './settings.fiatCurrencyPanel'; +import ExportKeysPanel from './settings.exportKeysPanel'; +import ImportKeysPanel from './settings.importKeysPanel'; +import SupportPanel from './settings.supportPanel'; +import WalletInfoPanel from './settings.walletInfoPanel'; +import WalletBackupPanel from './settings.walletBackupPanel'; export const SettingsRender = function() { return ( @@ -12,199 +27,86 @@ export const SettingsRender = function() {

{ translate('INDEX.WALLET_SETTINGS') }

-
- + { !this.props.disableWalletSpecificUI && -
this.openTab('WalletInfo', 0) } - className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> - -
- { this.renderWalletInfo() } -
-
+ + + } { !this.props.disableWalletSpecificUI && -
this.openTab('AddNodeforCoin', 1) } - className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> - -
- { this.renderAddNode() } -
-
+ + + } { !this.props.disableWalletSpecificUI && -
this.openTab('DumpWallet', 2) } - className={ 'hide panel' + (this.state.nativeOnly ? ' hide' : '') }> - -
- { this.renderWalletBackup() } -
-
+ + + } { !this.props.disableWalletSpecificUI && -
this.openTab('FiatCurrencySettings', 3) } - className={ 'hide panel' + (this.state.nativeOnly ? ' hide' : '') }> - -
- { this.renderFiatCurrency() } -
-
+ + + } { !this.props.disableWalletSpecificUI && -
this.openTab('ExportKeys', 4) } - className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> - -
- { this.renderExportKeys() } -
-
+ + + } { !this.props.disableWalletSpecificUI && -
this.openTab('ImportKeys', 5) } - className={ 'panel' + (this.state.nativeOnly ? ' hide' : '') }> - -
- { this.renderImportKeys() } -
-
+ + + } - -
this.openTab('DebugLog', 6) }> - -
- { this.renderDebugLog() } -
-
- -
this.openTab('AppSettings', 7) }> - -
- { this.renderAppSettings() } -
-
- -
this.openTab('AppInfo', 8) }> - -
- { this.renderAppInfoTab() } -
-
- + + + + + + + + + { this.props.Main && this.props.Main.coins.native && -
this.openTab('Cli', 9) } - className={ 'panel' + (!this.props.Main.coins.native.length ? ' hide' : '') }> - -
- { this.renderCliPanel() } -
-
+ + + } - -
this.openTab('AppUpdate', 10) }> - -
- { this.renderAppUpdateTab() } -
-
- -
this.openTab('Support', 11) }> - -
- { this.renderSupportPanel() } -
-
-
+ + + + + + +
diff --git a/react/src/components/dashboard/settings/settings.walletInfoPanel.js b/react/src/components/dashboard/settings/settings.walletInfoPanel.js index 29fda9d9e..ad255f921 100644 --- a/react/src/components/dashboard/settings/settings.walletInfoPanel.js +++ b/react/src/components/dashboard/settings/settings.walletInfoPanel.js @@ -9,8 +9,7 @@ class WalletInfoPanel extends React.Component { render() { return ( -
- +
@@ -44,7 +43,6 @@ class WalletInfoPanel extends React.Component {
{ translate('INDEX.KEY') }
-
); }; } From 6e7ef294d8cf9eb8cbb03dc7afedab07634c60c9 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Sun, 17 Sep 2017 03:43:24 +0300 Subject: [PATCH 4/7] Fix panel heading --- react/src/components/dashboard/settings/settings.render.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js index 616329933..3c6feca46 100644 --- a/react/src/components/dashboard/settings/settings.render.js +++ b/react/src/components/dashboard/settings/settings.render.js @@ -54,7 +54,7 @@ export const SettingsRender = function() { } { !this.props.disableWalletSpecificUI && From c21c0966cde026cc4dcd1e7cf4d480e27f7921ea Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Sun, 17 Sep 2017 11:37:46 +0300 Subject: [PATCH 5/7] Icon toggle to active panel --- .../components/dashboard/settings/settings.panelBody.js | 6 +++++- react/src/components/dashboard/settings/settings.scss | 7 ++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/react/src/components/dashboard/settings/settings.panelBody.js b/react/src/components/dashboard/settings/settings.panelBody.js index 1997c7907..84a52fee7 100644 --- a/react/src/components/dashboard/settings/settings.panelBody.js +++ b/react/src/components/dashboard/settings/settings.panelBody.js @@ -61,12 +61,16 @@ class PanelSection extends React.Component { transition: 'height .25s ease', }; + const triggerClasses = className('panel', { + active + }); + const contentClasses = className('panel-collapse', { active }); return( -
this.toggleSection()}> +
this.toggleSection()}>
{title} diff --git a/react/src/components/dashboard/settings/settings.scss b/react/src/components/dashboard/settings/settings.scss index e27331fe8..e3a10c02b 100644 --- a/react/src/components/dashboard/settings/settings.scss +++ b/react/src/components/dashboard/settings/settings.scss @@ -117,7 +117,7 @@ cursor: hand; &:before { - content: '\F273'; + content: '\F278'; } &.collapsed { &:before { @@ -125,6 +125,11 @@ } } } + .panel.active { + .panel-title:before { + content: '\F273'; + } + } } @keyframes max-height { From 9f7a0aecf244cfce755e2f1096b2eb07c4ddafc4 Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Mon, 18 Sep 2017 01:09:47 +0300 Subject: [PATCH 6/7] Cleaning up jsx --- .../settings/settings.addNodePanel.js | 124 ++++++++--------- .../settings/settings.appInfoPanel.js | 106 ++++++-------- .../settings/settings.appSettingsPanel.js | 42 +++--- .../settings/settings.appUpdatePanel.js | 2 +- .../dashboard/settings/settings.cliPanel.js | 5 +- .../settings/settings.debugLogPanel.js | 130 +++++++++--------- .../settings/settings.exportKeysPanel.js | 92 +++++++------ .../settings/settings.fiatCurrencyPanel.js | 6 +- .../settings/settings.importKeysPanel.js | 69 +++++----- .../settings/settings.supportPanel.js | 2 +- .../settings/settings.walletBackupPanel.js | 6 +- 11 files changed, 293 insertions(+), 291 deletions(-) diff --git a/react/src/components/dashboard/settings/settings.addNodePanel.js b/react/src/components/dashboard/settings/settings.addNodePanel.js index 67ac130fc..b75f3f2d5 100644 --- a/react/src/components/dashboard/settings/settings.addNodePanel.js +++ b/react/src/components/dashboard/settings/settings.addNodePanel.js @@ -96,75 +96,73 @@ class AddNodePanel extends React.Component { render() { return ( -
-
-
-
-

{ translate('INDEX.USE_THIS_SECTION') }

-
-
-
- -
-
-
- -
-
-
- SuperNET Peers: -
-
{ this.renderSNPeersList() }
-
- Raw Peers: -
-
{ this.renderPeersList() }
+
+
+
+

{ translate('INDEX.USE_THIS_SECTION') }

+
+
+
+
+
+ +
+
+
+ SuperNET Peers: +
+
{ this.renderSNPeersList() }
+
+ Raw Peers: +
+
{ this.renderPeersList() }
+
+
-
-
-

{ translate('INDEX.USE_THIS_SECTION_PEER') }

-
-
-
- -
-
- -
+
+
+

{ translate('INDEX.USE_THIS_SECTION_PEER') }

+
+
+
+
-
- +
+
+
+ +
); diff --git a/react/src/components/dashboard/settings/settings.appInfoPanel.js b/react/src/components/dashboard/settings/settings.appInfoPanel.js index 5453490b3..ebb0a0975 100644 --- a/react/src/components/dashboard/settings/settings.appInfoPanel.js +++ b/react/src/components/dashboard/settings/settings.appInfoPanel.js @@ -14,72 +14,48 @@ class AppInfoPanel extends React.Component { return null } else { return ( -
+
-
-
{ translate('SETTINGS.APP_RELEASE') }
-
- { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } -
-
- { translate('SETTINGS.VERSION') }: { `${this.props.Settings.appInfo.releaseInfo.version.replace('version=', '')}-beta` } -
-
- { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } -
-
-
-
-
-
{ translate('SETTINGS.SYS_INFO') }
-
- { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } -
-
- { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } -
-
- { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } -
-
- { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } -
-
- { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } -
-
- { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } -
-
- { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } -
-
-
-
-
-
{ translate('SETTINGS.LOCATIONS') }
-
- { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } -
-
- { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } -
-
- Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } -
-
- Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } -
-
- Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } -
-
- Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } -
-
- Komodo wallet.dat: { this.props.Settings.appInfo.dirs.komodoDir } -
-
+
{ translate('SETTINGS.APP_RELEASE') }
+

+ { translate('SETTINGS.NAME') }: { this.props.Settings.appInfo.releaseInfo.name } +
+ { translate('SETTINGS.VERSION') }: { `${this.props.Settings.appInfo.releaseInfo.version.replace('version=', '')}-beta` } +
+ { translate('SETTINGS.APP_SESSION') }: { this.props.Settings.appInfo.appSession } +

+
{ translate('SETTINGS.SYS_INFO') }
+

+ { translate('SETTINGS.ARCH') }: { this.props.Settings.appInfo.sysInfo.arch } +
+ { translate('SETTINGS.OS_TYPE') }: { this.props.Settings.appInfo.sysInfo.os_type } +
+ { translate('SETTINGS.OS_PLATFORM') }: { this.props.Settings.appInfo.sysInfo.platform } +
+ { translate('SETTINGS.OS_RELEASE') }: { this.props.Settings.appInfo.sysInfo.os_release } +
+ { translate('SETTINGS.CPU') }: { this.props.Settings.appInfo.sysInfo.cpu } +
+ { translate('SETTINGS.CPU_CORES') }: { this.props.Settings.appInfo.sysInfo.cpu_cores } +
+ { translate('SETTINGS.MEM') }: { this.props.Settings.appInfo.sysInfo.totalmem_readable } +

+
{ translate('SETTINGS.LOCATIONS') }
+

+ { translate('SETTINGS.CACHE') }: { this.props.Settings.appInfo.dirs.cacheLocation } +
+ { translate('SETTINGS.CONFIG') }: { this.props.Settings.appInfo.dirs.configLocation } +
+ Iguana { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.iguanaBin } +
+ Iguana { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.iguanaDir } +
+ Komodo { translate('SETTINGS.BIN') }: { this.props.Settings.appInfo.dirs.komododBin } +
+ Komodo { translate('SETTINGS.DIR') }: { this.props.Settings.appInfo.dirs.komodoDir } +
+ Komodo wallet.dat: { this.props.Settings.appInfo.dirs.komodoDir } +

); diff --git a/react/src/components/dashboard/settings/settings.appSettingsPanel.js b/react/src/components/dashboard/settings/settings.appSettingsPanel.js index 77b982f79..ac80dc2b4 100644 --- a/react/src/components/dashboard/settings/settings.appSettingsPanel.js +++ b/react/src/components/dashboard/settings/settings.appSettingsPanel.js @@ -283,26 +283,30 @@ class AppSettingsPanel extends React.Component { render() { return ( -
-

- { translate('SETTINGS.CONFIG_RESTART_REQUIRED') } -

-
- - - { this.renderConfigEditForm() } - -
+
+
+
+

+ { translate('SETTINGS.CONFIG_RESTART_REQUIRED') } +

+ + + { this.renderConfigEditForm() } + +
+
-
- - +
+
+ + +
); diff --git a/react/src/components/dashboard/settings/settings.appUpdatePanel.js b/react/src/components/dashboard/settings/settings.appUpdatePanel.js index b7230b069..16bc272d4 100644 --- a/react/src/components/dashboard/settings/settings.appUpdatePanel.js +++ b/react/src/components/dashboard/settings/settings.appUpdatePanel.js @@ -107,7 +107,7 @@ class AppUpdatePanel extends React.Component { render() { return ( -
+
{ translate('INDEX.UI_UPDATE') }
diff --git a/react/src/components/dashboard/settings/settings.cliPanel.js b/react/src/components/dashboard/settings/settings.cliPanel.js index 312dcb20a..729807665 100644 --- a/react/src/components/dashboard/settings/settings.cliPanel.js +++ b/react/src/components/dashboard/settings/settings.cliPanel.js @@ -143,9 +143,9 @@ class CliPanel extends React.Component { render() { return ( -
+
+

{ translate('INDEX.CLI_SELECT_A_COIN') }

-
+
); }; diff --git a/react/src/components/dashboard/settings/settings.debugLogPanel.js b/react/src/components/dashboard/settings/settings.debugLogPanel.js index e0b89c50f..f651bf299 100644 --- a/react/src/components/dashboard/settings/settings.debugLogPanel.js +++ b/react/src/components/dashboard/settings/settings.debugLogPanel.js @@ -102,70 +102,74 @@ class DebugLogPanel extends React.Component { render() { return ( -
-

{ translate('INDEX.DEBUG_LOG_DESC') }

-
- - - Show app runtime log - +
+
+

{ translate('INDEX.DEBUG_LOG_DESC') }

+
+ + + Show app runtime log + +
+ { !this.state.toggleAppRuntimeLog && +
+
+ + +
+
+ + +
+
+ +
+
+
+
{ this.renderDebugLogData() }
+
+
+
+ } + { this.state.toggleAppRuntimeLog && +
{ this.renderAppRuntimeLog() }
+ }
- { !this.state.toggleAppRuntimeLog && -
-
- - -
-
- - -
-
- -
-
-
{ this.renderDebugLogData() }
-
-
- } - { this.state.toggleAppRuntimeLog && -
{ this.renderAppRuntimeLog() }
- }
); }; diff --git a/react/src/components/dashboard/settings/settings.exportKeysPanel.js b/react/src/components/dashboard/settings/settings.exportKeysPanel.js index 7c59ea5b7..2991e476d 100644 --- a/react/src/components/dashboard/settings/settings.exportKeysPanel.js +++ b/react/src/components/dashboard/settings/settings.exportKeysPanel.js @@ -157,53 +157,57 @@ class ExportKeysPanel extends React.Component { render() { return ( -
-
-
{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }
-
- { this.renderLB('SETTINGS.EXPORT_KEYS_NOTE') } +
+
+
+
{ this.renderLB('INDEX.ONLY_ACTIVE_WIF_KEYS') }
+
+ { this.renderLB('SETTINGS.EXPORT_KEYS_NOTE') } +
+ + { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } +
- - { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } -
-
-
-
- - - - -
-
- +
+
+ +
+ + + + +
+
+ +
+
- - -
-
+
+
+
{ this.renderWifKeys() }
diff --git a/react/src/components/dashboard/settings/settings.fiatCurrencyPanel.js b/react/src/components/dashboard/settings/settings.fiatCurrencyPanel.js index ad6143669..a08fbf443 100644 --- a/react/src/components/dashboard/settings/settings.fiatCurrencyPanel.js +++ b/react/src/components/dashboard/settings/settings.fiatCurrencyPanel.js @@ -9,7 +9,11 @@ class FiatCurrencyPanel extends React.Component { render() { return ( -
Fiat currency settings section to be updated soon.
+
+
+

Fiat currency settings section to be updated soon.

+
+
); }; } diff --git a/react/src/components/dashboard/settings/settings.importKeysPanel.js b/react/src/components/dashboard/settings/settings.importKeysPanel.js index e395871c2..b4622bd53 100644 --- a/react/src/components/dashboard/settings/settings.importKeysPanel.js +++ b/react/src/components/dashboard/settings/settings.importKeysPanel.js @@ -26,39 +26,46 @@ class ImportKeysPanel extends React.Component { render() { return ( -
-
{ translate('INDEX.IMPORT_KEYS_DESC_P1') }

-
{ translate('INDEX.IMPORT_KEYS_DESC_P2') }

-
{ translate('INDEX.IMPORT_KEYS_DESC_P3') }

-
- - { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } - -
-
-
-
- - +
+
+
+

{ translate('INDEX.IMPORT_KEYS_DESC_P1') }

+

{ translate('INDEX.IMPORT_KEYS_DESC_P2') }

+

{ translate('INDEX.IMPORT_KEYS_DESC_P3') }

+

+ + { translate('INDEX.PLEASE_KEEP_KEYS_SAFE') } + +

-
- +
+
+
+ +
+ + +
+
+ +
+
- +
); } diff --git a/react/src/components/dashboard/settings/settings.supportPanel.js b/react/src/components/dashboard/settings/settings.supportPanel.js index a13f89bbd..be016c58c 100644 --- a/react/src/components/dashboard/settings/settings.supportPanel.js +++ b/react/src/components/dashboard/settings/settings.supportPanel.js @@ -27,7 +27,7 @@ class SupportPanel extends React.Component { render() { return ( -
+
Wallet Backup section to be updated soon.
+
+
+

Wallet Backup section to be updated soon.

+
+
); }; } From 28334f4ba8d67e857564b5902fd0c38ef0cd4cbf Mon Sep 17 00:00:00 2001 From: Miika Turunen Date: Mon, 18 Sep 2017 01:31:18 +0300 Subject: [PATCH 7/7] AGP-228, clean up jsx --- .../dashboard/settings/settings.render.js | 176 +++++++++--------- 1 file changed, 85 insertions(+), 91 deletions(-) diff --git a/react/src/components/dashboard/settings/settings.render.js b/react/src/components/dashboard/settings/settings.render.js index 3c6feca46..95fcf701b 100644 --- a/react/src/components/dashboard/settings/settings.render.js +++ b/react/src/components/dashboard/settings/settings.render.js @@ -18,100 +18,94 @@ import WalletBackupPanel from './settings.walletBackupPanel'; export const SettingsRender = function() { return ( -
-
+
-
-
-
-

{ translate('INDEX.WALLET_SETTINGS') }

- - { !this.props.disableWalletSpecificUI && - - - - } - { !this.props.disableWalletSpecificUI && - - - - } - { !this.props.disableWalletSpecificUI && - - - - } - { !this.props.disableWalletSpecificUI && - - - - } - { !this.props.disableWalletSpecificUI && - - - - } - { !this.props.disableWalletSpecificUI && - - - - } - - - - - - - - - - { this.props.Main && this.props.Main.coins.native && - - - - } - - - - - - - -
-
+
+

{ translate('INDEX.WALLET_SETTINGS') }

+ + { !this.props.disableWalletSpecificUI && + + + + } + { !this.props.disableWalletSpecificUI && + + + + } + { !this.props.disableWalletSpecificUI && + + + + } + { !this.props.disableWalletSpecificUI && + + + + } + { !this.props.disableWalletSpecificUI && + + + + } + { !this.props.disableWalletSpecificUI && + + + + } + + + + + + + + + + { this.props.Main && this.props.Main.coins.native && + + + + } + + + + + + +
-
); }; \ No newline at end of file