butter/keanu-weblite
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Fix emoji picker bottom sheet

Browse source 
Padding and swipe gestures etc. Issue #65.
This commit is contained in:
N-Pex 2021-04-09 15:31:49 +02:00
parent dccf880547
commit 8c2ef10a1f
2 changed files with 52 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/Chat.vue
View file

@ -259,7 +259,6 @@
</div> </div>
<MessageOperationsBottomSheet ref="messageOperationsSheet" xv-show="showEmojiPicker"> <MessageOperationsBottomSheet ref="messageOperationsSheet" xv-show="showEmojiPicker">
<div>
<MessageOperationsPicker <MessageOperationsPicker
v-on:close="showEmojiPicker = false" v-on:close="showEmojiPicker = false"
v-if="selectedEvent" v-if="selectedEvent"
@ -272,7 +271,6 @@
:event="selectedEvent" :event="selectedEvent"
/> />
<VEmojiPicker ref="emojiPicker" style="width: 100%" @select="emojiSelected" /> <VEmojiPicker ref="emojiPicker" style="width: 100%" @select="emojiSelected" />
</div>
</MessageOperationsBottomSheet> </MessageOperationsBottomSheet>
<!-- "NOT ALLOWED FOR GUEST ACCOUNTS" dialog --> <!-- "NOT ALLOWED FOR GUEST ACCOUNTS" dialog -->

74
src/components/MessageOperationsBottomSheet.vue
View file

@ -1,13 +1,29 @@
<template> <template>
<SwipeableBottomSheet <div class="message-operations-bottom-sheet">
class="bottom-sheet" <v-fade-transition>
ref="sheet" <div
:halfY="1" v-show="!closed"
:openY="0.4" @click.stop="backgroundClick"
:data-closed="closed ? 1 : 0" style="
> position: absolute;
<slot></slot> top: 0;
</SwipeableBottomSheet> left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
"
/>
</v-fade-transition>
<SwipeableBottomSheet
class="bottom-sheet ma-0 pa-0"
ref="sheet"
:halfY="0.5"
:openY="0.2"
:data-closed="closed ? 1 : 0"
>
<slot></slot>
</SwipeableBottomSheet>
</div>
</template> </template>
<script> <script>
@ -19,19 +35,13 @@ export default {
}, },
data() { data() {
return { return {
closed: true closed: true,
} };
}, },
mounted() { mounted() {
this.$watch( this.$watch("$refs.sheet.state", (new_value, ignored_old_value) => {
"$refs.sheet.state", this.closed = new_value == "close";
(new_value, ignored_old_value) => { });
this.closed = new_value == 'close';
if (new_value == 'half') {
this.$refs.sheet.setState("close");
}
}
);
}, },
methods: { methods: {
open() { open() {
@ -39,13 +49,21 @@ export default {
this.$refs.sheet.setState("close"); this.$refs.sheet.setState("close");
} else { } else {
// Reset scroll before opening! // Reset scroll before opening!
this.$refs.sheet.setState("open"); this.$refs.sheet.setState("half");
} }
}, },
close() { close() {
this.$refs.sheet.setState("close"); this.$refs.sheet.setState("close");
}, },
backgroundClick() {
if (this.$refs.sheet.state == "half") {
this.$refs.sheet.setState("close");
} else {
this.$refs.sheet.setState("half");
}
},
}, },
}; };
</script> </script>
@ -57,13 +75,23 @@ export default {
so we use our own flag (data-closed) here to that we can so we use our own flag (data-closed) here to that we can
dim also when it is just half open */ dim also when it is just half open */
.bottom-sheet[data-closed="0"] .bg { .bottom-sheet[data-closed="0"] .bg {
display: block; display: none;
transition: all 0.3s; transition: all 0.3s;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.3) !important; background: transparent !important;
} }
.message-operations-bottom-sheet {
.pan-area {
padding-bottom: 0px;
}
.card {
padding: 0px !important;
}
}
</style> </style>