From 4dbabcbf92ce68ed614fb95bbc9854e438e160f6 Mon Sep 17 00:00:00 2001 From: a Date: Thu, 6 Apr 2023 19:20:16 -0500 Subject: [PATCH] Update styles and move them to their own files --- src/components/components-shared.css | 16 +++ src/components/error-notification-element.ts | 39 +------- src/components/error-notification.css | 31 ++++++ .../shadowed-with-stylesheet-element.ts | 5 + src/components/util.ts | 0 src/components/webrtc-chat-element.ts | 98 +------------------ src/components/webrtc-chat.css | 89 +++++++++++++++++ src/components/webrtc-media-element.ts | 21 +--- src/components/webrtc-media.css | 13 +++ .../webrtc-track-commands-element.ts | 57 +++++------ src/components/webrtc-track-commands.css | 28 ++++++ src/connection-screen.css | 2 +- 12 files changed, 219 insertions(+), 180 deletions(-) create mode 100644 src/components/components-shared.css create mode 100644 src/components/error-notification.css create mode 100644 src/components/util.ts create mode 100644 src/components/webrtc-chat.css create mode 100644 src/components/webrtc-media.css create mode 100644 src/components/webrtc-track-commands.css diff --git a/src/components/components-shared.css b/src/components/components-shared.css new file mode 100644 index 0000000..09bb37f --- /dev/null +++ b/src/components/components-shared.css @@ -0,0 +1,16 @@ +.rounded-button { + background: var(--grey-1); + border: 1px solid var(--blue-1); + color: var(--blue-2); + border-radius: 100%; + display: flex; + justify-content: center; + align-items: center; +} +.rounded-button:not(:disabled):hover { + filter: invert(10%); +} +.rounded-button:disabled, +.rounded-button:not(:disabled):active { + filter: invert(25%); +} diff --git a/src/components/error-notification-element.ts b/src/components/error-notification-element.ts index 41e392d..f637adc 100644 --- a/src/components/error-notification-element.ts +++ b/src/components/error-notification-element.ts @@ -5,41 +5,10 @@ class ErrorNotificationElement extends ShadowedWithStylesheetElement { constructor() { super(); - const style = document.createElement("style"); - style.innerHTML = ` - :host { - position: absolute; - display: block; - z-index: 100; - pointer-events: none; - } - * { - box-sizing: border-box; - } - .error-message { - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 16px; - background: var(--grey-1); - color: var(--red-1); - padding: 8px 8px 8px 16px; - margin: 16px; - border-left: 3px solid var(--red-2); - border-radius: 0 4px 4px 0; - cursor: pointer; - display: block; - pointer-events: auto; - } - .error-message::after { - display: inline-block; - margin-left: 32px; - width: 16px; - content: ""; - } - .error-message:hover::after { - content: "x" - } - `; - this.shadowRoot!.appendChild(style); + const styleSheet = document.createElement("link"); + styleSheet.rel = "stylesheet"; + styleSheet.href = "components/error-notification.css"; + this.shadowRoot!.appendChild(styleSheet); } addError(e: Error, log = true) { diff --git a/src/components/error-notification.css b/src/components/error-notification.css new file mode 100644 index 0000000..842983e --- /dev/null +++ b/src/components/error-notification.css @@ -0,0 +1,31 @@ +:host { + position: absolute; + display: block; + z-index: 100; + pointer-events: none; +} +* { + box-sizing: border-box; +} +.error-message { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 16px; + background: var(--grey-1); + color: var(--red-1); + padding: 8px 8px 8px 16px; + margin: 16px; + border-left: 3px solid var(--red-2); + border-radius: 0 4px 4px 0; + cursor: pointer; + display: block; + pointer-events: auto; +} +.error-message::after { + display: inline-block; + margin-left: 32px; + width: 16px; + content: ""; +} +.error-message:hover::after { + content: "x"; +} diff --git a/src/components/shadowed-with-stylesheet-element.ts b/src/components/shadowed-with-stylesheet-element.ts index 5d3e9d6..0213dd8 100644 --- a/src/components/shadowed-with-stylesheet-element.ts +++ b/src/components/shadowed-with-stylesheet-element.ts @@ -7,5 +7,10 @@ export class ShadowedWithStylesheetElement extends HTMLElement { styleSheet.rel = "stylesheet"; styleSheet.href = "/colors.css"; this.shadowRoot!.appendChild(styleSheet); + + const styleSheet2 = document.createElement("link"); + styleSheet2.rel = "stylesheet"; + styleSheet2.href = "components/components-shared.css"; + this.shadowRoot!.appendChild(styleSheet2); } } diff --git a/src/components/util.ts b/src/components/util.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/components/webrtc-chat-element.ts b/src/components/webrtc-chat-element.ts index b396375..155bb9f 100644 --- a/src/components/webrtc-chat-element.ts +++ b/src/components/webrtc-chat-element.ts @@ -11,99 +11,10 @@ export class WebRtcChatElement extends WindowElement { constructor() { super(); - const style = document.createElement("style"); - style.innerHTML = ` - :host { - --chat-send-size: 40px; - --chat-send-padding: 5px; - --base-sizing: 16px; - --system-font-size: 80%; - } - * { - box-sizing: border-box; - } - .text { - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 16px; - background: var(--grey-1); - color: var(--fg); - } - .system-text { - font-family: monospace, monospace; - } - .from-me { - color: var(--blue-1); - text-align: right; - margin-left: 25%; - border-right: 3px solid var(--blue-2); - } - .from-me::before { - content: "You"; - display: block; - font-size: var(--system-font-size); - } - .from-them { - color: var(--orange-1); - text-align: left; - margin-right: 25%; - border-left: 3px solid var(--orange-2); - } - .from-them::before { - content: "Them"; - display: block; - font-size: var(--system-font-size); - } - .message { - padding: var(--base-sizing); - } - #chat-container { - flex: 1 1; - display: flex; - flex-direction: column; - overflow: auto; - } - #chat-display { - flex: 1 1 80%; - margin: var(--base-sizing); - padding: var(--base-sizing); - overflow: auto; - word-break: break-all; - } - #chat-input-container { - flex: 0 0; - margin: var(--base-sizing); - margin-top: 0px; /* why no collapse */ - height: calc(var(--chat-send-size) + var(--chat-send-padding) * 2); - position: relative; - } - #chat-input { - height: 100%; - width: 100%; - border: none; - outline: none; - margin: 0; - padding: var(--chat-send-padding); - padding-left: calc(var(--chat-send-size) + var(--chat-send-padding) * 2); - resize: none; - } - #chat-send { - position: absolute; - left: var(--chat-send-padding); - top: var(--chat-send-padding); - width: var(--chat-send-size); - height: var(--chat-send-size); - } - #chat-send::after { - content: "✉"; - font-size: calc(var(--chat-send-size) / 2); - } - .buttons-container { - margin-top: 5px; - display: flex; - gap: 15px; - } - `; - this.shadowRoot!.appendChild(style); + const styleSheet = document.createElement("link"); + styleSheet.rel = "stylesheet"; + styleSheet.href = "components/webrtc-chat.css"; + this.shadowRoot!.appendChild(styleSheet); const chatContainer = document.createElement("div"); chatContainer.id = "chat-container"; @@ -126,6 +37,7 @@ export class WebRtcChatElement extends WindowElement { this.#chatSend = document.createElement("button"); this.#chatSend.id = "chat-send"; + this.#chatSend.classList.add("rounded-button"); this.#chatSend.disabled = true; this.#chatInputContainer.appendChild(this.#chatInput); diff --git a/src/components/webrtc-chat.css b/src/components/webrtc-chat.css new file mode 100644 index 0000000..2852a51 --- /dev/null +++ b/src/components/webrtc-chat.css @@ -0,0 +1,89 @@ +:host { + --chat-send-size: 40px; + --chat-send-padding: 10px; + --base-sizing: 16px; + --system-font-size: 80%; +} +* { + box-sizing: border-box; +} +.text { + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 16px; + background: var(--grey-1); + color: var(--fg); +} +.system-text { + font-family: monospace, monospace; +} +.from-me { + color: var(--blue-1); + text-align: right; + margin-left: 25%; + border-right: 3px solid var(--blue-2); +} +.from-me::before { + content: "You"; + display: block; + font-size: var(--system-font-size); +} +.from-them { + color: var(--orange-1); + text-align: left; + margin-right: 25%; + border-left: 3px solid var(--orange-2); +} +.from-them::before { + content: "Them"; + display: block; + font-size: var(--system-font-size); +} +.message { + padding: var(--base-sizing); +} +#chat-container { + flex: 1 1; + display: flex; + flex-direction: column; + overflow: auto; +} +#chat-display { + flex: 1 1 80%; + margin: var(--base-sizing); + padding: var(--base-sizing); + overflow: auto; + word-break: break-all; +} +#chat-input-container { + flex: 0 0; + margin: var(--base-sizing); + margin-top: 0px; /* why no collapse */ + height: calc(var(--chat-send-size) + var(--chat-send-padding) * 2); + position: relative; +} +#chat-input { + height: 100%; + width: 100%; + border: none; + outline: none; + margin: 0; + padding: var(--chat-send-padding); + padding-left: calc(var(--chat-send-size) + var(--chat-send-padding) * 2); + resize: none; +} +#chat-send { + position: absolute; + left: var(--chat-send-padding); + top: var(--chat-send-padding); + width: var(--chat-send-size); + height: var(--chat-send-size); +} +#chat-send::after { + content: "✉"; + font-size: calc(var(--chat-send-size) / 2); +} +.buttons-container { + margin-top: 5px; + display: flex; + gap: 15px; +} diff --git a/src/components/webrtc-media-element.ts b/src/components/webrtc-media-element.ts index 2b1b25b..9b405b9 100644 --- a/src/components/webrtc-media-element.ts +++ b/src/components/webrtc-media-element.ts @@ -8,23 +8,10 @@ export class WebRtcMediaElement extends WindowElement { constructor() { super(); - const style = document.createElement("style"); - style.innerHTML = ` - .media-container { - width: 100%; - height: 100%; - overflow: auto; - } - video { - margin: 16px; - width: calc(100% - 42px); - height: calc(100% - 42px); - } - video[isSource] { - border: 5px solid var(--red-1); - } - `; - this.shadowRoot!.appendChild(style); + const styleSheet = document.createElement("link"); + styleSheet.rel = "stylesheet"; + styleSheet.href = "components/webrtc-media.css"; + this.shadowRoot!.appendChild(styleSheet); const mediaContainer = document.createElement("div"); mediaContainer.classList.add("media-container"); diff --git a/src/components/webrtc-media.css b/src/components/webrtc-media.css new file mode 100644 index 0000000..8fdaa85 --- /dev/null +++ b/src/components/webrtc-media.css @@ -0,0 +1,13 @@ +.media-container { + width: 100%; + height: 100%; + overflow: auto; +} +video { + margin: 16px; + width: calc(100% - 42px); + height: calc(100% - 42px); +} +video[isSource] { + border: 5px solid var(--red-1); +} diff --git a/src/components/webrtc-track-commands-element.ts b/src/components/webrtc-track-commands-element.ts index c7732b7..08b5649 100644 --- a/src/components/webrtc-track-commands-element.ts +++ b/src/components/webrtc-track-commands-element.ts @@ -9,45 +9,22 @@ export class WebRtcTrackCommandsElement extends ShadowedWithStylesheetElement { constructor() { super(); - const style = document.createElement("style"); - style.innerHTML = ` - dialog { - border: 1px solid var(--grey-2); - background: var(--bg); - color: var(--fg); - font-family: Verdana, Geneva, Tahoma, sans-serif; - font-size: 16px; - } - .button-container { - display: flex; - justify-content: space-evenly; - } - .icon-button { - width: 50px; - height: 50px; - font-size: 25px; - } - .screen-icon::after { - content: "💻"; - } - .microphone-icon::after { - content: "🎤"; - } - .video-icon::after { - content: "🎥"; - } - `; - this.shadowRoot!.appendChild(style); + + const styleSheet = document.createElement("link"); + styleSheet.rel = "stylesheet"; + styleSheet.href = "components/webrtc-track-commands.css"; + this.shadowRoot!.appendChild(styleSheet); const button = document.createElement("button"); - button.innerText = "add stream"; + button.classList.add("rounded-button", "icon-button", "add-button"); button.onclick = () => { // recreating dialog is trash but idk how to hook it up "nicely" // otherwise const dialog = document.createElement("dialog"); const p = document.createElement("p"); p.innerText = - "Pick a type of stream to add, screen, audio, or video"; + "Pick media to stream to the other instance: " + + "screen, audio, or video"; dialog.appendChild(p); this.shadowRoot!.appendChild(dialog); const cleanup = () => this.shadowRoot!.removeChild(dialog); @@ -55,11 +32,23 @@ export class WebRtcTrackCommandsElement extends ShadowedWithStylesheetElement { const container = document.createElement("div"); container.classList.add("button-container"); const screenShare = document.createElement("button"); - screenShare.classList.add("icon-button", "screen-icon"); + screenShare.classList.add( + "rounded-button", + "icon-button", + "screen-icon" + ); const audioShare = document.createElement("button"); - audioShare.classList.add("icon-button", "microphone-icon"); + audioShare.classList.add( + "rounded-button", + "icon-button", + "microphone-icon" + ); const videoShare = document.createElement("button"); - videoShare.classList.add("icon-button", "video-icon"); + videoShare.classList.add( + "rounded-button", + "icon-button", + "video-icon" + ); container.appendChild(screenShare); container.appendChild(audioShare); diff --git a/src/components/webrtc-track-commands.css b/src/components/webrtc-track-commands.css new file mode 100644 index 0000000..5cbf491 --- /dev/null +++ b/src/components/webrtc-track-commands.css @@ -0,0 +1,28 @@ +dialog { + border: 1px solid var(--grey-2); + background: var(--bg); + color: var(--fg); + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-size: 16px; +} +.button-container { + display: flex; + justify-content: space-evenly; +} +.icon-button { + width: 50px; + height: 50px; + font-size: 25px; +} +.screen-icon::after { + content: "💻"; +} +.microphone-icon::after { + content: "🎤"; +} +.video-icon::after { + content: "🎥"; +} +.add-button::after { + content: "+"; +} diff --git a/src/connection-screen.css b/src/connection-screen.css index 40d33e9..3d1cda6 100644 --- a/src/connection-screen.css +++ b/src/connection-screen.css @@ -33,7 +33,7 @@ #connection-screen { flex-direction: column; gap: var(--main-sizing); - z-index: -1; + z-index: 1; } #qrcode,