abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-07 01:15:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into cleanup

Browse Source
This commit is contained in:
bree
2021-07-04 21:06:30 -04:00
parent a4051330a3 b19479f1b1
commit 3c2a85a3e4
50 changed files with 686 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/context/Locale.tsx
View File

@@ -43,7 +43,6 @@ export enum Language {
PIRATE = "pr",
BOTTOM = "bottom",
PIGLATIN = "piglatin",
HARDCORE = "hardcore",
}
export interface LanguageEntry {
@@ -107,13 +106,6 @@ export const Languages: { [key in Language]: LanguageEntry } = {
dayjs: "en-gb",
alt: true
},
hardcore: {
display: "Hardcore Mode",
emoji: "🔥",
i18n: "hardcore",
dayjs: "en-gb",
alt: true
},
};
interface Props {
@@ -126,8 +118,10 @@ function Locale({ children, locale }: Props) {
const [defns, setDefinition] = useState<Record<string, unknown>>(definition);
const lang = Languages[locale];
// TOOD: clean this up and use the built in Intl API
function transformLanguage(obj: { [key: string]: any }) {
// TODO: clean this up and use the built in Intl API
function transformLanguage(source: { [key: string]: any }) {
const obj = defaultsDeep(source, definition);
const dayjs = obj.dayjs;
const defaults = dayjs.defaults;
@@ -151,23 +145,16 @@ function Locale({ children, locale }: Props) {
useEffect(() => {
if (locale === "en") {
transformLanguage(definition);
setDefinition(definition);
const defn = transformLanguage(definition);
setDefinition(defn);
dayjs.locale("en");
dayjs.updateLocale('en', { calendar: definition.dayjs });
return;
}
if (lang.i18n === "hardcore") {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
setDefinition({});
dayjs.updateLocale('en', { calendar: defn.dayjs });
return;
}
import(`../../external/lang/${lang.i18n}.json`).then(
async (lang_file) => {
const defn = lang_file.default;
transformLanguage(defn);
const defn = transformLanguage(lang_file.default);
const target = lang.dayjs ?? lang.i18n;
const dayjs_locale = await import(`../../node_modules/dayjs/esm/locale/${target}.js`);
@@ -176,7 +163,7 @@ function Locale({ children, locale }: Props) {
}
dayjs.locale(dayjs_locale.default);
setDefinition(defaultsDeep(defn, definition));
setDefinition(defn);
}
);
}, [locale, lang]);

166
src/context/Theme.tsx
View File

@@ -33,18 +33,161 @@ export type Variables =
| "status-invisible"
| "sidebar-active";
export type Fonts = 'Open Sans' | 'Inter' | 'Atkinson Hyperlegible' | 'Roboto' | 'Noto Sans' | 'Lato' | 'Bree Serif' | 'Montserrat' | 'Poppins' | 'Raleway' | 'Ubuntu' | 'Comic Neue';
export type MonoscapeFonts = 'Fira Code' | 'Roboto Mono' | 'Source Code Pro' | 'Space Mono' | 'Ubuntu Mono';
export type Theme = {
[variable in Variables]: string;
} & {
light?: boolean;
font?: Fonts;
css?: string;
monoscapeFont?: MonoscapeFonts;
};
export interface ThemeOptions {
preset?: string;
ligatures?: boolean;
custom?: Partial<Theme>;
}
// import aaa from "@fontsource/open-sans/300.css?raw";
// console.info(aaa);
export const FONTS: Record<Fonts, { name: string, load: () => void }> = {
"Open Sans": {
name: "Open Sans",
load: async () => {
await import("@fontsource/open-sans/300.css");
await import("@fontsource/open-sans/400.css");
await import("@fontsource/open-sans/600.css");
await import("@fontsource/open-sans/700.css");
await import("@fontsource/open-sans/400-italic.css");
}
},
Inter: {
name: "Inter",
load: async () => {
await import("@fontsource/inter/300.css");
await import("@fontsource/inter/400.css");
await import("@fontsource/inter/600.css");
await import("@fontsource/inter/700.css");
}
},
"Atkinson Hyperlegible": {
name: "Atkinson Hyperlegible",
load: async () => {
await import("@fontsource/atkinson-hyperlegible/400.css");
await import("@fontsource/atkinson-hyperlegible/700.css");
await import("@fontsource/atkinson-hyperlegible/400-italic.css");
}
},
"Roboto": {
name: "Roboto",
load: async () => {
await import("@fontsource/roboto/400.css");
await import("@fontsource/roboto/700.css");
await import("@fontsource/roboto/400-italic.css");
}
},
"Noto Sans": {
name: "Noto Sans",
load: async () => {
await import("@fontsource/noto-sans/400.css");
await import("@fontsource/noto-sans/700.css");
await import("@fontsource/noto-sans/400-italic.css");
}
},
"Bree Serif": {
name: "Bree Serif",
load: () => import("@fontsource/bree-serif/400.css")
},
"Lato": {
name: "Lato",
load: async () => {
await import("@fontsource/lato/300.css");
await import("@fontsource/lato/400.css");
await import("@fontsource/lato/700.css");
await import("@fontsource/lato/400-italic.css");
}
},
"Montserrat": {
name: "Montserrat",
load: async () => {
await import("@fontsource/montserrat/300.css");
await import("@fontsource/montserrat/400.css");
await import("@fontsource/montserrat/600.css");
await import("@fontsource/montserrat/700.css");
await import("@fontsource/montserrat/400-italic.css");
}
},
"Poppins": {
name: "Poppins",
load: async () => {
await import("@fontsource/poppins/300.css");
await import("@fontsource/poppins/400.css");
await import("@fontsource/poppins/600.css");
await import("@fontsource/poppins/700.css");
await import("@fontsource/poppins/400-italic.css");
}
},
"Raleway": {
name: "Raleway",
load: async () => {
await import("@fontsource/raleway/300.css");
await import("@fontsource/raleway/400.css");
await import("@fontsource/raleway/600.css");
await import("@fontsource/raleway/700.css");
await import("@fontsource/raleway/400-italic.css");
}
},
"Ubuntu": {
name: "Ubuntu",
load: async () => {
await import("@fontsource/ubuntu/300.css");
await import("@fontsource/ubuntu/400.css");
await import("@fontsource/ubuntu/500.css");
await import("@fontsource/ubuntu/700.css");
await import("@fontsource/ubuntu/400-italic.css");
}
},
"Comic Neue": {
name: "Comic Neue",
load: async () => {
await import("@fontsource/comic-neue/300.css");
await import("@fontsource/comic-neue/400.css");
await import("@fontsource/comic-neue/700.css");
await import("@fontsource/comic-neue/400-italic.css");
}
}
};
export const MONOSCAPE_FONTS: Record<MonoscapeFonts, { name: string, load: () => void }> = {
"Fira Code": {
name: "Fira Code",
load: () => import("@fontsource/fira-code/400.css")
},
"Roboto Mono": {
name: "Roboto Mono",
load: () => import("@fontsource/roboto-mono/400.css")
},
"Source Code Pro": {
name: "Source Code Pro",
load: () => import("@fontsource/source-code-pro/400.css")
},
"Space Mono": {
name: "Space Mono",
load: () => import("@fontsource/space-mono/400.css")
},
"Ubuntu Mono": {
name: "Ubuntu Mono",
load: () => import("@fontsource/ubuntu-mono/400.css")
}
};
export const FONT_KEYS = Object.keys(FONTS).sort();
export const MONOSCAPE_FONT_KEYS = Object.keys(MONOSCAPE_FONTS).sort();
// Generated from https://gitlab.insrt.uk/revolt/community/themes
export const PRESETS: Record<string, Theme> = {
light: {
@@ -124,15 +267,32 @@ interface Props {
options?: ThemeOptions;
}
function Theme(props: Props) {
function Theme({ children, options }: Props) {
const theme: Theme = {
...PRESETS["dark"],
...PRESETS[props.options?.preset ?? ''],
...props.options?.custom
};
const root = document.documentElement.style;
useEffect(() => {
const resize = () => document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`);
const font = theme.font ?? 'Inter';
root.setProperty('--font', `"${font}"`);
FONTS[font].load();
}, [ theme.font ]);
useEffect(() => {
const font = theme.monoscapeFont ?? 'Fira Code';
root.setProperty('--monoscape-font', `"${font}"`);
MONOSCAPE_FONTS[font].load();
}, [ theme.monoscapeFont ]);
useEffect(() => {
root.setProperty('--ligatures', options?.ligatures ? 'normal' : 'none');
}, [ options?.ligatures ]);
useEffect(() => {
const resize = () => root.setProperty('--app-height', `${window.innerHeight}px`);
resize();
window.addEventListener('resize', resize);
@@ -155,7 +315,7 @@ function Theme(props: Props) {
{theme.css && (
<style dangerouslySetInnerHTML={{ __html: theme.css }} />
)}
{props.children}
{ children }
</ThemeContext.Provider>
);
}

2
src/context/intermediate/modals/Prompt.module.scss
View File

@@ -7,7 +7,7 @@
user-select: all;
font-size: 1.4em;
text-align: center;
font-family: "Fira Mono";
font-family: var(--monoscape-font);
}
}

5
src/context/revoltjs/FileUploads.tsx
View File

@@ -8,7 +8,8 @@ import { useContext, useEffect, useState } from "preact/hooks";
import Preloader from "../../components/ui/Preloader";
import { determineFileSize } from "../../lib/fileSize";
import IconButton from '../../components/ui/IconButton';
import { Edit, Plus, X, XCircle } from "@styled-icons/boxicons-regular";
import { Plus, X, XCircle } from "@styled-icons/boxicons-regular";
import { Pencil } from "@styled-icons/boxicons-solid";
import { useIntermediate } from "../intermediate/Intermediate";
type Props = {
@@ -190,7 +191,7 @@ export function FileUploader(props: Props) {
<Preloader type="ring" />
</div> :
<div className={styles.edit}>
<Edit size={30} />
<Pencil size={30} />
</div> }
</div>
<div className={styles.modify}>