From 5414d9f8266409532d54a114de5069821bc1bfda Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 16 Apr 2021 03:46:37 +0200 Subject: [PATCH 1/9] Add ol and ul buttons, rename previous format to formatInline --- ts/editor-toolbar/BUILD.bazel | 12 ++++ ts/editor-toolbar/ButtonDropdown.d.ts | 9 +++ ts/editor-toolbar/formatBlock.ts | 63 +++++++++++++++++++ .../{format.ts => formatInline.ts} | 4 +- ts/editor-toolbar/index.ts | 8 ++- 5 files changed, 91 insertions(+), 5 deletions(-) create mode 100644 ts/editor-toolbar/ButtonDropdown.d.ts create mode 100644 ts/editor-toolbar/formatBlock.ts rename ts/editor-toolbar/{format.ts => formatInline.ts} (95%) diff --git a/ts/editor-toolbar/BUILD.bazel b/ts/editor-toolbar/BUILD.bazel index 8d2b2cbc5..b8bf53313 100644 --- a/ts/editor-toolbar/BUILD.bazel +++ b/ts/editor-toolbar/BUILD.bazel @@ -67,6 +67,7 @@ ts_library( copy_bootstrap_icons( name = "bootstrap-icons", icons = [ + # inline formatting "type-bold.svg", "type-italic.svg", "type-underline.svg", @@ -74,6 +75,17 @@ copy_bootstrap_icons( "square-fill.svg", "paperclip.svg", "mic.svg", + + # block formatting + "list-ul.svg", + "list-ol.svg", + "text-paragraph.svg", + "justify.svg", + "text-left.svg", + "text-right.svg", + "text-center.svg", + "text-indent-left.svg", + "text-indent-right.svg", ], ) diff --git a/ts/editor-toolbar/ButtonDropdown.d.ts b/ts/editor-toolbar/ButtonDropdown.d.ts new file mode 100644 index 000000000..ad869013e --- /dev/null +++ b/ts/editor-toolbar/ButtonDropdown.d.ts @@ -0,0 +1,9 @@ +// Copyright: Ankitects Pty Ltd and contributors +// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +import type { ToolbarItem } from "./types"; + +export interface ButtonDropdownProps { + id: string; + className?: string; + buttons: ToolbarItem[]; +} diff --git a/ts/editor-toolbar/formatBlock.ts b/ts/editor-toolbar/formatBlock.ts new file mode 100644 index 000000000..ac51751c7 --- /dev/null +++ b/ts/editor-toolbar/formatBlock.ts @@ -0,0 +1,63 @@ +// Copyright: Ankitects Pty Ltd and contributors +// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +import CommandIconButton from "./CommandIconButton.svelte"; +import type { CommandIconButtonProps } from "./CommandIconButton"; +import IconButton from "./IconButton.svelte"; +import type { IconButtonProps } from "./IconButton"; +import ButtonGroup from "./ButtonGroup.svelte"; +import type { ButtonGroupProps } from "./ButtonGroup"; + +import type ButtonDropdown from "./ButtonDropdown.svelte"; +import type { ButtonDropdownProps } from "./ButtonDropdown"; + +import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent"; +import * as tr from "anki/i18n"; + +import ulIcon from "./list-ul.svg"; +import olIcon from "./list-ol.svg"; +import listOptionsIcon from "./text-paragraph.svg"; + +import justifyIcon from "./justify.svg"; +import justifyLeftIcon from "./text-left.svg"; +import justifyRightIcon from "./text-right.svg"; +import justifyCenterIcon from "./text-center.svg"; + +import indentIcon from "./text-indent-left.svg"; +import outdentIcon from "./text-indent-right.svg"; + +const commandIconButton = dynamicComponent< + typeof CommandIconButton, + CommandIconButtonProps +>(CommandIconButton); +const iconButton = dynamicComponent(IconButton); +const buttonGroup = dynamicComponent(ButtonGroup); + +export function getFormatBlockGroup(): DynamicSvelteComponent & + ButtonGroupProps { + const ulButton = commandIconButton({ + icon: ulIcon, + command: "insertUnorderedList", + tooltip: "Insert unordered list", + }); + + const olButton = commandIconButton({ + icon: olIcon, + command: "insertOrderedList", + tooltip: "Insert ordered list", + }); + + const listFormattingButton = iconButton({ + icon: listOptionsIcon, + tooltip: "More list options", + }); + + return buttonGroup({ + id: "formatInline", + buttons: [ulButton, olButton, listFormattingButton], + }); +} + +export function getFormatBlockMenus(): (DynamicSvelteComponent & + ButtonDropdownProps)[] { + return []; +} diff --git a/ts/editor-toolbar/format.ts b/ts/editor-toolbar/formatInline.ts similarity index 95% rename from ts/editor-toolbar/format.ts rename to ts/editor-toolbar/formatInline.ts index b555f8ae8..4d6f50c3c 100644 --- a/ts/editor-toolbar/format.ts +++ b/ts/editor-toolbar/formatInline.ts @@ -21,7 +21,7 @@ const commandIconButton = dynamicComponent< >(CommandIconButton); const buttonGroup = dynamicComponent(ButtonGroup); -export function getFormatGroup(): DynamicSvelteComponent & +export function getFormatInlineGroup(): DynamicSvelteComponent & ButtonGroupProps { const boldButton = commandIconButton({ icon: boldIcon, @@ -61,7 +61,7 @@ export function getFormatGroup(): DynamicSvelteComponent & }); return buttonGroup({ - id: "format", + id: "formatInline", buttons: [ boldButton, italicButton, diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts index 1d6e0f4b0..b411cf8f8 100644 --- a/ts/editor-toolbar/index.ts +++ b/ts/editor-toolbar/index.ts @@ -16,7 +16,8 @@ import { setupI18n, ModuleName } from "anki/i18n"; import "./bootstrap.css"; import { getNotetypeGroup } from "./notetype"; -import { getFormatGroup } from "./format"; +import { getFormatInlineGroup } from "./formatInline"; +import { getFormatBlockGroup, getFormatBlockMenus } from "./formatBlock"; import { getColorGroup } from "./color"; import { getTemplateGroup, getTemplateMenus } from "./template"; import { Identifiable, search, add, insert } from "./identifiable"; @@ -60,11 +61,12 @@ class EditorToolbar extends HTMLElement { setupI18n({ modules: [ModuleName.EDITING] }).then(() => { const buttons = writable([ getNotetypeGroup(), - getFormatGroup(), + getFormatInlineGroup(), + getFormatBlockGroup(), getColorGroup(), getTemplateGroup(), ]); - const menus = writable([...getTemplateMenus()]); + const menus = writable([...getTemplateMenus(), ...getFormatBlockMenus()]); this.component = new EditorToolbarSvelte({ target: this, From 48cc9c602f84c0ce175182cc6ac8733f887c5ace Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 16 Apr 2021 15:26:49 +0200 Subject: [PATCH 2/9] Add justify and indentation menu --- ts/editor-toolbar/formatBlock.ts | 99 +++++++++++++++++++++++++++----- 1 file changed, 86 insertions(+), 13 deletions(-) diff --git a/ts/editor-toolbar/formatBlock.ts b/ts/editor-toolbar/formatBlock.ts index ac51751c7..7b5ba200d 100644 --- a/ts/editor-toolbar/formatBlock.ts +++ b/ts/editor-toolbar/formatBlock.ts @@ -1,14 +1,16 @@ // Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html +import ButtonGroup from "./ButtonGroup.svelte"; +import type { ButtonGroupProps } from "./ButtonGroup"; +import ButtonDropdown from "./ButtonDropdown.svelte"; +import type { ButtonDropdownProps } from "./ButtonDropdown"; +import WithDropdownMenu from "./WithDropdownMenu.svelte"; +import type { WithDropdownMenuProps } from "./WithDropdownMenu"; + import CommandIconButton from "./CommandIconButton.svelte"; import type { CommandIconButtonProps } from "./CommandIconButton"; import IconButton from "./IconButton.svelte"; import type { IconButtonProps } from "./IconButton"; -import ButtonGroup from "./ButtonGroup.svelte"; -import type { ButtonGroupProps } from "./ButtonGroup"; - -import type ButtonDropdown from "./ButtonDropdown.svelte"; -import type { ButtonDropdownProps } from "./ButtonDropdown"; import { DynamicSvelteComponent, dynamicComponent } from "sveltelib/dynamicComponent"; import * as tr from "anki/i18n"; @@ -17,7 +19,7 @@ import ulIcon from "./list-ul.svg"; import olIcon from "./list-ol.svg"; import listOptionsIcon from "./text-paragraph.svg"; -import justifyIcon from "./justify.svg"; +import justifyFullIcon from "./justify.svg"; import justifyLeftIcon from "./text-left.svg"; import justifyRightIcon from "./text-right.svg"; import justifyCenterIcon from "./text-center.svg"; @@ -29,8 +31,79 @@ const commandIconButton = dynamicComponent< typeof CommandIconButton, CommandIconButtonProps >(CommandIconButton); -const iconButton = dynamicComponent(IconButton); + const buttonGroup = dynamicComponent(ButtonGroup); +const buttonDropdown = dynamicComponent( + ButtonDropdown +); + +const withDropdownMenu = dynamicComponent< + typeof WithDropdownMenu, + WithDropdownMenuProps +>(WithDropdownMenu); + +export function getFormatBlockMenus(): (DynamicSvelteComponent & + ButtonDropdownProps)[] { + const justifyLeftButton = commandIconButton({ + icon: justifyLeftIcon, + command: "justifyLeft", + tooltip: "Justify to the left", + }); + + const justifyCenterButton = commandIconButton({ + icon: justifyCenterIcon, + command: "justifyCenter", + tooltip: "Justify to the center", + }); + + const justifyFullButton = commandIconButton({ + icon: justifyFullIcon, + command: "justifyFull", + tooltip: "Justify full", + }); + + const justifyRightButton = commandIconButton({ + icon: justifyRightIcon, + command: "justifyRight", + tooltip: "Justify to the right", + }); + + const justifyGroup = buttonGroup({ + id: "justify", + buttons: [ + justifyLeftButton, + justifyCenterButton, + justifyFullButton, + justifyRightButton, + ], + }); + + const indentButton = commandIconButton({ + icon: indentIcon, + command: "indent", + tooltip: "Indent selection", + }); + + const outdentButton = commandIconButton({ + icon: outdentIcon, + command: "outdent", + tooltip: "Outdent selection", + }); + + const indentationGroup = buttonGroup({ + id: "indentation", + buttons: [indentButton, outdentButton], + }); + + const formattingOptions = buttonDropdown({ + id: "listFormatting", + buttons: [justifyGroup, indentationGroup], + }); + + return [formattingOptions]; +} + +const iconButton = dynamicComponent(IconButton); export function getFormatBlockGroup(): DynamicSvelteComponent & ButtonGroupProps { @@ -51,13 +124,13 @@ export function getFormatBlockGroup(): DynamicSvelteComponent & - ButtonDropdownProps)[] { - return []; -} From 3eab17ed0f4e2611724d21ceb6fdfe783cbd2dab Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 16 Apr 2021 16:08:00 +0200 Subject: [PATCH 3/9] Add Fluent translations --- ftl/core/editing.ftl | 8 ++++++ ts/editor-toolbar/formatBlock.ts | 43 ++++++++++++++++---------------- 2 files changed, 29 insertions(+), 22 deletions(-) diff --git a/ftl/core/editing.ftl b/ftl/core/editing.ftl index b968bc8f0..4731a4937 100644 --- a/ftl/core/editing.ftl +++ b/ftl/core/editing.ftl @@ -1,8 +1,11 @@ editing-add-media = Add Media +editing-align-left = Align left +editing-align-right = Align right editing-an-error-occurred-while-opening = An error occurred while opening { $val } editing-attach-picturesaudiovideo-f3 = Attach pictures/audio/video (F3) editing-bold-text-ctrlandb = Bold text (Ctrl+B) editing-cards = Cards +editing-center = Center editing-change-colour-f8 = Change colour (F8) editing-cloze-deletion-ctrlandshiftandc = Cloze deletion (Ctrl+Shift+C) editing-couldnt-record-audio-have-you-installed = Couldn't record audio. Have you installed 'lame'? @@ -13,8 +16,10 @@ editing-edit-current = Edit Current editing-edit-html = Edit HTML editing-fields = Fields editing-html-editor = HTML Editor +editing-indent = Indent editing-italic-text-ctrlandi = Italic text (Ctrl+I) editing-jump-to-tags-with-ctrlandshiftandt = Jump to tags with Ctrl+Shift+T +editing-justify = Justify editing-latex = LaTeX editing-latex-equation = LaTeX equation editing-latex-math-env = LaTeX math env. @@ -22,6 +27,8 @@ editing-mathjax-block = MathJax block editing-mathjax-chemistry = MathJax chemistry editing-mathjax-inline = MathJax inline editing-media = Media +editing-ordered-list = Ordered list +editing-outdent = Outdent editing-paste = Paste editing-record-audio-f5 = Record audio (F5) editing-remove-formatting-ctrlandr = Remove formatting (Ctrl+R) @@ -32,4 +39,5 @@ editing-superscript-ctrlandand = Superscript (Ctrl++) editing-tags = Tags editing-to-make-a-cloze-deletion-on = To make a cloze deletion on an existing note, you need to change it to a cloze type first, via 'Notes>Change Note Type' editing-underline-text-ctrlandu = Underline text (Ctrl+U) +editing-unordered-list = Unordered list editing-warning-cloze-deletions-will-not-work = Warning, cloze deletions will not work until you switch the type at the top to Cloze. diff --git a/ts/editor-toolbar/formatBlock.ts b/ts/editor-toolbar/formatBlock.ts index 7b5ba200d..82f895244 100644 --- a/ts/editor-toolbar/formatBlock.ts +++ b/ts/editor-toolbar/formatBlock.ts @@ -47,25 +47,25 @@ export function getFormatBlockMenus(): (DynamicSvelteComponent Date: Fri, 16 Apr 2021 16:11:53 +0200 Subject: [PATCH 4/9] Mark indent / outdent as non activatable --- ts/editor-toolbar/formatBlock.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ts/editor-toolbar/formatBlock.ts b/ts/editor-toolbar/formatBlock.ts index 82f895244..38339d7b0 100644 --- a/ts/editor-toolbar/formatBlock.ts +++ b/ts/editor-toolbar/formatBlock.ts @@ -82,12 +82,14 @@ export function getFormatBlockMenus(): (DynamicSvelteComponent Date: Fri, 16 Apr 2021 17:14:47 +0200 Subject: [PATCH 5/9] Adjust ButtonDropdown for night mode --- ts/editor-toolbar/ButtonDropdown.svelte | 15 ++++++++++++++- ts/editor-toolbar/ButtonGroup.svelte | 5 ++--- ts/editor-toolbar/EditorToolbar.svelte | 2 +- 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte index fa1c5b26c..1cf83c43b 100644 --- a/ts/editor-toolbar/ButtonDropdown.svelte +++ b/ts/editor-toolbar/ButtonDropdown.svelte @@ -3,6 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html --> + + diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte index 18ff29fe0..98a6cb760 100644 --- a/ts/editor-toolbar/ButtonGroup.svelte +++ b/ts/editor-toolbar/ButtonGroup.svelte @@ -20,14 +20,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -
    +
      {#each menuItems as menuItem} -
    • +
      • {/each} diff --git a/ts/sass/button_mixins.scss b/ts/sass/button_mixins.scss index acb917ea9..d3d1647fb 100644 --- a/ts/sass/button_mixins.scss +++ b/ts/sass/button_mixins.scss @@ -1,15 +1,21 @@ +@import "ts/bootstrap/functions"; +@import "ts/bootstrap/variables"; + +$btn-base-color-day: white; + +@mixin btn-day-base { + color: var(--text-fg); + background-color: $btn-base-color-day; + border-color: var(--medium-border) !important; +} + @mixin btn-day($with-disabled: true) { - $base-color: white; - .btn-day { - color: var(--text-fg); - background-color: $base-color; - border-color: var(--medium-border) !important; - - @content ($base-color); + @include btn-day-base; + @content ($btn-base-color-day); &:hover { - background-color: darken($base-color, 8%); + background-color: darken($btn-base-color-day, 8%); } &:active, @@ -23,49 +29,55 @@ @if ($with-disabled) { &[disabled] { - background-color: $base-color !important; + background-color: $btn-base-color-day !important; box-shadow: none !important; } } } } +$btn-base-color-night: #666; + +@mixin btn-night-base { + color: var(--text-fg); + background-color: $btn-base-color-night; + border-color: $btn-base-color-night; +} + @mixin btn-night($with-disabled: true) { - $base-color: #666; - .btn-night { - color: var(--text-fg); - background-color: $base-color; - border-color: $base-color; - - @content ($base-color); + @include btn-night-base; + @content ($btn-base-color-night); &:hover { - background-color: lighten($base-color, 8%); - border-color: lighten($base-color, 8%); + background-color: lighten($btn-base-color-night, 8%); + border-color: lighten($btn-base-color-night, 8%); } &:active, &.active { @include impressed-shadow(0.35); - border-color: darken($base-color, 8%); + border-color: darken($btn-base-color-night, 8%); } &:active.active { box-shadow: none; - border-color: $base-color; + border-color: $btn-base-color-night; } @if ($with-disabled) { &[disabled] { - background-color: $base-color !important; + background-color: $btn-base-color-night !important; box-shadow: none !important; - border-color: $base-color !important; + border-color: $btn-base-color-night !important; } } } } +// should be similar to -webkit-focus-ring-color +$focus-color: $blue; + @mixin impressed-shadow($intensity) { box-shadow: inset 0 calc(var(--toolbar-size) / 15) calc(var(--toolbar-size) / 5) rgba(black, $intensity); From caa052e37eebbb0fa01000014f05be4be76be68f Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 16 Apr 2021 18:24:43 +0200 Subject: [PATCH 7/9] Make clearer which parts of ButtonGroup css are theming related --- ts/editor-toolbar/ButtonGroup.svelte | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte index 98a6cb760..9e2d09731 100644 --- a/ts/editor-toolbar/ButtonGroup.svelte +++ b/ts/editor-toolbar/ButtonGroup.svelte @@ -27,14 +27,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html overflow-y: auto; padding-inline-start: 0; - margin: 0 0 calc(var(--toolbar-size) / 15); + margin: 0 0 calc(var(--toolbar-size) / 10); } - .border-group { - /* buttons' borders exactly overlap each other */ + .border-overlap-group { :global(button), :global(select) { - margin-left: -2px; + margin-left: -1px; } } @@ -67,16 +66,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html } } - &:not(:nth-child(1)) { + &.gap-item:not(:nth-child(1)) { margin-left: 1px; } } -
        +
          {#each buttons as button} {#if !button.hidden} -
        • +
          • {/if} From d66d229d157a607e12b8705dddc4c03e8bf9d487 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Fri, 16 Apr 2021 18:36:54 +0200 Subject: [PATCH 8/9] Color ButtonDropdown background in var(--bg-color) regardless of theme --- ts/editor-toolbar/ButtonDropdown.svelte | 10 ++-------- ts/editor-toolbar/DropdownItem.svelte | 13 +++++++++---- 2 files changed, 11 insertions(+), 12 deletions(-) diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte index 1cf83c43b..9d96d8654 100644 --- a/ts/editor-toolbar/ButtonDropdown.svelte +++ b/ts/editor-toolbar/ButtonDropdown.svelte @@ -3,8 +3,6 @@ Copyright: Ankitects Pty Ltd and contributors License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html -->