From 65234e17dd69230da21a37a6d725ea949beee4a8 Mon Sep 17 00:00:00 2001 From: Zef Hemel Date: Fri, 22 Jul 2022 13:44:28 +0200 Subject: [PATCH] Prep for mattermost plugin --- mattermost-plugin/server/.gitignore | 2 ++ mattermost-plugin/webapp/src/styles.scss | 17 ++++++++++++++ packages/web/boot.ts | 2 +- packages/web/components/status_bar.tsx | 2 +- packages/web/components/top_bar.tsx | 2 +- packages/web/editor.tsx | 18 ++++++++------ packages/web/index.html | 12 +++++++++- packages/web/navigator.ts | 14 ++++++++--- packages/web/styles/constants.scss | 2 ++ packages/web/styles/editor.scss | 2 +- packages/web/styles/filter_box.scss | 4 +++- packages/web/styles/main.scss | 30 ++++++++---------------- 12 files changed, 71 insertions(+), 36 deletions(-) create mode 100644 mattermost-plugin/server/.gitignore create mode 100644 mattermost-plugin/webapp/src/styles.scss diff --git a/mattermost-plugin/server/.gitignore b/mattermost-plugin/server/.gitignore new file mode 100644 index 0000000..6fad1a4 --- /dev/null +++ b/mattermost-plugin/server/.gitignore @@ -0,0 +1,2 @@ +coverage.txt +dist diff --git a/mattermost-plugin/webapp/src/styles.scss b/mattermost-plugin/webapp/src/styles.scss new file mode 100644 index 0000000..820c43b --- /dev/null +++ b/mattermost-plugin/webapp/src/styles.scss @@ -0,0 +1,17 @@ +h1, +h2, +h3, +h4, +h5, +h6, +.h1, +.h2, +.h3, +.h4, +.h5, +.h6 { + font-family: revert; + font-weight: revert; + line-height: revert; + color: revert; +} diff --git a/packages/web/boot.ts b/packages/web/boot.ts index dcc2626..74eaf52 100644 --- a/packages/web/boot.ts +++ b/packages/web/boot.ts @@ -49,7 +49,7 @@ safeRun(async () => { // localStorage.setItem("lastRemoteSync", "" + syncer.primaryLastSync); // console.log("Done!"); // }; - let editor = new Editor(serverSpace, document.getElementById("root")!); + let editor = new Editor(serverSpace, document.getElementById("sb-root")!, ""); await editor.init(); // @ts-ignore window.editor = editor; diff --git a/packages/web/components/status_bar.tsx b/packages/web/components/status_bar.tsx index 3a471c3..d9a14cb 100644 --- a/packages/web/components/status_bar.tsx +++ b/packages/web/components/status_bar.tsx @@ -10,7 +10,7 @@ export function StatusBar({ editorView }: { editorView?: EditorView }) { readingTime = util.readingTime(wordCount); } return ( -
+
{wordCount} words | {readingTime} min
diff --git a/packages/web/components/top_bar.tsx b/packages/web/components/top_bar.tsx index 578e7c4..96e2482 100644 --- a/packages/web/components/top_bar.tsx +++ b/packages/web/components/top_bar.tsx @@ -29,7 +29,7 @@ export function TopBar({ rhs?: React.ReactNode; }) { return ( -
+
{lhs}
diff --git a/packages/web/editor.tsx b/packages/web/editor.tsx index c1e7f08..4c43510 100644 --- a/packages/web/editor.tsx +++ b/packages/web/editor.tsx @@ -114,9 +114,11 @@ export class Editor { }, 1000); private system = new System("client"); private mdExtensions: MDExt[] = []; + urlPrefix: string; - constructor(space: Space, parent: Element) { + constructor(space: Space, parent: Element, urlPrefix: string) { this.space = space; + this.urlPrefix = urlPrefix; this.viewState = initialViewState; this.viewDispatch = () => {}; @@ -143,9 +145,9 @@ export class Editor { this.render(parent); this.editorView = new EditorView({ state: this.createEditorState("", ""), - parent: document.getElementById("editor")!, + parent: document.getElementById("sb-editor")!, }); - this.pageNavigator = new PathPageNavigator(); + this.pageNavigator = new PathPageNavigator(urlPrefix); this.system.registerSyscalls( [], @@ -209,7 +211,9 @@ export class Editor { } }); - let globalModules: any = await (await fetch("/global.plug.json")).json(); + let globalModules: any = await ( + await fetch(`${this.urlPrefix}/global.plug.json`) + ).json(); this.system.on({ plugLoaded: (plug) => { @@ -721,7 +725,7 @@ export class Editor { ) } /> -
+
{!!viewState.showLHS && ( )} -
+
{!!viewState.showRHS && ( {!!viewState.showBHS && ( -
+
Silver Bullet + @@ -11,6 +21,6 @@ -
+
diff --git a/packages/web/navigator.ts b/packages/web/navigator.ts index 0f19717..e7785b5 100644 --- a/packages/web/navigator.ts +++ b/packages/web/navigator.ts @@ -11,8 +11,14 @@ function decodePageUrl(url: string): string { export class PathPageNavigator { navigationResolve?: () => void; + constructor(readonly root: string = "") {} + async navigate(page: string, pos?: number) { - window.history.pushState({ page, pos }, page, `/${encodePageUrl(page)}`); + window.history.pushState( + { page, pos }, + page, + `${this.root}/${encodePageUrl(page)}` + ); window.dispatchEvent( new PopStateEvent("popstate", { state: { page, pos }, @@ -47,7 +53,9 @@ export class PathPageNavigator { } decodeURI(): [string, number] { - let parts = decodeURI(location.pathname).substring(1).split("@"); + let parts = decodeURI( + location.pathname.substring(this.root.length + 1) + ).split("@"); let page = parts.length > 1 ? parts.slice(0, parts.length - 1).join("@") : parts[0]; let pos = parts.length > 1 ? parts[parts.length - 1] : "0"; @@ -63,7 +71,7 @@ export class PathPageNavigator { } getCurrentPos(): number { - console.log("Pos", this.decodeURI()[1]); + // console.log("Pos", this.decodeURI()[1]); return this.decodeURI()[1]; } } diff --git a/packages/web/styles/constants.scss b/packages/web/styles/constants.scss index 8500fc9..fb0505b 100644 --- a/packages/web/styles/constants.scss +++ b/packages/web/styles/constants.scss @@ -1,3 +1,5 @@ $max-editor-width: 800px; $top-bar-height: 55px; $bottom-bar-height: 30px; +$editor-font: "iA-Mono", "Menlo"; +$ui-font: "Arial"; diff --git a/packages/web/styles/editor.scss b/packages/web/styles/editor.scss index fa879ab..3eb931d 100644 --- a/packages/web/styles/editor.scss +++ b/packages/web/styles/editor.scss @@ -10,7 +10,7 @@ padding: 0 20px; .cm-content { - font-family: var(--editor-font); + font-family: $editor-font; margin: auto; max-width: $max-editor-width; } diff --git a/packages/web/styles/filter_box.scss b/packages/web/styles/filter_box.scss index 8958884..250da4e 100644 --- a/packages/web/styles/filter_box.scss +++ b/packages/web/styles/filter_box.scss @@ -1,6 +1,8 @@ +@import "constants"; + .filter-box { position: absolute; - font-family: var(--ui-font); + font-family: $ui-font; margin: auto; max-width: 500px; height: 600px; diff --git a/packages/web/styles/main.scss b/packages/web/styles/main.scss index 1074966..c0e7d45 100644 --- a/packages/web/styles/main.scss +++ b/packages/web/styles/main.scss @@ -30,32 +30,20 @@ font-style: italic; } -:root { +#sb-root { --ident: 18px; - /* --editor-font: "Avenir"; */ - --editor-font: "iA-Mono", "Menlo"; - --ui-font: "Arial"; --top-bar-bg: rgb(41, 41, 41); --highlight-color: #464cfc; } -html, -body { - margin: 0; - height: 100%; - padding: 0; - width: 100%; - overflow: hidden; -} - -#root { +#sb-root { display: flex; flex-direction: column; width: 100%; height: 100%; } -#top { +#sb-top { display: flex; flex-direction: row; z-index: 20; @@ -101,9 +89,10 @@ body { } .current-page { - font-family: var(--ui-font); + font-family: $ui-font; font-weight: bold; flex: 1; + font-size: 28px; overflow: hidden; white-space: nowrap; @@ -127,6 +116,7 @@ body { border: 1px solid #7897d0; border-radius: 3px; margin: 3px; + font-size: 15px; padding: 5px; background-color: #e6e6e6; } @@ -138,7 +128,7 @@ body { } } -#main { +#sb-main { display: flex; flex-direction: row; flex-grow: 1; @@ -158,13 +148,13 @@ body { } } -#editor { +#sb-editor { overflow-y: scroll; flex: 2; height: 100%; } -#bhs { +.bhs { height: 300px; width: 100%; border-top: rgb(193, 193, 193) 1px solid; @@ -182,7 +172,7 @@ body { } } -#status-bar { +#sb-status-bar { height: 40px; line-height: 40px; padding: 0 10px;