From 03c1ee19fa39b92cddde2db2273366a2a0c525a7 Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 1 Oct 2019 22:54:13 +0300
Subject: [PATCH] Update card with user information
---
src/lang/en.js | 11 +++-
src/views/users/show.vue | 119 +++++++++++++++++++++------------------
2 files changed, 72 insertions(+), 58 deletions(-)
diff --git a/src/lang/en.js b/src/lang/en.js
index d4893455..40fd758d 100644
--- a/src/lang/en.js
+++ b/src/lang/en.js
@@ -236,11 +236,16 @@ export default {
tags: 'Tags',
moderator: 'Moderator',
admin: 'Admin',
- local: 'Local',
+ local: 'local',
+ external: 'external',
+ localUppercase: 'Local',
nickname: 'Nickname',
- deactivated: 'Deactivated',
recentStatuses: 'Recent Statues',
- showPrivateStatuses: 'Show private statuses'
+ showPrivateStatuses: 'Show private statuses',
+ roles: 'Roles',
+ activeUppercase: 'Active',
+ active: 'active',
+ deactivated: 'deactivated'
},
usersFilter: {
inputPlaceholder: 'Select filter',
diff --git a/src/views/users/show.vue b/src/views/users/show.vue
index f721a7f5..886474bc 100644
--- a/src/views/users/show.vue
+++ b/src/views/users/show.vue
@@ -5,60 +5,56 @@
<h1>{{ user.display_name }}</h1>
</header>
<el-row>
- <el-col :span="6">
- <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
- <table class="el-table__body">
- <tbody>
- <tr class="el-table__row">
- <td class="name-col">ID</td>
- <td class="value-col">
- {{ user.id }}
- </td>
- </tr>
- <tr class="el-table__row">
- <td>{{ $t('userProfile.tags') }}</td>
- <td>
- <el-tag v-for="tag in user.tags" :key="tag">{{ tag }}</el-tag>
- <span v-if="user.tags.length === 0">None</span>
- </td>
- </tr>
- <tr class="el-table__row">
- <td>{{ $t('userProfile.moderator') }}</td>
- <td>
- <el-tag v-if="user.roles.moderator" type="success"><i class="el-icon-check" /></el-tag>
- <el-tag v-if="!user.roles.moderator" type="danger"><i class="el-icon-error" /></el-tag>
- </td>
- </tr>
- <tr class="el-table__row">
- <td>{{ $t('userProfile.admin') }}</td>
- <td>
- <el-tag v-if="user.roles.admin" type="success"><i class="el-icon-check" /></el-tag>
- <el-tag v-if="!user.roles.admin" type="danger"><i class="el-icon-error" /></el-tag>
- </td>
- </tr>
- <tr class="el-table__row">
- <td>{{ $t('userProfile.local') }}</td>
- <td>
- <el-tag v-if="user.local" type="success"><i class="el-icon-check" /></el-tag>
- <el-tag v-if="!user.local" type="danger"><i class="el-icon-error" /></el-tag>
- </td>
- </tr>
- <tr class="el-table__row">
- <td>{{ $t('userProfile.deactivated') }}</td>
- <td>
- <el-tag v-if="user.deactivated" type="success"><i class="el-icon-check" /></el-tag>
- <el-tag v-if="!user.deactivated" type="danger"><i class="el-icon-error" /></el-tag>
- </td>
- </tr>
- <tr class="el-table__row">
- <td>{{ $t('userProfile.nickname') }}</td>
- <td>
- {{ user.nickname }}
- </td>
- </tr>
- </tbody>
- </table>
- </div>
+ <el-col :span="8">
+ <el-card class="user-profile-card">
+ <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
+ <table class="user-profile-table">
+ <tbody>
+ <tr class="el-table__row">
+ <td>{{ $t('userProfile.nickname') }}</td>
+ <td>
+ {{ user.nickname }}
+ </td>
+ </tr>
+ <tr class="el-table__row">
+ <td class="name-col">ID</td>
+ <td class="value-col">
+ {{ user.id }}
+ </td>
+ </tr>
+ <tr class="el-table__row">
+ <td>{{ $t('userProfile.tags') }}</td>
+ <td>
+ <el-tag v-for="tag in user.tags" :key="tag" class="user-profile-tag">{{ tag }}</el-tag>
+ <span v-if="user.tags.length === 0">—</span>
+ </td>
+ </tr>
+ <tr class="el-table__row">
+ <td>{{ $t('userProfile.roles') }}</td>
+ <td>
+ <el-tag v-if="user.roles.moderator" class="user-profile-tag"/>
+ <el-tag v-if="user.roles.admin" class="user-profile-tag"/>
+ <span v-if="!user.roles.moderator && !user.roles.admin">—</span>
+ </td>
+ </tr>
+ <tr class="el-table__row">
+ <td>{{ $t('userProfile.localUppercase') }}</td>
+ <td>
+ <el-tag v-if="user.local" type="info">{{ $t('userProfile.local') }}</el-tag>
+ <el-tag v-if="!user.local" type="info">{{ $t('userProfile.external') }}</el-tag>
+ </td>
+ </tr>
+ <tr class="el-table__row">
+ <td>{{ $t('userProfile.activeUppercase') }}</td>
+ <td>
+ <el-tag v-if="user.deactivated" type="success">{{ $t('userProfile.active') }}</el-tag>
+ <el-tag v-if="!user.deactivated" type="danger">{{ $t('userProfile.deactivated') }}</el-tag>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </el-card>
</el-col>
<el-row type="flex" class="row-bg" justify="space-between">
<el-col :span="18">
@@ -147,8 +143,11 @@ table {
width: 100%;
}
}
+.recent-statuses-header {
+ margin-top: 10px;
+}
.statuses {
- padding-right: 20px;
+ padding: 0 20px 0 0;
}
.show-private {
text-align: right;
@@ -158,4 +157,14 @@ table {
.recent-statuses {
margin-left: 40px;
}
+.user-profile-card {
+ margin-left: 15px;
+ margin-right: 20px;
+}
+.user-profile-table {
+ margin: 0;
+}
+.user-profile-tag {
+ margin: 0 4px 4px 0;
+}
</style>
--
GitLab