Skip to content

Commit

Permalink
tabbar tweaks (left / right fillers)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ianharrigan
ianharrigan committed Apr 29, 2024
1 parent cb54f6b commit da0a36d
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 8 deletions.
25 changes: 24 additions & 1 deletion haxe/ui/_module/styles/default/tabs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
border-bottom-color: $normal-border-color;
border-top-width: 0px;
clip: true;
spacing: 8px;
}

.tabbar > .tabbar-contents {
Expand Down Expand Up @@ -82,12 +83,24 @@
icon: $arrow-left;
border-radius: 0;
padding: 5px;
margin-left: 2px;
}

.tabbar-scroll-right {
icon: $arrow-right;
border-radius: 0;
padding: 5px;
margin-left: 3px;
}

.tabbar-filler-left {
width: 1px;
background-color: $normal-border-color;
}

.tabbar-filler-right {
width: 1px;
background-color: $normal-border-color;
}

.tabbar-button-selected .label {
Expand Down Expand Up @@ -205,6 +218,16 @@
border-bottom-right-radius: 4px;
}

.rounded-tabs .tabbar .tabbar-scroll-left {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

.rounded-tabs .tabbar .tabbar-scroll-right {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

/************************************************************************
** TABVIEW
*************************************************************************/
Expand Down Expand Up @@ -253,4 +276,4 @@

.full-width-buttons .tabbar-button, .full-width-buttons .tabbar > .tabbar-contents {
width: 100%;
}
}
65 changes: 58 additions & 7 deletions haxe/ui/components/TabBar.hx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,17 @@ class TabBarLayout extends DefaultLayout {
filler.left = container.width;
}

var leftFiller:Component = _component.findComponent("tabbar-filler-left", false);
if (leftFiller != null) {
leftFiller.height = _component.height;
}

var rightFiller:Component = _component.findComponent("tabbar-filler-right", false);
if (rightFiller != null) {
rightFiller.left = _component.width - rightFiller.width;
rightFiller.height = _component.height;
}

var max:Float = 0;
for (button in container.childComponents) {
button.validateNow();
Expand All @@ -80,12 +91,12 @@ class TabBarLayout extends DefaultLayout {
if (right != null) {
x -= right.width;
}
left.left = x + 1;
left.left = x - left.style.marginLeft;
left.top = (_component.height / 2) - (left.height / 2);
}

if (right != null && hidden(right) == false) {
right.left = _component.width - right.width;
right.left = _component.width - right.width - right.marginLeft;
right.top = (_component.height / 2) - (right.height / 2);
}
}
Expand Down Expand Up @@ -206,6 +217,7 @@ private class SelectedIndex extends DataBehaviour {

builder._containerPosition = x;
builder._container.left = x;
builder.checkLeftRightFillers();
}

_component.invalidateComponentLayout();
Expand Down Expand Up @@ -409,6 +421,8 @@ private class Builder extends CompositeBuilder {
_filler = new Box();
_filler.id = "tabbar-filler";
_filler.addClass("tabbar-filler");
_filler.scriptAccess = false;
_filler.includeInLayout = false;
_tabbar.addComponent(_filler);
}
if (_container == null) {
Expand Down Expand Up @@ -492,21 +506,21 @@ private class Builder extends CompositeBuilder {
}

public override function addComponent(child:Component):Component {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler) {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler && child.id != "tabbar-filler-left" && child.id != "tabbar-filler-right") {
return addTab(child);
}
return null;
}

public override function addComponentAt(child:Component, index:Int):Component {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler) {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler && child.id != "tabbar-filler-left" && child.id != "tabbar-filler-right") {
return addTabAt(child, index);
}
return null;
}

public override function removeComponent(child:Component, dispose:Bool = true, invalidate:Bool = true):Component {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler) {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler && child.id != "tabbar-filler-left" && child.id != "tabbar-filler-right") {
var index = _container.getComponentIndex(child);
if (index != -1) {
_tabbar.removeTab(index);
Expand All @@ -525,14 +539,14 @@ private class Builder extends CompositeBuilder {
}

public override function getComponentIndex(child:Component):Int {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler) {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler && child.id != "tabbar-filler-left" && child.id != "tabbar-filler-right") {
return _container.getComponentIndex(child);
}
return -1;
}

public override function setComponentIndex(child:Component, index:Int):Component {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler) {
if (child != _container && child != _scrollLeft && child != _scrollRight && child != _filler && child.id != "tabbar-filler-left" && child.id != "tabbar-filler-right") {
return _container.setComponentIndex(child, index);
}
return null;
Expand All @@ -559,6 +573,8 @@ private class Builder extends CompositeBuilder {
_containerPosition = null;
}

checkLeftRightFillers();

return true;
}

Expand Down Expand Up @@ -607,6 +623,40 @@ private class Builder extends CompositeBuilder {
}
_containerPosition = x;
_container.left = x;
checkLeftRightFillers();
}

private function checkLeftRightFillers() {
var leftFiller = _tabbar.findComponent("tabbar-filler-left", false);
if (_containerPosition < 0) {
if (leftFiller == null) {
leftFiller = new Box();
leftFiller.id = "tabbar-filler-left";
leftFiller.addClass("tabbar-filler-left");
leftFiller.scriptAccess = false;
leftFiller.includeInLayout = false;
_tabbar.addComponent(leftFiller);
}
leftFiller.show();
} else if (leftFiller != null) {
leftFiller.hide();
}

var rightFiller = _tabbar.findComponent("tabbar-filler-right", false);
var max = -(_container.width - _tabbar.width);
if (_containerPosition > max) {
if (rightFiller == null) {
rightFiller = new Box();
rightFiller.id = "tabbar-filler-right";
rightFiller.addClass("tabbar-filler-right");
rightFiller.scriptAccess = false;
rightFiller.includeInLayout = false;
_tabbar.addComponent(rightFiller);
}
rightFiller.show();
} else if (rightFiller != null) {
rightFiller.hide();
}
}

private function scrollRight() {
Expand All @@ -632,6 +682,7 @@ private class Builder extends CompositeBuilder {
}
_containerPosition = x;
_container.left = x;
checkLeftRightFillers();
}

private function hideScrollButtons() {
Expand Down

0 comments on commit da0a36d

Please sign in to comment.