aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-19 20:07:55 -0500
committerGitHub <noreply@github.com>2020-12-19 20:07:55 -0500
commit443d6d1956691861a5e0203e33726b8c2aa93eef (patch)
treec302124766dde3f87454682508331b4647c71e8f /ext
parent8454431cdbc026e56c4879c5fc0133647a6f75ca (diff)
Popup action bar options (#1140)
* Add options for action bar visibility and location * Add settings * Update styles * Expose properties * Update styles * Update tests
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/data/options-schema.json14
-rw-r--r--ext/bg/js/options.js4
-rw-r--r--ext/bg/settings2.html28
-rw-r--r--ext/fg/float.html4
-rw-r--r--ext/mixed/css/display.css46
-rw-r--r--ext/mixed/js/display.js2
6 files changed, 95 insertions, 3 deletions
diff --git a/ext/bg/data/options-schema.json b/ext/bg/data/options-schema.json
index b6b11b66..7fed4909 100644
--- a/ext/bg/data/options-schema.json
+++ b/ext/bg/data/options-schema.json
@@ -110,7 +110,9 @@
"usePopupShadowDom",
"usePopupWindow",
"maximumClipboardSearchLength",
- "popupCurrentIndicatorMode"
+ "popupCurrentIndicatorMode",
+ "popupActionBarVisibility",
+ "popupActionBarLocation"
],
"properties": {
"enable": {
@@ -271,6 +273,16 @@
"type": "string",
"enum": ["none", "asterisk", "triangle", "bar-left", "bar-right", "dot-left", "dot-right"],
"default": "bar-left"
+ },
+ "popupActionBarVisibility": {
+ "type": "string",
+ "enum": ["auto", "always"],
+ "default": "auto"
+ },
+ "popupActionBarLocation": {
+ "type": "string",
+ "enum": ["left", "right", "top", "bottom"],
+ "default": "right"
}
}
},
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index 5492b97d..e946c461 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -663,9 +663,13 @@ class OptionsUtil {
// Version 7 changes:
// Added general.maximumClipboardSearchLength.
// Added general.popupCurrentIndicatorMode.
+ // Added general.popupActionBarVisibility.
+ // Added general.popupActionBarLocation.
for (const profile of options.profiles) {
profile.options.general.maximumClipboardSearchLength = 1000;
profile.options.general.popupCurrentIndicatorMode = 'bar-left';
+ profile.options.general.popupActionBarVisibility = 'auto';
+ profile.options.general.popupActionBarLocation = 'right';
}
return options;
}
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index bbd75c7f..a537daeb 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -437,6 +437,34 @@
</div>
</div>
</div></div>
+ <div class="settings-item">
+ <div class="settings-item-inner settings-item-inner-wrappable">
+ <div class="settings-item-left">
+ <div class="settings-item-label">Action bar appearance</div>
+ <div class="settings-item-description">Control when and where the action bar is visible.</div>
+ </div>
+ <div class="settings-item-right">
+ <div class="settings-item-group">
+ <div class="settings-item-group-item">
+ <div class="settings-item-group-item-label">Visibility</div>
+ <select data-setting="general.popupActionBarVisibility" class="short-width short-height">
+ <option value="auto">Auto</option>
+ <option value="always">Always</option>
+ </select>
+ </div>
+ <div class="settings-item-group-item">
+ <div class="settings-item-group-item-label">Location</div>
+ <select data-setting="general.popupActionBarLocation" class="short-width short-height">
+ <option value="left">Left</option>
+ <option value="right">Right</option>
+ <option value="top">Top</option>
+ <option value="bottom">Bottom</option>
+ </select>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="settings-item"><div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label">Glossary layout</div>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index 41e73a7e..4dc0696e 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -56,8 +56,10 @@
</div>
<div class="content-sidebar scrollbar" id="content-sidebar" hidden>
<div class="content-sidebar-inner">
- <div class="content-sidebar-top">
+ <div class="content-sidebar-top-pre">
<button class="sidebar-button danger" id="close-button" title="Close popup"><span class="sidebar-button-icon" data-icon="cross"></span></button>
+ </div>
+ <div class="content-sidebar-top">
<button class="sidebar-button" disabled id="navigate-previous-button" title="Previous definition (Alt + B)"><span class="sidebar-button-icon" data-icon="left-chevron"></span></button>
<button class="sidebar-button" disabled id="navigate-next-button" title="Next definition (Alt + F)"><span class="sidebar-button-icon" data-icon="right-chevron"></span></button>
</div>
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) {