From 95262b49ebbe781242ab3702fc4acf9f0874b0db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wladislav=20=E3=83=B4=E3=83=A9=E3=83=89=20Artsimovich?= Date: Thu, 28 Nov 2024 19:12:05 +0900 Subject: [PATCH 1/3] Port of Sakura CSS --- src/configuration-component.ts | 91 ++++++++++++------- .../themes/sakura-vader/button.scss | 21 +++++ .../themes/sakura-vader/index.scss | 19 ++++ .../themes/sakura-vader/sakura-vader.scss | 13 +++ .../themes/sakura-vader/syntax.scss | 1 + .../themes/sakura-vader/utterances.scss | 21 +++++ .../themes/sakura-vader/variables.scss | 22 +++++ src/stylesheets/themes/sakura/button.scss | 21 +++++ src/stylesheets/themes/sakura/index.scss | 19 ++++ src/stylesheets/themes/sakura/sakura.scss | 11 +++ src/stylesheets/themes/sakura/syntax.scss | 1 + src/stylesheets/themes/sakura/utterances.scss | 21 +++++ src/stylesheets/themes/sakura/variables.scss | 22 +++++ 13 files changed, 249 insertions(+), 34 deletions(-) create mode 100644 src/stylesheets/themes/sakura-vader/button.scss create mode 100644 src/stylesheets/themes/sakura-vader/index.scss create mode 100644 src/stylesheets/themes/sakura-vader/sakura-vader.scss create mode 100644 src/stylesheets/themes/sakura-vader/syntax.scss create mode 100644 src/stylesheets/themes/sakura-vader/utterances.scss create mode 100644 src/stylesheets/themes/sakura-vader/variables.scss create mode 100644 src/stylesheets/themes/sakura/button.scss create mode 100644 src/stylesheets/themes/sakura/index.scss create mode 100644 src/stylesheets/themes/sakura/sakura.scss create mode 100644 src/stylesheets/themes/sakura/syntax.scss create mode 100644 src/stylesheets/themes/sakura/utterances.scss create mode 100644 src/stylesheets/themes/sakura/variables.scss diff --git a/src/configuration-component.ts b/src/configuration-component.ts index f07de40c..44421980 100644 --- a/src/configuration-component.ts +++ b/src/configuration-component.ts @@ -1,4 +1,4 @@ -import { preferredThemeId, preferredTheme } from './preferred-theme'; +import { preferredThemeId, preferredTheme } from "./preferred-theme"; export class ConfigurationComponent { public readonly element: HTMLFormElement; @@ -8,7 +8,7 @@ export class ConfigurationComponent { private readonly theme: HTMLSelectElement; constructor() { - this.element = document.createElement('form'); + this.element = document.createElement("form"); this.element.innerHTML = `

Repository

@@ -138,6 +138,8 @@ export class ConfigurationComponent { + +

Enable Utterances

@@ -151,59 +153,80 @@ export class ConfigurationComponent {

`; - this.element.addEventListener('submit', event => event.preventDefault()); - this.element.action = 'javascript:'; + this.element.addEventListener("submit", (event) => event.preventDefault()); + this.element.action = "javascript:"; - this.script = this.element.querySelector('#script') as HTMLDivElement; + this.script = this.element.querySelector("#script") as HTMLDivElement; - this.repo = this.element.querySelector('#repo') as HTMLInputElement; + this.repo = this.element.querySelector("#repo") as HTMLInputElement; - this.label = this.element.querySelector('#label') as HTMLInputElement; + this.label = this.element.querySelector("#label") as HTMLInputElement; - this.theme = this.element.querySelector('#theme') as HTMLSelectElement; + this.theme = this.element.querySelector("#theme") as HTMLSelectElement; - const themeStylesheet = document.getElementById('theme-stylesheet') as HTMLLinkElement; - this.theme.addEventListener('change', () => { + const themeStylesheet = document.getElementById( + "theme-stylesheet" + ) as HTMLLinkElement; + this.theme.addEventListener("change", () => { let theme = this.theme.value; if (theme === preferredThemeId) { - theme = preferredTheme + theme = preferredTheme; } themeStylesheet.href = `/stylesheets/themes/${theme}/index.css`; const message = { - type: 'set-theme', - theme + type: "set-theme", + theme, }; - const utterances = document.querySelector('iframe')!; + const utterances = document.querySelector("iframe")!; utterances.contentWindow!.postMessage(message, location.origin); }); - const copyButton = this.element.querySelector('#copy-button') as HTMLButtonElement; - copyButton.addEventListener( - 'click', - () => this.copyTextToClipboard(this.script.textContent as string)); + const copyButton = this.element.querySelector( + "#copy-button" + ) as HTMLButtonElement; + copyButton.addEventListener("click", () => + this.copyTextToClipboard(this.script.textContent as string) + ); - this.element.addEventListener('change', () => this.outputConfig()); - this.element.addEventListener('input', () => this.outputConfig()); + this.element.addEventListener("change", () => this.outputConfig()); + this.element.addEventListener("input", () => this.outputConfig()); this.outputConfig(); } private outputConfig() { - const mapping = this.element.querySelector('input[name="mapping"]:checked') as HTMLInputElement; + const mapping = this.element.querySelector( + 'input[name="mapping"]:checked' + ) as HTMLInputElement; let mappingAttr: string; // tslint:disable-next-line:prefer-conditional-expression - if (mapping.value === 'issue-number') { - mappingAttr = this.makeConfigScriptAttribute('issue-number', '[ENTER ISSUE NUMBER HERE]'); - } else if (mapping.value === 'specific-term') { - mappingAttr = this.makeConfigScriptAttribute('issue-term', '[ENTER TERM HERE]'); + if (mapping.value === "issue-number") { + mappingAttr = this.makeConfigScriptAttribute( + "issue-number", + "[ENTER ISSUE NUMBER HERE]" + ); + } else if (mapping.value === "specific-term") { + mappingAttr = this.makeConfigScriptAttribute( + "issue-term", + "[ENTER TERM HERE]" + ); } else { - mappingAttr = this.makeConfigScriptAttribute('issue-term', mapping.value); + mappingAttr = this.makeConfigScriptAttribute("issue-term", mapping.value); } this.script.innerHTML = this.makeConfigScript( - this.makeConfigScriptAttribute('repo', this.repo.value === '' ? '[ENTER REPO HERE]' : this.repo.value) + '\n' + - mappingAttr + '\n' + - (this.label.value ? this.makeConfigScriptAttribute('label', this.label.value) + '\n' : '') + - this.makeConfigScriptAttribute('theme', this.theme.value) + '\n' + - this.makeConfigScriptAttribute('crossorigin', 'anonymous')); + this.makeConfigScriptAttribute( + "repo", + this.repo.value === "" ? "[ENTER REPO HERE]" : this.repo.value + ) + + "\n" + + mappingAttr + + "\n" + + (this.label.value + ? this.makeConfigScriptAttribute("label", this.label.value) + "\n" + : "") + + this.makeConfigScriptAttribute("theme", this.theme.value) + + "\n" + + this.makeConfigScriptAttribute("crossorigin", "anonymous") + ); } private makeConfigScriptAttribute(name: string, value: string) { @@ -217,16 +240,16 @@ export class ConfigurationComponent { } private copyTextToClipboard(text: string) { - const textArea = document.createElement('textarea'); + const textArea = document.createElement("textarea"); // tslint:disable-next-line:max-line-length textArea.style.cssText = `position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;background:transparent`; textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { - document.execCommand('copy'); + document.execCommand("copy"); // tslint:disable-next-line:no-empty - } catch (err) { } + } catch (err) {} document.body.removeChild(textArea); } } diff --git a/src/stylesheets/themes/sakura-vader/button.scss b/src/stylesheets/themes/sakura-vader/button.scss new file mode 100644 index 00000000..4aa8ac0c --- /dev/null +++ b/src/stylesheets/themes/sakura-vader/button.scss @@ -0,0 +1,21 @@ +@import "./variables"; + +.btn-primary { + background-color: $color-blossom; + border: 1px solid $color-blossom; + color: $color-bg; + + .octicon{ + color: $color-bg; + } +} + +.btn-primary:hover { + background-color: $color-fade; + color: $color-bg; + outline: 0; +} + +.btn-primary:disabled { + opacity: .5; +} \ No newline at end of file diff --git a/src/stylesheets/themes/sakura-vader/index.scss b/src/stylesheets/themes/sakura-vader/index.scss new file mode 100644 index 00000000..fea9ac92 --- /dev/null +++ b/src/stylesheets/themes/sakura-vader/index.scss @@ -0,0 +1,19 @@ +@import "./variables"; +@import "../../index"; +@import "./syntax"; +@import "./button.scss"; + +a { + text-decoration: none; + color: $color-blossom; + + &:visited { + color: darken($color-blossom, 10%); + } + + &:hover { + text-decoration: none; + color: $color-fade; + border-bottom: 2px solid $color-text; + } +} \ No newline at end of file diff --git a/src/stylesheets/themes/sakura-vader/sakura-vader.scss b/src/stylesheets/themes/sakura-vader/sakura-vader.scss new file mode 100644 index 00000000..49e3f239 --- /dev/null +++ b/src/stylesheets/themes/sakura-vader/sakura-vader.scss @@ -0,0 +1,13 @@ +$color-force: #DA4453; +$color-blossom: lighten($color-force, 20%); +$color-fade: $color-force; + +$color-bg: #120c0e; +$color-bg-alt: #40363a; + +/* $color-text: #dedce5; */ +$color-text: #d9d8dc; +$font-size-base: 1.8rem; + +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; diff --git a/src/stylesheets/themes/sakura-vader/syntax.scss b/src/stylesheets/themes/sakura-vader/syntax.scss new file mode 100644 index 00000000..6fd1d451 --- /dev/null +++ b/src/stylesheets/themes/sakura-vader/syntax.scss @@ -0,0 +1 @@ +@import "github-syntax-dark/lib/github-dark"; diff --git a/src/stylesheets/themes/sakura-vader/utterances.scss b/src/stylesheets/themes/sakura-vader/utterances.scss new file mode 100644 index 00000000..de2b9d12 --- /dev/null +++ b/src/stylesheets/themes/sakura-vader/utterances.scss @@ -0,0 +1,21 @@ +@import "./variables"; +@import "../../utterances"; +@import "./syntax"; +@import "./button.scss"; + +.timeline-comment { + a { + text-decoration: none; + color: $color-blossom; + + &:visited { + color: darken($color-blossom, 10%); + } + + &:hover { + text-decoration: none; + color: $color-fade; + border-bottom: 2px solid $color-text; + } + } +} \ No newline at end of file diff --git a/src/stylesheets/themes/sakura-vader/variables.scss b/src/stylesheets/themes/sakura-vader/variables.scss new file mode 100644 index 00000000..ada62363 --- /dev/null +++ b/src/stylesheets/themes/sakura-vader/variables.scss @@ -0,0 +1,22 @@ +@import "./sakura-vader.scss"; + +/* Icy-Dark overwrites */ + +$gray-000: $color-blossom; +$gray-100: $color-blossom; +$gray-200: $color-blossom; +$gray-300: $color-blossom; +$gray-400: $color-text; +$gray-600: $color-text; +$gray-700: $color-text; +$bg-white: $color-bg; +$bg-gray: $color-bg-alt; +$bg-gray-light: darken($bg-gray, 5%); +$border-gray: $color-bg-alt; +$border-gray-dark: $border-gray; +$text-gray: $color-text; +$text-gray-dark: $color-text; +$text-blue: $color-blossom; +$bg-blue-light: $color-blossom; +$black-fade-15: rgba(#fff, 0.15); +$black-fade-30: rgba(#fff, 0.3); \ No newline at end of file diff --git a/src/stylesheets/themes/sakura/button.scss b/src/stylesheets/themes/sakura/button.scss new file mode 100644 index 00000000..4aa8ac0c --- /dev/null +++ b/src/stylesheets/themes/sakura/button.scss @@ -0,0 +1,21 @@ +@import "./variables"; + +.btn-primary { + background-color: $color-blossom; + border: 1px solid $color-blossom; + color: $color-bg; + + .octicon{ + color: $color-bg; + } +} + +.btn-primary:hover { + background-color: $color-fade; + color: $color-bg; + outline: 0; +} + +.btn-primary:disabled { + opacity: .5; +} \ No newline at end of file diff --git a/src/stylesheets/themes/sakura/index.scss b/src/stylesheets/themes/sakura/index.scss new file mode 100644 index 00000000..fea9ac92 --- /dev/null +++ b/src/stylesheets/themes/sakura/index.scss @@ -0,0 +1,19 @@ +@import "./variables"; +@import "../../index"; +@import "./syntax"; +@import "./button.scss"; + +a { + text-decoration: none; + color: $color-blossom; + + &:visited { + color: darken($color-blossom, 10%); + } + + &:hover { + text-decoration: none; + color: $color-fade; + border-bottom: 2px solid $color-text; + } +} \ No newline at end of file diff --git a/src/stylesheets/themes/sakura/sakura.scss b/src/stylesheets/themes/sakura/sakura.scss new file mode 100644 index 00000000..efa698dc --- /dev/null +++ b/src/stylesheets/themes/sakura/sakura.scss @@ -0,0 +1,11 @@ +$color-blossom: #1d7484; +$color-fade: #982c61; + +$color-bg: #f9f9f9; +$color-bg-alt: #f1f1f1; + +$color-text: #4a4a4a; +$font-size-base: 1.8rem; + +$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; +$font-family-heading: $font-family-base; \ No newline at end of file diff --git a/src/stylesheets/themes/sakura/syntax.scss b/src/stylesheets/themes/sakura/syntax.scss new file mode 100644 index 00000000..6fd1d451 --- /dev/null +++ b/src/stylesheets/themes/sakura/syntax.scss @@ -0,0 +1 @@ +@import "github-syntax-dark/lib/github-dark"; diff --git a/src/stylesheets/themes/sakura/utterances.scss b/src/stylesheets/themes/sakura/utterances.scss new file mode 100644 index 00000000..de2b9d12 --- /dev/null +++ b/src/stylesheets/themes/sakura/utterances.scss @@ -0,0 +1,21 @@ +@import "./variables"; +@import "../../utterances"; +@import "./syntax"; +@import "./button.scss"; + +.timeline-comment { + a { + text-decoration: none; + color: $color-blossom; + + &:visited { + color: darken($color-blossom, 10%); + } + + &:hover { + text-decoration: none; + color: $color-fade; + border-bottom: 2px solid $color-text; + } + } +} \ No newline at end of file diff --git a/src/stylesheets/themes/sakura/variables.scss b/src/stylesheets/themes/sakura/variables.scss new file mode 100644 index 00000000..8f43b09c --- /dev/null +++ b/src/stylesheets/themes/sakura/variables.scss @@ -0,0 +1,22 @@ +@import "./sakura.scss"; + +/* Icy-Dark overwrites */ + +$gray-000: $color-blossom; +$gray-100: $color-blossom; +$gray-200: $color-blossom; +$gray-300: $color-blossom; +$gray-400: $color-text; +$gray-600: $color-text; +$gray-700: $color-text; +$bg-white: $color-bg; +$bg-gray: $color-bg-alt; +$bg-gray-light: darken($bg-gray, 5%); +$border-gray: $color-bg-alt; +$border-gray-dark: $border-gray; +$text-gray: $color-text; +$text-gray-dark: $color-text; +$text-blue: $color-blossom; +$bg-blue-light: $color-blossom; +$black-fade-15: rgba(#fff, 0.15); +$black-fade-30: rgba(#fff, 0.3); \ No newline at end of file From f2888938fcfc959b4a2b4326c5409b323ec0b76a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wladislav=20=E3=83=B4=E3=83=A9=E3=83=89=20Artsimovich?= Date: Thu, 28 Nov 2024 19:22:41 +0900 Subject: [PATCH 2/3] Use Bright Syntax for Bright theme --- src/stylesheets/themes/sakura/syntax.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stylesheets/themes/sakura/syntax.scss b/src/stylesheets/themes/sakura/syntax.scss index 6fd1d451..c876b569 100644 --- a/src/stylesheets/themes/sakura/syntax.scss +++ b/src/stylesheets/themes/sakura/syntax.scss @@ -1 +1 @@ -@import "github-syntax-dark/lib/github-dark"; +@import "github-syntax-light/lib/github-light"; \ No newline at end of file From 32fc61c57ba62c9f7ae8e0eae5922570f15c6d98 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wladislav=20=E3=83=B4=E3=83=A9=E3=83=89=20Artsimovich?= Date: Thu, 28 Nov 2024 19:27:00 +0900 Subject: [PATCH 3/3] Revert automatic formatting --- src/configuration-component.ts | 89 +++++++++++++--------------------- 1 file changed, 34 insertions(+), 55 deletions(-) diff --git a/src/configuration-component.ts b/src/configuration-component.ts index 44421980..5f84d482 100644 --- a/src/configuration-component.ts +++ b/src/configuration-component.ts @@ -1,4 +1,4 @@ -import { preferredThemeId, preferredTheme } from "./preferred-theme"; +import { preferredThemeId, preferredTheme } from './preferred-theme'; export class ConfigurationComponent { public readonly element: HTMLFormElement; @@ -8,7 +8,7 @@ export class ConfigurationComponent { private readonly theme: HTMLSelectElement; constructor() { - this.element = document.createElement("form"); + this.element = document.createElement('form'); this.element.innerHTML = `

Repository

@@ -153,80 +153,59 @@ export class ConfigurationComponent {

`; - this.element.addEventListener("submit", (event) => event.preventDefault()); - this.element.action = "javascript:"; + this.element.addEventListener('submit', event => event.preventDefault()); + this.element.action = 'javascript:'; - this.script = this.element.querySelector("#script") as HTMLDivElement; + this.script = this.element.querySelector('#script') as HTMLDivElement; - this.repo = this.element.querySelector("#repo") as HTMLInputElement; + this.repo = this.element.querySelector('#repo') as HTMLInputElement; - this.label = this.element.querySelector("#label") as HTMLInputElement; + this.label = this.element.querySelector('#label') as HTMLInputElement; - this.theme = this.element.querySelector("#theme") as HTMLSelectElement; + this.theme = this.element.querySelector('#theme') as HTMLSelectElement; - const themeStylesheet = document.getElementById( - "theme-stylesheet" - ) as HTMLLinkElement; - this.theme.addEventListener("change", () => { + const themeStylesheet = document.getElementById('theme-stylesheet') as HTMLLinkElement; + this.theme.addEventListener('change', () => { let theme = this.theme.value; if (theme === preferredThemeId) { - theme = preferredTheme; + theme = preferredTheme } themeStylesheet.href = `/stylesheets/themes/${theme}/index.css`; const message = { - type: "set-theme", - theme, + type: 'set-theme', + theme }; - const utterances = document.querySelector("iframe")!; + const utterances = document.querySelector('iframe')!; utterances.contentWindow!.postMessage(message, location.origin); }); - const copyButton = this.element.querySelector( - "#copy-button" - ) as HTMLButtonElement; - copyButton.addEventListener("click", () => - this.copyTextToClipboard(this.script.textContent as string) - ); + const copyButton = this.element.querySelector('#copy-button') as HTMLButtonElement; + copyButton.addEventListener( + 'click', + () => this.copyTextToClipboard(this.script.textContent as string)); - this.element.addEventListener("change", () => this.outputConfig()); - this.element.addEventListener("input", () => this.outputConfig()); + this.element.addEventListener('change', () => this.outputConfig()); + this.element.addEventListener('input', () => this.outputConfig()); this.outputConfig(); } private outputConfig() { - const mapping = this.element.querySelector( - 'input[name="mapping"]:checked' - ) as HTMLInputElement; + const mapping = this.element.querySelector('input[name="mapping"]:checked') as HTMLInputElement; let mappingAttr: string; // tslint:disable-next-line:prefer-conditional-expression - if (mapping.value === "issue-number") { - mappingAttr = this.makeConfigScriptAttribute( - "issue-number", - "[ENTER ISSUE NUMBER HERE]" - ); - } else if (mapping.value === "specific-term") { - mappingAttr = this.makeConfigScriptAttribute( - "issue-term", - "[ENTER TERM HERE]" - ); + if (mapping.value === 'issue-number') { + mappingAttr = this.makeConfigScriptAttribute('issue-number', '[ENTER ISSUE NUMBER HERE]'); + } else if (mapping.value === 'specific-term') { + mappingAttr = this.makeConfigScriptAttribute('issue-term', '[ENTER TERM HERE]'); } else { - mappingAttr = this.makeConfigScriptAttribute("issue-term", mapping.value); + mappingAttr = this.makeConfigScriptAttribute('issue-term', mapping.value); } this.script.innerHTML = this.makeConfigScript( - this.makeConfigScriptAttribute( - "repo", - this.repo.value === "" ? "[ENTER REPO HERE]" : this.repo.value - ) + - "\n" + - mappingAttr + - "\n" + - (this.label.value - ? this.makeConfigScriptAttribute("label", this.label.value) + "\n" - : "") + - this.makeConfigScriptAttribute("theme", this.theme.value) + - "\n" + - this.makeConfigScriptAttribute("crossorigin", "anonymous") - ); + this.makeConfigScriptAttribute('repo', this.repo.value === '' ? '[ENTER REPO HERE]' : this.repo.value) + '\n' + + mappingAttr + '\n' + + (this.label.value ? this.makeConfigScriptAttribute('label', this.label.value) + '\n' : '') + + this.makeConfigScriptAttribute('theme', this.theme.value) + '\n' + + this.makeConfigScriptAttribute('crossorigin', 'anonymous')); } private makeConfigScriptAttribute(name: string, value: string) { @@ -240,16 +219,16 @@ export class ConfigurationComponent { } private copyTextToClipboard(text: string) { - const textArea = document.createElement("textarea"); + const textArea = document.createElement('textarea'); // tslint:disable-next-line:max-line-length textArea.style.cssText = `position:fixed;top:0;left:0;width:2em;height:2em;padding:0;border:none;outline:none;box-shadow:none;background:transparent`; textArea.value = text; document.body.appendChild(textArea); textArea.select(); try { - document.execCommand("copy"); + document.execCommand('copy'); // tslint:disable-next-line:no-empty - } catch (err) {} + } catch (err) { } document.body.removeChild(textArea); } }