feat: migrate misc, sharing, notification, and date components from FontAwesome to Phosphor Icons
This commit is contained in:
kolaente
parent
2083b2bd2c
commit
b7d8f32659
|
|
@ -42,10 +42,11 @@
|
|||
</div>
|
||||
<div class="control">
|
||||
<XButton
|
||||
icon="calendar"
|
||||
variant="secondary"
|
||||
data-toggle
|
||||
/>
|
||||
>
|
||||
<template #icon><PhCalendar /></template>
|
||||
</XButton>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
|
@ -61,10 +62,11 @@
|
|||
</div>
|
||||
<div class="control">
|
||||
<XButton
|
||||
icon="calendar"
|
||||
variant="secondary"
|
||||
data-toggle
|
||||
/>
|
||||
>
|
||||
<template #icon><PhCalendar /></template>
|
||||
</XButton>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
|
@ -102,6 +104,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {PhCalendar} from '@phosphor-icons/vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
|
|
|
|||
|
|
@ -39,10 +39,11 @@
|
|||
</div>
|
||||
<div class="control">
|
||||
<XButton
|
||||
icon="calendar"
|
||||
variant="secondary"
|
||||
data-toggle
|
||||
/>
|
||||
>
|
||||
<template #icon><PhCalendar /></template>
|
||||
</XButton>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
|
|
@ -80,6 +81,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import {computed, ref, watch} from 'vue'
|
||||
import {PhCalendar} from '@phosphor-icons/vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import flatPickr from 'vue-flatpickr-component'
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
@click="$emit('close')"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon icon="times" />
|
||||
<PhX />
|
||||
</span>
|
||||
</BaseButton>
|
||||
</header>
|
||||
|
|
@ -44,6 +44,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {PhX} from '@phosphor-icons/vue'
|
||||
|
||||
withDefaults(defineProps<{
|
||||
title?: string
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
class="close"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<Icon icon="times" />
|
||||
<PhX />
|
||||
</BaseButton>
|
||||
<div
|
||||
class="modal-content"
|
||||
|
|
@ -68,6 +68,7 @@
|
|||
<script lang="ts" setup>
|
||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {PhX} from '@phosphor-icons/vue'
|
||||
import {ref, useAttrs, watchEffect, onBeforeUnmount, watch} from 'vue'
|
||||
import {useScrollLock} from '@vueuse/core'
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import BaseButton from '@/components/base/BaseButton.vue'
|
||||
import {PhMagnifyingGlass} from '@phosphor-icons/vue'
|
||||
import {useBaseStore} from '@/stores/base'
|
||||
import {onBeforeUnmount, onMounted} from 'vue'
|
||||
import {eventToHotkeyString} from '@github/hotkey'
|
||||
|
|
@ -40,6 +41,6 @@ function openQuickActions() {
|
|||
:title="$t('keyboardShortcuts.quickSearch')"
|
||||
@click="openQuickActions"
|
||||
>
|
||||
<Icon icon="search" />
|
||||
<PhMagnifyingGlass />
|
||||
</BaseButton>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
v-if="unreadNotifications > 0"
|
||||
class="unread-indicator"
|
||||
/>
|
||||
<Icon icon="bell" />
|
||||
<PhBell />
|
||||
</BaseButton>
|
||||
</slot>
|
||||
|
||||
|
|
@ -87,6 +87,7 @@
|
|||
|
||||
<script lang="ts" setup>
|
||||
import {computed, onMounted, onUnmounted, ref} from 'vue'
|
||||
import {PhBell} from '@phosphor-icons/vue'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
import NotificationService from '@/services/notification'
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
class="close"
|
||||
@click="closeQuickActions"
|
||||
>
|
||||
<Icon icon="times" />
|
||||
<PhX />
|
||||
</BaseButton>
|
||||
</div>
|
||||
|
||||
|
|
@ -84,7 +84,7 @@
|
|||
v-if="i.id < -1"
|
||||
class="saved-filter-icon icon"
|
||||
>
|
||||
<Icon icon="filter" />
|
||||
<PhFunnel />
|
||||
</span>
|
||||
{{ i.title }}
|
||||
</template>
|
||||
|
|
@ -98,6 +98,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import {type ComponentPublicInstance, computed, ref, shallowReactive, watchEffect} from 'vue'
|
||||
import {PhX, PhFunnel} from '@phosphor-icons/vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
import {useRouter} from 'vue-router'
|
||||
|
||||
|
|
|
|||
|
|
@ -13,10 +13,10 @@
|
|||
<div class="sharables-project">
|
||||
<XButton
|
||||
v-if="!showNewForm"
|
||||
icon="plus"
|
||||
class="mbe-4"
|
||||
@click="showNewForm = true"
|
||||
>
|
||||
<template #icon><PhPlus /></template>
|
||||
{{ $t('project.share.links.create') }}
|
||||
</XButton>
|
||||
|
||||
|
|
@ -60,9 +60,9 @@
|
|||
:placeholder="$t('user.auth.passwordPlaceholder')"
|
||||
/>
|
||||
<XButton
|
||||
icon="plus"
|
||||
@click="add(projectId)"
|
||||
>
|
||||
<template #icon><PhPlus /></template>
|
||||
{{ $t('project.share.share') }}
|
||||
</XButton>
|
||||
</div>
|
||||
|
|
@ -105,19 +105,19 @@
|
|||
<p class="mbe-2">
|
||||
<template v-if="s.permission === PERMISSIONS.ADMIN">
|
||||
<span class="icon is-small">
|
||||
<Icon icon="lock" />
|
||||
<PhLock />
|
||||
</span>
|
||||
{{ $t('project.share.permission.admin') }}
|
||||
</template>
|
||||
<template v-else-if="s.permission === PERMISSIONS.READ_WRITE">
|
||||
<span class="icon is-small">
|
||||
<Icon icon="pen" />
|
||||
<PhPen />
|
||||
</span>
|
||||
{{ $t('project.share.permission.readWrite') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon is-small">
|
||||
<Icon icon="users" />
|
||||
<PhUsers />
|
||||
</span>
|
||||
{{ $t('project.share.permission.read') }}
|
||||
</template>
|
||||
|
|
@ -135,7 +135,7 @@
|
|||
@click="copy(shareLinks[s.id])"
|
||||
>
|
||||
<span class="icon">
|
||||
<Icon icon="paste" />
|
||||
<PhClipboard />
|
||||
</span>
|
||||
</XButton>
|
||||
</template>
|
||||
|
|
@ -157,14 +157,15 @@
|
|||
<td class="actions">
|
||||
<XButton
|
||||
danger
|
||||
icon="trash-alt"
|
||||
@click="
|
||||
() => {
|
||||
linkIdToDelete = s.id
|
||||
showDeleteModal = true
|
||||
}
|
||||
"
|
||||
/>
|
||||
>
|
||||
<template #icon><PhTrash /></template>
|
||||
</XButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -189,6 +190,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import {ref, watch, computed, shallowReactive} from 'vue'
|
||||
import {PhLock, PhPen, PhUsers, PhClipboard, PhPlus, PhTrash} from '@phosphor-icons/vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import {PERMISSIONS} from '@/constants/permissions'
|
||||
|
|
|
|||
|
|
@ -73,19 +73,19 @@
|
|||
<td class="type">
|
||||
<template v-if="s.permission === PERMISSIONS.ADMIN">
|
||||
<span class="icon is-small">
|
||||
<Icon icon="lock" />
|
||||
<PhLock />
|
||||
</span>
|
||||
{{ $t('project.share.permission.admin') }}
|
||||
</template>
|
||||
<template v-else-if="s.permission === PERMISSIONS.READ_WRITE">
|
||||
<span class="icon is-small">
|
||||
<Icon icon="pen" />
|
||||
<PhPen />
|
||||
</span>
|
||||
{{ $t('project.share.permission.readWrite') }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="icon is-small">
|
||||
<Icon icon="users" />
|
||||
<PhUsers />
|
||||
</span>
|
||||
{{ $t('project.share.permission.read') }}
|
||||
</template>
|
||||
|
|
@ -122,14 +122,15 @@
|
|||
</div>
|
||||
<XButton
|
||||
danger
|
||||
icon="trash-alt"
|
||||
@click="
|
||||
() => {
|
||||
sharable = s
|
||||
showDeleteModal = true
|
||||
}
|
||||
"
|
||||
/>
|
||||
>
|
||||
<template #icon><PhTrash /></template>
|
||||
</XButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -159,6 +160,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import {ref, reactive, computed, shallowReactive, type Ref} from 'vue'
|
||||
import {PhLock, PhPen, PhUsers, PhTrash} from '@phosphor-icons/vue'
|
||||
import {useI18n} from 'vue-i18n'
|
||||
|
||||
import UserProjectService from '@/services/userProject'
|
||||
|
|
|
|||
Loading…
Reference in New Issue