Starting work on new theme. Update colours and sizes initially (fyne-…

…io#3163) Set button to not have a shadow and reduce cursor size to match input border Add new button types to make up for removing the transparent workaround It won't work soon anyhow as we will be supporting corner radius (probably) Add slider fix (min that really is min) fixes test randomness
lunarforge · Aug 2, 2022 · 6bf574b · 6bf574b
1 parent b4af8df
commit 6bf574b
Show file tree

Hide file tree

Showing 136 changed files with 330 additions and 540 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,10 +7,14 @@ More detailed release notes can be found on the [releases page](https://github.c
 
 ### Added
 
+* Shiny new theme that was designed for us
 * Add menu icon and submenu support to system tray menus
+* More button importance levels `ErrorImportance`, `WarningImportance`
 
 ### Changed
 
+* The buttons on the default theme are no longer transparent, but we added more button importance types
+
 ### Fixed
 
 

diff --git a/cmd/fyne/internal/templates/bundled.go b/cmd/fyne/internal/templates/bundled.go
diff --git a/cmd/fyne/internal/templates/data/dark.css b/cmd/fyne/internal/templates/data/dark.css
@@ -1,5 +1,5 @@
 body {
-    background-color: #303030;
+    background-color: #141415;
 }
 .application-name {
     color: white;
@@ -14,4 +14,4 @@ body {
 }
 .action-error {
     color: red;
-}
+}
diff --git a/cmd/fyne/internal/templates/data/light.css b/cmd/fyne/internal/templates/data/light.css
@@ -14,4 +14,4 @@ body {
 }
 .action-error {
     color: red;
-}
+}
diff --git a/cmd/fyne/internal/templates/data/spinner_dark.gif b/cmd/fyne/internal/templates/data/spinner_dark.gif
diff --git a/cmd/fyne_demo/tutorials/widget.go b/cmd/fyne_demo/tutorials/widget.go
@@ -67,7 +67,7 @@ func makeButtonTab(_ fyne.Window) fyne.CanvasObject {
 		shareItem,
 	))
 
-	return container.NewVBox(
+	return container.NewVScroll(container.NewVBox(
 		widget.NewButton("Button (text only)", func() { fmt.Println("tapped text button") }),
 		widget.NewButtonWithIcon("Button (text & leading icon)", theme.ConfirmIcon(), func() { fmt.Println("tapped text & leading icon button") }),
 		&widget.Button{
@@ -83,11 +83,26 @@ func makeButtonTab(_ fyne.Window) fyne.CanvasObject {
 			OnTapped:      func() { fmt.Println("tapped trailing-aligned, text & trailing icon button") },
 		},
 		disabled,
+		&widget.Button{
+			Text:       "Primary button",
+			Importance: widget.HighImportance,
+			OnTapped:   func() { fmt.Println("high importance button") },
+		},
+		&widget.Button{
+			Text:       "Danger button",
+			Importance: widget.DangerImportance,
+			OnTapped:   func() { fmt.Println("tapped danger button") },
+		},
+		&widget.Button{
+			Text:       "Warning button",
+			Importance: widget.WarningImportance,
+			OnTapped:   func() { fmt.Println("tapped warning button") },
+		},
 		layout.NewSpacer(),
 		layout.NewSpacer(),
 		menuLabel,
 		layout.NewSpacer(),
-	)
+	))
 }
 
 func makeCardTab(_ fyne.Window) fyne.CanvasObject {

diff --git a/container/testdata/apptabs/desktop/tapped_overflow_tabs.xml b/container/testdata/apptabs/desktop/tapped_overflow_tabs.xml
@@ -12,7 +12,7 @@
 				</container>
 				<widget pos="164,0" size="36x36" type="*widget.Button">
 					<rectangle size="36x36"/>
-					<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="32x32"/>
+					<rectangle fillColor="rgba(0,0,0,0)" size="32x36"/>
 					<image fillMode="contain" pos="8,8" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
 				</widget>
 			</container>

diff --git a/container/testdata/apptabs/mobile/hover_none.xml b/container/testdata/apptabs/mobile/hover_none.xml
@@ -1,20 +1,20 @@
 <canvas size="150x150">
 	<content>
 		<widget size="150x150" type="*container.AppTabs">
-			<container size="150x36">
-				<container size="150x36">
-					<widget size="73x37" type="*container.tabButton">
-						<text alignment="center" bold color="primary" pos="4,8" size="65x20">Test1</text>
+			<container size="150x43">
+				<container size="150x43">
+					<widget size="72x43" type="*container.tabButton">
+						<text alignment="center" bold color="primary" pos="6,12" size="60x19">Test1</text>
 					</widget>
-					<widget pos="77,0" size="73x37" type="*container.tabButton">
-						<text alignment="center" bold pos="4,8" size="65x20">Test2</text>
+					<widget pos="78,0" size="72x43" type="*container.tabButton">
+						<text alignment="center" bold pos="6,12" size="60x19">Test2</text>
 					</widget>
 				</container>
 			</container>
-			<rectangle fillColor="shadow" pos="0,36" size="150x4"/>
-			<rectangle fillColor="primary" pos="0,36" size="73x4"/>
-			<widget pos="0,40" size="150x109" type="*widget.Label">
-				<text pos="8,8" size="134x20">Text1</text>
+			<rectangle fillColor="shadow" pos="0,43" size="150x6"/>
+			<rectangle fillColor="primary" pos="0,43" size="72x6"/>
+			<widget pos="0,49" size="150x100" type="*widget.Label">
+				<text pos="12,12" size="126x19">Text1</text>
 			</widget>
 		</widget>
 	</content>

diff --git a/container/testdata/doctabs/desktop/tapped_all_tabs.xml b/container/testdata/doctabs/desktop/tapped_all_tabs.xml
@@ -29,12 +29,12 @@
 				<container pos="224,0" size="76x36">
 					<widget size="36x36" type="*widget.Button">
 						<rectangle size="36x36"/>
-						<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="32x32"/>
+						<rectangle fillColor="rgba(0,0,0,0)" size="32x36"/>
 						<image fillMode="contain" pos="8,8" rsc="contentAddIcon" size="iconInlineSize"/>
 					</widget>
 					<widget pos="40,0" size="36x36" type="*widget.Button">
 						<rectangle size="36x36"/>
-						<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="32x32"/>
+						<rectangle fillColor="rgba(0,0,0,0)" size="32x36"/>
 						<image fillMode="contain" pos="8,8" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
 					</widget>
 				</container>

diff --git a/container/testdata/doctabs/desktop/tapped_create_tab.xml b/container/testdata/doctabs/desktop/tapped_create_tab.xml
@@ -29,7 +29,7 @@
 				<container pos="224,0" size="76x36">
 					<widget size="36x36" type="*widget.Button">
 						<rectangle size="36x36"/>
-						<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="32x32"/>
+						<rectangle fillColor="rgba(0,0,0,0)" size="32x36"/>
 						<image fillMode="contain" pos="8,8" rsc="contentAddIcon" size="iconInlineSize"/>
 					</widget>
 					<widget pos="40,0" size="36x36" type="*widget.Button">

diff --git a/container/testdata/doctabs/mobile/hover_none.xml b/container/testdata/doctabs/mobile/hover_none.xml
@@ -1,43 +1,43 @@
 <canvas size="150x150">
 	<content>
 		<widget size="150x150" type="*container.DocTabs">
-			<container size="150x36">
-				<widget size="110x36" type="*widget.Scroll">
-					<container size="149x36">
-						<widget size="73x37" type="*container.tabButton">
-							<text bold color="primary" pos="4,8" size="65x20">Test1</text>
-							<widget pos="49,8" size="20x20" type="*container.tabCloseButton">
+			<container size="150x44">
+				<widget size="100x44" type="*widget.Scroll">
+					<container size="162x44">
+						<widget size="78x44" type="*container.tabButton">
+							<text bold color="primary" pos="6,12" size="66x19">Test1</text>
+							<widget pos="52,12" size="20x20" type="*container.tabCloseButton">
 								<image rsc="cancelIcon" size="iconInlineSize" themed="primary"/>
 							</widget>
 						</widget>
-						<widget pos="77,0" size="72x37" type="*container.tabButton">
-							<text bold pos="4,8" size="64x20">Test2</text>
-							<widget pos="48,8" size="20x20" type="*container.tabCloseButton">
+						<widget pos="84,0" size="78x44" type="*container.tabButton">
+							<text bold pos="6,12" size="66x19">Test2</text>
+							<widget pos="52,12" size="20x20" type="*container.tabCloseButton">
 								<image rsc="cancelIcon" size="iconInlineSize"/>
 							</widget>
 						</widget>
 					</container>
-					<widget pos="0,30" size="110x6" type="*widget.scrollBarArea">
-						<widget pos="0,3" size="81x3" type="*widget.scrollBar">
-							<rectangle fillColor="scrollbar" size="81x3"/>
+					<widget pos="0,38" size="100x6" type="*widget.scrollBarArea">
+						<widget pos="0,3" size="61x3" type="*widget.scrollBar">
+							<rectangle fillColor="scrollbar" size="61x3"/>
 						</widget>
 					</widget>
-					<widget pos="110,0" size="0x36" type="*widget.Shadow">
-						<linearGradient angle="270" endColor="shadow" pos="-8,0" size="8x36"/>
+					<widget pos="100,0" size="0x44" type="*widget.Shadow">
+						<linearGradient angle="270" endColor="shadow" pos="-8,0" size="8x44"/>
 					</widget>
 				</widget>
-				<container pos="114,0" size="36x36">
-					<widget size="36x36" type="*widget.Button">
-						<rectangle size="36x36"/>
+				<container pos="106,0" size="44x44">
+					<widget size="44x44" type="*widget.Button">
+						<rectangle size="44x44"/>
 						<rectangle size="0x0"/>
-						<image fillMode="contain" pos="8,8" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
+						<image fillMode="contain" pos="12,12" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
 					</widget>
 				</container>
 			</container>
-			<rectangle fillColor="shadow" pos="0,36" size="150x4"/>
-			<rectangle fillColor="primary" pos="0,36" size="73x4"/>
-			<widget pos="0,40" size="150x109" type="*widget.Label">
-				<text pos="8,8" size="134x20">Text1</text>
+			<rectangle fillColor="shadow" pos="0,44" size="150x6"/>
+			<rectangle fillColor="primary" pos="0,44" size="78x6"/>
+			<widget pos="0,50" size="150x100" type="*widget.Label">
+				<text pos="12,12" size="126x19">Text1</text>
 			</widget>
 		</widget>
 	</content>

diff --git a/container/testdata/doctabs/mobile/tapped_all_tabs.xml b/container/testdata/doctabs/mobile/tapped_all_tabs.xml
@@ -41,12 +41,12 @@
 				<container pos="224,0" size="76x36">
 					<widget size="36x36" type="*widget.Button">
 						<rectangle size="36x36"/>
-						<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="32x32"/>
+						<rectangle fillColor="rgba(0,0,0,0)" size="32x36"/>
 						<image fillMode="contain" pos="8,8" rsc="contentAddIcon" size="iconInlineSize"/>
 					</widget>
 					<widget pos="40,0" size="36x36" type="*widget.Button">
 						<rectangle size="36x36"/>
-						<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="32x32"/>
+						<rectangle fillColor="rgba(0,0,0,0)" size="32x36"/>
 						<image fillMode="contain" pos="8,8" rsc="more-horizontal.svg" size="iconInlineSize" themed="default"/>
 					</widget>
 				</container>

diff --git a/container/testdata/doctabs/mobile/tapped_create_tab.xml b/container/testdata/doctabs/mobile/tapped_create_tab.xml
@@ -41,7 +41,7 @@
 				<container pos="224,0" size="76x36">
 					<widget size="36x36" type="*widget.Button">
 						<rectangle size="36x36"/>
-						<rectangle fillColor="rgba(0,0,0,0)" pos="0,2" size="32x32"/>
+						<rectangle fillColor="rgba(0,0,0,0)" size="32x36"/>
 						<image fillMode="contain" pos="8,8" rsc="contentAddIcon" size="iconInlineSize"/>
 					</widget>
 					<widget pos="40,0" size="36x36" type="*widget.Button">

diff --git a/dialog/testdata/color/channel_layout_foobar_0.png b/dialog/testdata/color/channel_layout_foobar_0.png
diff --git a/dialog/testdata/color/channel_layout_foobar_100.png b/dialog/testdata/color/channel_layout_foobar_100.png
diff --git a/dialog/testdata/color/channel_layout_foobar_50.png b/dialog/testdata/color/channel_layout_foobar_50.png
diff --git a/dialog/testdata/color/dialog_expanded_theme_default.png b/dialog/testdata/color/dialog_expanded_theme_default.png
diff --git a/dialog/testdata/color/dialog_expanded_theme_ugly.png b/dialog/testdata/color/dialog_expanded_theme_ugly.png
diff --git a/dialog/testdata/color/dialog_recents_theme_default.png b/dialog/testdata/color/dialog_recents_theme_default.png
diff --git a/dialog/testdata/color/dialog_recents_theme_ugly.png b/dialog/testdata/color/dialog_recents_theme_ugly.png
diff --git a/dialog/testdata/color/dialog_simple_recents_theme_default.png b/dialog/testdata/color/dialog_simple_recents_theme_default.png
diff --git a/dialog/testdata/color/dialog_simple_recents_theme_ugly.png b/dialog/testdata/color/dialog_simple_recents_theme_ugly.png
diff --git a/dialog/testdata/color/dialog_simple_theme_default.png b/dialog/testdata/color/dialog_simple_theme_default.png
diff --git a/dialog/testdata/color/dialog_simple_theme_ugly.png b/dialog/testdata/color/dialog_simple_theme_ugly.png
diff --git a/dialog/testdata/color/dialog_theme_default.png b/dialog/testdata/color/dialog_theme_default.png
diff --git a/dialog/testdata/color/dialog_theme_ugly.png b/dialog/testdata/color/dialog_theme_ugly.png
diff --git a/dialog/testdata/color/picker_layout_advanced.png b/dialog/testdata/color/picker_layout_advanced.png
diff --git a/dialog/testdata/color/picker_layout_basic.png b/dialog/testdata/color/picker_layout_basic.png
diff --git a/dialog/testdata/dialog-custom-default.png b/dialog/testdata/dialog-custom-default.png
diff --git a/dialog/testdata/dialog-custom-ugly.png b/dialog/testdata/dialog-custom-ugly.png
diff --git a/dialog/testdata/dialog-onshow-theme-changed.png b/dialog/testdata/dialog-onshow-theme-changed.png
diff --git a/dialog/testdata/dialog-onshow-theme-default.png b/dialog/testdata/dialog-onshow-theme-default.png
diff --git a/driver/software/testdata/button.png b/driver/software/testdata/button.png
diff --git a/driver/software/testdata/button_important.png b/driver/software/testdata/button_important.png
diff --git a/driver/software/testdata/canvas.png b/driver/software/testdata/canvas.png
diff --git a/driver/software/testdata/canvas_mobile.png b/driver/software/testdata/canvas_mobile.png
diff --git a/driver/software/testdata/entry.png b/driver/software/testdata/entry.png
diff --git a/driver/software/testdata/entry_focus.png b/driver/software/testdata/entry_focus.png
diff --git a/driver/software/testdata/label_dark.png b/driver/software/testdata/label_dark.png
diff --git a/driver/software/testdata/label_light.png b/driver/software/testdata/label_light.png
diff --git a/internal/driver/glfw/driver_test.go b/internal/driver/glfw/driver_test.go
@@ -69,18 +69,18 @@ func Test_gLDriver_AbsolutePositionForObject(t *testing.T) {
 	}{
 		"a cell": {
 			object: cr1c3,
-			wantX:  197,
-			wantY:  32,
+			wantX:  208,
+			wantY:  37,
 		},
 		"a row": {
 			object: cr2,
-			wantX:  4,
-			wantY:  73,
+			wantX:  6,
+			wantY:  86,
 		},
 		"the window content": {
 			object: content,
-			wantX:  4,
-			wantY:  32,
+			wantX:  6,
+			wantY:  37,
 		},
 		"a hidden element": {
 			object: cr2c2,
@@ -90,19 +90,19 @@ func Test_gLDriver_AbsolutePositionForObject(t *testing.T) {
 
 		"a menu": {
 			object: m2,
-			wantX:  77,
+			wantX:  85,
 			wantY:  0,
 		},
 
 		"an overlay item": {
 			object: ovli2,
-			wantX:  87,
-			wantY:  81,
+			wantX:  94,
+			wantY:  77,
 		},
 		"the overlay content": {
 			object: ovlContent,
-			wantX:  87,
-			wantY:  40,
+			wantX:  94,
+			wantY:  28,
 		},
 		"the overlay": {
 			object: ovl,

diff --git a/internal/driver/glfw/testdata/windows_hover_object.xml b/internal/driver/glfw/testdata/windows_hover_object.xml
@@ -1,36 +1,36 @@
 <canvas size="200x300">
 	<content>
-		<widget pos="4,4" size="192x292" type="*widget.List">
-			<widget size="192x292" type="*widget.Scroll">
-				<container size="192x292">
-					<widget size="192x36" type="*widget.listItem">
-						<widget size="192x36" type="*widget.Entry">
-							<rectangle fillColor="rgba(255,255,255,25)" pos="0,2" size="192x32"/>
-							<rectangle fillColor="shadow" pos="0,34" size="192x2"/>
-							<widget pos="0,2" size="192x32" type="*widget.Scroll">
-								<widget size="192x32" type="*widget.entryContent">
-									<widget size="192x32" type="*widget.RichText">
-										<text color="placeholder" pos="8,6" size="176x20"></text>
+		<widget pos="6,6" size="188x288" type="*widget.List">
+			<widget size="188x288" type="*widget.Scroll">
+				<container size="188x288">
+					<widget size="188x43" type="*widget.listItem">
+						<rectangle fillColor="hover" size="188x43"/>
+						<widget size="188x43" type="*widget.Entry">
+							<rectangle fillColor="button" pos="0,1" size="188x41"/>
+							<rectangle fillColor="shadow" pos="0,42" size="188x1"/>
+							<widget pos="0,1" size="188x41" type="*widget.Scroll">
+								<widget size="188x41" type="*widget.entryContent">
+									<widget size="188x41" type="*widget.RichText">
+										<text color="placeholder" pos="12,11" size="164x19"></text>
 									</widget>
-									<widget size="192x32" type="*widget.RichText">
-										<text pos="8,6" size="176x20"></text>
+									<widget size="188x41" type="*widget.RichText">
+										<text pos="12,11" size="164x19"></text>
 									</widget>
 								</widget>
 							</widget>
 						</widget>
 					</widget>
-					<widget pos="0,37" size="192x36" type="*widget.listItem">
-						<rectangle fillColor="hover" size="192x36"/>
-						<widget size="192x36" type="*widget.Entry">
-							<rectangle fillColor="rgba(255,255,255,25)" pos="0,2" size="192x32"/>
-							<rectangle fillColor="shadow" pos="0,34" size="192x2"/>
-							<widget pos="0,2" size="192x32" type="*widget.Scroll">
-								<widget size="192x32" type="*widget.entryContent">
-									<widget size="192x32" type="*widget.RichText">
-										<text color="placeholder" pos="8,6" size="176x20"></text>
+					<widget pos="0,44" size="188x43" type="*widget.listItem">
+						<widget size="188x43" type="*widget.Entry">
+							<rectangle fillColor="button" pos="0,1" size="188x41"/>
+							<rectangle fillColor="shadow" pos="0,42" size="188x1"/>
+							<widget pos="0,1" size="188x41" type="*widget.Scroll">
+								<widget size="188x41" type="*widget.entryContent">
+									<widget size="188x41" type="*widget.RichText">
+										<text color="placeholder" pos="12,11" size="164x19"></text>
 									</widget>
-									<widget size="192x32" type="*widget.RichText">
-										<text pos="8,6" size="176x20"></text>
+									<widget size="188x41" type="*widget.RichText">
+										<text pos="12,11" size="164x19"></text>
 									</widget>
 								</widget>
 							</widget>
@@ -39,8 +39,8 @@
 					<widget size="0x0" type="*widget.Separator">
 						<rectangle fillColor="disabled" size="0x0"/>
 					</widget>
-					<widget pos="0,36" size="192x1" type="*widget.Separator">
-						<rectangle fillColor="disabled" size="192x1"/>
+					<widget pos="0,43" size="188x1" type="*widget.Separator">
+						<rectangle fillColor="disabled" size="188x1"/>
 					</widget>
 				</container>
 			</widget>
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,4 +14,4 @@ body { @@
     }
     .action-error {
         color: red;
-    }
+    }