Popup action bar options (#1140)

* Add options for action bar visibility and location

* Add settings

* Update styles

* Expose properties

* Update styles

* Update tests

2 files changed, 47 insertions, 1 deletions

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) {