refs #3771 Add compose window to footer

src/renderer/components/TimelineSpace.vue

@@ -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%;

src/renderer/components/TimelineSpace/Compose.vue

@@ -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>

src/renderer/components/TimelineSpace/Contents/Home.vue

@@ -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>