Support newline in buttons

Fixes fyne-io#2378
lunarforge · Aug 27, 2021 · 5ce841c · 5ce841c
1 parent 59fbf74
commit 5ce841c
Show file tree

Hide file tree

Showing 26 changed files with 122 additions and 39 deletions.
diff --git a/container/testdata/doctabs/desktop/single_custom_theme.png b/container/testdata/doctabs/desktop/single_custom_theme.png
diff --git a/widget/button.go b/widget/button.go
@@ -97,8 +97,10 @@ func NewButtonWithIcon(label string, icon fyne.Resource, tapped func()) *Button
 // CreateRenderer is a private method to Fyne which links this widget to its renderer
 func (b *Button) CreateRenderer() fyne.WidgetRenderer {
 	b.ExtendBaseWidget(b)
-	text := canvas.NewText(b.Text, theme.ForegroundColor())
-	text.TextStyle.Bold = true
+	seg := &TextSegment{Text: b.Text, Style: RichTextStyleStrong}
+	seg.Style.Alignment = fyne.TextAlignCenter
+	text := NewRichText(seg)
+	text.inset = fyne.NewSize(theme.Padding()*2, theme.Padding()*2)
 
 	background := canvas.NewRectangle(theme.ButtonColor())
 	tapBG := canvas.NewRectangle(color.Transparent)
@@ -216,7 +218,7 @@ type buttonRenderer struct {
 	*widget.ShadowingRenderer
 
 	icon       *canvas.Image
-	label      *canvas.Text
+	label      *RichText
 	background *canvas.Rectangle
 	tapBG      *canvas.Rectangle
 	button     *Button
@@ -237,7 +239,7 @@ func (r *buttonRenderer) Layout(size fyne.Size) {
 	r.background.Resize(bgSize)
 
 	hasIcon := r.icon != nil
-	hasLabel := r.label.Text != ""
+	hasLabel := r.label.Segments[0].(*TextSegment).Text != ""
 	if !hasIcon && !hasLabel {
 		// Nothing to layout
 		return
@@ -277,7 +279,7 @@ func (r *buttonRenderer) Layout(size fyne.Size) {
 // amount of padding added.
 func (r *buttonRenderer) MinSize() (size fyne.Size) {
 	hasIcon := r.icon != nil
-	hasLabel := r.label.Text != ""
+	hasLabel := r.label.Segments[0].(*TextSegment).Text != ""
 	iconSize := fyne.NewSize(theme.IconInlineSize(), theme.IconInlineSize())
 	labelSize := r.label.MinSize()
 	if hasLabel {
@@ -295,7 +297,8 @@ func (r *buttonRenderer) MinSize() (size fyne.Size) {
 }
 
 func (r *buttonRenderer) Refresh() {
-	r.label.Text = r.button.Text
+	r.label.inset = fyne.NewSize(theme.Padding()*2, theme.Padding()*2)
+	r.label.Segments[0].(*TextSegment).Text = r.button.Text
 	r.updateIconAndText()
 	r.applyTheme()
 	r.background.Refresh()
@@ -306,14 +309,14 @@ func (r *buttonRenderer) Refresh() {
 // applyTheme updates this button to match the current theme
 func (r *buttonRenderer) applyTheme() {
 	r.background.FillColor = r.buttonColor()
-	r.label.TextSize = theme.TextSize()
-	r.label.Color = theme.ForegroundColor()
+	r.label.Segments[0].(*TextSegment).Style.ColorName = theme.ColorNameForeground
 	switch {
 	case r.button.disabled:
-		r.label.Color = theme.DisabledColor()
+		r.label.Segments[0].(*TextSegment).Style.ColorName = theme.ColorNameDisabled
 	case r.button.Importance == HighImportance:
-		r.label.Color = theme.BackgroundColor()
+		r.label.Segments[0].(*TextSegment).Style.ColorName = theme.ColorNameBackground
 	}
+	r.label.Refresh()
 	if r.icon != nil && r.icon.Resource != nil {
 		switch res := r.icon.Resource.(type) {
 		case *theme.ThemedResource:

diff --git a/widget/button_internal_test.go b/widget/button_internal_test.go
@@ -6,6 +6,7 @@ import (
 	"testing"
 
 	"fyne.io/fyne/v2"
+	"fyne.io/fyne/v2/canvas"
 	"fyne.io/fyne/v2/internal/cache"
 	col "fyne.io/fyne/v2/internal/color"
 	"fyne.io/fyne/v2/internal/widget"
@@ -208,12 +209,13 @@ func TestButton_Shadow(t *testing.T) {
 func TestButtonRenderer_ApplyTheme(t *testing.T) {
 	button := &Button{}
 	render := test.WidgetRenderer(button).(*buttonRenderer)
+	textRender := test.WidgetRenderer(render.label).(*textRenderer)
 
-	textSize := render.label.TextSize
+	textSize := textRender.Objects()[0].(*canvas.Text).TextSize
 	customTextSize := textSize
 	test.WithTestTheme(t, func() {
-		render.applyTheme()
-		customTextSize = render.label.TextSize
+		button.Refresh()
+		customTextSize = textRender.Objects()[0].(*canvas.Text).TextSize
 	})
 
 	assert.NotEqual(t, textSize, customTextSize)

diff --git a/widget/button_test.go b/widget/button_test.go
@@ -190,6 +190,10 @@ func TestButton_Layout(t *testing.T) {
 			alignment: widget.ButtonAlignTrailing,
 			placement: widget.ButtonIconTrailingText,
 		},
+		"text_only_multiline": {
+			text:      "Test\nLine2",
+			alignment: widget.ButtonAlignCenter,
+		},
 		"icon_only_center_leading": {
 			icon:      theme.CancelIcon(),
 			alignment: widget.ButtonAlignCenter,

diff --git a/widget/testdata/accordion/layout_multiple_open_multiple_items.xml b/widget/testdata/accordion/layout_multiple_open_multiple_items.xml
@@ -5,13 +5,17 @@
 				<widget size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropDownIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,37" size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">B</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">B</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropDownIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,36" size="102x1" type="*widget.Separator">

diff --git a/widget/testdata/accordion/layout_multiple_open_multiple_items_opened.xml b/widget/testdata/accordion/layout_multiple_open_multiple_items_opened.xml
@@ -5,13 +5,17 @@
 				<widget size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropUpIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,78" size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">B</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">B</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropUpIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,40" size="102x36" type="*widget.Label">

diff --git a/widget/testdata/accordion/layout_multiple_open_one_item.xml b/widget/testdata/accordion/layout_multiple_open_one_item.xml
@@ -5,7 +5,9 @@
 				<widget size="59x36" type="*widget.Button">
 					<rectangle fillColor="button" size="59x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropDownIcon" size="20x20"/>
 				</widget>
 			</widget>

diff --git a/widget/testdata/accordion/layout_multiple_open_one_item_opened.xml b/widget/testdata/accordion/layout_multiple_open_one_item_opened.xml
@@ -5,7 +5,9 @@
 				<widget size="59x36" type="*widget.Button">
 					<rectangle fillColor="button" size="59x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropUpIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,40" size="59x36" type="*widget.Label">

diff --git a/widget/testdata/accordion/layout_single_open_multiple_items.xml b/widget/testdata/accordion/layout_single_open_multiple_items.xml
@@ -5,13 +5,17 @@
 				<widget size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropDownIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,37" size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">B</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">B</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropDownIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,36" size="102x1" type="*widget.Separator">

diff --git a/widget/testdata/accordion/layout_single_open_multiple_items_opened.xml b/widget/testdata/accordion/layout_single_open_multiple_items_opened.xml
@@ -5,13 +5,17 @@
 				<widget size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropDownIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,37" size="102x36" type="*widget.Button">
 					<rectangle fillColor="button" size="102x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">B</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">B</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropUpIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,78" size="102x36" type="*widget.Label">

diff --git a/widget/testdata/accordion/layout_single_open_one_item.xml b/widget/testdata/accordion/layout_single_open_one_item.xml
@@ -5,7 +5,9 @@
 				<widget size="59x36" type="*widget.Button">
 					<rectangle fillColor="button" size="59x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropDownIcon" size="20x20"/>
 				</widget>
 			</widget>

diff --git a/widget/testdata/accordion/layout_single_open_one_item_opened.xml b/widget/testdata/accordion/layout_single_open_one_item_opened.xml
@@ -5,7 +5,9 @@
 				<widget size="59x36" type="*widget.Button">
 					<rectangle fillColor="button" size="59x36"/>
 					<rectangle size="0x0"/>
-					<text bold pos="36,8" size="10x20">A</text>
+					<widget pos="36,8" size="10x20" type="*widget.RichText">
+						<text alignment="center" bold size="10x20">A</text>
+					</widget>
 					<image fillMode="contain" pos="12,8" rsc="menuDropUpIcon" size="20x20"/>
 				</widget>
 				<widget pos="0,40" size="59x36" type="*widget.Label">

diff --git a/widget/testdata/button/layout_text_icon_center_leading.xml b/widget/testdata/button/layout_text_icon_center_leading.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="67,85" size="31x20">Test</text>
+			<widget pos="67,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 			<image fillMode="contain" pos="43,85" rsc="cancelIcon" size="20x20"/>
 		</widget>
 	</content>

diff --git a/widget/testdata/button/layout_text_icon_center_trailing.xml b/widget/testdata/button/layout_text_icon_center_trailing.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="43,85" size="31x20">Test</text>
+			<widget pos="43,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 			<image fillMode="contain" pos="78,85" rsc="cancelIcon" size="20x20"/>
 		</widget>
 	</content>

diff --git a/widget/testdata/button/layout_text_icon_leading_leading.xml b/widget/testdata/button/layout_text_icon_leading_leading.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="36,85" size="31x20">Test</text>
+			<widget pos="36,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 			<image fillMode="contain" pos="12,85" rsc="cancelIcon" size="20x20"/>
 		</widget>
 	</content>

diff --git a/widget/testdata/button/layout_text_icon_leading_trailing.xml b/widget/testdata/button/layout_text_icon_leading_trailing.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="12,85" size="31x20">Test</text>
+			<widget pos="12,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 			<image fillMode="contain" pos="47,85" rsc="cancelIcon" size="20x20"/>
 		</widget>
 	</content>

diff --git a/widget/testdata/button/layout_text_icon_trailing_leading.xml b/widget/testdata/button/layout_text_icon_trailing_leading.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="98,85" size="31x20">Test</text>
+			<widget pos="98,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 			<image fillMode="contain" pos="74,85" rsc="cancelIcon" size="20x20"/>
 		</widget>
 	</content>

diff --git a/widget/testdata/button/layout_text_icon_trailing_trailing.xml b/widget/testdata/button/layout_text_icon_trailing_trailing.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="74,85" size="31x20">Test</text>
+			<widget pos="74,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 			<image fillMode="contain" pos="110,85" rsc="cancelIcon" size="20x20"/>
 		</widget>
 	</content>

diff --git a/widget/testdata/button/layout_text_only_center_leading.xml b/widget/testdata/button/layout_text_only_center_leading.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="55,85" size="31x20">Test</text>
+			<widget pos="55,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 		</widget>
 	</content>
 </canvas>
diff --git a/widget/testdata/button/layout_text_only_center_trailing.xml b/widget/testdata/button/layout_text_only_center_trailing.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="55,85" size="31x20">Test</text>
+			<widget pos="55,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 		</widget>
 	</content>
 </canvas>
diff --git a/widget/testdata/button/layout_text_only_leading_leading.xml b/widget/testdata/button/layout_text_only_leading_leading.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="12,85" size="31x20">Test</text>
+			<widget pos="12,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 		</widget>
 	</content>
 </canvas>
diff --git a/widget/testdata/button/layout_text_only_leading_trailing.xml b/widget/testdata/button/layout_text_only_leading_trailing.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="12,85" size="31x20">Test</text>
+			<widget pos="12,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 		</widget>
 	</content>
 </canvas>
diff --git a/widget/testdata/button/layout_text_only_multiline.xml b/widget/testdata/button/layout_text_only_multiline.xml
@@ -0,0 +1,22 @@
+<canvas padded size="150x200">
+	<content>
+		<widget pos="4,4" size="142x192" type="*widget.Button">
+			<widget pos="2,2" size="138x188" type="*widget.Shadow">
+				<radialGradient centerOffset="0.5,0.5" pos="-2,-2" size="2x2" startColor="shadow"/>
+				<linearGradient endColor="shadow" pos="0,-2" size="138x2"/>
+				<radialGradient centerOffset="-0.5,0.5" pos="138,-2" size="2x2" startColor="shadow"/>
+				<linearGradient angle="270" pos="138,0" size="2x188" startColor="shadow"/>
+				<radialGradient centerOffset="-0.5,-0.5" pos="138,188" size="2x2" startColor="shadow"/>
+				<linearGradient pos="0,188" size="138x2" startColor="shadow"/>
+				<radialGradient centerOffset="0.5,-0.5" pos="-2,188" size="2x2" startColor="shadow"/>
+				<linearGradient angle="270" endColor="shadow" pos="-2,0" size="2x188"/>
+			</widget>
+			<rectangle fillColor="button" pos="2,2" size="138x188"/>
+			<rectangle size="0x0"/>
+			<widget pos="50,75" size="40x41" type="*widget.RichText">
+				<text alignment="center" bold size="40x20">Test</text>
+				<text alignment="center" bold pos="0,20" size="40x20">Line2</text>
+			</widget>
+		</widget>
+	</content>
+</canvas>
diff --git a/widget/testdata/button/layout_text_only_trailing_leading.xml b/widget/testdata/button/layout_text_only_trailing_leading.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="98,85" size="31x20">Test</text>
+			<widget pos="98,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 		</widget>
 	</content>
 </canvas>
diff --git a/widget/testdata/button/layout_text_only_trailing_trailing.xml b/widget/testdata/button/layout_text_only_trailing_trailing.xml
@@ -13,7 +13,9 @@
 			</widget>
 			<rectangle fillColor="button" pos="2,2" size="138x188"/>
 			<rectangle size="0x0"/>
-			<text bold pos="98,85" size="31x20">Test</text>
+			<widget pos="98,85" size="31x20" type="*widget.RichText">
+				<text alignment="center" bold size="31x20">Test</text>
+			</widget>
 		</widget>
 	</content>
 </canvas>