From 12cdbaecbe15be2ca6cb1594e3adad6a58002b73 Mon Sep 17 00:00:00 2001 From: debuggerx Date: Tue, 12 Oct 2021 14:18:59 +0800 Subject: [PATCH] feat: add operation buttons and tooltip background. --- app/lib/models/scheme.dart | 4 ++ app/lib/pages/local_manager.dart | 112 ++++++++++++++++++++++++--------------- app/lib/themes/dark.dart | 19 +++++-- app/lib/themes/light.dart | 11 ++++ app/lib/widgets/dde_button.dart | 69 ++++++++++++++++++++++++ 5 files changed, 168 insertions(+), 47 deletions(-) diff --git a/app/lib/models/scheme.dart b/app/lib/models/scheme.dart index 2f4608c..22be9fb 100644 --- a/app/lib/models/scheme.dart +++ b/app/lib/models/scheme.dart @@ -7,6 +7,9 @@ import 'package:dde_gesture_manager/utils/helper.dart'; @ProviderModel(copyable: true) class Scheme { @ProviderModelProp() + String? id; + + @ProviderModelProp() String? name; @ProviderModelProp() @@ -18,6 +21,7 @@ class Scheme { Scheme.parse(scheme) { if (scheme is String) scheme = json.decode(scheme); assert(scheme is Map); + id = scheme['id']; name = scheme['name']; description = scheme['desc']; gestures = (scheme['gestures'] as List? ?? []).map((ele) => GestureProp.parse(ele)).toList(); diff --git a/app/lib/pages/local_manager.dart b/app/lib/pages/local_manager.dart index 037a032..8baf13c 100644 --- a/app/lib/pages/local_manager.dart +++ b/app/lib/pages/local_manager.dart @@ -21,11 +21,14 @@ class LocalManager extends StatefulWidget { class _LocalManagerState extends State { late ScrollController _scrollController; int? _hoveringIndex; - int? _selectedIndex; + late int _selectedIndex; @override void initState() { super.initState(); + + /// todo: load from sp + _selectedIndex = 0; _scrollController = ScrollController(); } @@ -83,54 +86,77 @@ class _LocalManagerState extends State { ], ), Flexible( - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Flexible( - child: ListView.builder( - controller: _scrollController, - itemBuilder: (context, index) => GestureDetector( - onDoubleTap: () { - context.read().copyFrom(localSchemes[index].scheme); - setState(() { - _selectedIndex = index; - }); - }, - onTap: () { - setState(() { - _selectedIndex = index; - }); - }, - child: MouseRegion( - cursor: SystemMouseCursors.click, - onEnter: (_) { - setState(() { - _hoveringIndex = index; - }); - }, - child: Container( - color: _getItemBackgroundColor(index), - child: Padding( - padding: const EdgeInsets.only(right: 12.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text(localSchemes[index].scheme.name ?? ''), - Text('456'), - ], + child: Padding( + padding: EdgeInsets.only(top: 5), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Flexible( + child: Container( + decoration: BoxDecoration( + border: Border.all( + width: .3, + color: context.t.dividerColor, + ), + borderRadius: BorderRadius.circular(defaultBorderRadius), + ), + child: Padding( + padding: EdgeInsets.symmetric(horizontal: 1, vertical: 2), + child: ListView.builder( + controller: _scrollController, + itemBuilder: (context, index) => GestureDetector( + onTap: () { + context.read().copyFrom(localSchemes[index].scheme); + setState(() { + _selectedIndex = index; + }); + }, + child: MouseRegion( + cursor: SystemMouseCursors.click, + onEnter: (_) { + setState(() { + _hoveringIndex = index; + }); + }, + child: Container( + color: _getItemBackgroundColor(index), + child: Padding( + padding: const EdgeInsets.only(left: 6, right: 12.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text(localSchemes[index].scheme.name ?? ''), + Text('456'), + ], + ), + ), + ), ), ), + itemCount: localSchemes.length, ), ), ), - itemCount: localSchemes.length, ), - ), - Container( - height: 150, - color: Colors.black, - ), - ], + Container(height: 5), + Container( + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + DButton.add(enabled: true), + DButton.delete(enabled: _selectedIndex > 0), + DButton.duplicate(enabled: _selectedIndex > 0), + DButton.apply(enabled: _selectedIndex > 0), + ] + .map((e) => Padding( + padding: const EdgeInsets.only(right: 4), + child: e, + )) + .toList(), + ), + ), + ], + ), ), ), ], diff --git a/app/lib/themes/dark.dart b/app/lib/themes/dark.dart index 5746339..1d3f280 100644 --- a/app/lib/themes/dark.dart +++ b/app/lib/themes/dark.dart @@ -18,9 +18,20 @@ var darkTheme = ThemeData.dark().copyWith( ), ), popupMenuTheme: ThemeData.dark().popupMenuTheme.copyWith( - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(defaultBorderRadius), - ), - ), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(defaultBorderRadius), + ), + ), dialogBackgroundColor: Color(0xff202020), + tooltipTheme: ThemeData.dark().tooltipTheme.copyWith( + textStyle: TextStyle( + color: Colors.grey, + ), + padding: EdgeInsets.symmetric(horizontal: 3, vertical: 2), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + color: Color(0xff282828).withOpacity(.9), + border: Border.all(color: Colors.black38), + ), + ), ); diff --git a/app/lib/themes/light.dart b/app/lib/themes/light.dart index ffeee59..fc0b49c 100644 --- a/app/lib/themes/light.dart +++ b/app/lib/themes/light.dart @@ -23,4 +23,15 @@ var lightTheme = ThemeData.light().copyWith( ), ), dialogBackgroundColor: Color(0xfffefefe), + tooltipTheme: ThemeData.dark().tooltipTheme.copyWith( + textStyle: TextStyle( + color: Colors.grey.shade600, + ), + padding: EdgeInsets.symmetric(horizontal: 3, vertical: 2), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(8), + color: Color(0xfff8f8f8).withOpacity(.9), + border: Border.all(color: Colors.grey.shade400), + ), + ), ); diff --git a/app/lib/widgets/dde_button.dart b/app/lib/widgets/dde_button.dart index 70b87b9..faabfc4 100644 --- a/app/lib/widgets/dde_button.dart +++ b/app/lib/widgets/dde_button.dart @@ -1,4 +1,5 @@ import 'package:dde_gesture_manager/constants/constants.dart'; +import 'package:dde_gesture_manager/extensions.dart'; import 'package:flutter/material.dart'; import 'package:glass_kit/glass_kit.dart'; @@ -16,6 +17,74 @@ class DButton extends StatefulWidget { this.onTap, }) : super(key: key); + factory DButton.add({ + Key? key, + required enabled, + GestureTapCallback? onTap, + height = defaultButtonHeight * .7, + width = defaultButtonHeight * .7, + }) => + DButton( + key: key, + width: width, + height: height, + onTap: onTap, + child: Tooltip( + child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.add, size: 18)), + message: LocaleKeys.operation_add.tr(), + )); + + factory DButton.delete({ + Key? key, + required enabled, + GestureTapCallback? onTap, + height = defaultButtonHeight * .7, + width = defaultButtonHeight * .7, + }) => + DButton( + key: key, + width: width, + height: height, + onTap: onTap, + child: Tooltip( + child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.remove, size: 18)), + message: LocaleKeys.operation_delete.tr(), + )); + + factory DButton.apply({ + Key? key, + required enabled, + GestureTapCallback? onTap, + height = defaultButtonHeight * .7, + width = defaultButtonHeight * .7, + }) => + DButton( + key: key, + width: width, + height: height, + onTap: onTap, + child: Tooltip( + child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.check, size: 18)), + message: LocaleKeys.operation_apply.tr(), + )); + + factory DButton.duplicate({ + Key? key, + required enabled, + GestureTapCallback? onTap, + height = defaultButtonHeight * .7, + width = defaultButtonHeight * .7, + }) => + DButton( + key: key, + width: width, + height: height, + onTap: onTap, + child: Tooltip( + child: Opacity(opacity: enabled ? 1 : 0.4, child: const Icon(Icons.copy_rounded, size: 18)), + message: LocaleKeys.operation_duplicate.tr(), + )); + @override State createState() => _DButtonState(); }