mirror of
https://github.com/amir20/dozzle.git
synced 2026-01-04 12:05:07 +01:00
49b39fb3af
* Add clear logs functionality Other Changes: - Add actions toolbar for actions pertaining to container logs - Move Download button to actions toolbar, remove text and margin to match clear logs button - Move search box below actions toolbar - Turn off pointer events for scroll progress component so that Download button can be clicked - Adjust spacing of container bar to accomodate the new actions toolbar * Change actions toolbar into a floating menu Other Changes: - Move actions toolbar into its own component - Move clear hotkey from LogEventSource to LogActionsToolbar, where the button is - Move search back to where it was before - Add tooltip component from buefy to annotate action buttons - Add CSS variable for action toolbar background color, changes based on theme
93 lines
1.8 KiB
Vue
93 lines
1.8 KiB
Vue
<template>
|
|
<div class="toolbar mr-0 is-vcentered is-hidden-mobile">
|
|
<div class="is-flex">
|
|
<b-tooltip type="is-dark" label="Clear">
|
|
<a @click="onClearClicked" class="button is-small is-light is-inverted" id="clear">
|
|
<span class="icon">
|
|
<icon name="bin"></icon>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
<div class="is-flex-grow-1"></div>
|
|
<b-tooltip type="is-dark" label="Download">
|
|
<a
|
|
class="button is-small is-light is-inverted"
|
|
id="download"
|
|
:href="`${base}/api/logs/download?id=${container.id}`"
|
|
download
|
|
>
|
|
<span class="icon">
|
|
<icon name="save"></icon>
|
|
</span>
|
|
</a>
|
|
</b-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import config from "../store/config";
|
|
import hotkeys from "hotkeys-js";
|
|
import Icon from "./Icon";
|
|
|
|
export default {
|
|
props: {
|
|
onClearClicked: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
container: {
|
|
type: Object,
|
|
},
|
|
},
|
|
name: "LogActionsToolbar",
|
|
components: {
|
|
Icon,
|
|
},
|
|
computed: {
|
|
base() {
|
|
return config.base;
|
|
},
|
|
},
|
|
mounted() {
|
|
hotkeys("shift+command+l, shift+ctrl+l", (event, handler) => {
|
|
this.onClearClicked();
|
|
event.preventDefault();
|
|
});
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
#download.button,
|
|
#clear.button {
|
|
.icon {
|
|
height: 80%;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--primary-color);
|
|
border-color: var(--primary-color);
|
|
}
|
|
}
|
|
|
|
.toolbar {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 200px;
|
|
background-color: var(--action-toolbar-background-color);
|
|
border-radius: 8em;
|
|
margin-top: 0.5em;
|
|
|
|
& > div {
|
|
margin: 0 2em;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
.button {
|
|
background-color: rgba(0, 0, 0, 0) !important;
|
|
}
|
|
}
|
|
</style>
|