fix: Fix presentation of color widgets

Yonomi · Apr 22, 2022 · 0cdc1c2 · 0cdc1c2
1 parent b0c9b22
commit 0cdc1c2
Show file tree

Hide file tree

Showing 8 changed files with 256 additions and 124 deletions.
diff --git a/lib/providers/color_provider.dart b/lib/providers/color_provider.dart
@@ -27,7 +27,7 @@ class ColorProvider extends DeviceProvider {
   String get displayName => deviceDetail?.displayName ?? _DEFAULT_DISPLAY_NAME;
 
   ColorTrait? get getColorTrait {
-    final color = ColorTrait(HSBColor(130, 50, 50));
+    final color = trait<ColorTrait>();
     if (color is ColorTrait) {
       return color;
     } else {

diff --git a/lib/traits/color_widget.dart b/lib/traits/color_widget.dart
@@ -86,6 +86,7 @@ class ColorWidget extends StatelessWidget {
                         SimpleDialog(backgroundColor: Colors.white, children: [
                           SlidePicker(
                             showParams: false,
+                            showSliderText: false,
                             pickerColor: pickedColor.toColor(),
                             enableAlpha: false,
                             onColorChanged: (color) {

diff --git a/lib/traits/detail_screen.dart b/lib/traits/detail_screen.dart
@@ -69,7 +69,8 @@ class DetailScreenWidget extends StatelessWidget {
         .withTraits(displayTraits.skip(1).toList())
         .build();
 
-    return Container(
-        alignment: Alignment.center, child: Center(child: deviceWidget));
+    return SingleChildScrollView(
+        child: Container(
+            alignment: Alignment.center, child: Center(child: deviceWidget)));
   }
 }
diff --git a/lib/traits/slim/base_slim_widget.dart b/lib/traits/slim/base_slim_widget.dart
@@ -28,7 +28,8 @@ class BaseSlimWidget extends StatelessWidget with ToastNotifications {
     if ((provider?.isLoading ?? false)) {
       return ListTile(
         tileColor: backgroundColor,
-        title: CircularProgressIndicator(),
+        title:
+            SizedBox(child: CircularProgressIndicator(), height: 20, width: 20),
         horizontalTitleGap: 16.0,
         key: key,
       );
@@ -37,7 +38,7 @@ class BaseSlimWidget extends StatelessWidget with ToastNotifications {
           context, provider?.getErrorMessage ?? 'An unknown error occurred');
       return ListTile(
         tileColor: backgroundColor,
-        title: Icon(Icons.error),
+        title: Icon(Icons.error, size: 20),
         horizontalTitleGap: 16.0,
         key: key,
       );
@@ -53,7 +54,7 @@ class BaseSlimWidget extends StatelessWidget with ToastNotifications {
     return ExpansionTile(
       childrenPadding: EdgeInsets.all(8.0),
       leading: (provider?.isPerformingAction ?? false)
-          ? CircularProgressIndicator()
+          ? SizedBox(child: CircularProgressIndicator(), height: 20, width: 20)
           : leftIcon,
       trailing: rightIcon,
       backgroundColor: backgroundColor,
@@ -70,7 +71,7 @@ class BaseSlimWidget extends StatelessWidget with ToastNotifications {
     return ListTile(
       tileColor: backgroundColor,
       leading: (provider?.isPerformingAction ?? false)
-          ? CircularProgressIndicator()
+          ? SizedBox(child: CircularProgressIndicator(), height: 20, width: 20)
           : leftIcon,
       trailing: rightIcon,
       title: headerText,

diff --git a/lib/traits/slim/color_slim_widget.dart b/lib/traits/slim/color_slim_widget.dart
@@ -1,7 +1,6 @@
 import 'package:bootstrap_icons/bootstrap_icons.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_colorpicker/flutter_colorpicker.dart';
-import 'package:yonomi_device_widgets/assets/traits/unknown_item_icon.dart';
 import 'package:yonomi_device_widgets/providers/color_provider.dart';
 import 'package:yonomi_device_widgets/traits/slim/base_slim_widget.dart';
 import 'package:yonomi_device_widgets/ui/widget_style_constants.dart';
@@ -10,13 +9,19 @@ import 'package:yonomi_platform_sdk/yonomi-sdk.dart';
 
 class ColorSlimWidget extends BaseSlimWidget {
   ColorSlimWidget(ColorProvider _colorTraitProvider,
-      {Key? key, Color backgroundColor = Colors.white70})
+      {Key? key,
+      Color backgroundColor = Colors.white70,
+      Color textColor = WidgetStyleConstants.darkTextColor})
       : super(
             key: key,
             backgroundColor: backgroundColor,
             provider: _colorTraitProvider,
-            leftIcon: Icon(BootstrapIcons.lightbulb, color: WidgetStyleConstants.deviceIconColor,),
-            headerText: Text('Color'),
+            leftIcon: Icon(
+              BootstrapIcons.lightbulb,
+              color: WidgetStyleConstants.deviceIconColor,
+            ),
+            headerText:
+                Text('Color', style: TextStyle(fontSize: 20, color: textColor)),
             rightIcon: Builder(builder: ((context) {
               return TextButton(
                   onPressed: () {
@@ -27,38 +32,47 @@ class ColorSlimWidget extends BaseSlimWidget {
                                 backgroundColor: Colors.white,
                                 children: [
                                   SlidePicker(
-                              pickerColor: _hsbToColor(pickedColor),
-                              onColorChanged: (color) {
-                                final calculatedColor =
-                                    HSVColor.fromColor(color);
-                                _colorTraitProvider.setColorAction(HSBColor(
-                                    calculatedColor.hue.toInt(),
-                                    (calculatedColor.saturation * 100).toInt(),
-                                    (calculatedColor.value * 100).toInt()));
-                              },
-                              colorModel: ColorModel.hsv,
+                                    showParams: false,
+                                    displayThumbColor: true,
+                                    showSliderText: false,
+                                    pickerColor: _hsbToColor(pickedColor),
+                                    enableAlpha: false,
+                                    onColorChanged: (color) {
+                                      final calculatedColor =
+                                          HSVColor.fromColor(color);
+                                      _colorTraitProvider.setColorAction(
+                                          HSBColor(
+                                              calculatedColor.hue.toInt(),
+                                              (calculatedColor.saturation * 100)
+                                                  .toInt(),
+                                              (calculatedColor.value * 100)
+                                                  .toInt()));
+                                    },
+                                    colorModel: ColorModel.hsv,
                                   )
                                 ]));
                   },
                   child: SizedBox(
                       child: SingleChildScrollView(
                         scrollDirection: Axis.horizontal,
                         child: Row(
+                          mainAxisAlignment: MainAxisAlignment.end,
                           children: [
                             CircleAvatar(
                               backgroundColor: _hsbToColor(
                                   _colorTraitProvider.getColorState),
                               radius: 14,
                             ),
+                            Padding(padding: EdgeInsets.all(4)),
                             Icon(
                               BootstrapIcons.pencil,
                               color: WidgetStyleConstants.globalSuccessColor,
-                              size: 14.0,
+                              size: 20.0,
                             )
                           ],
                         ),
                       ),
-                      width: 28,
+                      width: 60,
                       height: 28));
             })));
 

diff --git a/test/providers/color_provider_test.dart b/test/providers/color_provider_test.dart
@@ -45,6 +45,7 @@ void main() {
       expect(colorProvider.displayName, defaultColorDevice.displayName);
       expect(colorProvider.deviceDetail?.id, equals(deviceId));
       expect(colorProvider.getColorState, isA<GHSBColorValueInput>());
+      expect(colorProvider.getColorTrait, isA<ColorTrait>());
     });
 
     test('Calling setColorAction calls repository method', () async {

diff --git a/test/traits/detail_screen_test.dart b/test/traits/detail_screen_test.dart
@@ -14,6 +14,7 @@ import 'package:yonomi_device_widgets/providers/thermostat_provider.dart';
 import 'package:yonomi_device_widgets/providers/trait_detail_provider.dart';
 import 'package:yonomi_device_widgets/traits/battery_widget.dart';
 import 'package:yonomi_device_widgets/traits/brightness_widget.dart';
+import 'package:yonomi_device_widgets/traits/color_widget.dart';
 import 'package:yonomi_device_widgets/traits/detail_screen.dart';
 import 'package:yonomi_device_widgets/traits/lock_widget.dart';
 import 'package:yonomi_device_widgets/traits/power_widget.dart';
@@ -31,10 +32,9 @@ import 'package:yonomi_platform_sdk/yonomi-sdk.dart';
 import '../components/modes_toolbar_test.mocks.dart';
 import '../mixins/brightness_testing.dart';
 import '../mixins/brightness_testing.mocks.dart';
-import '../mixins/color_testing.dart';
-import '../mixins/color_testing.mocks.dart';
 import 'detail_screen_test.mocks.dart';
 import '../mixins/battery_testing.dart';
+import '../mixins/color_testing.dart';
 import '../mixins/device_testing.dart';
 import '../mixins/lock_testing.dart';
 import '../mixins/power_testing.dart';
@@ -251,6 +251,19 @@ void main() {
     expect(find.byType(BatteryWidget), findsOneWidget);
   });
 
+
+  testWidgets('For the Color Trait, Detail screen should show the Color Widget',
+      (WidgetTester tester) async {
+    final request = Request('', {});
+    await tester.pumpWidget(test.createDetailScreenWidgetForTraits([
+      TestColorDevice(test.device(id: testedDeviceId),
+          colorTrait: ColorTrait(HSBColor(0, 0, 0)))
+    ], request, testedDeviceId));
+
+    expect(find.byType(ColorWidget), findsOneWidget);
+  });
+
+
   testWidgets(
       'For the Thermostat Trait, Detail screen should show the target temperature',
       (WidgetTester tester) async {