diff --git a/flutter/lib/common.dart b/flutter/lib/common.dart index a12e0274c..49c74cadb 100644 --- a/flutter/lib/common.dart +++ b/flutter/lib/common.dart @@ -101,6 +101,7 @@ class ColorThemeExtension extends ThemeExtension { const ColorThemeExtension({ required this.border, required this.border2, + required this.border3, required this.highlight, required this.drag_indicator, required this.shadow, @@ -108,10 +109,12 @@ class ColorThemeExtension extends ThemeExtension { required this.me, required this.toastBg, required this.toastText, + required this.divider, }); final Color? border; final Color? border2; + final Color? border3; final Color? highlight; final Color? drag_indicator; final Color? shadow; @@ -119,10 +122,12 @@ class ColorThemeExtension extends ThemeExtension { final Color? me; final Color? toastBg; final Color? toastText; + final Color? divider; static final light = ColorThemeExtension( border: Color(0xFFCCCCCC), border2: Color(0xFFBBBBBB), + border3: Colors.black26, highlight: Color(0xFFE5E5E5), drag_indicator: Colors.grey[800], shadow: Colors.black, @@ -130,11 +135,13 @@ class ColorThemeExtension extends ThemeExtension { me: Colors.green, toastBg: Colors.black.withOpacity(0.6), toastText: Colors.white, + divider: Colors.black38, ); static final dark = ColorThemeExtension( border: Color(0xFF555555), border2: Color(0xFFE5E5E5), + border3: Colors.white24, highlight: Color(0xFF3F3F3F), drag_indicator: Colors.grey, shadow: Colors.grey, @@ -142,12 +149,14 @@ class ColorThemeExtension extends ThemeExtension { me: Colors.greenAccent, toastBg: Colors.white.withOpacity(0.6), toastText: Colors.black, + divider: Colors.white38, ); @override ThemeExtension copyWith({ Color? border, Color? border2, + Color? border3, Color? highlight, Color? drag_indicator, Color? shadow, @@ -155,10 +164,12 @@ class ColorThemeExtension extends ThemeExtension { Color? me, Color? toastBg, Color? toastText, + Color? divider, }) { return ColorThemeExtension( border: border ?? this.border, border2: border2 ?? this.border2, + border3: border3 ?? this.border3, highlight: highlight ?? this.highlight, drag_indicator: drag_indicator ?? this.drag_indicator, shadow: shadow ?? this.shadow, @@ -166,6 +177,7 @@ class ColorThemeExtension extends ThemeExtension { me: me ?? this.me, toastBg: toastBg ?? this.toastBg, toastText: toastText ?? this.toastText, + divider: divider ?? this.divider, ); } @@ -178,6 +190,7 @@ class ColorThemeExtension extends ThemeExtension { return ColorThemeExtension( border: Color.lerp(border, other.border, t), border2: Color.lerp(border2, other.border2, t), + border3: Color.lerp(border3, other.border3, t), highlight: Color.lerp(highlight, other.highlight, t), drag_indicator: Color.lerp(drag_indicator, other.drag_indicator, t), shadow: Color.lerp(shadow, other.shadow, t), @@ -185,6 +198,7 @@ class ColorThemeExtension extends ThemeExtension { me: Color.lerp(shadow, other.me, t), toastBg: Color.lerp(shadow, other.toastBg, t), toastText: Color.lerp(shadow, other.toastText, t), + divider: Color.lerp(shadow, other.divider, t), ); } } @@ -204,10 +218,6 @@ class MyTheme { static const Color dark = Colors.black87; static const Color button = Color(0xFF2C8CFF); static const Color hoverBorder = Color(0xFF999999); - static const Color bordDark = Colors.white24; - static const Color bordLight = Colors.black26; - static const Color dividerDark = Colors.white38; - static const Color dividerLight = Colors.black38; // ListTile static const ListTileThemeData listTileTheme = ListTileThemeData( @@ -394,6 +404,13 @@ class MyTheme { MenuStyle(backgroundColor: MaterialStatePropertyAll(Colors.white))), colorScheme: ColorScheme.light( primary: Colors.blue, secondary: accent, background: grayBg), + popupMenuTheme: PopupMenuThemeData( + color: Colors.white, + shape: RoundedRectangleBorder( + side: BorderSide( + color: isDesktop ? Color(0xFFECECEC) : Colors.transparent), + borderRadius: BorderRadius.all(Radius.circular(8.0)), + )), ).copyWith( extensions: >[ ColorThemeExtension.light, @@ -492,6 +509,11 @@ class MyTheme { secondary: accent, background: Color(0xFF24252B), ), + popupMenuTheme: PopupMenuThemeData( + shape: RoundedRectangleBorder( + side: BorderSide(color: Colors.white24), + borderRadius: BorderRadius.all(Radius.circular(8.0)), + )), ).copyWith( extensions: >[ ColorThemeExtension.dark, @@ -2022,7 +2044,7 @@ List? urlLinkToCmdArgs(Uri uri) { id = id + uri.path; } } - + var key = uri.queryParameters["key"]; if (id != null) { if (key != null) { diff --git a/flutter/lib/desktop/widgets/remote_toolbar.dart b/flutter/lib/desktop/widgets/remote_toolbar.dart index 08d89f51a..efb58075d 100644 --- a/flutter/lib/desktop/widgets/remote_toolbar.dart +++ b/flutter/lib/desktop/widgets/remote_toolbar.dart @@ -112,11 +112,6 @@ class _ToolbarTheme { static const double iconRadius = 8; static const double elevation = 3; - static const Color bordDark = MyTheme.bordDark; - static const Color bordLight = MyTheme.bordLight; - - static const Color dividerDark = MyTheme.dividerDark; - static const Color dividerLight = MyTheme.dividerLight; static double dividerSpaceToAction = Platform.isWindows ? 8 : 14; static double menuBorderRadius = Platform.isWindows ? 5.0 : 7.0; @@ -125,29 +120,34 @@ class _ToolbarTheme { : EdgeInsets.fromLTRB(6, 14, 6, 14); static const double menuButtonBorderRadius = 3.0; - static get borderColor => - MyTheme.currentThemeMode() == ThemeMode.light ? bordLight : bordDark; + static Color borderColor(BuildContext context) => + MyTheme.color(context).border3 ?? MyTheme.border; - static final defaultMenuStyle = MenuStyle( - side: MaterialStateProperty.all(BorderSide( - width: 1, - color: borderColor, - )), - shape: MaterialStatePropertyAll(RoundedRectangleBorder( - borderRadius: BorderRadius.circular(_ToolbarTheme.menuBorderRadius))), - padding: MaterialStateProperty.all(_ToolbarTheme.menuPadding), - ); + static Color? dividerColor(BuildContext context) => + MyTheme.color(context).divider; + + static MenuStyle defaultMenuStyle(BuildContext context) => MenuStyle( + side: MaterialStateProperty.all(BorderSide( + width: 1, + color: borderColor(context), + )), + shape: MaterialStatePropertyAll(RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(_ToolbarTheme.menuBorderRadius))), + padding: MaterialStateProperty.all(_ToolbarTheme.menuPadding), + ); static final defaultMenuButtonStyle = ButtonStyle( backgroundColor: MaterialStatePropertyAll(Colors.transparent), padding: MaterialStatePropertyAll(EdgeInsets.zero), overlayColor: MaterialStatePropertyAll(Colors.transparent), ); - static Widget borderWrapper(Widget child, BorderRadius borderRadius) { + static Widget borderWrapper( + BuildContext context, Widget child, BorderRadius borderRadius) { return Container( decoration: BoxDecoration( border: Border.all( - color: borderColor, + color: borderColor(context), width: 1, ), borderRadius: borderRadius, @@ -512,6 +512,7 @@ class _RemoteToolbarState extends State { child: Theme( data: themeData(), child: _ToolbarTheme.borderWrapper( + context, Row( children: [ SizedBox(width: _ToolbarTheme.buttonHMargin * 2), @@ -543,9 +544,7 @@ class _RemoteToolbarState extends State { ), dividerTheme: DividerThemeData( space: _ToolbarTheme.dividerSpaceToAction, - color: MyTheme.currentThemeMode() == ThemeMode.light - ? _ToolbarTheme.dividerLight - : _ToolbarTheme.dividerDark, + color: _ToolbarTheme.dividerColor(context), ), menuBarTheme: MenuBarThemeData( style: MenuStyle( @@ -2029,7 +2028,8 @@ class _IconSubmenuButtonState extends State<_IconSubmenuButton> { width: widget.width ?? _ToolbarTheme.buttonSize, height: _ToolbarTheme.buttonSize, child: SubmenuButton( - menuStyle: widget.menuStyle ?? _ToolbarTheme.defaultMenuStyle, + menuStyle: + widget.menuStyle ?? _ToolbarTheme.defaultMenuStyle(context), style: _ToolbarTheme.defaultMenuButtonStyle, onHover: (value) => setState(() { hover = value; @@ -2074,7 +2074,7 @@ class _SubmenuButton extends StatelessWidget { child: child, menuChildren: menuChildren.map((e) => _buildPointerTrackWidget(e, ffi)).toList(), - menuStyle: _ToolbarTheme.defaultMenuStyle, + menuStyle: _ToolbarTheme.defaultMenuStyle(context), ); } } @@ -2323,7 +2323,7 @@ class _DraggableShowHideState extends State<_DraggableShowHide> { ?.backgroundColor ?.resolve(MaterialState.values.toSet()), border: Border.all( - color: _ToolbarTheme.borderColor, + color: _ToolbarTheme.borderColor(context), width: 1, ), borderRadius: widget.borderRadius,