langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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 {
color: var(--bs-dark);
.icon {
cursor: pointer;
color: var(--text-fg);
.nightMode & {
color: var(--bs-light);
&.is-inactive::before {
opacity: 0.1;
}
&.icon--hover::before {
opacity: 0.5;
}
}

23
ts/editor/labelContainer.ts
View File

@ -1,5 +1,16 @@
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 {
sticky: HTMLSpanElement;
label: HTMLSpanElement;
@ -13,7 +24,7 @@ export class LabelContainer extends HTMLDivElement {
this.appendChild(this.label);
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.appendChild(this.sticky);
@ -22,10 +33,14 @@ export class LabelContainer extends HTMLDivElement {
connectedCallback(): void {
this.sticky.addEventListener("click", this.toggleSticky);
this.sticky.addEventListener("mouseenter", hoverIcon);
this.sticky.addEventListener("mouseleave", removeHoverIcon);
}
disconnectedCallback(): void {
this.sticky.removeEventListener("click", this.toggleSticky);
this.sticky.removeEventListener("mouseenter", hoverIcon);
this.sticky.removeEventListener("mouseleave", removeHoverIcon);
}
initialize(labelName: string): void {
@ -33,8 +48,7 @@ export class LabelContainer extends HTMLDivElement {
}
setSticky(state: boolean): void {
this.sticky.classList.toggle("bi-pin-angle-fill", state);
this.sticky.classList.toggle("bi-pin-angle", !state);
this.sticky.classList.toggle("is-inactive", state);
}
activateSticky(initialState: boolean): void {
@ -42,12 +56,13 @@ export class LabelContainer extends HTMLDivElement {
this.sticky.hidden = false;
}
toggleSticky(): void {
toggleSticky(evt: Event): void {
bridgeCommand(
`toggleSticky:${this.getAttribute("ord")}`,
(newState: boolean): void => {
this.setSticky(newState);
}
);
removeHoverIcon(evt);
}
}