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

Update bottom action toolbar css [SCI-8541]

Browse source
This commit is contained in:
Anton 2023-06-14 15:10:17 +02:00
parent 85949b33aa
commit 5643ca4387
2 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -2,8 +2,10 @@
background: $color-concrete;
z-index: 100;
.btn.btn-light:hover {
background: $color-white;
.sn-action-toolbar__action a:hover {
background: var(--sn-blue);
color: var(--sn-white);
text-decoration: none;
}
.icon-versions {

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

@ -1,17 +1,17 @@
<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)]"
class="sn-action-toolbar p-4 w-full fixed bottom-0 rounded-t-md"
: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>
<div class="sn-action-toolbar__actions flex gap-4">
<div v-if="loading && !actions.length" class="sn-action-toolbar__action">
<a class="rounded flex items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline"></a>
</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">
<a :class="`btn btn-light ${action.button_class}`"
<div v-for="action in actions" :key="action.name" class="sn-action-toolbar__action">
<a :class="`rounded flex gap-2 items-center py-1.5 px-2.5 bg-sn-white color-sn-blue no-underline ${action.button_class}`"
:href="(['link', 'remote-modal']).includes(action.type) ? action.path : '#'"
:id="action.button_id"
:title="action.label"
@ -20,7 +20,7 @@
:data-object-id="action.item_id"
:data-action="action.type"
@click="doAction(action, $event)">
<i class="mr-1" :class="action.icon"></i>
<i :class="action.icon"></i>
<span class="sn-action-toolbar__button-text">{{ action.label }}</span>
</a>
</div>