Browse Source

re-worked popup UI to access dashboard from title bar (like uBlock)

pull/2/head
gorhill 10 years ago
parent
commit
fd4a7579f1
  1. 62
      src/css/popup.css
  2. 1
      src/js/messaging.js
  3. 8
      src/js/popup.js
  4. 11
      src/popup.html

62
src/css/popup.css

@ -13,15 +13,18 @@ body {
*:focus {
outline: none;
}
a {
color: inherit;
text-decoration: none;
}
.paneHead {
background-color: white;
left:0;
padding: 0;
position: fixed;
top: 0;
height: 5.5em;
left:0;
right: 0;
background-color: white;
top: 0;
z-index: 10;
}
.paneContent {
@ -29,16 +32,35 @@ body {
}
.toolbar {
.paneHead > a:first-child {
background-color: #444;
border: 0;
border-bottom: 1px solid white;
color: #bbb;
cursor: pointer;
display: block;
font-family: sans-serif;
line-height: 12px;
margin: 0;
padding: 02px 0;
text-align: center;
}
#version {
font-size: 10px;
font-weight: normal;
}
.toolbar {
border: 0;
padding: 0;
padding-bottom: 0.25em;
display: inline-block;
white-space: nowrap;
margin: 0;
padding: 0;
position: relative;
vertical-align: top;
white-space: nowrap;
}
.toolbar.alignRight {
position: absolute;
top: 0;
}
body[dir="ltr"] .toolbar.alignLeft,
@ -108,22 +130,6 @@ body[dir="rtl"] #mtxSwitches > li:before {
content: '\f205';
}
#extras + .dropdown-menu .dropdown-menu-entry:before {
font: 110% FontAwesome;
}
body[dir="ltr"] #extras + .dropdown-menu .dropdown-menu-entry:before {
padding-right: 0.5em;
}
body[dir="rtl"] #extras + .dropdown-menu .dropdown-menu-entry:before {
padding-left: 0.5em;
}
#buttonRevertAll:before {
content: '\f122';
}
[data-i18n="matrixDashboardMenuEntry"]:before {
content: '\f085';
}
.dropdown-menu {
margin: 0;
border: 0;
@ -306,17 +312,13 @@ body.tScopeSite #scopeCell {
padding: 6px 1px 3px 1px;
display: inline-block;
box-sizing: content-box;
width: 2.4em;
width: 2.6em;
white-space: nowrap;
text-align: center;
line-height: 110%;
position: relative;
}
.paneHead #matHead {
position: absolute;
bottom: 3px;
}
.paneHead .matCell:nth-child(2) {
letter-spacing: -0.3px;
}

1
src/js/messaging.js

@ -141,6 +141,7 @@ RowSnapshot.counts = (function() {
var matrixSnapshot = function(pageStore, details) {
var µmuser = µm.userSettings;
var r = {
appVersion: vAPI.app.version,
blockedCount: pageStore.requestStats.blocked.all,
diff: [],
domain: pageStore.pageDomain,

8
src/js/popup.js

@ -951,6 +951,13 @@ var makeMenu = function() {
renderMatrixHeaderRow();
// Manually adjust the position of the main matrix according to the height
// of the toolbar/matrix header.
document.querySelector('.paneContent').style.setProperty(
'padding-top',
document.querySelector('.paneHead').clientHeight + 'px'
);
startMatrixUpdate();
makeMatrixGroup0(groupStats[0]);
makeMatrixGroup1(groupStats[1]);
@ -970,6 +977,7 @@ var makeMenu = function() {
function initMenuEnvironment() {
uDom('body').css('font-size', getUserSetting('displayTextSize'));
uDom('body').toggleClass('colorblind', getUserSetting('colorBlindFriendly') === true);
uDom('#version').text(matrixSnapshot.appVersion || '');
var prettyNames = matrixHeaderPrettyNames;
var keys = Object.keys(prettyNames);

11
src/popup.html

@ -18,6 +18,7 @@
</div>
<div class="paneHead">
<a class="extensionURL" href="#" data-extension-url="dashboard.html" title="popupTipDashboard">uMatrix <span id="version"> </span></a>
<div id="toolbarLeft" class="toolbar alignLeft">
<button id="scopeCell" class="dropdown-menu-button" tabindex="-1"></button>
<div class="dropdown-menu">
@ -46,17 +47,9 @@
<button id="buttonReload" type="button" class="fa tip-anchor-left" data-i18n-tip="matrixReloadButton">&#xf021;</button>
</div>
<!-- Yandex: float works correctly only if it is the first child -->
<div class="toolbar alignRight">
<button id="buttonRevertAll" class="fa tip-anchor-right" data-i18n-tip="matrixRevertAllEntry">&#xf122;</button>
<button type="button" class="fa extensionURL tip-anchor-right" data-extension-url="logger-ui.html" data-i18n-tip="matrixLoggerMenuEntry">&#xf022;</button>
<button type="button" id="extras" class="dropdown-menu-button fa tip-anchor-right">&#xf067;</button>
<div class="dropdown-menu">
<ul>
<li id="buttonRevertAll" class="dropdown-menu-entry" data-i18n="matrixRevertAllEntry">
<li class="dropdown-menu-entry extensionURL" data-extension-url="dashboard.html" data-i18n="matrixDashboardMenuEntry">
</ul>
</div>
<div class="dropdown-menu-capture"></div>
</div>
<div id="matHead" class="matrix collapsible">

Loading…
Cancel
Save