Mastodon
/
Whalebird-desktop-client-mac-linux-windows
mirror of https://github.com/h3poteto/whalebird-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

refs #3771 Add compose window to footer

This commit is contained in:
AkiraFukushima 2023-01-21 16:26:49 +09:00
parent 692ecad644
commit 98ceb35b0f
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
3 changed files with 107 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/renderer/components/TimelineSpace.vue
View File

@ -11,7 +11,13 @@
<header class="header" style="-webkit-app-region: drag">
<header-menu></header-menu>
</header>
<contents></contents>
<div class="contents-wrapper" ref="contentsRef">
<contents />
</div>
<div class="compose-wrapper">
<compose />
<resize-observer @notify="composeResized" />
</div>
</div>
<modals></modals>
<receive-drop v-show="droppableVisible"></receive-drop>
@ -26,6 +32,7 @@ import { useI18next } from 'vue3-i18next'
import SideMenu from './TimelineSpace/SideMenu.vue'
import HeaderMenu from './TimelineSpace/HeaderMenu.vue'
import Contents from './TimelineSpace/Contents.vue'
import Compose from './TimelineSpace/Compose.vue'
import Modals from './TimelineSpace/Modals.vue'
import Mousetrap from 'mousetrap'
import ReceiveDrop from './TimelineSpace/ReceiveDrop.vue'
@ -42,7 +49,7 @@ import { ACTION_TYPES as NEW_TOOT_ACTION } from '@/store/TimelineSpace/Modals/Ne
export default defineComponent({
name: 'timeline-space',
components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop },
components: { SideMenu, HeaderMenu, Modals, Contents, ReceiveDrop, Compose },
setup() {
const space = 'TimelineSpace'
const store = useStore()
@ -51,6 +58,7 @@ export default defineComponent({
const dropTarget = ref<any>(null)
const droppableVisible = ref<boolean>(false)
const contentsRef = ref<HTMLElement | null>(null)
const loading = computed(() => store.state.TimelineSpace.loading)
const collapse = computed(() => store.state.TimelineSpace.SideMenu.collapse)
@ -155,10 +163,18 @@ export default defineComponent({
e.preventDefault()
}
const composeResized = (event: { width: number; height: number }) => {
if (contentsRef.value) {
contentsRef.value.style.setProperty('height', `calc(100% - ${event.height}px)`)
}
}
return {
loading,
collapse,
droppableVisible
droppableVisible,
composeResized,
contentsRef
}
}
})
@ -169,6 +185,12 @@ export default defineComponent({
height: 100%;
}
.compose-wrapper {
position: sticky;
bottom: 0;
padding: 0 12px 18px 12px;
}
.page {
margin-left: 180px;
height: 100%;

82
src/renderer/components/TimelineSpace/Compose.vue Normal file
View File

@ -0,0 +1,82 @@
<template>
<div class="compose">
<el-form :model="form" class="compose-form">
<el-input v-model="form.status" type="textarea" :autosize="{ minRows: 2 }" :placeholder="$t('modals.new_toot.status')" />
<div class="form-footer">
<el-button-group class="tool-buttons">
<el-button link size="default">
<font-awesome-icon icon="camera" />
</el-button>
<el-button link size="default" disabled>
<font-awesome-icon icon="square-poll-horizontal" />
</el-button>
<el-button link size="default">
<font-awesome-icon icon="globe" />
</el-button>
<el-button link size="default">
<font-awesome-icon :icon="['far', 'face-smile']" />
</el-button>
</el-button-group>
<div class="actions-group">
<span>500</span>
<el-button type="primary"> {{ $t('modals.new_toot.toot') }} </el-button>
</div>
</div>
</el-form>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive } from 'vue'
export default defineComponent({
name: 'Compose',
setup() {
const form = reactive({
status: ''
})
return {
form
}
}
})
</script>
<style lang="scss" scoped>
.compose {
height: auto;
width: 100%;
box-sizing: border-box;
.compose-form {
height: calc(100% - 24px);
}
.compose-form :deep(.el-textarea__inner) {
color: var(--theme-primary-color);
background-color: var(--theme-background-color);
box-shadow: 0 0 0 1px var(--theme-border-color, var(--theme-border-color)) inset;
}
.form-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 4px;
.tool-buttons {
button {
margin-right: 8px;
}
}
.actions-group {
span {
margin-right: 8px;
color: var(--theme-secondary-color);
}
}
}
}
</style>

44
src/renderer/components/TimelineSpace/Contents/Home.vue
View File

@ -27,12 +27,6 @@
</template>
</template>
</DynamicScroller>
<div :class="openSideBar ? 'upper-with-side-bar' : 'upper'" v-show="!heading">
<el-button type="primary" @click="upper" circle>
<font-awesome-icon icon="angle-up" class="upper-icon" />
</el-button>
</div>
</div>
</template>
@ -204,10 +198,6 @@ export default defineComponent({
}, 500)
})
}
const upper = () => {
scroller.value.scrollToItem(0)
focusedId.value = null
}
const focusNext = () => {
if (currentFocusedIndex.value === -1) {
focusedId.value = timeline.value[0].uri + timeline.value[0].id
@ -245,7 +235,6 @@ export default defineComponent({
focusToot,
openSideBar,
heading,
upper,
account
}
}
@ -269,39 +258,6 @@ export default defineComponent({
.loading-card:empty {
height: 0;
}
.upper {
position: fixed;
bottom: 20px;
right: 20px;
transition: all 0.5s;
}
.upper-with-side-bar {
position: fixed;
bottom: 20px;
right: calc(20px + var(--current-sidebar-width));
transition: all 0.5s;
}
.upper-icon {
padding: 3px;
}
.unread {
position: fixed;
right: 24px;
top: 52px;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff;
padding: 4px 8px;
border-radius: 0 0 2px 2px;
z-index: 1;
&:empty {
display: none;
}
}
}
</style>