c_meyer/pxt-ev3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixes for High contrast mode as per lego design. Most changes are in PXT. Adding high contrast theme in the simulator (#564)

Browse Source
This commit is contained in:
Sam El-Husseini 2018-05-04 10:36:48 -07:00 committed by GitHub
parent 2a371b9cc6
commit f0df0222c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
pxtarget.json
View File

@ -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",

18
sim/visuals/board.ts
View File

@ -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);

2
sim/visuals/controls/backgroundView.ts
View File

@ -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;
}

18
sim/visuals/layoutView.ts
View File

@ -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);
})

5
sim/visuals/view.ts
View File

@ -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() {

5
sim/visuals/wireView.ts
View File

@ -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;

16
theme/style.less
View File

@ -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
*******************************/