fix: user profile UI

4 years ago · 8ea699ac7a
3 changed files with 76 additions and 59 deletions
--- a/client/components/profile.vue
+++ b/client/components/profile.vue
@ -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>
--- a/client/components/profile/profile.vue
+++ b/client/components/profile/profile.vue
@ -1,91 +1,92 @@
 <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>
--- a/client/static/svg/icon-profile.svg
+++ b/client/static/svg/icon-profile.svg
@ -0,0 +1 @@
+<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>