1
0

feat: camelcase global components

This commit is contained in:
Dominik Pschenitschni 2024-06-18 17:48:04 +02:00 committed by konrad
parent 1977a7bee0
commit f36115871c
74 changed files with 236 additions and 236 deletions

View File

@ -24,7 +24,7 @@ module.exports = {
// uncategorized rules: // uncategorized rules:
'vue/component-api-style': ['error', ['script-setup']], 'vue/component-api-style': ['error', ['script-setup']],
'vue/component-name-in-template-casing': ['error', 'PascalCase', { 'vue/component-name-in-template-casing': ['error', 'PascalCase', {
'globals': ['RouterView', 'RouterLink'], 'globals': ['RouterView', 'RouterLink', 'Icon', 'Notifications', 'Modal', 'Card'],
}], }],
'vue/custom-event-name-casing': ['error', 'camelCase'], 'vue/custom-event-name-casing': ['error', 'camelCase'],
'vue/define-macros-order': 'error', 'vue/define-macros-order': 'error',

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
class="has-no-shadow how-it-works-modal" class="has-no-shadow how-it-works-modal"
:title="$t('input.datemathHelp.title')" :title="$t('input.datemathHelp.title')"
> >
@ -118,7 +118,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -84,7 +84,7 @@
{{ $t('input.datemathHelp.learnhow') }} {{ $t('input.datemathHelp.learnhow') }}
</BaseButton> </BaseButton>
<modal <Modal
:enabled="showHowItWorks" :enabled="showHowItWorks"
transition-name="fade" transition-name="fade"
:overflow="true" :overflow="true"
@ -92,7 +92,7 @@
@close="() => showHowItWorks = false" @close="() => showHowItWorks = false"
> >
<DatemathHelp /> <DatemathHelp />
</modal> </Modal>
</div> </div>
</div> </div>
</template> </template>

View File

@ -61,7 +61,7 @@
{{ $t('input.datemathHelp.learnhow') }} {{ $t('input.datemathHelp.learnhow') }}
</BaseButton> </BaseButton>
<modal <Modal
:enabled="showHowItWorks" :enabled="showHowItWorks"
transition-name="fade" transition-name="fade"
:overflow="true" :overflow="true"
@ -69,7 +69,7 @@
@close="() => showHowItWorks = false" @close="() => showHowItWorks = false"
> >
<DatemathHelp /> <DatemathHelp />
</modal> </Modal>
</div> </div>
</div> </div>
</template> </template>

View File

@ -4,7 +4,7 @@
class="add-to-home-screen" class="add-to-home-screen"
:class="{'has-update-available': hasUpdateAvailable}" :class="{'has-update-available': hasUpdateAvailable}"
> >
<icon <Icon
icon="arrow-up-from-bracket" icon="arrow-up-from-bracket"
class="add-icon" class="add-icon"
/> />
@ -15,7 +15,7 @@
class="hide-button" class="hide-button"
@click="() => hideMessage = true" @click="() => hideMessage = true"
> >
<icon icon="x" /> <Icon icon="x" />
</BaseButton> </BaseButton>
</div> </div>
</template> </template>

View File

@ -5,7 +5,7 @@
class="menu-hide-button d-print-none" class="menu-hide-button d-print-none"
@click="baseStore.setMenuActive(false)" @click="baseStore.setMenuActive(false)"
> >
<icon icon="times" /> <Icon icon="times" />
</BaseButton> </BaseButton>
<div <div
class="app-container" class="app-container"
@ -42,21 +42,21 @@
</keep-alive> </keep-alive>
</RouterView> </RouterView>
<modal <Modal
:enabled="typeof currentModal !== 'undefined'" :enabled="typeof currentModal !== 'undefined'"
variant="scrolling" variant="scrolling"
class="task-detail-view-modal" class="task-detail-view-modal"
@close="closeModal()" @close="closeModal()"
> >
<component :is="currentModal" /> <component :is="currentModal" />
</modal> </Modal>
<BaseButton <BaseButton
v-shortcut="'?'" v-shortcut="'?'"
class="keyboard-shortcuts-button d-print-none" class="keyboard-shortcuts-button d-print-none"
@click="showKeyboardShortcuts()" @click="showKeyboardShortcuts()"
> >
<icon icon="keyboard" /> <Icon icon="keyboard" />
</BaseButton> </BaseButton>
</main> </main>
</div> </div>

View File

@ -21,7 +21,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
class="hide-button" class="hide-button"
@click="() => hide = true" @click="() => hide = true"
> >
<icon icon="times" /> <Icon icon="times" />
</BaseButton> </BaseButton>
</div> </div>
</template> </template>

View File

@ -20,7 +20,7 @@
:to="{ name: 'home'}" :to="{ name: 'home'}"
> >
<span class="menu-item-icon icon"> <span class="menu-item-icon icon">
<icon icon="calendar" /> <Icon icon="calendar" />
</span> </span>
{{ $t('navigation.overview') }} {{ $t('navigation.overview') }}
</RouterLink> </RouterLink>
@ -31,7 +31,7 @@
:to="{ name: 'tasks.range'}" :to="{ name: 'tasks.range'}"
> >
<span class="menu-item-icon icon"> <span class="menu-item-icon icon">
<icon :icon="['far', 'calendar-alt']" /> <Icon :icon="['far', 'calendar-alt']" />
</span> </span>
{{ $t('navigation.upcoming') }} {{ $t('navigation.upcoming') }}
</RouterLink> </RouterLink>
@ -42,7 +42,7 @@
:to="{ name: 'projects.index'}" :to="{ name: 'projects.index'}"
> >
<span class="menu-item-icon icon"> <span class="menu-item-icon icon">
<icon icon="layer-group" /> <Icon icon="layer-group" />
</span> </span>
{{ $t('project.projects') }} {{ $t('project.projects') }}
</RouterLink> </RouterLink>
@ -53,7 +53,7 @@
:to="{ name: 'labels.index'}" :to="{ name: 'labels.index'}"
> >
<span class="menu-item-icon icon"> <span class="menu-item-icon icon">
<icon icon="tags" /> <Icon icon="tags" />
</span> </span>
{{ $t('label.title') }} {{ $t('label.title') }}
</RouterLink> </RouterLink>
@ -64,7 +64,7 @@
:to="{ name: 'teams.index'}" :to="{ name: 'teams.index'}"
> >
<span class="menu-item-icon icon"> <span class="menu-item-icon icon">
<icon icon="users" /> <Icon icon="users" />
</span> </span>
{{ $t('team.title') }} {{ $t('team.title') }}
</RouterLink> </RouterLink>

View File

@ -9,7 +9,7 @@
class="collapse-project-button" class="collapse-project-button"
@click="childProjectsOpen = !childProjectsOpen" @click="childProjectsOpen = !childProjectsOpen"
> >
<icon <Icon
icon="chevron-down" icon="chevron-down"
:class="{ 'project-is-collapsed': !childProjectsOpen }" :class="{ 'project-is-collapsed': !childProjectsOpen }"
/> />
@ -35,14 +35,14 @@
v-else-if="project.id < -1" v-else-if="project.id < -1"
class="saved-filter-icon icon menu-item-icon" class="saved-filter-icon icon menu-item-icon"
> >
<icon icon="filter" /> <Icon icon="filter" />
</span> </span>
<span <span
v-if="project.id > 0" v-if="project.id > 0"
class="icon menu-item-icon handle" class="icon menu-item-icon handle"
:class="{'has-color-bubble': project.hexColor !== ''}" :class="{'has-color-bubble': project.hexColor !== ''}"
> >
<icon icon="grip-lines" /> <Icon icon="grip-lines" />
</span> </span>
</div> </div>
<span class="project-menu-title">{{ getProjectTitle(project) }}</span> <span class="project-menu-title">{{ getProjectTitle(project) }}</span>
@ -53,7 +53,7 @@
:class="{'is-favorite': project.isFavorite}" :class="{'is-favorite': project.isFavorite}"
@click="projectStore.toggleProjectFavorite(project)" @click="projectStore.toggleProjectFavorite(project)"
> >
<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" /> <Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
</BaseButton> </BaseButton>
<ProjectSettingsDropdown <ProjectSettingsDropdown
class="menu-list-dropdown" class="menu-list-dropdown"
@ -64,7 +64,7 @@
class="menu-list-dropdown-trigger" class="menu-list-dropdown-trigger"
@click="toggleOpen" @click="toggleOpen"
> >
<icon <Icon
icon="ellipsis-h" icon="ellipsis-h"
class="icon" class="icon"
/> />

View File

@ -28,7 +28,7 @@
:to="{ name: 'project.info', params: { projectId: currentProject.id } }" :to="{ name: 'project.info', params: { projectId: currentProject.id } }"
class="project-title-button" class="project-title-button"
> >
<icon icon="circle-info" /> <Icon icon="circle-info" />
</BaseButton> </BaseButton>
<ProjectSettingsDropdown <ProjectSettingsDropdown
@ -41,7 +41,7 @@
class="project-title-button" class="project-title-button"
@click="toggleOpen" @click="toggleOpen"
> >
<icon <Icon
icon="ellipsis-h" icon="ellipsis-h"
class="icon" class="icon"
/> />
@ -75,7 +75,7 @@
transform: open ? 'rotate(180deg)' : 'rotate(0)', transform: open ? 'rotate(180deg)' : 'rotate(0)',
}" }"
> >
<icon icon="chevron-down" /> <Icon icon="chevron-down" />
</span> </span>
</BaseButton> </BaseButton>
</template> </template>

View File

@ -13,7 +13,7 @@
}" }"
> >
<template v-if="icon"> <template v-if="icon">
<icon <Icon
v-if="showIconOnly" v-if="showIconOnly"
:icon="icon" :icon="icon"
:style="{'color': iconColor !== '' ? iconColor : undefined}" :style="{'color': iconColor !== '' ? iconColor : undefined}"
@ -22,7 +22,7 @@
v-else v-else
class="icon is-small" class="icon is-small"
> >
<icon <Icon
:icon="icon" :icon="icon"
:style="{'color': iconColor !== '' ? iconColor : undefined}" :style="{'color': iconColor !== '' ? iconColor : undefined}"
/> />

View File

@ -4,7 +4,7 @@
class="datepicker__quick-select-date" class="datepicker__quick-select-date"
@click.stop="setDate('today')" @click.stop="setDate('today')"
> >
<span class="icon"><icon :icon="['far', 'calendar-alt']" /></span> <span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
<span class="text"> <span class="text">
<span>{{ $t('input.datepicker.today') }}</span> <span>{{ $t('input.datepicker.today') }}</span>
<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span> <span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
@ -14,7 +14,7 @@
class="datepicker__quick-select-date" class="datepicker__quick-select-date"
@click.stop="setDate('tomorrow')" @click.stop="setDate('tomorrow')"
> >
<span class="icon"><icon :icon="['far', 'sun']" /></span> <span class="icon"><Icon :icon="['far', 'sun']" /></span>
<span class="text"> <span class="text">
<span>{{ $t('input.datepicker.tomorrow') }}</span> <span>{{ $t('input.datepicker.tomorrow') }}</span>
<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span> <span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
@ -24,7 +24,7 @@
class="datepicker__quick-select-date" class="datepicker__quick-select-date"
@click.stop="setDate('nextMonday')" @click.stop="setDate('nextMonday')"
> >
<span class="icon"><icon icon="coffee" /></span> <span class="icon"><Icon icon="coffee" /></span>
<span class="text"> <span class="text">
<span>{{ $t('input.datepicker.nextMonday') }}</span> <span>{{ $t('input.datepicker.nextMonday') }}</span>
<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span> <span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
@ -34,7 +34,7 @@
class="datepicker__quick-select-date" class="datepicker__quick-select-date"
@click.stop="setDate('thisWeekend')" @click.stop="setDate('thisWeekend')"
> >
<span class="icon"><icon icon="cocktail" /></span> <span class="icon"><Icon icon="cocktail" /></span>
<span class="text"> <span class="text">
<span>{{ $t('input.datepicker.thisWeekend') }}</span> <span>{{ $t('input.datepicker.thisWeekend') }}</span>
<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span> <span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
@ -44,7 +44,7 @@
class="datepicker__quick-select-date" class="datepicker__quick-select-date"
@click.stop="setDate('laterThisWeek')" @click.stop="setDate('laterThisWeek')"
> >
<span class="icon"><icon icon="chess-knight" /></span> <span class="icon"><Icon icon="chess-knight" /></span>
<span class="text"> <span class="text">
<span>{{ $t('input.datepicker.laterThisWeek') }}</span> <span>{{ $t('input.datepicker.laterThisWeek') }}</span>
<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span> <span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
@ -54,7 +54,7 @@
class="datepicker__quick-select-date" class="datepicker__quick-select-date"
@click.stop="setDate('nextWeek')" @click.stop="setDate('nextWeek')"
> >
<span class="icon"><icon icon="forward" /></span> <span class="icon"><Icon icon="forward" /></span>
<span class="text"> <span class="text">
<span>{{ $t('input.datepicker.nextWeek') }}</span> <span>{{ $t('input.datepicker.nextWeek') }}</span>
<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span> <span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>

View File

@ -57,7 +57,7 @@
class="removal-button" class="removal-button"
@click="resetSelectedValue" @click="resetSelectedValue"
> >
<icon icon="times" /> <Icon icon="times" />
</BaseButton> </BaseButton>
</div> </div>
</div> </div>

View File

@ -20,7 +20,7 @@
:aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')" :aria-label="passwordFieldType === 'password' ? $t('user.auth.showPassword') : $t('user.auth.hidePassword')"
@click="togglePasswordFieldType" @click="togglePasswordFieldType"
> >
<icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" /> <Icon :icon="passwordFieldType === 'password' ? 'eye' : 'eye-slash'" />
</BaseButton> </BaseButton>
</div> </div>
<p <p

View File

@ -157,7 +157,7 @@ async function toggleReaction(value: string) {
class="reaction-button" class="reaction-button"
@click.stop="toggleEmojiPicker" @click.stop="toggleEmojiPicker"
> >
<icon :icon="['far', 'face-laugh']" /> <Icon :icon="['far', 'face-laugh']" />
</BaseButton> </BaseButton>
<CustomTransition name="fade"> <CustomTransition name="fade">
<VuemojiPicker <VuemojiPicker

View File

@ -8,7 +8,7 @@
:class="{ 'is-selected': index === selectedIndex }" :class="{ 'is-selected': index === selectedIndex }"
@click="selectItem(index)" @click="selectItem(index)"
> >
<icon :icon="item.icon" /> <Icon :icon="item.icon" />
<div class="description"> <div class="description">
<p>{{ item.title }}</p> <p>{{ item.title }}</p>
<p>{{ item.description }}</p> <p>{{ item.description }}</p>

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="['fa', 'fa-header']" />
<span class="icon__lower-text">1</span> <span class="icon__lower-text">1</span>
</span> </span>
</BaseButton> </BaseButton>
@ -19,7 +19,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="['fa', 'fa-header']" />
<span class="icon__lower-text">2</span> <span class="icon__lower-text">2</span>
</span> </span>
</BaseButton> </BaseButton>
@ -30,7 +30,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="['fa', 'fa-header']" />
<span class="icon__lower-text">3</span> <span class="icon__lower-text">3</span>
</span> </span>
</BaseButton> </BaseButton>
@ -44,7 +44,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="['fa', 'fa-bold']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -54,7 +54,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="['fa', 'fa-italic']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -64,7 +64,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="['fa', 'fa-underline']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -74,7 +74,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="['fa', 'fa-strikethrough']" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -87,7 +87,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="['fa', 'fa-code']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -97,7 +97,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="['fa', 'fa-quote-right']" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -110,7 +110,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="['fa', 'fa-list-ul']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -120,7 +120,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="['fa', 'fa-list-ol']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -130,7 +130,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="fa-list-check" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -142,7 +142,7 @@
@click="e => emit('imageUploadClicked', e)" @click="e => emit('imageUploadClicked', e)"
> >
<span class="icon"> <span class="icon">
<icon icon="fa-image" /> <Icon icon="fa-image" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -156,7 +156,7 @@
@click="setLink" @click="setLink"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-link']" /> <Icon :icon="['fa', 'fa-link']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -167,7 +167,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="['fa', 'fa-paragraph']" />
</span> </span>
</BaseButton> </BaseButton>
@ -177,7 +177,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="['fa', 'fa-ruler-horizontal']" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -189,7 +189,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="['fa', 'fa-undo']" />
</span> </span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
@ -198,7 +198,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="['fa', 'fa-redo']" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -212,7 +212,7 @@
@click="toggleTableMode" @click="toggleTableMode"
> >
<span class="icon"> <span class="icon">
<icon :icon="['fa', 'fa-table']" /> <Icon :icon="['fa', 'fa-table']" />
</span> </span>
</BaseButton> </BaseButton>
<div <div

View File

@ -19,7 +19,7 @@
:class="{ 'is-active': editor.isActive('bold') }" :class="{ 'is-active': editor.isActive('bold') }"
@click="editor.chain().focus().toggleBold().run()" @click="editor.chain().focus().toggleBold().run()"
> >
<icon :icon="['fa', 'fa-bold']" /> <Icon :icon="['fa', 'fa-bold']" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.italic')" v-tooltip="$t('input.editor.italic')"
@ -27,7 +27,7 @@
:class="{ 'is-active': editor.isActive('italic') }" :class="{ 'is-active': editor.isActive('italic') }"
@click="editor.chain().focus().toggleItalic().run()" @click="editor.chain().focus().toggleItalic().run()"
> >
<icon :icon="['fa', 'fa-italic']" /> <Icon :icon="['fa', 'fa-italic']" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.underline')" v-tooltip="$t('input.editor.underline')"
@ -35,7 +35,7 @@
:class="{ 'is-active': editor.isActive('underline') }" :class="{ 'is-active': editor.isActive('underline') }"
@click="editor.chain().focus().toggleUnderline().run()" @click="editor.chain().focus().toggleUnderline().run()"
> >
<icon :icon="['fa', 'fa-underline']" /> <Icon :icon="['fa', 'fa-underline']" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.strikethrough')" v-tooltip="$t('input.editor.strikethrough')"
@ -43,7 +43,7 @@
:class="{ 'is-active': editor.isActive('strike') }" :class="{ 'is-active': editor.isActive('strike') }"
@click="editor.chain().focus().toggleStrike().run()" @click="editor.chain().focus().toggleStrike().run()"
> >
<icon :icon="['fa', 'fa-strikethrough']" /> <Icon :icon="['fa', 'fa-strikethrough']" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.code')" v-tooltip="$t('input.editor.code')"
@ -51,7 +51,7 @@
:class="{ 'is-active': editor.isActive('code') }" :class="{ 'is-active': editor.isActive('code') }"
@click="editor.chain().focus().toggleCode().run()" @click="editor.chain().focus().toggleCode().run()"
> >
<icon :icon="['fa', 'fa-code']" /> <Icon :icon="['fa', 'fa-code']" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('input.editor.link')" v-tooltip="$t('input.editor.link')"
@ -59,7 +59,7 @@
:class="{ 'is-active': editor.isActive('link') }" :class="{ 'is-active': editor.isActive('link') }"
@click="setLink" @click="setLink"
> >
<icon :icon="['fa', 'fa-link']" /> <Icon :icon="['fa', 'fa-link']" />
</BaseButton> </BaseButton>
</BubbleMenu> </BubbleMenu>

View File

@ -18,7 +18,7 @@
@click="$emit('close')" @click="$emit('close')"
> >
<span class="icon"> <span class="icon">
<icon :icon="closeIcon" /> <Icon :icon="closeIcon" />
</span> </span>
</BaseButton> </BaseButton>
</header> </header>

View File

@ -1,10 +1,10 @@
<template> <template>
<modal <Modal
:overflow="true" :overflow="true"
:wide="wide" :wide="wide"
@close="$router.back()" @close="$router.back()"
> >
<card <Card
:title="title" :title="title"
:shadow="false" :shadow="false"
:padding="false" :padding="false"
@ -45,8 +45,8 @@
</x-button> </x-button>
</slot> </slot>
</template> </template>
</card> </Card>
</modal> </Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -13,7 +13,7 @@
class="dropdown-trigger is-flex" class="dropdown-trigger is-flex"
@click="toggleOpen" @click="toggleOpen"
> >
<icon <Icon
:icon="triggerIcon" :icon="triggerIcon"
class="icon" class="icon"
/> />

View File

@ -31,7 +31,7 @@
class="close" class="close"
@click="$emit('close')" @click="$emit('close')"
> >
<icon icon="times" /> <Icon icon="times" />
</BaseButton> </BaseButton>
<slot> <slot>

View File

@ -1,5 +1,5 @@
<template> <template>
<notifications <Notifications
position="bottom left" position="bottom left"
:max="2" :max="2"
class="global-notification" class="global-notification"
@ -44,7 +44,7 @@
</div> </div>
</div> </div>
</template> </template>
</notifications> </Notifications>
</template> </template>
<style scoped> <style scoped>

View File

@ -35,6 +35,6 @@ function openQuickActions() {
:title="$t('keyboardShortcuts.quickSearch')" :title="$t('keyboardShortcuts.quickSearch')"
@click="openQuickActions" @click="openQuickActions"
> >
<icon icon="search" /> <Icon icon="search" />
</BaseButton> </BaseButton>
</template> </template>

View File

@ -26,7 +26,7 @@
@click="changeSubscription" @click="changeSubscription"
> >
<span class="icon"> <span class="icon">
<icon :icon="iconName" /> <Icon :icon="iconName" />
</span> </span>
{{ buttonText }} {{ buttonText }}
</BaseButton> </BaseButton>

View File

@ -1,6 +1,6 @@
<template> <template>
<modal @close="close()"> <Modal @close="close()">
<card <Card
class="has-background-white keyboard-shortcuts" class="has-background-white keyboard-shortcuts"
:shadow="false" :shadow="false"
:title="$t('keyboardShortcuts.title')" :title="$t('keyboardShortcuts.title')"
@ -43,8 +43,8 @@
</template> </template>
</dl> </dl>
</template> </template>
</card> </Card>
</modal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -13,7 +13,7 @@
v-if="unreadNotifications > 0" v-if="unreadNotifications > 0"
class="unread-indicator" class="unread-indicator"
/> />
<icon icon="bell" /> <Icon icon="bell" />
</BaseButton> </BaseButton>
</slot> </slot>

View File

@ -9,7 +9,7 @@
class="dropdown-trigger" class="dropdown-trigger"
@click="triggerProps.toggleOpen" @click="triggerProps.toggleOpen"
> >
<icon <Icon
icon="ellipsis-h" icon="ellipsis-h"
class="icon" class="icon"
/> />

View File

@ -7,7 +7,7 @@
> >
{{ $t('filters.title') }} {{ $t('filters.title') }}
</x-button> </x-button>
<modal <Modal
:enabled="modalOpen" :enabled="modalOpen"
transition-name="fade" transition-name="fade"
:overflow="true" :overflow="true"
@ -22,7 +22,7 @@
@update:modelValue="emitChanges" @update:modelValue="emitChanges"
@showResultsButtonClicked="() => modalOpen = false" @showResultsButtonClicked="() => modalOpen = false"
/> />
</modal> </Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
class="filters has-overflow" class="filters has-overflow"
:title="hasTitle ? $t('filters.title') : ''" :title="hasTitle ? $t('filters.title') : ''"
role="search" role="search"
@ -40,7 +40,7 @@
{{ $t('filters.showResults') }} {{ $t('filters.showResults') }}
</x-button> </x-button>
</template> </template>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -28,7 +28,7 @@
v-if="project.id < -1" v-if="project.id < -1"
class="saved-filter-icon icon" class="saved-filter-icon icon"
> >
<icon icon="filter" /> <Icon icon="filter" />
</span> </span>
{{ getProjectTitle(project) }} {{ getProjectTitle(project) }}
</div> </div>
@ -47,7 +47,7 @@
:class="{'is-favorite': project.isFavorite}" :class="{'is-favorite': project.isFavorite}"
@click.prevent.stop="projectStore.toggleProjectFavorite(project)" @click.prevent.stop="projectStore.toggleProjectFavorite(project)"
> >
<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" /> <Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
</BaseButton> </BaseButton>
</div> </div>
</template> </template>

View File

@ -5,7 +5,7 @@
:view-id :view-id
> >
<template #default> <template #default>
<card :has-content="false"> <Card :has-content="false">
<div class="gantt-options"> <div class="gantt-options">
<div class="field"> <div class="field">
<label <label
@ -44,10 +44,10 @@
{{ $t('project.gantt.showTasksWithoutDates') }} {{ $t('project.gantt.showTasksWithoutDates') }}
</FancyCheckbox> </FancyCheckbox>
</div> </div>
</card> </Card>
<div class="gantt-chart-container"> <div class="gantt-chart-container">
<card <Card
:has-content="false" :has-content="false"
:padding="false" :padding="false"
class="has-overflow" class="has-overflow"
@ -64,7 +64,7 @@
v-if="canWrite" v-if="canWrite"
@createTask="addGanttTask" @createTask="addGanttTask"
/> />
</card> </Card>
</div> </div>
</template> </template>
</ProjectWrapper> </ProjectWrapper>

View File

@ -45,7 +45,7 @@
v-tooltip="$t('project.kanban.doneBucketHint')" v-tooltip="$t('project.kanban.doneBucketHint')"
class="icon is-small has-text-success mr-2" class="icon is-small has-text-success mr-2"
> >
<icon icon="check-double" /> <Icon icon="check-double" />
</span> </span>
<h2 <h2
class="title input" class="title input"
@ -246,7 +246,7 @@
</div> </div>
</div> </div>
<modal <Modal
:enabled="showBucketDeleteModal" :enabled="showBucketDeleteModal"
@close="showBucketDeleteModal = false" @close="showBucketDeleteModal = false"
@submit="deleteBucket()" @submit="deleteBucket()"
@ -261,7 +261,7 @@
{{ $t('project.kanban.deleteBucketText2') }} {{ $t('project.kanban.deleteBucketText2') }}
</p> </p>
</template> </template>
</modal> </Modal>
</div> </div>
</template> </template>
</ProjectWrapper> </ProjectWrapper>

View File

@ -19,7 +19,7 @@
:class="{ 'is-loading': loading }" :class="{ 'is-loading': loading }"
class="loader-container is-max-width-desktop list-view" class="loader-container is-max-width-desktop list-view"
> >
<card <Card
:padding="false" :padding="false"
:has-content="false" :has-content="false"
class="has-overflow" class="has-overflow"
@ -73,7 +73,7 @@
> >
<template v-if="canWrite"> <template v-if="canWrite">
<span class="icon handle"> <span class="icon handle">
<icon icon="grip-lines" /> <Icon icon="grip-lines" />
</span> </span>
</template> </template>
</SingleTaskInProject> </SingleTaskInProject>
@ -84,7 +84,7 @@
:total-pages="totalPages" :total-pages="totalPages"
:current-page="currentPage" :current-page="currentPage"
/> />
</card> </Card>
</div> </div>
</template> </template>
</ProjectWrapper> </ProjectWrapper>

View File

@ -18,7 +18,7 @@
</x-button> </x-button>
</template> </template>
<template #content="{isOpen}"> <template #content="{isOpen}">
<card <Card
class="columns-filter" class="columns-filter"
:class="{'is-open': isOpen}" :class="{'is-open': isOpen}"
> >
@ -64,7 +64,7 @@
<FancyCheckbox v-model="activeColumns.createdBy"> <FancyCheckbox v-model="activeColumns.createdBy">
{{ $t('task.attributes.createdBy') }} {{ $t('task.attributes.createdBy') }}
</FancyCheckbox> </FancyCheckbox>
</card> </Card>
</template> </template>
</Popup> </Popup>
<FilterPopup v-model="params" /> <FilterPopup v-model="params" />
@ -76,7 +76,7 @@
:class="{'is-loading': loading}" :class="{'is-loading': loading}"
class="loader-container" class="loader-container"
> >
<card <Card
:padding="false" :padding="false"
:has-content="false" :has-content="false"
> >
@ -260,7 +260,7 @@
:total-pages="totalPages" :total-pages="totalPages"
:current-page="currentPage" :current-page="currentPage"
/> />
</card> </Card>
</div> </div>
</template> </template>
</ProjectWrapper> </ProjectWrapper>

View File

@ -193,7 +193,7 @@ function handleBubbleSave() {
class="is-danger" class="is-danger"
@click.prevent="() => view.bucketConfiguration.splice(index, 1)" @click.prevent="() => view.bucketConfiguration.splice(index, 1)"
> >
<icon icon="trash-alt" /> <Icon icon="trash-alt" />
</button> </button>
<div class="filter-bucket-form"> <div class="filter-bucket-form">
<div class="field"> <div class="field">

View File

@ -1,5 +1,5 @@
<template> <template>
<modal <Modal
:enabled="active" :enabled="active"
:overflow="isNewTaskCommand" :overflow="isNewTaskCommand"
@close="closeQuickActions" @close="closeQuickActions"
@ -81,7 +81,7 @@
</div> </div>
</div> </div>
</div> </div>
</modal> </Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -129,19 +129,19 @@
<p class="mb-2"> <p class="mb-2">
<template v-if="s.right === RIGHTS.ADMIN"> <template v-if="s.right === RIGHTS.ADMIN">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="lock" /> <Icon icon="lock" />
</span>&nbsp; </span>&nbsp;
{{ $t('project.share.right.admin') }} {{ $t('project.share.right.admin') }}
</template> </template>
<template v-else-if="s.right === RIGHTS.READ_WRITE"> <template v-else-if="s.right === RIGHTS.READ_WRITE">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="pen" /> <Icon icon="pen" />
</span>&nbsp; </span>&nbsp;
{{ $t('project.share.right.readWrite') }} {{ $t('project.share.right.readWrite') }}
</template> </template>
<template v-else> <template v-else>
<span class="icon is-small"> <span class="icon is-small">
<icon icon="users" /> <Icon icon="users" />
</span>&nbsp; </span>&nbsp;
{{ $t('project.share.right.read') }} {{ $t('project.share.right.read') }}
</template> </template>
@ -163,7 +163,7 @@
@click="copy(getShareLink(s.hash, selectedView[s.id]))" @click="copy(getShareLink(s.hash, selectedView[s.id]))"
> >
<span class="icon"> <span class="icon">
<icon icon="paste" /> <Icon icon="paste" />
</span> </span>
</x-button> </x-button>
</div> </div>
@ -199,7 +199,7 @@
</table> </table>
</div> </div>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="remove(projectId)" @submit="remove(projectId)"
@ -211,7 +211,7 @@
<template #text> <template #text>
<p>{{ $t('project.share.links.removeText') }}</p> <p>{{ $t('project.share.links.removeText') }}</p>
</template> </template>
</modal> </Modal>
</div> </div>
</template> </template>

View File

@ -73,19 +73,19 @@
<td class="type"> <td class="type">
<template v-if="s.right === RIGHTS.ADMIN"> <template v-if="s.right === RIGHTS.ADMIN">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="lock" /> <Icon icon="lock" />
</span> </span>
{{ $t('project.share.right.admin') }} {{ $t('project.share.right.admin') }}
</template> </template>
<template v-else-if="s.right === RIGHTS.READ_WRITE"> <template v-else-if="s.right === RIGHTS.READ_WRITE">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="pen" /> <Icon icon="pen" />
</span> </span>
{{ $t('project.share.right.readWrite') }} {{ $t('project.share.right.readWrite') }}
</template> </template>
<template v-else> <template v-else>
<span class="icon is-small"> <span class="icon is-small">
<icon icon="users" /> <Icon icon="users" />
</span> </span>
{{ $t('project.share.right.read') }} {{ $t('project.share.right.read') }}
</template> </template>
@ -139,7 +139,7 @@
{{ $t('project.share.userTeam.notShared', {type: shareTypeNames}) }} {{ $t('project.share.userTeam.notShared', {type: shareTypeNames}) }}
</Nothing> </Nothing>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="deleteSharable()" @submit="deleteSharable()"
@ -152,7 +152,7 @@
<template #text> <template #text>
<p>{{ $t('project.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p> <p>{{ $t('project.share.userTeam.removeText', {type: shareTypeName, sharable: sharableName}) }}</p>
</template> </template>
</modal> </Modal>
</div> </div>
</template> </template>

View File

@ -17,7 +17,7 @@
@keydown.enter="handleEnter" @keydown.enter="handleEnter"
/> />
<span class="icon is-small is-left"> <span class="icon is-small is-left">
<icon icon="tasks" /> <Icon icon="tasks" />
</span> </span>
<QuickAddMagic :highlight-hint-icon="taskAddHovered" /> <QuickAddMagic :highlight-hint-icon="taskAddHovered" />
</p> </p>

View File

@ -44,7 +44,7 @@ const hasDelete = computed(() => typeof remove !== 'undefined' && !disabled)
class="remove-assignee" class="remove-assignee"
@click="remove(user)" @click="remove(user)"
> >
<icon icon="times" /> <Icon icon="times" />
</BaseButton> </BaseButton>
</span> </span>
</div> </div>

View File

@ -2,7 +2,7 @@
<div class="attachments"> <div class="attachments">
<h3> <h3>
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="paperclip" /> <Icon icon="paperclip" />
</span> </span>
{{ $t('task.attachment.title') }} {{ $t('task.attachment.title') }}
</h3> </h3>
@ -77,14 +77,14 @@
class="attachment-info-meta-button" class="attachment-info-meta-button"
@click.prevent.stop="downloadAttachment(a)" @click.prevent.stop="downloadAttachment(a)"
> >
<icon icon="download" /> <Icon icon="download" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-tooltip="$t('task.attachment.copyUrlTooltip')" v-tooltip="$t('task.attachment.copyUrlTooltip')"
class="attachment-info-meta-button" class="attachment-info-meta-button"
@click.stop="copyUrl(a)" @click.stop="copyUrl(a)"
> >
<icon icon="copy" /> <Icon icon="copy" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-if="editEnabled" v-if="editEnabled"
@ -92,7 +92,7 @@
class="attachment-info-meta-button" class="attachment-info-meta-button"
@click.prevent.stop="setAttachmentToDelete(a)" @click.prevent.stop="setAttachmentToDelete(a)"
> >
<icon icon="trash-alt" /> <Icon icon="trash-alt" />
</BaseButton> </BaseButton>
<BaseButton <BaseButton
v-if="editEnabled && canPreview(a)" v-if="editEnabled && canPreview(a)"
@ -102,7 +102,7 @@
class="attachment-info-meta-button" class="attachment-info-meta-button"
@click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)" @click.prevent.stop="setCoverImage(task.coverImageAttachmentId === a.id ? null : a)"
> >
<icon :icon="task.coverImageAttachmentId === a.id ? 'eye-slash' : 'eye'" /> <Icon :icon="task.coverImageAttachmentId === a.id ? 'eye-slash' : 'eye'" />
</BaseButton> </BaseButton>
</p> </p>
</div> </div>
@ -131,7 +131,7 @@
> >
<div class="drop-hint"> <div class="drop-hint">
<div class="icon"> <div class="icon">
<icon icon="cloud-upload-alt" /> <Icon icon="cloud-upload-alt" />
</div> </div>
<div class="hint"> <div class="hint">
{{ $t('task.attachment.drop') }} {{ $t('task.attachment.drop') }}
@ -141,7 +141,7 @@
</Teleport> </Teleport>
<!-- Delete modal --> <!-- Delete modal -->
<modal <Modal
:enabled="attachmentToDelete !== null" :enabled="attachmentToDelete !== null"
@close="setAttachmentToDelete(null)" @close="setAttachmentToDelete(null)"
@submit="deleteAttachment()" @submit="deleteAttachment()"
@ -156,10 +156,10 @@
<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong> <strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
</p> </p>
</template> </template>
</modal> </Modal>
<!-- Attachment image modal --> <!-- Attachment image modal -->
<modal <Modal
:enabled="attachmentImageBlobUrl !== null" :enabled="attachmentImageBlobUrl !== null"
@close="attachmentImageBlobUrl = null" @close="attachmentImageBlobUrl = null"
> >
@ -167,7 +167,7 @@
:src="attachmentImageBlobUrl" :src="attachmentImageBlobUrl"
alt="" alt=""
> >
</modal> </Modal>
</div> </div>
</template> </template>

View File

@ -8,7 +8,7 @@
:class="{'d-print-none': comments.length === 0}" :class="{'d-print-none': comments.length === 0}"
> >
<span class="icon is-grey"> <span class="icon is-grey">
<icon :icon="['far', 'comments']" /> <Icon :icon="['far', 'comments']" />
</span> </span>
{{ $t('task.comment.title') }} {{ $t('task.comment.title') }}
</h3> </h3>
@ -160,7 +160,7 @@
</div> </div>
</div> </div>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="() => deleteComment(commentToDelete)" @submit="() => deleteComment(commentToDelete)"
@ -175,7 +175,7 @@
<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong> <strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
</p> </p>
</template> </template>
</modal> </Modal>
</div> </div>
</template> </template>

View File

@ -2,7 +2,7 @@
<div> <div>
<h3> <h3>
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="align-left" /> <Icon icon="align-left" />
</span> </span>
{{ $t('task.attributes.description') }} {{ $t('task.attributes.description') }}
<CustomTransition name="fade"> <CustomTransition name="fade">
@ -17,7 +17,7 @@
v-else-if="!loading && saved" v-else-if="!loading && saved"
class="is-small has-text-success" class="is-small has-text-success"
> >
<icon icon="check" /> <Icon icon="check" />
{{ $t('misc.saved') }} {{ $t('misc.saved') }}
</span> </span>
</CustomTransition> </CustomTransition>

View File

@ -11,7 +11,7 @@
v-else v-else
class="icon-wrapper" class="icon-wrapper"
> >
<icon <Icon
size="6x" size="6x"
icon="file" icon="file"
/> />

View File

@ -38,7 +38,7 @@
v-else-if="!loading && showSavedMessage" v-else-if="!loading && showSavedMessage"
class="has-text-success is-inline-flex is-align-content-center" class="has-text-success is-inline-flex is-align-content-center"
> >
<icon <Icon
icon="check" icon="check"
class="mr-2" class="mr-2"
/> />

View File

@ -39,7 +39,7 @@
class="due-date" class="due-date"
> >
<span class="icon"> <span class="icon">
<icon :icon="['far', 'calendar-alt']" /> <Icon :icon="['far', 'calendar-alt']" />
</span> </span>
<time :datetime="formatISO(task.dueDate)"> <time :datetime="formatISO(task.dueDate)">
{{ formatDateSince(task.dueDate) }} {{ formatDateSince(task.dueDate) }}
@ -73,19 +73,19 @@
v-if="task.attachments.length > 0" v-if="task.attachments.length > 0"
class="icon" class="icon"
> >
<icon icon="paperclip" /> <Icon icon="paperclip" />
</span> </span>
<span <span
v-if="!isEditorContentEmpty(task.description)" v-if="!isEditorContentEmpty(task.description)"
class="icon" class="icon"
> >
<icon icon="align-left" /> <Icon icon="align-left" />
</span> </span>
<span <span
v-if="task.repeatAfter.amount > 0" v-if="task.repeatAfter.amount > 0"
class="icon" class="icon"
> >
<icon icon="history" /> <Icon icon="history" />
</span> </span>
</div> </div>
</div> </div>

View File

@ -8,7 +8,7 @@
v-if="priority >= priorities.HIGH" v-if="priority >= priorities.HIGH"
class="icon" class="icon"
> >
<icon icon="exclamation" /> <Icon icon="exclamation" />
</span> </span>
<span> <span>
<template v-if="priority === priorities.UNSET">{{ $t('task.priority.unset') }}</template> <template v-if="priority === priorities.UNSET">{{ $t('task.priority.unset') }}</template>
@ -22,7 +22,7 @@
v-if="priority === priorities.DO_NOW" v-if="priority === priorities.DO_NOW"
class="icon pr-0" class="icon pr-0"
> >
<icon icon="exclamation" /> <Icon icon="exclamation" />
</span> </span>
</span> </span>
</template> </template>

View File

@ -7,16 +7,16 @@
:class="{'is-highlighted': highlightHintIcon}" :class="{'is-highlighted': highlightHintIcon}"
@click="() => visible = true" @click="() => visible = true"
> >
<icon :icon="['far', 'circle-question']" /> <Icon :icon="['far', 'circle-question']" />
</BaseButton> </BaseButton>
<modal <Modal
:enabled="visible" :enabled="visible"
transition-name="fade" transition-name="fade"
:overflow="true" :overflow="true"
variant="hint-modal" variant="hint-modal"
@close="() => visible = false" @close="() => visible = false"
> >
<card <Card
class="has-no-shadow" class="has-no-shadow"
:title="$t('task.quickAddMagic.title')" :title="$t('task.quickAddMagic.title')"
> >
@ -89,8 +89,8 @@
<li>Every 2 weeks</li> <li>Every 2 weeks</li>
<li>Every month</li> <li>Every month</li>
</ul> </ul>
</card> </Card>
</modal> </Modal>
</template> </template>
</template> </template>

View File

@ -151,7 +151,7 @@
otherTaskId: task.id otherTaskId: task.id
})" })"
> >
<icon icon="trash-alt" /> <Icon icon="trash-alt" />
</BaseButton> </BaseButton>
</div> </div>
</div> </div>
@ -163,7 +163,7 @@
{{ $t('task.relation.noneYet') }} {{ $t('task.relation.noneYet') }}
</p> </p>
<modal <Modal
:enabled="relationToDelete !== undefined" :enabled="relationToDelete !== undefined"
@close="relationToDelete = undefined" @close="relationToDelete = undefined"
@submit="removeTaskRelation()" @submit="removeTaskRelation()"
@ -178,7 +178,7 @@
<strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong> <strong class="has-text-white">{{ $t('misc.cannotBeUndone') }}</strong>
</p> </p>
</template> </template>
</modal> </Modal>
</div> </div>
</template> </template>

View File

@ -18,7 +18,7 @@
class="remove" class="remove"
@click="removeReminderByIndex(index)" @click="removeReminderByIndex(index)"
> >
<icon icon="times" /> <Icon icon="times" />
</BaseButton> </BaseButton>
</div> </div>

View File

@ -102,19 +102,19 @@
v-if="task.attachments.length > 0" v-if="task.attachments.length > 0"
class="project-task-icon" class="project-task-icon"
> >
<icon icon="paperclip" /> <Icon icon="paperclip" />
</span> </span>
<span <span
v-if="!isEditorContentEmpty(task.description)" v-if="!isEditorContentEmpty(task.description)"
class="project-task-icon" class="project-task-icon"
> >
<icon icon="align-left" /> <Icon icon="align-left" />
</span> </span>
<span <span
v-if="isRepeating" v-if="isRepeating"
class="project-task-icon" class="project-task-icon"
> >
<icon icon="history" /> <Icon icon="history" />
</span> </span>
</span> </span>
@ -147,11 +147,11 @@
class="favorite" class="favorite"
@click="toggleFavorite" @click="toggleFavorite"
> >
<icon <Icon
v-if="task.isFavorite" v-if="task.isFavorite"
icon="star" icon="star"
/> />
<icon <Icon
v-else v-else
:icon="['far', 'star']" :icon="['far', 'star']"
/> />

View File

@ -67,19 +67,19 @@
v-if="task.attachments.length > 0" v-if="task.attachments.length > 0"
class="project-task-icon" class="project-task-icon"
> >
<icon icon="paperclip" /> <Icon icon="paperclip" />
</span> </span>
<span <span
v-if="task.description" v-if="task.description"
class="project-task-icon" class="project-task-icon"
> >
<icon icon="align-left" /> <Icon icon="align-left" />
</span> </span>
<span <span
v-if="task.repeatAfter.amount > 0" v-if="task.repeatAfter.amount > 0"
class="project-task-icon" class="project-task-icon"
> >
<icon icon="history" /> <Icon icon="history" />
</span> </span>
</span> </span>

View File

@ -1,10 +1,10 @@
<template> <template>
<modal <Modal
transition-name="fade" transition-name="fade"
variant="hint-modal" variant="hint-modal"
@close="$router.back()" @close="$router.back()"
> >
<card <Card
class="has-no-shadow" class="has-no-shadow"
:title="$t('about.title')" :title="$t('about.title')"
:has-close="true" :has-close="true"
@ -24,8 +24,8 @@
{{ $t('misc.close') }} {{ $t('misc.close') }}
</x-button> </x-button>
</template> </template>
</card> </Card>
</modal> </Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<modal <Modal
@close="$router.back()" @close="$router.back()"
@submit="deleteFilter()" @submit="deleteFilter()"
> >
@ -10,7 +10,7 @@
<template #text> <template #text>
<p>{{ $t('filters.delete.text') }}</p> <p>{{ $t('filters.delete.text') }}</p>
</template> </template>
</modal> </Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -1,9 +1,9 @@
<template> <template>
<modal <Modal
variant="hint-modal" variant="hint-modal"
@close="$router.back()" @close="$router.back()"
> >
<card <Card
class="has-no-shadow" class="has-no-shadow"
:title="$t('filters.create.title')" :title="$t('filters.create.title')"
> >
@ -77,8 +77,8 @@
{{ $t('filters.create.action') }} {{ $t('filters.create.action') }}
</x-button> </x-button>
</template> </template>
</card> </Card>
</modal> </Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -60,7 +60,7 @@
v-if="isLabelEdit" v-if="isLabelEdit"
class="column is-4" class="column is-4"
> >
<card <Card
:title="$t('label.edit.header')" :title="$t('label.edit.header')"
:has-close="true" :has-close="true"
@close="() => isLabelEdit = false" @close="() => isLabelEdit = false"
@ -112,10 +112,10 @@
</div> </div>
</div> </div>
</form> </form>
</card> </Card>
</div> </div>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="deleteLabel(labelToDelete)" @submit="deleteLabel(labelToDelete)"
@ -130,7 +130,7 @@
{{ $t('task.label.delete.text2') }} {{ $t('task.label.delete.text2') }}
</p> </p>
</template> </template>
</modal> </Modal>
</div> </div>
</div> </div>
</template> </template>

View File

@ -1,8 +1,8 @@
<template> <template>
<modal <Modal
@close="$router.back()" @close="$router.back()"
> >
<card <Card
:title="project?.title" :title="project?.title"
> >
<div <div
@ -16,8 +16,8 @@
> >
{{ $t('project.noDescriptionAvailable') }} {{ $t('project.noDescriptionAvailable') }}
</p> </p>
</card> </Card>
</modal> </Modal>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<template> <template>
<modal <Modal
@close="$router.back()" @close="$router.back()"
@submit="archiveProject()" @submit="archiveProject()"
> >
@ -10,7 +10,7 @@
<template #text> <template #text>
<p>{{ project.isArchived ? $t('project.archive.unarchiveText') : $t('project.archive.archiveText') }}</p> <p>{{ project.isArchived ? $t('project.archive.unarchiveText') : $t('project.archive.archiveText') }}</p>
</template> </template>
</modal> </Modal>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<modal <Modal
@close="$router.back()" @close="$router.back()"
@submit="deleteProject()" @submit="deleteProject()"
> >
@ -28,7 +28,7 @@
{{ $t('misc.cannotBeUndone') }} {{ $t('misc.cannotBeUndone') }}
</p> </p>
</template> </template>
</modal> </Modal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

View File

@ -205,7 +205,7 @@ async function saveViewPosition(e) {
@click="viewToEdit = {...v}" @click="viewToEdit = {...v}"
/> />
<span class="icon handle"> <span class="icon handle">
<icon icon="grip-lines" /> <Icon icon="grip-lines" />
</span> </span>
</td> </td>
</template> </template>
@ -215,7 +215,7 @@ async function saveViewPosition(e) {
</table> </table>
</CreateEdit> </CreateEdit>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="deleteView" @submit="deleteView"
@ -227,7 +227,7 @@ async function saveViewPosition(e) {
<template #text> <template #text>
<p>{{ $t('project.views.deleteText') }}</p> <p>{{ $t('project.views.deleteText') }}</p>
</template> </template>
</modal> </Modal>
</template> </template>
<style scoped> <style scoped>

View File

@ -256,7 +256,7 @@ function validateSelectedEvents() {
</tbody> </tbody>
</table> </table>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="deleteWebhook()" @submit="deleteWebhook()"
@ -268,7 +268,7 @@ function validateSelectedEvents() {
<template #text> <template #text>
<p>{{ $t('project.webhooks.deleteText') }}</p> <p>{{ $t('project.webhooks.deleteText') }}</p>
</template> </template>
</modal> </Modal>
</CreateEdit> </CreateEdit>
</template> </template>

View File

@ -43,7 +43,7 @@
<LlamaCool class="llama-cool" /> <LlamaCool class="llama-cool" />
</template> </template>
<card <Card
v-if="hasTasks" v-if="hasTasks"
:padding="false" :padding="false"
class="has-overflow" class="has-overflow"
@ -59,7 +59,7 @@
@taskUpdated="updateTasks" @taskUpdated="updateTasks"
/> />
</div> </div>
</card> </Card>
<div <div
v-else v-else
:class="{ 'is-loading': loading}" :class="{ 'is-loading': loading}"

View File

@ -60,7 +60,7 @@
> >
<!-- Assignees --> <!-- Assignees -->
<div class="detail-title"> <div class="detail-title">
<icon icon="users" /> <Icon icon="users" />
{{ $t('task.attributes.assignees') }} {{ $t('task.attributes.assignees') }}
</div> </div>
<EditAssignees <EditAssignees
@ -86,7 +86,7 @@
> >
<!-- Priority --> <!-- Priority -->
<div class="detail-title"> <div class="detail-title">
<icon icon="exclamation" /> <Icon icon="exclamation" />
{{ $t('task.attributes.priority') }} {{ $t('task.attributes.priority') }}
</div> </div>
<PrioritySelect <PrioritySelect
@ -107,7 +107,7 @@
> >
<!-- Due Date --> <!-- Due Date -->
<div class="detail-title"> <div class="detail-title">
<icon icon="calendar" /> <Icon icon="calendar" />
{{ $t('task.attributes.dueDate') }} {{ $t('task.attributes.dueDate') }}
</div> </div>
<div class="date-input"> <div class="date-input">
@ -124,7 +124,7 @@
@click="() => {task.dueDate = null;saveTask()}" @click="() => {task.dueDate = null;saveTask()}"
> >
<span class="icon is-small"> <span class="icon is-small">
<icon icon="times" /> <Icon icon="times" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -140,7 +140,7 @@
> >
<!-- Progress --> <!-- Progress -->
<div class="detail-title"> <div class="detail-title">
<icon icon="percent" /> <Icon icon="percent" />
{{ $t('task.attributes.percentDone') }} {{ $t('task.attributes.percentDone') }}
</div> </div>
<PercentDoneSelect <PercentDoneSelect
@ -161,7 +161,7 @@
> >
<!-- Start Date --> <!-- Start Date -->
<div class="detail-title"> <div class="detail-title">
<icon icon="play" /> <Icon icon="play" />
{{ $t('task.attributes.startDate') }} {{ $t('task.attributes.startDate') }}
</div> </div>
<div class="date-input"> <div class="date-input">
@ -178,7 +178,7 @@
@click="() => {task.startDate = null;saveTask()}" @click="() => {task.startDate = null;saveTask()}"
> >
<span class="icon is-small"> <span class="icon is-small">
<icon icon="times" /> <Icon icon="times" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -194,7 +194,7 @@
> >
<!-- End Date --> <!-- End Date -->
<div class="detail-title"> <div class="detail-title">
<icon icon="stop" /> <Icon icon="stop" />
{{ $t('task.attributes.endDate') }} {{ $t('task.attributes.endDate') }}
</div> </div>
<div class="date-input"> <div class="date-input">
@ -211,7 +211,7 @@
@click="() => {task.endDate = null;saveTask()}" @click="() => {task.endDate = null;saveTask()}"
> >
<span class="icon is-small"> <span class="icon is-small">
<icon icon="times" /> <Icon icon="times" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -227,7 +227,7 @@
> >
<!-- Reminders --> <!-- Reminders -->
<div class="detail-title"> <div class="detail-title">
<icon :icon="['far', 'clock']" /> <Icon :icon="['far', 'clock']" />
{{ $t('task.attributes.reminders') }} {{ $t('task.attributes.reminders') }}
</div> </div>
<Reminders <Reminders
@ -249,7 +249,7 @@
<!-- Repeat after --> <!-- Repeat after -->
<div class="is-flex is-justify-content-space-between"> <div class="is-flex is-justify-content-space-between">
<div class="detail-title"> <div class="detail-title">
<icon icon="history" /> <Icon icon="history" />
{{ $t('task.attributes.repeat') }} {{ $t('task.attributes.repeat') }}
</div> </div>
<BaseButton <BaseButton
@ -258,7 +258,7 @@
@click="removeRepeatAfter" @click="removeRepeatAfter"
> >
<span class="icon is-small"> <span class="icon is-small">
<icon icon="times" /> <Icon icon="times" />
</span> </span>
</BaseButton> </BaseButton>
</div> </div>
@ -280,7 +280,7 @@
> >
<!-- Color --> <!-- Color -->
<div class="detail-title"> <div class="detail-title">
<icon icon="fill-drip" /> <Icon icon="fill-drip" />
{{ $t('task.attributes.color') }} {{ $t('task.attributes.color') }}
</div> </div>
<ColorPicker <ColorPicker
@ -300,7 +300,7 @@
> >
<div class="detail-title"> <div class="detail-title">
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="tags" /> <Icon icon="tags" />
</span> </span>
{{ $t('task.attributes.labels') }} {{ $t('task.attributes.labels') }}
</div> </div>
@ -352,7 +352,7 @@
> >
<h3> <h3>
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="sitemap" /> <Icon icon="sitemap" />
</span> </span>
{{ $t('task.attributes.relatedTasks') }} {{ $t('task.attributes.relatedTasks') }}
</h3> </h3>
@ -373,7 +373,7 @@
> >
<h3> <h3>
<span class="icon is-grey"> <span class="icon is-grey">
<icon icon="list" /> <Icon icon="list" />
</span> </span>
{{ $t('task.detail.move') }} {{ $t('task.detail.move') }}
</h3> </h3>
@ -560,7 +560,7 @@
/> />
</div> </div>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="deleteTask()" @submit="deleteTask()"
@ -575,7 +575,7 @@
{{ $t('task.detail.delete.text2') }} {{ $t('task.detail.delete.text2') }}
</p> </p>
</template> </template>
</modal> </Modal>
</div> </div>
</template> </template>

View File

@ -3,7 +3,7 @@
class="loader-container is-max-width-desktop" class="loader-container is-max-width-desktop"
:class="{ 'is-loading': teamService.loading }" :class="{ 'is-loading': teamService.loading }"
> >
<card <Card
v-if="userIsAdmin && !team.oidcId" v-if="userIsAdmin && !team.oidcId"
class="is-fullwidth" class="is-fullwidth"
:title="title" :title="title"
@ -90,9 +90,9 @@
/> />
</div> </div>
</div> </div>
</card> </Card>
<card <Card
class="is-fullwidth has-overflow" class="is-fullwidth has-overflow"
:title="$t('team.edit.members')" :title="$t('team.edit.members')"
:padding="false" :padding="false"
@ -157,13 +157,13 @@
<td class="type"> <td class="type">
<template v-if="m.admin"> <template v-if="m.admin">
<span class="icon is-small"> <span class="icon is-small">
<icon icon="lock" /> <Icon icon="lock" />
</span> </span>
{{ $t('team.attributes.admin') }} {{ $t('team.attributes.admin') }}
</template> </template>
<template v-else> <template v-else>
<span class="icon is-small"> <span class="icon is-small">
<icon icon="user" /> <Icon icon="user" />
</span> </span>
{{ $t('team.attributes.member') }} {{ $t('team.attributes.member') }}
</template> </template>
@ -191,7 +191,7 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</card> </Card>
<x-button <x-button
v-if="team && !team.oidcId" v-if="team && !team.oidcId"
@ -202,7 +202,7 @@
</x-button> </x-button>
<!-- Leave team modal --> <!-- Leave team modal -->
<modal <Modal
v-if="showLeaveModal" v-if="showLeaveModal"
@close="showLeaveModal = false" @close="showLeaveModal = false"
@submit="leave()" @submit="leave()"
@ -217,10 +217,10 @@
{{ $t('team.edit.leave.text2') }} {{ $t('team.edit.leave.text2') }}
</p> </p>
</template> </template>
</modal> </Modal>
<!-- Team delete modal --> <!-- Team delete modal -->
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="deleteTeam()" @submit="deleteTeam()"
@ -235,10 +235,10 @@
{{ $t('team.edit.delete.text2') }} {{ $t('team.edit.delete.text2') }}
</p> </p>
</template> </template>
</modal> </Modal>
<!-- User delete modal --> <!-- User delete modal -->
<modal <Modal
:enabled="showUserDeleteModal" :enabled="showUserDeleteModal"
@close="showUserDeleteModal = false" @close="showUserDeleteModal = false"
@submit="deleteMember()" @submit="deleteMember()"
@ -253,7 +253,7 @@
{{ $t('team.edit.deleteUser.text2') }} {{ $t('team.edit.deleteUser.text2') }}
</p> </p>
</template> </template>
</modal> </Modal>
</div> </div>
</template> </template>

View File

@ -150,7 +150,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
</script> </script>
<template> <template>
<card :title="$t('user.settings.apiTokens.title')"> <Card :title="$t('user.settings.apiTokens.title')">
<Message <Message
v-if="tokenCreatedSuccessMessage !== ''" v-if="tokenCreatedSuccessMessage !== ''"
class="has-text-centered mb-4" class="has-text-centered mb-4"
@ -342,7 +342,7 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
{{ $t('user.settings.apiTokens.createAToken') }} {{ $t('user.settings.apiTokens.createAToken') }}
</XButton> </XButton>
<modal <Modal
:enabled="showDeleteModal" :enabled="showDeleteModal"
@close="showDeleteModal = false" @close="showDeleteModal = false"
@submit="deleteToken()" @submit="deleteToken()"
@ -357,6 +357,6 @@ function toggleGroupPermissionsFromChild(group: string, checked: boolean) {
{{ $t('user.settings.apiTokens.delete.text2') }} {{ $t('user.settings.apiTokens.delete.text2') }}
</p> </p>
</template> </template>
</modal> </Modal>
</card> </Card>
</template> </template>

View File

@ -1,5 +1,5 @@
<template> <template>
<card :title="$t('user.settings.avatar.title')"> <Card :title="$t('user.settings.avatar.title')">
<div class="control mb-4"> <div class="control mb-4">
<label <label
v-for="(label, providerId) in AVATAR_PROVIDERS" v-for="(label, providerId) in AVATAR_PROVIDERS"
@ -62,7 +62,7 @@
{{ $t('misc.save') }} {{ $t('misc.save') }}
</x-button> </x-button>
</div> </div>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
v-if="caldavEnabled" v-if="caldavEnabled"
:title="$t('user.settings.caldav.title')" :title="$t('user.settings.caldav.title')"
> >
@ -95,7 +95,7 @@
{{ $t('user.settings.caldav.more') }} {{ $t('user.settings.caldav.more') }}
</BaseButton> </BaseButton>
</p> </p>
</card> </Card>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>

View File

@ -1,5 +1,5 @@
<template> <template>
<card :title="$t('user.export.title')"> <Card :title="$t('user.export.title')">
<p> <p>
{{ $t('user.export.description') }} {{ $t('user.export.description') }}
</p> </p>
@ -42,7 +42,7 @@
> >
{{ $t('user.export.request') }} {{ $t('user.export.request') }}
</x-button> </x-button>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
v-if="userDeletionEnabled" v-if="userDeletionEnabled"
:title="$t('user.deletion.title')" :title="$t('user.deletion.title')"
> >
@ -107,7 +107,7 @@
{{ $t('user.deletion.confirm') }} {{ $t('user.deletion.confirm') }}
</x-button> </x-button>
</template> </template>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
v-if="isLocalUser" v-if="isLocalUser"
:title="$t('user.settings.updateEmailTitle')" :title="$t('user.settings.updateEmailTitle')"
> >
@ -45,7 +45,7 @@
> >
{{ $t('misc.save') }} {{ $t('misc.save') }}
</x-button> </x-button>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
:title="$t('user.settings.general.title')" :title="$t('user.settings.general.title')"
class="general-settings" class="general-settings"
:loading="loading" :loading="loading"
@ -212,7 +212,7 @@
> >
{{ $t('misc.save') }} {{ $t('misc.save') }}
</x-button> </x-button>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
v-if="isLocalUser" v-if="isLocalUser"
:title="$t('user.settings.newPasswordTitle')" :title="$t('user.settings.newPasswordTitle')"
:loading="passwordUpdateService.loading" :loading="passwordUpdateService.loading"
@ -65,7 +65,7 @@
> >
{{ $t('misc.save') }} {{ $t('misc.save') }}
</x-button> </x-button>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">

View File

@ -1,5 +1,5 @@
<template> <template>
<card <Card
v-if="totpEnabled" v-if="totpEnabled"
:title="$t('user.settings.totp.title')" :title="$t('user.settings.totp.title')"
> >
@ -90,7 +90,7 @@
</x-button> </x-button>
</div> </div>
</template> </template>
</card> </Card>
</template> </template>
<script lang="ts"> <script lang="ts">