PMs rebuild (#11360)

* feat(messages): big PMs refactor

* add private messages route

* move to page

* WIP - header + begin with the sidebar

* extract userLabel + style sidebar + extract converstation item

* correct conversation item style

* toggle switch style

* add contributor / backer to conversation user-label

* fix shadows

* fix the conversations list (ignoring own sent)

* selected conversation label

* faceAvatar component

* fix message / avatar height

* fix message list / empty messages height

* new message padding/styles/functionality - finished sidebar conversation styling -

* fix loading messages + perfect-scrollbar

* fix load more line

* fix loading label

* open new conversation from outside

* if the user doesn't have avatar-data inside the conversation and does not exist anymore, just load/set the user name

* search bar new icon / style

* block using from conversation context-menu

* fix lint

* fix merge / lint

* fix merge

* first separate page

* fix tooltips + full width private message + card max width + more responsive

* separate conversations methods, to prevent circular deps

* update eslint config

* fix open new private message

* remove unneeded close icon + fix toggle-switch layout

* same content height on empty conversations - remove border / box-shadow

* canLoadMore = false

* remove inbox conditions on chat components

* hide footer / fix empty sidebar

* floating shadow

* remove tooltip on selected conversation user + pm always full-size

* show avatar on empty conversation

* disable face-avatar

* fix faceAvatar + story

* fix loading conversation messages while switching the conversation

* refresh private-messages page when you are already on it

* add countbadge knob to change the example

* fix lint

* fix hide tooltip + align header correctly

* disable perfect scroll

* load messages on refresh event

* fix header label + conversation actions not breaking layout on hover

* add gifting banner to the max height calculation

* correct chunk name

Co-authored-by: negue <negue@users.noreply.github.com>
Co-authored-by: Matteo Pagliazzi <matteopagliazzi@gmail.com>

website/client/src/components/ui/countBadge.stories.js

@@ -1,9 +1,14 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { storiesOf } from '@storybook/vue';
+import { withKnobs, number } from '@storybook/addon-knobs';
 
 import CountBadge from './countBadge.vue';
 
-storiesOf('Count Badge', module)
+const stories = storiesOf('Count Badge', module);
+
+stories.addDecorator(withKnobs);
+
+stories
   .add('simple', () => ({
     components: { CountBadge },
     template: `
@@ -19,9 +24,9 @@ storiesOf('Count Badge', module)
         <count-badge :count="count" :show="true"></count-badge>
       </div>
     `,
-    data () {
-      return {
-        count: 3,
-      };
+    props: {
+      count: {
+        default: number('Count', 3),
+      },
     },
   }));

website/client/src/components/ui/toggleSwitch.vue

@@ -2,14 +2,14 @@
   <div class="popover-box">
     <div
       :id="containerId"
-      class="clearfix"
+      class="clearfix toggle-switch-outer"
     >
       <div
         v-if="label"
         class="float-left toggle-switch-description"
         :class="hoverText ? 'hasPopOver' : ''"
       >
-        {{ label }}
+        <span>{{ label }}</span>
       </div>
       <div class="toggle-switch float-left">
         <input
@@ -53,9 +53,7 @@
   }
 
   .toggle-switch-description {
-    height: 20px;
-
-    &.hasPopOver {
+    &.hasPopOver span {
       border-bottom: 1px dashed $gray-200;
     }
   }