GuyPerfect/pvbemu
GuyPerfect
/
pvbemu
3
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Styling tweaks, adding Inconsolata and Roboto fonts

This commit is contained in:
Guy Perfect 2021-08-30 14:53:31 +00:00
parent 5a02e7e52d
commit 3dc8b93f94
8 changed files with 83 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/_boot.js
View File

@ -284,6 +284,19 @@ for (let file of manifest) {
// Program startup // Program startup
let run = async function() { let run = async function() {
// Fonts
for (let file of Object.values(Bundle.files)) {
if (!file.name.endsWith(".woff2"))
continue;
let family = "/" + file.name;
family = family.substring(family.lastIndexOf("/") + 1, family.length - 6);
let font = new FontFace(family, file.data);
await font.load();
document.fonts.add(font);
}
// Scripts
await Bundle.run("app/App.js"); await Bundle.run("app/App.js");
await Bundle.run("app/Debugger.js"); await Bundle.run("app/Debugger.js");
await Bundle.run("app/toolkit/Toolkit.js"); await Bundle.run("app/toolkit/Toolkit.js");

BIN
app/theme/Inconsolata_SemiExpanded-Regular.woff2 Normal file
View File

Binary file not shown.

BIN
app/theme/Roboto-Regular.woff2 Normal file
View File

Binary file not shown.

27
app/theme/dark.css
View File

@ -1,14 +1,17 @@
:root { :root {
--control : #222222; --control : #222222;
--control-focus : #444444; --control-focus : #444444;
--control-shadow : #999999; --control-shadow : #999999;
--control-text : #cccccc; --control-text : #cccccc;
--desktop : #111111; --desktop : #111111;
--window-blur : #555555; --window-blur : #555555;
--window-blur-text : #cccccc; --window-blur-text : #cccccc;
--window-close : #ee9999; --window-close-blur : #998080;
--window-close-blur: #998080; --window-close-blur-border : #999999;
--window-close-text: #ffffff; --window-close-blur-text : #ffffff;
--window-focus : #007ACC; --window-close-focus : #ee9999;
--window-focus-text: #ffffff; --window-close-focus-border: #999999;
--window-close-focus-text : #ffffff;
--window-focus : #007ACC;
--window-focus-text : #ffffff;
} }

41
app/theme/kiosk.css
View File

@ -1,15 +1,15 @@
/* Common styles for all themes */ /* Common styles for all themes */
:root { :root {
--font-dialog: Arial, sans-serif; --font-dialog: "Roboto-Regular", sans-serif;
--font-hex : Consolas, monospace; --font-hex : "Inconsolata_SemiExpanded-Regular", monospace;
--font-size : 12; --font-size : 12px;
} }
:root { :root {
color : var(--control-text); color : var(--control-text);
font-family: var(--font-dialog); font-family: var(--font-dialog);
font-size : calc(1px * var(--font-size)); font-size : var(--font-size);
} }
body { body {
@ -160,8 +160,9 @@ body {
[role="dialog"] [name="title-close"] { [role="dialog"] [name="title-close"] {
align-items : center; align-items : center;
background : var(--window-close); background : var(--window-close-focus);
box-shadow : 0 0 0 1px var(--control-shadow); box-shadow : 0 0 0 1px var(--window-close-focus-border);
color : var(--window-close-focus-text);
display : flex; display : flex;
height : 13px; height : 13px;
justify-content: center; justify-content: center;
@ -172,30 +173,23 @@ body {
[role="dialog"][focus="false"] [name="title-close"] { [role="dialog"][focus="false"] [name="title-close"] {
background: var(--window-close-blur); background: var(--window-close-blur);
} box-shadow: 0 0 0 1px var(--window-close-blur-border);
color : var(--window-close-blur-text);
[role="dialog"] [name="title-close"]:focus {
background: var(--control-focus);
} }
[role="dialog"] [name="title-close"][active] { [role="dialog"] [name="title-close"][active] {
box-shadow: 0 0 0 1px var(--control-shadow); box-shadow: 0 0 0 1px var(--window-close-focus-border);
margin : 0; margin : 0;
} }
[role="dialog"] [name="title-close"]:after { [role="dialog"] [name="title-close"]:after {
color : var(--window-close-text);
content : '\00d7'; content : '\00d7';
font-size : 13px; font-size : 13px;
line-height: 13px; line-height: 13px;
} }
[role="dialog"] [name="title-close"][active]:after { [role="dialog"] [name="title-close"][active]:after {
color : var(--window-close-text); margin: 1px -1px -1px 1px;
content : '\00d7';
font-size : 13px;
line-height: 13px;
margin : 1px -1px -1px 1px;
} }
[role="dialog"] [name="client"] { [role="dialog"] [name="client"] {
@ -207,8 +201,17 @@ body {
/******************************* Memory Window *******************************/ /******************************* Memory Window *******************************/
[window="memory"] [name="client"] { [window="memory"] [name="client"] {
align-items: center; align-items: start;
column-gap : calc(1px * var(--font-size) / 2); column-gap : calc(var(--font-size) / 2);
}
[window="memory"] [name="client"] > *:not(:nth-child(1n+1)) {
text-align: center;
}
[window="memory"] [name="client"] > *:nth-child(17n+2),
[window="memory"] [name="client"] > *:nth-child(17n+10) {
margin-left: calc(var(--font-size) / 2);
} }
[window="memory"] [name="address"], [window="memory"] [name="address"],

27
app/theme/light.css
View File

@ -1,14 +1,17 @@
:root { :root {
--control : #eeeeee; --control : #eeeeee;
--control-focus : #cccccc; --control-focus : #cccccc;
--control-shadow : #999999; --control-shadow : #999999;
--control-text : #000000; --control-text : #000000;
--desktop : #cccccc; --desktop : #cccccc;
--window-blur : #cccccc; --window-blur : #cccccc;
--window-blur-text : #444444; --window-blur-text : #444444;
--window-close : #ee9999; --window-close-blur : #d4c4c4;
--window-close-blur: #d4c4c4; --window-close-blur-border : #999999;
--window-close-text: #ffffff; --window-close-blur-text : #ffffff;
--window-focus : #80ccff; --window-close-focus : #ee9999;
--window-focus-text: #000000; --window-close-focus-border: #999999;
--window-close-focus-text : #ffffff;
--window-focus : #80ccff;
--window-focus-text : #000000;
} }

27
app/theme/virtual.css
View File

@ -1,16 +1,19 @@
:root { :root {
--control : #000000; --control : #000000;
--control-focus : #550000; --control-focus : #550000;
--control-shadow : #aa0000; --control-shadow : #aa0000;
--control-text : #ff0000; --control-text : #ff0000;
--desktop : #000000; --desktop : #000000;
--window-blur : #000000; --window-blur : #000000;
--window-blur-text : #aa0000; --window-blur-text : #aa0000;
--window-close : #aa0000; --window-close-blur : #550000;
--window-close-blur: #550000; --window-close-blur-border : #aa0000;
--window-close-text: #ff0000; --window-close-blur-text : #aa0000;
--window-focus : #550000; --window-close-focus : #aa0000;
--window-focus-text: #ff0000; --window-close-focus-border: #ff0000;
--window-close-focus-text : #ff0000;
--window-focus : #550000;
--window-focus-text : #ff0000;
} }
[filter="true"] { [filter="true"] {

15
app/windows/MemoryWindow.js
View File

@ -14,14 +14,13 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
// Configure element // Configure element
this.element.setAttribute("window", "memory"); this.element.setAttribute("window", "memory");
this.element.addEventListener("wheel", e=>this.onwheel(e));
// Configure client // Configure client
this.client.setLayout("grid", { columns: "repeat(19, max-content)" }); this.client.setLayout("grid", { columns: "repeat(17, max-content)" });
this.client.element.style.gridAutoRows = "max-content"; this.client.element.style.gridAutoRows = "max-content";
this.client.setOverflow("auto", "hidden"); this.client.setOverflow("auto", "hidden");
this.client.addResizeListener(b=>this.refresh(b.height)); this.client.addResizeListener(b=>this.refresh(b.height));
this.client.element.addEventListener("keydown", e=>this.onkeydown(e));
this.client.element.addEventListener("wheel", e=>this.onwheel(e));
// Configure properties // Configure properties
this.setProperty("sim", ""); this.setProperty("sim", "");
@ -151,7 +150,7 @@ globalThis.MemoryWindow = class MemoryWindow extends Toolkit.Window {
this.refresh(); this.refresh();
break; break;
default: console.log(e.key); return; default: return super.onkeydown(e);
} }
// Configure event // Configure event
@ -186,7 +185,6 @@ MemoryWindow.Row = class Row {
// Configure instance fields // Configure instance fields
this.bytes = new Array(16); this.bytes = new Array(16);
this.client = client; this.client = client;
this.spacers = new Array(2);
// Address label // Address label
this.address = client.add(client.newLabel({ text: "\u00a0" })); this.address = client.add(client.newLabel({ text: "\u00a0" }));
@ -194,11 +192,6 @@ MemoryWindow.Row = class Row {
// Byte labels // Byte labels
for (let x = 0; x < 16; x++) { for (let x = 0; x < 16; x++) {
if ((x & 7) == 0) {
let lbl = this.spacers[x / 8] =
client.add(client.newLabel({ text: "" }));
lbl.element.setAttribute("name", "byte");
}
let lbl = this.bytes[x] = let lbl = this.bytes[x] =
client.add(client.newLabel({ text: "\u00a0" })); client.add(client.newLabel({ text: "\u00a0" }));
lbl.element.setAttribute("name", "byte"); lbl.element.setAttribute("name", "byte");
@ -215,8 +208,6 @@ MemoryWindow.Row = class Row {
this.client.remove(this.address); this.client.remove(this.address);
for (let bytel of this.bytes) for (let bytel of this.bytes)
this.client.remove(bytel); this.client.remove(bytel);
for (let spacer of this.spacers)
this.client.remove(spacer);
} }
// Update the output labels with emulation state content // Update the output labels with emulation state content