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

Autohide lint report in narrow mode; show # of issues

Browse Source
This commit is contained in:
tophf 2016-01-20 21:02:10 +03:00
parent 31a378b243
commit b8bbcd01db
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
edit.html
View File

@ -447,6 +447,18 @@
position: relative; position: relative;
top: 0.2rem; top: 0.2rem;
} }
#lint h2 {
display: block;
cursor: default;
margin-bottom: 0;
}
#lint > div {
max-height: 0;
}
#lint:hover > div {
margin-top: 1em;
max-height: 30vh;
}
#sections { #sections {
padding-left: 0; padding-left: 0;
} }
@ -594,7 +606,7 @@
<select data-option="theme" id="editor.theme"></select> <select data-option="theme" id="editor.theme"></select>
</div> </div>
</section> </section>
<section id="lint"><h2 i18n-text="issues"><img id="lint-help" src="help.png" i18n-alt="helpAlt"></h2><div></div></section> <section id="lint"><h2 i18n-text="issues">: <span id="issue-count"></span><img id="lint-help" src="help.png" i18n-alt="helpAlt"></h2><div></div></section>
</div> </div>
<section id="sections"> <section id="sections">
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><img id="sections-help" src="help.png" i18n-alt="helpAlt"></h2> <h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><img id="sections-help" src="help.png" i18n-alt="helpAlt"></h2>

9
edit.js
View File

@ -914,12 +914,14 @@ function renderLintReport(someBlockChanged) {
var content = container.children[1]; var content = container.children[1];
var label = t("sectionCode"); var label = t("sectionCode");
var newContent = content.cloneNode(false); var newContent = content.cloneNode(false);
var issueCount = 0;
editors.forEach(function(cm, index) { editors.forEach(function(cm, index) {
if (cm.state.lint.html) { if (cm.state.lint.html) {
var newBlock = newContent.appendChild(document.createElement("table")); var newBlock = newContent.appendChild(document.createElement("table"));
var html = "<caption>" + label + " " + (index+1) + "</caption>" + cm.state.lint.html; var html = "<caption>" + label + " " + (index+1) + "</caption>" + cm.state.lint.html;
newBlock.innerHTML = html; newBlock.innerHTML = html;
newBlock.cm = cm; newBlock.cm = cm;
issueCount += newBlock.rows.length;
var block = content.children[newContent.children.length - 1]; var block = content.children[newContent.children.length - 1];
var blockChanged = !block || cm != block.cm || html != block.innerHTML; var blockChanged = !block || cm != block.cm || html != block.innerHTML;
@ -928,6 +930,7 @@ function renderLintReport(someBlockChanged) {
} }
}); });
if (someBlockChanged || newContent.children.length != content.children.length) { if (someBlockChanged || newContent.children.length != content.children.length) {
document.getElementById('issue-count').textContent = issueCount;
container.replaceChild(newContent, content); container.replaceChild(newContent, content);
container.style.display = newContent.children.length ? "block" : "none"; container.style.display = newContent.children.length ? "block" : "none";
resizeLintReport(null, newContent); resizeLintReport(null, newContent);
@ -937,10 +940,8 @@ function renderLintReport(someBlockChanged) {
function resizeLintReport(event, content) { function resizeLintReport(event, content) {
content = content || document.getElementById("lint").children[1]; content = content || document.getElementById("lint").children[1];
if (content.children.length) { if (content.children.length) {
var header = document.getElementById("header"); var bounds = content.getBoundingClientRect();
var headerHeight = parseFloat(getComputedStyle(header).height); var newMaxHeight = bounds.bottom <= innerHeight ? '' : (innerHeight - bounds.top) + "px";
var contentTop = content.getBoundingClientRect().top - header.getBoundingClientRect().top;
var newMaxHeight = Math.max(100, headerHeight - contentTop) + "px";
if (newMaxHeight != content.style.maxHeight) { if (newMaxHeight != content.style.maxHeight) {
content.style.maxHeight = newMaxHeight; content.style.maxHeight = newMaxHeight;
} }