From d6b1b3ca1706d53de4a4a4c7a38c8f65d7d80d7d Mon Sep 17 00:00:00 2001 From: Daan Vanden Bosch Date: Fri, 13 Sep 2019 21:20:26 +0200 Subject: [PATCH] Added GitHub link. --- src/application/gui/NavigationView.css | 18 ++++++++++ src/application/gui/NavigationView.ts | 15 ++++++++- src/core/gui/dom.ts | 46 ++++++++++++++++++++------ src/index.ts | 1 + 4 files changed, 69 insertions(+), 11 deletions(-) diff --git a/src/application/gui/NavigationView.css b/src/application/gui/NavigationView.css index cd7bebc6..624b2475 100644 --- a/src/application/gui/NavigationView.css +++ b/src/application/gui/NavigationView.css @@ -6,3 +6,21 @@ background-color: hsl(0, 0%, 10%); border-bottom: solid 2px var(--bg-color); } + +.application_NavigationView_spacer { + flex: 1; +} + +.application_NavigationView_github { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 30px; + font-size: 16px; + color: var(--control-text-color); +} + +.application_NavigationView_github:hover { + color: var(--control-text-color-hover); +} diff --git a/src/application/gui/NavigationView.ts b/src/application/gui/NavigationView.ts index eb393d55..9f6d5b23 100644 --- a/src/application/gui/NavigationView.ts +++ b/src/application/gui/NavigationView.ts @@ -1,4 +1,4 @@ -import { el } from "../../core/gui/dom"; +import { el, icon, Icon } from "../../core/gui/dom"; import "./NavigationView.css"; import { gui_store, GuiTool } from "../../core/stores/GuiStore"; import { Widget } from "../../core/gui/Widget"; @@ -27,6 +27,19 @@ export class NavigationView extends Widget { this.element.append(button.element); } + this.element.append(el.div({ class: "application_NavigationView_spacer" })); + + this.element.append( + el.a( + { + class: "application_NavigationView_github", + href: "https://github.com/DaanVandenBosch/phantasmal-world", + title: "GitHub", + }, + icon(Icon.GitHub), + ), + ); + this.mark_tool_button(gui_store.tool.val); this.disposable(gui_store.tool.observe(({ value }) => this.mark_tool_button(value))); } diff --git a/src/core/gui/dom.ts b/src/core/gui/dom.ts index 757a0347..208a3138 100644 --- a/src/core/gui/dom.ts +++ b/src/core/gui/dom.ts @@ -34,6 +34,24 @@ export const el = { ...children: HTMLElement[] ): HTMLHeadingElement => create_element("h2", attributes, ...children), + a: ( + attributes?: { + class?: string; + href?: string; + title?: string; + }, + ...children: HTMLElement[] + ): HTMLAnchorElement => { + const element = create_element("a", attributes, ...children); + + if (attributes && attributes.href && attributes.href.trimLeft().startsWith("http")) { + element.target = "_blank"; + element.rel = "noopener noreferrer"; + } + + return element; + }, + table: (attributes?: {}, ...children: HTMLElement[]): HTMLTableElement => create_element("table", attributes, ...children), @@ -69,16 +87,20 @@ export function create_element( class?: string; tab_index?: number; text?: string; + title?: string; + href?: string; data?: { [key: string]: string }; col_span?: number; }, ...children: HTMLElement[] ): T { - const element = document.createElement(tag_name) as HTMLTableCellElement; + const element = document.createElement(tag_name) as (HTMLTableCellElement & HTMLAnchorElement); if (attributes) { if (attributes.class) element.className = attributes.class; if (attributes.text) element.textContent = attributes.text; + if (attributes.title) element.title = attributes.title; + if (attributes.href) element.href = attributes.href; if (attributes.data) { for (const [key, val] of Object.entries(attributes.data)) { @@ -113,6 +135,7 @@ export enum Icon { Undo, Redo, Remove, + GitHub, } export function icon(icon: Icon): HTMLElement { @@ -120,32 +143,35 @@ export function icon(icon: Icon): HTMLElement { switch (icon) { case Icon.File: - icon_str = "fa-file"; + icon_str = "fas fa-file"; break; case Icon.NewFile: - icon_str = "fa-file-medical"; + icon_str = "fas fa-file-medical"; break; case Icon.Save: - icon_str = "fa-save"; + icon_str = "fas fa-save"; break; case Icon.TriangleUp: - icon_str = "fa-caret-up"; + icon_str = "fas fa-caret-up"; break; case Icon.TriangleDown: - icon_str = "fa-caret-down"; + icon_str = "fas fa-caret-down"; break; case Icon.Undo: - icon_str = "fa-undo"; + icon_str = "fas fa-undo"; break; case Icon.Redo: - icon_str = "fa-redo"; + icon_str = "fas fa-redo"; break; case Icon.Remove: - icon_str = "fa-trash-alt"; + icon_str = "fas fa-trash-alt"; + break; + case Icon.GitHub: + icon_str = "fab fa-github"; break; } - return el.span({ class: `fas ${icon_str}` }); + return el.span({ class: icon_str }); } export function section_id_icon(section_id: SectionId, options?: { size?: number }): HTMLElement { diff --git a/src/index.ts b/src/index.ts index a2775db9..db61b204 100644 --- a/src/index.ts +++ b/src/index.ts @@ -6,6 +6,7 @@ import Logger from "js-logger"; import "@fortawesome/fontawesome-free/js/fontawesome"; import "@fortawesome/fontawesome-free/js/solid"; import "@fortawesome/fontawesome-free/js/regular"; +import "@fortawesome/fontawesome-free/js/brands"; Logger.useDefaults({ defaultLevel: (Logger as any)[process.env["LOG_LEVEL"] || "OFF"],