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

Control panel visibility & animation with css

all-modes^2
Miika Turunen 8 years ago
parent
7aa041b452
commit
7039acf37f
4 changed files with 36 additions and 28 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. 1
      react/package.json
  2. 2
      react/src/components/dashboard/settings/settings.js
  3. 36
      react/src/components/dashboard/settings/settings.render.js
  4. 25
      react/src/components/dashboard/settings/settings.scss

1
react/package.json
View File

@ -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",

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

@ -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,
}));

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

@ -27,8 +27,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }
style={{ height: this.state.activeTab === 0 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 0 ? ' in' : '') }>
{ this.renderWalletInfo() }
</div>
</div>
@ -44,8 +43,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }
style={{ height: this.state.activeTab === 1 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 1 ? ' in' : '') }>
{ this.renderAddNode() }
</div>
</div>
@ -61,8 +59,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }
style={{ height: this.state.activeTab === 2 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 2 ? ' in' : '') }>
{ this.renderWalletBackup() }
</div>
</div>
@ -78,8 +75,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }
style={{ height: this.state.activeTab === 3 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 3 ? ' in' : '') }>
{ this.renderFiatCurrency() }
</div>
</div>
@ -95,8 +91,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }
style={{ height: this.state.activeTab === 4 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 4 ? ' in' : '') }>
{ this.renderExportKeys() }
</div>
</div>
@ -112,8 +107,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }
style={{ height: this.state.activeTab === 5 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 5 ? ' in' : '') }>
{ this.renderImportKeys() }
</div>
</div>
@ -129,8 +123,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }
style={{ height: this.state.activeTab === 6 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 6 ? ' in' : '') }>
{ this.renderDebugLog() }
</div>
</div>
@ -145,8 +138,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }
style={{ height: this.state.activeTab === 7 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 7 ? ' in' : '') }>
{ this.renderAppSettings() }
</div>
</div>
@ -161,8 +153,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }
style={{ height: this.state.activeTab === 8 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 8 ? ' in' : '') }>
{ this.renderAppInfoTab() }
</div>
</div>
@ -178,8 +169,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }
style={{ height: this.state.activeTab === 9 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 9 ? ' in' : '') }>
{ this.renderCliPanel() }
</div>
</div>
@ -195,8 +185,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }
style={{ height: this.state.activeTab === 10 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 10 ? ' in' : '') }>
{ this.renderAppUpdateTab() }
</div>
</div>
@ -211,8 +200,7 @@ export const SettingsRender = function() {
</a>
</div>
<div
className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }
style={{ height: this.state.activeTab === 11 ? `auto` : '0' }}>
className={ 'panel-collapse collapse' + (this.state.activeTab === 11 ? ' in' : '') }>
{ this.renderSupportPanel() }
</div>
</div>

25
react/src/components/dashboard/settings/settings.scss
View File

@ -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;
}
}
Write Preview
Loading…
Cancel
Save