Merge remote-tracking branch 'origin/develop' into shigusegubu-themes3

changelog.d/better-scroll-button.add

@@ -0,0 +1 @@
+Add support for detachable scrollTop button

package.json

@@ -72,19 +72,20 @@
     "babel-plugin-lodash": "3.3.4",
     "chai": "5.2.0",
     "chalk": "5.4.1",
-    "chromedriver": "134.0.5",
+    "chromedriver": "135.0.0",
     "connect-history-api-fallback": "2.0.0",
     "cross-spawn": "7.0.6",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "9.23.0",
+    "eslint": "9.24.0",
+    "vue-eslint-parser": "10.1.3",
     "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-n": "17.17.0",
     "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "9.33.0",
+    "eslint-plugin-vue": "10.0.0",
     "eventsource-polyfill": "0.9.6",
-    "express": "4.21.2",
+    "express": "5.1.0",
     "function-bind": "1.1.2",
     "http-proxy-middleware": "3.0.3",
     "iso-639-1": "3.1.5",
@@ -95,19 +96,19 @@
     "postcss": "8.5.3",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.6",
-    "sass": "1.86.1",
+    "sass": "1.86.3",
     "selenium-server": "3.141.59",
     "semver": "7.7.1",
     "serve-static": "2.2.0",
     "shelljs": "0.9.2",
     "sinon": "20.0.0",
     "sinon-chai": "4.0.0",
-    "stylelint": "16.17.0",
+    "stylelint": "16.18.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended": "^14.0.0",
+    "stylelint-config-recommended": "^16.0.0",
     "stylelint-config-recommended-scss": "^14.0.0",
     "stylelint-config-recommended-vue": "^1.6.0",
-    "stylelint-config-standard": "37.0.0",
+    "stylelint-config-standard": "38.0.0",
     "vite": "^6.1.0",
     "vite-plugin-eslint2": "^5.0.3",
     "vite-plugin-stylelint": "^6.0.0",

src/App.js

@@ -20,6 +20,8 @@ import { defineAsyncComponent } from 'vue'
 import { useShoutStore } from './stores/shout'
 import { useInterfaceStore } from './stores/interface'
 
+import { throttle } from 'lodash'
+
 export default {
   name: 'app',
   components: {
@@ -58,16 +60,23 @@ export default {
     // Load the locale from the storage
     const val = this.$store.getters.mergedConfig.interfaceLanguage
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-    window.addEventListener('resize', this.updateMobileState)
     document.getElementById('modal').classList = ['-' + this.layoutType]
+
+    // Create bound handlers
+    this.updateScrollState = throttle(this.scrollHandler, 200)
+    this.updateMobileState = throttle(this.resizeHandler, 200)
   },
   mounted () {
+    window.addEventListener('resize', this.updateMobileState)
+    this.scrollParent.addEventListener('scroll', this.updateScrollState)
+
     if (useInterfaceStore().themeApplied) {
       this.removeSplash()
     }
   },
   unmounted () {
     window.removeEventListener('resize', this.updateMobileState)
+    this.scrollParent.removeEventListener('scroll', this.updateScrollState)
   },
   computed: {
     themeApplied () {
@@ -146,13 +155,23 @@ export default {
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
+    scrollParent () { return window; /* this.$refs.appContentRef */ },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
-    updateMobileState () {
+    resizeHandler () {
       useInterfaceStore().setLayoutWidth(windowWidth())
       useInterfaceStore().setLayoutHeight(windowHeight())
     },
+    scrollHandler () {
+      const scrollPosition = this.scrollParent === window ? window.scrollY : this.scrollParent.scrollTop
+
+      if (scrollPosition != 0) {
+        this.$refs.appContentRef.classList.add(['-scrolled'])
+      } else {
+        this.$refs.appContentRef.classList.remove(['-scrolled'])
+      }
+    },
     removeSplash () {
       document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
       const splashscreenRoot = document.querySelector('#splash')

src/App.vue

@@ -16,6 +16,7 @@
     <Notifications v-if="currentUser" />
     <div
       id="content"
+      ref="appContentRef"
       class="app-layout container"
       :class="classes"
     >

src/components/component_preview/component_preview.vue

@@ -199,7 +199,7 @@ export default {
     inset: 0;
     display: grid;
     place-items: center center;
-    background-color: rgba(100 0 0 / 50%);
+    background-color: rgb(100 0 0 / 50%);
 
     .alert {
       padding: 0.5em 1em;
@@ -261,14 +261,14 @@ export default {
   .preview-window {
     --__grid-color1: rgb(102 102 102);
     --__grid-color2: rgb(153 153 153);
-    --__grid-color1-disabled: rgba(102 102 102 / 20%);
-    --__grid-color2-disabled: rgba(153 153 153 / 20%);
+    --__grid-color1-disabled: rgb(102 102 102 / 20%);
+    --__grid-color2-disabled: rgb(153 153 153 / 20%);
 
     &.-light-grid {
       --__grid-color1: rgb(205 205 205);
       --__grid-color2: rgb(255 255 255);
-      --__grid-color1-disabled: rgba(205 205 205 / 20%);
-      --__grid-color2-disabled: rgba(255 255 255 / 20%);
+      --__grid-color1-disabled: rgb(205 205 205 / 20%);
+      --__grid-color2-disabled: rgb(255 255 255 / 20%);
     }
 
     position: relative;

src/components/image_cropper/image_cropper.vue

@@ -2,21 +2,24 @@
   <div class="image-cropper">
     <div v-if="dataUrl">
       <cropper-canvas
+        ref="cropperCanvas"
         background
         class="image-cropper-canvas"
-        ref="cropperCanvas"
         height="25em"
       >
         <cropper-image
+          ref="cropperImage"
           :src="dataUrl"
           alt="Picture"
-          ref="cropperImage"
           class="image-cropper-image"
           translatable
           scalable
         />
         <cropper-shade hidden />
-        <cropper-handle action="select" plain />
+        <cropper-handle
+          action="select"
+          plain
+        />
         <cropper-selection
           ref="cropperSelection"
           initial-coverage="1"
@@ -25,17 +28,23 @@
           resizable
           @change="onCropperSelectionChange"
         >
-          <cropper-grid role="grid" covered></cropper-grid>
-          <cropper-crosshair centered></cropper-crosshair>
-          <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
-          <cropper-handle action="n-resize"></cropper-handle>
-          <cropper-handle action="e-resize"></cropper-handle>
-          <cropper-handle action="s-resize"></cropper-handle>
-          <cropper-handle action="w-resize"></cropper-handle>
-          <cropper-handle action="ne-resize"></cropper-handle>
-          <cropper-handle action="nw-resize"></cropper-handle>
-          <cropper-handle action="se-resize"></cropper-handle>
-          <cropper-handle action="sw-resize"></cropper-handle>
+          <cropper-grid
+            role="grid"
+            covered
+          />
+          <cropper-crosshair centered />
+          <cropper-handle
+            action="move"
+            theme-color="rgba(255, 255, 255, 0.35)"
+          />
+          <cropper-handle action="n-resize" />
+          <cropper-handle action="e-resize" />
+          <cropper-handle action="s-resize" />
+          <cropper-handle action="w-resize" />
+          <cropper-handle action="ne-resize" />
+          <cropper-handle action="nw-resize" />
+          <cropper-handle action="se-resize" />
+          <cropper-handle action="sw-resize" />
         </cropper-selection>
       </cropper-canvas>
       <div class="image-cropper-buttons-wrapper">

src/components/login_form/login_form.vue

@@ -93,4 +93,4 @@
 
 <script src="./login_form.js"></script>
 
-<style src="./login_form.scss"/>
+<style src="./login_form.scss" />

src/components/scroll_top_button/scroll_top_button.js

@@ -0,0 +1,18 @@
+const ScrollTopButton = {
+  props: {
+    fast: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  methods: {
+    scrollToTop() {
+      const speed = this.fast ? 'instant' : 'smooth';
+
+      window.scrollTo({ top: 0, behavior: speed })
+    }
+  }
+}
+
+export default ScrollTopButton

src/components/scroll_top_button/scroll_top_button.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="rightside-button scroll-to-top">
+    <button
+      class="button-unstyled scroll-to-top-button"
+      type="button"
+      :title="$t('general.scroll_to_top')"
+      @click="scrollToTop"
+    >
+      <FALayers class="fa-scale-110 fa-old-padding-layer">
+        <FAIcon icon="arrow-up" />
+        <FAIcon
+          icon="minus"
+          transform="up-7"
+        />
+      </FALayers>
+    </button>
+  </div>
+</template>
+
+<script src="./scroll_top_button.js"></script>
+<style lang="scss">
+.scroll-to-top {
+  display: none;
+}
+
+.-scrolled .scroll-to-top {
+  display: inline-block;
+}
+</style>

src/components/status/status.scss

@@ -103,7 +103,6 @@
     min-width: 1.6em;
     margin-right: 0.4em;
     white-space: nowrap;
-    overflow-wrap: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 0;

src/components/timeline/timeline.js

@@ -5,6 +5,7 @@ import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
 import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.vue'
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
+import ScrollTopButton from '../scroll_top_button/scroll_top_button.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
@@ -47,6 +48,7 @@ const Timeline = {
   },
   components: {
     Status,
+    ScrollTopButton,
     Conversation,
     TimelineMenu,
     QuickFilterSettings,
@@ -144,9 +146,6 @@ 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),
@@ -251,7 +250,6 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
-      this.showScrollTop = this.$el.offsetTop < window.scrollY
       this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),

src/components/timeline/timeline.vue

@@ -8,25 +8,7 @@
         v-if="!embedded"
         :timeline-name="timelineName"
       />
-      <div
-        v-if="showScrollTop"
-        class="rightside-button"
-      >
-        <button
-          class="button-unstyled scroll-to-top-button"
-          type="button"
-          :title="$t('general.scroll_to_top')"
-          @click="scrollToTop"
-        >
-          <FALayers class="fa-scale-110 fa-old-padding-layer">
-            <FAIcon icon="arrow-up" />
-            <FAIcon
-              icon="minus"
-              transform="up-7"
-            />
-          </FALayers>
-        </button>
-      </div>
+      <ScrollTopButton />
       <template v-if="mobileLayout">
         <div
           v-if="showLoadButton"