webapp: Room settings dialog mockup
This commit is contained in:
parent
61dc78ba3b
commit
5e9de132b3
GPG key ID:
9AA47AFB7FE4409F
5 changed files with 175 additions and 15 deletions
BIN
webapp/assets/monitor.png
Normal file
BIN
webapp/assets/monitor.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 443 B |
|
|
@ -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 {
|
||||
|
|
@ -145,3 +222,7 @@ body {
|
|||
background-color: navy;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -14,9 +14,7 @@
|
|||
<div id="logonView">
|
||||
<div class="window" id="logonWindow">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">
|
||||
Log on to Agent Chat
|
||||
</div>
|
||||
<div class="title-bar-text">Log on to Agent Chat</div>
|
||||
</div>
|
||||
<div class="window-body">
|
||||
<div id="logonWindowLogo">
|
||||
|
|
@ -40,6 +38,7 @@
|
|||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window" id="motdWindow">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">
|
||||
|
|
@ -53,11 +52,74 @@
|
|||
<div id="motdContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul id="bottomLinks">
|
||||
<li><a href="#" id="rulesLink">Rules</a></li><li><a target="blank" href="https://discord.gg/a4kqb4mGyX">Discord</a></li><li><a target="blank" href="https://git.computernewb.com/computernewb/msagent-chat">Source Code</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="chatView">
|
||||
<div class="window" id="roomSettingsWindow">
|
||||
<div class="title-bar">
|
||||
<div class="title-bar-text">Room Settings</div>
|
||||
<div class="title-bar-controls">
|
||||
<button aria-label="Minimize"></button>
|
||||
<button aria-label="Close"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="window-body" id="roomSettingsBody">
|
||||
<menu role="tablist">
|
||||
<li role="tab" aria-selected="true"><a>Wallpaper</a></li>
|
||||
</menu>
|
||||
<div class="window" role="tabpanel" id="roomSettingsTabContent">
|
||||
<div class="window-body" id="roomSettingsWallpaperTab">
|
||||
<div class="wallpaperMonitor">
|
||||
<div>
|
||||
<div class="wallpaperMonitorFg" id="roomWallpaperPreview"></div>
|
||||
<img src="../../assets/monitor.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<span>Select a picture or enter a URL to use as a wallpaper:</span>
|
||||
<div id="roomSettingsWallpaperSelect">
|
||||
<div class="mainCol">
|
||||
<ul class="tree-view">
|
||||
<!-- Should be actual links later but this is just a mockup for now :P -->
|
||||
<li>None</li>
|
||||
<li>Blue Lace 16</li>
|
||||
<li>Boiling Point</li>
|
||||
<li>Chateau</li>
|
||||
<li>Coffee Bean</li>
|
||||
<li>Fall Memories</li>
|
||||
<li>FeatherTexture</li>
|
||||
</ul>
|
||||
<input type="text" placeholder="Wallpaper URL" id="roomSettingsWallpaperURL"/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="field-row-stacked">
|
||||
<label for="roomSettingsWallpaperDisplay">Picture Display:</label>
|
||||
<select id="roomSettingsWallpaperDisplay">
|
||||
<option selected>Center</option>
|
||||
<option>Tile</option>
|
||||
<option>Stretch</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<!-- *Should* be a HTML color select, but 98.css doesn't support those grr -->
|
||||
<button>Color</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field-row fieldRowRight">
|
||||
<button>OK</button>
|
||||
<button>Cancel</button>
|
||||
<button>Apply</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="chatBar">
|
||||
<input type="text" id="chatInput" placeholder="Send a message"/>
|
||||
<button id="chatSendBtn">Send</button>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue