From efc6b6b703971acd9cff7bb452a1fad40b801f87 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Aug 2022 20:49:20 +0300
Subject: add "scroll to top" button to timelines and notifications

---
 src/components/timeline/timeline.js | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'src/components/timeline/timeline.js')

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8f6cae66..6fca869f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -29,6 +29,7 @@ const Timeline = {
   ],
   data () {
     return {
+      showScrollTop: false,
       paused: false,
       unfocused: false,
       bottomedOut: false,
@@ -123,6 +124,9 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
+    scrollToTop () {
+      window.scrollTo({ top: this.$el.offsetTop })
+    },
     stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
     }, 1000),
@@ -222,6 +226,7 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
+      this.showScrollTop = this.$el.offsetTop < window.scrollY
       this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
-- 
cgit v1.2.3-70-g09d2


From 986c4537021842e9b21c89c0ffb84033169cafe6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 22:31:48 +0300
Subject: use a bit more compact layout on mobile

---
 src/components/notifications/notifications.js  |  5 ++-
 src/components/notifications/notifications.vue |  8 +++-
 src/components/timeline/timeline.js            | 14 ++++--
 src/components/timeline/timeline.scss          | 16 +++++++
 src/components/timeline/timeline.vue           | 61 +++++++++++++++++++-------
 5 files changed, 83 insertions(+), 21 deletions(-)

(limited to 'src/components/timeline/timeline.js')

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 7a3d6759..058d2669 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -10,11 +10,12 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faCircleNotch,
-  faCircleUp
+  faArrowUp,
+  faMinus
 )
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d57166eb..7577164d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -26,7 +26,13 @@
             type="button"
             @click="scrollToTop"
           >
-            <FAIcon icon="circle-up" />
+          <FALayers class="fa-scale-110 fa-old-padding-layer">
+            <FAIcon icon="arrow-up" />
+            <FAIcon
+              icon="minus"
+              transform="up-7"
+            />
+          </FALayers>
           </button>
           <button
             v-if="unseenCount"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 6fca869f..4eb63f84 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,4 +1,5 @@
 import Status from '../status/status.vue'
+import { mapState } from 'vuex'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
@@ -6,11 +7,15 @@ import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faCircleNotch,
-  faCog
+  faCog,
+  faMinus,
+  faArrowUp,
+  faCirclePlus,
+  faCheck
 )
 
 const Timeline = {
@@ -88,7 +93,10 @@ const Timeline = {
     },
     virtualScrollingEnabled () {
       return this.$store.getters.mergedConfig.virtualScrolling
-    }
+    },
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile',
+    })
   },
   created () {
     const store = this.$store
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9e009fd3..9d442a95 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,10 +1,26 @@
 @import '../../_variables.scss';
 
 .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(--cBlue);
+  }
+
   .loadmore-text {
     opacity: 1;
   }
 
+  .loadmore-button {
+    position: relative
+  }
+
   &.-blocked {
     cursor: progress;
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index a6bfeed1..f9f5bf92 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -8,22 +8,53 @@
         type="button"
         @click="scrollToTop"
       >
-        <FAIcon icon="circle-up" />
-      </button>
-      <button
-        v-if="showLoadButton"
-        class="button-default loadmore-button"
-        @click.prevent="showNewStatuses"
-      >
-        {{ loadButtonString }}
+        <FALayers class="fa-scale-110 fa-old-padding-layer">
+          <FAIcon icon="arrow-up" />
+          <FAIcon
+            icon="minus"
+            transform="up-7"
+          />
+        </FALayers>
       </button>
-      <div
-        v-else-if="!embedded"
-        class="loadmore-text faint"
-        @click.prevent
-      >
-        {{ $t('timeline.up_to_date') }}
-      </div>
+      <template v-if="mobileLayout">
+        <button
+          v-if="showLoadButton"
+          class="button-unstyled loadmore-button"
+          @click.prevent="showNewStatuses"
+        >
+          <FAIcon
+            fixed-width
+            icon="circle-plus"
+          />
+          <div class="alert-dot" />
+        </button>
+        <div
+          v-else-if="!embedded"
+          class="loadmore-text faint"
+          @click.prevent
+        >
+          <FAIcon
+            fixed-width
+            icon="check"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <button
+          v-if="showLoadButton"
+          class="button-default loadmore-button"
+          @click.prevent="showNewStatuses"
+        >
+          {{ loadButtonString }}
+        </button>
+        <div
+          v-else-if="!embedded"
+          class="loadmore-text faint"
+          @click.prevent
+        >
+          {{ $t('timeline.up_to_date') }}
+        </div>
+      </template>
       <QuickFilterSettings v-if="!embedded" />
       <QuickViewSettings v-if="!embedded" />
     </div>
-- 
cgit v1.2.3-70-g09d2


From af734afe3694ff3c77d4457b93b02309c4f55d6d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 22:46:41 +0300
Subject: lint

---
 src/components/notifications/notifications.vue | 16 ++++++++--------
 src/components/timeline/timeline.js            |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

(limited to 'src/components/timeline/timeline.js')

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 7577164d..08d65439 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,9 +4,9 @@
     :to="teleportTarget"
   >
     <div
+      ref="root"
       :class="{ minimal: minimalMode }"
       class="Notifications"
-      ref="root"
     >
       <div :class="mainClass">
         <div
@@ -26,13 +26,13 @@
             type="button"
             @click="scrollToTop"
           >
-          <FALayers class="fa-scale-110 fa-old-padding-layer">
-            <FAIcon icon="arrow-up" />
-            <FAIcon
-              icon="minus"
-              transform="up-7"
-            />
-          </FALayers>
+            <FALayers class="fa-scale-110 fa-old-padding-layer">
+              <FAIcon icon="arrow-up" />
+              <FAIcon
+                icon="minus"
+                transform="up-7"
+              />
+            </FALayers>
           </button>
           <button
             v-if="unseenCount"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 4eb63f84..f4efc5e8 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -95,7 +95,7 @@ const Timeline = {
       return this.$store.getters.mergedConfig.virtualScrolling
     },
     ...mapState({
-      mobileLayout: state => state.interface.layoutType === 'mobile',
+      mobileLayout: state => state.interface.layoutType === 'mobile'
     })
   },
   created () {
-- 
cgit v1.2.3-70-g09d2


From 3aadad30133928bdac3067dfc1fd7f94dbf70b52 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 1 Nov 2022 22:26:04 +0200
Subject: show counter in show new button on mobile

---
 src/components/timeline/timeline.js   |  7 +++++++
 src/components/timeline/timeline.scss | 15 +++++++++++++++
 src/components/timeline/timeline.vue  |  4 +++-
 3 files changed, 25 insertions(+), 1 deletion(-)

(limited to 'src/components/timeline/timeline.js')

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index f4efc5e8..b7414610 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -69,6 +69,13 @@ const Timeline = {
         return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
       }
     },
+    mobileLoadButtonString () {
+      if (this.timeline.flushMarker !== 0) {
+        return '+'
+      } else {
+        return this.newStatusCount > 99 ? '∞' : this.newStatusCount
+      }
+    },
     classes () {
       let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9fc2aeab..24a45070 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,6 +13,21 @@
     background-color: var(--badgeNeutral);
   }
 
+  .alert-badge {
+    font-size: 0.75em;
+    line-height: 1;
+    text-align: right;
+    border-radius: var(--tooltipRadius);
+    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 {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e6038830..8a036fd0 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -38,7 +38,9 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-dot" />
+            <div class="alert-badge">
+              {{ mobileLoadButtonString }}
+            </div>
           </button>
         </div>
         <div
-- 
cgit v1.2.3-70-g09d2