Use tilted (filled and unfilled) sticky icons in the cards editor (#3825)

* Update icons.ts to include hollow and solid icons

* Update icons.ts

* Create sticky-pin-hollow.svg

* Create sticky-pin-solid.svg

* Update StickyBadge.svelte to reflect changed icons
This commit is contained in:
GithubAnon0000 2025-02-16 15:24:11 +00:00 committed by GitHub
parent 7f8420255d
commit 8fc822a6e7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 16 additions and 7 deletions

View file

@ -11,7 +11,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import Badge from "$lib/components/Badge.svelte";
import Icon from "$lib/components/Icon.svelte";
import { stickyIcon } from "$lib/components/icons";
import { stickyIconHollow } from "$lib/components/icons";
import { stickyIconSolid } from "$lib/components/icons";
import { context as editorFieldContext } from "./EditorField.svelte";
@ -51,9 +52,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<Badge
tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
widthMultiplier={0.7}
>
<Icon icon={stickyIcon} />
</Badge>
></Badge>
{#if active}
<Icon icon={stickyIconSolid} />
{:else}
<Icon icon={stickyIconHollow} />
{/if}
</span>
<style lang="scss">

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="iso-8859-1"?><!-- Adapted from https://www.svgrepo.com/svg/4879/push-pin License: CC0 --><svg fill="currentColor" height="11px" width="11px" version="1.1" id="sticky-pin-hollow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 490.125 490.125" xml:space="preserve"><path d="M300.625,5.025c-6.7-6.7-17.6-6.7-24.3,0l-72.6,72.6c-6.7,6.7-6.7,17.6,0,24.3l16.3,16.3l-40.3,40.3l-63.5-7 c-3-0.3-6-0.5-8.9-0.5c-21.7,0-42.2,8.5-57.5,23.8l-20.8,20.8c-6.7,6.7-6.7,17.6,0,24.3l108.5,108.5l-132.4,132.4 c-6.7,6.7-6.7,17.6,0,24.3c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5l132.5-132.5l108.5,108.5c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5 l20.8-20.8c17.6-17.6,26.1-41.8,23.3-66.4l-7-63.5l40.3-40.3l16.2,16.2c6.7,6.7,17.6,6.7,24.3,0l72.6-72.6c3.2-3.2,5-7.6,5-12.1 s-1.8-8.9-5-12.1L300.625,5.025z M400.425,250.025l-16.2-16.3c-6.4-6.4-17.8-6.4-24.3,0l-58.2,58.3c-3.7,3.7-5.5,8.8-4.9,14 l7.9,71.6c1.6,14.3-3.3,28.3-13.5,38.4l-8.7,8.7l-217.1-217.1l8.7-8.6c10.1-10.1,24.2-15,38.4-13.5l71.7,7.9 c5.2,0.6,10.3-1.2,14-4.9l58.2-58.2c6.7-6.7,6.7-17.6,0-24.3l-16.3-16.3l48.3-48.3l160.3,160.3L400.425,250.025z"/></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="iso-8859-1"?><!-- Adapted from https://www.svgrepo.com/svg/4879/push-pin License: CC0 --><svg fill="currentColor" height="11px" width="11px" version="1.1" id="sticky-pin-solid" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 490.125 490.125" xml:space="preserve"><path d="M300.625,5.025c-6.7-6.7-17.6-6.7-24.3,0l-72.6,72.6c-6.7,6.7-6.7,17.6,0,24.3l16.3,16.3l-40.3,40.3l-63.5-7c-3-0.3-6-0.5-8.9-0.5c-21.7,0-42.2,8.5-57.5,23.8l-20.8,20.8c-6.7,6.7-6.7,17.6,0,24.3l108.5,108.5l-132.4,132.4c-6.7,6.7-6.7,17.6,0,24.3c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5l132.5-132.5l108.5,108.5c3.3,3.3,7.7,5,12.1,5s8.8-1.7,12.1-5l20.8-20.8c17.6-17.6,26.1-41.8,23.3-66.4l-7-63.5l40.3-40.3l16.2,16.2c6.7,6.7,17.6,6.7,24.3,0l72.6-72.6c3.2-3.2,5-7.6,5-12.1s-1.8-8.9-5-12.1L300.625,5.025z"/></svg>

After

Width:  |  Height:  |  Size: 843 B

View file

@ -111,8 +111,6 @@ import NewBox_ from "@mdi/svg/svg/new-box.svg?component";
import newBox_ from "@mdi/svg/svg/new-box.svg?url";
import Paperclip_ from "@mdi/svg/svg/paperclip.svg?component";
import paperclip_ from "@mdi/svg/svg/paperclip.svg?url";
import Sticky_ from "@mdi/svg/svg/pin-outline.svg?component";
import sticky_ from "@mdi/svg/svg/pin-outline.svg?url";
import RectangleOutline_ from "@mdi/svg/svg/rectangle-outline.svg?component";
import rectangleOutline_ from "@mdi/svg/svg/rectangle-outline.svg?url";
import Redo_ from "@mdi/svg/svg/redo.svg?component";
@ -186,6 +184,10 @@ import underline_ from "bootstrap-icons/icons/type-underline.svg?url";
import IncrementCloze_ from "../../icons/contain-plus.svg?component";
import incrementCloze_ from "../../icons/contain-plus.svg?url";
import StickyHollow_ from "../../icons/sticky-pin-hollow.svg?component";
import stickyHollow_ from "../../icons/sticky-pin-hollow.svg?url";
import StickySolid_ from "../../icons/sticky-pin-solid.svg?component";
import stickySolid_ from "../../icons/sticky-pin-solid.svg?url";
export const checkCircle = { url: checkCircle_, component: CheckCircle_ };
export const chevronDown = { url: chevronDown_, component: ChevronDown_ };
@ -210,7 +212,8 @@ export const alertIcon = { url: alert_, component: Alert_ };
export const plainTextIcon = { url: plainText_, component: PlainText_ };
export const clozeIcon = { url: cloze_, component: Cloze_ };
export const richTextIcon = { url: richText_, component: RichText_ };
export const stickyIcon = { url: sticky_, component: Sticky_ };
export const stickyIconHollow = { url: stickyHollow_, component: StickyHollow_ };
export const stickyIconSolid = { url: stickySolid_, component: StickySolid_ };
export const mathIcon = { url: math_, component: Math_ };
export const floatLeftIcon = { url: floatLeft_, component: FloatLeft_ };
export const floatNoneIcon = { url: floatNone_, component: FloatNone_ };