fix(enhancers): Made position dependent on where you click enhancers …

…from, if mobile, setting floating to true. hide scrollbars in chrome. #SA-187 and #AP-112. (#286)

components/interactables/QuickProfile/QuickProfile.html

@@ -3,7 +3,7 @@
   v-click-outside="close"
   :style="$device.isDesktop ? `top: ${ui.quickProfilePosition.y}px; left: ${ui.quickProfilePosition.x}px;` : ''">
   <div class="header">
-    <UiCircle type="random" :seed="user.account.accountId" :size="45" />
+    <UiCircle type="random" :seed="user.address" :size="45" />
   </div>
   <TypographyTitle :text="user.name" :size="6" />
   <TypographyText :text="user.publicKey ? `${user.publicKey.substr(0, 23)}...` : ``" :size="6" class="address" />

components/tailored/core/chatbar/controls/Controls.vue

@@ -36,12 +36,14 @@ export default Vue.extend({
       if (this.ui.enhancers.show && this.ui.enhancers.route !== route) {
         this.$store.commit('ui/toggleEnhancers', {
           show: true,
+          floating: true,
           route,
         })
         return
       }
       this.$store.commit('ui/toggleEnhancers', {
         show: !this.ui.enhancers.show,
+        floating: true,
         route,
       })
     },

components/tailored/messaging/enhancers/Enhancers.html

@@ -1,7 +1,12 @@
 <div
   id="enhancers"
   v-if="ui.enhancers.show"
-  v-click-outside="toggleEnhancers">
+  v-click-outside="toggleEnhancers"
+  v-bind:style="!ui.enhancers.floating ? {
+    left: calculatePositionOnScreen(ui.enhancers.position[0]) + 'px', 
+    bottom: ui.enhancers.position[1] + 'px' 
+  } : {}"
+  >
   <div class="navbar">
     <InteractablesButtonGroup v-model="route" :fullWidth="true" :values="['glyphs','emotes','gif']">
       <InteractablesButton

components/tailored/messaging/enhancers/Enhancers.less

@@ -1,9 +1,10 @@
 #enhancers {
   height: @enhancers-height;
-  width: @enhancers-width;
+  max-width: @enhancers-width;
   position: absolute;
-  right: @normal-spacing;
-  bottom: @chatbar-size;
+  margin-left: @normal-spacing;
+  right: @normal-spacing !important;
+  bottom: @chatbar-size !important;
   margin-bottom: @light-spacing;
   border-radius: @corner-rounding;
   background: @semitransparent-light-gradient;
@@ -18,6 +19,9 @@
     height: calc(100% - 3rem);
     overflow-y: scroll;
   }
+  #container::-webkit-scrollbar {
+    display: none;
+  }
   .navbar {
     width: 100%;
     display: inline-flex;

components/tailored/messaging/enhancers/Enhancers.vue

@@ -5,6 +5,15 @@ import { mapState } from 'vuex'
 import { SmileIcon, GridIcon, ImageIcon } from 'satellite-lucide-icons'
 import { EmojiPicker } from 'vue-emoji-picker'
 
+declare module 'vue/types/vue' {
+  interface Vue {
+    convertRem: (value: string) => number
+    toggleEnhancers: () => void
+    openEmoji: () => void
+    clickEvent: () => void
+  }
+}
+
 export default Vue.extend({
   components: {
     SmileIcon,
@@ -27,6 +36,7 @@ export default Vue.extend({
       set(data: string) {
         this.$store.commit('ui/toggleEnhancers', {
           show: true,
+          floating: this.$device.isMobile ? true : false,
           route: data,
         })
       }
@@ -91,6 +101,7 @@ export default Vue.extend({
     setRoute(route: string) {
       this.$store.commit('ui/toggleEnhancers', {
         show: true,
+        floating: this.$device.isMobile ? true : false,
         route,
       })
     },
@@ -105,9 +116,10 @@ export default Vue.extend({
       const glyphToggleElm = document.getElementById('glyph-toggle')
       const emojiToggleElm = document.getElementById('emoji-toggle')
       // @ts-ignore
-      if (!(glyphToggleElm?.contains(event.target) || emojiToggleElm?.contains(event.target))) {
+      if (!event || !(glyphToggleElm?.contains(event.target) || emojiToggleElm?.contains(event.target))) {
         this.$store.commit('ui/toggleEnhancers', {
           show: !this.ui.enhancers.show,
+          floating: this.$device.isMobile ? true : false,
         })
       }
       if (this.ui.settingReaction.status) {
@@ -118,6 +130,32 @@ export default Vue.extend({
         })
       }
     },
+     /**
+     * @method calculatePositionOnScreen
+     * @description This returns a "x cordinate" to have the Enhancer window to load on the right or left screen
+     * @example calculatePositionOnScreen(ui.enhancers.position[0])
+     */
+    calculatePositionOnScreen(locationX: number): number {
+      if (
+        this.convertRem(this.ui.enhancers.defaultWidth) + locationX >
+        window.innerWidth
+      ) {
+        return locationX - this.convertRem(this.ui.enhancers.defaultWidth) * 2
+      }
+      return locationX - this.convertRem(this.ui.enhancers.defaultWidth)
+    },
+    /**
+     * @method convertRem
+     * @description This converts an rem value into a pixel value
+     * @example convertRem('24rem') => if the document font size is 16px, this returns the value of 24*16, or 384.
+     */
+    convertRem(value: string): number {
+      const fontSize = parseFloat(
+        getComputedStyle(document.documentElement).fontSize // Get the font size on the html tag, eg 16 (px), 2 (px), etc
+      )
+      const remNumber = Number(value.replace('rem', ''))
+      return remNumber * fontSize
+    },
   },
 })
 </script>

components/tailored/messaging/message/Message.vue

@@ -128,7 +128,7 @@ export default Vue.extend({
      * @description
      * @example
      */
-    emojiReaction() {
+    emojiReaction(e: MouseEvent) {
       const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
       this.$store.commit('ui/settingReaction', {
         status: true,
@@ -139,7 +139,18 @@ export default Vue.extend({
             ? this.$props.message.from
             : this.$props.message.to,
       })
-      this.$store.commit('ui/toggleEnhancers', { show: true, floating: true })
+      let xVal = this.$el.getBoundingClientRect().x
+      let yVal = this.$el.getBoundingClientRect().y
+      if (e) {
+        xVal = e.clientX
+        yVal = e.clientY
+      }
+      this.$store.commit('ui/toggleEnhancers', {
+        show: true,
+        floating: this.$device.isMobile ? true : false,
+        position: [xVal, yVal],
+        containerWidth: this.$el.clientWidth,
+      })
     },
     quickReaction(emoji: String) {
       this.$store.dispatch('ui/addReaction', {

components/tailored/messaging/message/actions/Actions.html

@@ -2,11 +2,11 @@
   <div
     class="reply-command has-tooltip has-tooltip-primary"
     :data-tooltip="$t('global.glyphs')"
+    @click="emojiReaction"
   >
     <smile-icon
       size="1x"
       :class="`control-icon emoji-icon ${ui.enhancers.show ? 'primary' : ''}`"
-      @click="emojiReaction"
     />
   </div>
   <div

components/tailored/messaging/message/reactions/Reactions.html

@@ -12,7 +12,7 @@
       <div></div>
     </div>
   </div>
-  <div class="react-button">
+  <div class="react-button" @click="emojiReaction">
     <smile-icon
       size="1x"
       v-if="reactions.length"

components/tailored/messaging/message/reactions/Reactions.vue

@@ -52,7 +52,7 @@ export default Vue.extend({
      * @description
      * @example
      */
-    emojiReaction() {
+    emojiReaction(e: MouseEvent) {
       const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
       this.$store.commit('ui/settingReaction', {
         status: true,
@@ -63,7 +63,14 @@ export default Vue.extend({
             ? this.$props.message.from
             : this.$props.message.to,
       })
-      this.$store.commit('ui/toggleEnhancers', { show: true })
+      let clickX = e.clientX
+      let clickY = e.clientY
+      this.$store.commit('ui/toggleEnhancers', {
+        show: true,
+        floating: this.$device.isMobile ? true : false,
+        position: [clickX, clickY],
+        containerWidth: this.$el.clientWidth,
+      })
     },
     /**
      * @method quickReaction DocsTODO

components/tailored/messaging/message/reply/Reply.html

@@ -23,7 +23,7 @@
           <UiEmbedsVideoPlayer v-else-if="reply.type === 'video'" :data="reply.payload" />
           <UiEmbedsAudioPlayer v-else-if="reply.type === 'audio'" :data="reply.payload" />
           <UiEmbedsFile v-else-if="reply.type === 'file'" :data="reply.payload" />
-          <TailoredMessagingMessageActions v-if="replyHover == reply.id" :hideReply="true" :emojiReaction="() => emojiReaction(reply.id)" />
+          <TailoredMessagingMessageActions v-if="replyHover == reply.id" :hideReply="true" :emojiReaction="() => emojiReaction($event, reply.id)" />
         </div>
       </div>
     </div>

components/tailored/messaging/message/reply/Reply.vue

@@ -87,7 +87,7 @@ export default Vue.extend({
      * @param replyId
      * @example
      */
-    emojiReaction(replyID: string) {
+    emojiReaction(e: MouseEvent, replyID: string) {
       const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
       this.$store.commit('ui/settingReaction', {
         status: true,
@@ -98,7 +98,12 @@ export default Vue.extend({
             ? this.$props.message.from
             : this.$props.message.to,
       })
-      this.$store.commit('ui/toggleEnhancers', { show: true })
+      this.$store.commit('ui/toggleEnhancers', {
+        show: true,
+        floating: this.$device.isMobile ? true : false,
+        position: [e.clientX, e.clientY],
+        containerWidth: this.$el.clientWidth,
+      })
     },
     /**
      * @method showQuickProfile DocsTODO

layouts/chat.vue

@@ -57,7 +57,7 @@
           <Nuxt />
         </UiChatScroll>
         <TailoredMessagingEnhancers />
-        <TailoredWalletMini v-if="$store.state.ui.modals.walletMini" />
+        <TailoredWalletMini v-if="ui.modals.walletMini" />
         <TailoredCommandsPreview :message="ui.chatbarContent" />
         <TailoredCoreChatbarReply />
         <TailoredCoreChatbar :recipient="recipient" v-if="recipient" />

store/ui/mutations.ts

@@ -1,5 +1,5 @@
 import { without } from 'lodash'
-import { UIState } from './types'
+import { EnhancerInfo, UIState } from './types'
 import { MessageGroup } from '~/types/messaging'
 import { Channel } from '~/types/ui/server'
 
@@ -33,9 +33,17 @@ export default {
   },
   toggleEnhancers(
     state: UIState,
-    options: { show: boolean; floating: boolean, route: string }
+    options: EnhancerInfo,
   ) {
-    state.enhancers = { show: options.show, floating: options.floating, route: options.route || 'emotes' }
+    state.enhancers = { 
+      show: options.show, 
+      floating: (typeof options.floating !== "undefined") ? options.floating : state.enhancers.floating,
+      position: (typeof options.position !== "undefined") ? options.position : state.enhancers.position,
+      defaultWidth: (typeof options.defaultWidth !== "undefined") ? options.defaultWidth : state.enhancers.defaultWidth,
+      defaultHeight: (typeof options.defaultHeight !== "undefined") ? options.defaultHeight : state.enhancers.defaultHeight,
+      containerWidth: (typeof options.containerWidth !== "undefined") ? options.containerWidth : state.enhancers.containerWidth,
+      route: options.route || 'emotes'
+    }
   },
   toggleSettings(state: UIState, show: boolean) {
     state.showSettings = show

store/ui/state.ts

@@ -26,6 +26,10 @@ const InitalUIState = (): UIState => ({
   enhancers: {
     show: false,
     floating: false,
+    position: [0, 0],
+    defaultWidth: '24rem',
+    defaultHeight: '30rem',
+    containerWidth: 0,
     route: 'emotes',
   },
   messages: [],

store/ui/types.ts

@@ -6,6 +6,16 @@ export enum GlyphMarketViewStatus {
   SHOP_DETAIL = 'shop_detail',
 }
 
+export interface EnhancerInfo {
+  show: Boolean
+  floating?: Boolean
+  position?: Number[]
+  defaultWidth?: String
+  defaultHeight?: String
+  containerWidth?: Number
+  route: String
+}
+
 export interface UIState {
   contextMenuStatus: Boolean
   contextMenuValues: Array<Object>
@@ -25,11 +35,7 @@ export interface UIState {
   }
   showPinned: Boolean
   fullscreen: Boolean
-  enhancers: {
-    show: Boolean
-    floating: Boolean
-    route: String
-  }
+  enhancers: EnhancerInfo
   messages: any[]
   unreadMessage: number
   isScrollOver: Boolean