GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-21 15:32:23 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Switch to bi-sticky icons, toggle opacity for state indiciation

Browse source
This commit is contained in:
Henrik Giesel 2021-03-01 15:20:31 +01:00
parent e03bfd2923
commit 9e557bb0c1
2 changed files with 28 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
ts/editor/editor.scss
View file

@ -133,10 +133,15 @@ button.highlighted {
} }
} }
.sticky-icon { .icon {
color: var(--bs-dark); cursor: pointer;
color: var(--text-fg);
.nightMode & { &.is-inactive::before {
color: var(--bs-light); opacity: 0.1;
}
&.icon--hover::before {
opacity: 0.5;
} }
} }

23
ts/editor/labelContainer.ts
View file

@ -1,5 +1,16 @@
import { bridgeCommand } from "./lib"; import { bridgeCommand } from "./lib";
function removeHoverIcon(evt: Event): void {
const icon = evt.currentTarget as HTMLElement;
icon.classList.remove("icon--hover")
}
function hoverIcon(evt: Event): void {
const icon = evt.currentTarget as HTMLElement;
icon.classList.add("icon--hover");
}
export class LabelContainer extends HTMLDivElement { export class LabelContainer extends HTMLDivElement {
sticky: HTMLSpanElement; sticky: HTMLSpanElement;
label: HTMLSpanElement; label: HTMLSpanElement;
@ -13,7 +24,7 @@ export class LabelContainer extends HTMLDivElement {
this.appendChild(this.label); this.appendChild(this.label);
this.sticky = document.createElement("span"); this.sticky = document.createElement("span");
this.sticky.className = "bi me-1 sticky-icon"; this.sticky.className = "bi me-1 bi-sticky icon";
this.sticky.hidden = true; this.sticky.hidden = true;
this.appendChild(this.sticky); this.appendChild(this.sticky);
@ -22,10 +33,14 @@ export class LabelContainer extends HTMLDivElement {
connectedCallback(): void { connectedCallback(): void {
this.sticky.addEventListener("click", this.toggleSticky); this.sticky.addEventListener("click", this.toggleSticky);
this.sticky.addEventListener("mouseenter", hoverIcon);
this.sticky.addEventListener("mouseleave", removeHoverIcon);
} }
disconnectedCallback(): void { disconnectedCallback(): void {
this.sticky.removeEventListener("click", this.toggleSticky); this.sticky.removeEventListener("click", this.toggleSticky);
this.sticky.removeEventListener("mouseenter", hoverIcon);
this.sticky.removeEventListener("mouseleave", removeHoverIcon);
} }
initialize(labelName: string): void { initialize(labelName: string): void {
@ -33,8 +48,7 @@ export class LabelContainer extends HTMLDivElement {
} }
setSticky(state: boolean): void { setSticky(state: boolean): void {
this.sticky.classList.toggle("bi-pin-angle-fill", state); this.sticky.classList.toggle("is-inactive", state);
this.sticky.classList.toggle("bi-pin-angle", !state);
} }
activateSticky(initialState: boolean): void { activateSticky(initialState: boolean): void {
@ -42,12 +56,13 @@ export class LabelContainer extends HTMLDivElement {
this.sticky.hidden = false; this.sticky.hidden = false;
} }
toggleSticky(): void { toggleSticky(evt: Event): void {
bridgeCommand( bridgeCommand(
`toggleSticky:${this.getAttribute("ord")}`, `toggleSticky:${this.getAttribute("ord")}`,
(newState: boolean): void => { (newState: boolean): void => {
this.setSticky(newState); this.setSticky(newState);
} }
); );
removeHoverIcon(evt);
} }
} }