Merge branch 'scrolltotop' into shigusegubu-vue3

* scrolltotop:
  fix chevrons alignment
  fix alert dot
  move definitions for timeline header buttons to Panel.scss, now called rightside buttons
  Update dependency @vuelidate/validators to v2.0.0
  Remove lolex package
  Remove diff package
  Pin dependencies
  Update dependency sass to v1.55.0

package.json

@@ -23,19 +23,18 @@
     "@fortawesome/free-solid-svg-icons": "6.2.0",
     "@fortawesome/vue-fontawesome": "3.0.1",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
-    "@kazvmoe-infra/unicode-emoji-json": "^0.4.0",
+    "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
     "@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
     "@vuelidate/core": "2.0.0-alpha.44",
-    "@vuelidate/validators": "2.0.0-alpha.31",
+    "@vuelidate/validators": "2.0.0",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
     "cropperjs": "1.5.12",
-    "diff": "3.5.0",
     "escape-html": "1.0.3",
     "js-cookie": "3.0.1",
     "localforage": "1.10.0",
-    "lozad": "^1.16.0",
+    "lozad": "1.16.0",
     "parse-link-header": "2.0.0",
     "lozad": "^1.16.0",
     "phoenix": "1.6.2",
@@ -99,7 +98,6 @@
     "karma-spec-reporter": "0.0.34",
     "karma-webpack": "5.0.0",
     "lodash": "4.17.21",
-    "lolex": "1.6.0",
     "mini-css-extract-plugin": "2.6.1",
     "mocha": "10.0.0",
     "nightwatch": "2.3.3",
@@ -107,7 +105,7 @@
     "ora": "0.4.1",
     "postcss": "8.4.16",
     "postcss-loader": "7.0.1",
-    "sass": "1.54.8",
+    "sass": "1.55.0",
     "sass-loader": "13.0.2",
     "selenium-server": "2.53.1",
     "semver": "7.3.7",

src/components/conversation/conversation.vue

@@ -20,10 +20,12 @@
       <QuickFilterSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
       <QuickViewSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
     </div>
     <div class="conversation-body panel-body">

src/components/nav_panel/nav_panel.vue

@@ -12,7 +12,7 @@
           @click="toggleCollapse"
         >
           <FAIcon
-            class="timelines-chevron"
+            class="navigation-chevron"
             fixed-width
             :icon="collapsed ? 'chevron-down' : 'chevron-up'"
           />
@@ -143,12 +143,17 @@
     border: none;
   }
 
-  .timelines-chevron {
+  .navigation-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;
     font-size: 1.1em;
   }
 
+  .timelines-chevron {
+    margin-left: 0.8em;
+    font-size: 1.1em;
+  }
+
   .timelines-background {
     padding: 0 0 0 0.6em;
     background-color: $fallback--lightBg;

src/components/navigation/navigation_pins.vue

@@ -39,10 +39,8 @@
     height: 0.5em;
     width: 0.5em;
     position: absolute;
-    right: calc(50% - 0.25em);
+    right: calc(50% - 0.75em);
-    top: calc(50% - 0.25em);
+    top: calc(50% - 0.5em);
-    margin-left: 6px;
-    margin-top: -6px;
     background-color: $fallback--cRed;
     background-color: var(--badgeNotification, $fallback--cRed);
   }

src/components/notifications/notifications.scss

@@ -29,27 +29,6 @@
       }
     }
   }
-
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
 }
 
 .notification {

src/components/notifications/notifications.vue

@@ -21,7 +21,7 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="timeline-header-button"
+            class="rightside-button"
             v-if="showScrollTop"
           >
             <button
@@ -46,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters class="timeline-header-button" />
+          <NotificationFilters class="rightside-button" />
         </div>
         <div class="panel-body">
           <div

src/components/timeline/timeline.scss

@@ -13,38 +13,6 @@
     background-color: var(--cGreen);
   }
 
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
-
-  .timeline-header-icon {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-
   .loadmore-button {
     position: relative
   }

src/components/timeline/timeline.vue

@@ -6,7 +6,7 @@
         :timeline-name="timelineName"
       />
       <div
-        class="timeline-header-button"
+        class="rightside-button"
         v-if="showScrollTop && !embedded"
       >
         <button
@@ -25,7 +25,7 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="timeline-header-button"
+          class="rightside-button"
           v-if="showLoadButton"
         >
           <button
@@ -41,7 +41,7 @@
         </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint timeline-header-icon"
+          class="loadmore-text faint veryfaint rightside-icon"
           @click.prevent
         >
           <FAIcon
@@ -66,8 +66,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
-      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
     </div>
     <div :class="classes.body">
       <div

src/panel.scss

@@ -196,6 +196,38 @@
       }
     }
   }
+
+  .rightside-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding)) 0;
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .rightside-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
 }
 
 .panel-footer {

yarn.lock

@@ -1629,7 +1629,7 @@
   dependencies:
     pointer-tracker "^2.0.3"
 
-"@kazvmoe-infra/unicode-emoji-json@^0.4.0":
+"@kazvmoe-infra/unicode-emoji-json@0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@kazvmoe-infra/unicode-emoji-json/-/unicode-emoji-json-0.4.0.tgz#555bab2f8d11db74820ef0a2fbe2805b17c22587"
   integrity sha512-22OffREdHzD0U6A/W4RaFPV8NR73za6euibtAxNxO/fu5A6TwxRO2lAdbDWKJH9COv/vYs8zqfEiSalXH2nXJA==
@@ -1999,12 +1999,12 @@
   dependencies:
     vue-demi "^0.13.4"
 
-"@vuelidate/validators@2.0.0-alpha.31":
+"@vuelidate/validators@2.0.0":
-  version "2.0.0-alpha.31"
+  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0-alpha.31.tgz#04d63307bc0a12db9f7ad94243350b83aacee998"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0.tgz#1ddd86c6c81b2cfbb5720961e951cc53ec0a80be"
-  integrity sha512-+MFA9nZ7Y9zCpq383/voPDk/hiAmu6KqiJJhLOYB/FmrUPVoyKnuKnI9Bwiq8ok9GZlVkI8BnIrKPKGj9QpwiQ==
+  integrity sha512-fQQcmDWfz7pyH5/JPi0Ng2GEgNK1pUHn/Z/j5rG/Q+HwhgIXvJblTPcZwKOj1ABL7V4UVuGKECvZCDHNGOwdrg==
   dependencies:
-    vue-demi "^0.13.4"
+    vue-demi "^0.13.11"
 
 "@webassemblyjs/ast@1.11.1":
   version "1.11.1"
@@ -3406,11 +3406,6 @@ didyoumean@1.2.2:
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
-diff@3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
-  integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
-
 diff@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
@@ -5714,11 +5709,6 @@ log4js@^6.4.1:
     rfdc "^1.3.0"
     streamroller "^3.0.6"
 
-lolex@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.6.0.tgz#3a9a0283452a47d7439e72731b9e07d7386e49f6"
-  integrity sha1-OpoCg0UqR9dDnnJzG54H1zhuSfY=
-
 longest-streak@^2.0.0:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
@@ -5738,7 +5728,7 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-lozad@^1.16.0:
+lozad@1.16.0:
   version "1.16.0"
   resolved "https://registry.yarnpkg.com/lozad/-/lozad-1.16.0.tgz#86ce732c64c69926ccdebb81c8c90bb3735948b4"
   integrity sha512-JBr9WjvEFeKoyim3svo/gsQPTkgG/mOHJmDctZ/+U9H3ymUuvEkqpn8bdQMFsvTMcyRJrdJkLv0bXqGm0sP72w==
@@ -7392,10 +7382,10 @@ sass-loader@13.0.2:
     klona "^2.0.4"
     neo-async "^2.6.2"
 
-sass@1.54.8:
+sass@1.55.0:
-  version "1.54.8"
+  version "1.55.0"
-  resolved "https://registry.yarnpkg.com/sass/-/sass-1.54.8.tgz#4adef0dd86ea2b1e4074f551eeda4fc5f812a996"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.55.0.tgz#0c4d3c293cfe8f8a2e8d3b666e1cf1bff8065d1c"
-  integrity sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==
+  integrity sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==
   dependencies:
     chokidar ">=3.0.0 <4.0.0"
     immutable "^4.0.0"
@@ -8295,6 +8285,11 @@ void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
 
+vue-demi@^0.13.11:
+  version "0.13.11"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.11.tgz#7d90369bdae8974d87b1973564ad390182410d99"
+  integrity sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==
+
 vue-demi@^0.13.4:
   version "0.13.5"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.5.tgz#d5eddbc9eaefb89ce5995269d1fa6b0486312092"