scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-10 16:31:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Improve bottom action toolbar responsiveness [SCI-8550]

Browse source
This commit is contained in:
Martin Artnik 2023-05-29 16:34:07 +02:00
parent 9d6ea63d6b
commit bb32f3a935
3 changed files with 31 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/stylesheets/shared/action_toolbar.scss
View file

@ -21,7 +21,7 @@
} }
} }
@media (max-width: 1000px) { .sn-action-toolbar--button-overflow {
.sn-action-toolbar__button-text { .sn-action-toolbar__button-text {
display: none; display: none;
} }

1
app/javascript/packs/vue/action_toolbar.js
View file

@ -5,6 +5,7 @@ import Vue from 'vue/dist/vue.esm';
import ActionToolbar from '../../vue/components/action_toolbar.vue'; import ActionToolbar from '../../vue/components/action_toolbar.vue';
Vue.use(TurbolinksAdapter); Vue.use(TurbolinksAdapter);
Vue.prototype.i18n = window.I18n;
window.initActionToolbar = () => { window.initActionToolbar = () => {
if (window.actionToolbarComponent) return; if (window.actionToolbarComponent) return;

33
app/javascript/vue/components/action_toolbar.vue
View file

@ -1,5 +1,8 @@
<template> <template>
<div v-if="!paramsAreBlank" class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md shadow-[0_-12px_24px_-12px_rgba(35,31,32,0.2)]" :style="`width: ${width}px; bottom: ${bottom}px;`"> <div v-if="!paramsAreBlank"
class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md shadow-[0_-12px_24px_-12px_rgba(35,31,32,0.2)]"
:class="{ 'sn-action-toolbar--button-overflow': buttonOverflow }"
:style="`width: ${width}px; bottom: ${bottomOffset}px; transform: translateX(${leftOffset}px)`">
<div class="sn-action-toolbar__actions flex"> <div class="sn-action-toolbar__actions flex">
<div v-if="loading && !actions.length" class="sn-action-toolbar__action mr-1.5"> <div v-if="loading && !actions.length" class="sn-action-toolbar__action mr-1.5">
<a class="btn btn-light"></a> <a class="btn btn-light"></a>
@ -43,7 +46,9 @@
loaded: false, loaded: false,
loading: false, loading: false,
width: 0, width: 0,
bottom: 0 bottomOffset: 0,
leftOffset: 0,
buttonOverflow: false
} }
}, },
created() { created() {
@ -56,11 +61,14 @@
$.get(`${this.actionsUrl}?${new URLSearchParams(this.params).toString()}`, (data) => { $.get(`${this.actionsUrl}?${new URLSearchParams(this.params).toString()}`, (data) => {
this.actions = data.actions; this.actions = data.actions;
this.loading = false; this.loading = false;
this.setButtonOverflow();
}); });
}, 10); }, 10);
}, },
mounted() { mounted() {
this.setWidth(); this.$nextTick(this.setWidth);
$(window).on('scroll', this.setLeftOffset);
}, },
beforeDestroy() { beforeDestroy() {
delete window.actionToolbarComponent; delete window.actionToolbarComponent;
@ -77,9 +85,26 @@
methods: { methods: {
setWidth() { setWidth() {
this.width = $(this.$el).parent().width(); this.width = $(this.$el).parent().width();
this.setButtonOverflow();
},
setButtonOverflow() {
// detects if the last action button is outside the toolbar container
this.buttonOverflow = false;
this.$nextTick(() => {
if (!this.$el.getBoundingClientRect) return;
let containerRect = this.$el.getBoundingClientRect();
let lastActionRect = document.querySelector('.sn-action-toolbar__action:last-child').getBoundingClientRect();
this.buttonOverflow = containerRect.left + containerRect.width < lastActionRect.left + lastActionRect.width;
});
},
setLeftOffset() {
this.leftOffset = -(window.pageXOffset || document.documentElement.scrollLeft);
}, },
setBottomOffset(pixels) { setBottomOffset(pixels) {
this.bottom = pixels; this.bottomOffset = pixels;
}, },
fetchActions(params) { fetchActions(params) {
this.loading = true; this.loading = true;