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

feat: adds styles to popup

Browse Source
This commit is contained in:
Amir Raminfar
2023-04-27 08:40:24 -07:00
parent f74b1c91f2
commit e96ab50486
3 changed files with 74 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/components.d.ts vendored
View File

@@ -42,6 +42,7 @@ declare module '@vue/runtime-core' {
'Octicon:download24': typeof import('~icons/octicon/download24')['default']
'Octicon:trash24': typeof import('~icons/octicon/trash24')['default']
PastTime: typeof import('./components/PastTime.vue')['default']
Popup: typeof import('./components/Popup.vue')['default']
RelativeTime: typeof import('./components/RelativeTime.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

41
assets/components/Popup.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<div @mouseenter="onMouseEnter" @mouseleave="show = false" ref="trigger"><slot></slot></div>
<Teleport to="body">
<Transition name="fade">
<div v-show="show && delayedShow" class="content" ref="content">
<slot name="content"></slot>
</div>
</Transition>
</Teleport>
</template>
<script lang="ts" setup>
import { refDebounced } from "@vueuse/core";
let show = ref(false);
let delayedShow = refDebounced(show, 1000);
let content: HTMLElement | null = $ref(null);
let trigger: HTMLElement | null = $ref(null);
function onMouseEnter(e: MouseEvent) {
show.value = true;
if (e.target && content) {
const x = e.target.offsetLeft + e.target.offsetWidth + 10;
const y = e.target.offsetTop;
content.style.left = `${x}px`;
content.style.top = `${y}px`;
}
}
</script>
<style scoped>
.content {
position: fixed;
z-index: 9999;
background: var(--scheme-main-ter);
border-radius: 0.5em;
padding: 1em;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
border: 1px solid var(--border-color);
}
</style>

56
assets/components/SideMenu.vue
View File

@@ -57,34 +57,42 @@
<p class="menu-label is-hidden-mobile">{{ $t("label.containers") }}</p>
<ul class="menu-list is-hidden-mobile" v-if="ready">
<li v-for="item in sortedContainers" :key="item.id" :class="item.state">
<router-link
:to="{ name: 'container-id', params: { id: item.id } }"
active-class="is-active"
:title="item.name"
>
<div class="container is-flex is-align-items-center">
<div class="is-flex-grow-1 is-ellipsis">
<span class="has-text-weight-semibold">{{ item.name }}</span
><span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">.{{ item.swarmId }}</span>
</div>
<div class="is-flex-shrink-1 is-flex icons">
<div
class="icon is-small pin"
@click.stop.prevent="store.appendActiveContainer(item)"
v-show="!activeContainersById[item.id]"
:title="$t('tooltip.pin-column')"
>
<cil:columns />
<popup>
<router-link
:to="{ name: 'container-id', params: { id: item.id } }"
active-class="is-active"
:title="item.name"
>
<div class="container is-flex is-align-items-center">
<div class="is-flex-grow-1 is-ellipsis">
<span class="has-text-weight-semibold">{{ item.name }}</span
><span class="has-text-weight-light has-light-opacity" v-if="item.isSwarm">.{{ item.swarmId }}</span>
</div>
<div class="is-flex-shrink-1 is-flex icons">
<div
class="icon is-small pin"
@click.stop.prevent="store.appendActiveContainer(item)"
v-show="!activeContainersById[item.id]"
:title="$t('tooltip.pin-column')"
>
<cil:columns />
</div>
<div class="icon is-small health" :health="item.health" v-if="item.health" :title="item.health">
<cil:check-circle v-if="item.health == 'healthy'" />
<cil:x-circle v-else-if="item.health == 'unhealthy'" />
<cil:circle v-else />
<div class="icon is-small health" :health="item.health" v-if="item.health" :title="item.health">
<cil:check-circle v-if="item.health == 'healthy'" />
<cil:x-circle v-else-if="item.health == 'unhealthy'" />
<cil:circle v-else />
</div>
</div>
</div>
</div>
</router-link>
</router-link>
<template #content>
<div class="tooltip">
This is data
<button>test</button>
</div>
</template>
</popup>
</li>
</ul>
<ul class="menu-list is-hidden-mobile loading" v-else>