hongshaorou/rustdesk
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

tabbar theme

Browse Source 
Signed-off-by: 21pages <pages21@163.com>
This commit is contained in:
21pages 2022-08-09 22:35:29 +08:00
parent 0529e33434
commit f62f327883
3 changed files with 120 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
flutter/lib/desktop/pages/connection_tab_page.dart
View File

@ -9,7 +9,6 @@ import 'package:flutter_hbb/desktop/pages/remote_page.dart';
import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart'; import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
import 'package:flutter_hbb/utils/multi_window_manager.dart'; import 'package:flutter_hbb/utils/multi_window_manager.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:window_manager/window_manager.dart';
import '../../models/model.dart'; import '../../models/model.dart';
@ -89,6 +88,7 @@ class _ConnectionTabPageState extends State<ConnectionTabPage>
onTabClose: onRemoveId, onTabClose: onRemoveId,
tabIcon: Icons.desktop_windows_sharp, tabIcon: Icons.desktop_windows_sharp,
selected: _selected, selected: _selected,
dark: isDarkTheme(),
)), )),
Expanded( Expanded(
child: Obx(() => TabBarView( child: Obx(() => TabBarView(

2
flutter/lib/desktop/pages/file_manager_tab_page.dart
View File

@ -9,7 +9,6 @@ import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
import 'package:flutter_hbb/models/model.dart'; import 'package:flutter_hbb/models/model.dart';
import 'package:flutter_hbb/utils/multi_window_manager.dart'; import 'package:flutter_hbb/utils/multi_window_manager.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:window_manager/window_manager.dart';
/// File Transfer for multi tabs /// File Transfer for multi tabs
class FileManagerTabPage extends StatefulWidget { class FileManagerTabPage extends StatefulWidget {
@ -87,6 +86,7 @@ class _FileManagerTabPageState extends State<FileManagerTabPage>
onTabClose: onRemoveId, onTabClose: onRemoveId,
tabIcon: Icons.file_copy_sharp, tabIcon: Icons.file_copy_sharp,
selected: _selected, selected: _selected,
dark: isDarkTheme(),
), ),
), ),
Expanded( Expanded(

176
flutter/lib/desktop/widgets/tabbar_widget.dart
View File

@ -6,18 +6,6 @@ import 'package:flutter_hbb/consts.dart';
import 'package:flutter_hbb/utils/multi_window_manager.dart'; import 'package:flutter_hbb/utils/multi_window_manager.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
const Color _bgColor = Color.fromARGB(255, 231, 234, 237);
const Color _tabUnselectedColor = Color.fromARGB(255, 240, 240, 240);
const Color _tabHoverColor = Color.fromARGB(255, 245, 245, 245);
const Color _tabSelectedColor = Color.fromARGB(255, 255, 255, 255);
const Color _tabIconColor = MyTheme.accent50;
const Color _tabindicatorColor = _tabIconColor;
const Color _textColor = Color.fromARGB(255, 108, 111, 145);
const Color _iconColor = Color.fromARGB(255, 102, 106, 109);
const Color _iconHoverColor = Colors.black12;
const Color _iconPressedColor = Colors.black26;
const Color _dividerColor = Colors.black12;
const double _kTabBarHeight = kDesktopRemoteTabBarHeight; const double _kTabBarHeight = kDesktopRemoteTabBarHeight;
const double _kTabFixedWidth = 150; const double _kTabFixedWidth = 150;
const double _kIconSize = 18; const double _kIconSize = 18;
@ -30,6 +18,8 @@ class DesktopTabBar extends StatelessWidget {
late final Function(String) onTabClose; late final Function(String) onTabClose;
late final IconData tabIcon; late final IconData tabIcon;
late final Rx<int> selected; late final Rx<int> selected;
late final bool dark;
late final _Theme _theme;
DesktopTabBar( DesktopTabBar(
{Key? key, {Key? key,
@ -37,21 +27,23 @@ class DesktopTabBar extends StatelessWidget {
required this.tabs, required this.tabs,
required this.onTabClose, required this.onTabClose,
required this.tabIcon, required this.tabIcon,
required this.selected}) required this.selected,
: super(key: key); required this.dark})
: _theme = dark ? _Theme.dark() : _Theme.light(),
super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
color: _bgColor, color: _theme.bgColor,
height: _kTabBarHeight, height: _kTabBarHeight,
child: Row( child: Row(
children: [ children: [
Flexible( Flexible(
child: Obx(() => TabBar( child: Obx(() => TabBar(
indicatorColor: _tabindicatorColor, indicatorColor: _theme.tabindicatorColor,
indicatorSize: TabBarIndicatorSize.tab, indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 4, indicatorWeight: 1,
labelPadding: labelPadding:
const EdgeInsets.symmetric(vertical: 0, horizontal: 0), const EdgeInsets.symmetric(vertical: 0, horizontal: 0),
indicatorPadding: EdgeInsets.zero, indicatorPadding: EdgeInsets.zero,
@ -68,22 +60,26 @@ class DesktopTabBar extends StatelessWidget {
selected: selected.value, selected: selected.value,
onClose: () { onClose: () {
onTabClose(e.value); onTabClose(e.value);
// TODO
if (e.key <= selected.value) { if (e.key <= selected.value) {
selected.value = max(0, selected.value - 1); selected.value = max(0, selected.value - 1);
} }
controller.value.animateTo(selected.value); controller.value.animateTo(selected.value,
duration: Duration.zero);
}, },
onSelected: () { onSelected: () {
selected.value = e.key; selected.value = e.key;
controller.value.animateTo(e.key); controller.value
.animateTo(e.key, duration: Duration.zero);
}, },
theme: _theme,
)) ))
.toList())), .toList())),
), ),
Padding( Padding(
padding: EdgeInsets.only(left: 10), padding: EdgeInsets.only(left: 10),
child: _AddButton(), child: _AddButton(
theme: _theme,
),
), ),
], ],
), ),
@ -99,16 +95,18 @@ class _Tab extends StatelessWidget {
late final Function() onClose; late final Function() onClose;
late final Function() onSelected; late final Function() onSelected;
final RxBool _hover = false.obs; final RxBool _hover = false.obs;
late final _Theme theme;
_Tab({ _Tab(
Key? key, {Key? key,
required this.index, required this.index,
required this.text, required this.text,
required this.icon, required this.icon,
required this.selected, required this.selected,
required this.onClose, required this.onClose,
required this.onSelected, required this.onSelected,
}) : super(key: key); required this.theme})
: super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -122,10 +120,10 @@ class _Tab extends StatelessWidget {
width: _kTabFixedWidth, width: _kTabFixedWidth,
decoration: BoxDecoration( decoration: BoxDecoration(
color: is_selected color: is_selected
? _tabSelectedColor ? theme.tabSelectedColor
: _hover.value : _hover.value
? _tabHoverColor ? theme.tabHoverColor
: _tabUnselectedColor, : theme.tabUnselectedColor,
), ),
child: Row( child: Row(
children: [ children: [
@ -140,30 +138,36 @@ class _Tab extends StatelessWidget {
child: Icon( child: Icon(
icon, icon,
size: _kIconSize, size: _kIconSize,
color: _tabIconColor, color: theme.tabIconColor,
), ),
), ),
Expanded( Expanded(
child: Text( child: Text(
text, text,
style: const TextStyle(color: _textColor), style: TextStyle(
color: is_selected
? theme.selectedTextColor
: theme.unSelectedTextColor),
), ),
), ),
_CloseButton( _CloseButton(
tabHovered: _hover.value, tabHovered: _hover.value,
tabSelected: is_selected,
onClose: () => onClose(), onClose: () => onClose(),
theme: theme,
), ),
])), ])),
), ),
show_divider Offstage(
? VerticalDivider( offstage: !show_divider,
width: 1, child: VerticalDivider(
indent: _kDividerIndent, width: 1,
endIndent: _kDividerIndent, indent: _kDividerIndent,
color: _dividerColor, endIndent: _kDividerIndent,
thickness: 1, color: theme.dividerColor,
) thickness: 1,
: Container(), ),
)
], ],
), ),
), ),
@ -175,9 +179,11 @@ class _Tab extends StatelessWidget {
class _AddButton extends StatelessWidget { class _AddButton extends StatelessWidget {
final RxBool _hover = false.obs; final RxBool _hover = false.obs;
final RxBool _pressed = false.obs; final RxBool _pressed = false.obs;
late final _Theme theme;
_AddButton({ _AddButton({
Key? key, Key? key,
required this.theme,
}) : super(key: key); }) : super(key: key);
@override @override
@ -192,14 +198,14 @@ class _AddButton extends StatelessWidget {
decoration: ShapeDecoration( decoration: ShapeDecoration(
shape: const CircleBorder(), shape: const CircleBorder(),
color: _pressed.value color: _pressed.value
? _iconPressedColor ? theme.iconPressedBgColor
: _hover.value : _hover.value
? _iconHoverColor ? theme.iconHoverBgColor
: Colors.transparent, : Colors.transparent,
), ),
child: const Icon( child: Icon(
Icons.add_sharp, Icons.add_sharp,
color: _iconColor, color: theme.unSelectedIconColor,
size: _kAddIconSize, size: _kAddIconSize,
), ),
))), ))),
@ -209,14 +215,18 @@ class _AddButton extends StatelessWidget {
class _CloseButton extends StatelessWidget { class _CloseButton extends StatelessWidget {
final bool tabHovered; final bool tabHovered;
final bool tabSelected;
final Function onClose; final Function onClose;
final RxBool _hover = false.obs; final RxBool _hover = false.obs;
final RxBool _pressed = false.obs; final RxBool _pressed = false.obs;
late final _Theme theme;
_CloseButton({ _CloseButton({
Key? key, Key? key,
required this.tabHovered, required this.tabHovered,
required this.tabSelected,
required this.onClose, required this.onClose,
required this.theme,
}) : super(key: key); }) : super(key: key);
@override @override
@ -224,26 +234,28 @@ class _CloseButton extends StatelessWidget {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(horizontal: 5), padding: const EdgeInsets.symmetric(horizontal: 5),
child: SizedBox( child: SizedBox(
width: _kIconSize, width: _kIconSize,
child: tabHovered child: Offstage(
? Obx((() => _Hoverable( offstage: !tabHovered,
child: Obx((() => _Hoverable(
onHover: (hover) => _hover.value = hover, onHover: (hover) => _hover.value = hover,
onPressed: (pressed) => _pressed.value = pressed, onPressed: (pressed) => _pressed.value = pressed,
onTapUp: () => onClose(), onTapUp: () => onClose(),
child: Container( child: Container(
color: _pressed.value color: _pressed.value
? _iconPressedColor ? theme.iconPressedBgColor
: _hover.value : _hover.value
? _iconHoverColor ? theme.iconHoverBgColor
: Colors.transparent, : Colors.transparent,
child: const Icon( child: Icon(
Icons.close, Icons.close,
size: _kIconSize, size: _kIconSize,
color: _iconColor, color: tabSelected
? theme.selectedIconColor
: theme.unSelectedIconColor,
)), )),
))) ))),
: Container(), )));
));
} }
} }
@ -278,3 +290,51 @@ class _Hoverable extends StatelessWidget {
)); ));
} }
} }
class _Theme {
late Color bgColor;
late Color tabUnselectedColor;
late Color tabHoverColor;
late Color tabSelectedColor;
late Color tabIconColor;
late Color tabindicatorColor;
late Color selectedTextColor;
late Color unSelectedTextColor;
late Color selectedIconColor;
late Color unSelectedIconColor;
late Color iconHoverBgColor;
late Color iconPressedBgColor;
late Color dividerColor;
_Theme.light() {
bgColor = Color.fromARGB(255, 253, 253, 253);
tabUnselectedColor = Color.fromARGB(255, 253, 253, 253);
tabHoverColor = Color.fromARGB(255, 245, 245, 245);
tabSelectedColor = MyTheme.grayBg;
tabIconColor = MyTheme.accent50;
tabindicatorColor = MyTheme.grayBg;
selectedTextColor = Color.fromARGB(255, 26, 26, 26);
unSelectedTextColor = Color.fromARGB(255, 96, 96, 96);
selectedIconColor = Color.fromARGB(255, 26, 26, 26);
unSelectedIconColor = Color.fromARGB(255, 96, 96, 96);
iconHoverBgColor = Color.fromARGB(255, 224, 224, 224);
iconPressedBgColor = Color.fromARGB(255, 215, 215, 215);
dividerColor = Color.fromARGB(255, 238, 238, 238);
}
_Theme.dark() {
bgColor = Color.fromARGB(255, 50, 50, 50);
tabUnselectedColor = Color.fromARGB(255, 50, 50, 50);
tabHoverColor = Color.fromARGB(255, 59, 59, 59);
tabSelectedColor = MyTheme.canvasColor;
tabIconColor = Color.fromARGB(255, 84, 197, 248);
tabindicatorColor = MyTheme.canvasColor;
selectedTextColor = Color.fromARGB(255, 255, 255, 255);
unSelectedTextColor = Color.fromARGB(255, 207, 207, 207);
selectedIconColor = Color.fromARGB(255, 215, 215, 215);
unSelectedIconColor = Color.fromARGB(255, 255, 255, 255);
iconHoverBgColor = Color.fromARGB(255, 67, 67, 67);
iconPressedBgColor = Color.fromARGB(255, 73, 73, 73);
dividerColor = Color.fromARGB(255, 64, 64, 64);
}
}