Popup action bar options (#1140)
* Add options for action bar visibility and location * Add settings * Update styles * Expose properties * Update styles * Update tests
This commit is contained in:
toasted-nutbread
GitHub
parent
8454431cdb
commit
443d6d1956
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -294,7 +294,9 @@ function createProfileOptionsUpdatedTestData1() {
|
|||
usePopupShadowDom: true,
|
||||
usePopupWindow: false,
|
||||
maximumClipboardSearchLength: 1000,
|
||||
popupCurrentIndicatorMode: 'bar-left'
|
||||
popupCurrentIndicatorMode: 'bar-left',
|
||||
popupActionBarVisibility: 'auto',
|
||||
popupActionBarLocation: 'right'
|
||||
},
|
||||
audio: {
|
||||
enabled: true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user