parent
8c4de2025b
commit
17bee53878
@ -0,0 +1,24 @@ |
||||
import { AbstractPanel } from './panel' |
||||
const yo = require('yo-yo') |
||||
const csjs = require('csjs-inject') |
||||
|
||||
const css = csjs` |
||||
.pluginsContainer { |
||||
height: 100%; |
||||
display: flex; |
||||
overflow-y: hidden; |
||||
} |
||||
` |
||||
|
||||
export class MainPanel extends AbstractPanel { |
||||
constructor (appStore, options) { |
||||
super('mainPanel', appStore, options) |
||||
} |
||||
|
||||
render () { |
||||
return yo` |
||||
<div class=${css.pluginsContainer}> |
||||
${this.view} |
||||
</div>` |
||||
} |
||||
} |
@ -0,0 +1,84 @@ |
||||
import { AbstractPanel } from './panel' |
||||
const csjs = require('csjs-inject') |
||||
const yo = require('yo-yo') |
||||
|
||||
const css = csjs` |
||||
.panel { |
||||
height: 100%; |
||||
overflow-y: hidden;
|
||||
} |
||||
.swapitTitle { |
||||
text-transform: uppercase; |
||||
} |
||||
.swapitHeader { |
||||
height: 35px; |
||||
padding: 0 20px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.swapitHeader h6 { |
||||
margin: 0; |
||||
} |
||||
.icons i { |
||||
height: 80%; |
||||
cursor: pointer; |
||||
} |
||||
.pluginsContainer { |
||||
height: calc(100% - 35px); |
||||
overflow: auto; |
||||
} |
||||
` |
||||
|
||||
const options = { |
||||
default: true, |
||||
displayHeader: true |
||||
} |
||||
|
||||
export class SwapPanel extends AbstractPanel { |
||||
|
||||
constructor (appStore) { |
||||
super('swapPanel', appStore, options) |
||||
this.header = this.renderHeader() |
||||
this.store = appStore |
||||
} |
||||
|
||||
/** |
||||
* Display content and update the header |
||||
* @param {String} name The name of the plugin to display |
||||
*/ |
||||
showContent (name) { |
||||
super.showContent(name) |
||||
yo.update(this.header, this.renderHeader()) |
||||
} |
||||
|
||||
/** The header of the swap panel */ |
||||
renderHeader () { |
||||
let name = ' - ' |
||||
let hasSettings = false |
||||
if (this.active) { |
||||
const { profile } = this.store.getOne(this.active) |
||||
name = profile.displayName ? profile.displayName : profile.name |
||||
hasSettings = profile.settings || false |
||||
} |
||||
return yo` |
||||
<header class="${css.swapitHeader}"> |
||||
<h6 class="${css.swapitTitle}">${name}</h6> |
||||
<div class="${css.icons}"> |
||||
${hasSettings |
||||
? yo`<i class="fas fa-cog"></i>` |
||||
: yo`<i></i>`} |
||||
</div> |
||||
</header>` |
||||
} |
||||
|
||||
render () { |
||||
return yo` |
||||
<section class="${css.panel}"> |
||||
${this.header} |
||||
<div class="${css.pluginsContainer}"> |
||||
${this.view} |
||||
</div> |
||||
</section>` |
||||
} |
||||
} |
Loading…
Reference in new issue