feat: migrate home/navigation components from FontAwesome to Phosphor Icons
This commit is contained in:
kolaente
parent
b9631794ee
commit
288631f08c
|
|
@ -4,10 +4,7 @@
|
|||
class="add-to-home-screen"
|
||||
:class="{'has-update-available': hasUpdateAvailable}"
|
||||
>
|
||||
<Icon
|
||||
icon="arrow-up-from-bracket"
|
||||
class="add-icon"
|
||||
/>
|
||||
<PhUploadSimple class="add-icon" />
|
||||
<p>
|
||||
{{ $t('home.addToHomeScreen') }}
|
||||
</p>
|
||||
|
|
@ -15,12 +12,13 @@
|
|||
class="hide-button"
|
||||
@click="() => hideMessage = true"
|
||||
>
|
||||
<Icon icon="x" />
|
||||
<PhX />
|
||||
</BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {PhUploadSimple, PhX} from '@phosphor-icons/vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {useLocalStorage} from '@vueuse/core'
|
||||
import {computed} from 'vue'
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
class="project-title-button"
|
||||
>
|
||||
<span class="is-sr-only">{{ $t('project.description') }}</span>
|
||||
<Icon icon="circle-info" />
|
||||
<PhInfo />
|
||||
</BaseButton>
|
||||
|
||||
<ProjectSettingsDropdown
|
||||
|
|
@ -45,10 +45,7 @@
|
|||
@click="toggleOpen"
|
||||
>
|
||||
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<Icon
|
||||
icon="ellipsis-h"
|
||||
class="icon"
|
||||
/>
|
||||
<PhDotsThree class="icon" />
|
||||
</BaseButton>
|
||||
</template>
|
||||
</ProjectSettingsDropdown>
|
||||
|
|
@ -79,7 +76,7 @@
|
|||
transform: open ? 'rotate(180deg)' : 'rotate(0)',
|
||||
}"
|
||||
>
|
||||
<Icon icon="chevron-down" />
|
||||
<PhCaretDown />
|
||||
</span>
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
|
@ -118,6 +115,7 @@ import { computed } from 'vue'
|
|||
|
||||
import { PERMISSIONS as Permissions } from '@/constants/permissions'
|
||||
|
||||
import {PhCaretDown, PhDotsThree, PhInfo} from '@phosphor-icons/vue'
|
||||
import ProjectSettingsDropdown from '@/components/project/ProjectSettingsDropdown.vue'
|
||||
import Dropdown from '@/components/misc/Dropdown.vue'
|
||||
import DropdownItem from '@/components/misc/DropdownItem.vue'
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
class="menu-hide-button d-print-none"
|
||||
@click="baseStore.setMenuActive(false)"
|
||||
>
|
||||
<Icon icon="times" />
|
||||
<PhX />
|
||||
</BaseButton>
|
||||
<div
|
||||
class="app-container"
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
@click="showKeyboardShortcuts()"
|
||||
>
|
||||
<span class="is-sr-only">{{ $t('keyboardShortcuts.title') }}</span>
|
||||
<Icon icon="keyboard" />
|
||||
<PhKeyboard />
|
||||
</BaseButton>
|
||||
</main>
|
||||
</div>
|
||||
|
|
@ -79,6 +79,7 @@ import Navigation from '@/components/home/Navigation.vue'
|
|||
import QuickActions from '@/components/quick-actions/QuickActions.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
import {PhKeyboard, PhX} from '@phosphor-icons/vue'
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useLabelStore} from '@/stores/labels'
|
||||
import {useProjectStore} from '@/stores/projects'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import {computed, ref} from 'vue'
|
||||
import {useConfigStore} from '@/stores/config'
|
||||
import {PhX} from '@phosphor-icons/vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
|
||||
const configStore = useConfigStore()
|
||||
|
|
@ -21,7 +22,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
|
|||
class="hide-button"
|
||||
@click="() => hide = true"
|
||||
>
|
||||
<Icon icon="times" />
|
||||
<PhX />
|
||||
</BaseButton>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
:to="{ name: 'home'}"
|
||||
>
|
||||
<span class="menu-item-icon icon">
|
||||
<Icon icon="calendar" />
|
||||
<PhCalendar />
|
||||
</span>
|
||||
{{ $t('navigation.overview') }}
|
||||
</RouterLink>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
:to="{ name: 'tasks.range'}"
|
||||
>
|
||||
<span class="menu-item-icon icon">
|
||||
<Icon :icon="['far', 'calendar-alt']" />
|
||||
<PhCalendarBlank />
|
||||
</span>
|
||||
{{ $t('navigation.upcoming') }}
|
||||
</RouterLink>
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
:to="{ name: 'projects.index'}"
|
||||
>
|
||||
<span class="menu-item-icon icon">
|
||||
<Icon icon="layer-group" />
|
||||
<PhStack />
|
||||
</span>
|
||||
{{ $t('project.projects') }}
|
||||
</RouterLink>
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
:to="{ name: 'labels.index'}"
|
||||
>
|
||||
<span class="menu-item-icon icon">
|
||||
<Icon icon="tags" />
|
||||
<PhTag />
|
||||
</span>
|
||||
{{ $t('label.title') }}
|
||||
</RouterLink>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
:to="{ name: 'teams.index'}"
|
||||
>
|
||||
<span class="menu-item-icon icon">
|
||||
<Icon icon="users" />
|
||||
<PhUsers />
|
||||
</span>
|
||||
{{ $t('team.title') }}
|
||||
</RouterLink>
|
||||
|
|
@ -131,6 +131,8 @@ import PoweredByLink from '@/components/home/PoweredByLink.vue'
|
|||
import Logo from '@/components/home/Logo.vue'
|
||||
import Loading from '@/components/misc/Loading.vue'
|
||||
|
||||
import {PhCalendar, PhCalendarBlank, PhStack, PhTag, PhUsers} from '@phosphor-icons/vue'
|
||||
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {useProjectStore} from '@/stores/projects'
|
||||
import ProjectsNavigation from '@/components/home/ProjectsNavigation.vue'
|
||||
|
|
|
|||
|
|
@ -13,10 +13,7 @@
|
|||
class="collapse-project-button"
|
||||
@click="childProjectsOpen = !childProjectsOpen"
|
||||
>
|
||||
<Icon
|
||||
icon="chevron-down"
|
||||
:class="{ 'project-is-collapsed': !childProjectsOpen }"
|
||||
/>
|
||||
<PhCaretDown :class="{ 'project-is-collapsed': !childProjectsOpen }" />
|
||||
</BaseButton>
|
||||
<span
|
||||
v-if="canEditOrder && project.id > 0 && project.maxPermission !== null && project.maxPermission > PERMISSIONS.READ"
|
||||
|
|
@ -25,7 +22,7 @@
|
|||
@click.stop.prevent
|
||||
@touchstart.stop
|
||||
>
|
||||
<Icon icon="grip-lines" />
|
||||
<PhDotsSix />
|
||||
</span>
|
||||
<BaseButton
|
||||
:to="{ name: 'project.index', params: { projectId: project.id} }"
|
||||
|
|
@ -46,7 +43,7 @@
|
|||
v-else-if="project.id < -1"
|
||||
class="saved-filter-icon icon menu-item-icon"
|
||||
>
|
||||
<Icon icon="filter" />
|
||||
<PhFunnel />
|
||||
</span>
|
||||
</div>
|
||||
<span class="project-menu-title">{{ getProjectTitle(project) }}</span>
|
||||
|
|
@ -58,7 +55,7 @@
|
|||
@click="projectStore.toggleProjectFavorite(project)"
|
||||
>
|
||||
<span class="is-sr-only">{{ project.isFavorite ? $t('project.unfavorite') : $t('project.favorite') }}</span>
|
||||
<Icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
|
||||
<PhStar :weight="project.isFavorite ? 'fill' : 'regular'" />
|
||||
</BaseButton>
|
||||
<ProjectSettingsDropdown
|
||||
v-if="project.maxPermission !== null && project.maxPermission > PERMISSIONS.READ"
|
||||
|
|
@ -72,10 +69,7 @@
|
|||
@click="toggleOpen"
|
||||
>
|
||||
<span class="is-sr-only">{{ $t('project.openSettingsMenu') }}</span>
|
||||
<Icon
|
||||
icon="ellipsis-h"
|
||||
class="icon"
|
||||
/>
|
||||
<PhDotsThree class="icon" />
|
||||
</BaseButton>
|
||||
</template>
|
||||
</ProjectSettingsDropdown>
|
||||
|
|
@ -98,6 +92,7 @@ import {useStorage} from '@vueuse/core'
|
|||
|
||||
import type {IProject} from '@/modelTypes/IProject'
|
||||
|
||||
import {PhCaretDown, PhDotsThree, PhDotsSix, PhFunnel, PhStar} from '@phosphor-icons/vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import ProjectSettingsDropdown from '@/components/project/ProjectSettingsDropdown.vue'
|
||||
import {getProjectTitle} from '@/helpers/getProjectTitle'
|
||||
|
|
|
|||
Loading…
Reference in New Issue