xobs/farpatch-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dashboard: wip getting dashboard working

Browse Source 
Signed-off-by: Sean Cross <sean@xobs.io>
This commit is contained in:
Sean Cross 2023-12-02 19:25:12 +08:00
parent 81ec574f41
commit 7ed86a992d
4 changed files with 130 additions and 369 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/interface/dashboard.ts
View File

@ -11,36 +11,39 @@ class DashboardItem {
} }
render(): HTMLElement { render(): HTMLElement {
var field: HTMLElement = document.createElement("div"); var field: HTMLElement = document.createElement("div");
field.classList.add("fieldset-item"); field.classList.add("dashboard-item");
var navViewIcon = document.createElement("span"); var itemTitle = document.createElement("span");
navViewIcon.setAttribute("aria-hidden", "true"); itemTitle.classList.add("dashboard-item-title");
navViewIcon.classList.add("las"); itemTitle.innerText = this.name;
navViewIcon.classList.add("la-3x"); // itemTitle.setAttribute("aria-hidden", "true");
navViewIcon.classList.add("la-" + this.id); // itemTitle.classList.add("las");
navViewIcon.classList.add("icon"); // itemTitle.classList.add("la-3x");
// itemTitle.classList.add("la-" + this.id);
// itemTitle.classList.add("icon");
var inputStack: HTMLElement = document.createElement("div"); var itemValue: HTMLElement = document.createElement("span");
inputStack.classList.add("input-stack"); itemValue.classList.add("dashboard-item-value");
itemValue.innerHTML = this.value;
var label: HTMLElement = document.createElement("label"); // // var label: HTMLElement = document.createElement("label");
label.setAttribute("for", this.id); // // label.setAttribute("for", this.id);
label.setAttribute("id", this.id); // // label.setAttribute("id", this.id);
label.setAttribute("aria-hidden", "true"); // // label.setAttribute("aria-hidden", "true");
label.innerText = this.name; // // label.innerText = this.name;
var input: HTMLElement = document.createElement("input"); // var input: HTMLElement = document.createElement("input");
input.setAttribute("name", this.id); // input.setAttribute("name", this.id);
input.setAttribute("aria-labelledby", this.id); // input.setAttribute("aria-labelledby", this.id);
input.setAttribute("type", "range"); // input.setAttribute("type", "range");
input.setAttribute("value", this.value); // input.setAttribute("value", this.value);
input.setAttribute("max", "10"); // input.setAttribute("max", "10");
input.setAttribute("style", "--track-fill: 30%"); // input.setAttribute("style", "--track-fill: 30%");
inputStack.appendChild(label); // inputStack.appendChild(label);
inputStack.appendChild(input); // inputStack.appendChild(input);
field.appendChild(navViewIcon); field.appendChild(itemTitle);
field.appendChild(inputStack); field.appendChild(itemValue);
return field; return field;
} }
@ -61,10 +64,13 @@ class DashboardSection {
var header: HTMLElement = document.createElement("header"); var header: HTMLElement = document.createElement("header");
var h2: HTMLElement = document.createElement("h2"); var h2: HTMLElement = document.createElement("h2");
h2.innerText = this.name; h2.innerText = this.name;
header.classList.add("dashboard-section-header");
header.appendChild(h2); header.appendChild(h2);
root.classList.add("dashboard-section");
root.appendChild(header); root.appendChild(header);
var fieldset: HTMLElement = document.createElement("fieldset"); var fieldset: HTMLElement = document.createElement("fieldset");
fieldset.classList.add("dashboard-section");
for (var i = 0; i < this.items.length; i++) { for (var i = 0; i < this.items.length; i++) {
fieldset.appendChild(this.items[i].render()); fieldset.appendChild(this.items[i].render());
} }
@ -118,6 +124,7 @@ export class DashboardWidget implements FarpatchWidget {
} }
onInit(): void { onInit(): void {
this.view.classList.add("dashboard-view");
for (var i = 0; i < this.sections.length; i++) { for (var i = 0; i < this.sections.length; i++) {
this.view.appendChild(this.sections[i].render()); this.view.appendChild(this.sections[i].render());
} }

105
static/css/desktop.css
View File

@ -1,3 +1,48 @@
:root {
--surface1: lch(90 0 0);
--surface2: lch(100 0 0);
--surface3: lch(98 0 0);
--surface4: lch(85 0 0);
--text1: lch(20 0 0);
--text2: lch(40 0 0);
--thumb-highlight-color: lch(0 0 0 / 20%);
--space-xxs: .25rem;
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 0.5rem;
--space-lg: 8rem;
--space-xl: 3rem;
--space-xxl: 6rem;
--dashboard-section-width: 45ch;
--isLTR: 1;
--isRTL: -1;
&:dir(rtl) {
--isLTR: -1;
--isRTL: 1;
}
/* @media (prefers-color-scheme: dark) {
& {
--surface1: lch(10 0 0);
--surface2: lch(15 0 0);
--surface3: lch(20 0 0);
--surface4: lch(25 0 0);
--text1: lch(95 0 0);
--text2: lch(75 0 0);
--thumb-highlight-color: lch(100 0 0 / 20%);
}
} */
}
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -87,12 +132,56 @@ main {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
/* .sidenav-item-toggle {
position: absolute;
bottom: 0;
} */
/* .sidenav-item-toggle { /* Dashboard Settings */
content: ''; .dashboard-section {
flex-grow: 1; display: grid;
} */ gap: var(--space-md);
}
.dashboard-section-header {
display: grid;
gap: var(--space-xxs);
}
.dashboard-view {
max-width: 89vw;
display: grid;
gap: var(--space-xl) var(--space-xxl);
--repeat: auto-fit;
grid-template-columns:
repeat(var(--repeat), minmax(min(10ch, 100%), var(--dashboard-section-width)));
align-items: flex-start;
@media (orientation: landscape) and (width >=640px) {
& {
--repeat: 2;
}
}
}
.dashboard-item {
background: var(--surface3);
transition: background .2s ease;
display: grid;
grid-template-columns: var(--space-lg) 1fr;
gap: var(--space-md);
padding-block: var(--space-sm);
padding-inline: var(--space-md);
}
.dashboard-section {
border: 1px solid var(--surface4);
background: var(--surface4);
padding: 0;
margin: 0;
display: grid;
gap: 1px;
border-radius: var(--space-sm);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
.dashboard-item-title {}

334
static/css/fancy.css
View File

@ -1,334 +0,0 @@
@custom-media --motionOK (prefers-reduced-motion: no-preference);
:root {
--surface1: lch(10 0 0);
--surface2: lch(15 0 0);
--surface3: lch(20 0 0);
--surface4: lch(25 0 0);
--text1: lch(95 0 0);
--text2: lch(75 0 0);
--brand: lch(64 20 237);
--brand-bg1: lch(70 64 349);
--brand-bg2: lch(60 84 300);
--brand-bg-gradient: linear-gradient(
to bottom,
var(--brand-bg1),
var(--brand-bg2)
);
--thumb-highlight-color: lch(100 0 0 / 20%);
--space-xxs: .25rem;
--space-xs: .5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-xxl: 6rem;
--isLTR: 1;
--isRTL: -1;
&:dir(rtl) {
--isLTR: -1;
--isRTL: 1;
}
@media (prefers-color-scheme: light) {
& {
--surface1: lch(90 0 0);
--surface2: lch(100 0 0);
--surface3: lch(98 0 0);
--surface4: lch(85 0 0);
--text1: lch(20 0 0);
--text2: lch(40 0 0);
--brand: lch(64 40 237);
--brand-bg1: lch(50 64 349);
--brand-bg2: lch(40 84 300);
--thumb-highlight-color: lch(0 0 0 / 20%);
}
}
}
form {
max-width: 89vw;
display: grid;
gap: var(--space-xl) var(--space-xxl);
--repeat: auto-fit;
grid-template-columns:
repeat(var(--repeat), minmax(min(10ch, 100%), 35ch));
align-items: flex-start;
@media (orientation: landscape) and (width >= 640px) { & {
--repeat: 2;
}}
}
section {
display: grid;
gap: var(--space-md);
}
header {
display: grid;
gap: var(--space-xxs);
}
fieldset {
border: 1px solid var(--surface4);
background: var(--surface4);
padding: 0;
margin: 0;
display: grid;
gap: 1px;
border-radius: var(--space-sm);
overflow: hidden;
transition: box-shadow .3s ease;
&:focus-within {
box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%);
}
}
input[type="range"] {
--track-height: .5ex;
--track-fill: 0%;
--thumb-size: 3ex;
--thumb-offset: -1.25ex;
--thumb-highlight-size: 0px;
display: block;
inline-size: 100%;
margin: 1ex 0;
appearance: none;
background: transparent;
outline-offset: 5px;
@media (hover: none) {
& {
--thumb-size: 30px;
--thumb-offset: -14px;
}
}
&::-webkit-slider-runnable-track {
appearance: none;
block-size: var(--track-height);
border-radius: 5ex;
background:
linear-gradient(
to right,
transparent var(--track-fill),
var(--surface1) 0%
),
var(--brand-bg-gradient) fixed;
}
&::-moz-range-track {
appearance: none;
block-size: var(--track-height);
border-radius: 5ex;
background:
linear-gradient(
to right,
transparent var(--track-fill),
var(--surface1) 0%
),
var(--brand-bg-gradient) fixed;
}
&::-webkit-slider-thumb {
appearance: none;
cursor: ew-resize;
border: 3px solid var(--surface3);
block-size: var(--thumb-size);
inline-size: var(--thumb-size);
margin-block-start: var(--thumb-offset);
border-radius: 50%;
background: var(--brand-bg-gradient) fixed;
box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
@media (--motionOK) {
& {
transition: box-shadow .1s ease;
}
}
@nest .fieldset-item:focus-within & {
border-color: var(--surface2);
}
}
&::-moz-range-thumb {
appearance: none;
cursor: ew-resize;
border: 3px solid var(--surface3);
block-size: var(--thumb-size);
inline-size: var(--thumb-size);
margin-block-start: var(--thumb-offset);
border-radius: 50%;
background: var(--brand-bg-gradient) fixed;
box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color);
@media (--motionOK) {
& {
transition: box-shadow .1s ease;
}
}
@nest .fieldset-item:focus-within & {
border-color: var(--surface2);
}
}
&:is(:hover,:active) {
--thumb-highlight-size: 10px;
}
}
input[type="checkbox"] {
inline-size: var(--space-sm);
block-size: var(--space-sm);
margin: 0;
outline-offset: 5px;
accent-color: var(--brand);
position: relative;
transform-style: preserve-3d;
cursor: pointer;
&:hover::before {
--thumb-scale: 1;
}
@media (hover: none) {
& {
inline-size: var(--space-md);
block-size: var(--space-md);
}
}
&::before {
--thumb-scale: .01;
--thumb-highlight-size: var(--space-xl);
content: "";
inline-size: var(--thumb-highlight-size);
block-size: var(--thumb-highlight-size);
clip-path: circle(50%);
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
background: var(--thumb-highlight-color);
transform-origin: center center;
transform:
translateX(calc(var(--isRTL) * 50%))
translateY(-50%)
translateZ(-1px)
scale(var(--thumb-scale))
;
will-change: transform;
@media (--motionOK) {
& {
transition: transform .2s ease;
}
}
}
}
.fieldset-item {
background: var(--surface3);
transition: background .2s ease;
display: grid;
grid-template-columns: var(--space-lg) 1fr;
gap: var(--space-md);
padding-block: var(--space-sm);
padding-inline: var(--space-md);
@media (width >= 540px) {
grid-template-columns: var(--space-xxl) 1fr;
gap: var(--space-xs);
padding-block: var(--space-md);
padding-inline: 0 var(--space-xl);
}
&:focus-within {
background: var(--surface2);
& svg {
fill: white;
}
& picture {
clip-path: circle(50%);
background: var(--brand-bg-gradient) fixed;
}
}
& > :is(.input-stack, label) {
display: grid;
gap: var(--space-xs);
}
& > .input-stack > label {
display: contents;
}
& > picture {
block-size: var(--space-xl);
inline-size: var(--space-xl);
clip-path: circle(40%);
display: inline-grid;
place-content: center;
background: var(--surface3) fixed;
@media (--motionOK) {
& {
transition: clip-path .3s ease;
}
}
}
& svg {
fill: var(--text2);
block-size: var(--space-md);
}
& > :is(picture, input[type="checkbox"]) {
place-self: center;
}
}
small {
color: var(--text2);
line-height: 1.5;
}
.github-corner {
color: var(--surface1);
fill: var(--surface3);
&:hover .octo-arm {
animation: octocat-wave 560ms ease-in-out
}
}
@keyframes octocat-wave{
0%,100% {
transform: rotate(0)
}
20%,60% {
transform: rotate(-25deg)
}
40%,80% {
transform: rotate(10deg)
}
}

1
static/index.html
View File

@ -7,7 +7,6 @@
<link rel="stylesheet" href="css/desktop.css"> <link rel="stylesheet" href="css/desktop.css">
<link rel="stylesheet" href="css/mobile.css"> <link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/xterm.css" /> <link rel="stylesheet" href="css/xterm.css" />
<link rel="stylesheet" href="css/fancy.css" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<title>Farpatch</title> <title>Farpatch</title>