Merge remote-tracking branch 'origin/develop' into migrate/vuex-to-pinia

src/components/timeline/timeline.js

@@ -26,6 +26,8 @@ const Timeline = {
     'title',
     'userId',
     'listId',
+    'statusId',
+    'bookmarkFolderId',
     'tag',
     'embedded',
     'count',
@@ -78,13 +80,13 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-embedded']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
-        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
-        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body']),
+        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : ['panel-body']),
+        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : ['panel-body'])
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
@@ -122,6 +124,8 @@ const Timeline = {
       showImmediately,
       userId: this.userId,
       listId: this.listId,
+      statusId: this.statusId,
+      bookmarkFolderId: this.bookmarkFolderId,
       tag: this.tag
     })
   },
@@ -161,6 +165,9 @@ const Timeline = {
       if (this.timeline.flushMarker !== 0) {
         this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true })
         this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
+        if (this.timelineName === 'user') {
+          this.$store.dispatch('fetchPinnedStatuses', this.userId)
+        }
         this.fetchOlderStatuses()
       } else {
         this.blockClicksTemporarily()
@@ -181,6 +188,8 @@ const Timeline = {
         showImmediately: true,
         userId: this.userId,
         listId: this.listId,
+        statusId: this.statusId,
+        bookmarkFolderId: this.bookmarkFolderId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {

src/components/timeline/timeline.scss

@@ -1,31 +1,20 @@
-@import "../../variables";
-
 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: var(--badgeNeutral);
+  .timeline-body {
+    background: none;
+    backdrop-filter: none;
   }
 
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
     text-align: right;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
     position: absolute;
     left: calc(50% - 0.5em);
     top: calc(50% - 0.4em);
     padding: 0.2em;
     margin-left: 0.7em;
     margin-top: -1em;
-    background-color: var(--badgeNeutral);
-    color: var(--badgeNeutralText);
   }
 
   .loadmore-button {
@@ -37,16 +26,21 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 1) + var(--navbar-height));
     z-index: 2;
   }
 
-  &.-nonpanel {
+  &.-embedded {
     .timeline-heading {
       text-align: center;
       line-height: 2.75em;
       padding: 0 0.5em;
 
+      // Override the shrug empty filler
+      &:empty::before {
+        content: initial;
+      }
+
       .button-default,
       .alert {
         line-height: 2em;

src/components/timeline/timeline.vue

@@ -1,12 +1,15 @@
 <template>
   <div :class="['Timeline', classes.root]">
-    <div :class="classes.header">
+    <div
+      v-if="!embedded"
+      :class="classes.header"
+    >
       <TimelineMenu
         v-if="!embedded"
         :timeline-name="timelineName"
       />
       <div
-        v-if="showScrollTop && !embedded"
+        v-if="showScrollTop"
         class="rightside-button"
       >
         <button
@@ -24,7 +27,7 @@
           </FALayers>
         </button>
       </div>
-      <template v-if="mobileLayout && !embedded">
+      <template v-if="mobileLayout">
         <div
           v-if="showLoadButton"
           class="rightside-button"
@@ -38,13 +41,13 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-badge">
+            <div class="badge -counter">
               {{ mobileLoadButtonString }}
             </div>
           </button>
         </div>
         <div
-          v-else-if="!embedded"
+          v-else
           class="loadmore-text faint veryfaint rightside-icon"
           :title="$t('timeline.up_to_date')"
           :aria-disabled="true"
@@ -65,7 +68,7 @@
           {{ loadButtonString }}
         </button>
         <div
-          v-else-if="!embedded"
+          v-else
           class="loadmore-text faint"
           @click.prevent
         >
@@ -73,11 +76,10 @@
         </div>
       </template>
       <QuickFilterSettings
-        v-if="!embedded"
+        v-if="!mobileLayout"
         class="rightside-button"
       />
       <QuickViewSettings
-        v-if="!embedded"
         class="rightside-button"
       />
     </div>
@@ -148,6 +150,8 @@
           />
         </div>
       </teleport>
+      <!-- spacer to avoid having empty shrug -->
+      <span v-if="embedded && footerSlipgate" />
     </div>
   </div>
 </template>