using ScrollPanel component

Juraci · Jul 25, 2024 · 7f8fbaa · 7f8fbaa
1 parent 8f1583f
commit 7f8fbaa
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 92 deletions.
diff --git a/src/components/NodesArbor.vue b/src/components/NodesArbor.vue
@@ -1,5 +1,6 @@
 <script setup>
 import Card from 'primevue/card';
+import ScrollPanel from 'primevue/scrollpanel';
 import { useNodeStore } from '@/stores/NodeStore';
 import { storeToRefs } from 'pinia';
 
@@ -8,37 +9,36 @@ const { nodesList } = storeToRefs(store);
 </script>
 
 <template>
-  <div class="side-panel-content">
-    <router-link
-      v-for="node in nodesList"
-      :key="node.uuid"
-      :to="`/nodes/${node.uuid}`"
-      style="text-decoration: none; color: inherit"
-    >
-      <Card data-test-node-item>
-        <template #title>
-          <div class="node-card-title">
-            {{ node.title }}
-          </div>
-        </template>
-        <template #content>
-          <div class="node-card-content">
-            {{ node.content }}
-          </div>
-        </template>
-      </Card>
-    </router-link>
-  </div>
+  <ScrollPanel style="height: 94vh">
+    <div class="side-panel-content">
+      <router-link
+        v-for="node in nodesList"
+        :key="node.uuid"
+        :to="`/nodes/${node.uuid}`"
+        style="text-decoration: none; color: inherit"
+      >
+        <Card data-test-node-item>
+          <template #title>
+            <div class="node-card-title">
+              {{ node.title }}
+            </div>
+          </template>
+          <template #content>
+            <div class="node-card-content">
+              {{ node.content }}
+            </div>
+          </template>
+        </Card>
+      </router-link>
+    </div>
+  </ScrollPanel>
 </template>
 
 <style>
 .side-panel-content {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  height: 100%;
-  max-height: 94vh;
-  overflow: auto;
 }
 .node-card-title {
   white-space: nowrap;

diff --git a/src/views/NodeShow.vue b/src/views/NodeShow.vue
@@ -5,6 +5,7 @@ import { ref, watch, computed } from 'vue';
 import InputText from 'primevue/inputtext';
 import Textarea from 'primevue/textarea';
 import Divider from 'primevue/divider';
+import ScrollPanel from 'primevue/scrollpanel';
 import { useNodeStore } from '@/stores/NodeStore';
 import ChildNode from '@/components/ChildNode.vue';
 
@@ -74,71 +75,74 @@ const handleAddChildNode = () => {
         @click="emit('delete', node.uuid)"
       />
     </div>
-    <div class="active-node-content">
-      <InputText
-        v-if="editingTitle"
-        v-model="nodeTitle"
-        autofocus
-        data-test-node-title
-        type="text"
-        @blur="editingTitle = false"
-        @focusout="editingTitle = false"
-        @keydown.enter="editingTitle = false"
-        @keydown.esc="editingTitle = false"
-      />
-      <div v-else data-test-node-title @click="editingTitle = true">
-        {{ node.title || titlePlaceHolder }}
-      </div>
-      <Divider />
-      <Textarea
-        v-if="editingContent"
-        v-model="nodeContent"
-        data-test-node-content
-        tabindex="0"
-        rows="20"
-        autofocus
-        @blur="editingContent = false"
-        @focusout="editingContent = false"
-        @keydown.esc="editingContent = false"
-      />
-      <div
-        v-else
-        data-test-node-content
-        class="final-content"
-        @dblclick="editingContent = true"
-        v-html="md.render(node.content) || contentPlaceholder"
-      ></div>
-      <Divider />
-      <div class="child-nodes-actions">
-        <Button
-          data-test-node-add-child-node
-          label="Add child node"
-          icon="pi pi-plus-circle"
-          severity="secondary"
-          aria-label="Add child node"
-          rounded
-          @click="handleAddChildNode"
+    <ScrollPanel style="width: auto; height: 94vh">
+      <div class="active-node-content">
+        <InputText
+          v-if="editingTitle"
+          v-model="nodeTitle"
+          autofocus
+          data-test-node-title
+          type="text"
+          @blur="editingTitle = false"
+          @focusout="editingTitle = false"
+          @keydown.enter="editingTitle = false"
+          @keydown.esc="editingTitle = false"
+        />
+        <div v-else data-test-node-title @click="editingTitle = true">
+          {{ node.title || titlePlaceHolder }}
+        </div>
+        <Divider />
+        <Textarea
+          v-if="editingContent"
+          v-model="nodeContent"
+          data-test-node-content
+          tabindex="0"
+          rows="20"
+          autofocus
+          @blur="editingContent = false"
+          @focusout="editingContent = false"
+          @keydown.esc="editingContent = false"
         />
-        <Button
-          v-if="node.parentNode"
-          data-test-node-go-back-to-root
-          label="Back to root node"
-          icon="pi pi-arrow-left"
-          as="router-link"
-          :to="rootNodeAddress"
-          severity="secondary"
-          aria-label="Back to root node"
-          rounded
+        <ScrollPanel v-else style="width: auto; height: 400px">
+          <div
+            data-test-node-content
+            class="final-content"
+            @dblclick="editingContent = true"
+            v-html="md.render(node.content) || contentPlaceholder"
+          ></div>
+        </ScrollPanel>
+        <Divider />
+        <div class="child-nodes-actions">
+          <Button
+            data-test-node-add-child-node
+            label="Add child node"
+            icon="pi pi-plus-circle"
+            severity="secondary"
+            aria-label="Add child node"
+            rounded
+            @click="handleAddChildNode"
+          />
+          <Button
+            v-if="node.parentNode"
+            data-test-node-go-back-to-root
+            label="Back to root node"
+            icon="pi pi-arrow-left"
+            as="router-link"
+            :to="rootNodeAddress"
+            severity="secondary"
+            aria-label="Back to root node"
+            rounded
+          />
+        </div>
+        <ChildNode
+          v-for="childNodeUuid in node.childNodes"
+          :key="childNodeUuid"
+          :node-uuid="childNodeUuid"
+          :parent-node-uuid="node.uuid"
+          :level="0"
         />
       </div>
-      <ChildNode
-        v-for="childNodeUuid in node.childNodes"
-        :key="childNodeUuid"
-        :node-uuid="childNodeUuid"
-        :parent-node-uuid="node.uuid"
-        :level="0"
-      />
-    </div>
+    </ScrollPanel>
   </div>
 </template>
 
@@ -157,15 +161,9 @@ const handleAddChildNode = () => {
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
-  max-height: 94vh;
-  overflow: auto;
 }
 .final-content {
   white-space: pre-wrap;
-  min-height: 400px;
-  max-height: 400px;
-  height: 100%;
-  overflow: auto;
 }
 .p-textarea {
   min-height: 400px;