feat(ProfilePageRedux & Search & Chatbar & UserSearch): Added new pro…

…file mockup, updated appearances and functions and added user search component (#115)

* feat(ProfilePageRedux): added new profile mockup

* feat(ButtonGroup): moved marketplace's buttongroup to components and updated it

* updated(search & chatbar): disabled calendar's month picker and enabled deletion of command

* updated(ProfilePageRedux): added extra spacing styles and updated badge data

* update(ProfilePageRedux): changed style name

* feat(UserSearch&AddFriends): added user search component and friends functions

* updated(ButtonGroup): reflected initial active status

* feat(Audio Constraints): added function to change audio constraints

Co-authored-by: Matt Wisniewski <[email protected]>

assets/styles/vars/colors.less

@@ -35,4 +35,30 @@
 .primary {
   color: @primary-color !important;
 }
-
+.red {
+  color: @red;
+}
+.yellow {
+  color: @yellow;
+}
+.orange {
+  color: @orange;
+}
+.purple {
+  color: @purple;
+}
+.pink {
+  color: @pink;
+}
+.gray {
+  color: @gray;
+}
+.blue {
+  color: @blue;
+}
+.green {
+  color: @green;
+}
+.white {
+  color: @white;
+}

assets/styles/vars/global.less

@@ -16,14 +16,18 @@
 @larger-icon-size: 16pt;
 @xl-icon-size: 22pt;
 @mobile-nav-size: 4.5rem;
+@corner-rounding-xxlarge: 24px;
 @corner-rounding: 4px;
 @corner-rounding-smaller: 2px;
 @base-z-index: 1;
 @viewport-width: 100vw;
 @enhancers-height: 25rem;
 @enhancers-width: 20rem;
+@xlight-spacing: 0.25rem;
 @light-spacing: 0.5rem;
 @normal-spacing: 1rem;
+@large-spacing: 1.5rem;
+@xlarge-spacing: 2rem;
 @select-height: 2.5em;
 @scrollbar-width: 5px;
 @scrollbar-width-mobile: 3px;

components/tailored/marketplace/buttongroup/Buttongroup.less → components/interactables/ButtonGroup/ButtonGroup.less

@@ -1,20 +1,24 @@
 .button-group {
   display: inline;
-  .is-button {
+  .button {
     display: inline-block;
     cursor: pointer;
     border-radius: 0;
     margin: 0;
     &:first-child {
       border-radius: @corner-rounding 0px 0px @corner-rounding;
+      margin-right: -3px;
     }
-    &:nth-child(2) {
-      border-right: none;
-      border-left: none;
+    &:not(:first-child) {
       margin: 0 -3px;
+      border-left: none;
     }
     &:last-child {
       border-radius: 0px @corner-rounding @corner-rounding 0px;
     }
+    &.active {
+      background: #0984e3;
+      color: #dae0ff;
+    }
   }
 }

components/interactables/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,64 @@
+<template src="./ButtonGroup.html"></template>
+
+<script lang="ts">
+import Vue from 'vue'
+export default Vue.extend({
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: null,
+    },
+    /**
+     * Callable function when button is clicked
+     *
+     * @remarks
+     * This should usually be a store mutation or UI change.
+     */
+    action: {
+      type: Function,
+      required: false,
+      default: null,
+    },
+    /**
+     * Set the active class of selected button
+     *
+     * @remarks
+     * This class has already defined
+     */
+    activeClass: {
+      type: String,
+      required: false,
+      default: 'active',
+    },
+  },
+  data() {
+    return {
+      active: null as HTMLElement | null,
+    }
+  },
+  computed: {},
+  mounted() {
+    this.$el.querySelectorAll('.button').forEach((button) => {
+      const text = button.querySelector('span')?.textContent
+      if (text === this.value) {
+        button.classList.add(this.activeClass)
+        this.active = button as HTMLElement
+      }
+      button.addEventListener('click', () => {
+        if (this.active != null) {
+          this.active.classList.remove(this.activeClass)
+        }
+        this.active = button as HTMLElement
+        this.active.classList.add(this.activeClass)
+        this.$emit('input', text)
+        if (this.action != null) {
+          this.action(text)
+        }
+      })
+    })
+  },
+})
+</script>
+
+<style scoped lang="less" src="./ButtonGroup.less"></style>

components/interactables/Search/Result/Chip.vue → components/interactables/Chip/Chip.vue

@@ -30,14 +30,15 @@ export default Vue.extend({
 <style scoped lang="less">
 .chip-item {
   display: inline-block;
-  margin-right: 5px;
-  padding: 4px 8px;
-  border-radius: 24px;
+  margin-right: @light-spacing;
+  margin-bottom: @light-spacing;
+  padding: @xlight-spacing @light-spacing;
+  border-radius: @corner-rounding-xxlarge;
   background-color: @primary-color;
   color: white;
   .fa-times {
     margin-bottom: -2px;
-    margin-left: 8px;
+    margin-left: @light-spacing;
     cursor: pointer;
   }
 }

components/interactables/Search/Input/Input.html

@@ -55,7 +55,7 @@
       </li>
     </ul>
   </div>
-  <div :class="{'date-selection': true}" v-if="isDate && isFocus">
+  <div refs="datePicker" :class="{'date-selection': true}" v-if="isDate && isFocus">
     <v-calendar
       is-dark
       @dayclick="clickDateOption"

components/interactables/Search/Input/Input.less

@@ -201,4 +201,4 @@
     top: @statusbar-height + (@normal-spacing * 8);
     position: fixed;
   }
-}
+}

components/interactables/Search/Input/Input.vue

@@ -468,3 +468,14 @@ export default Vue.extend({
 </script>
 <style lang="less" src="./InputGlobal.less"></style>
 <style scoped lang="less" src="./Input.less"></style>
+<style lang="less">
+.search-container {
+  .vc-popover-content-wrapper {
+    height: 0px !important;
+    .vc-popover-content {
+      height: 0px !important;
+    }
+    z-index: -1;
+  }
+}
+</style>

components/interactables/Search/Result/Result.html

@@ -110,6 +110,6 @@
     container-class="search-result-pagination"
   />
   <div class="search-result-history">
-    <InteractablesSearchResultChip v-for="(item, i) in givenQueryItems" :key="i" :text="item" />
+    <InteractablesChip v-for="(item, i) in givenQueryItems" :key="i" :text="item" />
   </div>
 </div>

components/tailored/core/chatbar/Chatbar.html

@@ -20,6 +20,7 @@
       v-model="value"
       @input="handleInputChange"
       @change="handleInputChange"
+      @keydown="handleInputKeydown"
     ></textarea>
     <div
       :data-tooltip="$t('global.glyphs')"

components/tailored/core/chatbar/Chatbar.vue

@@ -51,7 +51,7 @@ export default Vue.extend({
       get() {
         return this.$store.state.ui.chatbarContent
       },
-      set(val) {
+      set(val: string) {
         this.$store.commit('chatbarContent', val)
         this.$data.text = val
       },
@@ -89,6 +89,23 @@ export default Vue.extend({
     handleInputChange() {
       this.autoGrow()
     },
+    handleInputKeydown(event: KeyboardEvent) {
+      switch (event.key) {
+        case 'Backspace':
+          {
+            const parsedCommand = parseCommand(this.value)
+            const currentCommand = commands.find(
+              (c) => c.name === parsedCommand.name.toLowerCase()
+            )
+            if (currentCommand && parsedCommand.args.length === 0) {
+              this.value = ''
+              return false
+            }
+          }
+          break
+      }
+      return true
+    },
     sendMessage() {
       this.$store.dispatch('sendMessage', {
         value: this.value,

components/tailored/core/servers/create/Create.html

@@ -31,10 +31,15 @@
 
         <div class="input-container">
             <span class="label">{{$t('servers.create.select_friends')}}</span>
-            <InteractablesInput 
+            <!-- <InteractablesInput 
                 :placeholder="$t('servers.create.select_friends_placeholder')"
                 input-kind="text" 
-                type="primary" />
+                outlined 
+                type="primary" /> -->
+            <TailoredSettingsPagesUserSearch
+                v-model="friends"
+                :placeholder="$t('servers.create.select_friends_placeholder')"
+                size="small" type="primary" drop="top" />
         </div>
 
         <p class="red" v-if="error">{{error}}</p>

components/tailored/core/servers/create/Create.vue

@@ -17,8 +17,14 @@ export default Vue.extend({
       imageUrl: '',
       name: '',
       error: '',
+      friends: [],
     }
   },
+  watch: {
+    friends(newFriends) {
+      console.log(newFriends)
+    },
+  },
   methods: {
     toggleCropper() {
       this.showCropper = !this.showCropper

components/tailored/marketplace/Marketplace.html

@@ -15,29 +15,29 @@
             </div>
         </div>
         <div class="buttons-bar">
-            <TailoredMarketplaceButtongroup>
+            <InteractablesButtonGroup v-model="subject" :action="changeSubject">
                 <InteractablesButton
                     text="Glyphs"
                     size="small"
                     type="dark"
                     :icon="{ style: 'far', name: 'grin-tongue-wink' }"
-                    :action="() => {}"
+                    outlined
                 />
                 <InteractablesButton
                     text="Themes"
                     size="small"
-                    type="primary"
+                    type="dark"
                     :icon="{ style: 'far', name: 'palette' }"
-                    :action="() => {}"
+                    outlined
                 />
                 <InteractablesButton
                     text="NFTs"
                     size="small"
                     type="dark"
                     :icon="{ style: 'far', name: 'cubes' }"
-                    :action="() => {}"
+                    outlined
                 />
-            </TailoredMarketplaceButtongroup>
+            </InteractablesButtonGroup>
         </div>
         <div class="listing-panel">
             <UiScroll verticalScroll scrollbarVisibility="scroll" enableWrap noPadding>

components/tailored/marketplace/Marketplace.vue

@@ -12,11 +12,20 @@ export default Vue.extend({
   },
   data() {
     return {
+      subject: 'Themes',
       marketCategories,
     }
   },
-  computed: {},
-  methods: {},
+  watch: {
+    subject(newVal, oldVal) {
+      console.log(newVal, oldVal)
+    },
+  },
+  methods: {
+    changeSubject(subject: String) {
+      console.log(subject)
+    },
+  },
 })
 </script>
 

components/tailored/marketplace/searchbox/Searchbox.html

@@ -2,7 +2,7 @@
   <InteractablesInput 
     :placeholder="$t('global.search')" 
     size="small" 
-    v-model="name"
+    v-model="internalText"
     input-kind="text" 
     type="primary" />
 </div>