mirrors/dozzle
1
0
Fork 0
mirror of https://github.com/amir20/dozzle.git synced 2025-12-26 15:16:27 +01:00
Code Issues Projects Releases Wiki Activity

Change Jump to Context menu to be a dropdown menu

Browse Source 
I extracted the dropdown portion of the LogActionsToolbar into a separate DropdownMenu component so that it can be reused for Jump to Context.

Other Changes:
- Remove unused style in LogActionsToolbar
This commit is contained in:
Coteh
2022-01-30 19:49:44 -05:00
parent 69e28e3723
commit 94de10d54c
4 changed files with 109 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/components/DropdownMenu.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="dropdown is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span class="icon">
<mdi-dots-vertical />
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<slot></slot>
</div>
</div>
</div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
.is-top .dropdown-menu {
top: 0;
}
.is-small {
transform: scale(75%);
}
</style>

108
assets/components/LogActionsToolbar.vue
View File

@@ -1,54 +1,43 @@
<template>
<div class="dropdown is-right is-hoverable">
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span class="icon">
<mdi-dots-vertical />
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class="dropdown-content">
<a class="dropdown-item" @click="onClearClicked">
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<octicon-trash-24 class="mr-4" />
</div>
</div>
<div class="level-right">
<div class="level-item">Clear</div>
</div>
<dropdown-menu class="is-right">
<a class="dropdown-item" @click="onClearClicked">
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<octicon-trash-24 class="mr-4" />
</div>
</a>
<a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<octicon-download-24 class="mr-4" />
</div>
</div>
<div class="level-right">
<div class="level-item">Download</div>
</div>
</div>
</a>
<hr class="dropdown-divider" />
<a class="dropdown-item" @click="showSearch = true">
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<mdi-light-magnify class="mr-4" />
</div>
</div>
<div class="level-right">
<div class="level-item">Search</div>
</div>
</div>
</a>
</div>
<div class="level-right">
<div class="level-item">Clear</div>
</div>
</div>
</div>
</div>
</a>
<a class="dropdown-item" :href="`${base}/api/logs/download?id=${container.id}`">
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<octicon-download-24 class="mr-4" />
</div>
</div>
<div class="level-right">
<div class="level-item">Download</div>
</div>
</div>
</a>
<hr class="dropdown-divider" />
<a class="dropdown-item" @click="showSearch = true">
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<mdi-light-magnify class="mr-4" />
</div>
</div>
<div class="level-right">
<div class="level-item">Search</div>
</div>
</div>
</a>
</dropdown-menu>
</template>
<script lang="ts" setup>
@@ -94,27 +83,4 @@ onUnmounted(() => hotkeys.unbind("shift+command+l, shift+ctrl+l", onHotkey));
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>

21
assets/components/LogViewer.vue
View File

@@ -8,13 +8,20 @@
:class="item.selected ? 'selected' : ''"
>
<div class="line-options" v-if="isSearching()">
<o-tooltip label="Jump to context" position="right" delay="500">
<button class="jump" @click="jumpToLine">
<span class="icon">
<mdi-dots-vertical />
</span>
</button>
</o-tooltip>
<dropdown-menu class="is-top is-small">
<a class="dropdown-item" @click="jumpToLine">
<div class="level is-justify-content-start">
<div class="level-left">
<div class="level-item">
<cil-find-in-page class="mr-4" />
</div>
</div>
<div class="level-right">
<div class="level-item">Jump to Context</div>
</div>
</div>
</a>
</dropdown-menu>
</div>
<div class="line">
<span class="date" v-if="showTimestamp"> <relative-time :date="item.date"></relative-time></span>