Set tooltip for buttons correctly

This commit is contained in:
Henrik Giesel 2021-05-06 02:49:59 +02:00
parent 0371405c23
commit 9c1936698c
4 changed files with 46 additions and 19 deletions

View file

@ -12,6 +12,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import WithShortcut from "components/WithShortcut.svelte"; import WithShortcut from "components/WithShortcut.svelte";
import { squareFillIcon } from "./icons"; import { squareFillIcon } from "./icons";
import { appendInParentheses } from "./helpers";
import "./color.css"; import "./color.css";
@ -36,7 +37,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel> <WithShortcut shortcut="F7" let:createShortcut let:shortcutLabel>
<IconButton <IconButton
class="forecolor" class="forecolor"
tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`} tooltip={appendInParentheses(tr.editingSetForegroundColor(), shortcutLabel)}
on:click={wrapWithForecolor} on:click={wrapWithForecolor}
on:mount={createShortcut}> on:mount={createShortcut}>
{@html squareFillIcon} {@html squareFillIcon}
@ -47,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel> <WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
<ColorPicker <ColorPicker
tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`} tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
on:change={setWithCurrentColor} on:change={setWithCurrentColor}
on:mount={createShortcut} /> on:mount={createShortcut} />
</WithShortcut> </WithShortcut>

View file

@ -19,6 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
subscriptIcon, subscriptIcon,
eraserIcon, eraserIcon,
} from "./icons"; } from "./icons";
import { appendInParentheses } from "./helpers";
export let api = {}; export let api = {};
</script> </script>
@ -32,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={`${tr.editingBoldText()} (${shortcutLabel})`} tooltip={appendInParentheses(tr.editingBoldText(), shortcutLabel)}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('bold'); document.execCommand('bold');
@ -53,7 +54,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={`${tr.editingItalicText()} (${shortcutLabel})`} tooltip={appendInParentheses(tr.editingItalicText(), shortcutLabel)}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('italic'); document.execCommand('italic');
@ -74,7 +75,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`} tooltip={appendInParentheses(tr.editingUnderlineText(), shortcutLabel)}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('underline'); document.execCommand('underline');
@ -98,7 +99,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={tr.editingSuperscript()} tooltip={appendInParentheses(tr.editingSuperscript(), shortcutLabel)}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('superscript'); document.execCommand('superscript');
@ -119,7 +120,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let:state={active} let:state={active}
let:updateState> let:updateState>
<IconButton <IconButton
tooltip={tr.editingSubscript()} tooltip={appendInParentheses(tr.editingSubscript(), shortcutLabel)}
{active} {active}
on:click={(event) => { on:click={(event) => {
document.execCommand('subscript'); document.execCommand('subscript');
@ -135,7 +136,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<ButtonGroupItem> <ButtonGroupItem>
<WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel> <WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
<IconButton <IconButton
tooltip={tr.editingRemoveFormatting()} tooltip={appendInParentheses(tr.editingRemoveFormatting(), shortcutLabel)}
on:click={(event) => { on:click={(event) => {
document.execCommand('removeFormat'); document.execCommand('removeFormat');
}} }}

View file

@ -48,7 +48,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel> <WithShortcut shortcut="F5" let:createShortcut let:shortcutLabel>
<IconButton <IconButton
tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)} tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
on:click={onRecord}> on:click={onRecord}
on:mount={createShortcut}>
{@html micIcon} {@html micIcon}
</IconButton> </IconButton>
</WithShortcut> </WithShortcut>
@ -70,8 +71,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcut="Control+KeyM, KeyM" shortcut="Control+KeyM, KeyM"
let:createShortcut let:createShortcut
let:shortcutLabel> let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\(', '\\)')}> <DropdownItem
on:click={() => wrap('\\(', '\\)')}
on:mount={createShortcut}>
{tr.editingMathjaxInline()} {tr.editingMathjaxInline()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem> </DropdownItem>
</WithShortcut> </WithShortcut>
@ -79,8 +83,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcut="Control+KeyM, KeyE" shortcut="Control+KeyM, KeyE"
let:createShortcut let:createShortcut
let:shortcutLabel> let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\[', '\\]')}> <DropdownItem
on:click={() => wrap('\\[', '\\]')}
on:mount={createShortcut}>
{tr.editingMathjaxBlock()} {tr.editingMathjaxBlock()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem> </DropdownItem>
</WithShortcut> </WithShortcut>
@ -88,8 +95,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcut="Control+KeyM, KeyC" shortcut="Control+KeyM, KeyC"
let:createShortcut let:createShortcut
let:shortcutLabel> let:shortcutLabel>
<DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}> <DropdownItem
on:click={() => wrap('\\(\\ce{', '}\\)')}
on:mount={createShortcut}>
{tr.editingMathjaxChemistry()} {tr.editingMathjaxChemistry()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem> </DropdownItem>
</WithShortcut> </WithShortcut>
@ -97,8 +107,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcut="Control+KeyT, KeyT" shortcut="Control+KeyT, KeyT"
let:createShortcut let:createShortcut
let:shortcutLabel> let:shortcutLabel>
<DropdownItem on:click={() => wrap('[latex]', '[/latex]')}> <DropdownItem
on:click={() => wrap('[latex]', '[/latex]')}
on:mount={createShortcut}>
{tr.editingLatex()} {tr.editingLatex()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem> </DropdownItem>
</WithShortcut> </WithShortcut>
@ -106,8 +119,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcut="Control+KeyT, KeyE" shortcut="Control+KeyT, KeyE"
let:createShortcut let:createShortcut
let:shortcutLabel> let:shortcutLabel>
<DropdownItem on:click={() => wrap('[$]', '[/$]')}> <DropdownItem
on:click={() => wrap('[$]', '[/$]')}
on:mount={createShortcut}>
{tr.editingLatexEquation()} {tr.editingLatexEquation()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem> </DropdownItem>
</WithShortcut> </WithShortcut>
@ -115,8 +131,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
shortcut="Control+KeyT, KeyM" shortcut="Control+KeyT, KeyM"
let:createShortcut let:createShortcut
let:shortcutLabel> let:shortcutLabel>
<DropdownItem on:click={() => wrap('[$$]', '[/$$]')}> <DropdownItem
on:click={() => wrap('[$$]', '[/$$]')}
on:mount={createShortcut}>
{tr.editingLatexMathEnv()} {tr.editingLatexMathEnv()}
<span class="ps-1 float-end">{shortcutLabel}</span>
</DropdownItem> </DropdownItem>
</WithShortcut> </WithShortcut>
</DropdownMenu> </DropdownMenu>

View file

@ -7,10 +7,9 @@ $btn-base-color-day: white;
color: var(--text-fg); color: var(--text-fg);
background-color: $btn-base-color-day; background-color: $btn-base-color-day;
border-color: var(--medium-border) !important; border-color: var(--medium-border) !important;
margin-left: -1px;
} }
@mixin btn-day($with-disabled: true) { @mixin btn-day($with-disabled: true, $with-margin: true) {
.btn-day { .btn-day {
@include btn-day-base; @include btn-day-base;
@content ($btn-base-color-day); @content ($btn-base-color-day);
@ -34,6 +33,10 @@ $btn-base-color-day: white;
box-shadow: none !important; box-shadow: none !important;
} }
} }
@if ($with-margin) {
margin-left: -1px;
}
} }
} }
@ -43,10 +46,9 @@ $btn-base-color-night: #666;
color: var(--text-fg); color: var(--text-fg);
background-color: $btn-base-color-night; background-color: $btn-base-color-night;
border-color: $btn-base-color-night; border-color: $btn-base-color-night;
margin-left: 1px;
} }
@mixin btn-night($with-disabled: true) { @mixin btn-night($with-disabled: true, $with-margin: true) {
.btn-night { .btn-night {
@include btn-night-base; @include btn-night-base;
@content ($btn-base-color-night); @content ($btn-base-color-night);
@ -74,6 +76,10 @@ $btn-base-color-night: #666;
border-color: $btn-base-color-night !important; border-color: $btn-base-color-night !important;
} }
} }
@if ($with-margin) {
margin-left: 1px;
}
} }
} }