* toggle tabs bottom #203

* i18n key still missing
eeditiones · Sep 29, 2023 · 4e3ea7d · 4e3ea7d
1 parent 57cb163
commit 4e3ea7d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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"/>