Add capability to color buttons

pull/1/head
cpsdqs 7 years ago
parent 9a79537910
commit ce46ad7e96
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
  1. 27
      js/term/buttons.js
  2. 6
      js/term/index.js
  3. 1
      js/term/screen_renderer.js

@ -1,11 +1,18 @@
const { getColor } = require('./themes')
const { qs } = require('../utils') const { qs } = require('../utils')
module.exports = function initButtons (input) { module.exports = function initButtons (input) {
let container = qs('#action-buttons') let container = qs('#action-buttons')
// current color palette
let palette = []
// button labels // button labels
let labels = [] let labels = []
// button colors
let colors = {}
// button elements // button elements
let buttons = [] let buttons = []
@ -54,9 +61,15 @@ module.exports = function initButtons (input) {
for (let i = 0; i < labels.length; i++) { for (let i = 0; i < labels.length; i++) {
let label = labels[i].trim() let label = labels[i].trim()
let button = buttons[i] let button = buttons[i]
let color = colors[i]
button.textContent = label || '\u00a0' // label or nbsp button.textContent = label || '\u00a0' // label or nbsp
if (!label) button.classList.add('inactive') if (!label) button.classList.add('inactive')
else button.classList.remove('inactive') else button.classList.remove('inactive')
if (Number.isFinite(color)) button.style.background = getColor(color, palette)
else button.style.background = null
} }
} }
@ -68,6 +81,20 @@ module.exports = function initButtons (input) {
set labels (value) { set labels (value) {
labels = value labels = value
update() update()
},
get colors () {
return colors
},
set colors (value) {
colors = value
update()
},
get palette () {
return palette
},
set palette (value) {
palette = value
update()
} }
} }
} }

@ -50,6 +50,11 @@ module.exports = function (opts) {
// buttons // buttons
const buttons = initButtons(input) const buttons = initButtons(input)
screen.on('button-labels', labels => { buttons.labels = labels }) screen.on('button-labels', labels => { buttons.labels = labels })
// TODO: don't access the renderer here
buttons.palette = screen.layout.renderer.palette
screen.layout.renderer.on('palette-update', palette => {
buttons.palette = palette
})
screen.on('full-load', () => { screen.on('full-load', () => {
let scr = qs('#screen') let scr = qs('#screen')
@ -235,6 +240,7 @@ module.exports = function (opts) {
// for debugging // for debugging
window.termScreen = screen window.termScreen = screen
window.buttons = buttons
window.conn = conn window.conn = conn
window.input = input window.input = input
window.termUpl = termUpload window.termUpl = termUpload

@ -111,6 +111,7 @@ module.exports = class CanvasRenderer extends EventEmitter {
if (this._palette !== palette) { if (this._palette !== palette) {
this._palette = palette this._palette = palette
this.resetDrawn() this.resetDrawn()
this.emit('palette-update', palette)
this.scheduleDraw('palette') this.scheduleDraw('palette')
} }
} }

Loading…
Cancel
Save