Skip to content

W
wiki-js
Commit 8ea699ac authored by NGPixel's avatar NGPixel Committed by Nicolas Giard
Browse files
Options

fix: user profile UI

fix: user profile UI
parent 98f3cc55
Hide whitespace changes
Inline Side-by-side
Showing with 77 additions and 59 deletions
client/components/profile.vue
View file @ 8ea699ac
......@@ -2,21 +2,26 @@
v-app(:dark='darkMode').profile
nav-header
v-navigation-drawer.pb-0(v-model='profileDrawerShown', app, fixed, clipped, left, permanent)
v-list(dense)
v-list-item.pt-2(to='/profile')
v-list-item-action: v-icon account_circle
v-list-item-title Profile
v-list-item(to='/preferences')
v-list-item-action: v-icon settings
v-list-item-title Preferences
v-divider.my-2
v-subheader My Content
v-list-item(to='/pages')
v-list-item-action: v-icon pages
v-list-item-title Pages
v-list-item(to='/comments')
v-list-item-action: v-icon question_answer
v-list-item-title Comments
v-list(dense, nav)
v-list-item(to='/profile')
v-list-item-action: v-icon mdi-account-badge
v-list-item-content
v-list-item-title Profile
v-list-item(to='/preferences', disabled)
v-list-item-action: v-icon(color='grey lighten-1') mdi-settings-outline
v-list-item-content
v-list-item-title Preferences
v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
v-list-item(to='/pages', disabled)
v-list-item-action: v-icon(color='grey lighten-1') mdi-file-document
v-list-item-content
v-list-item-title Pages
v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
v-list-item(to='/comments', disabled)
v-list-item-action: v-icon(color='grey lighten-1') mdi-message-reply-text
v-list-item-content
v-list-item-title Comments
v-list-item-subtitle.caption.grey--text.text--lighten-1 Coming soon
v-content
transition(name='profile-router')
......@@ -84,4 +89,14 @@ export default {
}
}
.profile-header {
display: flex;
justify-content: flex-start;
align-items: center;
&-title {
margin-left: 1rem;
}
}
</style>
client/components/profile/profile.vue
View file @ 8ea699ac
<template lang='pug'>
v-container(fluid, grid-list-lg)
v-layout(row wrap)
v-flex(xs6)
.headline.primary--text Profile
.subheading.grey--text Personal profile
v-flex(xs6).text-xs-right
v-btn(outline, color='primary').mr-0
v-icon(left) public
span View Public Profile
v-flex(xs12)
.profile-header
img.animated.fadeInUp(src='/svg/icon-profile.svg', alt='Users', style='width: 80px;')
.profile-header-title
.headline.primary--text.animated.fadeInLeft Profile
.subheading.grey--text.animated.fadeInLeft Personal profile
v-spacer
v-btn.animated.fadeInDown(outlined, color='primary', disabled).mr-0
v-icon(left) mdi-earth
span View Public Profile
v-flex(lg6 xs12)
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading User Details
v-toolbar-title.subtitle-1 User Details
v-card-text
v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='person')
v-text-field(label='Job Title', :counter='255', prepend-icon='accessibility')
v-text-field(label='Location / Office', :counter='255', prepend-icon='location_on')
v-text-field(label='Name', :counter='255', v-model='name', prepend-icon='mdi-account')
v-text-field(label='Job Title', :counter='255', prepend-icon='mdi-human')
v-text-field(label='Location / Office', :counter='255', prepend-icon='mdi-map-marker')
v-card-chin
v-spacer
v-btn(color='primary')
v-icon(left) chevron_right
span Save
v-btn.px-4(color='success')
v-icon(left) mdi-content-save
span {{$t('common:actions.save')}}
v-card.mt-3
v-toolbar(color='purple darken-4', dark, dense, flat)
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Authentication
.subtitle-1 Authentication
v-card-text
v-subheader.pl-0 Provider
v-toolbar(
flat
:color='darkMode ? "grey darken-2" : "purple lighten-5"'
:color='$vuetify.theme.dark ? "grey darken-2" : "purple lighten-5"'
dense
:class='darkMode ? "grey--text text--lighten-1" : "purple--text text--darken-4"'
:class='$vuetify.theme.dark ? "grey--text text--lighten-1" : "purple--text text--darken-4"'
)
v-icon(:color='darkMode ? "grey lighten-1" : "purple darken-4"') supervised_user_circle
v-icon(:color='$vuetify.theme.dark ? "grey lighten-1" : "purple darken-4"') mdi-shield-lock
.subheading.ml-3 Local
v-divider.mt-3
v-subheader.pl-0 Two-Factor Authentication (2FA)
.caption.mb-2 2FA adds an extra layer of security by requiring a unique code generated on your smartphone when signing in.
v-btn(color='purple darken-4', dark, depressed).ml-0 Enable 2FA
v-btn(color='purple darken-4', disabled).ml-0 Enable 2FA
v-btn(color='purple darken-4', dark, depressed, disabled).ml-0 Disable 2FA
v-divider.mt-3
v-subheader.pl-0 Change Password
v-text-field(label='Current Password', prepend-icon='last_page')
v-text-field(label='New Password', prepend-icon='last_page')
v-text-field(label='Confirm New Password', prepend-icon='last_page')
v-btn(color='purple darken-4', dark, depressed).ml-0 Change Password
v-text-field(label='Current Password', type='password', prepend-icon='mdi-textbox-password')
v-text-field(label='New Password', type='password', prepend-icon='mdi-textbox-password')
v-text-field(label='Confirm New Password', type='password', prepend-icon='mdi-textbox-password')
v-card-chin
v-spacer
v-btn.px-4(color='purple darken-4', dark)
v-icon(left) mdi-progress-check
span Change Password
v-flex(lg6 xs12)
v-card
v-toolbar(color='primary', dark, dense, flat)
v-toolbar-title
.subheading Picture
.subtitle-1 Picture
v-card-title
v-avatar(size='64', color='grey')
v-icon(size='64', color='grey lighten-2') account_circle
v-btn(depressed).ml-4.elevation-1 Upload Picture
v-icon(size='64', color='grey lighten-2') mdi-account-circle
v-btn(depressed).mx-4.elevation-1 Upload Picture
v-btn(depressed, disabled).elevation-1 Remove Picture
v-card.mt-3
v-toolbar(color='teal', dark, dense, flat)
v-toolbar-title
.subheading Activity
.subtitle-1 Activity
v-card-text.grey--text.text--darken-2
.body-2.grey--text Joined on
.body-1: strong January 1st, 2018 at 12:00 AM
.body-2.grey--text.mt-3 Profile last updated on
.body-1: strong January 1st, 2018 at 12:00 AM
.body-2.grey--text.mt-3 Last login on
.body-1: strong January 1st, 2018 at 12:00 AM
.caption.grey--text Joined on
.body-2: strong January 1st, 2018 at 12:00 AM
.caption.grey--text.mt-3 Profile last updated on
.body-2: strong January 1st, 2018 at 12:00 AM
.caption.grey--text.mt-3 Last login on
.body-2: strong January 1st, 2018 at 12:00 AM
v-divider.mt-3
.body-2.grey--text.mt-3 Pages created
.body-1: strong 0
.body-2.grey--text.mt-3 Comments posted
.body-1: strong 0
.caption.grey--text.mt-3 Pages created
.body-2: strong 0
.caption.grey--text.mt-3 Comments posted
.body-2: strong 0
</template>
<script>
/* global siteConfig */
export default {
data() {
return {
name: 'John Doe'
}
},
computed: {
darkMode() { return siteConfig.darkMode }
}
}
</script>
......
client/static/svg/icon-profile.svg 0 → 100644
View file @ 8ea699ac
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="96px" height="96px"><linearGradient id="okd7dFeSUq9~c8_MiZYJSa" x1="32" x2="32" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSa)" d="M57.121,17.707l-8.828-8.828C47.727,8.312,46.973,8,46.172,8H23c-1.654,0-3,1.346-3,3v10.051 c-5.046,0.503-9,4.773-9,9.949c-2.206,0-4,1.794-4,4s1.794,4,4,4h0.461c0.201,0.639,0.467,1.25,0.787,1.827 C8.365,43.628,6,48.163,6,53c0,1.654,1.346,3,3,3h22h5h19c1.654,0,3-1.346,3-3V19.829C58,19.027,57.687,18.273,57.121,17.707z M48,11.414L54.586,18H49c-0.552,0-1-0.449-1-1V11.414z M13,31c0-4.411,3.589-8,8-8s8,3.589,8,8v5c0,4.411-3.589,8-8,8s-8-3.588-8-8 V31z M11,37c-1.103,0-2-0.897-2-2s0.897-2,2-2v3c0,0.337,0.018,0.671,0.051,1H11z M21,46c3.047,0,5.776-1.374,7.612-3.531 c0.542,0.393,1.052,0.821,1.521,1.287C27.845,46.451,24.551,48,21,48s-6.845-1.549-9.133-4.243c0.47-0.466,0.979-0.894,1.521-1.287 C15.224,44.626,17.953,46,21,46z M31,54h-1v-2h-2v2H14v-2h-2v2H9c-0.552,0-1-0.449-1-1c0-2.814,0.926-5.51,2.551-7.715 C13.21,48.281,16.961,50,21,50s7.79-1.719,10.45-4.715C33.074,47.49,34,50.186,34,53v1H31z M55,54H36v-1 c0-4.837-2.364-9.372-6.248-12.173c0.32-0.577,0.585-1.188,0.787-1.827H31c2.206,0,4-1.794,4-4s-1.794-4-4-4 c0-5.177-3.954-9.446-9-9.949V11c0-0.551,0.448-1,1-1h23v7c0,1.654,1.346,3,3,3h7v33C56,53.551,55.552,54,55,54z M31,36v-3 c1.103,0,2,0.897,2,2s-0.897,2-2,2h-0.051C30.982,36.671,31,36.338,31,36z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSb" x1="41" x2="41" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSb)" d="M32 24H50V26H32z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSc" x1="43" x2="43" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSc)" d="M36 28H50V30H36z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSd" x1="44" x2="44" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSd)" d="M38 32H50V34H38z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSe" x1="44" x2="44" y1="7.5" y2="56.707" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#1a6dff"/><stop offset="1" stop-color="#c822ff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSe)" d="M48.021,36H38v2l10-0.021L48.021,44H38v2h10.021C49.112,46,50,45.112,50,44.021v-6.042 C50,36.888,49.112,36,48.021,36z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSf" x1="21" x2="21" y1="37.063" y2="42.384" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSf)" d="M21,42c2.209,0,4-2,4-4h-8C17,40,18.791,42,21,42z"/><linearGradient id="okd7dFeSUq9~c8_MiZYJSg" x1="26.649" x2="26.649" y1="11.667" y2="17.099" gradientUnits="userSpaceOnUse" spreadMethod="reflect"><stop offset="0" stop-color="#6dc7ff"/><stop offset="1" stop-color="#e6abff"/></linearGradient><path fill="url(#okd7dFeSUq9~c8_MiZYJSg)" d="M24,16.783V13c0-0.552,0.448-1,1-1h3.8c0.443,0,0.664,0.535,0.351,0.848l-4.291,4.291 C24.543,17.457,24,17.232,24,16.783z"/></svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment