From 443d6d1956691861a5e0203e33726b8c2aa93eef Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Sat, 19 Dec 2020 20:07:55 -0500
Subject: Popup action bar options (#1140)

* Add options for action bar visibility and location

* Add settings

* Update styles

* Expose properties

* Update styles

* Update tests
---
 ext/mixed/css/display.css | 46 +++++++++++++++++++++++++++++++++++++++++++++-
 ext/mixed/js/display.js   |  2 ++
 2 files changed, 47 insertions(+), 1 deletion(-)

(limited to 'ext/mixed')

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 59e59263..16266f9c 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -298,6 +298,7 @@ a {
     justify-content: flex-start;
 }
 .content-body {
+    height: 0;
     flex: 1 1 auto;
     position: relative;
 }
@@ -352,7 +353,8 @@ a {
     display: none;
 }
 .content-sidebar[hidden][data-has-navigation-previous=true],
-.content-sidebar[hidden][data-has-navigation-next=true] {
+.content-sidebar[hidden][data-has-navigation-next=true],
+:root[data-popup-action-bar-visibility=always] .content-sidebar {
     display: block;
 }
 .content-sidebar-inner {
@@ -361,6 +363,11 @@ a {
     width: var(--sidebar-width);
     height: 100%;
 }
+.content-sidebar-top-pre {
+    flex: 0 0 auto;
+    display: flex;
+    flex-flow: column nowrap;
+}
 .content-sidebar-top {
     flex: 1 1 auto;
     display: flex;
@@ -373,6 +380,43 @@ a {
     display: flex;
     flex-flow: column nowrap;
 }
+:root[data-popup-action-bar-location=top] .content-outer,
+:root[data-popup-action-bar-location=bottom] .content-outer {
+    flex-flow: column nowrap;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar,
+:root[data-popup-action-bar-location=bottom] .content-sidebar {
+    height: auto;
+    width: 100%;
+}
+:root[data-popup-action-bar-location=left] .content-sidebar,
+:root[data-popup-action-bar-location=top] .content-sidebar {
+    order: -1;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-inner,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-inner {
+    flex-flow: row nowrap;
+    width: auto;
+    height: var(--sidebar-button-height);
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-top-pre,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-top-pre {
+    flex-flow: row nowrap;
+    order: 1;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-top,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-top {
+    flex-flow: row nowrap;
+}
+:root[data-popup-action-bar-location=top] .content-sidebar-bottom,
+:root[data-popup-action-bar-location=bottom] .content-sidebar-bottom {
+    flex-flow: row nowrap;
+}
+:root[data-popup-action-bar-location=top] button.sidebar-button,
+:root[data-popup-action-bar-location=bottom] button.sidebar-button {
+    width: var(--sidebar-width) !important;
+    height: 100% !important;
+}
 
 
 /* Sidebar buttons */
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index f600da63..4929cfaa 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -837,6 +837,8 @@ class Display extends EventDispatcher {
         data.debug = `${options.general.debugInfo}`;
         data.popupDisplayMode = `${options.general.popupDisplayMode}`;
         data.popupCurrentIndicatorMode = `${options.general.popupCurrentIndicatorMode}`;
+        data.popupActionBarVisibility = `${options.general.popupActionBarVisibility}`;
+        data.popupActionBarLocation = `${options.general.popupActionBarLocation}`;
     }
 
     _updateTheme(themeName) {
-- 
cgit v1.2.3