feat(ui): clicking on the user status avatar or user quickProfile ava…

…tar shows profile modal

components/interactables/QuickProfile/QuickProfile.html

@@ -8,12 +8,14 @@
     <InteractablesClose :action="close" />
   </div>
   <div class="header">
-    <UiCircle
-      :type="src ? 'image' : 'random'"
-      :seed="user.address"
-      :size="45"
-      :source="src"
-    />
+    <div class="avatar-wrapper" @click="openProfile">
+      <UiCircle
+        :type="src ? 'image' : 'random'"
+        :seed="user.address"
+        :size="45"
+        :source="src"
+      />
+    </div>
   </div>
   <TypographyTitle :text="user.name" :size="6" />
   <TypographyText

components/interactables/QuickProfile/QuickProfile.less

@@ -9,6 +9,10 @@
     height: 3rem;
     margin: -@normal-spacing -@normal-spacing calc(@normal-spacing + 20px) -@normal-spacing;
     position: relative;
+
+    .avatar-wrapper {
+      cursor: pointer;
+    }
   }
   .action {
     position: absolute;

components/interactables/QuickProfile/QuickProfile.vue

@@ -91,6 +91,24 @@ export default Vue.extend({
       })
       this.close()
     },
+    openProfile() {
+      if (this.user) {
+        const isMe = this.user.address === this.$store.state.accounts.active
+
+        if (isMe) {
+          this.$store.commit('ui/toggleSettings', {
+            show: true,
+            defaultRoute: 'profile',
+          })
+        } else {
+          this.$store.commit('ui/toggleModal', {
+            name: 'userProfile',
+            state: true,
+          })
+          this.$store.commit('ui/setUserProfile', this.user)
+        }
+      }
+    },
   },
 })
 </script>

components/views/navigation/mobile/nav/Nav.html

@@ -17,7 +17,7 @@
   <div :class="`${$route.path.includes('/settings') ? 'active' : ''}`">
     <settings-icon
       size="1x"
-      v-on:click="$store.commit('ui/toggleSettings', true)"
+      v-on:click="$store.commit('ui/toggleSettings', { show: true })"
     />
   </div>
 </div>

components/views/navigation/sidebar/status/Status.html

@@ -1,8 +1,10 @@
 <div id="status">
-  <UiUserState
-    :user="{address: accounts.active, state: accounts.details.state}"
-    :src="src"
-  />
+  <div @click="openProfile">
+    <UiUserState
+      :user="{address: accounts.active, state: accounts.details.state}"
+      :src="src"
+    />
+  </div>
   <div
     class="user-info has-tooltip has-tooltip-top has-tooltip-primary"
     v-on:click="$toast.show($t('ui.copied'))"

components/views/navigation/sidebar/status/Status.less

@@ -1,5 +1,6 @@
 #status {
   display: flex;
+  cursor: pointer;
 
   .circle {
     align-self: center;

components/views/navigation/sidebar/status/Status.vue

@@ -12,6 +12,14 @@ export default Vue.extend({
       return hash ? `${this.$Config.textile.browser}/ipfs/${hash}` : ''
     },
   },
+  methods: {
+    openProfile() {
+      this.$store.commit('ui/toggleSettings', {
+        show: true,
+        defaultRoute: 'profile',
+      })
+    },
+  },
 })
 </script>
 

components/views/navigation/slimbar/Slimbar.html

@@ -75,7 +75,7 @@
     <div
       class="circle-group has-tooltip-right has-tooltip-primary"
       :data-tooltip="$t('pages.settings.settings')"
-      v-on:click="$store.commit('ui/toggleSettings', true)"
+      v-on:click="$store.commit('ui/toggleSettings', { show: true })"
     >
       <UiCircle type="icon" :size="40">
         <settings-icon size="0.75x" />

components/views/settings/Sidebar.vue

@@ -32,7 +32,7 @@ export default Vue.extend({
   },
   data() {
     return {
-      route: 'personalize',
+      route: this.$store.state.ui.settingsDefaultRoute,
       sidebarLayout: [
         {
           title: 'General',

components/views/settings/modal/Modal.vue

@@ -18,13 +18,13 @@ export default Vue.extend({
   },
   data() {
     return {
-      page: 'personalize',
+      page: this.$store.state.ui.settingsDefaultRoute,
       settingSwiperOption: {
         initialSlide: 0,
         resistanceRatio: 0,
         slidesPerView: 'auto',
         noSwiping: !this.$device.isMobile,
-        allowTouchMove: !!this.$device.isMobile,
+        allowTouchMove: this.$device.isMobile,
       },
     }
   },
@@ -76,7 +76,7 @@ export default Vue.extend({
      * @example
      */
     closeModal() {
-      this.$store.commit('ui/toggleSettings', false)
+      this.$store.commit('ui/toggleSettings', { show: false })
     },
   },
 })

store/ui/__snapshots__/state.test.ts.snap

@@ -73,6 +73,7 @@ Object {
     "messageID": null,
     "status": false,
   },
+  "settingsDefaultRoute": "personalize",
   "settingsSideBar": true,
   "showPinned": false,
   "showSearchResult": false,

store/ui/actions.ts

@@ -36,7 +36,7 @@ export default {
    * @example Mousetrap.bind('ctrl+s', dispatch('audio/toggleMute') )
    */
   openSettings({ commit, state }: any) {
-    commit('toggleSettings', !state.showSettings)
+    commit('toggleSettings', { show: !state.showSettings })
   },
   /**
    * @method activateKeybinds

store/ui/mutations.ts

@@ -63,8 +63,14 @@ export default {
       route: options.route || 'emotes',
     }
   },
-  toggleSettings(state: UIState, show: boolean) {
+  toggleSettings(
+    state: UIState,
+    options: { show: boolean; defaultRoute?: string },
+  ) {
+    const { show, defaultRoute } = options
+
     state.showSettings = show
+    state.settingsDefaultRoute = defaultRoute || 'personalize'
   },
   toggleSettingsSidebar(state: UIState, show: boolean) {
     state.settingsSideBar = show

store/ui/state.ts

@@ -7,6 +7,7 @@ const InitialUIState = (): UIState => ({
   showSearchResult: false,
   showSettings: false,
   settingsSideBar: true,
+  settingsDefaultRoute: 'personalize',
   quickProfile: false,
   userProfile: {},
   contextMenuValues: [],

store/ui/types.ts

@@ -132,6 +132,7 @@ export interface UIState {
   quickProfilePosition: object
   showSettings: boolean
   settingsSideBar: boolean
+  settingsDefaultRoute: string
   showSidebarUsers: boolean
   showSearchResult: boolean
   showSidebar: boolean