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

Add 'no actions' message to action toolbar [SCI-8525]

Browse source
This commit is contained in:
Martin Artnik 2023-05-29 09:33:18 +02:00
parent 1a689c9329
commit a5fe01a07a
3 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,6 +15,10 @@
margin-bottom: -2px; margin-bottom: -2px;
width: 16px; width: 16px;
} }
.sn-action-toolbar__message {
padding: 8px;
}
} }
@media (max-width: 1000px) { @media (max-width: 1000px) {

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

@ -1,9 +1,12 @@
<template> <template>
<div v-if="loading || actions.length" 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)]" :style="`width: ${width}px; bottom: ${bottom}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>
</div> </div>
<div v-if="!loading && actions.length === 0" class="sn-action-toolbar__message">
{{ i18n.t('action_toolbar.no_actions') }}
</div>
<div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action mr-1.5"> <div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action mr-1.5">
<a :class="`btn btn-light ${action.button_class}`" <a :class="`btn btn-light ${action.button_class}`"
:href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'" :href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
@ -36,6 +39,7 @@
multiple: false, multiple: false,
params: {}, params: {},
reloadCallback: null, reloadCallback: null,
loaded: false,
loading: false, loading: false,
width: 0, width: 0,
bottom: 0 bottom: 0
@ -60,6 +64,15 @@
beforeDestroy() { beforeDestroy() {
delete window.actionToolbarComponent; delete window.actionToolbarComponent;
}, },
computed: {
paramsAreBlank() {
let values = Object.values(this.params);
if (values.length === 0) return true;
return values.map((v) => !v.length).reduce((v) => v);
}
},
methods: { methods: {
setWidth() { setWidth() {
this.width = $(this.$el).parent().width(); this.width = $(this.$el).parent().width();

3
config/locales/en.yml
View file

@ -291,6 +291,9 @@ en:
core_version: "SciNote core version" core_version: "SciNote core version"
addon_versions: "Addon versions" addon_versions: "Addon versions"
action_toolbar:
no_actions: "There is no action available"
left_menu_bar: left_menu_bar:
dashboard: "Dashboard" dashboard: "Dashboard"
projects: "Projects" projects: "Projects"