Merge pull request #4152 from andydotxyz/feature/expandaccordion

fyne-io · Aug 12, 2023 · 7692e88 · 7692e88
2 parents 310723c + 4a7f046
commit 7692e88
Show file tree

Hide file tree

Showing 20 changed files with 361 additions and 33 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ More detailed release notes can be found on the [releases page](https://github.c
 * Go 1.17 or later is now required.
 * Icons for macOS bundles are now padded and rounded, disable with "-use-raw-icon"
 * Focus handling for List/Tree/Table are now at the parent widget not child elements
+* Accordion widget now fills available space - put it inside a `VBox` container for old behavior
 
 
 ## 2.3.5 - 6 June 2023

diff --git a/cmd/fyne_demo/tutorials/widget.go b/cmd/fyne_demo/tutorials/widget.go
@@ -50,6 +50,7 @@ func makeAccordionTab(_ fyne.Window) fyne.CanvasObject {
 			Detail: widget.NewLabel("Three"),
 		},
 	)
+	ac.MultiOpen = true
 	ac.Append(widget.NewAccordionItem("D", &widget.Entry{Text: "Four"}))
 	return ac
 }

diff --git a/widget/accordion.go b/widget/accordion.go
@@ -118,13 +118,33 @@ type accordionRenderer struct {
 }
 
 func (r *accordionRenderer) Layout(size fyne.Size) {
-	dividerOff := (theme.Padding() + theme.SeparatorThicknessSize()) / 2
+	pad := theme.Padding()
+	dividerOff := (pad + theme.SeparatorThicknessSize()) / 2
 	x := float32(0)
 	y := float32(0)
+	hasOpen := 0
+	for i, ai := range r.container.Items {
+		h := r.headers[i]
+		min := h.MinSize().Height
+		y += min
+
+		if ai.Open {
+			y += pad
+			hasOpen++
+		}
+		if i < len(r.container.Items)-1 {
+			y += pad
+		}
+	}
+
+	openSize := (size.Height - y) / float32(hasOpen)
+	y = 0
 	for i, ai := range r.container.Items {
 		if i != 0 {
 			div := r.dividers[i-1]
-			div.Move(fyne.NewPos(x, y-dividerOff))
+			if i > 0 {
+				div.Move(fyne.NewPos(x, y-dividerOff))
+			}
 			div.Resize(fyne.NewSize(size.Width, theme.SeparatorThicknessSize()))
 		}
 
@@ -133,23 +153,24 @@ func (r *accordionRenderer) Layout(size fyne.Size) {
 		min := h.MinSize().Height
 		h.Resize(fyne.NewSize(size.Width, min))
 		y += min
+
 		if ai.Open {
 			d := ai.Detail
 			d.Move(fyne.NewPos(x, y))
-			min := d.MinSize().Height
-			d.Resize(fyne.NewSize(size.Width, min))
-			y += min
+			d.Resize(fyne.NewSize(size.Width, openSize))
+			y += openSize
 		}
 		if i < len(r.container.Items)-1 {
-			y += theme.Padding()
+			y += pad
 		}
 	}
 }
 
 func (r *accordionRenderer) MinSize() (size fyne.Size) {
+	pad := theme.Padding()
 	for i, ai := range r.container.Items {
 		if i != 0 {
-			size.Height += theme.Padding()
+			size.Height += pad
 		}
 		min := r.headers[i].MinSize()
 		size.Width = fyne.Max(size.Width, min.Width)
@@ -158,7 +179,7 @@ func (r *accordionRenderer) MinSize() (size fyne.Size) {
 		size.Width = fyne.Max(size.Width, min.Width)
 		if ai.Open {
 			size.Height += min.Height
-			size.Height += theme.Padding()
+			size.Height += pad
 		}
 	}
 	return

diff --git a/widget/accordion_test.go b/widget/accordion_test.go
@@ -208,7 +208,125 @@ func TestAccordion_Layout(t *testing.T) {
 			}
 
 			window := test.NewWindow(&fyne.Container{Layout: layout.NewCenterLayout(), Objects: []fyne.CanvasObject{accordion}})
-			window.Resize(accordion.MinSize().Max(fyne.NewSize(150, 200)))
+			window.Resize(accordion.MinSize().Add(fyne.NewSquareSize(theme.Padding() * 2)))
+
+			test.AssertRendersToMarkup(t, "accordion/layout_"+name+".xml", window.Canvas())
+
+			window.Close()
+		})
+	}
+}
+
+func TestAccordion_Layout_Expanded(t *testing.T) {
+	test.NewApp()
+
+	for name, tt := range map[string]struct {
+		multiOpen bool
+		items     []*widget.AccordionItem
+		opened    []int
+	}{
+		"expanded_single_open_one_item": {
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+			},
+		},
+		"expanded_single_open_one_item_opened": {
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+			},
+			opened: []int{0},
+		},
+		"expanded_single_open_multiple_items": {
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+				{
+					Title:  "B",
+					Detail: widget.NewLabel("2222222222"),
+				},
+			},
+		},
+		"expanded_single_open_multiple_items_opened": {
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+				{
+					Title:  "B",
+					Detail: widget.NewLabel("2222222222"),
+				},
+			},
+			opened: []int{0, 1},
+		},
+		"expanded_multiple_open_one_item": {
+			multiOpen: true,
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+			},
+		},
+		"expanded_multiple_open_one_item_opened": {
+			multiOpen: true,
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+			},
+			opened: []int{0},
+		},
+		"expanded_multiple_open_multiple_items": {
+			multiOpen: true,
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+				{
+					Title:  "B",
+					Detail: widget.NewLabel("2222222222"),
+				},
+			},
+		},
+		"expanded_multiple_open_multiple_items_opened": {
+			multiOpen: true,
+			items: []*widget.AccordionItem{
+				{
+					Title:  "A",
+					Detail: widget.NewLabel("11111"),
+				},
+				{
+					Title:  "B",
+					Detail: widget.NewLabel("2222222222"),
+				},
+			},
+			opened: []int{0, 1},
+		},
+	} {
+		t.Run(name, func(t *testing.T) {
+			accordion := &widget.Accordion{
+				MultiOpen: tt.multiOpen,
+			}
+			for _, ai := range tt.items {
+				accordion.Append(ai)
+			}
+			for _, o := range tt.opened {
+				accordion.Open(o)
+			}
+
+			window := test.NewWindow(&fyne.Container{Layout: layout.NewCenterLayout(), Objects: []fyne.CanvasObject{accordion}})
+			window.Resize(accordion.MinSize().Max(fyne.NewSize(150, 280)))
 
 			test.AssertRendersToMarkup(t, "accordion/layout_"+name+".xml", window.Canvas())
 

diff --git a/widget/testdata/accordion/layout_expanded_multiple_open_multiple_items.xml b/widget/testdata/accordion/layout_expanded_multiple_open_multiple_items.xml
@@ -0,0 +1,27 @@
+<canvas padded size="150x280">
+	<content>
+		<container pos="4,4" size="142x272">
+			<widget pos="22,98" size="96x76" type="*widget.Accordion">
+				<widget size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">A</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropDownIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,40" size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">B</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropDownIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,37" size="96x1" type="*widget.Separator">
+					<rectangle fillColor="disabled" size="96x1"/>
+				</widget>
+			</widget>
+		</container>
+	</content>
+</canvas>
diff --git a/widget/testdata/accordion/layout_expanded_multiple_open_multiple_items_opened.xml b/widget/testdata/accordion/layout_expanded_multiple_open_multiple_items_opened.xml
@@ -0,0 +1,33 @@
+<canvas padded size="150x280">
+	<content>
+		<container pos="4,4" size="142x272">
+			<widget pos="22,58" size="96x154" type="*widget.Accordion">
+				<widget size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">A</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropUpIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,75" size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">B</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropUpIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,36" size="96x35" type="*widget.Label">
+					<text pos="8,8" size="40x19">11111</text>
+				</widget>
+				<widget pos="0,111" size="96x35" type="*widget.Label">
+					<text pos="8,8" size="80x19">2222222222</text>
+				</widget>
+				<widget pos="0,72" size="96x1" type="*widget.Separator">
+					<rectangle fillColor="disabled" size="96x1"/>
+				</widget>
+			</widget>
+		</container>
+	</content>
+</canvas>
diff --git a/widget/testdata/accordion/layout_expanded_multiple_open_one_item.xml b/widget/testdata/accordion/layout_expanded_multiple_open_one_item.xml
@@ -0,0 +1,16 @@
+<canvas padded size="150x280">
+	<content>
+		<container pos="4,4" size="142x272">
+			<widget pos="42,118" size="56x36" type="*widget.Accordion">
+				<widget size="56x36" type="*widget.Button">
+					<rectangle radius="4" size="56x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">A</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropDownIcon" size="iconInlineSize"/>
+				</widget>
+			</widget>
+		</container>
+	</content>
+</canvas>
diff --git a/widget/testdata/accordion/layout_expanded_multiple_open_one_item_opened.xml b/widget/testdata/accordion/layout_expanded_multiple_open_one_item_opened.xml
@@ -0,0 +1,19 @@
+<canvas padded size="150x280">
+	<content>
+		<container pos="4,4" size="142x272">
+			<widget pos="42,98" size="56x75" type="*widget.Accordion">
+				<widget size="56x36" type="*widget.Button">
+					<rectangle radius="4" size="56x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">A</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropUpIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,36" size="56x35" type="*widget.Label">
+					<text pos="8,8" size="40x19">11111</text>
+				</widget>
+			</widget>
+		</container>
+	</content>
+</canvas>
diff --git a/widget/testdata/accordion/layout_expanded_single_open_multiple_items.xml b/widget/testdata/accordion/layout_expanded_single_open_multiple_items.xml
@@ -0,0 +1,27 @@
+<canvas padded size="150x280">
+	<content>
+		<container pos="4,4" size="142x272">
+			<widget pos="22,98" size="96x76" type="*widget.Accordion">
+				<widget size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">A</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropDownIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,40" size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">B</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropDownIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,37" size="96x1" type="*widget.Separator">
+					<rectangle fillColor="disabled" size="96x1"/>
+				</widget>
+			</widget>
+		</container>
+	</content>
+</canvas>
diff --git a/widget/testdata/accordion/layout_expanded_single_open_multiple_items_opened.xml b/widget/testdata/accordion/layout_expanded_single_open_multiple_items_opened.xml
@@ -0,0 +1,30 @@
+<canvas padded size="150x280">
+	<content>
+		<container pos="4,4" size="142x272">
+			<widget pos="22,78" size="96x115" type="*widget.Accordion">
+				<widget size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">A</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropDownIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,40" size="96x36" type="*widget.Button">
+					<rectangle radius="4" size="96x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">B</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropUpIcon" size="iconInlineSize"/>
+				</widget>
+				<widget pos="0,76" size="96x35" type="*widget.Label">
+					<text pos="8,8" size="80x19">2222222222</text>
+				</widget>
+				<widget pos="0,37" size="96x1" type="*widget.Separator">
+					<rectangle fillColor="disabled" size="96x1"/>
+				</widget>
+			</widget>
+		</container>
+	</content>
+</canvas>
diff --git a/widget/testdata/accordion/layout_expanded_single_open_one_item.xml b/widget/testdata/accordion/layout_expanded_single_open_one_item.xml
@@ -0,0 +1,16 @@
+<canvas padded size="150x280">
+	<content>
+		<container pos="4,4" size="142x272">
+			<widget pos="42,118" size="56x36" type="*widget.Accordion">
+				<widget size="56x36" type="*widget.Button">
+					<rectangle radius="4" size="56x36"/>
+					<rectangle size="0x0"/>
+					<widget pos="32,8" size="9x20" type="*widget.RichText">
+						<text alignment="center" bold size="9x19">A</text>
+					</widget>
+					<image fillMode="contain" pos="8,8" rsc="menuDropDownIcon" size="iconInlineSize"/>
+				</widget>
+			</widget>
+		</container>
+	</content>
+</canvas>