improve tabbed menu to dynamically load tab

pull/1/head
yann300 7 years ago
parent f4e1f6cf46
commit b400ad5ebc
  1. 60
      src/app/panels/righthand-panel.js
  2. 1
      src/app/tabs/analysis-tab.js
  3. 1
      src/app/tabs/compile-tab.js
  4. 1
      src/app/tabs/debugger-tab.js
  5. 1
      src/app/tabs/run-tab.js
  6. 1
      src/app/tabs/settings-tab.js
  7. 1
      src/app/tabs/support-tab.js
  8. 88
      src/app/tabs/tabbed-menu.js

@ -1,7 +1,7 @@
var yo = require('yo-yo') var yo = require('yo-yo')
var remixLib = require('remix-lib') var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager var EventManager = remixLib.EventManager
var tabbedMenu = require('../tabs/tabbed-menu') var TabbedMenu = require('../tabs/tabbed-menu')
var compileTab = require('../tabs/compile-tab') var compileTab = require('../tabs/compile-tab')
var runTab = require('../tabs/run-tab') var runTab = require('../tabs/run-tab')
var settingsTab = require('../tabs/settings-tab') var settingsTab = require('../tabs/settings-tab')
@ -121,15 +121,9 @@ function RighthandPanel (appAPI, events, opts) {
self.event = new EventManager() self.event = new EventManager()
self._view = {} self._view = {}
var optionViews = yo`<div id="optionViews" class="settingsView">${cssTabs}</div>` var optionViews = yo`<div id="optionViews"></div>`
var options = yo` var options = yo`
<ul class=${css.opts}> <ul class=${css.opts}>
<li class="${css.opts_li} compileView" title="Compile">Compile</li>
<li class="${css.opts_li} runView" title="Run">Run</li>
<li class="${css.opts_li} settingsView" title="Settings">Settings</li>
<li class="${css.opts_li} debugView" title="Debugger">Debugger</li>
<li class="${css.opts_li} staticanalysisView" title="Static Analysis">Analysis</li>
<li class="${css.opts_li} supportView" title="Help and support">Support</li>
</ul> </ul>
` `
self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>` self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
@ -147,24 +141,26 @@ function RighthandPanel (appAPI, events, opts) {
appAPI.switchTab = (tabClass) => { appAPI.switchTab = (tabClass) => {
this.event.trigger('switchTab', [tabClass]) this.event.trigger('switchTab', [tabClass])
} }
compileTab(optionViews, appAPI, events, opts)
runTab(optionViews, appAPI, events, opts) // load tabbed menu component
settingsTab(optionViews, appAPI, events, opts) var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
analysisTab(optionViews, appAPI, events, opts) self._view.tabbedMenu = new TabbedMenu(options, {}, tabEvents, {})
debuggerTab(optionViews, appAPI, events, opts)
supportTab(optionViews, appAPI, events, opts) events.rhp = self.event
this._view.tabbedMenu.addTab('Compile', 'compileView', compileTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Run', 'runView', runTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Settings', 'settingsView', settingsTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Analysis', 'staticanalysisView', analysisTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Debugger', 'debugView', debuggerTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.addTab('Support', 'supportView', supportTab(optionViews, appAPI, events, opts))
this._view.tabbedMenu.selectTabByTitle('Compile')
self.render = function () { return self._view.element } self.render = function () { return self._view.element }
self.init = function () { self.init = function () {
;[...options.children].forEach((el) => { el.classList.add(css.options) }) ;[...options.children].forEach((el) => { el.classList.add(css.options) })
// ----------------- tabbed menu -----------------
var tabbedMenuAPI = {}
// load tabbed menu component
var tabEvents = {compiler: events.compiler, app: events.app, rhp: self.event}
tabbedMenu(options, tabbedMenuAPI, tabEvents, {})
// ----------------- resizeable ui --------------- // ----------------- resizeable ui ---------------
var limit = 60 var limit = 60
self._view.dragbar.addEventListener('mousedown', mousedown) self._view.dragbar.addEventListener('mousedown', mousedown)
@ -206,27 +202,3 @@ function RighthandPanel (appAPI, events, opts) {
} }
} }
} }
var cssTabs = yo`<style>#optionViews.settingsView #settingsView {
display: block;
}
#optionViews.compileView #compileTabView {
display: block;
}
#optionViews.runView #runTabView {
display: block;
}
#optionViews.debugView #debugView {
display: block;
}
#optionViews.staticanalysisView #staticanalysisView {
display: block;
}
#optionViews.supportView #supportView {
display: block;
}</style>`

@ -34,4 +34,5 @@ function analysisTab (container, appAPI, events, opts) {
</div> </div>
` `
container.appendChild(el) container.appendChild(el)
return el
} }

@ -445,6 +445,7 @@ function compileTab (container, appAPI, appEvents, opts) {
} }
return el return el
} }
return el
} }
function detailsHelpSection () { function detailsHelpSection () {

@ -24,4 +24,5 @@ function debuggerTab (container, appAPI, events, opts) {
<div id="debugger" class="${css.debugger}"></div> <div id="debugger" class="${css.debugger}"></div>
</div>` </div>`
container.appendChild(el) container.appendChild(el)
return el
} }

@ -250,6 +250,7 @@ function runTab (container, appAPI, appEvents, opts) {
noInstancesText.style.display = 'block' noInstancesText.style.display = 'block'
instanceContainer.appendChild(noInstancesText) instanceContainer.appendChild(noInstancesText)
}) })
return el
} }
function fillAccountsList (appAPI, container) { function fillAccountsList (appAPI, container) {

@ -137,6 +137,7 @@ function SettingsTab (container, appAPI, appEvents, opts) {
}) })
container.appendChild(el) container.appendChild(el)
return el
} }
function setVersionText (text, el) { function setVersionText (text, el) {

@ -86,6 +86,7 @@ function supportTab (container, appAPI, events, opts) {
</div> </div>
` `
container.appendChild(el) container.appendChild(el)
return el
} }
function openLink () { function openLink () {

@ -1,4 +1,4 @@
var $ = require('jquery') var yo = require('yo-yo')
// -------------- styling ---------------------- // -------------- styling ----------------------
var csjs = require('csjs-inject') var csjs = require('csjs-inject')
@ -6,46 +6,84 @@ var remixLib = require('remix-lib')
var styleGuide = remixLib.ui.styleGuide var styleGuide = remixLib.ui.styleGuide
var styles = styleGuide() var styles = styleGuide()
module.exports = tabbedMenu var helper = require('../../lib/helper')
var css = csjs` var css = csjs`
li.active { li.active {
background-color: ${styles.rightPanel.backgroundColor_Tab}; background-color: ${styles.rightPanel.backgroundColor_Tab};
color: ${styles.appProperties.mainText_Color}; color: ${styles.appProperties.mainText_Color}
} }
` .options {
float: left;
function tabbedMenu (container, appAPI, events, opts) { padding-top: 0.7em;
var lis = container.querySelectorAll('li') min-width: 60px;
for (var li = 0; li < lis.length; ++li) { font-size: 0.9em;
lis[li].onclick = function (ev) { selectTab(this) } cursor: pointer;
font-size: 1em;
text-align: center;
}
.opts {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.opts_li {
display: block;
font-weight: bold;
color: ${styles.rightPanel.text_Teriary}
} }
.opts_li.active {
color: ${styles.rightPanel.text_Primary}
}
.opts_li:hover {
color: ${styles.rightPanel.icon_HoverColor_TogglePanel}
}
`
events.app.register('debuggingRequested', () => { class TabbedMenu {
selectTab(container.querySelector('li.debugView')) constructor (tabView, api, events, opts) {
}) var self = this
this.tabView = tabView
this.events = events
this.tabs = {}
this.contents = {}
events.rhp.register('switchTab', tabName => { events.app.register('debuggingRequested', () => {
selectTab(container.querySelector(`li.${tabName}`)) self.selectTab(tabView.querySelector('li.debugView'))
}) })
// initialize tabbed menu events.rhp.register('switchTab', tabName => {
selectTab(container.querySelector('.compileView')) self.selectTab(tabView.querySelector(`li.${tabName}`))
})
}
// select tab selectTabByTitle (title) {
this.selectTab(this.tabs[title])
}
function selectTab (el) { selectTab (el) {
var match = /[a-z]+View/.exec(el.className)
if (!match) return
var cls = match[0]
if (!el.classList.contains(css.active)) { if (!el.classList.contains(css.active)) {
var nodes = el.parentNode.querySelectorAll('li') var nodes = el.parentNode.querySelectorAll('li')
for (var i = 0; i < nodes.length; ++i) { for (var i = 0; i < nodes.length; ++i) {
nodes[i].classList.remove(css.active) nodes[i].classList.remove(css.active)
this.contents[nodes[i].getAttribute('title')].style.display = 'none'
} }
$('#optionViews').attr('class', '').addClass(cls)
el.classList.add(css.active)
} }
events.app.trigger('tabChanged', [cls]) var title = el.getAttribute('title')
this.contents[el.getAttribute('title')].style.display = 'block'
el.classList.add(css.active)
this.events.app.trigger('tabChanged', [title])
}
addTab (title, cssClass, content) {
var self = this
if (!helper.checkSpecialChars(title)) {
this.contents[title] = content
this.tabs[title] = yo`<li class="${css.opts_li} ${css.options} ${cssClass}" onclick=${function (ev) { self.selectTab(this) }} title=${title}>${title}</li>`
this.tabView.appendChild(this.tabs[title])
}
} }
} }
module.exports = TabbedMenu

Loading…
Cancel
Save