mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-10-31 23:31:48 +09:00
enhance(client): tweak ui
This commit is contained in:
parent
99ced12ac5
commit
b463663175
@ -16,7 +16,13 @@
|
||||
<template #headerLeft>
|
||||
<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
|
||||
</template>
|
||||
<div class="yrolvcoq">
|
||||
<template #headerRight>
|
||||
<button v-tooltip="$ts.showInPage" class="_button" @click="expand()"><i class="fas fa-expand-alt"></i></button>
|
||||
<button v-tooltip="$ts.popout" class="_button" @click="popout()"><i class="fas fa-external-link-alt"></i></button>
|
||||
<button class="_button" @click="menu"><i class="fas fa-ellipsis-h"></i></button>
|
||||
</template>
|
||||
|
||||
<div class="yrolvcoq" :style="{ background: pageInfo?.bg }">
|
||||
<MkStickyContainer>
|
||||
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
|
||||
<component :is="component" v-bind="props" :ref="changePage"/>
|
||||
@ -33,6 +39,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
|
||||
import { resolve } from '@/router';
|
||||
import { url } from '@/config';
|
||||
import * as symbols from '@/symbols';
|
||||
import * as os from '@/os';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@ -139,6 +146,23 @@ export default defineComponent({
|
||||
this.props = props;
|
||||
},
|
||||
|
||||
menu(ev) {
|
||||
os.popupMenu([{
|
||||
icon: 'fas fa-external-link-alt',
|
||||
text: this.$ts.openInNewTab,
|
||||
action: () => {
|
||||
window.open(this.url, '_blank');
|
||||
this.$refs.window.close();
|
||||
}
|
||||
}, {
|
||||
icon: 'fas fa-link',
|
||||
text: this.$ts.copyLink,
|
||||
action: () => {
|
||||
copyToClipboard(this.url);
|
||||
}
|
||||
}], ev.currentTarget || ev.target);
|
||||
},
|
||||
|
||||
back() {
|
||||
this.navigate(this.history.pop(), false);
|
||||
},
|
||||
|
@ -414,6 +414,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
> .left {
|
||||
min-width: 16px;
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
@ -421,7 +425,6 @@ export default defineComponent({
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Ref, ref, watch } from 'vue';
|
||||
import { Ref, ref, watch, onUnmounted } from 'vue';
|
||||
|
||||
export function useTooltip(
|
||||
elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>,
|
||||
@ -72,9 +72,14 @@ export function useTooltip(
|
||||
el.addEventListener('mouseleave', onMouseleave, { passive: true });
|
||||
el.addEventListener('touchstart', onTouchstart, { passive: true });
|
||||
el.addEventListener('touchend', onTouchend, { passive: true });
|
||||
el.addEventListener('click', close, { passive: true });
|
||||
}
|
||||
}, {
|
||||
immediate: true,
|
||||
flush: 'post',
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
close();
|
||||
});
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user