From f203173c6cb22a5eb6883f28fb5f520fb5353c9a Mon Sep 17 00:00:00 2001 From: NGPixel Date: Sat, 3 Mar 2018 21:48:28 -0500 Subject: [PATCH] feat: admin - UI optimizations + search, auth UI --- client/components/admin-auth.vue | 53 +++++++++++++++++ client/components/admin-dashboard.vue | 2 +- client/components/admin-general.vue | 2 +- client/components/admin-locale.vue | 4 +- client/components/admin-search.vue | 54 +++++++++++++++++ client/components/admin-system.vue | 4 +- client/components/admin-theme.vue | 4 +- client/components/admin-users.vue | 86 +++++++++++++++++++++++---- client/components/admin.vue | 2 + client/scss/base/base.scss | 6 ++ 10 files changed, 196 insertions(+), 21 deletions(-) create mode 100644 client/components/admin-auth.vue create mode 100644 client/components/admin-search.vue diff --git a/client/components/admin-auth.vue b/client/components/admin-auth.vue new file mode 100644 index 00000000..3eed7281 --- /dev/null +++ b/client/components/admin-auth.vue @@ -0,0 +1,53 @@ + + + + + diff --git a/client/components/admin-dashboard.vue b/client/components/admin-dashboard.vue index 18735d56..c38a3252 100644 --- a/client/components/admin-dashboard.vue +++ b/client/components/admin-dashboard.vue @@ -2,7 +2,7 @@ v-container(fluid, fill-height) v-layout(row wrap) v-flex(xs12) - .headline.blue--text.text--darken-2 Dashboard + .headline.primary--text Dashboard .subheading.grey--text Coming soon diff --git a/client/components/admin-general.vue b/client/components/admin-general.vue index 9449bc84..efda2bfa 100644 --- a/client/components/admin-general.vue +++ b/client/components/admin-general.vue @@ -2,7 +2,7 @@ v-container(fluid, fill-height, grid-list-lg) v-layout(row wrap) v-flex(xs12) - .headline.blue--text.text--darken-2 General + .headline.primary--text General .subheading.grey--text Main settings of your wiki v-form.pt-3 v-layout(row wrap) diff --git a/client/components/admin-locale.vue b/client/components/admin-locale.vue index 0b410916..d1f8f058 100644 --- a/client/components/admin-locale.vue +++ b/client/components/admin-locale.vue @@ -2,7 +2,7 @@ v-container(fluid, fill-height, grid-list-lg) v-layout(row wrap) v-flex(xs12) - .headline.blue--text.text--darken-2 Locale + .headline.primary--text Locale .subheading.grey--text Set localization options for your wiki v-form.pt-3 v-layout(row wrap) @@ -21,7 +21,7 @@ v-list-tile-title(v-html='data.item.text') v-list-tile-sub-title(v-html='data.item.original') v-divider - v-switch(v-model='rtlEnabled', label='RTL Text Display', color='blue darken-2', persistent-hint, hint='For Right-to-Left languages, e.g. Arabic') + v-switch(v-model='rtlEnabled', label='RTL Text Display', color='primary', persistent-hint, hint='For Right-to-Left languages, e.g. Arabic') v-flex(lg6 xs12) v-card v-toolbar(color='blue', dark, dense, flat) diff --git a/client/components/admin-search.vue b/client/components/admin-search.vue new file mode 100644 index 00000000..990e2f87 --- /dev/null +++ b/client/components/admin-search.vue @@ -0,0 +1,54 @@ + + + + + diff --git a/client/components/admin-system.vue b/client/components/admin-system.vue index 133b9b39..e28363cd 100644 --- a/client/components/admin-system.vue +++ b/client/components/admin-system.vue @@ -2,7 +2,7 @@ v-container(fluid, fill-height, grid-list-lg) v-layout(row, wrap) v-flex(xs12) - .headline.blue--text.text--darken-2 System Info + .headline.primary--text System Info .subheading.grey--text Information about your system v-layout.mt-3(row wrap) v-flex(lg6 xs12) @@ -68,7 +68,7 @@ v-avatar.light-green(size='40') icon-node-js(fillColor='#FFFFFF') v-list-tile-content - v-list-tile-title v8.9.4 + v-list-tile-title 8.9.4 v-divider diff --git a/client/components/admin-theme.vue b/client/components/admin-theme.vue index 26a9b02c..715cfee0 100644 --- a/client/components/admin-theme.vue +++ b/client/components/admin-theme.vue @@ -2,7 +2,7 @@ v-container(fluid, fill-height, grid-list-lg) v-layout(row wrap) v-flex(xs12) - .headline.blue--text.text--darken-2 Theme + .headline.primary--text Theme .subheading.grey--text Modify the look & feel of your wiki v-form.pt-3 v-layout(row wrap) @@ -21,7 +21,7 @@ v-list-tile-title(v-html='data.item.text') v-list-tile-sub-title(v-html='data.item.author') v-divider - v-switch(v-model='darkMode', label='Dark Mode', color='blue darken-2', persistent-hint, hint='Not recommended for accessibility') + v-switch(v-model='darkMode', label='Dark Mode', color='primary', persistent-hint, hint='Not recommended for accessibility') v-flex(lg6 xs12) v-card v-toolbar(color='blue', dark, dense, flat) diff --git a/client/components/admin-users.vue b/client/components/admin-users.vue index dc37be9b..b5b1c23c 100644 --- a/client/components/admin-users.vue +++ b/client/components/admin-users.vue @@ -6,8 +6,14 @@ .subheading.grey--text Manage users v-card.mt-3.elevation-1 v-card-title - v-btn() New User - v-btn() Authorize User + v-btn(color='primary', dark) + v-icon(left) add + | New User + v-btn(color='primary', dark) + v-icon(left) lock_outline + | Authorize User + v-btn(icon) + v-icon.grey--text refresh v-spacer v-text-field(append-icon='search', label='Search', single-line, hide-details, v-model='search') v-data-table( @@ -16,17 +22,41 @@ :headers='headers', :search='search', :pagination.sync='pagination', + :rows-per-page-items='[15]' select-all, - hide-actions + hide-actions, + disable-initial-sort ) + template(slot='headers', slot-scope='props') + tr + th(width='50') + th.text-xs-right( + width='80' + :class='[`column sortable`, pagination.descending ? `desc` : `asc`, pagination.sortBy === `id` ? `active` : ``]' + @click='changeSort(`id`)' + ) + v-icon(small) arrow_upward + | ID + th.text-xs-left( + v-for='header in props.headers' + :key='header.text' + :width='header.width' + :class='[`column sortable`, pagination.descending ? `desc` : `asc`, header.value === pagination.sortBy ? `active` : ``]' + @click='changeSort(header.value)' + ) + | {{ header.text }} + v-icon(small) arrow_upward template(slot='items', slot-scope='props') - tr(:active='props.selected', @click='props.selected = !props.selected') + tr(:active='props.selected') td - v-checkbox(hide-details, :input-value='props.selected') + v-checkbox(hide-details, :input-value='props.selected', color='blue darken-2', @click='props.selected = !props.selected') td.text-xs-right {{ props.item.id }} td {{ props.item.email }} td {{ props.item.name }} td {{ props.item.provider }} + td {{ props.item.createdOn }} + td {{ props.item.updatedOn }} + td: v-btn(icon): v-icon.grey--text.text--darken-1 more_horiz template(slot='no-data') v-alert(icon='warning', :value='true') No users to display! .text-xs-center.py-2 @@ -40,21 +70,34 @@ export default { selected: [], pagination: {}, items: [ - { id: 1, email: 'user@test.com', name: 'John Doe', provider: 'local' } + { id: 1, email: 'user@test.com', name: 'John Doe', provider: 'local' }, + { id: 2, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 3, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 4, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 5, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 6, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 7, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 8, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 9, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 10, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 11, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 12, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 13, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 14, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 15, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 16, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 17, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 18, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 19, email: 'dude@test.com', name: 'John Doe', provider: 'local' }, + { id: 20, email: 'dude@test.com', name: 'John Doe', provider: 'local' } ], headers: [ - { - text: 'ID', - align: 'right', - value: 'id', - width: 80 - }, { text: 'Email', value: 'email' }, { text: 'Name', value: 'name' }, { text: 'Provider', value: 'provider' }, { text: 'Created On', value: 'createdOn' }, { text: 'Updated On', value: 'updatedOn' }, - { text: 'Actions', value: 'actions', sortable: false } + { text: '', value: 'actions', sortable: false, width: 50 } ], search: '' } @@ -67,6 +110,23 @@ export default { return Math.ceil(this.pagination.totalItems / this.pagination.rowsPerPage) } + }, + methods: { + changeSort (column) { + if (this.pagination.sortBy === column) { + this.pagination.descending = !this.pagination.descending + } else { + this.pagination.sortBy = column + this.pagination.descending = false + } + }, + toggleAll () { + if (this.selected.length) { + this.selected = [] + } else { + this.selected = this.items.slice() + } + } } } diff --git a/client/components/admin.vue b/client/components/admin.vue index cc73c50f..1efd31da 100644 --- a/client/components/admin.vue +++ b/client/components/admin.vue @@ -81,6 +81,8 @@ const router = new VueRouter({ { path: '/locale', component: () => import(/* webpackChunkName: "admin" */ './admin-locale.vue') }, { path: '/theme', component: () => import(/* webpackChunkName: "admin" */ './admin-theme.vue') }, { path: '/users', component: () => import(/* webpackChunkName: "admin" */ './admin-users.vue') }, + { path: '/auth', component: () => import(/* webpackChunkName: "admin" */ './admin-auth.vue') }, + { path: '/search', component: () => import(/* webpackChunkName: "admin" */ './admin-search.vue') }, { path: '/system', component: () => import(/* webpackChunkName: "admin" */ './admin-system.vue') } ] }) diff --git a/client/scss/base/base.scss b/client/scss/base/base.scss index 3e070e28..7a154787 100644 --- a/client/scss/base/base.scss +++ b/client/scss/base/base.scss @@ -41,6 +41,12 @@ html { padding: 20px; } +.datatable { + th, td { + vertical-align: middle; + } +} + // Visibility .is-hidden {