From 5e9de132b3ab92c437eeedd44a12d4fbb48a8328 Mon Sep 17 00:00:00 2001 From: dakrk Date: Sat, 13 Jul 2024 01:08:53 +0100 Subject: [PATCH] webapp: Room settings dialog mockup --- webapp/assets/monitor.png | Bin 0 -> 443 bytes webapp/src/css/style.css | 87 +++++++++++++++++++++++++++++++++++-- webapp/src/html/index.html | 68 +++++++++++++++++++++++++++-- webapp/src/ts/MSWindow.ts | 24 ++++++---- webapp/src/ts/main.ts | 11 ++++- 5 files changed, 175 insertions(+), 15 deletions(-) create mode 100644 webapp/assets/monitor.png diff --git a/webapp/assets/monitor.png b/webapp/assets/monitor.png new file mode 100644 index 0000000000000000000000000000000000000000..de21460465a3c72c1275f162cde5f72d4a8e7359 GIT binary patch literal 443 zcmeAS@N?(olHy`uVBq!ia0vp^JAim42Q!ddpU!?7NC^e_gt-3y|G%N3;lP0dKmmsT zAj0d)@tHu1tt7}V7%2PyKf~tzOZGD`Fa~+LIEGZ*dVAL~?~s9j!^N2r_y3=Y4Om%n zF+?KS=G5$%2cK1P=CpRosV>hbb8&My68P@qnwzyL_ja%Lt?QotTFq~cMd70(=7Q&I z)%}icerqN9{L$KctN&f$9O@9MPGKrD)@#OnZ96&ly;phns_Ja8@jptBZocwadEV7| zXF5(y65g9u-o5X=>ihJ|k6$WZsqXXimzSL0y8T*I+P_ktn)(X)nD4jWiXH#B;pX3e zJf?@QckoZ!{#)$th9CQ`*b3cK|L-C3N{;LO$Cs+9CVT4lRU7R2zH;`-Qy(IwFMim4 zio5N6M05+c_`jqdmkysj@*(E8{#xV1)AyMQ#+la~*MBbVv*nQKjgxZALE-M{>gTe~ HDWM4fD*VyZ literal 0 HcmV?d00001 diff --git a/webapp/src/css/style.css b/webapp/src/css/style.css index b040ff2..76d0ee7 100644 --- a/webapp/src/css/style.css +++ b/webapp/src/css/style.css @@ -1,6 +1,6 @@ body { background-color: #3A6EA5; - font-size: 8pt; + font-size: 11px; } #logonView { @@ -12,19 +12,26 @@ body { } .window { - display: none; + display: flex; + flex-direction: column; + position: fixed; .title-bar { user-select: none; } } +.window-body { + flex: 1; +} + #motdContainer { font-family: "Arial", sans-serif; } #bottomLinks { - font-family: "Pixelated MS Sans Serif", Arial; + font-family: "Pixelated MS Sans Serif", Arial, sans-serif; + li { display: inline; border-right: 1px solid black; @@ -41,11 +48,13 @@ body { color: #fff; } } + li:last-child { border-right: none; padding-right: 0; margin-right: 0; } + list-style: none; display: block; position: fixed; @@ -54,6 +63,7 @@ body { transform: translateX(-50%); } + #logonWindowLogo { background-color: #ffffff; margin: 0; @@ -93,6 +103,53 @@ body { margin-right: 90px; } + +#roomSettingsBody { + display: flex; + flex-direction: column; +} + +#roomSettingsTabContent { + flex: 1; + margin-bottom: 8px; +} + +/* CSS nesting isn't even a year old as of writing this, we should consider using SASS or something for now */ +#roomSettingsWallpaperTab { + display: flex; + flex-direction: column; + + .wallpaperMonitor { + text-align: center; + flex: 1; + } + + #roomSettingsWallpaperSelect { + height: 114px; + display: flex; + flex-direction: row; + + gap: 8px; + + .mainCol { + display: flex; + flex-direction: column; + flex: 1; + + .tree-view { + flex: 1; + overflow: auto; + } + } + + #roomSettingsWallpaperURL { + margin-top: 8px; + width: 100%; + } + } +} + + #chatBar { margin: 0; padding: 0; @@ -117,6 +174,26 @@ body { margin-right: 4px; } +.wallpaperMonitor { + div { + display: inline-block; + position: relative; + } + + .wallpaperMonitorFg { + position: absolute; + width: 152px; + height: 112px; + margin: 17px 16px; + background: linear-gradient(160deg, #9b4f96, #0038a8); + } +} + + +.fieldRowRight { + justify-content: flex-end; +} + .context-menu { background-color: silver; ul { @@ -144,4 +221,8 @@ body { .context-menu-item:hover { background-color: navy; color: #fff; +} + +.d-none { + display: none; } \ No newline at end of file diff --git a/webapp/src/html/index.html b/webapp/src/html/index.html index 62f986a..5802050 100644 --- a/webapp/src/html/index.html +++ b/webapp/src/html/index.html @@ -14,9 +14,7 @@
-
- Log on to Agent Chat -
+
Log on to Agent Chat
+
@@ -53,11 +52,74 @@
+
+
+
+
Room Settings
+
+ + +
+
+
+ +
  • Wallpaper
    • +     +
    +
    +
    +
    +
    + +
    +
    +
    + Select a picture or enter a URL to use as a wallpaper: +
    +
    +
      + +
    • None
      • +
    • Blue Lace 16
      • +
    • Boiling Point
      • +
    • Chateau
      • +
    • Coffee Bean
      • +
    • Fall Memories
      • +
    • FeatherTexture
      • +
    + +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    +
    +
    + + + +
    +
    +
    +
    diff --git a/webapp/src/ts/MSWindow.ts b/webapp/src/ts/MSWindow.ts index 47e512c..434027c 100644 --- a/webapp/src/ts/MSWindow.ts +++ b/webapp/src/ts/MSWindow.ts @@ -3,7 +3,7 @@ export interface MSWindowConfig { minHeight: number, maxWidth?: number | undefined, maxHeight?: number | undefined, - startPosition: MSWindowStartPosition + startPosition: MSWindowStartPosition // TODO: Should be a union with the enum and a "Point" (containing X and Y) } export enum MSWindowStartPosition { @@ -22,23 +22,27 @@ export class MSWindow { x: number; y: number; constructor(wnd: HTMLDivElement, config: MSWindowConfig) { - this.shown = false; this.wnd = wnd; + this.shown = false; this.config = config; this.wnd.style.minWidth = config.minWidth + "px"; this.wnd.style.minHeight = config.minHeight + "px"; - if (config.maxWidth) { + + if (config.maxWidth) this.wnd.style.maxWidth = config.maxWidth + "px"; - } - if (config.maxHeight) { + if (config.maxHeight) this.wnd.style.maxHeight = config.maxHeight + "px"; - } + + this.wnd.classList.add("d-none"); + let titlebar = this.wnd.querySelector("div.title-bar"); let body = this.wnd.querySelector("div.window-body"); if (!titlebar || !body) throw new Error("MSWindow is missing titlebar or body element."); + this.titlebar = titlebar as HTMLDivElement; this.body = body as HTMLDivElement; + let closeBtn = this.titlebar.querySelector("div.title-bar-controls > button[aria-label='Close']") as HTMLButtonElement; if (closeBtn) { this.closeBtn = closeBtn; @@ -46,6 +50,7 @@ export class MSWindow { this.hide(); }); } + // Register window move handlers this.dragging = false; switch (this.config.startPosition) { @@ -64,30 +69,33 @@ export class MSWindow { } } this.setLoc(); + this.titlebar.addEventListener('mousedown', () => { this.dragging = true; document.addEventListener('mouseup', () => { this.dragging = false; }, {once: true}); }); + document.addEventListener('mousemove', e => { if (!this.dragging) return; this.x += e.movementX; this.y += e.movementY; this.setLoc(); }); + window.addEventListener('resize', () => { this.setLoc(); }); } show() { - this.wnd.style.display = "block"; + this.wnd.classList.remove("d-none"); this.shown = true; } hide() { - this.wnd.style.display = "none"; + this.wnd.classList.add("d-none"); this.shown = false; } diff --git a/webapp/src/ts/main.ts b/webapp/src/ts/main.ts index 63b4183..38d0731 100644 --- a/webapp/src/ts/main.ts +++ b/webapp/src/ts/main.ts @@ -18,7 +18,9 @@ const elements = { chatView: document.getElementById("chatView") as HTMLDivElement, chatInput: document.getElementById("chatInput") as HTMLInputElement, - chatSendBtn: document.getElementById("chatSendBtn") as HTMLButtonElement + chatSendBtn: document.getElementById("chatSendBtn") as HTMLButtonElement, + + roomSettingsWindow: document.getElementById("roomSettingsWindow") as HTMLDivElement } let Room : MSAgentClient; @@ -51,7 +53,14 @@ let logonWindow = new MSWindow(elements.logonWindow, { startPosition: MSWindowStartPosition.Center }); +let roomSettingsWindow = new MSWindow(elements.roomSettingsWindow, { + minWidth: 398, + minHeight: 442, + startPosition: MSWindowStartPosition.Center +}); + logonWindow.show(); +// roomSettingsWindow.show(); let loggingIn = false; elements.logonForm.addEventListener('submit', e => {