frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Make H3 sections in node help collapsible

Browse Source
This commit is contained in:
Nick O'Leary 2017-04-07 13:30:12 +01:00
parent ea929b00e3
commit 2453719a87
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
editor/js/ui/tab-info.js
View File

@ -204,7 +204,20 @@ RED.sidebar.info = (function() {
infoText = infoText + marked(textInfo); infoText = infoText + marked(textInfo);
} }
if (infoText) { if (infoText) {
addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(infoSection.content); var info = addTargetToExternalLinks($('<div class="node-help"><span class="bidiAware" dir=\"'+RED.text.bidi.resolveBaseTextDir(infoText)+'">'+infoText+'</span></div>')).appendTo(infoSection.content);
info.find(".bidiAware").contents().filter(function() { return this.nodeType === 3 && this.textContent.trim() !== "" }).wrap( "<span></span>" );
var foldingHeader = "H3";
info.find(foldingHeader).wrapInner('<a class="node-info-header expanded" href="#"></a>')
.find("a").prepend('<i class="fa fa-angle-right">').click(function(e) {
e.preventDefault();
var isExpanded = $(this).hasClass('expanded');
var el = $(this).parent().next();
while(el.length === 1 && el[0].nodeName !== foldingHeader) {
el.toggle(!isExpanded);
el = el.next();
}
$(this).toggleClass('expanded',!isExpanded);
})
} }

17
editor/sass/tab-info.scss
View File

@ -179,6 +179,23 @@ div.node-info {
} }
} }
} }
.node-info-header {
i {
width: 10px;
text-align: center;
transition: transform 0.2s ease-in-out;
margin-right: 4px;
}
color: #333;
&:hover, &:focus {
text-decoration: none;
}
&.expanded {
i {
transform: rotate(90deg);
}
}
}
} }
.sidebar-node-info-stack { .sidebar-node-info-stack {