diff --git a/changelog.d/better-scroll-button.add b/changelog.d/better-scroll-button.add deleted file mode 100644 index b206869d1..000000000 --- a/changelog.d/better-scroll-button.add +++ /dev/null @@ -1 +0,0 @@ -Add support for detachable scrollTop button diff --git a/package.json b/package.json index 8d74faee4..1fd54f055 100644 --- a/package.json +++ b/package.json @@ -72,20 +72,19 @@ "babel-plugin-lodash": "3.3.4", "chai": "5.2.0", "chalk": "5.4.1", - "chromedriver": "135.0.0", + "chromedriver": "134.0.5", "connect-history-api-fallback": "2.0.0", "cross-spawn": "7.0.6", "custom-event-polyfill": "1.0.7", - "eslint": "9.24.0", - "vue-eslint-parser": "10.1.3", + "eslint": "9.23.0", "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": "10.0.0", + "eslint-plugin-vue": "9.33.0", "eventsource-polyfill": "0.9.6", - "express": "5.1.0", + "express": "4.21.2", "function-bind": "1.1.2", "http-proxy-middleware": "3.0.3", "iso-639-1": "3.1.5", @@ -96,19 +95,19 @@ "postcss": "8.5.3", "postcss-html": "^1.5.0", "postcss-scss": "^4.0.6", - "sass": "1.86.3", + "sass": "1.86.1", "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.18.0", + "stylelint": "16.17.0", "stylelint-config-html": "^1.1.0", - "stylelint-config-recommended": "^16.0.0", + "stylelint-config-recommended": "^14.0.0", "stylelint-config-recommended-scss": "^14.0.0", "stylelint-config-recommended-vue": "^1.6.0", - "stylelint-config-standard": "38.0.0", + "stylelint-config-standard": "37.0.0", "vite": "^6.1.0", "vite-plugin-eslint2": "^5.0.3", "vite-plugin-stylelint": "^6.0.0", diff --git a/src/App.js b/src/App.js index 6bb9ba04b..1c1b3a8c2 100644 --- a/src/App.js +++ b/src/App.js @@ -20,8 +20,6 @@ import { defineAsyncComponent } from 'vue' import { useShoutStore } from './stores/shout' import { useInterfaceStore } from './stores/interface' -import { throttle } from 'lodash' - export default { name: 'app', components: { @@ -60,23 +58,16 @@ 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 () { @@ -155,23 +146,13 @@ 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: { - resizeHandler () { + updateMobileState () { 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') diff --git a/src/App.vue b/src/App.vue index e5e088bc3..34cc6b804 100644 --- a/src/App.vue +++ b/src/App.vue @@ -16,7 +16,6 @@
diff --git a/src/components/component_preview/component_preview.vue b/src/components/component_preview/component_preview.vue index be9d25ac5..6a77d6c5d 100644 --- a/src/components/component_preview/component_preview.vue +++ b/src/components/component_preview/component_preview.vue @@ -199,7 +199,7 @@ export default { inset: 0; display: grid; place-items: center center; - background-color: rgb(100 0 0 / 50%); + background-color: rgba(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: rgb(102 102 102 / 20%); - --__grid-color2-disabled: rgb(153 153 153 / 20%); + --__grid-color1-disabled: rgba(102 102 102 / 20%); + --__grid-color2-disabled: rgba(153 153 153 / 20%); &.-light-grid { --__grid-color1: rgb(205 205 205); --__grid-color2: rgb(255 255 255); - --__grid-color1-disabled: rgb(205 205 205 / 20%); - --__grid-color2-disabled: rgb(255 255 255 / 20%); + --__grid-color1-disabled: rgba(205 205 205 / 20%); + --__grid-color2-disabled: rgba(255 255 255 / 20%); } position: relative; diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 0122d1216..6d11ad4ec 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -2,24 +2,21 @@
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index eb5b3432d..acf3e82bd 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -93,4 +93,4 @@ - diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 93253b1a7..9a2885122 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -103,6 +103,7 @@ min-width: 1.6em; margin-right: 0.4em; white-space: nowrap; + overflow-wrap: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index 61cc8affd..2bc811b58 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -5,7 +5,6 @@ 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' @@ -48,7 +47,6 @@ const Timeline = { }, components: { Status, - ScrollTopButton, Conversation, TimelineMenu, QuickFilterSettings, @@ -146,6 +144,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), @@ -250,6 +251,7 @@ const Timeline = { } }, handleScroll: throttle(function (e) { + this.showScrollTop = this.$el.offsetTop < window.scrollY this.determineVisibleStatuses() this.scrollLoad(e) }, 200), diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 81dad3bd3..e34c42d9f 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -8,7 +8,25 @@ v-if="!embedded" :timeline-name="timelineName" /> - +
+ +