mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-18 08:52:26 +02:00
More fine tuning of new UI as per feedback
Position the backup/restore/reset buttons at the bottom in Settings pane. Related feedback: https://github.com/gorhill/uBlock/commit/5bee33253f45#commitcomment-39221329 Use a fixed with for the fireall pane. Related feedback: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629668065 Fall back to a polyfill compact notation when rednering large numbers in popup panel when the required Intl.NumberFormat API is not fully supported, at the expense of not being i18n- compliant. Related discussion: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629696676
This commit is contained in:
parent
99c46fc774
commit
5c7aa850dc
@ -522,9 +522,9 @@ body:not([data-more~="e"]) [data-more="e"] {
|
|||||||
}
|
}
|
||||||
:root.desktop #firewall {
|
:root.desktop #firewall {
|
||||||
max-height: 600px;
|
max-height: 600px;
|
||||||
min-width: 360px;
|
max-width: 460px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
width: min-content;
|
width: 32em;
|
||||||
}
|
}
|
||||||
:root:not(.mobile) .tool:hover {
|
:root:not(.mobile) .tool:hover {
|
||||||
background-color: var(--default-surface-hover);
|
background-color: var(--default-surface-hover);
|
||||||
|
@ -7,28 +7,27 @@
|
|||||||
body.advancedUser [href="advanced-settings.html"] {
|
body.advancedUser [href="advanced-settings.html"] {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
}
|
}
|
||||||
#localData {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
#localData > div {
|
#localData > div {
|
||||||
flex-grow: 1;
|
margin-bottom: var(--default-gap-small);
|
||||||
margin-bottom: 1em;
|
|
||||||
}
|
}
|
||||||
#localData > div:last-of-type {
|
#localData > div:last-of-type {
|
||||||
|
align-items: flex-start;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
}
|
||||||
#localData > div:last-of-type > button {
|
#localData > div:last-of-type > button {
|
||||||
margin-bottom: 0.5em;
|
margin-bottom: var(--default-gap-small);
|
||||||
|
min-width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* small-screen devices */
|
/* Mobile devices */
|
||||||
|
|
||||||
:root.mobile #localData {
|
:root.mobile #localData {
|
||||||
flex-direction: column;
|
max-width: 100vw;
|
||||||
white-space: unset;
|
}
|
||||||
|
:root.mobile #localData > div:last-of-type {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
:root.mobile #localData > div:last-of-type > button {
|
||||||
|
min-width: unset;
|
||||||
}
|
}
|
||||||
|
@ -152,11 +152,41 @@ const hashFromPopupData = function(reset) {
|
|||||||
const formatNumber = function(count) {
|
const formatNumber = function(count) {
|
||||||
if ( typeof count !== 'number' ) { return ''; }
|
if ( typeof count !== 'number' ) { return ''; }
|
||||||
if ( count < 1e6 ) { return count.toLocaleString(); }
|
if ( count < 1e6 ) { return count.toLocaleString(); }
|
||||||
return count.toLocaleString(undefined, {
|
|
||||||
notation: 'compact',
|
if (
|
||||||
maximumSignificantDigits: 4,
|
intlNumberFormat === undefined &&
|
||||||
});
|
Intl.NumberFormat instanceof Function
|
||||||
};
|
) {
|
||||||
|
const intl = new Intl.NumberFormat(undefined, {
|
||||||
|
notation: 'compact',
|
||||||
|
maximumSignificantDigits: 4
|
||||||
|
});
|
||||||
|
if (
|
||||||
|
intl.resolvedOptions instanceof Function &&
|
||||||
|
intl.resolvedOptions().hasOwnProperty('notation')
|
||||||
|
) {
|
||||||
|
intlNumberFormat = intl;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( intlNumberFormat ) {
|
||||||
|
return intlNumberFormat.format(count);
|
||||||
|
}
|
||||||
|
|
||||||
|
// https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629696676
|
||||||
|
// For platforms which do not support proper number formatting, use
|
||||||
|
// a poor's man compact form, which unfortunately is not i18n-friendly.
|
||||||
|
count /= 1000000;
|
||||||
|
if ( count >= 100 ) {
|
||||||
|
count = Math.floor(count * 10) / 10;
|
||||||
|
} else if ( count > 10 ) {
|
||||||
|
count = Math.floor(count * 100) / 100;
|
||||||
|
} else {
|
||||||
|
count = Math.floor(count * 1000) / 1000;
|
||||||
|
}
|
||||||
|
return (count).toLocaleString(undefined) + '\u2009M';};
|
||||||
|
|
||||||
|
let intlNumberFormat;
|
||||||
|
|
||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
|
@ -41,7 +41,7 @@
|
|||||||
<hr>
|
<hr>
|
||||||
<div id="localData" class="fieldset">
|
<div id="localData" class="fieldset">
|
||||||
<div>
|
<div>
|
||||||
<div id="storageUsed"></div>
|
<div class="li" id="storageUsed"></div>
|
||||||
<div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>
|
<div class="li" id="settingsLastBackupPrompt" style="display:none;"></div>
|
||||||
<div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
|
<div class="li" id="settingsLastRestorePrompt" style="display:none;"></div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user