update(SettingsModal): updated settings modal's appearances and toggl…

…e,swipe actions in mobile (#134)

* 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

* updated(SettingsModal): updated mobile appearance and actions

Co-authored-by: Matt Wisniewski <retropronghorn@gmail.com>

components/tailored/settings/modal/Modal.html

@@ -2,7 +2,7 @@
     <div id="settings" 
     :class="`with-sidebar ${sidebar ? 'is-open' : 'is-collapsed'}`"
     >
-    <div class="sidebar is-secondary-background">
+    <div class="sidebar is-secondary-background" v-touch:swipe.left="collapseSidebar" v-touch:swipe.right="showSidebar">
       <UiScroll verticalScroll>
         <TailoredSettingsSidebar
           :title="$t('global.settings')"

components/tailored/settings/modal/Modal.less

@@ -1,4 +1,3 @@
-
 #app-wrap {
   #app.mobile-app {
     height: calc(100vh - @mobile-nav-size);
@@ -32,14 +31,15 @@ p {
 .with-sidebar {
   display: flex;
   flex-wrap: wrap;
+  flex-direction: row;
   height: 100vh;
   overflow: hidden;
 }
 
 .sidebar {
   flex-basis: 18rem;
   flex-grow: 1;
-  height: 100vh;
+  height: 100%;
   transition: @transition-all;
   position: relative;
 
@@ -60,7 +60,7 @@ p {
   white-space: pre-line;
   flex-basis: 0;
   flex-grow: 999;
-  height: 100vh;
+  height: 100%;
   font-size: @text-size;
   transition: @transition-all;
   .title, .subtitle {
@@ -97,38 +97,11 @@ p {
   }
 }
 
-@media only screen and (max-width: 768px) {
-  @mobile-sidebar-width: 100vw;
-  .sidebar {
-    flex-basis: @mobile-sidebar-width;
-  }
-  .not-sidebar {
-    padding: 1rem 0;
-    width: 100vw;
-    overflow-x: hidden;
-    transform: translateX(calc(@mobile-sidebar-width + 3rem));
-  }
-  .is-collapsed {
-    .sidebar {
-      transform: translateX(calc(-@mobile-sidebar-width + 3rem));
-
-      .menu {
-        pointer-events: none;
-      }
-    }
-    .not-sidebar {
-      transform: translateX(0);
-      margin-left: calc(-@mobile-sidebar-width + 3rem);
-    }
-  }
-}
-
 #app-wrap {
   #settings {
     height: 80vh;
     width: 80vw;
     display: flex;
-    flex-direction: column;
     overflow: hidden;
     border-radius: @corner-rounding;
 
@@ -209,31 +182,10 @@ p {
         filter: @primary-text-glow;
       }
     }
-  }
-}
-
-@media only screen and (max-width: 768px) {
-  @mobile-sidebar-width: 100vw;
-  .sidebar {
-    flex-basis: @mobile-sidebar-width;
-  }
-  .not-sidebar {
-    padding: 1rem 0;
-    width: 100vw;
-    overflow-x: hidden;
-    transform: translateX(calc(@mobile-sidebar-width + 3rem));
-  }
-  .is-collapsed {
-    .sidebar {
-      transform: translateX(calc(-@mobile-sidebar-width + 3rem));
-
-      .menu {
-        pointer-events: none;
-      }
-    }
-    .not-sidebar {
-      transform: translateX(0);
-      margin-left: calc(-@mobile-sidebar-width + 3rem);
+
+    @media only screen and (max-width: 768px) {
+      width: 100%;
+      height: 100%;
     }
   }
 }

components/tailored/settings/modal/Modal.vue

@@ -16,8 +16,17 @@ export default Vue.extend({
     toggleSidebar() {
       this.$data.sidebar = !this.$data.sidebar
     },
+    showSidebar() {
+      this.$data.sidebar = true
+    },
+    collapseSidebar() {
+      this.$data.sidebar = false
+    },
     changeRoute(route: string) {
       this.$data.page = route
+      if (this.$device.isMobile) {
+        this.collapseSidebar()
+      }
     },
     closeModal() {
       this.$store.commit('toggleSettings', false)

components/ui/AsideMenu/AsideMenu.less

@@ -3,7 +3,6 @@
   position: relative;
   -webkit-user-drag: none;
   user-select: none;
-  height: calc(100vh - @mobile-nav-size);
 
   .menu-list {
     margin-bottom: @normal-spacing;

mock/profile.ts

@@ -7,7 +7,7 @@ import {
 export const profileBadges = [
   {
     type: ProfileBadgeType.Type1,
-    badge: { color: 'red', icon: ['fas', 'id-badge'] },
+    badge: { color: 'red', icon: ['far', 'id-badge'] },
   },
   {
     type: ProfileBadgeType.Type2,

plugins/thirdparty/fontawesome.ts

@@ -11,6 +11,9 @@ import {
   faHeart as faHeartFull,
   faShoppingBag as faShoppingBagFull,
   faShoppingCart,
+  faRibbon,
+  faCertificate,
+  faOtter,
 } from '@fortawesome/free-solid-svg-icons'
 
 import * as fal from '@fortawesome/pro-light-svg-icons'
@@ -174,6 +177,9 @@ library.add(faCrown)
 library.add(faEllipsisH)
 library.add(faInfoCircle)
 library.add(faIdBadge)
+library.add(faRibbon)
+library.add(faCertificate)
+library.add(faOtter)
 library.add(faClock)
 
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)

store/accounts/state.ts

@@ -1,7 +1,7 @@
 import { AccountsState, RegistrationStatus } from './types'
 
 const InitalAccountsState = (): AccountsState => ({
-  locked: true,
+  locked: false,
   error: '',
   pinHash: '',
   active: '',