Compare commits
No commits in common. "b01b6c41214f58f907dfe1a4812337d8c83a15ca" and "67f1b481ac33ede136e07fd0cca0d91e6071e413" have entirely different histories.
b01b6c4121
...
67f1b481ac
8 changed files with 55 additions and 102 deletions
|
@ -7,7 +7,7 @@
|
||||||
"dev": "rollup -c -w"
|
"dev": "rollup -c -w"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@fontsource/material-icons-outlined": "^4.5.4",
|
"@material-design-icons/font": "^0.14.2",
|
||||||
"@rollup/plugin-commonjs": "^23.0.4",
|
"@rollup/plugin-commonjs": "^23.0.4",
|
||||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||||
"@rollup/plugin-terser": "^0.1.0",
|
"@rollup/plugin-terser": "^0.1.0",
|
||||||
|
|
|
@ -44,7 +44,7 @@ export default {
|
||||||
// Copy fonts
|
// Copy fonts
|
||||||
copy({
|
copy({
|
||||||
targets: [
|
targets: [
|
||||||
{ src: "node_modules/@fontsource/material-icons-outlined/files/material-icons-outlined-all-400-normal.woff2", dest: "public/build/files" },
|
{ src: "node_modules/@material-design-icons/font/material-icons-outlined.woff2", dest: "public/build" },
|
||||||
]
|
]
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,6 @@
|
||||||
import Messages from "./Messages.svelte";
|
import Messages from "./Messages.svelte";
|
||||||
import { quadInOut } from "svelte/easing";
|
import { quadInOut } from "svelte/easing";
|
||||||
import { maybeFly } from "../animations";
|
import { maybeFly } from "../animations";
|
||||||
import { statusBarStore } from "../stores";
|
|
||||||
|
|
||||||
export let channel;
|
export let channel;
|
||||||
</script>
|
</script>
|
||||||
|
@ -21,11 +20,6 @@
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
|
<div class="main-container" in:maybeFly="{{ duration: 175, x: -10, easing: quadInOut }}">
|
||||||
{#if $statusBarStore}
|
|
||||||
<div class="info-bar">
|
|
||||||
<span class="info-text">{ $statusBarStore }</span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<ChannelTopBar channel={ channel } />
|
<ChannelTopBar channel={ channel } />
|
||||||
<Messages channelId="{ channel.id }" />
|
<Messages channelId="{ channel.id }" />
|
||||||
<MessageInput channel={ channel } />
|
<MessageInput channel={ channel } />
|
||||||
|
|
|
@ -184,6 +184,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
<div class="typing-info-container">
|
<div class="typing-info-container">
|
||||||
<span class="typing-list" class:invisible={ typingList === "?no one?" }>{ typingList }</span><span class="typing-message" class:invisible={ typingList === "?no one?" }>{ typingMessage }</span>
|
<span class="typing-list" class:invisible={ typingList === "?no one?" }>{ typingList }</span>
|
||||||
|
<span class="typing-message" class:invisible={ typingList === "?no one?" }>{ typingMessage }</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -6,69 +6,47 @@ import { useDebuggingApi } from './debuggingapi';
|
||||||
import gateway, { GatewayEventType } from './gateway';
|
import gateway, { GatewayEventType } from './gateway';
|
||||||
import { pluginStore } from './stores';
|
import { pluginStore } from './stores';
|
||||||
|
|
||||||
import "@fontsource/material-icons-outlined"
|
|
||||||
import "./styles/global.css";
|
import "./styles/global.css";
|
||||||
|
import "@material-design-icons/font";
|
||||||
import { timeline } from './timeline';
|
import { timeline } from './timeline';
|
||||||
|
|
||||||
timeline.start();
|
timeline.start();
|
||||||
|
|
||||||
let loaded = false;
|
|
||||||
let loadedListener = null;
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
loaded = true;
|
|
||||||
if (loadedListener) {
|
|
||||||
loadedListener();
|
|
||||||
loadedListener = null;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
function handleGatewaySettlement() {
|
function handleGatewaySettlement() {
|
||||||
timeline.addCheckpoint("Got gateway settlement");
|
timeline.addCheckpoint("Got gateway settlement");
|
||||||
|
|
||||||
const loadApplication = () => {
|
const loadingElement = document.getElementById("pre--loading-screen");
|
||||||
timeline.addCheckpoint("Application load started");
|
if (loadingElement) {
|
||||||
|
loadingElement.parentElement.removeChild(loadingElement);
|
||||||
const loadingElement = document.getElementById("pre--loading-screen");
|
|
||||||
if (loadingElement) {
|
|
||||||
loadingElement.parentElement.removeChild(loadingElement);
|
|
||||||
}
|
|
||||||
|
|
||||||
const app = new Main({
|
|
||||||
target: document.body
|
|
||||||
});
|
|
||||||
window.__waffle.app = app;
|
|
||||||
|
|
||||||
timeline.addCheckpoint("Created application");
|
|
||||||
|
|
||||||
pluginStore.consumePluginLoaders();
|
|
||||||
const scripts = getItem("app:javascript");
|
|
||||||
scripts.forEach((script) => {
|
|
||||||
const func = new Function(script);
|
|
||||||
func();
|
|
||||||
});
|
|
||||||
const styles = getItem("app:stylesheets");
|
|
||||||
styles.forEach((styleText) => {
|
|
||||||
const style = document.createElement("style");
|
|
||||||
style.textContent = styleText;
|
|
||||||
document.head.appendChild(style);
|
|
||||||
});
|
|
||||||
|
|
||||||
timeline.addCheckpoint("Loaded custom user content");
|
|
||||||
|
|
||||||
gateway.unsubscribe(GatewayEventType.Ready, handleGatewaySettlement);
|
|
||||||
gateway.unsubscribe(GatewayEventType.Close, handleGatewaySettlement);
|
|
||||||
|
|
||||||
timeline.addCheckpoint("All initialization finished");
|
|
||||||
timeline.dump();
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!loaded) {
|
|
||||||
timeline.addCheckpoint("Waiting for DOM content before loading application");
|
|
||||||
|
|
||||||
loadedListener = loadApplication;
|
|
||||||
} else {
|
|
||||||
loadApplication();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const app = new Main({
|
||||||
|
target: document.body
|
||||||
|
});
|
||||||
|
window.__waffle.app = app;
|
||||||
|
|
||||||
|
timeline.addCheckpoint("Created application");
|
||||||
|
|
||||||
|
pluginStore.consumePluginLoaders();
|
||||||
|
const scripts = getItem("app:javascript");
|
||||||
|
scripts.forEach((script) => {
|
||||||
|
const func = new Function(script);
|
||||||
|
func();
|
||||||
|
});
|
||||||
|
const styles = getItem("app:stylesheets");
|
||||||
|
styles.forEach((styleText) => {
|
||||||
|
const style = document.createElement("style");
|
||||||
|
style.textContent = styleText;
|
||||||
|
document.head.appendChild(style);
|
||||||
|
});
|
||||||
|
|
||||||
|
timeline.addCheckpoint("Loaded custom user content");
|
||||||
|
|
||||||
|
gateway.unsubscribe(GatewayEventType.Ready, handleGatewaySettlement);
|
||||||
|
gateway.unsubscribe(GatewayEventType.Close, handleGatewaySettlement);
|
||||||
|
|
||||||
|
timeline.addCheckpoint("All initialization finished");
|
||||||
|
timeline.dump();
|
||||||
}
|
}
|
||||||
|
|
||||||
function main() {
|
function main() {
|
||||||
|
|
|
@ -675,7 +675,6 @@ export const presenceStore = new PresenceStore();
|
||||||
export const unreadStore = new UnreadStore();
|
export const unreadStore = new UnreadStore();
|
||||||
export const pluginStore = new PluginStore();
|
export const pluginStore = new PluginStore();
|
||||||
export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
|
export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
|
||||||
export const statusBarStore = new Store(null, "statusBarStore");
|
|
||||||
|
|
||||||
export const setMessageInputEvent = new Store(null, "event:setMessageInput");
|
export const setMessageInputEvent = new Store(null, "event:setMessageInput");
|
||||||
export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {
|
export const sendMessageAction = createAction("sendMessageAction", async ({channelId, content}) => {
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
--foreground-color-2: hsl(63, 10%, 82%);
|
--foreground-color-2: hsl(63, 10%, 82%);
|
||||||
--foreground-color-3: hsl(63, 2%, 60%);
|
--foreground-color-3: hsl(63, 2%, 60%);
|
||||||
--foreground-color-4: hsl(63, 2%, 49%);
|
--foreground-color-4: hsl(63, 2%, 49%);
|
||||||
--foreground-special-color-1: hsl(180, 2%, 70%);
|
--foreground-special-color-1: hsl(180, 18%, 70%);
|
||||||
--colored-element-text-color: var(--foreground-color-1);
|
--colored-element-text-color: var(--foreground-color-1);
|
||||||
|
|
||||||
--purple-1: hsl(280, 78%, 50%);
|
--purple-1: hsl(280, 78%, 50%);
|
||||||
|
@ -83,14 +83,6 @@
|
||||||
/* initial values. these will be modified by javascript */
|
/* initial values. these will be modified by javascript */
|
||||||
--viewportWidth: 100vw;
|
--viewportWidth: 100vw;
|
||||||
--viewportHeight: 100vh;
|
--viewportHeight: 100vh;
|
||||||
|
|
||||||
/* font sizes */
|
|
||||||
--h1: 1.802rem;
|
|
||||||
--h2: 1.602rem;
|
|
||||||
--h3: 1.424rem;
|
|
||||||
--h4: 1.266rem;
|
|
||||||
--h5: 1.125rem;
|
|
||||||
--h6: 0.889rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
|
@ -139,7 +131,10 @@ body {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: left;
|
justify-content: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: var(--space-sm);
|
padding-left: var(--space-sm);
|
||||||
|
padding-right: var(--space-sm);
|
||||||
|
padding-top: var(--space-sm);
|
||||||
|
padding-bottom: var(--space-sm);
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
@ -152,20 +147,6 @@ body {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-bar {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
background-color: var(--background-color-0);
|
|
||||||
padding: var(--space-xxs);
|
|
||||||
margin: var(--space-xs);
|
|
||||||
border-radius: var(--radius-sm);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-bar .info-text {
|
|
||||||
margin-left: var(--space-sm);
|
|
||||||
color: var(--foreground-color-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* modal */
|
/* modal */
|
||||||
|
|
||||||
.modal-backdrop {
|
.modal-backdrop {
|
||||||
|
@ -336,6 +317,7 @@ body {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-button .material-icons,
|
.icon-button .material-icons,
|
||||||
|
@ -401,12 +383,12 @@ body {
|
||||||
|
|
||||||
/* text */
|
/* text */
|
||||||
|
|
||||||
.h1 {font-size: var(--h1)}
|
.h1 {font-size: 1.802rem;}
|
||||||
.h2 {font-size: var(--h2)}
|
.h2 {font-size: 1.602rem;}
|
||||||
.h3 {font-size: var(--h3)}
|
.h3 {font-size: 1.424rem;}
|
||||||
.h4 {font-size: var(--h4)}
|
.h4 {font-size: 1.266rem;}
|
||||||
.h5 {font-size: var(--h5)}
|
.h5 {font-size: 1.125rem;}
|
||||||
.text-small {font-size: var(--h6)}
|
.text-small {font-size: 0.889rem;}
|
||||||
|
|
||||||
/* sidebar */
|
/* sidebar */
|
||||||
|
|
||||||
|
@ -450,7 +432,6 @@ body {
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-size: var(--h6);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-button .sidebar-button-text {
|
.sidebar-button .sidebar-button-text {
|
||||||
|
@ -461,12 +442,12 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-button .icon-button {
|
.sidebar-button .icon-button {
|
||||||
visibility: hidden;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-button.selected .icon-button,
|
.sidebar-button.selected .icon-button,
|
||||||
.sidebar-button:hover .icon-button {
|
.sidebar-button:hover .icon-button {
|
||||||
visibility: visible;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-button:hover {
|
.sidebar-button:hover {
|
||||||
|
|
|
@ -2,11 +2,6 @@
|
||||||
# yarn lockfile v1
|
# yarn lockfile v1
|
||||||
|
|
||||||
|
|
||||||
"@fontsource/material-icons-outlined@^4.5.4":
|
|
||||||
version "4.5.4"
|
|
||||||
resolved "https://registry.yarnpkg.com/@fontsource/material-icons-outlined/-/material-icons-outlined-4.5.4.tgz#23ce468b7c569d1c717061cb8c5a69b3cb3fba12"
|
|
||||||
integrity sha512-2SLQe/pAlOzoE2Kd5cBxqTgI9U63hf3a7RrCF8GFvgPkYhF6WOcIzFzsLc1Fdf+UhcYS+Hgpp6o8peguwZGK9Q==
|
|
||||||
|
|
||||||
"@jridgewell/gen-mapping@^0.3.0":
|
"@jridgewell/gen-mapping@^0.3.0":
|
||||||
version "0.3.2"
|
version "0.3.2"
|
||||||
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
|
resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz#c1aedc61e853f2bb9f5dfe6d4442d3b565b253b9"
|
||||||
|
@ -47,6 +42,11 @@
|
||||||
"@jridgewell/resolve-uri" "3.1.0"
|
"@jridgewell/resolve-uri" "3.1.0"
|
||||||
"@jridgewell/sourcemap-codec" "1.4.14"
|
"@jridgewell/sourcemap-codec" "1.4.14"
|
||||||
|
|
||||||
|
"@material-design-icons/font@^0.14.2":
|
||||||
|
version "0.14.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/@material-design-icons/font/-/font-0.14.2.tgz#5b02c3bda37022645cc2df0200be02b6bc91ab4a"
|
||||||
|
integrity sha512-svLx/Q6WidjiSE1rT9joMy241x+gLb0SfNrVR0Kd3GyPyU5HXRmXvjWDj2h2RHzAsgxFqPGez4hL+EmbjZiYSg==
|
||||||
|
|
||||||
"@nodelib/fs.scandir@2.1.5":
|
"@nodelib/fs.scandir@2.1.5":
|
||||||
version "2.1.5"
|
version "2.1.5"
|
||||||
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
|
resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
|
||||||
|
|
Loading…
Reference in a new issue