From f0df0222c0aecb93a5a9ce4775719d0a6ff4fb36 Mon Sep 17 00:00:00 2001 From: Sam El-Husseini <16690124+samelhusseini@users.noreply.github.com> Date: Fri, 4 May 2018 10:36:48 -0700 Subject: [PATCH] Fixes for High contrast mode as per lego design. Most changes are in PXT. Adding high contrast theme in the simulator (#564) --- pxtarget.json | 1 - sim/visuals/board.ts | 18 +++++++++++++++--- sim/visuals/controls/backgroundView.ts | 2 +- sim/visuals/layoutView.ts | 18 ++++++++++++------ sim/visuals/view.ts | 5 +++-- sim/visuals/wireView.ts | 5 +++++ theme/style.less | 16 ---------------- 7 files changed, 36 insertions(+), 29 deletions(-) diff --git a/pxtarget.json b/pxtarget.json index 9ef6ca40..f0046b0c 100644 --- a/pxtarget.json +++ b/pxtarget.json @@ -81,7 +81,6 @@ "accentColor": "#0089BF", "logoUrl": "https://education.lego.com/", "logo": "./static/lego_education_logo.png", - "highContrastLogo": "./static/lego_education_logo_white.png", "docsLogo": "./static/lego-logo.svg", "portraitLogo": "./static/lego-logo.svg", "footerLogo": "./static/lego-logo.svg", diff --git a/sim/visuals/board.ts b/sim/visuals/board.ts index 8148ba67..6c11d3b6 100644 --- a/sim/visuals/board.ts +++ b/sim/visuals/board.ts @@ -101,10 +101,13 @@ namespace pxsim.visuals { export const SCREEN_HEIGHT = 128; export interface IBoardTheme { accent?: string; + highContrast?: boolean; display?: string; buttonOuter?: string; buttonUps: string[]; buttonDown?: string; + wireColor?: string; + backgroundViewColor?: string; } export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => { @@ -112,12 +115,21 @@ namespace pxsim.visuals { accent: accent, buttonOuter: "#979797", buttonUps: ["#a8aaa8", "#393939", "#a8aaa8", "#a8aaa8", "#a8aaa8", '#a8aaa8'], - buttonDown: "#000" + buttonDown: "#000", + wireColor: '#5A5A5A', + backgroundViewColor: '#d6edff' } }); export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme { - return themes[Math.floor(Math.random() * themes.length)]; + let theme = themes[Math.floor(Math.random() * themes.length)]; + if (highContrast) { + theme = JSON.parse(JSON.stringify(theme)) as IBoardTheme; + theme.highContrast = true; + theme.wireColor = '#ffffff'; + theme.backgroundViewColor = '#ffffff'; + } + return theme; } export interface IBoardProps { @@ -334,7 +346,7 @@ namespace pxsim.visuals { this.style.textContent = EV3_STYLE; this.layoutView = new LayoutView(); - this.layoutView.inject(this.element); + this.layoutView.inject(this.element, this.props.theme); const brick = new BrickViewPortrait(-1); this.layoutView.setBrick(brick); diff --git a/sim/visuals/controls/backgroundView.ts b/sim/visuals/controls/backgroundView.ts index b3d3ef49..672b5090 100644 --- a/sim/visuals/controls/backgroundView.ts +++ b/sim/visuals/controls/backgroundView.ts @@ -13,7 +13,7 @@ namespace pxsim.visuals { 'x': 0, 'y': 0, 'width': '100%', 'height': '100%', - 'style': `fill: #d6edff; stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2` + 'style': `fill: ${this.theme.backgroundViewColor};stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2` }) as SVGRectElement; return this.backgroundGroup; } diff --git a/sim/visuals/layoutView.ts b/sim/visuals/layoutView.ts index e7b844ee..4556276b 100644 --- a/sim/visuals/layoutView.ts +++ b/sim/visuals/layoutView.ts @@ -79,8 +79,8 @@ namespace pxsim.visuals { public setBrick(brick: BrickView) { this.brick = brick; - this.brick.inject(this.scrollGroup); - this.brickLandscape.inject(this.scrollGroup); + this.brick.inject(this.scrollGroup, this.theme); + this.brickLandscape.inject(this.scrollGroup, this.theme); this.brick.setSelected(false); this.brickLandscape.setSelected(true); this.brickLandscape.setVisible(false); @@ -212,16 +212,16 @@ namespace pxsim.visuals { // Inject all wires for (let port = 0; port < DAL.NUM_OUTPUTS; port++) { - this.outputWires[port].inject(this.scrollGroup); + this.outputWires[port].inject(this.scrollGroup, this.theme); } for (let port = 0; port < DAL.NUM_INPUTS; port++) { - this.inputWires[port].inject(this.scrollGroup); + this.inputWires[port].inject(this.scrollGroup, this.theme); } // Inject all view containers for (let i = 0; i < 4; i++) { - this.inputContainers[i].inject(this.scrollGroup); - this.outputContainers[i].inject(this.scrollGroup); + this.inputContainers[i].inject(this.scrollGroup, this.theme); + this.outputContainers[i].inject(this.scrollGroup, this.theme); } // Inject all ports @@ -253,6 +253,12 @@ namespace pxsim.visuals { } public updateTheme(theme: IBoardTheme) { + this.inputWires.forEach(n => { + n.updateTheme(theme); + }) + this.outputWires.forEach(n => { + n.updateTheme(theme); + }) this.inputs.forEach(n => { n.updateTheme(theme); }) diff --git a/sim/visuals/view.ts b/sim/visuals/view.ts index 8a942dd2..c132543b 100644 --- a/sim/visuals/view.ts +++ b/sim/visuals/view.ts @@ -19,8 +19,9 @@ namespace pxsim.visuals { public abstract getInnerWidth(): number; public abstract getInnerHeight(): number; - public inject(parent: SVGElement, width?: number, visible = true) { + public inject(parent: SVGElement, theme: IBoardTheme, width?: number, visible = true) { this.width = width; + this.theme = theme; parent.appendChild(this.getView()); if (visible) { @@ -276,7 +277,7 @@ namespace pxsim.visuals { } public addView(view: View) { - view.inject(this.element); + view.inject(this.element, this.theme); } public clear() { diff --git a/sim/visuals/wireView.ts b/sim/visuals/wireView.ts index 901cf573..821a6042 100644 --- a/sim/visuals/wireView.ts +++ b/sim/visuals/wireView.ts @@ -41,6 +41,11 @@ namespace pxsim.visuals { return this.wire; } + public updateThemeCore() { + let theme = this.theme; + this.path.setAttribute('stroke', theme.wireColor); + } + updatePath() { if (!this.hasDimensions) return; const height = this.endY - this.startY; diff --git a/theme/style.less b/theme/style.less index ad23dcc9..3252573c 100644 --- a/theme/style.less +++ b/theme/style.less @@ -155,22 +155,6 @@ } } -/** high contrast **/ -.hc { - .ui.menu, #downloadArea, - .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active { - background-color: black !important; - color: white !important; - } - .ui.red.corner.label { - border-color: #d4000d!important; - } - .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid { - border-color: white !important; - } -} - - /******************************* Custom icons *******************************/