From de98f88a83dbf48ef7c2cd59c47a1d7da8e98f57 Mon Sep 17 00:00:00 2001 From: friebetill Date: Fri, 10 Feb 2023 11:21:53 +0800 Subject: [PATCH] Make colors easily adjustable Add prefix to avoid mixing styles. --- src/components/action_line.ts | 4 +- src/components/action_line_button.ts | 2 +- src/components/action_line_divider.ts | 5 +- src/components/differences_view.ts | 12 +++-- src/components/modals/delete_file_modal.ts | 6 +-- src/components/modals/risky_action_modal.ts | 6 +-- styles.css | 59 ++++++++++++--------- 7 files changed, 54 insertions(+), 40 deletions(-) diff --git a/src/components/action_line.ts b/src/components/action_line.ts index 5e16ccb..697b2ed 100644 --- a/src/components/action_line.ts +++ b/src/components/action_line.ts @@ -36,7 +36,9 @@ export class ActionLine { private triggerRebuild: VoidCallback build(container: HTMLDivElement): void { - const actionLine = container.createDiv({ cls: 'flex-row gap-2 py-2' }) + const actionLine = container.createDiv({ + cls: 'flex flex-row gap-1 py-0-5', + }) const hasMinusLines = this.difference.file1Lines.length > 0 const hasPlusLines = this.difference.file2Lines.length > 0 diff --git a/src/components/action_line_button.ts b/src/components/action_line_button.ts index 94774e4..7564398 100644 --- a/src/components/action_line_button.ts +++ b/src/components/action_line_button.ts @@ -12,7 +12,7 @@ export class ActionLineButton { actionLine .createEl('a', { text: this.text, - cls: 'no-decoration text-xxs text-gray', + cls: 'no-decoration text-xxs file-diff__action-line', }) .onClickEvent(this.onClick) } diff --git a/src/components/action_line_divider.ts b/src/components/action_line_divider.ts index 00dc9a7..a21e41d 100644 --- a/src/components/action_line_divider.ts +++ b/src/components/action_line_divider.ts @@ -1,5 +1,8 @@ export class ActionLineDivider { static build(actionLine: HTMLDivElement): void { - actionLine.createEl('span', { text: '|', cls: 'text-xxs text-gray' }) + actionLine.createEl('span', { + text: '|', + cls: 'text-xxs file-diff__action-line', + }) } } diff --git a/src/components/differences_view.ts b/src/components/differences_view.ts index 1e23628..d735e11 100644 --- a/src/components/differences_view.ts +++ b/src/components/differences_view.ts @@ -82,7 +82,9 @@ export class DifferencesView extends ItemView { private build(): void { this.contentEl.empty() - const container = this.contentEl.createDiv({ cls: 'container' }) + const container = this.contentEl.createDiv({ + cls: 'file-diff__container', + }) this.buildLines(container) @@ -117,7 +119,7 @@ export class DifferencesView extends ItemView { container.createDiv({ // Necessary to give the line a height when it's empty. text: preventEmptyString(line), - cls: 'line', + cls: 'file-diff__line', }) i += 1 } @@ -149,7 +151,7 @@ export class DifferencesView extends ItemView { container.createDiv({ // Necessary to give the line a height when it's empty. text: preventEmptyString(line), - cls: 'line bg-turquoise-light', + cls: 'file-diff__line file-diff__top-line__bg', }) } @@ -158,7 +160,7 @@ export class DifferencesView extends ItemView { container.createDiv({ // Necessary to give the line a height when it's empty. text: preventEmptyString(line), - cls: 'line bg-blue-light', + cls: 'file-diff__line file-diff__bottom-line__bg', }) } } @@ -169,7 +171,7 @@ export class DifferencesView extends ItemView { } const containerRect = this.contentEl - .getElementsByClassName('container')[0] + .getElementsByClassName('file-diff__container')[0] .getBoundingClientRect() const elementRect = this.contentEl .getElementsByClassName('difference')[0] diff --git a/src/components/modals/delete_file_modal.ts b/src/components/modals/delete_file_modal.ts index aa2fda9..47e12fc 100644 --- a/src/components/modals/delete_file_modal.ts +++ b/src/components/modals/delete_file_modal.ts @@ -21,7 +21,7 @@ export class DeleteFileModal extends Modal { onOpen(): void { // Counteract gravity pull by moving box up for balanced composition - this.modalEl.addClass('mb-16') + this.modalEl.addClass('mb-20') this.contentEl.createEl('h2', { text: `Delete "${this.file2.name}"?`, @@ -37,12 +37,12 @@ export class DeleteFileModal extends Modal { const buttonContainer = this.contentEl.createDiv('button-container') const cancelButton = buttonContainer.createEl('button', { text: 'Cancel', - cls: 'mr-8', + cls: 'mr-2', }) cancelButton.addEventListener('click', () => this.close()) const deleteButton = buttonContainer.createEl('button', { text: 'Delete', - cls: 'button-danger', + cls: 'file-diff__button-danger', }) deleteButton.addEventListener('click', () => { this.app.vault.delete(this.file2) diff --git a/src/components/modals/risky_action_modal.ts b/src/components/modals/risky_action_modal.ts index f44a818..d0f8307 100644 --- a/src/components/modals/risky_action_modal.ts +++ b/src/components/modals/risky_action_modal.ts @@ -10,7 +10,7 @@ export class RiskyActionModal extends Modal { onOpen(): void { // Counteract gravity pull by moving box up for balanced composition - this.modalEl.addClass('mb-16') + this.modalEl.addClass('mb-20') this.contentEl.createEl('h2', { text: `Do you accept the risk?` }) this.contentEl.createEl('p', { @@ -23,12 +23,12 @@ export class RiskyActionModal extends Modal { const buttonContainer = this.contentEl.createDiv('button-container') const cancelButton = buttonContainer.createEl('button', { text: 'Cancel', - cls: 'mr-8', + cls: 'mr-2', }) cancelButton.addEventListener('click', () => this.close()) const deleteButton = buttonContainer.createEl('button', { text: 'Accept Risk', - cls: 'button-danger', + cls: 'file-diff__button-danger', }) deleteButton.addEventListener('click', () => { this.close() diff --git a/styles.css b/styles.css index 1a8cc87..4c7359d 100644 --- a/styles.css +++ b/styles.css @@ -1,11 +1,11 @@ -.container { +.file-diff__container { width: 100%; max-width: 100%; overflow-x: scroll; padding: 1rem; } -.line { +.file-diff__line { padding: 0.1rem 0; } @@ -14,61 +14,71 @@ button:focus-visible { } @media (prefers-color-scheme: light) { - .bg-turquoise-light { + .file-diff__top-line__bg { background-color: #d9f4ef; } - .bg-blue-light { + .file-diff__bottom-line__bg { background-color: #d9edff; } - .button-danger { + .file-diff__button-danger { background-color: #b00020 !important; color: #ffffff; } - .button-danger:hover { + .file-diff__button-danger:hover { background-color: #9f0020 !important; color: #ffffff; } + + .file-diff__action-line { + color: #919191; + } } @media (prefers-color-scheme: dark) { - .bg-turquoise-light { + .file-diff__top-line__bg { background-color: #25403b; } - .bg-blue-light { + .file-diff__bottom-line__bg { background-color: #25394b; } - .button-danger { + .file-diff__button-danger { background-color: #cf6679 !important; color: #ffffff; } - .button-danger:hover { + .diff__button-danger:hover { background-color: #b85a6d !important; color: #ffffff; } + + .file-diff__action-line { + color: #919191; + } +} + +/* Tailwind CSS */ +.flex { + display: flex; } .flex-row { - display: flex; flex-direction: row; } -.gap-2 { - gap: 4px; +.gap-1 { + gap: 0.25rem; /* 4px */ } .no-decoration { - text-decoration: none; text-decoration-line: none; } .no-decoration:hover { - text-decoration: none; text-decoration-line: none; } @@ -76,19 +86,16 @@ button:focus-visible { font-size: 0.65rem; } -.py-2 { - padding-top: 2px; - padding-bottom: 2px; +/* Rename from py-0.5 to py-0-5, because dots aren't allowed in class names */ +.py-0-5 { + padding-top: 0.125rem; /* 2px */ + padding-bottom: 0.125rem; /* 2px */ } -.mr-8 { - margin-right: 8px; +.mr-2 { + margin-right: 0.5rem; /* 8px */ } -.mb-16 { - margin-bottom: 80px; -} - -.text-gray { - color: #919191; +.mb-20 { + margin-bottom: 5rem; /* 80px */ }