Merge pull request #1310 from hgiesel/textcolor

Fixes regarding text color buttons

ftl/core/editing.ftl

@@ -32,7 +32,8 @@ editing-outdent = Decrease indent
 editing-paste = Paste
 editing-record-audio = Record audio
 editing-remove-formatting = Remove formatting
-editing-set-foreground-color = Set foreground color
+editing-set-text-color = Set text color
+editing-set-text-highlight-color = Set text highlight color
 editing-show-duplicates = Show Duplicates
 editing-subscript = Subscript
 editing-superscript = Superscript
@@ -56,3 +57,4 @@ editing-cloze-deletion-ctrlandshiftandc = Cloze deletion (Ctrl+Shift+C)
 editing-change-colour-f8 = Change colour (F8)
 editing-set-foreground-colour-f7 = Set foreground colour (F7)
 editing-customize-card-templates-ctrlandl = Customize Card Templates (Ctrl+L)
+editing-set-foreground-color = Set foreground color

ts/change-notetype/SaveButton.svelte

@@ -29,7 +29,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 theme="primary"
                 on:click={() => save()}
                 tooltip={shortcutLabel}
-                on:mount={createShortcut}>{tr.actionsSave()}</LabelButton
+                on:mount={(event) => createShortcut(event.detail.button)}
+                >{tr.actionsSave()}</LabelButton
             >
         </WithShortcut>
     </ButtonGroupItem>

ts/components/WithShortcut.svelte

@@ -12,8 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     let deregister: () => void;
 
-    function createShortcut({ detail }: CustomEvent): void {
+    function createShortcut(mounted: HTMLElement): void {
-        const mounted: HTMLButtonElement = detail.button;
         deregister = registerShortcut((event: KeyboardEvent) => {
             mounted.dispatchEvent(new MouseEvent("click", event));
             event.preventDefault();

ts/deck-options/SaveButton.svelte

@@ -65,7 +65,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 theme="primary"
                 on:click={() => save(false)}
                 tooltip={shortcutLabel}
-                on:mount={createShortcut}>{tr.deckConfigSaveButton()}</LabelButton
+                on:mount={(event) => createShortcut(event.detail.button)}
+                >{tr.deckConfigSaveButton()}</LabelButton
             >
         </WithShortcut>
     </ButtonGroupItem>

ts/editor/ClozeButton.svelte

@@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             tooltip={`${tr.editingClozeDeletion()} (${shortcutLabel})`}
             {disabled}
             on:click={onCloze}
-            on:mount={createShortcut}
+            on:mount={(event) => createShortcut(event.detail.button)}
         >
             {@html ellipseIcon}
         </IconButton>

ts/editor/ColorButtons.svelte

@@ -39,12 +39,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 <WithShortcut shortcut={"F7"} let:createShortcut let:shortcutLabel>
                     <IconButton
                         tooltip={appendInParentheses(
-                            tr.editingSetForegroundColor(),
+                            tr.editingSetTextColor(),
                             shortcutLabel
                         )}
                         {disabled}
                         on:click={forecolorWrap}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {@html textColorIcon}
                         {@html colorHelperIcon}
@@ -68,7 +68,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                                 forecolorWrap = wrapWithForecolor(setColor(event));
                                 forecolorWrap();
                             }}
-                            on:mount={createShortcut}
+                            on:mount={(event) => createShortcut(event.detail.input)}
                         />
                     </IconButton>
                 </WithShortcut>
@@ -79,7 +79,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <WithColorHelper color={initialColor} let:colorHelperIcon let:setColor>
         <OnlyEditable let:disabled>
             <ButtonGroupItem>
-                <IconButton on:click={backcolorWrap} {disabled}>
+                <IconButton
+                    tooltip={tr.editingSetTextHighlightColor()}
+                    {disabled}
+                    on:click={backcolorWrap}
+                >
                     {@html highlightColorIcon}
                     {@html colorHelperIcon}
                 </IconButton>

ts/editor/CommandIconButton.svelte

@@ -48,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 tooltip={appendInParentheses(tooltip, shortcutLabel)}
                 {disabled}
                 on:click={() => document.execCommand(key)}
-                on:mount={createShortcut}
+                on:mount={(event) => createShortcut(event.detail.button)}
             >
                 <slot />
             </IconButton>
@@ -69,7 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         document.execCommand(key);
                         updateState(event);
                     }}
-                    on:mount={createShortcut}
+                    on:mount={(event) => createShortcut(event.detail.button)}
                 >
                     <slot />
                 </IconButton>

ts/editor/NoteTypeButtons.svelte

@@ -29,7 +29,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             <LabelButton
                 tooltip={`${tr.editingCustomizeCardTemplates()} (${shortcutLabel})`}
                 on:click={() => bridgeCommand("cards")}
-                on:mount={createShortcut}
+                on:mount={(event) => createShortcut(event.detail.button)}
             >
                 {tr.editingCards()}...
             </LabelButton>

ts/editor/PreviewButton.svelte

@@ -14,7 +14,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     <LabelButton
         tooltip={tr.browsingPreviewSelectedCard({ val: shortcutLabel })}
         on:click={() => bridgeCommand("preview")}
-        on:mount={createShortcut}
+        on:mount={(event) => createShortcut(event.detail.button)}
     >
         {tr.actionsPreview()}
     </LabelButton>

ts/editor/TemplateButtons.svelte

@@ -53,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     iconSize={70}
                     {disabled}
                     on:click={onAttachment}
-                    on:mount={createShortcut}
+                    on:mount={(event) => createShortcut(event.detail.button)}
                 >
                     {@html paperclipIcon}
                 </IconButton>
@@ -72,7 +72,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                     iconSize={70}
                     {disabled}
                     on:click={onRecord}
-                    on:mount={createShortcut}
+                    on:mount={(event) => createShortcut(event.detail.button)}
                 >
                     {@html micIcon}
                 </IconButton>
@@ -105,7 +105,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("\\(", "\\)")}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {tr.editingMathjaxInline()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -119,7 +119,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("\\[", "\\]")}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {tr.editingMathjaxBlock()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -133,7 +133,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("\\(\\ce{", "}\\)")}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {tr.editingMathjaxChemistry()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -147,7 +147,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("[latex]", "[/latex]")}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {tr.editingLatex()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -161,7 +161,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("[$]", "[/$]")}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {tr.editingLatexEquation()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -175,7 +175,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                 >
                     <DropdownItem
                         on:click={() => wrapCurrent("[$$]", "[/$$]")}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {tr.editingLatexMathEnv()}
                         <span class="ps-1 float-end">{shortcutLabel}</span>
@@ -202,7 +202,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
                         active={inCodable}
                         disabled={!fieldFocused}
                         on:click={onHtmlEdit}
-                        on:mount={createShortcut}
+                        on:mount={(event) => createShortcut(event.detail.button)}
                     >
                         {@html xmlIcon}
                     </IconButton>