modify style

This commit is contained in:
MaysWind
2023-07-09 01:04:24 +08:00
parent d013f67c70
commit 0b26b75699
2 changed files with 92 additions and 84 deletions
+84 -83
View File
@@ -45,7 +45,7 @@
</thead> </thead>
<tbody> <tbody>
<tr v-for="idx in loading ? [1, 2, 3] : []"> <tr v-for="idx in (loading && noAvailableTag ? [1, 2, 3] : [])">
<td class="px-0" colspan="2"> <td class="px-0" colspan="2">
<v-skeleton-loader type="text" :loading="true"></v-skeleton-loader> <v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
</td> </td>
@@ -55,94 +55,95 @@
<td colspan="2">{{ $t('No available tag') }}</td> <td colspan="2">{{ $t('No available tag') }}</td>
</tr> </tr>
<tr :key="tag.id" <template :key="tag.id" v-for="tag in tags">
v-show="!loading && (showHidden || !tag.hidden)" <tr v-if="showHidden || !tag.hidden">
v-for="tag in tags"> <td>
<td> <div class="d-flex align-center" v-if="editingTag.id !== tag.id">
<div class="d-flex align-center" v-if="editingTag.id !== tag.id">
<v-badge class="right-bottom-icon" color="secondary"
location="bottom right" offset-x="8" :icon="icons.hide"
v-if="tag.hidden">
<v-icon size="24" start :icon="icons.tag"/>
</v-badge>
<v-icon size="24" start :icon="icons.tag" v-else-if="!tag.hidden"/>
{{ tag.name }}
</div>
<v-text-field
type="text"
clearable
density="compact"
variant="underlined"
:disabled="updating"
:placeholder="$t('Tag Title')"
v-model="editingTag.name"
v-else-if="editingTag.id === tag.id"
@keyup.enter="save(newTag)"
>
<template #prepend>
<v-badge class="right-bottom-icon" color="secondary" <v-badge class="right-bottom-icon" color="secondary"
location="bottom right" offset-x="8" :icon="icons.hide" location="bottom right" offset-x="8" :icon="icons.hide"
v-if="tag.hidden"> v-if="tag.hidden">
<v-icon size="24" start :icon="icons.tag"/> <v-icon size="24" start :icon="icons.tag"/>
</v-badge> </v-badge>
<v-icon size="24" start :icon="icons.tag" v-else-if="!tag.hidden"/> <v-icon size="24" start :icon="icons.tag" v-else-if="!tag.hidden"/>
</template> {{ tag.name }}
</v-text-field> </div>
</td> <v-text-field
<td class="text-uppercase text-center"> type="text"
<v-btn color="default" clearable
density="comfortable" density="compact"
variant="text" variant="underlined"
:icon="true" :disabled="updating"
:loading="tagUpdating[tag.id]" :placeholder="$t('Tag Title')"
:disabled="updating" v-model="editingTag.name"
v-if="editingTag.id !== tag.id" v-else-if="editingTag.id === tag.id"
@click="edit(tag)"> @keyup.enter="save(newTag)"
<v-icon size="24" :icon="icons.edit"/> >
<v-tooltip activator="parent">{{ $t('Edit') }}</v-tooltip> <template #prepend>
</v-btn> <v-badge class="right-bottom-icon" color="secondary"
<v-btn color="default" location="bottom right" offset-x="8" :icon="icons.hide"
density="comfortable" v-if="tag.hidden">
variant="text" <v-icon size="24" start :icon="icons.tag"/>
:icon="true" </v-badge>
:disabled="updating" <v-icon size="24" start :icon="icons.tag" v-else-if="!tag.hidden"/>
v-if="editingTag.id !== tag.id"> </template>
<v-icon size="24" :icon="icons.more"/> </v-text-field>
<v-tooltip activator="parent">{{ $t('More') }}</v-tooltip> </td>
<v-menu activator="parent"> <td class="text-uppercase text-center">
<v-list> <v-btn color="default"
<v-list-item :prepend-icon="tag.hidden ? icons.show : icons.hide" density="comfortable"
:title="tag.hidden ? $t('Show') : $t('Hide')" variant="text"
@click="hide(tag, !tag.hidden)"> :icon="true"
</v-list-item> :loading="tagUpdating[tag.id]"
<v-list-item :prepend-icon="icons.remove" :disabled="updating"
:title="$t('Delete')" @click="remove(tag)"> v-if="editingTag.id !== tag.id"
</v-list-item> @click="edit(tag)">
</v-list> <v-icon size="24" :icon="icons.edit"/>
</v-menu> <v-tooltip activator="parent">{{ $t('Edit') }}</v-tooltip>
</v-btn> </v-btn>
<v-btn density="comfortable" <v-btn color="default"
variant="text" density="comfortable"
:icon="true" variant="text"
:loading="tagUpdating[tag.id]" :icon="true"
:disabled="updating || !isTagModified(tag)" :disabled="updating"
v-if="editingTag.id === tag.id" v-if="editingTag.id !== tag.id">
@click="save(editingTag)"> <v-icon size="24" :icon="icons.more"/>
<v-icon size="24" :icon="icons.confirm"/> <v-tooltip activator="parent">{{ $t('More') }}</v-tooltip>
<v-tooltip activator="parent">{{ $t('Save') }}</v-tooltip> <v-menu activator="parent">
</v-btn> <v-list>
<v-btn class="ml-2" color="default" <v-list-item :prepend-icon="tag.hidden ? icons.show : icons.hide"
density="comfortable" :title="tag.hidden ? $t('Show') : $t('Hide')"
variant="text" @click="hide(tag, !tag.hidden)">
:icon="true" </v-list-item>
:disabled="updating" <v-list-item :prepend-icon="icons.remove"
v-if="editingTag.id === tag.id" :title="$t('Delete')" @click="remove(tag)">
@click="cancelSave(editingTag)"> </v-list-item>
<v-icon size="24" :icon="icons.cancel"/> </v-list>
<v-tooltip activator="parent">{{ $t('Cancel') }}</v-tooltip> </v-menu>
</v-btn> </v-btn>
</td> <v-btn density="comfortable"
</tr> variant="text"
:icon="true"
:loading="tagUpdating[tag.id]"
:disabled="updating || !isTagModified(tag)"
v-if="editingTag.id === tag.id"
@click="save(editingTag)">
<v-icon size="24" :icon="icons.confirm"/>
<v-tooltip activator="parent">{{ $t('Save') }}</v-tooltip>
</v-btn>
<v-btn class="ml-2" color="default"
density="comfortable"
variant="text"
:icon="true"
:disabled="updating"
v-if="editingTag.id === tag.id"
@click="cancelSave(editingTag)">
<v-icon size="24" :icon="icons.cancel"/>
<v-tooltip activator="parent">{{ $t('Cancel') }}</v-tooltip>
</v-btn>
</td>
</tr>
</template>
<tr v-if="newTag"> <tr v-if="newTag">
<td> <td>
<v-text-field <v-text-field
@@ -99,7 +99,14 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr :key="session.tokenId" v-for="session in sessions"> <tr v-for="idx in (loadingSession && (!sessions || sessions.length < 1) ? [1, 2, 3] : [])">
<td class="px-0" colspan="4">
<v-skeleton-loader type="text" :loading="true"></v-skeleton-loader>
</td>
</tr>
<tr :key="session.tokenId"
v-for="session in sessions">
<td> <td>
<v-icon start :icon="session.icon"/> <v-icon start :icon="session.icon"/>
{{ session.deviceType }} {{ session.deviceType }}