natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: ⚗️ New post button on mobile

This commit is contained in:
ThatOneCalculator 2022-08-18 16:48:22 -07:00
parent edb60d0961
commit 3aa8a5ca60
2 changed files with 50 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "misskey", "name": "misskey",
"version": "12.118.1-calc.8.2", "version": "12.118.1-calc.9",
"codename": "aqua", "codename": "aqua",
"repository": { "repository": {
"type": "git", "type": "git",

50
packages/client/src/ui/universal.vue
View File

@ -23,9 +23,10 @@
<button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="fas fa-home"></i></button> <button class="button home _button" @click="mainRouter.currentRoute.value.name === 'index' ? top() : mainRouter.push('/')"><i class="fas fa-home"></i></button>
<button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button> <button class="button notifications _button" @click="mainRouter.push('/my/notifications')"><i class="fas fa-bell"></i><span v-if="$i?.hasUnreadNotification" class="indicator"><i class="fas fa-circle"></i></span></button>
<button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button> <button class="button widget _button" @click="widgetsShowing = true"><i class="fas fa-layer-group"></i></button>
<button class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
</div> </div>
<button id="postButton" class="button post _button" @click="os.post()"><i class="fas fa-pencil-alt"></i></button>
<transition :name="$store.state.animation ? 'menuDrawer-back' : ''"> <transition :name="$store.state.animation ? 'menuDrawer-back' : ''">
<div <div
v-if="drawerMenuShowing" v-if="drawerMenuShowing"
@ -115,6 +116,22 @@ mainRouter.on('change', () => {
document.documentElement.style.overflowY = 'scroll'; document.documentElement.style.overflowY = 'scroll';
let timer = -1;
const postButton = document.getElementById('postButton');
window.addEventListener('scroll', () => {
if (timer !== -1) {
if (postButton != null) {
postButton.style.animation = 'shrink 0.5s linear 1';
}
clearTimeout(timer);
}
timer = setTimeout(() => {
if (postButton != null) {
postButton.style.animation = 'grow 0.5s linear 1';
}
}, 150);
}, false);
if (defaultStore.state.widgets.length === 0) { if (defaultStore.state.widgets.length === 0) {
defaultStore.set('widgets', [{ defaultStore.set('widgets', [{
name: 'calendar', name: 'calendar',
@ -175,6 +192,24 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@keyframes shrink {
from {
transform: scale(1);
}
to {
transform: scale(0);
}
}
@keyframes grow {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.widgetsDrawer-enter-active, .widgetsDrawer-enter-active,
.widgetsDrawer-leave-active { .widgetsDrawer-leave-active {
opacity: 1; opacity: 1;
@ -285,6 +320,19 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
background: var(--bg); background: var(--bg);
} }
> #postButton {
bottom: 6rem;
right: 1.5rem;
height: 4.5rem;
width: 4.5rem;
background: var(--panelHighlight);
position: fixed !important;
z-index: 1000;
font-size: 16px;
border-radius: 10px;
box-shadow: var(--shadow) 0px 0px 25px;
}
> .buttons { > .buttons {
position: fixed; position: fixed;
z-index: 1000; z-index: 1000;