From 902e6e81096ee3ca9ab0fed130e760f0fb391d29 Mon Sep 17 00:00:00 2001
From: VIAUD Nathan <nathan.viaud@inria.fr>
Date: Tue, 16 Apr 2024 15:01:49 +0200
Subject: [PATCH] improvement: display chapter title on top of the chapter node
---
src/features/ePocFlow/nodes/ActivityNode.vue | 56 ----------------
src/features/ePocFlow/nodes/ChapterNode.vue | 57 +++++++++-------
src/features/ePocFlow/nodes/PageNode.vue | 68 +-------------------
src/features/ePocFlow/nodes/_nodes.scss | 55 ++++++++++++++++
src/global.scss | 2 +
5 files changed, 91 insertions(+), 147 deletions(-)
create mode 100644 src/features/ePocFlow/nodes/_nodes.scss
diff --git a/src/features/ePocFlow/nodes/ActivityNode.vue b/src/features/ePocFlow/nodes/ActivityNode.vue
index 1cfcfc6d..34f7c951 100644
--- a/src/features/ePocFlow/nodes/ActivityNode.vue
+++ b/src/features/ePocFlow/nodes/ActivityNode.vue
@@ -127,60 +127,4 @@ const activityIndex = computed(() => {
.vue-flow__node.selected .node {
border: 2px dashed var(--editor-blue);
}
-
-.node.hover:has(.ghost) {
- &.node-list {
- padding: 1.5rem;
- }
-}
-
-.container.hover {
- .node {
- transition: all 0.2s ease-in-out;
- background-color: var(--node-hover);
- box-shadow: 0 2px 5px 0 var(--shadow-outer);
- }
-}
-
-.vue-flow__handle {
- width: 12px;
- height: 12px;
- top: calc(30px + 1rem + 1px);
- &-left {
- left: -6px;
- }
- &-right {
- right: -6px;
- }
-}
-
-.not-connected {
- background-color: var(--editor-red);
-}
-
-.container {
- position: relative;
-
- &:hover {
- .node-title {
- overflow-x: visible;
- }
- }
-}
-
-.node-title {
- height: 1.5rem;
- margin: 0;
- padding: 0.2rem;
- top: -1.75rem;
- max-width: calc(60px + 1.8rem);
- overflow-x: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- position: absolute;
-
- &.active {
- color: var(--editor-blue);
- }
-}
</style>
diff --git a/src/features/ePocFlow/nodes/ChapterNode.vue b/src/features/ePocFlow/nodes/ChapterNode.vue
index 00718451..1de599ac 100644
--- a/src/features/ePocFlow/nodes/ChapterNode.vue
+++ b/src/features/ePocFlow/nodes/ChapterNode.vue
@@ -61,33 +61,42 @@ const connectedBadges = computed(() => getConnectedBadges(currentNode.data.conte
</script>
<template>
- <div class="node-chapter">
- <div v-if="connectedBadges.length > 0" class="badge-notification badge-notification-left">
- <img src="/img/badge/notification.svg" alt="notification" />
- <small>{{ connectedBadges.length }}</small>
+ <div>
+ <div class="node-chapter">
+ <div v-if="connectedBadges.length > 0" class="badge-notification badge-notification-left">
+ <img src="/img/badge/notification.svg" alt="notification" />
+ <small>{{ connectedBadges.length }}</small>
+ </div>
+
+ <p
+ class="node-title"
+ :class="{ active: editorStore.openedElementId ? editorStore.openedElementId === props.id : false }"
+ >
+ {{ currentNode.data.formValues.title }}
+ </p>
+ <ContentButton
+ :id="currentNode.data.contentId"
+ :data-testid="`chapter-${currentNode.data.index}`"
+ :icon="currentNode.data.action.icon"
+ :is-draggable="false"
+ :class-list="classList"
+ :is-active="editorStore.openedElementId ? editorStore.openedElementId === currentNode.id : false"
+ :subtitle="subtitle"
+ @click="openForm()"
+ @mousedown="mouseDown"
+ @contextmenu="onContextMenu"
+ />
</div>
- <ContentButton
- :id="currentNode.data.contentId"
- :data-testid="`chapter-${currentNode.data.index}`"
- :icon="currentNode.data.action.icon"
- :is-draggable="false"
- :class-list="classList"
- :is-active="editorStore.openedElementId ? editorStore.openedElementId === currentNode.id : false"
- :subtitle="subtitle"
- @click="openForm()"
- @mousedown="mouseDown"
- @contextmenu="onContextMenu"
+ <!-- ! mousedown.stop important in vue-flow v1.16.4 on non draggable node -->
+ <Handle
+ :data-testid="`source-chapter-${currentNode.data.index}`"
+ type="source"
+ :position="Position.Right"
+ :connectable="!isSource && !editorStore.selectNodeMode"
+ :class="{ 'not-connected': !isSource }"
+ @mousedown.stop
/>
</div>
- <!-- ! mousedown.stop important in vue-flow v1.16.4 on non draggable node -->
- <Handle
- :data-testid="`source-chapter-${currentNode.data.index}`"
- type="source"
- :position="Position.Right"
- :connectable="!isSource && !editorStore.selectNodeMode"
- :class="{ 'not-connected': !isSource }"
- @mousedown.stop
- />
</template>
<style scoped lang="scss">
diff --git a/src/features/ePocFlow/nodes/PageNode.vue b/src/features/ePocFlow/nodes/PageNode.vue
index 6fdec36b..e200e10f 100644
--- a/src/features/ePocFlow/nodes/PageNode.vue
+++ b/src/features/ePocFlow/nodes/PageNode.vue
@@ -129,70 +129,4 @@ const pageIndex = computed(() => {
:connectable="connectable && !editorStore.selectNodeMode"
/>
</div>
-</template>
-
-<style scoped lang="scss">
-.node.hover:has(.ghost) {
- &.node-list {
- padding: 1.5rem;
- }
-}
-
-.container.hover {
- .node {
- transition: all 0.2s ease-in-out;
- box-shadow: 0 2px 5px 0 var(--shadow-outer);
-
- &:not(.active) {
- background-color: var(--node-hover);
- }
- &.active {
- // #E1F4FA == node-active
- background-color: darken(#e1f4fa, 5%);
- }
- }
-}
-
-.vue-flow__handle {
- width: 12px;
- height: 12px;
- top: calc(30px + 1rem + 1px);
- z-index: 20;
- &-left {
- left: -6px;
- }
- &-right {
- right: -6px;
- }
-}
-
-.not-connected {
- background-color: var(--editor-red);
-}
-
-.container {
- position: relative;
-
- &:hover {
- .node-title {
- overflow-x: visible;
- }
- }
-}
-
-.node-title {
- height: 1.5rem;
- margin: 0;
- padding: 0.2rem;
- top: -1.75rem;
- max-width: calc(60px + 1.8rem);
- overflow-x: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- position: absolute;
-
- &.active {
- color: var(--editor-blue);
- }
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/src/features/ePocFlow/nodes/_nodes.scss b/src/features/ePocFlow/nodes/_nodes.scss
new file mode 100644
index 00000000..67c9b9a0
--- /dev/null
+++ b/src/features/ePocFlow/nodes/_nodes.scss
@@ -0,0 +1,55 @@
+.node.hover:has(.ghost) {
+ &.node-list {
+ padding: 1.5rem;
+ }
+}
+
+.container.hover {
+ .node {
+ transition: all 0.2s ease-in-out;
+ background-color: var(--node-hover);
+ box-shadow: 0 2px 5px 0 var(--shadow-outer);
+ }
+}
+
+.vue-flow__handle {
+ width: 12px;
+ height: 12px;
+ top: calc(30px + 1rem + 1px);
+ &-left {
+ left: -6px;
+ }
+ &-right {
+ right: -6px;
+ }
+}
+
+.not-connected {
+ background-color: var(--editor-red);
+}
+
+.container {
+ position: relative;
+}
+
+.node-title {
+ height: 1.5rem;
+ margin: 0;
+ padding: 0 0.2rem;
+ top: -1.75rem;
+ max-width: calc(60px + 1.8rem);
+ overflow-x: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ position: absolute;
+
+ border-radius: 4px;
+
+ &.active {
+ color: var(--editor-blue);
+ }
+
+ &:hover {
+ overflow: visible;
+ }
+}
diff --git a/src/global.scss b/src/global.scss
index 82463bb4..d09e8f72 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -9,6 +9,8 @@
@import '_icon';
@import '_tinymce';
+@import 'src/features/ePocFlow/nodes/_nodes';
+
html,
body,
#app {
--
GitLab