mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-05-05 14:26:06 +02:00
UI Refresh
This commit is contained in:
pa
Natsumi
+32
-32
@@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<div class="x-container feed">
|
||||
<div class="x-container feed" ref="feedRef">
|
||||
<div style="margin: 0 0 10px; display: flex; align-items: center">
|
||||
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
|
||||
<NativeTooltip
|
||||
placement="bottom"
|
||||
:content="t('view.feed.favorites_only_tooltip')"
|
||||
:enter-ms="140"
|
||||
:exit-ms="120">
|
||||
<el-switch v-model="feedTable.vip" active-color="#13ce66" @change="feedTableLookup"></el-switch>
|
||||
</NativeTooltip>
|
||||
<el-tooltip placement="bottom" :content="t('view.feed.favorites_only_tooltip')">
|
||||
<el-switch
|
||||
v-model="feedTable.vip"
|
||||
active-color="var(--el-color-success)"
|
||||
@change="feedTableLookup"></el-switch>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-select
|
||||
v-model="feedTable.filter"
|
||||
@@ -33,9 +32,9 @@
|
||||
</div>
|
||||
|
||||
<DataTable v-bind="feedTable" :data="feedDisplayData">
|
||||
<el-table-column type="expand" width="20">
|
||||
<el-table-column type="expand" width="30">
|
||||
<template #default="scope">
|
||||
<div style="position: relative; font-size: 14px">
|
||||
<div style="position: relative; font-size: 14px" class="pl-5">
|
||||
<template v-if="scope.row.type === 'GPS'">
|
||||
<Location
|
||||
v-if="scope.row.previousLocation"
|
||||
@@ -45,9 +44,7 @@
|
||||
timeToText(scope.row.time)
|
||||
}}</el-tag>
|
||||
<br />
|
||||
<span style="margin-right: 5px">
|
||||
<el-icon><Right /></el-icon>
|
||||
</span>
|
||||
<span style="margin-right: 5px"> ↓ </span>
|
||||
<Location
|
||||
v-if="scope.row.location"
|
||||
:location="scope.row.location"
|
||||
@@ -91,7 +88,7 @@
|
||||
</template>
|
||||
</div>
|
||||
<span style="position: relative; margin: 0 10px">
|
||||
<el-icon><Right /></el-icon>
|
||||
{{ ' → ' }}
|
||||
</span>
|
||||
|
||||
<div style="display: inline-block; vertical-align: top; width: 160px">
|
||||
@@ -116,9 +113,7 @@
|
||||
<i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
|
||||
<span style="margin-left: 5px" v-text="scope.row.previousStatusDescription"></span>
|
||||
<br />
|
||||
<span>
|
||||
<el-icon><Right /></el-icon>
|
||||
</span>
|
||||
<span> → </span>
|
||||
|
||||
<i class="x-user-status" :class="statusClass(scope.row.status)" style="margin: 0 5px"></i>
|
||||
<span v-text="scope.row.statusDescription"></span>
|
||||
@@ -132,27 +127,29 @@
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.feed.date')" prop="created_at" width="130">
|
||||
<el-table-column :label="t('table.feed.date')" prop="created_at" width="140">
|
||||
<template #default="scope">
|
||||
<NativeTooltip placement="right">
|
||||
<el-tooltip placement="right">
|
||||
<template #content>
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'long') }}</span>
|
||||
</template>
|
||||
<span>{{ formatDateFilter(scope.row.created_at, 'short') }}</span>
|
||||
</NativeTooltip>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.feed.type')" prop="type" width="80">
|
||||
<el-table-column :label="t('table.feed.type')" prop="type" width="130">
|
||||
<template #default="scope">
|
||||
<span v-text="t('view.feed.filters.' + scope.row.type)"></span>
|
||||
<el-tag type="info" effect="plain" size="small">{{
|
||||
t('view.feed.filters.' + scope.row.type)
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column :label="t('table.feed.user')" prop="displayName" width="180">
|
||||
<el-table-column :label="t('table.feed.user')" prop="displayName" width="190">
|
||||
<template #default="scope">
|
||||
<span
|
||||
class="x-link"
|
||||
class="x-link table-user"
|
||||
style="padding-right: 10px"
|
||||
@click="showUserDialog(scope.row.userId)"
|
||||
v-text="scope.row.displayName"></span>
|
||||
@@ -178,17 +175,12 @@
|
||||
<template v-else-if="scope.row.type === 'Status'">
|
||||
<template v-if="scope.row.statusDescription === scope.row.previousStatusDescription">
|
||||
<i class="x-user-status" :class="statusClass(scope.row.previousStatus)"></i>
|
||||
<span style="margin: 0 5px">
|
||||
<el-icon><Right /></el-icon>
|
||||
</span>
|
||||
<span class="mx-2"> → </span>
|
||||
|
||||
<i class="x-user-status" :class="statusClass(scope.row.status)"></i>
|
||||
</template>
|
||||
<template v-else>
|
||||
<i
|
||||
class="x-user-status"
|
||||
:class="statusClass(scope.row.status)"
|
||||
style="margin-right: 3px"></i>
|
||||
<i class="x-user-status mr-2" :class="statusClass(scope.row.status)"></i>
|
||||
<span v-text="scope.row.statusDescription"></span>
|
||||
</template>
|
||||
</template>
|
||||
@@ -210,13 +202,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Right } from '@element-plus/icons-vue';
|
||||
import { computed } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import { formatDateFilter, statusClass, timeToText } from '../../shared/utils';
|
||||
import { useFeedStore, useUserStore } from '../../stores';
|
||||
import { useTableHeight } from '../../composables/useTableHeight';
|
||||
|
||||
const { showUserDialog } = useUserStore();
|
||||
const { feedTable } = storeToRefs(useFeedStore());
|
||||
@@ -226,6 +218,8 @@
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const { containerRef: feedRef } = useTableHeight(feedTable);
|
||||
|
||||
/**
|
||||
* Function that format the differences between two strings with HTML tags
|
||||
* markerStartTag and markerEndTag are optional, if emitted, the differences will be highlighted with yellow and underlined.
|
||||
@@ -341,3 +335,9 @@
|
||||
.replace(/<br> /g, '<br>');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-user {
|
||||
color: var(--x-table-user-text-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user