Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix tab button layout on mobile #2117

Merged
merged 4 commits into from Apr 22, 2021
Merged

Fix tab button layout on mobile #2117

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d9c4c72
Fix tab button layout on mobile
stuartmscott Mar 25, 2021
30dc0d2
Update mobile tests
stuartmscott Mar 25, 2021
008f4e2
DocTabs can appear on any edge
andydotxyz Mar 25, 2021
7dc2ac5
Fix consistency of mobile tab positions
andydotxyz Apr 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 5 additions & 1 deletion container/apptabs.go
View file
Open in desktop
Expand Up @@ -320,7 +320,11 @@ func (r *appTabsRenderer) buildTabButtons(count int) *fyne.Container {
if cells == 0 {
cells = 1
}
buttons.Layout = layout.NewGridLayout(cells)
if r.appTabs.location == TabLocationTop || r.appTabs.location == TabLocationBottom {
buttons.Layout = layout.NewGridLayoutWithColumns(cells)
} else {
buttons.Layout = layout.NewGridLayoutWithRows(cells)
}
iconPos = buttonIconTop
} else if r.appTabs.location == TabLocationLeading || r.appTabs.location == TabLocationTrailing {
buttons.Layout = layout.NewVBoxLayout()
Expand Down
6 changes: 5 additions & 1 deletion container/doctabs.go
View file
Open in desktop
Expand Up @@ -286,7 +286,11 @@ func (r *docTabsRenderer) buildTabButtons(count int) *fyne.Container {
if cells == 0 {
cells = 1
}
buttons.Layout = layout.NewGridLayout(cells)
if r.docTabs.location == TabLocationTop || r.docTabs.location == TabLocationBottom {
buttons.Layout = layout.NewGridLayoutWithColumns(cells)
} else {
buttons.Layout = layout.NewGridLayoutWithRows(cells)
}
iconPos = buttonIconTop
} else if r.docTabs.location == TabLocationLeading || r.docTabs.location == TabLocationTrailing {
buttons.Layout = layout.NewVBoxLayout()
Expand Down
33 changes: 25 additions & 8 deletions container/doctabs_mobile_test.go
View file
Open in desktop
Expand Up @@ -179,8 +179,17 @@ func TestDocTabs_HoverButtons(t *testing.T) {
test.MoveMouse(c, fyne.NewPos(75, 10))
test.AssertRendersToMarkup(t, "doctabs/mobile/hover_none.xml", c, "no hovering on mobile")

test.MoveMouse(c, fyne.NewPos(90, 10))
test.AssertRendersToMarkup(t, "doctabs/mobile/hover_none.xml", c, "no hovering on mobile")

test.MoveMouse(c, fyne.NewPos(10, 10))
test.AssertRendersToMarkup(t, "doctabs/mobile/hover_none.xml", c, "no hovering on mobile")

test.MoveMouse(c, fyne.NewPos(136, 10))
test.AssertRendersToMarkup(t, "doctabs/mobile/hover_none.xml", c, "no hovering on mobile")

test.MoveMouse(c, fyne.NewPos(104, 10))
test.AssertRendersToMarkup(t, "doctabs/mobile/hover_none.xml", c, "no hovering on mobile")
}

func TestDocTabs_Layout(t *testing.T) {
Expand Down Expand Up @@ -300,19 +309,17 @@ func TestDocTabs_SetTabLocation(t *testing.T) {
w.Resize(tabs.MinSize())
test.AssertRendersToMarkup(t, "doctabs/mobile/tab_location_top.xml", c)

// TODO: doc tabs support leading/trailing but rendering is currently broken (see #1962)
// tabs.SetTabLocation(container.TabLocationLeading)
// w.Resize(tabs.MinSize())
// test.AssertRendersToMarkup(t, "doctabs/mobile/tab_location_bottom.xml", c, "leading is the same as bottom on mobile")
tabs.SetTabLocation(container.TabLocationLeading)
w.Resize(tabs.MinSize())
test.AssertRendersToMarkup(t, "doctabs/mobile/tab_location_leading.xml", c)

tabs.SetTabLocation(container.TabLocationBottom)
w.Resize(tabs.MinSize())
test.AssertRendersToMarkup(t, "doctabs/mobile/tab_location_bottom.xml", c)

// TODO: doc tabs support leading/trailing but rendering is currently broken (see #1962)
// tabs.SetTabLocation(container.TabLocationTrailing)
// w.Resize(tabs.MinSize())
// test.AssertRendersToMarkup(t, "doctabs/mobile/tab_location_bottom.xml", c, "trailing is the same as bottom on mobile")
tabs.SetTabLocation(container.TabLocationTrailing)
w.Resize(tabs.MinSize())
test.AssertRendersToMarkup(t, "doctabs/mobile/tab_location_trailing.xml", c)

tabs.SetTabLocation(container.TabLocationTop)
w.Resize(tabs.MinSize())
Expand All @@ -327,6 +334,9 @@ func TestDocTabs_Tapped(t *testing.T) {
item2 := &container.TabItem{Text: "Test2", Content: widget.NewLabel("Text 2")}
item3 := &container.TabItem{Text: "Test3", Content: widget.NewLabel("Text 3")}
tabs := container.NewDocTabs(item1, item2, item3)
tabs.CreateTab = func() *container.TabItem {
return &container.TabItem{Text: "Another", Content: widget.NewLabel("Another Tab")}
}
w := test.NewWindow(tabs)
defer w.Close()
w.SetPadded(false)
Expand All @@ -347,4 +357,11 @@ func TestDocTabs_Tapped(t *testing.T) {
test.TapCanvas(c, fyne.NewPos(10, 10))
require.Equal(t, 0, tabs.SelectedIndex())
test.AssertRendersToMarkup(t, "doctabs/mobile/tapped_first_selected.xml", c)

test.TapCanvas(c, fyne.NewPos(254, 10))
require.Equal(t, 3, tabs.SelectedIndex())
test.AssertRendersToMarkup(t, "doctabs/mobile/tapped_create_tab.xml", c)

test.TapCanvas(c, fyne.NewPos(286, 10))
test.AssertRendersToMarkup(t, "doctabs/mobile/tapped_all_tabs.xml", c)
}
42 changes: 42 additions & 0 deletions container/testdata/doctabs/mobile/tab_location_leading.xml
View file
Open in desktop
@@ -0,0 +1,42 @@
<canvas size="137x37">
<content>
<widget size="137x37" type="*container.DocTabs">
<container size="73x37">
<widget size="73x4" type="*widget.Scroll">
<container size="73x95">
<widget size="73x29" type="*container.tabButton">
<text bold color="primary" pos="4,4" size="65x21">Test1</text>
<widget pos="49,4" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize" themed="primary"/>
</widget>
</widget>
<widget pos="0,33" size="73x29" type="*container.tabButton">
<text bold pos="4,4" size="65x21">Test2</text>
<widget pos="49,4" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="0,66" size="73x29" type="*container.tabButton">
<text bold pos="4,4" size="65x21">Test3</text>
<widget pos="49,4" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
</container>
</widget>
<container pos="0,8" size="73x29">
<widget size="28x29" type="*widget.Button">
<rectangle fillColor="button" size="28x29"/>
<rectangle size="0x0"/>
<image fillMode="contain" pos="4,4" rsc="more-vertical.svg" size="iconInlineSize" themed="default"/>
</widget>
</container>
</container>
<rectangle fillColor="shadow" pos="73,0" size="4x37"/>
<rectangle fillColor="primary" pos="73,0" size="4x4"/>
<widget pos="77,0" size="60x37" type="*widget.Label">
<text pos="8,8" size="44x21">Text 1</text>
</widget>
</widget>
</content>
</canvas>
42 changes: 42 additions & 0 deletions container/testdata/doctabs/mobile/tab_location_trailing.xml
View file
Open in desktop
@@ -0,0 +1,42 @@
<canvas size="137x37">
<content>
<widget size="137x37" type="*container.DocTabs">
<container pos="64,0" size="73x37">
<widget size="73x4" type="*widget.Scroll">
<container size="73x95">
<widget size="73x29" type="*container.tabButton">
<text bold color="primary" pos="4,4" size="65x21">Test1</text>
<widget pos="49,4" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize" themed="primary"/>
</widget>
</widget>
<widget pos="0,33" size="73x29" type="*container.tabButton">
<text bold pos="4,4" size="65x21">Test2</text>
<widget pos="49,4" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="0,66" size="73x29" type="*container.tabButton">
<text bold pos="4,4" size="65x21">Test3</text>
<widget pos="49,4" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
</container>
</widget>
<container pos="0,8" size="73x29">
<widget size="28x29" type="*widget.Button">
<rectangle fillColor="button" size="28x29"/>
<rectangle size="0x0"/>
<image fillMode="contain" pos="4,4" rsc="more-vertical.svg" size="iconInlineSize" themed="default"/>
</widget>
</container>
</container>
<rectangle fillColor="shadow" pos="60,0" size="4x37"/>
<rectangle fillColor="primary" pos="60,0" size="4x4"/>
<widget size="60x37" type="*widget.Label">
<text pos="8,8" size="44x21">Text 1</text>
</widget>
</widget>
</content>
</canvas>
96 changes: 96 additions & 0 deletions container/testdata/doctabs/mobile/tapped_all_tabs.xml
View file
Open in desktop
@@ -0,0 +1,96 @@
<canvas size="300x100">
<content>
<widget size="300x100" type="*container.DocTabs">
<container size="300x32">
<widget size="236x32" type="*widget.Scroll">
<container pos="-156,0" size="392x32">
<widget size="95x32" type="*container.tabButton">
<text bold pos="4,4" size="87x21">Test1</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="99,0" size="95x32" type="*container.tabButton">
<text bold pos="4,4" size="87x21">Test2</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="198,0" size="95x32" type="*container.tabButton">
<text bold pos="4,4" size="87x21">Test3</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="297,0" size="95x32" type="*container.tabButton">
<text bold color="primary" pos="4,4" size="87x21">Another</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize" themed="primary"/>
</widget>
</widget>
</container>
</widget>
<container pos="240,0" size="60x32">
<widget size="28x32" type="*widget.Button">
<rectangle fillColor="button" size="28x32"/>
<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="24x28"/>
<image fillMode="contain" pos="4,6" rsc="contentAddIcon" size="iconInlineSize"/>
</widget>
<widget pos="32,0" size="28x32" type="*widget.Button">
<rectangle fillColor="button" size="28x32"/>
<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="24x28"/>
<image fillMode="contain" pos="4,6" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
</widget>
</container>
</container>
<rectangle fillColor="shadow" pos="0,32" size="300x4"/>
<rectangle fillColor="primary" pos="141,32" size="95x4"/>
<widget pos="0,36" size="300x64" type="*widget.Label">
<text pos="8,8" size="284x21">Another Tab</text>
</widget>
</widget>
</content>
<overlay>
<widget size="300x100" type="*widget.OverlayContainer">
<widget pos="226,0" size="74x100" type="*widget.Menu">
<widget size="74x100" type="*widget.Shadow">
<radialGradient centerOffset="0.5,0.5" pos="-4,-4" size="4x4" startColor="shadow"/>
<linearGradient endColor="shadow" pos="0,-4" size="74x4"/>
<radialGradient centerOffset="-0.5,0.5" pos="74,-4" size="4x4" startColor="shadow"/>
<linearGradient angle="270" pos="74,0" size="4x100" startColor="shadow"/>
<radialGradient centerOffset="-0.5,-0.5" pos="74,100" size="4x4" startColor="shadow"/>
<linearGradient pos="0,100" size="74x4" startColor="shadow"/>
<radialGradient centerOffset="0.5,-0.5" pos="-4,100" size="4x4" startColor="shadow"/>
<linearGradient angle="270" endColor="shadow" pos="-4,0" size="4x100"/>
</widget>
<widget size="74x100" type="*widget.Scroll">
<widget size="74x136" type="*widget.menuBox">
<rectangle fillColor="background" size="74x144"/>
<container pos="0,4" size="74x144">
<widget size="74x29" type="*widget.menuItem">
<text pos="8,4" size="39x21">Test1</text>
</widget>
<widget pos="0,33" size="74x29" type="*widget.menuItem">
<text pos="8,4" size="39x21">Test2</text>
</widget>
<widget pos="0,66" size="74x29" type="*widget.menuItem">
<text pos="8,4" size="39x21">Test3</text>
</widget>
<widget pos="0,99" size="74x29" type="*widget.menuItem">
<text pos="8,4" size="58x21">Another</text>
</widget>
</container>
</widget>
<widget pos="68,0" size="6x100" type="*widget.scrollBarArea">
<widget pos="3,0" size="3x73" type="*widget.scrollBar">
<rectangle fillColor="scrollbar" size="3x73"/>
</widget>
</widget>
<widget pos="0,100" size="74x0" type="*widget.Shadow">
<linearGradient endColor="shadow" pos="0,-8" size="74x8"/>
</widget>
</widget>
</widget>
</widget>
</overlay>
</canvas>
53 changes: 53 additions & 0 deletions container/testdata/doctabs/mobile/tapped_create_tab.xml
View file
Open in desktop
@@ -0,0 +1,53 @@
<canvas size="300x100">
<content>
<widget size="300x100" type="*container.DocTabs">
<container size="300x32">
<widget size="236x32" type="*widget.Scroll">
<container pos="-156,0" size="392x32">
<widget size="95x32" type="*container.tabButton">
<text bold pos="4,4" size="87x21">Test1</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="99,0" size="95x32" type="*container.tabButton">
<text bold pos="4,4" size="87x21">Test2</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="198,0" size="95x32" type="*container.tabButton">
<text bold pos="4,4" size="87x21">Test3</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="297,0" size="95x32" type="*container.tabButton">
<text bold color="primary" pos="4,4" size="87x21">Another</text>
<widget pos="71,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize" themed="primary"/>
</widget>
</widget>
</container>
</widget>
<container pos="240,0" size="60x32">
<widget size="28x32" type="*widget.Button">
<rectangle fillColor="button" size="28x32"/>
<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="24x28"/>
<image fillMode="contain" pos="4,6" rsc="contentAddIcon" size="iconInlineSize"/>
</widget>
<widget pos="32,0" size="28x32" type="*widget.Button">
<rectangle fillColor="button" size="28x32"/>
<rectangle size="0x0"/>
<image fillMode="contain" pos="4,6" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
</widget>
</container>
</container>
<rectangle fillColor="shadow" pos="0,32" size="300x4"/>
<rectangle fillColor="primary" pos="141,32" size="95x4"/>
<widget pos="0,36" size="300x64" type="*widget.Label">
<text pos="8,8" size="284x21">Another Tab</text>
</widget>
</widget>
</content>
</canvas>
31 changes: 18 additions & 13 deletions container/testdata/doctabs/mobile/tapped_first_selected.xml
View file
Open in desktop
Expand Up @@ -2,38 +2,43 @@
<content>
<widget size="300x100" type="*container.DocTabs">
<container size="300x32">
<widget size="268x32" type="*widget.Scroll">
<container size="268x32">
<widget size="87x32" type="*container.tabButton">
<text bold color="primary" pos="4,4" size="79x21">Test1</text>
<widget pos="63,6" size="20x20" type="*container.tabCloseButton">
<widget size="236x32" type="*widget.Scroll">
<container size="236x32">
<widget size="76x32" type="*container.tabButton">
<text bold color="primary" pos="4,4" size="68x21">Test1</text>
<widget pos="52,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize" themed="primary"/>
</widget>
</widget>
<widget pos="91,0" size="86x32" type="*container.tabButton">
<text bold pos="4,4" size="78x21">Test2</text>
<widget pos="62,6" size="20x20" type="*container.tabCloseButton">
<widget pos="80,0" size="76x32" type="*container.tabButton">
<text bold pos="4,4" size="68x21">Test2</text>
<widget pos="52,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
<widget pos="181,0" size="87x32" type="*container.tabButton">
<text bold pos="4,4" size="79x21">Test3</text>
<widget pos="63,6" size="20x20" type="*container.tabCloseButton">
<widget pos="160,0" size="76x32" type="*container.tabButton">
<text bold pos="4,4" size="68x21">Test3</text>
<widget pos="52,6" size="20x20" type="*container.tabCloseButton">
<image rsc="cancelIcon" size="iconInlineSize"/>
</widget>
</widget>
</container>
</widget>
<container pos="272,0" size="28x32">
<container pos="240,0" size="60x32">
<widget size="28x32" type="*widget.Button">
<rectangle fillColor="button" size="28x32"/>
<rectangle size="0x0"/>
<image fillMode="contain" pos="4,6" rsc="contentAddIcon" size="iconInlineSize"/>
</widget>
<widget pos="32,0" size="28x32" type="*widget.Button">
<rectangle fillColor="button" size="28x32"/>
<rectangle size="0x0"/>
<image fillMode="contain" pos="4,6" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
</widget>
</container>
</container>
<rectangle fillColor="shadow" pos="0,32" size="300x4"/>
<rectangle fillColor="primary" pos="0,32" size="87x4"/>
<rectangle fillColor="primary" pos="0,32" size="76x4"/>
<widget pos="0,36" size="300x64" type="*widget.Label">
<text pos="8,8" size="284x21">Text 1</text>
</widget>
Expand Down