graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-02 14:13:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

enhance(client): tweak ui

Browse source
This commit is contained in:
syuilo 2021-12-24 12:34:24 +09:00
parent 99ced12ac5
commit b463663175
3 changed files with 35 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
packages/client/src/components/page-window.vue
View file

@ -16,7 +16,13 @@
<template #headerLeft> <template #headerLeft>
<button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button> <button v-if="history.length > 0" v-tooltip="$ts.goBack" class="_button" @click="back()"><i class="fas fa-arrow-left"></i></button>
</template> </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> <MkStickyContainer>
<template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template> <template #header><MkHeader v-if="pageInfo && !pageInfo.hideHeader" :info="pageInfo"/></template>
<component :is="component" v-bind="props" :ref="changePage"/> <component :is="component" v-bind="props" :ref="changePage"/>
@ -33,6 +39,7 @@ import copyToClipboard from '@/scripts/copy-to-clipboard';
import { resolve } from '@/router'; import { resolve } from '@/router';
import { url } from '@/config'; import { url } from '@/config';
import * as symbols from '@/symbols'; import * as symbols from '@/symbols';
import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
@ -139,6 +146,23 @@ export default defineComponent({
this.props = props; 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() { back() {
this.navigate(this.history.pop(), false); this.navigate(this.history.pop(), false);
}, },

5
packages/client/src/components/ui/window.vue
View file

@ -414,6 +414,10 @@ export default defineComponent({
} }
} }
> .left {
min-width: 16px;
}
> .title { > .title {
flex: 1; flex: 1;
position: relative; position: relative;
@ -421,7 +425,6 @@ export default defineComponent({
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center;
cursor: move; cursor: move;
} }
} }

7
packages/client/src/scripts/use-tooltip.ts
View file

@ -1,4 +1,4 @@
import { Ref, ref, watch } from 'vue'; import { Ref, ref, watch, onUnmounted } from 'vue';
export function useTooltip( export function useTooltip(
elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>, elRef: Ref<HTMLElement | { $el: HTMLElement } | null | undefined>,
@ -72,9 +72,14 @@ export function useTooltip(
el.addEventListener('mouseleave', onMouseleave, { passive: true }); el.addEventListener('mouseleave', onMouseleave, { passive: true });
el.addEventListener('touchstart', onTouchstart, { passive: true }); el.addEventListener('touchstart', onTouchstart, { passive: true });
el.addEventListener('touchend', onTouchend, { passive: true }); el.addEventListener('touchend', onTouchend, { passive: true });
el.addEventListener('click', close, { passive: true });
} }
}, { }, {
immediate: true, immediate: true,
flush: 'post', flush: 'post',
}); });
onUnmounted(() => {
close();
});
} }