kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: use proper FontAwesome icon types in EditorToolbar.vue

This commit is contained in:
kolaente 2025-11-22 15:12:07 +01:00
parent 508f91a97b
commit cc76b87b89
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/input/editor/EditorToolbar.vue
View File

@ -8,7 +8,7 @@
@click="editor.chain().focus().toggleHeading({ level: 1 }).run()" @click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-header']" /> <Icon :icon="['fas', 'header']" />
<span <span
class="icon__lower-text" class="icon__lower-text"
aria-hidden="true" aria-hidden="true"
@ -23,7 +23,7 @@
@click="editor.chain().focus().toggleHeading({ level: 2 }).run()" @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-header']" /> <Icon :icon="['fas', 'header']" />
<span <span
class="icon__lower-text" class="icon__lower-text"
aria-hidden="true" aria-hidden="true"
@ -38,7 +38,7 @@
@click="editor.chain().focus().toggleHeading({ level: 3 }).run()" @click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-header']" /> <Icon :icon="['fas', 'header']" />
<span <span
class="icon__lower-text" class="icon__lower-text"
aria-hidden="true" aria-hidden="true"
@ -56,7 +56,7 @@
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-bold']" /> <Icon :icon="['fas', 'bold']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.bold') }}</span> <span class="is-sr-only">{{ $t('input.editor.bold') }}</span>
</BaseButton> </BaseButton>
@ -67,7 +67,7 @@
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-italic']" /> <Icon :icon="['fas', 'italic']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.italic') }}</span> <span class="is-sr-only">{{ $t('input.editor.italic') }}</span>
</BaseButton> </BaseButton>
@ -78,7 +78,7 @@
@click="editor.chain().focus().toggleUnderline().run()" @click="editor.chain().focus().toggleUnderline().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-underline']" /> <Icon :icon="['fas', 'underline']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.underline') }}</span> <span class="is-sr-only">{{ $t('input.editor.underline') }}</span>
</BaseButton> </BaseButton>
@ -89,7 +89,7 @@
@click="editor.chain().focus().toggleStrike().run()" @click="editor.chain().focus().toggleStrike().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-strikethrough']" /> <Icon :icon="['fas', 'strikethrough']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.strikethrough') }}</span> <span class="is-sr-only">{{ $t('input.editor.strikethrough') }}</span>
</BaseButton> </BaseButton>
@ -103,7 +103,7 @@
@click="editor.chain().focus().toggleCodeBlock().run()" @click="editor.chain().focus().toggleCodeBlock().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-code']" /> <Icon :icon="['fas', 'code']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.code') }}</span> <span class="is-sr-only">{{ $t('input.editor.code') }}</span>
</BaseButton> </BaseButton>
@ -114,7 +114,7 @@
@click="editor.chain().focus().toggleBlockquote().run()" @click="editor.chain().focus().toggleBlockquote().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-quote-right']" /> <Icon :icon="['fas', 'quote-right']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.quote') }}</span> <span class="is-sr-only">{{ $t('input.editor.quote') }}</span>
</BaseButton> </BaseButton>
@ -128,7 +128,7 @@
@click="editor.chain().focus().toggleBulletList().run()" @click="editor.chain().focus().toggleBulletList().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-list-ul']" /> <Icon :icon="['fas', 'list-ul']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.bulletList') }}</span> <span class="is-sr-only">{{ $t('input.editor.bulletList') }}</span>
</BaseButton> </BaseButton>
@ -139,7 +139,7 @@
@click="editor.chain().focus().toggleOrderedList().run()" @click="editor.chain().focus().toggleOrderedList().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-list-ol']" /> <Icon :icon="['fas', 'list-ol']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.orderedList') }}</span> <span class="is-sr-only">{{ $t('input.editor.orderedList') }}</span>
</BaseButton> </BaseButton>
@ -150,7 +150,7 @@
@click="editor.chain().focus().toggleTaskList().run()" @click="editor.chain().focus().toggleTaskList().run()"
> >
<span class="icon"> <span class="icon">
<Icon icon="fa-list-check" /> <Icon icon="list-check" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.taskList') }}</span> <span class="is-sr-only">{{ $t('input.editor.taskList') }}</span>
</BaseButton> </BaseButton>
@ -163,7 +163,7 @@
@click="e => emit('imageUploadClicked', e)" @click="e => emit('imageUploadClicked', e)"
> >
<span class="icon"> <span class="icon">
<Icon icon="fa-image" /> <Icon icon="image" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.image') }}</span> <span class="is-sr-only">{{ $t('input.editor.image') }}</span>
</BaseButton> </BaseButton>
@ -178,7 +178,7 @@
@click="setLink" @click="setLink"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-link']" /> <Icon :icon="['fas', 'link']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.link') }}</span> <span class="is-sr-only">{{ $t('input.editor.link') }}</span>
</BaseButton> </BaseButton>
@ -190,7 +190,7 @@
@click="editor.chain().focus().setParagraph().run()" @click="editor.chain().focus().setParagraph().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-paragraph']" /> <Icon :icon="['fas', 'paragraph']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.text') }}</span> <span class="is-sr-only">{{ $t('input.editor.text') }}</span>
</BaseButton> </BaseButton>
@ -201,7 +201,7 @@
@click="editor.chain().focus().setHorizontalRule().run()" @click="editor.chain().focus().setHorizontalRule().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-ruler-horizontal']" /> <Icon :icon="['fas', 'ruler-horizontal']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.horizontalRule') }}</span> <span class="is-sr-only">{{ $t('input.editor.horizontalRule') }}</span>
</BaseButton> </BaseButton>
@ -214,7 +214,7 @@
@click="editor.chain().focus().undo().run()" @click="editor.chain().focus().undo().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-undo']" /> <Icon :icon="['fas', 'undo']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.undo') }}</span> <span class="is-sr-only">{{ $t('input.editor.undo') }}</span>
</BaseButton> </BaseButton>
@ -224,7 +224,7 @@
@click="editor.chain().focus().redo().run()" @click="editor.chain().focus().redo().run()"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-redo']" /> <Icon :icon="['fas', 'redo']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.redo') }}</span> <span class="is-sr-only">{{ $t('input.editor.redo') }}</span>
</BaseButton> </BaseButton>
@ -239,7 +239,7 @@
@click="toggleTableMode" @click="toggleTableMode"
> >
<span class="icon"> <span class="icon">
<Icon :icon="['fa', 'fa-table']" /> <Icon :icon="['fas', 'table']" />
</span> </span>
<span class="is-sr-only">{{ $t('input.editor.table.title') }}</span> <span class="is-sr-only">{{ $t('input.editor.table.title') }}</span>
</BaseButton> </BaseButton>
@ -381,8 +381,8 @@ function toggleTableMode() {
tableMode.value = !tableMode.value tableMode.value = !tableMode.value
} }
function setLink(event) { function setLink(event: MouseEvent) {
setLinkInEditor(event.target.getBoundingClientRect(), props.editor) setLinkInEditor((event.target as HTMLElement).getBoundingClientRect(), props.editor)
} }
</script> </script>