Set tooltip for buttons correctly
This commit is contained in:
Henrik Giesel
parent
0371405c23
commit
9c1936698c
@ -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 { squareFillIcon } from "./icons";
|
||||
import { appendInParentheses } from "./helpers";
|
||||
|
||||
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>
|
||||
<IconButton
|
||||
class="forecolor"
|
||||
tooltip={`${tr.editingSetForegroundColor} (${shortcutLabel})`}
|
||||
tooltip={appendInParentheses(tr.editingSetForegroundColor(), shortcutLabel)}
|
||||
on:click={wrapWithForecolor}
|
||||
on:mount={createShortcut}>
|
||||
{@html squareFillIcon}
|
||||
@ -47,7 +48,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut="F8" let:createShortcut let:shortcutLabel>
|
||||
<ColorPicker
|
||||
tooltip={`${tr.editingChangeColor()} (${shortcutLabel})`}
|
||||
tooltip={appendInParentheses(tr.editingChangeColor(), shortcutLabel)}
|
||||
on:change={setWithCurrentColor}
|
||||
on:mount={createShortcut} />
|
||||
</WithShortcut>
|
||||
|
||||
@ -19,6 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
subscriptIcon,
|
||||
eraserIcon,
|
||||
} from "./icons";
|
||||
import { appendInParentheses } from "./helpers";
|
||||
|
||||
export let api = {};
|
||||
</script>
|
||||
@ -32,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
let:state={active}
|
||||
let:updateState>
|
||||
<IconButton
|
||||
tooltip={`${tr.editingBoldText()} (${shortcutLabel})`}
|
||||
tooltip={appendInParentheses(tr.editingBoldText(), shortcutLabel)}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
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:updateState>
|
||||
<IconButton
|
||||
tooltip={`${tr.editingItalicText()} (${shortcutLabel})`}
|
||||
tooltip={appendInParentheses(tr.editingItalicText(), shortcutLabel)}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
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:updateState>
|
||||
<IconButton
|
||||
tooltip={`${tr.editingUnderlineText()} (${shortcutLabel})`}
|
||||
tooltip={appendInParentheses(tr.editingUnderlineText(), shortcutLabel)}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
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:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingSuperscript()}
|
||||
tooltip={appendInParentheses(tr.editingSuperscript(), shortcutLabel)}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
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:updateState>
|
||||
<IconButton
|
||||
tooltip={tr.editingSubscript()}
|
||||
tooltip={appendInParentheses(tr.editingSubscript(), shortcutLabel)}
|
||||
{active}
|
||||
on:click={(event) => {
|
||||
document.execCommand('subscript');
|
||||
@ -135,7 +136,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
<ButtonGroupItem>
|
||||
<WithShortcut shortcut="Control+KeyR" let:createShortcut let:shortcutLabel>
|
||||
<IconButton
|
||||
tooltip={tr.editingRemoveFormatting()}
|
||||
tooltip={appendInParentheses(tr.editingRemoveFormatting(), shortcutLabel)}
|
||||
on:click={(event) => {
|
||||
document.execCommand('removeFormat');
|
||||
}}
|
||||
|
||||
@ -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>
|
||||
<IconButton
|
||||
tooltip={appendInParentheses(tr.editingRecordAudio(), shortcutLabel)}
|
||||
on:click={onRecord}>
|
||||
on:click={onRecord}
|
||||
on:mount={createShortcut}>
|
||||
{@html micIcon}
|
||||
</IconButton>
|
||||
</WithShortcut>
|
||||
@ -70,8 +71,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
shortcut="Control+KeyM, KeyM"
|
||||
let:createShortcut
|
||||
let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('\\(', '\\)')}>
|
||||
<DropdownItem
|
||||
on:click={() => wrap('\\(', '\\)')}
|
||||
on:mount={createShortcut}>
|
||||
{tr.editingMathjaxInline()}
|
||||
<span class="ps-1 float-end">{shortcutLabel}</span>
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
@ -79,8 +83,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
shortcut="Control+KeyM, KeyE"
|
||||
let:createShortcut
|
||||
let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('\\[', '\\]')}>
|
||||
<DropdownItem
|
||||
on:click={() => wrap('\\[', '\\]')}
|
||||
on:mount={createShortcut}>
|
||||
{tr.editingMathjaxBlock()}
|
||||
<span class="ps-1 float-end">{shortcutLabel}</span>
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
@ -88,8 +95,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
shortcut="Control+KeyM, KeyC"
|
||||
let:createShortcut
|
||||
let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('\\(\\ce{', '}\\)')}>
|
||||
<DropdownItem
|
||||
on:click={() => wrap('\\(\\ce{', '}\\)')}
|
||||
on:mount={createShortcut}>
|
||||
{tr.editingMathjaxChemistry()}
|
||||
<span class="ps-1 float-end">{shortcutLabel}</span>
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
@ -97,8 +107,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
shortcut="Control+KeyT, KeyT"
|
||||
let:createShortcut
|
||||
let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('[latex]', '[/latex]')}>
|
||||
<DropdownItem
|
||||
on:click={() => wrap('[latex]', '[/latex]')}
|
||||
on:mount={createShortcut}>
|
||||
{tr.editingLatex()}
|
||||
<span class="ps-1 float-end">{shortcutLabel}</span>
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
@ -106,8 +119,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
shortcut="Control+KeyT, KeyE"
|
||||
let:createShortcut
|
||||
let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('[$]', '[/$]')}>
|
||||
<DropdownItem
|
||||
on:click={() => wrap('[$]', '[/$]')}
|
||||
on:mount={createShortcut}>
|
||||
{tr.editingLatexEquation()}
|
||||
<span class="ps-1 float-end">{shortcutLabel}</span>
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
|
||||
@ -115,8 +131,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
||||
shortcut="Control+KeyT, KeyM"
|
||||
let:createShortcut
|
||||
let:shortcutLabel>
|
||||
<DropdownItem on:click={() => wrap('[$$]', '[/$$]')}>
|
||||
<DropdownItem
|
||||
on:click={() => wrap('[$$]', '[/$$]')}
|
||||
on:mount={createShortcut}>
|
||||
{tr.editingLatexMathEnv()}
|
||||
<span class="ps-1 float-end">{shortcutLabel}</span>
|
||||
</DropdownItem>
|
||||
</WithShortcut>
|
||||
</DropdownMenu>
|
||||
|
||||
@ -7,10 +7,9 @@ $btn-base-color-day: white;
|
||||
color: var(--text-fg);
|
||||
background-color: $btn-base-color-day;
|
||||
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 {
|
||||
@include btn-day-base;
|
||||
@content ($btn-base-color-day);
|
||||
@ -34,6 +33,10 @@ $btn-base-color-day: white;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($with-margin) {
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -43,10 +46,9 @@ $btn-base-color-night: #666;
|
||||
color: var(--text-fg);
|
||||
background-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 {
|
||||
@include btn-night-base;
|
||||
@content ($btn-base-color-night);
|
||||
@ -74,6 +76,10 @@ $btn-base-color-night: #666;
|
||||
border-color: $btn-base-color-night !important;
|
||||
}
|
||||
}
|
||||
|
||||
@if ($with-margin) {
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user