open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add left gutter to popup for checkboxes

Browse Source
This commit is contained in:
Jason 2015-04-08 14:07:30 -05:00
parent f8c0c5bf80
commit 6c47b78763
2 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
popup.html
View File

@ -22,6 +22,19 @@
color: black; color: black;
} }
.left-gutter {
display: table-cell;
width: 16px;
vertical-align: top;
}
.left-gutter input {
margin-top: 0;
margin-left: 0;
}
.main-controls {
display: table-cell;
}
.entry { .entry {
padding: 0.5em 0; padding: 0.5em 0;
border-bottom: 1px solid black; border-bottom: 1px solid black;
@ -49,7 +62,7 @@
margin-top: 0.5em; margin-top: 0.5em;
} }
.actions > div, #unavailable { .actions > div:not(:last-child), .actions > .main-controls > div:not(:last-child), #unavailable:not(:last-child) {
margin-bottom: 0.75em; margin-bottom: 0.75em;
} }
.actions input, .actions label { .actions input, .actions label {
@ -59,12 +72,10 @@
#unavailable { #unavailable {
border: none; border: none;
} }
#unavailable:empty {
display: none;
}
body.blocked #installed, body.blocked #installed,
body.blocked #find-styles, body.blocked #find-styles,
body.blocked #write-style { body.blocked #write-style,
body:not(.blocked) #unavailable {
display: none; display: none;
} }
@ -121,18 +132,25 @@
</head> </head>
<body id="stylish-popup"> <body id="stylish-popup">
<div id="unavailable"></div> <div id="unavailable"><div class="left-gutter"></div><div class="main-controls"><span id="unavailable-message"></span></div></div>
<div id="installed"></div> <div id="installed"></div>
<div class="actions"> <div class="actions">
<div id="disable-all-wrapper"> <div id="disable-all-wrapper">
<input id="disableAll" type="checkbox"> <div class="left-gutter">
<label id="disableAll-label" for="disableAll"></label> <input id="disableAll" type="checkbox">
</div>
<div class="main-controls">
<label id="disableAll-label" for="disableAll"></label>
</div>
</div>
<div class="left-gutter"></div>
<div class="main-controls">
<div id="find-styles"><a id="find-styles-link" href="#"></a></div>
<div id="manage-styles"><a id="open-manage-link" href="manage.html"></a></div>
<div id="write-style"><span id="write-style-for"></span></div>
</div> </div>
<div id="find-styles"><a id="find-styles-link" href="#"></a></div>
<div id="manage-styles"><a id="open-manage-link" href="manage.html"></a></div>
<div id="write-style"><span id="write-style-for"></span></div>
</div> </div>
<script src="popup.js"></script> <script src="popup.js"></script>

4
popup.js
View File

@ -1,5 +1,5 @@
var styleTemplate = document.createElement("div"); var styleTemplate = document.createElement("div");
styleTemplate.innerHTML = "<input class='checker' type='checkbox'><div class='style-name'></div><div class='actions'><a href='#' class='enable'>" + t('enableStyleLabel') + "</a> <a href='#' class='disable'>" + t('disableStyleLabel') + "</a> <a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div>"; styleTemplate.innerHTML = "<div class='left-gutter'><input class='checker' type='checkbox'></div><div class='main-controls'><div class='style-name'></div><div class='actions'><a href='#' class='enable'>" + t('enableStyleLabel') + "</a> <a href='#' class='disable'>" + t('disableStyleLabel') + "</a> <a class='style-edit-link' href='edit.html?id='>" + t('editStyleLabel') + "</a> <a href='#' class='delete'>" + t('deleteStyleLabel') + "</a></div></div>";
var writeStyleTemplate = document.createElement("a"); var writeStyleTemplate = document.createElement("a");
writeStyleTemplate.className = "write-style-link"; writeStyleTemplate.className = "write-style-link";
@ -26,7 +26,7 @@ function updatePopUp(url) {
var urlWillWork = /^(file|http|https|chrome\-extension):/.exec(url); var urlWillWork = /^(file|http|https|chrome\-extension):/.exec(url);
if (!urlWillWork) { if (!urlWillWork) {
document.body.classList.add("blocked"); document.body.classList.add("blocked");
tE("unavailable", "stylishUnavailableForURL"); tE("unavailable-message", "stylishUnavailableForURL");
return; return;
} }