Skip to content

Commit

Permalink
WIP: sidebar tabs option 1
Browse files Browse the repository at this point in the history
  • Loading branch information
@knolleary
knolleary committed May 22, 2018
1 parent 3610541 commit bbcb8cf
Show file tree
Hide file tree
Showing 7 changed files with 174 additions and 41 deletions.
144 changes: 110 additions & 34 deletions editor/js/ui/common/tabs.js
View file
Expand Up @@ -50,6 +50,45 @@ RED.tabs = (function() {
scrollRight = $('<div class="red-ui-tab-button red-ui-tab-scroll red-ui-tab-scroll-right"><a href="#" style="display:none;"><i class="fa fa-caret-right"></i></a></div>').appendTo(wrapper).find("a");
scrollRight.on('mousedown',function(evt) { scrollEventHandler(evt,'+=150') }).on('click',function(evt){ evt.preventDefault();});
}

if (options.collapsible) {
// var dropDown = $('<div>',{class:"red-ui-tabs-select"}).appendTo(wrapper);
// ul.hide();
wrapper.addClass("red-ui-tabs-collapsible");

var collapsedButtonsRow = $('<div class="red-ui-tab-fixed-buttons"></div>').appendTo(wrapper);

var selectButton = $('<a href="#"><i class="fa fa-caret-down"></i></a>').appendTo(collapsedButtonsRow);
selectButton.click(function(evt) {
evt.preventDefault();
var options = [];
ul.children().each(function(i,el) {
var id = $(el).data('tabId');
options.push({
id:"red-ui-tabs-menu-option-"+id,
label: tabs[id].name,
onselect: function() {
activateTab(id);
}
});
})
var tabMenu = RED.menu.init({id:"debug-message-option-menu",options: options});
tabMenu.css({
position: "absolute"
})
tabMenu.on('mouseleave', function(){ $(this).hide() });
tabMenu.on('mouseup', function() { $(this).hide() });
tabMenu.appendTo("body");
var elementPos = selectButton.offset();
tabMenu.css({
top: (elementPos.top+selectButton.height() - 20)+"px",
left: (elementPos.left - tabMenu.width() + 20)+"px"
})
tabMenu.show();
})

}

function scrollEventHandler(evt,dir) {
evt.preventDefault();
if ($(this).hasClass('disabled')) {
Expand Down Expand Up @@ -155,41 +194,60 @@ RED.tabs = (function() {
var tabs = ul.find("li.red-ui-tab");
var width = wrapper.width();
var tabCount = tabs.size();
var tabWidth = (width-12-(tabCount*6))/tabCount;
currentTabWidth = (100*tabWidth/width)+"%";
currentActiveTabWidth = currentTabWidth+"%";
if (options.scrollable) {
tabWidth = Math.max(tabWidth,140);
currentTabWidth = tabWidth+"px";
currentActiveTabWidth = 0;
var listWidth = Math.max(wrapper.width(),12+(tabWidth+6)*tabCount);
ul.width(listWidth);
updateScroll();
} else if (options.hasOwnProperty("minimumActiveTabWidth")) {
if (tabWidth < options.minimumActiveTabWidth) {
tabCount -= 1;
tabWidth = (width-12-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
currentTabWidth = (100*tabWidth/width)+"%";
currentActiveTabWidth = options.minimumActiveTabWidth+"px";
} else {
currentActiveTabWidth = 0;
var tabWidth;

if (options.collapsible) {
width = width - collapsedButtonsRow.width()-10;
var fixedTabs = ul.find("li.red-ui-tab-fixed");
tabCount = fixedTabs.size();
var activeTab = ul.find("li.active");
if (activeTab.hasClass('red-ui-tab-fixed')) {
tabCount--;
}
}
tabs.css({width:currentTabWidth});
if (tabWidth < 50) {
ul.find(".red-ui-tab-close").hide();
ul.find(".red-ui-tab-icon").hide();
ul.find(".red-ui-tab-label").css({paddingLeft:Math.min(12,Math.max(0,tabWidth-38))+"px"})
tabs.css({width:''});
activeTab.width(width - (tabCount * 40));

} else {
ul.find(".red-ui-tab-close").show();
ul.find(".red-ui-tab-icon").show();
ul.find(".red-ui-tab-label").css({paddingLeft:""})
}
if (currentActiveTabWidth !== 0) {
ul.find("li.red-ui-tab.active").css({"width":options.minimumActiveTabWidth});
ul.find("li.red-ui-tab.active .red-ui-tab-close").show();
ul.find("li.red-ui-tab.active .red-ui-tab-icon").show();
ul.find("li.red-ui-tab.active .red-ui-tab-label").css({paddingLeft:""})
var tabWidth = (width-12-(tabCount*6))/tabCount;
currentTabWidth = (100*tabWidth/width)+"%";
currentActiveTabWidth = currentTabWidth+"%";
if (options.scrollable) {
tabWidth = Math.max(tabWidth,140);
currentTabWidth = tabWidth+"px";
currentActiveTabWidth = 0;
var listWidth = Math.max(wrapper.width(),12+(tabWidth+6)*tabCount);
ul.width(listWidth);
updateScroll();
} else if (options.hasOwnProperty("minimumActiveTabWidth")) {
if (tabWidth < options.minimumActiveTabWidth) {
tabCount -= 1;
tabWidth = (width-12-options.minimumActiveTabWidth-(tabCount*6))/tabCount;
currentTabWidth = (100*tabWidth/width)+"%";
currentActiveTabWidth = options.minimumActiveTabWidth+"px";
} else {
currentActiveTabWidth = 0;
}
}
if (options.collapsible) {
console.log(currentTabWidth);
}

tabs.css({width:currentTabWidth});
if (tabWidth < 50) {
ul.find(".red-ui-tab-close").hide();
ul.find(".red-ui-tab-icon").hide();
ul.find(".red-ui-tab-label").css({paddingLeft:Math.min(12,Math.max(0,tabWidth-38))+"px"})
} else {
ul.find(".red-ui-tab-close").show();
ul.find(".red-ui-tab-icon").show();
ul.find(".red-ui-tab-label").css({paddingLeft:""})
}
if (currentActiveTabWidth !== 0) {
ul.find("li.red-ui-tab.active").css({"width":options.minimumActiveTabWidth});
ul.find("li.red-ui-tab.active .red-ui-tab-close").show();
ul.find("li.red-ui-tab.active .red-ui-tab-icon").show();
ul.find("li.red-ui-tab.active .red-ui-tab-label").css({paddingLeft:""})
}
}

}
Expand Down Expand Up @@ -223,13 +281,31 @@ RED.tabs = (function() {
var li = $("<li/>",{class:"red-ui-tab"}).appendTo(ul);
li.attr('id',"red-ui-tab-"+(tab.id.replace(".","-")));
li.data("tabId",tab.id);

if (options.maximumTabWidth) {
li.css("maxWidth",options.maximumTabWidth+"px");
}
var link = $("<a/>",{href:"#"+tab.id, class:"red-ui-tab-label"}).appendTo(li);
if (tab.icon) {
$('<img src="'+tab.icon+'" class="red-ui-tab-icon"/>').appendTo(link);
} else if (tab.iconClass) {
$('<i>',{class:"red-ui-tab-icon "+tab.iconClass}).appendTo(link);
}
var span = $('<span/>',{class:"bidiAware"}).text(tab.label).appendTo(link);
span.attr('dir', RED.text.bidi.resolveBaseTextDir(tab.label));

if (tab.fixed) {
li.addClass("red-ui-tab-fixed");
// var fixedLink = $('<a href="#'+tab.id+'"></a>').insertBefore(collapsedButtonsRow.find("a:last"));
// if (tab.iconClass) {
// $('<i>',{class:tab.iconClass}).appendTo(fixedLink);
// } else {
// $('<i>',{class:"fa fa-lemon-o"}).appendTo(fixedLink);
// }
// fixedLink.click(function(evt) {
// evt.preventDefault();
// activateTab(tab.id);
// });
}
link.on("click",onTabClick);
link.on("dblclick",onTabDblClick);
if (tab.closeable) {
Expand Down
2 changes: 2 additions & 0 deletions editor/js/ui/projects/tab-versionControl.js
View file
Expand Up @@ -1003,6 +1003,8 @@ RED.sidebar.versionControl = (function() {
name: "Project History",
content: sidebarContent,
enableOnEdit: false,
fixed: true,
iconClass: "fa fa-code-fork",
onchange: function() {
setTimeout(function() {
sections.resize();
Expand Down
5 changes: 4 additions & 1 deletion editor/js/ui/sidebar.js
View file
Expand Up @@ -35,7 +35,8 @@ RED.sidebar = (function() {
tab.onremove.call(tab);
}
},
minimumActiveTabWidth: 70
// minimumActiveTabWidth: 70,
collapsible: true
// scrollable: true
});

Expand Down Expand Up @@ -82,6 +83,8 @@ RED.sidebar = (function() {
group: "sidebar-tabs"
});

options.iconClass = options.iconClass || "fa fa-square-o"

knownTabs[options.id] = options;

if (options.visible !== false) {
Expand Down
3 changes: 1 addition & 2 deletions editor/js/ui/tab-config.js
View file
Expand Up @@ -221,8 +221,7 @@ RED.sidebar.config = (function() {
name: RED._("sidebar.config.name"),
content: content,
toolbar: toolbar,
closeable: true,
visible: false,
iconClass: "fa fa-cog",
onchange: function() { refreshConfigNodeList(); }
});
RED.actions.add("core:show-config-tab",function() {RED.sidebar.show('config')});
Expand Down
2 changes: 2 additions & 0 deletions editor/js/ui/tab-info.js
View file
Expand Up @@ -83,7 +83,9 @@ RED.sidebar.info = (function() {
id: "info",
label: RED._("sidebar.info.label"),
name: RED._("sidebar.info.name"),
iconClass: "fa fa-info",
content: content,
fixed: true,
enableOnEdit: true
});
if (tips.enabled()) {
Expand Down
55 changes: 52 additions & 3 deletions editor/sass/tabs.scss
View file
Expand Up @@ -93,7 +93,7 @@
color: $workspace-button-color-hover;
}
}
.red-ui-tab-icon {
img.red-ui-tab-icon {
opacity: 0.2;
}
}
Expand All @@ -113,6 +113,23 @@
&.red-ui-tabs-add.red-ui-tabs-scrollable {
padding-right: 59px;
}
&.red-ui-tabs-collapsible {
li:not(.active) {
&:not(.red-ui-tab-fixed) {
display: none;
}
&.red-ui-tab-fixed {
a {
padding-left: 0;
text-align: center;
}
span {
display: none;
}
width: 32px;
}
}
}

&.red-ui-tabs-vertical {
box-sizing: border-box;
Expand Down Expand Up @@ -157,6 +174,15 @@
}
}
}
.red-ui-tabs-select {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.4;
background: red;
}
}
.red-ui-tab-button {
position: absolute;
Expand All @@ -180,7 +206,25 @@
z-index: 2;
}
}

.red-ui-tab-fixed-buttons {
position: absolute;
box-sizing: border-box;
top: 0;
right: 0;
height: 35px;
background: #fff;
border-bottom: 1px solid $primary-border-color;
az-index: 2;
a {
@include workspace-button;
line-height: 26px;
height: 28px;
width: 28px;
margin: 4px 3px 3px;
border: 1px solid $primary-border-color;
az-index: 2;
}
}
.red-ui-tab-scroll {
width: 21px;
top: 0;
Expand Down Expand Up @@ -216,7 +260,7 @@
right: 38px;
}

.red-ui-tab-icon {
img.red-ui-tab-icon {
margin-left: -8px;
margin-right: 3px;
margin-top: -2px;
Expand All @@ -225,6 +269,11 @@
height: 20px;
vertical-align: middle;
}
i.red-ui-tab-icon {
opacity: 0.7;
width: 18px;
height: 20px;
}

.red-ui-tabs-badges {
position: absolute;
Expand Down
4 changes: 3 additions & 1 deletion nodes/core/core/58-debug.html
View file
Expand Up @@ -154,7 +154,9 @@ <h3>Details</h3>
name: this._("debug.sidebar.name"),
content: uiComponents.content,
toolbar: uiComponents.footer,
enableOnEdit: true
enableOnEdit: true,
fixed: true,
iconClass: "fa fa-wrench"
});
RED.actions.add("core:show-debug-tab",function() { RED.sidebar.show('debug'); });

Expand Down

0 comments on commit bbcb8cf

Please sign in to comment.