From 5ab39aee24c0d48b0833b770e88257e29a7de7b8 Mon Sep 17 00:00:00 2001
From: Legendword <zwh@legendword.com>
Date: Sun, 6 Nov 2022 12:13:52 -0800
Subject: [PATCH 1/6] Fix typo in TapestryMedia css

---
 templates/vue/src/components/Lightbox/media/TapestryMedia.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/vue/src/components/Lightbox/media/TapestryMedia.vue b/templates/vue/src/components/Lightbox/media/TapestryMedia.vue
index 85d0e33db..d26b1922c 100644
--- a/templates/vue/src/components/Lightbox/media/TapestryMedia.vue
+++ b/templates/vue/src/components/Lightbox/media/TapestryMedia.vue
@@ -175,7 +175,7 @@ export default {
 .media-wrapper {
   overflow: auto;
   height: 100%;
-  widows: 100%;
+  width: 100%;
   padding: 0;
 
   &:not(.context-multi-content) {

From baa1cd39df6f71d583b592094f439ac045fe8fa6 Mon Sep 17 00:00:00 2001
From: Legendword <zwh@legendword.com>
Date: Sun, 6 Nov 2022 14:59:26 -0800
Subject: [PATCH 2/6] Add button to show node information in lightbox

---
 .../vue/src/components/Lightbox/index.vue     | 84 +++++++++++++++++
 .../vue/src/components/Sidebar/index.vue      | 50 +---------
 .../vue/src/components/common/NodeLicense.vue | 92 +++++++++++++++++++
 3 files changed, 179 insertions(+), 47 deletions(-)
 create mode 100644 templates/vue/src/components/common/NodeLicense.vue

diff --git a/templates/vue/src/components/Lightbox/index.vue b/templates/vue/src/components/Lightbox/index.vue
index 1e035186e..46a5a5e6f 100644
--- a/templates/vue/src/components/Lightbox/index.vue
+++ b/templates/vue/src/components/Lightbox/index.vue
@@ -41,6 +41,16 @@
           tabindex="0"
           @clicked="toggleFavourite(node.id)"
         />
+        <modal-button
+          icon="info-circle"
+          icon-size="sm"
+          :title="showInformation ? 'Hide information' : 'Show information'"
+          :icon-color="showInformation ? 'var(--highlight-color)' : ''"
+          :bg-color="showInformation ? '#fff' : ''"
+          :bg-hover-color="showInformation ? '#fff' : 'var(--highlight-color)'"
+          tabindex="0"
+          @clicked="showInformation = !showInformation"
+        />
         <modal-button
           v-if="canEditNode"
           aria-label="Edit this node."
@@ -52,6 +62,23 @@
         />
       </div>
       <div data-qa="lightbox-content" class="content" :style="contentStyles">
+        <div
+          class="information-sheet"
+          :class="{
+            show: showInformation,
+          }"
+        >
+          <h1 class="information-header">{{ node.title }}</h1>
+          <section v-if="node.description">
+            <h2 class="content-header">About</h2>
+            <div class="content-body" v-html="node.description"></div>
+          </section>
+          <node-license :node="node"></node-license>
+          <section v-if="node.references">
+            <h2 class="content-header">References</h2>
+            <div class="content-body" v-html="node.references"></div>
+          </section>
+        </div>
         <multi-content-media
           v-if="node.mediaType === 'multi-content'"
           id="multicontent-container"
@@ -82,6 +109,7 @@ import client from "@/services/TapestryAPI"
 import MultiContentMedia from "./media/MultiContentMedia"
 import TapestryMedia from "./media/TapestryMedia"
 import PageMenu from "./media/MultiContentMedia/PageMenu"
+import NodeLicense from "@/components/common/NodeLicense"
 import ModalButton from "./ModalButton"
 import { names } from "@/config/routes"
 import Helpers from "@/utils/Helpers"
@@ -93,6 +121,7 @@ export default {
     TapestryMedia,
     PageMenu,
     ModalButton,
+    NodeLicense,
   },
   props: {
     visible: {
@@ -113,6 +142,7 @@ export default {
     return {
       dimensions: {},
       isUsingCustomDimensions: false,
+      showInformation: false,
     }
   },
   computed: {
@@ -262,6 +292,8 @@ export default {
       }
     },
     handleShow() {
+      this.showInformation = false
+
       // if opening a multi-content unit node, instead go to its first visible child
       if (
         this.node.mediaType === "multi-content" &&
@@ -382,6 +414,58 @@ body.tapestry-lightbox-open {
     position: relative;
     height: 100%;
     overflow: hidden;
+    border-radius: 15px;
+  }
+
+  .information-sheet {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    max-height: 100%;
+    z-index: 100;
+    overflow: auto;
+    padding: 20px;
+    box-sizing: border-box;
+    background-color: #5d656c;
+    color: #becddc;
+    text-align: left;
+    box-shadow: 0 0 20px #000;
+    transition: margin-top 0.3s ease-in-out;
+    margin-top: -100%;
+
+    &.show {
+      margin-top: 0;
+    }
+
+    .content-header {
+      color: #fff;
+      margin: 1em -1em 0.2em;
+      border-bottom: solid 2px #6b747d;
+      padding: 0.2em 1em;
+      font-size: 1.75em;
+    }
+
+    .content-body {
+      display: block;
+      text-align: left;
+      color: #becddc;
+
+      a {
+        color: #becddc;
+        text-decoration: underline;
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+
+    .information-header {
+      color: #fff;
+      font-size: 1.75rem;
+      font-weight: 500;
+      margin-bottom: 1em;
+    }
   }
 
   .full-height-media {
diff --git a/templates/vue/src/components/Sidebar/index.vue b/templates/vue/src/components/Sidebar/index.vue
index e25086cb4..49da71083 100644
--- a/templates/vue/src/components/Sidebar/index.vue
+++ b/templates/vue/src/components/Sidebar/index.vue
@@ -72,34 +72,7 @@
           <div class="content-body" v-html="node.description"></div>
         </section>
         <section ref="copyright" data-name="copyright">
-          <section v-if="node.license">
-            <h2 class="content-header">
-              License
-            </h2>
-            <p class="content-body" style="margin-bottom: 0.5em;">
-              <a
-                v-if="license.type === licenseTypes.CUSTOM && license.link"
-                :href="license.link"
-                target="_blank"
-              >
-                <span style="margin-right: 4px;" class="license-link">
-                  {{ license.name }}
-                </span>
-                <tapestry-icon icon="external-link-alt" />
-              </a>
-              <span v-else class="license-link">
-                <span v-if="node.license.type !== licenseTypes.CUSTOM">
-                  <i v-for="icon in license.icons" :key="icon" :class="icon"></i>
-                </span>
-                {{ license.name }}
-              </span>
-            </p>
-            <div
-              v-if="license.type === licenseTypes.CUSTOM && license.description"
-              class="content-body"
-              v-html="license.description"
-            ></div>
-          </section>
+          <node-license :node="node"></node-license>
           <section v-if="node.references">
             <h2 class="content-header">References</h2>
             <div class="content-body" v-html="node.references"></div>
@@ -119,8 +92,8 @@ import { mapGetters } from "vuex"
 import { names } from "@/config/routes"
 import Helpers from "@/utils/Helpers"
 import { nodeStatus } from "@/utils/constants"
-import { licenseTypes, licenses } from "@/utils/constants"
 import * as wp from "@/services/wp"
+import NodeLicense from "@/components/common/NodeLicense"
 import TapestryIcon from "@/components/common/TapestryIcon"
 import NodeReview from "./NodeReview"
 
@@ -132,6 +105,7 @@ export default {
   components: {
     NodeReview,
     TapestryIcon,
+    NodeLicense,
   },
   computed: {
     ...mapGetters(["getNode"]),
@@ -160,15 +134,6 @@ export default {
     canEdit() {
       return Helpers.hasPermission(this.node, "edit")
     },
-    licenseTypes() {
-      return licenseTypes
-    },
-    license() {
-      return {
-        ...this.node.license,
-        ...licenses[this.node.license.type],
-      }
-    },
     isReviewParticipant() {
       if (wp.canEditTapestry()) {
         return this.node.reviewStatus
@@ -486,15 +451,6 @@ export default {
               color: #fff;
             }
           }
-
-          .license-link {
-            color: white;
-            text-transform: capitalize;
-            font-weight: 600;
-            i {
-              margin-right: 4px;
-            }
-          }
         }
       }
     }
diff --git a/templates/vue/src/components/common/NodeLicense.vue b/templates/vue/src/components/common/NodeLicense.vue
new file mode 100644
index 000000000..cf542616d
--- /dev/null
+++ b/templates/vue/src/components/common/NodeLicense.vue
@@ -0,0 +1,92 @@
+<template>
+  <section v-if="node.license">
+    <h2 class="content-header">License</h2>
+    <p class="content-body" style="margin-bottom: 0.5em;">
+      <a
+        v-if="license.type === licenseTypes.CUSTOM && license.link"
+        :href="license.link"
+        target="_blank"
+      >
+        <span style="margin-right: 4px;" class="license-link">
+          {{ license.name }}
+        </span>
+        <tapestry-icon icon="external-link-alt" />
+      </a>
+      <span v-else class="license-link">
+        <span v-if="node.license.type !== licenseTypes.CUSTOM">
+          <i v-for="icon in license.icons" :key="icon" :class="icon"></i>
+        </span>
+        {{ license.name }}
+      </span>
+    </p>
+    <div
+      v-if="license.type === licenseTypes.CUSTOM && license.description"
+      class="content-body"
+      v-html="license.description"
+    ></div>
+  </section>
+</template>
+
+<script>
+import TapestryIcon from "@/components/common/TapestryIcon"
+import { licenseTypes, licenses } from "@/utils/constants"
+
+export default {
+  name: "node-license",
+  components: {
+    TapestryIcon,
+  },
+  props: {
+    node: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      licenseTypes,
+    }
+  },
+  computed: {
+    license() {
+      return {
+        ...this.node.license,
+        ...licenses[this.node.license.type],
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.content-header {
+  margin: 1em -1em 0.2em;
+  position: relative;
+  border-bottom: solid 2px #6b747d;
+  padding: 0.2em 1em;
+  font-size: 1.75em;
+}
+
+.content-body {
+  display: block;
+  text-align: left;
+  color: #becddc;
+
+  a {
+    color: #becddc;
+    text-decoration: underline;
+    &:hover {
+      color: #fff;
+    }
+  }
+
+  .license-link {
+    color: white;
+    text-transform: capitalize;
+    font-weight: 600;
+    i {
+      margin-right: 4px;
+    }
+  }
+}
+</style>

From 263b761c3282ac6deca54be7d46053f2a7318cdc Mon Sep 17 00:00:00 2001
From: Legendword <zwh@legendword.com>
Date: Thu, 10 Nov 2022 09:51:41 -0800
Subject: [PATCH 3/6] Remove unused data-name attributes in Sidebar

---
 templates/vue/src/components/Sidebar/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/vue/src/components/Sidebar/index.vue b/templates/vue/src/components/Sidebar/index.vue
index 49da71083..91c4f9f96 100644
--- a/templates/vue/src/components/Sidebar/index.vue
+++ b/templates/vue/src/components/Sidebar/index.vue
@@ -49,7 +49,7 @@
       tabindex="0"
       :class="['sidebar', { closed: closed }]"
     >
-      <header ref="info" class="sidebar-header" data-name="info">
+      <header ref="info" class="sidebar-header">
         <h1 class="content-title">{{ node.title }}</h1>
         <div class="button-container">
           <b-button
@@ -71,14 +71,14 @@
           <h2 class="content-header">About</h2>
           <div class="content-body" v-html="node.description"></div>
         </section>
-        <section ref="copyright" data-name="copyright">
+        <section ref="copyright">
           <node-license :node="node"></node-license>
           <section v-if="node.references">
             <h2 class="content-header">References</h2>
             <div class="content-body" v-html="node.references"></div>
           </section>
         </section>
-        <section v-if="isReviewParticipant" ref="review" data-name="review">
+        <section v-if="isReviewParticipant" ref="review">
           <h2 class="content-header">Review</h2>
           <node-review :node="node"></node-review>
         </section>

From dcfacc1b7f6302935435e0842de700ae95de241b Mon Sep 17 00:00:00 2001
From: Legendword <zwh@legendword.com>
Date: Thu, 10 Nov 2022 13:25:01 -0800
Subject: [PATCH 4/6] Revert "Remove unused data-name attributes in Sidebar"

This reverts commit 263b761c3282ac6deca54be7d46053f2a7318cdc.
---
 templates/vue/src/components/Sidebar/index.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/vue/src/components/Sidebar/index.vue b/templates/vue/src/components/Sidebar/index.vue
index 91c4f9f96..49da71083 100644
--- a/templates/vue/src/components/Sidebar/index.vue
+++ b/templates/vue/src/components/Sidebar/index.vue
@@ -49,7 +49,7 @@
       tabindex="0"
       :class="['sidebar', { closed: closed }]"
     >
-      <header ref="info" class="sidebar-header">
+      <header ref="info" class="sidebar-header" data-name="info">
         <h1 class="content-title">{{ node.title }}</h1>
         <div class="button-container">
           <b-button
@@ -71,14 +71,14 @@
           <h2 class="content-header">About</h2>
           <div class="content-body" v-html="node.description"></div>
         </section>
-        <section ref="copyright">
+        <section ref="copyright" data-name="copyright">
           <node-license :node="node"></node-license>
           <section v-if="node.references">
             <h2 class="content-header">References</h2>
             <div class="content-body" v-html="node.references"></div>
           </section>
         </section>
-        <section v-if="isReviewParticipant" ref="review">
+        <section v-if="isReviewParticipant" ref="review" data-name="review">
           <h2 class="content-header">Review</h2>
           <node-review :node="node"></node-review>
         </section>

From 9c9dbd5e7bdebc6298be1141b9904924433f182d Mon Sep 17 00:00:00 2001
From: Legendword <zwh@legendword.com>
Date: Sat, 26 Nov 2022 19:18:08 -0800
Subject: [PATCH 5/6] Fix tests by using vue transition for node information
 sheet

---
 .../vue/src/components/Lightbox/index.vue     | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/templates/vue/src/components/Lightbox/index.vue b/templates/vue/src/components/Lightbox/index.vue
index 46a5a5e6f..1f9c09931 100644
--- a/templates/vue/src/components/Lightbox/index.vue
+++ b/templates/vue/src/components/Lightbox/index.vue
@@ -62,23 +62,20 @@
         />
       </div>
       <div data-qa="lightbox-content" class="content" :style="contentStyles">
-        <div
-          class="information-sheet"
-          :class="{
-            show: showInformation,
-          }"
-        >
-          <h1 class="information-header">{{ node.title }}</h1>
-          <section v-if="node.description">
-            <h2 class="content-header">About</h2>
-            <div class="content-body" v-html="node.description"></div>
-          </section>
-          <node-license :node="node"></node-license>
-          <section v-if="node.references">
-            <h2 class="content-header">References</h2>
-            <div class="content-body" v-html="node.references"></div>
-          </section>
-        </div>
+        <transition name="slide-down">
+          <div v-show="showInformation" class="information-sheet">
+            <h1 class="information-header">{{ node.title }}</h1>
+            <section v-if="node.description">
+              <h2 class="content-header">About</h2>
+              <div class="content-body" v-html="node.description"></div>
+            </section>
+            <node-license :node="node"></node-license>
+            <section v-if="node.references">
+              <h2 class="content-header">References</h2>
+              <div class="content-body" v-html="node.references"></div>
+            </section>
+          </div>
+        </transition>
         <multi-content-media
           v-if="node.mediaType === 'multi-content'"
           id="multicontent-container"
@@ -431,11 +428,14 @@ body.tapestry-lightbox-open {
     color: #becddc;
     text-align: left;
     box-shadow: 0 0 20px #000;
-    transition: margin-top 0.3s ease-in-out;
-    margin-top: -100%;
 
-    &.show {
-      margin-top: 0;
+    &.slide-down-enter-active,
+    &.slide-down-leave-active {
+      transition: margin-top 0.3s ease-in-out;
+    }
+    &.slide-down-enter,
+    &.slide-down-leave-to {
+      margin-top: -100%;
     }
 
     .content-header {

From 70c400bb9f38ddf41665a8348f219fa8a5a13b15 Mon Sep 17 00:00:00 2001
From: Legendword <zwh@legendword.com>
Date: Sat, 26 Nov 2022 19:26:40 -0800
Subject: [PATCH 6/6] Fix tests by using v-if to display information sheet

---
 templates/vue/src/components/Lightbox/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/vue/src/components/Lightbox/index.vue b/templates/vue/src/components/Lightbox/index.vue
index 1f9c09931..c6c076649 100644
--- a/templates/vue/src/components/Lightbox/index.vue
+++ b/templates/vue/src/components/Lightbox/index.vue
@@ -63,7 +63,7 @@
       </div>
       <div data-qa="lightbox-content" class="content" :style="contentStyles">
         <transition name="slide-down">
-          <div v-show="showInformation" class="information-sheet">
+          <div v-if="showInformation" class="information-sheet">
             <h1 class="information-header">{{ node.title }}</h1>
             <section v-if="node.description">
               <h2 class="content-header">About</h2>