diff --git a/src/client/webapp/elements/events-window-buttons.ts b/src/client/webapp/elements/events-window-buttons.ts deleted file mode 100644 index 399a977..0000000 --- a/src/client/webapp/elements/events-window-buttons.ts +++ /dev/null @@ -1,16 +0,0 @@ -import * as electron from 'electron'; -import Q from '../q-module'; - -export default function bindWindowButtonEvents(q: Q): void { - q.$('#minimize').addEventListener('click', () => { - electron.ipcRenderer.send('minimize'); - }); - - q.$('#maximize').addEventListener('click', () => { - electron.ipcRenderer.send('maximize'); - }); - - q.$('#close').addEventListener('click', () => { - electron.ipcRenderer.send('close'); - }); -} diff --git a/src/client/webapp/elements/root.tsx b/src/client/webapp/elements/root.tsx new file mode 100644 index 0000000..3c66890 --- /dev/null +++ b/src/client/webapp/elements/root.tsx @@ -0,0 +1,21 @@ +import React, { FC } from 'react'; +import GuildsManager from '../guilds-manager'; +import GuildsManagerElement from './sections/guilds-manager'; +import TitleBar from './sections/title-bar'; + +export interface RootElementProps { + guildsManager: GuildsManager; +} + +const RootElement: FC = (props: RootElementProps) => { + const { guildsManager } = props; + + return ( +
+ + +
+ ); +} + +export default RootElement; diff --git a/src/client/webapp/elements/sections/title-bar.tsx b/src/client/webapp/elements/sections/title-bar.tsx new file mode 100644 index 0000000..4cd164c --- /dev/null +++ b/src/client/webapp/elements/sections/title-bar.tsx @@ -0,0 +1,47 @@ +import React, { FC, useCallback } from 'react'; +import * as electron from 'electron'; + +const TitleBar: FC = () => { + const minimize = useCallback(() => { + electron.ipcRenderer.send('minimize'); + }, []); + const maximize = useCallback(() => { + electron.ipcRenderer.send('maximize'); + }, []); + const close = useCallback(() => { + electron.ipcRenderer.send('close'); + }, []); + + return ( +
+
+ + {/* corDis Scraped From Discord Logo and shifted around a bit*/} + + +
+
+
+ + {/* Yoinked Directly from Discord */} + + +
+
+ + {/* Yoinked Directly from Discord */} + + +
+
+ + {/* Yoinked Directly from Discord */} + + +
+
+
+ ); +} + +export default TitleBar; diff --git a/src/client/webapp/index.html b/src/client/webapp/index.html index be47ce3..764c1e0 100644 --- a/src/client/webapp/index.html +++ b/src/client/webapp/index.html @@ -6,35 +6,7 @@ -
-
- - - - -
-
-
- - - - -
-
- - - - -
-
- - - - -
-
-
-
+
diff --git a/src/client/webapp/preload.tsx b/src/client/webapp/preload.tsx index 88cff46..87265cc 100644 --- a/src/client/webapp/preload.tsx +++ b/src/client/webapp/preload.tsx @@ -12,14 +12,12 @@ import GuildsManager from './guilds-manager'; import Globals from './globals'; -import Q from './q-module'; -import bindWindowButtonEvents from './elements/events-window-buttons'; import PersonalDB from './personal-db'; import MessageRAMCache from './message-ram-cache'; import ResourceRAMCache from './resource-ram-cache'; import ReactDOM from 'react-dom'; import React from 'react'; -import GuildsManagerElement from './elements/sections/guilds-manager'; +import RootElement from './elements/root'; LOG.silly('modules loaded'); @@ -58,17 +56,9 @@ window.addEventListener('DOMContentLoaded', () => { const guildsManager = new GuildsManager(messageRAMCache, resourceRAMCache, personalDB); await guildsManager.init(); - LOG.silly('guilds manager initialized'); - - const q = new Q(document); - - LOG.silly('action classes initialized'); - - bindWindowButtonEvents(q); - LOG.silly('events bound'); - ReactDOM.render(, q.$('.guilds-manager-anchor')); + ReactDOM.render(, document.getElementById('react-root')); })(); }); diff --git a/src/client/webapp/styles/title-bar.scss b/src/client/webapp/styles/title-bar.scss index 2694744..53e16af 100644 --- a/src/client/webapp/styles/title-bar.scss +++ b/src/client/webapp/styles/title-bar.scss @@ -1,39 +1,39 @@ @import "theme.scss"; -#title-bar { +.title-bar { display: flex; -} + + .app-title { + color: $text-muted; + padding: 6px 0px 0px 10px; + flex: 1; + -webkit-app-region: drag; /* Also allows for double-click maximise & right-click menu */ + } -#title-bar #title { - color: $text-muted; - padding: 6px 0px 0px 10px; - flex: 1; - -webkit-app-region: drag; /* Also allows for double-click maximise & right-click menu */ -} + .window-actions { + display: flex; -#title-bar #window-actions { - display: flex; -} + > * { + color: $interactive-normal; + background: none; + border: none; + width: 28px; + height: 22px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + } -#window-actions > * { - color: $interactive-normal; - background: none; - border: none; - width: 28px; - height: 22px; - display: flex; - justify-content: center; - align-items: center; - cursor: pointer; -} + .minimize:hover, + .maximize:hover { + color: $interactive-hover; + background-color: $background-modifier-hover; + } -#window-actions #minimize:hover, -#window-actions #maximize:hover { - color: $interactive-hover; - background-color: $background-modifier-hover; -} - -#window-actions #close:hover { - color: #fff; - background-color: #f04747; + .close:hover { + color: #fff; + background-color: #f04747; + } + } } diff --git a/src/client/webapp/util.ts b/src/client/webapp/util.ts index 0c4604f..7233974 100644 --- a/src/client/webapp/util.ts +++ b/src/client/webapp/util.ts @@ -8,9 +8,6 @@ import * as path from 'path'; import * as socketio from 'socket.io-client'; -import Q from './q-module'; - - interface WithPotentialErrorParams { taskFunc: (() => Promise), errorIndicatorAddFunc: ((element: Element) => Promise), @@ -73,16 +70,6 @@ export default class Util { return availableBaseName + ext; } - // This MUST be called before an errorContainer is removed from the document to prevent memory leaks (if it's parent element is removed, that's the big problem) - // This can also be called to remove error indicators from an error container. - static removeErrorIndicators(q: Q, errorContainer: HTMLElement, extraClasses?: string[]): void { - extraClasses = extraClasses ?? []; - const querySelector = '.error-indicator' + extraClasses.map(e => '.' + e).join(''); - for (const element of q.$$$$(errorContainer, querySelector)) { - element.parentElement?.removeChild(element); // The MutationObserver will reject the outstanding Promise - } - } - static async sleep(ms: number): Promise { return await new Promise((resolve, reject) => { setTimeout(resolve, ms);