sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Imorive client

Browse Source
This commit is contained in:
syuilo
2021-08-05 22:43:14 +09:00
parent 62ccb53c24
commit f6f96ae5bf
8 changed files with 126 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
src/client/ui/_common_/header.vue
View File

@ -1,22 +1,29 @@
<template>
<div class="fdidabkb" :class="{ center }" :style="`--height:${height};`" :key="key">
<transition :name="$store.state.animation ? 'header' : ''" mode="out-in" appear>
<button class="_button back" v-if="withBack && canBack" @click.stop="back()" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
<div class="buttons left" v-if="backButton">
<button class="_button button back" @click.stop="$emit('back')" v-tooltip="$ts.goBack"><i class="fas fa-chevron-left"></i></button>
</div>
</transition>
<template v-if="info">
<div class="titleContainer">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<div class="title">
<i v-if="info.icon" class="icon" :class="info.icon"></i>
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true" :show-indicator="true"/>
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
<span v-else-if="info.title" class="text">{{ info.title }}</span>
<MkUserName v-if="info.userName" :user="info.userName" :nowrap="false" class="title"/>
<div v-else-if="info.title" class="title">{{ info.title }}</div>
<div class="subtitle" v-if="info.subtitle">
{{ info.subtitle }}
</div>
</div>
</div>
<div class="buttons">
<div class="buttons right">
<template v-if="info.actions && showActions">
<button v-for="action in info.actions" class="_button button" @click.stop="action.handler" v-tooltip="action.text"><i :class="action.icon"></i></button>
<button v-for="action in info.actions" class="_button button" :class="{ highlighted: action.highlighted }" @click.stop="action.handler" v-tooltip="action.text"><i :class="action.icon"></i></button>
</template>
<button v-if="showMenu" class="_button button" @click.stop="menu"><i class="fas fa-ellipsis-h"></i></button>
<button v-if="shouldShowMenu" class="_button button" @click.stop="showMenu" v-tooltip="$ts.menu"><i class="fas fa-ellipsis-h"></i></button>
<button v-if="closeButton" class="_button button" @click.stop="$emit('close')" v-tooltip="$ts.close"><i class="fas fa-times"></i></button>
</div>
</template>
</div>
@ -32,10 +39,18 @@ export default defineComponent({
info: {
required: true
},
withBack: {
menu: {
required: false
},
backButton: {
type: Boolean,
required: false,
default: true,
default: false,
},
closeButton: {
type: Boolean,
required: false,
default: false,
},
center: {
type: Boolean,
@ -46,7 +61,6 @@ export default defineComponent({
data() {
return {
canBack: false,
showActions: false,
height: 0,
key: 0,
@ -54,10 +68,11 @@ export default defineComponent({
},
computed: {
showMenu() {
shouldShowMenu() {
if (this.info.actions != null && !this.showActions) return true;
if (this.info.menu != null) return true;
if (this.info.share != null) return true;
if (this.menu != null) return true;
return false;
}
},
@ -66,13 +81,6 @@ export default defineComponent({
info() {
this.key++;
},
$route: {
handler(to, from) {
this.canBack = (window.history.length > 0 && !['index'].includes(to.name));
},
immediate: true
},
},
mounted() {
@ -85,10 +93,6 @@ export default defineComponent({
},
methods: {
back() {
if (this.canBack) this.$router.back();
},
share() {
navigator.share({
url: url + this.info.path,
@ -96,7 +100,7 @@ export default defineComponent({
});
},
menu(ev) {
showMenu(ev) {
let menu = this.info.menu ? this.info.menu() : [];
if (!this.showActions && this.info.actions) {
menu = [...this.info.actions.map(x => ({
@ -113,6 +117,10 @@ export default defineComponent({
action: this.share
});
}
if (this.menu) {
if (menu.length > 0) menu.push(null);
menu = menu.concat(this.menu);
}
modalMenu(menu, ev.currentTarget || ev.target);
}
}
@ -121,62 +129,92 @@ export default defineComponent({
<style lang="scss" scoped>
.fdidabkb {
display: flex;
&.center {
text-align: center;
> .titleContainer {
margin: 0 auto;
}
}
> .back {
position: absolute;
z-index: 1;
top: 0;
left: 0;
height: var(--height);
width: var(--height);
> .buttons {
&.right {
margin-left: 0;
}
}
}
> .buttons {
position: absolute;
z-index: 1;
top: 0;
right: 0;
--margin: 8px;
display: flex;
align-items: center;
height: var(--height);
margin: 0 var(--margin);
&.right {
margin-left: auto;
}
&:empty {
width: var(--height);
}
> .button {
height: var(--height);
width: var(--height);
display: flex;
align-items: center;
justify-content: center;
height: calc(var(--height) - (var(--margin) * 2));
width: calc(var(--height) - (var(--margin) * 2));
box-sizing: border-box;
position: relative;
border-radius: 5px;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
&.highlighted {
color: var(--accent);
}
}
}
> .titleContainer {
display: flex;
align-items: center;
overflow: auto;
white-space: nowrap;
width: calc(100% - (var(--height) * 2));
text-align: left;
> .avatar {
$size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: bottom;
margin: 0 8px;
pointer-events: none;
}
> .icon {
margin-right: 8px;
}
> .title {
display: inline-block;
vertical-align: bottom;
white-space: nowrap;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 16px;
position: relative;
height: var(--height);
white-space: nowrap;
line-height: 1.1;
> .icon + .text {
margin-left: 8px;
}
> .avatar {
$size: 32px;
display: inline-block;
width: $size;
height: $size;
vertical-align: bottom;
margin: calc((var(--height) - #{$size}) / 2) 8px calc((var(--height) - #{$size}) / 2) 0;
pointer-events: none;
> .subtitle {
opacity: 0.6;
font-size: 0.8em;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}