lnmch/kops-arm64
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

#51 support different themes

Browse Source
This commit is contained in:
Henning Jacobs
2016-12-24 13:31:37 +01:00
parent 9da12df34b
commit b40d7c481f
9 changed files with 196 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
app/src/app.js
View File

@@ -2,7 +2,7 @@ import Tooltip from './tooltip.js'
import Cluster from './cluster.js'
import {Pod, ALL_PODS, sortByName, sortByMemory, sortByCPU, sortByAge} from './pod.js'
import SelectBox from './selectbox'
import { PRIMARY_COLOR, SECONDARY_COLOR } from './colors.js'
import { Theme} from './themes.js'
import { DESATURATION_FILTER } from './filters.js'
const PIXI = require('pixi.js')
@@ -19,6 +19,7 @@ export default class App {
}
this.seenPods = new Set()
this.sorterFn = ''
this.theme = Theme.get(localStorage.getItem('theme'))
}
filter() {
@@ -58,6 +59,8 @@ export default class App {
}
initialize() {
App.current = this
//Create the renderer
const renderer = PIXI.autoDetectRenderer(256, 256, {resolution: 2})
renderer.view.style.position = 'absolute'
@@ -67,63 +70,10 @@ export default class App {
//Add the canvas to the HTML document
document.body.appendChild(renderer.view)
this.renderer = renderer
//Create a container object called the `stage`
const stage = new PIXI.Container()
const menuBar = new PIXI.Graphics()
menuBar.beginFill(SECONDARY_COLOR, 0.8)
menuBar.drawRect(0, 0, window.innerWidth, 28)
menuBar.lineStyle(2, SECONDARY_COLOR, 0.8)
menuBar.moveTo(0, 28)
menuBar.lineTo(window.innerWidth, 28)
menuBar.lineStyle(1, PRIMARY_COLOR, 1)
menuBar.drawRect(20, 3, 200, 22)
stage.addChild(menuBar)
const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_COLOR})
searchPrompt.x = 26
searchPrompt.y = 8
PIXI.ticker.shared.add(function (_) {
var v = Math.sin((PIXI.ticker.shared.lastTime % 2000) / 2000. * Math.PI)
searchPrompt.alpha = v
})
stage.addChild(searchPrompt)
const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14, fill: PRIMARY_COLOR})
searchText.x = 40
searchText.y = 8
stage.addChild(searchText)
const items = [
{
text: 'SORT: NAME', sorterFn: sortByName
},
{
text: 'SORT: AGE', sorterFn: sortByAge
},
{
text: 'SORT: MEMORY', sorterFn: sortByMemory
},
{
text: 'SORT: CPU', sorterFn: sortByCPU
}
]
//setting default sort
App.sorterFn = items[0].sorterFn
const selectBox = new SelectBox(items)
selectBox.x = 265
selectBox.y = 3
menuBar.addChild(selectBox.draw())
const viewContainer = new PIXI.Container()
viewContainer.x = 20
viewContainer.y = 40
stage.addChild(viewContainer)
const tooltip = new Tooltip()
tooltip.draw()
stage.addChild(tooltip)
this.stage = new PIXI.Container()
function downHandler(event) {
if (event.key && event.key.length == 1 && !event.ctrlKey && !event.metaKey) {
@@ -141,9 +91,66 @@ export default class App {
addEventListener(
'keydown', downHandler.bind(this), false
)
}
draw() {
this.stage.removeChildren()
this.theme.apply(this.stage)
const menuBar = new PIXI.Graphics()
menuBar.beginFill(this.theme.secondaryColor, 0.8)
menuBar.drawRect(0, 0, window.innerWidth, 28)
menuBar.lineStyle(2, this.theme.secondaryColor, 0.8)
menuBar.moveTo(0, 28)
menuBar.lineTo(window.innerWidth, 28)
menuBar.lineStyle(1, this.theme.primaryColor, 1)
menuBar.drawRect(20, 3, 200, 22)
this.stage.addChild(menuBar)
const searchPrompt = new PIXI.Text('>', {fontFamily: 'ShareTechMono', fontSize: 14, fill: this.theme.primaryColor})
searchPrompt.x = 26
searchPrompt.y = 8
PIXI.ticker.shared.add(function (_) {
var v = Math.sin((PIXI.ticker.shared.lastTime % 2000) / 2000. * Math.PI)
searchPrompt.alpha = v
})
this.stage.addChild(searchPrompt)
const searchText = new PIXI.Text('', {fontFamily: 'ShareTechMono', fontSize: 14, fill: this.theme.primaryColor})
searchText.x = 40
searchText.y = 8
this.stage.addChild(searchText)
const items = [
{
text: 'SORT: NAME', sorterFn: sortByName
},
{
text: 'SORT: AGE', sorterFn: sortByAge
},
{
text: 'SORT: MEMORY', sorterFn: sortByMemory
},
{
text: 'SORT: CPU', sorterFn: sortByCPU
}
]
//setting default sort
this.sorterFn = items[0].sorterFn
const selectBox = new SelectBox(items)
selectBox.x = 265
selectBox.y = 3
menuBar.addChild(selectBox.draw())
const viewContainer = new PIXI.Container()
viewContainer.x = 20
viewContainer.y = 40
this.stage.addChild(viewContainer)
const tooltip = new Tooltip()
tooltip.draw()
this.stage.addChild(tooltip)
this.renderer = renderer
this.stage = stage
this.searchText = searchText
this.viewContainer = viewContainer
this.tooltip = tooltip
@@ -293,8 +300,15 @@ export default class App {
this.renderer.render(this.stage)
}
switchTheme(newTheme) {
this.theme = Theme.get(newTheme)
this.draw()
localStorage.setItem('theme', newTheme)
}
run() {
this.initialize()
this.draw()
const that = this

6
app/src/bars.js
View File

@@ -1,5 +1,5 @@
import {FACTORS, getBarColor} from './utils'
import {PRIMARY_COLOR} from './colors'
import App from './app'
const PIXI = require('pixi.js')
@@ -16,7 +16,7 @@ export default class Bars extends PIXI.Graphics {
const barHeight = 92
bars.beginFill(PRIMARY_COLOR, 0.1)
bars.beginFill(App.current.theme.primaryColor, 0.1)
bars.drawRect(5, 110 - barHeight, 15, barHeight)
bars.endFill()
@@ -39,7 +39,7 @@ export default class Bars extends PIXI.Graphics {
bars.drawRect(16.5, 110 - bars.resources.memory.used / scale, 2.5, bars.resources.memory.used / scale)
bars.endFill()
bars.lineStyle(1, PRIMARY_COLOR, 1)
bars.lineStyle(1, App.current.theme.primaryColor, 1)
for (var i = 0; i < bars.resources.cpu.capacity; i++) {
bars.drawRect(5, 110 - (i + 1) * cpuHeight, 5, cpuHeight)
}

6
app/src/cluster.js
View File

@@ -1,6 +1,6 @@
import Node from './node.js'
import { Pod } from './pod.js'
import { PRIMARY_COLOR } from './colors.js'
import App from './app.js'
const PIXI = require('pixi.js')
export default class Cluster extends PIXI.Graphics {
@@ -38,12 +38,12 @@ export default class Cluster extends PIXI.Graphics {
rows[0] += 20
}
this.lineStyle(2, PRIMARY_COLOR, 1)
this.lineStyle(2, App.current.theme.primaryColor, 1)
const width = Math.max(rows[0], rows[1])
this.drawRect(0, 0, width, nodeBox.height * 2 + 30)
var topHandle = new PIXI.Graphics()
topHandle.beginFill(PRIMARY_COLOR, 1)
topHandle.beginFill(App.current.theme.primaryColor, 1)
topHandle.drawRect(0, 0, width, 15)
topHandle.endFill()
var text = new PIXI.Text(this.cluster.api_server_url, {fontFamily: 'ShareTechMono', fontSize: 10, fill: 0x000000})

4
app/src/colors.js
View File

@@ -1,4 +0,0 @@
const PRIMARY_COLOR = 0xaaaaff
const SECONDARY_COLOR = 0x222233
export { PRIMARY_COLOR, SECONDARY_COLOR }

7
app/src/node.js
View File

@@ -1,7 +1,6 @@
import {Pod} from './pod.js'
import Bars from './bars.js'
import {parseResource} from './utils.js'
import {PRIMARY_COLOR, SECONDARY_COLOR} from './colors.js'
import App from './app'
const PIXI = require('pixi.js')
@@ -48,7 +47,7 @@ export default class Node extends PIXI.Graphics {
draw() {
const nodeBox = this
const topHandle = new PIXI.Graphics()
topHandle.beginFill(PRIMARY_COLOR, 1)
topHandle.beginFill(App.current.theme.primaryColor, 1)
topHandle.drawRect(0, 0, 105, 15)
topHandle.endFill()
const ellipsizedNodeName = this.node.name.length > 17 ? this.node.name.substring(0, 17).concat('…') : this.node.name
@@ -57,8 +56,8 @@ export default class Node extends PIXI.Graphics {
text.y = 2
topHandle.addChild(text)
nodeBox.addChild(topHandle)
nodeBox.lineStyle(2, PRIMARY_COLOR, 1)
nodeBox.beginFill(SECONDARY_COLOR, 1)
nodeBox.lineStyle(2, App.current.theme.primaryColor, 1)
nodeBox.beginFill(App.current.theme.secondaryColor, 1)
nodeBox.drawRect(0, 0, 105, 115)
nodeBox.endFill()
nodeBox.lineStyle(2, 0xaaaaaa, 1)

4
app/src/pod.js
View File

@@ -1,5 +1,5 @@
const PIXI = require('pixi.js')
import {PRIMARY_COLOR} from './colors.js'
import App from './app.js'
import {FACTORS, getBarColor, podResource} from './utils.js'
import {BRIGHTNESS_FILTER} from './filters.js'
@@ -201,7 +201,7 @@ export class Pod extends PIXI.Graphics {
podBox.filters = []
this.tooltip.visible = false
})
podBox.lineStyle(1, PRIMARY_COLOR, 1)
podBox.lineStyle(1, App.current.theme.primaryColor, 1)
let i = 0
const w = 10 / this.pod.containers.length
for (const container of this.pod.containers) {

23
app/src/selectbox.js
View File

@@ -1,4 +1,3 @@
import { PRIMARY_COLOR, SECONDARY_COLOR } from './colors.js'
import App from './app'
const PIXI = require('pixi.js')
@@ -11,7 +10,7 @@ export default class SelectBox extends PIXI.Graphics {
this.text = new PIXI.Text(this.items[this.count].text, {
fontFamily: 'ShareTechMono',
fontSize: 14,
fill: PRIMARY_COLOR,
fill: App.current.theme.primaryColor,
align: 'center'
})
this.text.x = 10
@@ -26,7 +25,7 @@ export default class SelectBox extends PIXI.Graphics {
selectBox.count = 0
}
selectBox.text.text = selectBox.items[selectBox.count].text
App.sorterFn = selectBox.items[selectBox.count].sorterFn
App.current.sorterFn = selectBox.items[selectBox.count].sorterFn
}
onBackPressed() {
@@ -36,7 +35,7 @@ export default class SelectBox extends PIXI.Graphics {
selectBox.count = selectBox.items.length - 1
}
selectBox.text.text = selectBox.items[selectBox.count].text
App.sorterFn = selectBox.items[selectBox.count].sorterFn
App.current.sorterFn = selectBox.items[selectBox.count].sorterFn
}
draw() {
@@ -51,10 +50,10 @@ export default class SelectBox extends PIXI.Graphics {
const arrowBoxWidth = 18
// draw a triangle
backArrow.beginFill(SECONDARY_COLOR, 1)
backArrow.beginFill(App.current.theme.secondaryColor, 1)
backArrow.drawRect(-18, 0, arrowBoxWidth, 22)
backArrow.lineStyle(1, PRIMARY_COLOR, 1)
backArrow.beginFill(SECONDARY_COLOR, 1)
backArrow.lineStyle(1, App.current.theme.primaryColor, 1)
backArrow.beginFill(App.current.theme.secondaryColor, 1)
backArrow.moveTo(-4, 5)
backArrow.lineTo(-15, 11)
backArrow.lineTo(-4, 17)
@@ -62,15 +61,15 @@ export default class SelectBox extends PIXI.Graphics {
backArrow.endFill()
selectBox.addChild(backArrow)
selectBox.lineStyle(1, PRIMARY_COLOR, 1)
selectBox.beginFill(SECONDARY_COLOR, 0.5)
selectBox.lineStyle(1, App.current.theme.primaryColor, 1)
selectBox.beginFill(App.current.theme.secondaryColor, 0.5)
selectBox.drawRect(4, 0, 100, 22)
selectBox.endFill()
forwardArrow.beginFill(SECONDARY_COLOR, 1)
forwardArrow.beginFill(App.current.theme.secondaryColor, 1)
forwardArrow.drawRect(108, 0, arrowBoxWidth, 22)
forwardArrow.lineStyle(1, PRIMARY_COLOR, 1)
forwardArrow.beginFill(SECONDARY_COLOR, 1)
forwardArrow.lineStyle(1, App.current.theme.primaryColor, 1)
forwardArrow.beginFill(App.current.theme.secondaryColor, 1)
forwardArrow.moveTo(111, 5)
forwardArrow.lineTo(122, 11)
forwardArrow.lineTo(111, 17)

99
app/src/themes.js Normal file
View File

@@ -0,0 +1,99 @@
const PIXI = require('pixi.js')
export class Theme {
constructor() {
}
static get(name) {
switch (name) {
case 'default':
return new DefaultTheme()
case 'green':
return new GreenTheme()
case 'grey':
return new GreyTheme()
case 'black-and-white':
return new BlackAndWhiteTheme()
case 'sepia':
return new SepiaTheme()
case 'polaroid':
return new PolaroidTheme()
case 'high-contrast':
return new HighContrastTheme()
default:
return new DefaultTheme()
}
}
}
class DefaultTheme {
constructor() {
this.primaryColor = 0xaaaaff
this.secondaryColor = 0x222233
}
apply(stage) {
stage.filters = []
}
}
class GreenTheme extends DefaultTheme {
constructor() {
super()
this.primaryColor = 0xaaffaa
this.secondaryColor = 0x223322
}
}
class GreyTheme extends DefaultTheme {
constructor() {
super()
this.primaryColor = 0xeeeeee
this.secondaryColor = 0x333333
}
}
class BlackAndWhiteTheme extends DefaultTheme {
constructor() {
super()
}
apply(stage) {
const filter = new PIXI.filters.ColorMatrixFilter()
filter.blackAndWhite()
stage.filters = [filter]
}
}
class SepiaTheme extends DefaultTheme {
constructor() {
super()
}
apply(stage) {
const filter = new PIXI.filters.ColorMatrixFilter()
filter.sepia()
stage.filters = [filter]
}
}
class PolaroidTheme extends DefaultTheme {
constructor() {
super()
}
apply(stage) {
const filter = new PIXI.filters.ColorMatrixFilter()
filter.polaroid()
stage.filters = [filter]
}
}
class HighContrastTheme extends DefaultTheme {
constructor() {
super()
this.primaryColor = 0xffffff
this.secondaryColor = 0x000000
}
apply(stage) {
const filter = new PIXI.filters.ColorMatrixFilter()
filter.saturate(3)
stage.filters = [filter]
}
}

6
app/src/tooltip.js
View File

@@ -1,4 +1,4 @@
import {SECONDARY_COLOR} from './colors.js'
import App from './app.js'
const PIXI = require('pixi.js')
@@ -19,8 +19,8 @@ export default class Tooltip extends PIXI.Graphics {
draw () {
this.clear()
this.lineStyle(2, SECONDARY_COLOR, 0.8)
this.beginFill(SECONDARY_COLOR, 0.8)
this.lineStyle(2, App.current.theme.secondaryColor, 0.8)
this.beginFill(App.current.theme.secondaryColor, 0.8)
this.drawRect(0, 0, this.text.width + 8, this.text.height + 8)
this.endFill()
}