scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-12-27 02:04:33 +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 {
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';
Vue.use(TurbolinksAdapter);
Vue.prototype.i18n = window.I18n;
window.initActionToolbar = () => {
if (window.actionToolbarComponent) return;

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

@ -1,5 +1,8 @@
<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 v-if="loading && !actions.length" class="sn-action-toolbar__action mr-1.5">
<a class="btn btn-light"></a>
@ -43,7 +46,9 @@
loaded: false,
loading: false,
width: 0,
bottom: 0
bottomOffset: 0,
leftOffset: 0,
buttonOverflow: false
}
},
created() {
@ -56,11 +61,14 @@
$.get(`${this.actionsUrl}?${new URLSearchParams(this.params).toString()}`, (data) => {
this.actions = data.actions;
this.loading = false;
this.setButtonOverflow();
});
}, 10);
},
mounted() {
this.setWidth();
this.$nextTick(this.setWidth);
$(window).on('scroll', this.setLeftOffset);
},
beforeDestroy() {
delete window.actionToolbarComponent;
@ -77,9 +85,26 @@
methods: {
setWidth() {
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) {
this.bottom = pixels;
this.bottomOffset = pixels;
},
fetchActions(params) {
this.loading = true;