Skip to content

B
baas-ide
Unverified Commit 38debddc authored by yann300's avatar yann300 Committed by GitHub
Browse files
Options

Merge pull request #1236 from ethereum/refactor_support

refactor support tab
parents f43f4815 518f521f
Hide whitespace changes
Inline Side-by-side
Showing with 91 additions and 105 deletions
src/app/tabs/styles/support-tab-styles.js deleted 100644 → 0
View file @ f43f4815
var csjs = require('csjs-inject')
var styleGuide = require('../../ui/styles-guide/theme-chooser')
var styles = styleGuide.chooser()
var css = csjs`
.supportTabView {
height: 100vh;
padding: 2%;
padding-bottom: 3em;
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat {
${styles.rightPanel.supportTab.box_IframeContainer}
display: flex;
flex-direction: column;
align-items: center;
height: 85%;
padding: 0;
}
.chatTitle {
height: 40px;
width: 90%;
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
}
.chatTitle:hover {
cursor: pointer;
}
.icon {
height: 70%;
margin-right: 2%;
}
.chatTitleText {
font-size: 17px;
font-weight: bold;
}
.chatTitleText {
opacity: 0.8;
}
.chatIframe {
width: 100%;
height: 100%;
transform: scale(0.9);
padding: 0;
border: none;
}
.infoBox {
${styles.rightPanel.supportTab.box_SupportInfo}
}
`
module.exports = css
src/app/tabs/support-tab.js
View file @ 38debddc
var yo = require('yo-yo') const yo = require('yo-yo')
const csjs = require('csjs-inject')
const remixLib = require('remix-lib')
var css = require('./styles/support-tab-styles') const styles = require('../ui/styles-guide/theme-chooser').chooser()
var infoText = yo` const EventManager = remixLib.EventManager
<div>
Have a question, found a bug or want to propose a feature? Have a look at the
<a target="_blank" href='https://github.com/ethereum/remix-ide/issues'> issues</a> or check out
<a target="_blank" href='https://remix.readthedocs.io/en/latest/'> the documentation page on Remix</a> or
<a target="_blank" href='https://solidity.readthedocs.io/en/latest/'> Solidity</a>.
</div>
`
let gitterIframe = yo`
<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>
`
function supportTabView (gitterIframe) { module.exports = class SupportTab {
return yo` constructor (api = {}, events = {}, opts = {}) {
<div class="${css.supportTabView} "id="supportView"> const self = this
<div> self.event = new EventManager()
self._api = api
self._events = events
self._opts = opts
self._view = { el: null, gitterIframe: '' }
self.data = { gitterIsLoaded: false }
self._components = {}
self._events.app.register('tabChanged', (tabName) => {
if (tabName !== 'Support' || self.data.gitterIsLoaded) return
if (!self._view.gitterIframe) self._view.gitterIframe = yo`<iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>`
yo.update(self._view.el, self.render())
self._view.el.style.display = 'block'
self.data.gitterIsLoaded = true
})
}
render () {
const self = this
var el = yo`
<div class="${css.supportTabView}" id="supportView">
<div class="${css.infoBox}"> <div class="${css.infoBox}">
${infoText} Have a question, found a bug or want to propose a feature? Have a look at the
<a target="_blank" href='https://github.com/ethereum/browser-solidity/issues'> issues</a> or check out
<a target="_blank" href='https://remix.readthedocs.io/en/latest/'> the documentation page on Remix</a> or
<a target="_blank" href='https://solidity.readthedocs.io/en/latest/'> Solidity</a>.
</div> </div>
</div> <div class="${css.chat}">
<div class="${css.chat}"> <div class="${css.chatTitle}" onclick=${openLink} title='Click to open chat in Gitter'>
<div class="${css.chatTitle}" onclick=${openLink} title='Click to open chat in Gitter'> <div class="${css.chatTitleText}">ethereum/remix community chat</div>
<div class="${css.chatTitleText}">ethereum/remix community chat</div> </div>
${self._view.gitterIframe}
</div> </div>
${gitterIframe} </div>`
</div> if (!self._view.el) self._view.el = el
</div> return el
` function openLink () { window.open('https://gitter.im/ethereum/remix') }
}
} }
function supportTab (api = {}, events = {}, opts = {}) { const css = csjs`
let el = supportTabView('') .supportTabView {
let gitterIsLoaded = false height: 100vh;
padding: 2%;
events.app.register('tabChanged', (tabName) => { padding-bottom: 3em;
if (tabName !== 'Support' || gitterIsLoaded) { display: flex;
return flex-direction: column;
} overflow: hidden;
}
yo.update(el, supportTabView(gitterIframe)) .chat {
el.style.display = 'block' ${styles.rightPanel.supportTab.box_IframeContainer}
gitterIsLoaded = true display: flex;
}) flex-direction: column;
align-items: center;
return { render () { return el } } height: 85%;
} padding: 0;
}
function openLink () { .chatTitle {
window.open('https://gitter.im/ethereum/remix') height: 40px;
} width: 90%;
display: flex;
module.exports = supportTab align-items: center;
justify-content: center;
margin-top: 15px;
}
.chatTitle:hover {
cursor: pointer;
}
.icon {
height: 70%;
margin-right: 2%;
}
.chatTitleText {
font-size: 17px;
font-weight: bold;
}
.chatTitleText {
opacity: 0.8;
}
.chatIframe {
width: 100%;
height: 100%;
transform: scale(0.9);
padding: 0;
border: none;
}
.infoBox {
${styles.rightPanel.supportTab.box_SupportInfo}
}
`
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment