Ux improves (#1103)

* ux-improves * ui improvements
2026-05-06 06:46:04 +02:00 · 2025-01-27 07:39:30 +09:00
parent 212934f08c
commit d3bcaf130a
13 changed files with 2790 additions and 1216 deletions
@@ -1,24 +1,54 @@
-mixin friendLogTab()
-    .x-container(v-if="$refs.menu && $refs.menu.activeIndex === 'friendLog'")
-        data-tables(v-bind="friendLogTable" ref="friendLogTableRef")
+mixin friendLogTab
+    .x-container(v-if='$refs.menu && $refs.menu.activeIndex === "friendLog"')
+        data-tables(v-bind='friendLogTable' ref='friendLogTableRef')
            template(#tool)
-                div(style="margin:0 0 10px;display:flex;align-items:center")
-                    el-select(v-model="friendLogTable.filters[0].value" @change="saveTableFilters" multiple clearable style="flex:1" :placeholder="$t('view.friend_log.filter_placeholder')")
-                        el-option(v-for="type in ['Friend', 'Unfriend', 'FriendRequest', 'CancelFriendRequest', 'DisplayName', 'TrustLevel']" :key="type" :label="$t('view.friend_log.filters.' + type)" :value="type")
-                    el-input(v-model="friendLogTable.filters[1].value" :placeholder="$t('view.friend_log.search_placeholder')" style="flex:none;width:150px;margin-left:10px")
-            el-table-column(:label="$t('table.friendLog.date')" prop="created_at" sortable="custom" width="200")
-                template(#default="scope")
-                    span {{ scope.row.created_at | formatDate('long') }}
-            el-table-column(:label="$t('table.friendLog.type')" prop="type" width="150")
-                template(#default="scope")
-                    span(v-text="$t('view.friend_log.filters.' + scope.row.type)")
-            el-table-column(:label="$t('table.friendLog.user')" prop="displayName")
-                template(#default="scope")
-                    span(v-if="scope.row.type === 'DisplayName'") {{ scope.row.previousDisplayName }} #[i.el-icon-right]&nbsp;
-                    span.x-link(v-text="scope.row.displayName || scope.row.userId" @click="showUserDialog(scope.row.userId)" style="padding-right:10px")
-                    template(v-if="scope.row.type === 'TrustLevel'")
-                        span  ({{ scope.row.previousTrustLevel }} #[i.el-icon-right] {{ scope.row.trustLevel }})
-            el-table-column(:label="$t('table.friendLog.action')" width="80" align="right")
-                template(#default="scope")
-                    el-button(v-if="shiftHeld" style="color:#f56c6c" type="text" icon="el-icon-close" size="mini" @click="deleteFriendLog(scope.row)")
-                    el-button(v-else type="text" icon="el-icon-delete" size="mini" @click="deleteFriendLogPrompt(scope.row)")
+                div(style='margin: 0 0 10px; display: flex; align-items: center')
+                    el-select(
+                        v-model='friendLogTable.filters[0].value'
+                        @change='saveTableFilters'
+                        multiple
+                        clearable
+                        style='flex: 1'
+                        :placeholder='$t("view.friend_log.filter_placeholder")')
+                        el-option(
+                            v-for='type in ["Friend", "Unfriend", "FriendRequest", "CancelFriendRequest", "DisplayName", "TrustLevel"]'
+                            :key='type'
+                            :label='$t("view.friend_log.filters." + type)'
+                            :value='type')
+                    el-input(
+                        v-model='friendLogTable.filters[1].value'
+                        :placeholder='$t("view.friend_log.search_placeholder")'
+                        style='flex: none; width: 150px; margin-left: 10px')
+            el-table-column(:label='$t("table.friendLog.date")' prop='created_at' sortable='custom' width='200')
+                template(#default='scope')
+                    el-tooltip(placement='right')
+                        template(#content)
+                            span {{ scope.row.created_at | formatDate('long') }}
+                        span {{ scope.row.created_at | formatDate('short') }}
+            el-table-column(:label='$t("table.friendLog.type")' prop='type' width='150')
+                template(#default='scope')
+                    span(v-text='$t("view.friend_log.filters." + scope.row.type)')
+            el-table-column(:label='$t("table.friendLog.user")' prop='displayName')
+                template(#default='scope')
+                    span(v-if='scope.row.type === "DisplayName"') {{ scope.row.previousDisplayName }} #[i.el-icon-right]&nbsp;
+                    span.x-link(
+                        v-text='scope.row.displayName || scope.row.userId'
+                        @click='showUserDialog(scope.row.userId)'
+                        style='padding-right: 10px')
+                    template(v-if='scope.row.type === "TrustLevel"')
+                        span ({{ scope.row.previousTrustLevel }} #[i.el-icon-right] {{ scope.row.trustLevel }})
+            el-table-column(:label='$t("table.friendLog.action")' width='80' align='right')
+                template(#default='scope')
+                    el-button(
+                        v-if='shiftHeld'
+                        style='color: #f56c6c'
+                        type='text'
+                        icon='el-icon-close'
+                        size='mini'
+                        @click='deleteFriendLog(scope.row)')
+                    el-button(
+                        v-else
+                        type='text'
+                        icon='el-icon-delete'
+                        size='mini'
+                        @click='deleteFriendLogPrompt(scope.row)')