replace el-button

This commit is contained in:
pa
2026-01-12 18:34:10 +09:00
committed by Natsumi
parent 59700b90ab
commit 4749e8cb56
24 changed files with 329 additions and 264 deletions
@@ -13,9 +13,10 @@
</Button>
</TooltipWrapper>
<TooltipWrapper :content="fetchButtonLabel" side="top">
<el-button type="primary" :disabled="fetchButtonDisabled" :loading="isFetching" @click="startFetch">
<Button :disabled="fetchButtonDisabled" @click="startFetch">
<Spinner v-if="isFetching" />
{{ fetchButtonLabel }}
</el-button>
</Button>
</TooltipWrapper>
<TooltipWrapper
v-if="isFetching"
@@ -130,6 +131,7 @@
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { Settings } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { onBeforeRouteLeave } from 'vue-router';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
+14 -12
View File
@@ -80,12 +80,15 @@
<div class="group-section__header">
<span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button
:loading="isFavoriteLoading"
size="small"
:icon="Refresh"
circle
@click.stop="handleRefreshFavorites" />
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="isFavoriteLoading"
@click.stop="handleRefreshFavorites">
<Spinner v-if="isFavoriteLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
</div>
<div class="group-section__list">
@@ -112,12 +115,9 @@
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
">
<PopoverTrigger asChild>
<el-button
text
size="small"
:icon="MoreFilled"
circle
@click.stop></el-button>
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
<MoreFilled />
</Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
@@ -515,6 +515,8 @@
import { MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { Loader } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
+13 -12
View File
@@ -80,12 +80,15 @@
<div class="group-section__header">
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button
:loading="isFavoriteLoading"
size="small"
:icon="Refresh"
circle
@click.stop="handleRefreshFavorites" />
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="isFavoriteLoading"
@click.stop="handleRefreshFavorites">
<Spinner v-if="isFavoriteLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
</div>
<div class="group-section__list">
@@ -112,12 +115,9 @@
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
">
<PopoverTrigger asChild>
<el-button
text
size="small"
:icon="MoreFilled"
circle
@click.stop></el-button>
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
<MoreFilled />
</Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-55 p-1 rounded-lg">
<div class="favorites-group-menu">
@@ -299,6 +299,7 @@
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { Ellipsis } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
+13 -12
View File
@@ -80,12 +80,15 @@
<div class="group-section__header">
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
<el-button
:loading="isFavoriteLoading"
size="small"
:icon="Refresh"
circle
@click.stop="handleRefreshFavorites" />
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="isFavoriteLoading"
@click.stop="handleRefreshFavorites">
<Spinner v-if="isFavoriteLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
</div>
<div class="group-section__list">
@@ -112,12 +115,9 @@
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
">
<PopoverTrigger asChild>
<el-button
text
size="small"
:icon="MoreFilled"
circle
@click.stop></el-button>
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
<MoreFilled />
</Button>
</PopoverTrigger>
<PopoverContent side="right" class="w-50 p-1 rounded-lg">
<div class="favorites-group-menu">
@@ -429,6 +429,7 @@
import { Ellipsis, RefreshCcw } from 'lucide-vue-next';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
@@ -52,14 +52,13 @@
? t('view.favorite.delete_tooltip')
: t('view.favorite.unfavorite_tooltip')
">
<el-button
size="small"
circle
class="favorites-search-card__action-btn"
:type="isLocalFavorite ? 'default' : 'default'"
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="handlePrimaryDeleteAction">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</TooltipWrapper>
</div>
</div>
@@ -32,14 +32,13 @@
type="world" />
</div>
<div class="favorites-search-card__action">
<el-button
size="small"
circle
class="favorites-search-card__action-btn"
:type="deleteButtonType"
<Button
size="icon-sm"
:variant="shiftHeld ? 'destructive' : 'outline'"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
@click.stop="handlePrimaryDeleteAction">
<i class="ri-delete-bin-line"></i>
</el-button>
</Button>
</div>
</div>
</template>
@@ -142,8 +141,6 @@
return url || props.favorite.thumbnailImageUrl;
});
const deleteButtonType = computed(() => (shiftHeld.value ? 'danger' : 'default'));
const inviteOrLaunchText = computed(() => {
return canOpenInstanceInGame
? t('dialog.world.actions.new_instance_and_open_ingame')
+11 -6
View File
@@ -19,12 +19,15 @@
:placeholder="t('view.moderation.search_placeholder')"
class="filter-input" />
<TooltipWrapper side="bottom" :content="t('view.moderation.refresh_tooltip')">
<el-button
type="default"
:loading="playerModerationTable.loading"
@click="refreshPlayerModerations()"
:icon="Refresh"
circle />
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="playerModerationTable.loading"
@click="refreshPlayerModerations()">
<Spinner v-if="playerModerationTable.loading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
</div>
@@ -40,8 +43,10 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
+11 -6
View File
@@ -49,13 +49,16 @@
class="flex-[0.4]"
style="margin: 0 10px" />
<TooltipWrapper side="bottom" :content="t('view.notification.refresh_tooltip')">
<el-button
type="default"
:loading="isNotificationsLoading"
:icon="Refresh"
circle
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="isNotificationsLoading"
style="flex: none"
@click="refreshNotifications()" />
@click="refreshNotifications()">
<Spinner v-if="isNotificationsLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
</div>
</template>
@@ -71,8 +74,10 @@
<script setup>
import { computed, ref, watch } from 'vue';
import { Button } from '@/components/ui/button';
import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
+10 -8
View File
@@ -158,14 +158,15 @@
</SelectContent>
</Select>
<TooltipWrapper side="bottom" :content="t('view.search.avatar.refresh_tooltip')">
<el-button
type="default"
:loading="userDialog.isAvatarsLoading"
size="small"
:icon="Refresh"
class="ml-1"
circle
@click="refreshUserDialogAvatars"></el-button>
<Button
class="rounded-full ml-1"
variant="outline"
size="icon-sm"
:disabled="userDialog.isAvatarsLoading"
@click="refreshUserDialogAvatars">
<Spinner v-if="userDialog.isAvatarsLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
<span style="font-size: 14px; margin-left: 5px; margin-right: 5px">{{
t('view.search.avatar.result_count', {
@@ -346,6 +347,7 @@
import { Button } from '@/components/ui/button';
import { ButtonGroup } from '@/components/ui/button-group';
import { Checkbox } from '@/components/ui/checkbox';
import { Spinner } from '@/components/ui/spinner';
import { Trash2 } from 'lucide-vue-next';
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
@@ -17,14 +17,16 @@
<span v-text="totalCacheSize"></span>
<span>GB</span>
<TooltipWrapper side="top" :content="t('dialog.config_json.refresh')">
<el-button
type="default"
:loading="VRChatCacheSizeLoading"
size="small"
:icon="Refresh"
circle
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="VRChatCacheSizeLoading"
style="margin-left: 5px"
@click="getVRChatCacheSize"></el-button>
@click="getVRChatCacheSize">
<Spinner v-if="VRChatCacheSizeLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
<div style="margin-top: 10px">
@@ -173,6 +175,7 @@
import { Checkbox } from '@/components/ui/checkbox';
import { ElMessageBox } from 'element-plus';
import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
+11 -7
View File
@@ -42,14 +42,16 @@
</el-select>
<div>
<TooltipWrapper side="bottom" :content="t('side_panel.refresh_tooltip')">
<el-button
type="default"
:loading="isRefreshFriendsLoading"
size="small"
:icon="Refresh"
circle
<Button
class="rounded-full"
variant="outline"
size="icon-sm"
:disabled="isRefreshFriendsLoading"
style="margin-right: 10px"
@click="refreshFriendsList"></el-button>
@click="refreshFriendsList">
<Spinner v-if="isRefreshFriendsLoading" />
<Refresh v-else />
</Button>
</TooltipWrapper>
</div>
</div>
@@ -74,7 +76,9 @@
</template>
<script setup>
import { Button } from '@/components/ui/button';
import { Refresh } from '@element-plus/icons-vue';
import { Spinner } from '@/components/ui/spinner';
import { storeToRefs } from 'pinia';
import { useI18n } from 'vue-i18n';
@@ -15,14 +15,16 @@
</template>
<el-descriptions-item>
<el-button type="default" :icon="Calendar" size="small" @click="openCalendarEvent(event)">{{
t('dialog.group_calendar.event_card.export_to_calendar')
}}</el-button>
<Button variant="outline" size="sm" @click="openCalendarEvent(event)">
<Calendar />
{{ t('dialog.group_calendar.event_card.export_to_calendar') }}
</Button>
</el-descriptions-item>
<el-descriptions-item>
<el-button type="default" :icon="Download" size="small" @click="downloadEventIcs(event)">{{
t('dialog.group_calendar.event_card.download_ics')
}}</el-button>
<Button variant="outline" size="sm" @click="downloadEventIcs(event)">
<Download />
{{ t('dialog.group_calendar.event_card.download_ics') }}
</Button>
</el-descriptions-item>
<el-descriptions-item :label="t('dialog.group_calendar.event_card.category')">
{{ capitalizeFirst(event.category) }}
@@ -72,6 +74,7 @@
<script setup>
import { Calendar, Download, Share, Star, StarFilled } from '@element-plus/icons-vue';
import { Button } from '@/components/ui/button';
import { computed } from 'vue';
import { toast } from 'vue-sonner';
import { useI18n } from 'vue-i18n';
+11 -6
View File
@@ -16,15 +16,20 @@
{{ t('dialog.note_export.description8') }} <br />
</div>
<el-button size="small" :disabled="loading" style="margin-top: 10px" @click="updateNoteExportDialog">
<Button
size="sm"
variant="outline"
:disabled="loading"
style="margin-top: 10px"
@click="updateNoteExportDialog">
{{ t('dialog.note_export.refresh') }}
</el-button>
<el-button size="small" :disabled="loading" style="margin-top: 10px" @click="exportNoteExport">
</Button>
<Button size="sm" variant="outline" :disabled="loading" style="margin-top: 10px" @click="exportNoteExport">
{{ t('dialog.note_export.export') }}
</el-button>
<el-button v-if="loading" size="small" style="margin-top: 10px" @click="cancelNoteExport">
</Button>
<Button v-if="loading" size="sm" variant="outline" style="margin-top: 10px" @click="cancelNoteExport">
{{ t('dialog.note_export.cancel') }}
</el-button>
</Button>
<span v-if="loading" style="margin: 10px">
<el-icon style="margin-right: 5px"><Loading /></el-icon>
{{ t('dialog.note_export.progress') }} {{ progress }}/{{ progressTotal }}