From 4e3ea7d6f2a27406adfe83dce23ee422e25715c9 Mon Sep 17 00:00:00 2001
From: Joern Turner <joern@existsolutions.com>
Date: Fri, 29 Sep 2023 16:13:44 +0200
Subject: [PATCH] * toggle tabs bottom #203 * i18n key still missing

---
 resources/scripts/annotations/annotations.js | 16 ++++++++++++++-
 templates/pages/annotate.css                 | 21 ++++++++++++++++++++
 templates/pages/annotate.html                |  2 +-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/resources/scripts/annotations/annotations.js b/resources/scripts/annotations/annotations.js
index 6975e957..7def14ec 100644
--- a/resources/scripts/annotations/annotations.js
+++ b/resources/scripts/annotations/annotations.js
@@ -451,7 +451,7 @@ window.addEventListener("WebComponentsReady", () => {
 	}
 
 	function rangeEQ(range, newRange) {
-		return range.text === newRange.text && range.start === newRange.start && 
+		return range.text === newRange.text && range.start === newRange.start &&
 			range.type === newRange.type &&
 			(!range.properties || !newRange.properties ||
 			range.properties.ref === newRange.properties.ref);
@@ -689,6 +689,20 @@ window.addEventListener("WebComponentsReady", () => {
 			actionHandler(button);
 		});
 	});
+
+	/**
+	 * handle button to toggle the tabcontainer to display at the bottom of the window versus on the right side
+	 */
+	document.querySelector('#toggle-markup').addEventListener('click', (ev) => {
+		const markupPanel = document.querySelector('#markupPanel');
+		if(markupPanel.classList.contains('bottom')){
+			markupPanel.classList.remove('bottom');
+		}else{
+			markupPanel.classList.add('bottom');
+		}
+	});
+
+
 	window.pbEvents.subscribe("pb-authority-select", "transcription", (ev) =>
 		authoritySelected(ev.detail)
 	);
diff --git a/templates/pages/annotate.css b/templates/pages/annotate.css
index 97563e80..a1abc36a 100644
--- a/templates/pages/annotate.css
+++ b/templates/pages/annotate.css
@@ -153,6 +153,26 @@ header paper-icon-button{
     display: inline-block;
 }
 
+#markupPanel.bottom{
+    position: fixed;
+    left: 0;
+    bottom:0;
+    height: 25vh;
+    z-index: 10;
+    background: white;
+    margin-bottom: 0;
+    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
+    0 1px 10px 0 rgba(0, 0, 0, 0.12),
+    0 2px 4px -1px rgba(0, 0, 0, 0.4);
+}
+#markupPanel.bottom paper-tabs{
+    height: 100%;
+}
+fx-fore #markupPanel section,
+fx-fore #markupPanel pb-tabs{
+    height: 100%;
+}
+
 
 .text {
     height: 100%;
@@ -186,6 +206,7 @@ pb-tabs pre {
     margin: 0;
 }
 
+
 .preview header {
     display: flex;
     justify-content: space-between;
diff --git a/templates/pages/annotate.html b/templates/pages/annotate.html
index 800d6a3b..e19c6e30 100644
--- a/templates/pages/annotate.html
+++ b/templates/pages/annotate.html
@@ -61,7 +61,7 @@
             <paper-icon-button id="document-download" icon="icons:cloud-download" data-i18n="[title]annotations.download" data-shortcut="⌘+⇧+d,ctrl+⇧+d"></paper-icon-button>
             <paper-icon-button id="undo-history" icon="icons:undo" data-i18n="[title]annotations.undo"></paper-icon-button>
             <paper-icon-button id="reload-preview" icon="icons:refresh" data-i18n="[title]annotations.preview"></paper-icon-button>
-            <paper-icon-button id="toggle-markup" icon="icons:visibility" data-i18n="[title]annotations.preview"></paper-icon-button>
+            <paper-icon-button id="toggle-markup" icon="icons:visibility" data-i18n="[title]annotations.toggle"></paper-icon-button>
         </span>
     </header>
     <pb-progress subscribe="transcription" indeterminate="indeterminate"/>