mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-21 13:23:07 +01:00
412a10256d
* WIP vue3 * WIP vue3 * WIP vue3 * Migrates to vitejs * Fixes js tests and removes not needed modules * Fixes unmount * Updates to use css instead for space * Fixes tests and rebases one more time * Uses orgua * Fixes migrations bugs with oruga and fixes scroll * Fixes v-deep * Fixes icons to prod * Fixes icons to prod * Adds favicon back * Transitions some to composition api * Updates another component to comp api * Cleans defineProps * Updates log messages * Moves more to compose api * Cleans up styles and rewrites event source * Tries to fix DOMPurify * Removes postcss * WIP typescript * Improves importing * Converts all to ts * Converts main to ts * Makes changes for tsconfig * Moves more to ts * Adds typing to store * More typing * Updates to ts * Updates the rest to ts * Fixes computes * Fixes unmount * Adds cypress with custom base fixed * Fixes jest tests * Fixes golang tests * Adds gitignore for cypress * Removes int in favor of e2e with cypress * Tries to fix int tests again * Adds title * Updates e2e tests * Uses vue for isMobile * Removes app spec * Cleans up docker * Adds drop down for settings * Fixes bug with restart * Fixes scroll up bug * Adds tests for light mode
86 lines
1.8 KiB
Vue
86 lines
1.8 KiB
Vue
<template>
|
|
<div class="mr-0 toolbar is-vcentered is-hidden-mobile">
|
|
<div class="is-flex">
|
|
<o-tooltip type="is-dark" label="Clear">
|
|
<a @click="onClearClicked" class="pl-1 pr-1 button is-small is-light is-inverted" id="clear">
|
|
<octicon-trash-24 />
|
|
</a>
|
|
</o-tooltip>
|
|
<div class="is-flex-grow-1"></div>
|
|
<o-tooltip type="is-dark" label="Download">
|
|
<a
|
|
class="pl-1 pr-1 button is-small is-light is-inverted"
|
|
id="download"
|
|
:href="`${base}/api/logs/download?id=${container.id}`"
|
|
download
|
|
>
|
|
<octicon-download-24 />
|
|
</a>
|
|
</o-tooltip>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import config from "../store/config";
|
|
import hotkeys from "hotkeys-js";
|
|
import { onMounted, onUnmounted } from "vue";
|
|
|
|
const props = defineProps({
|
|
onClearClicked: {
|
|
type: Function,
|
|
default: () => {},
|
|
},
|
|
container: {
|
|
type: Object,
|
|
},
|
|
});
|
|
|
|
const { base } = config;
|
|
|
|
const onHotkey = (event: Event) => {
|
|
props.onClearClicked();
|
|
event.preventDefault();
|
|
};
|
|
|
|
onMounted(() => hotkeys("shift+command+l, shift+ctrl+l", onHotkey));
|
|
onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
#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;
|
|
|
|
&.is-small {
|
|
font-size: 0.65rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|