lukechilds
/
EasyDEX-GUI
mirror of https://github.com/lukechilds/EasyDEX-GUI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Split settings tabs to components

all-modes
Miika Turunen 7 years ago
parent
98f45af922
commit
9374fd2994
2 changed files with 20 additions and 64 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 60
      react/src/components/dashboard/settings/settings.js
  2. 24
      react/src/components/dashboard/settings/settings.render.js

60
react/src/components/dashboard/settings/settings.js
View File

@ -42,40 +42,12 @@ class Settings extends React.Component {
super();
this.state = {
activeTab: 0,
activeTabHeight: '0',
tabElId: null,
seedInputVisibility: false,
nativeOnly: Config.iguanaLessMode,
disableWalletSpecificUI: false,
};
this.updateInput = this.updateInput.bind(this);
this.updateTabDimensions = this.updateTabDimensions.bind(this);
}
updateTabDimensions() {
setTimeout(() => {
if(document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`)){
const _height = document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`).offsetHeight;
} else {
_height = '100%';
}
this.setState(Object.assign({}, this.state, {
activeTabHeight: _height,
}));
}, 100);
}
componentWillMount() {
window.addEventListener('resize', this.updateTabDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateTabDimensions);
if (!this.state.disableWalletSpecificUI) {
document.documentElement.style.height = '100%';
document.body.style.height = '100%';
}
}
componentDidMount(props) {
@ -85,15 +57,14 @@ class Settings extends React.Component {
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) {
const _height = document.querySelector(`#${this.state.tabElId} .panel-collapse .panel-body`).offsetHeight;
this.setState(Object.assign({}, this.state, {
activeTab: this.state.activeTab,
activeTabHeight: _height,
tabElId: this.state.tabElId,
disableWalletSpecificUI: this.props.disableWalletSpecificUI,
}));
@ -101,26 +72,17 @@ class Settings extends React.Component {
}
openTab(elemId, tab) {
setTimeout(() => {
const _height = document.querySelector(`#${elemId} .panel-collapse .panel-body`).offsetHeight;
this.setState(Object.assign({}, this.state, {
this.setState(Object.assign({}, this.state, {
activeTab: tab,
activeTabHeight: _height,
tabElId: elemId,
}));
// body size hack
if (!this.state.disableWalletSpecificUI) {
document.documentElement.style.height = '100%';
document.body.style.height = '100%';
}
setTimeout(() => {
document.documentElement.style.height = _height <= 200 ? '100%' : 'inherit';
document.body.style.height = _height <= 200 ? '100%' : 'inherit';
}, 100);
}
}, 100);
updateInput(e) {
this.setState({
[e.target.name]: e.target.value,
});
}
renderAppInfoTab() {
@ -176,12 +138,6 @@ class Settings extends React.Component {
return <SupportPanel />
}
updateInput(e) {
this.setState({
[e.target.name]: e.target.value,
});
}
render() {
return SettingsRender.call(this);
}

24
react/src/components/dashboard/settings/settings.render.js
View File

@ -28,7 +28,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }
style={{ height: this.state.activeTab === 0 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 0 ? `auto` : '0' }}>
{ this.renderWalletInfo() }
</div>
</div>
@ -45,7 +45,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }
style={{ height: this.state.activeTab === 1 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 1 ? `auto` : '0' }}>
{ this.renderAddNode() }
</div>
</div>
@ -62,7 +62,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }
style={{ height: this.state.activeTab === 2 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 2 ? `auto` : '0' }}>
{ this.renderWalletBackup() }
</div>
</div>
@ -79,7 +79,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }
style={{ height: this.state.activeTab === 3 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 3 ? `auto` : '0' }}>
{ this.renderFiatCurrency() } </div>
</div>
}
@ -95,7 +95,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }
style={{ height: this.state.activeTab === 4 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 4 ? `auto` : '0' }}>
{ this.renderExportKeys() }
</div>
</div>
@ -112,7 +112,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }
style={{ height: this.state.activeTab === 5 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 5 ? `auto` : '0' }}>
{ this.renderImportKeys() }
</div>
</div>
@ -129,7 +129,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }
style={{ height: this.state.activeTab === 6 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 6 ? `auto` : '0' }}>
{ this.renderDebugLog() }
</div>
</div>
@ -145,7 +145,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }
style={{ height: this.state.activeTab === 7 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 7 ? `auto` : '0' }}>
{ this.renderAppSettings() }
</div>
</div>
@ -161,7 +161,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }
style={{ height: this.state.activeTab === 8 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 8 ? `auto` : '0' }}>
{ this.renderAppInfoTab() }
</div>
</div>
@ -178,7 +178,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }
style={{ height: this.state.activeTab === 9 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 9 ? `auto` : '0' }}>
{ this.renderCliPanel() }
</div>
</div>
@ -195,7 +195,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }
style={{ height: this.state.activeTab === 10 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 10 ? `auto` : '0' }}>
{ this.renderAppUpdateTab() }
</div>
</div>
@ -211,7 +211,7 @@ export const SettingsRender = function() {
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }
style={{ height: this.state.activeTab === 11 ? `${this.state.activeTabHeight}px` : '0' }}>
style={{ height: this.state.activeTab === 11 ? `auto` : '0' }}>
{ this.renderSupportPanel() }
</div>
</div>

Write Preview
Loading…
Cancel
Save