design: move thread actions buttons to (fixed) top

jbuget · Sep 11, 2023 · d86f996 · d86f996
1 parent 3e63ca5
commit d86f996
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 19 deletions.
diff --git a/app.vue b/app.vue
@@ -32,7 +32,7 @@ async function refreshThreadList() {
   </div>
 </template>
 
-<style>
+<style scoped>
 .app {}
 
 .layout-container {
@@ -49,7 +49,7 @@ async function refreshThreadList() {
   width: 18rem;
   max-width: 18rem;
   overflow-y: auto;
-  border: 1px solid lightblue;
+  border: 1px solid lightgray;
 }
 
 .layout-content-wrapper {
@@ -60,7 +60,6 @@ async function refreshThreadList() {
 }
 
 .layout-content-main {
-  width: 500px;
   margin: 0 auto;
 }
 </style>
diff --git a/components/ThreadEditor.vue b/components/ThreadEditor.vue
@@ -104,8 +104,19 @@ async function publishThread(): Promise<void> {
   <div class="editor">
     <Toast />
     <!-- you will need to handle a loading state -->
-    <div v-if="!pending && thread">
-      <h2>ID: {{ thread.id }}</h2>
+    <div class="editor-content" v-if="!pending && thread">
+      <div class="thread-header">
+        <h2 class="thread-title">ID: {{ thread.id }}</h2>
+        <div class="thread-actions">
+          <div class="save">
+            <Button label="Save" icon="pi pi-save" severity="info" size="small" @click="saveThread" />
+          </div>
+          <div class="publish">
+            <Button label="Publish" icon="pi pi-send" severity="success" size="small" @click="publishThread" />
+          </div>
+        </div>
+      </div>
+
       <div class="messages">
         <template v-for="(message, index) in thread.messages" :key="updateKey">
           <div class="message-wrapper">
@@ -114,16 +125,6 @@ async function publishThread(): Promise<void> {
           </div>
         </template>
       </div>
-      <Divider />
-      <div class="thread-actions">
-        <div class="save">
-          <Button label="Save" icon="pi pi-save" severity="info" size="small" @click="saveThread" />
-        </div>
-        <div class="publish">
-          <Button label="Publish" icon="pi pi-send" severity="success" size="small" @click="publishThread" />
-        </div>
-      </div>
-      <p>{{ thread }}</p>
     </div>
     <div v-else>
       Loading...
@@ -132,17 +133,46 @@ async function publishThread(): Promise<void> {
   </div>
 </template>
 
-<style>
+<style scoped>
+.editor {
+  display: flex;
+  flex-direction: column;
+  width: 500px;
+}
+
+.editor-content {
+  position: relative;
+  width: 100%;
+}
+
+.thread-header {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid lightgray;
+  top: 0;
+  background-color: white;
+  z-index: 9999;
+  width: 500px;
+}
+
+.thread-title {
+  display: block;
+  flex-grow: 1;
+}
+
 .messages {
-  margin: 40px auto;
+  margin: 74px auto 40px;
   display: flex;
   flex-direction: column;
+  padding: 40px 0;
 }
 
 .thread-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  padding: 1rem 0;
 }
 
 .thread-actions button {

diff --git a/components/ThreadSummaryList.vue b/components/ThreadSummaryList.vue
@@ -38,7 +38,7 @@ const emit = defineEmits<{
     </div>
 </template>
 
-<style>
+<style scoped>
 .threads {
     padding: 0.5rem;
 }
@@ -47,14 +47,15 @@ const emit = defineEmits<{
     cursor: pointer;
     padding: 0.5rem;
     margin-bottom: 15px;
-    border: 1px solid lightblue;
+    border: 1px solid lightgray;
     overflow: hidden;
 }
 
 .thread-title {
     display: inline-block;
     margin-left: 0.5rem;
 }
+
 .thread-meta {
     display: block;
 }