Merge pull request #3753 from FlowFuse/3657-optimize-the-node-red-imm…

…ersive-editor-experience

UX Improvements to Immersive Editor

frontend/src/pages/instance/Editor/components/EditorWrapper.vue

@@ -16,6 +16,7 @@
             :src="instance.url"
             referrerpolicy="strict-origin-when-cross-origin"
             allowfullscreen
+            :style="{'pointer-events': disableEvents ? 'none' : 'auto'}"
         />
     </section>
 </template>
@@ -30,6 +31,10 @@ export default {
         instance: {
             type: Object,
             required: true
+        },
+        disableEvents: {
+            type: Boolean,
+            default: false
         }
     },
     computed: {

frontend/src/pages/instance/Editor/components/drawer/DrawerTrigger.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="drawer-trigger" @click="toggleDrawer">
+        <img src="../../../../../images/icons/ff-logo--wordmark--grey.svg" alt="logo">
+        <ChevronUpIcon class="ff-btn--icon close-drawer" />
+    </div>
+</template>
+
+<script>
+import { ChevronUpIcon } from '@heroicons/vue/solid'
+
+export default {
+    name: 'DrawerTrigger',
+    components: { ChevronUpIcon }
+}
+</script>
+
+<style scoped lang="scss">
+.drawer-trigger {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  position: absolute;
+  top: -40px;
+  left: 50%;
+  margin-left: -84px;
+  padding: 10px 16px 8px;
+  color: $ff-grey-400;
+  background: white;
+  border: 1px solid $ff-grey-400;
+  box-shadow: 4px -4px 8px rgba(0, 0, 0, 0.10);
+  border-radius: 10px 10px 0 0;
+  transition: ease-out .7s;
+
+  img {
+    height: 20px;
+  }
+
+  .ff-btn--icon {
+    color: $ff-grey-400
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.open {
+  height: 320px;
+
+  .drawer-trigger {
+    top: 150vh;
+    transition: ease-in .1s;
+  }
+}
+</style>

frontend/src/pages/instance/Editor/components/drawer/MiddleCloseButton.vue

@@ -0,0 +1,66 @@
+<template>
+    <transition name="slideIn">
+        <div v-if="isVisible" class="drawer-close">
+            <ChevronDownIcon class="ff-btn--icon" />
+        </div>
+    </transition>
+</template>
+
+<script>
+import { ChevronDownIcon } from '@heroicons/vue/solid'
+
+export default {
+    name: 'MiddleCloseButton',
+    components: { ChevronDownIcon },
+    props: {
+        isVisible: {
+            type: Boolean,
+            default: false
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+
+.drawer-close {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: white;
+  border-radius: 5px 5px 0 0;
+  width: 100px;
+  height: 30px;
+  top: -30px;
+  left: 50%;
+  margin-left: -50px;
+  box-shadow: 4px -4px 8px rgba(0, 0, 0, 0.10);
+  border: 1px solid $ff-grey-300;
+  border-bottom: none;
+  color: $ff-grey-400;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.slideIn-enter-active,
+.slideIn-leave-active {
+  transition: ease-in-out .1s;
+}
+.slideIn-enter-from {
+  opacity: 0;
+  transform: translateY(100%);
+}
+.slideIn-enter-to {
+  opacity: 1;
+}
+.slideIn-leave-from {
+  opacity: 1;
+}
+.slideIn-leave-to {
+  opacity: 0;
+  transform: translateY(100%);
+}
+</style>

frontend/src/pages/instance/Editor/components/drawer/ResizeBar.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class="resize-bar">
+        <transition name="fade">
+            <div v-if="isHandleVisible" class="resize-handle" :class="{shadowed: isHandleShadowed}">
+                <span>...</span>
+            </div>
+        </transition>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'ResizeBar',
+    props: {
+        isHandleVisible: {
+            type: Boolean,
+            default: true
+        },
+        isHandleShadowed: {
+            type: Boolean,
+            default: true
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+.resize-bar {
+  position: relative;
+  height: 6px;
+  border-top: 1px solid $ff-grey-400;
+  background: white;
+  display: flex;
+  justify-content: center;
+  z-index: 15;
+
+  .resize-handle {
+    display: flex;
+    justify-content: right;
+    align-self: self-end;
+    align-items: end;
+    letter-spacing: 10px;
+    width: 50px;
+    height: 10px;
+    background: $ff-grey-100;
+    border: 1px solid $ff-grey-300;
+    border-radius: 5px;
+    color: $ff-grey-300;
+    transition: ease-in-out 0.3s;
+
+    &.shadowed {
+      box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.10);
+    }
+  }
+
+  &:hover {
+    cursor: ns-resize;
+
+    .resize-handle {
+      background: $ff-grey-200;
+      color: $ff-grey-400;
+    }
+  }
+}
+</style>