Autohide lint report in narrow mode; show # of issues

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

View File

@ -447,6 +447,18 @@
position: relative;
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 {
padding-left: 0;
}
@ -594,7 +606,7 @@
<select data-option="theme" id="editor.theme"></select>
</div>
</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>
<section id="sections">
<h2><span id="sections-heading" i18n-text="styleSectionsTitle"></span><img id="sections-help" src="help.png" i18n-alt="helpAlt"></h2>

View File

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