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

new cm tab style

Browse Source
This commit is contained in:
rustdesk 2023-07-08 17:55:55 +08:00
parent 94763e9fe0
commit 8c186edd18
2 changed files with 60 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
flutter/lib/desktop/pages/server_page.dart
View File

@ -150,10 +150,11 @@ class ConnectionManagerState extends State<ConnectionManager> {
showClose: true, showClose: true,
onWindowCloseButton: handleWindowCloseButton, onWindowCloseButton: handleWindowCloseButton,
controller: serverModel.tabController, controller: serverModel.tabController,
selectedBorderColor: MyTheme.accent,
maxLabelWidth: 100, maxLabelWidth: 100,
tail: buildScrollJumper(), tail: buildScrollJumper(),
selectedTabBackgroundColor: selectedTabBackgroundColor:
Theme.of(context).hintColor.withOpacity(0.2), Theme.of(context).hintColor.withOpacity(0),
tabBuilder: (key, icon, label, themeConf) { tabBuilder: (key, icon, label, themeConf) {
final client = serverModel.clients final client = serverModel.clients
.firstWhereOrNull((client) => client.id.toString() == key); .firstWhereOrNull((client) => client.id.toString() == key);

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

@ -225,6 +225,7 @@ class DesktopTab extends StatelessWidget {
final double? maxLabelWidth; final double? maxLabelWidth;
final Color? selectedTabBackgroundColor; final Color? selectedTabBackgroundColor;
final Color? unSelectedTabBackgroundColor; final Color? unSelectedTabBackgroundColor;
final Color? selectedBorderColor;
final DesktopTabController controller; final DesktopTabController controller;
@ -252,6 +253,7 @@ class DesktopTab extends StatelessWidget {
this.maxLabelWidth, this.maxLabelWidth,
this.selectedTabBackgroundColor, this.selectedTabBackgroundColor,
this.unSelectedTabBackgroundColor, this.unSelectedTabBackgroundColor,
this.selectedBorderColor,
}) : super(key: key) { }) : super(key: key) {
tabType = controller.tabType; tabType = controller.tabType;
isMainWindow = tabType == DesktopTabType.main || isMainWindow = tabType == DesktopTabType.main ||
@ -413,15 +415,17 @@ class DesktopTab extends StatelessWidget {
} }
}, },
child: _ListView( child: _ListView(
controller: controller, controller: controller,
tabBuilder: tabBuilder, tabBuilder: tabBuilder,
tabMenuBuilder: tabMenuBuilder, tabMenuBuilder: tabMenuBuilder,
labelGetter: labelGetter, labelGetter: labelGetter,
maxLabelWidth: maxLabelWidth, maxLabelWidth: maxLabelWidth,
selectedTabBackgroundColor: selectedTabBackgroundColor:
selectedTabBackgroundColor, selectedTabBackgroundColor,
unSelectedTabBackgroundColor: unSelectedTabBackgroundColor:
unSelectedTabBackgroundColor))), unSelectedTabBackgroundColor,
selectedBorderColor: selectedBorderColor,
))),
], ],
))), ))),
// hide simulated action buttons when we in compatible ui mode, because of reusing system title bar. // hide simulated action buttons when we in compatible ui mode, because of reusing system title bar.
@ -724,6 +728,7 @@ class _ListView extends StatelessWidget {
final LabelGetter? labelGetter; final LabelGetter? labelGetter;
final double? maxLabelWidth; final double? maxLabelWidth;
final Color? selectedTabBackgroundColor; final Color? selectedTabBackgroundColor;
final Color? selectedBorderColor;
final Color? unSelectedTabBackgroundColor; final Color? unSelectedTabBackgroundColor;
Rx<DesktopTabState> get state => controller.state; Rx<DesktopTabState> get state => controller.state;
@ -736,6 +741,7 @@ class _ListView extends StatelessWidget {
this.maxLabelWidth, this.maxLabelWidth,
this.selectedTabBackgroundColor, this.selectedTabBackgroundColor,
this.unSelectedTabBackgroundColor, this.unSelectedTabBackgroundColor,
this.selectedBorderColor,
}); });
/// Check whether to show ListView /// Check whether to show ListView
@ -788,6 +794,7 @@ class _ListView extends StatelessWidget {
selectedTabBackgroundColor: selectedTabBackgroundColor ?? selectedTabBackgroundColor: selectedTabBackgroundColor ??
MyTheme.tabbar(context).selectedTabBackgroundColor, MyTheme.tabbar(context).selectedTabBackgroundColor,
unSelectedTabBackgroundColor: unSelectedTabBackgroundColor, unSelectedTabBackgroundColor: unSelectedTabBackgroundColor,
selectedBorderColor: selectedBorderColor,
); );
}).toList())); }).toList()));
} }
@ -808,6 +815,7 @@ class _Tab extends StatefulWidget {
final double? maxLabelWidth; final double? maxLabelWidth;
final Color? selectedTabBackgroundColor; final Color? selectedTabBackgroundColor;
final Color? unSelectedTabBackgroundColor; final Color? unSelectedTabBackgroundColor;
final Color? selectedBorderColor;
const _Tab({ const _Tab({
Key? key, Key? key,
@ -825,6 +833,7 @@ class _Tab extends StatefulWidget {
this.maxLabelWidth, this.maxLabelWidth,
this.selectedTabBackgroundColor, this.selectedTabBackgroundColor,
this.unSelectedTabBackgroundColor, this.unSelectedTabBackgroundColor,
this.selectedBorderColor,
}) : super(key: key); }) : super(key: key);
@override @override
@ -915,35 +924,46 @@ class _TabState extends State<_Tab> with RestorationMixin {
}, },
onTap: () => widget.onTap(), onTap: () => widget.onTap(),
child: Container( child: Container(
color: isSelected decoration: isSelected && widget.selectedBorderColor != null
? widget.selectedTabBackgroundColor ? BoxDecoration(
: widget.unSelectedTabBackgroundColor, border: Border(
child: Row( bottom: BorderSide(
children: [ color: widget.selectedBorderColor!,
SizedBox( width: 1,
height: _kTabBarHeight, ),
child: Row( ),
crossAxisAlignment: CrossAxisAlignment.center, )
children: [ : null,
_buildTabContent(), child: Container(
Obx((() => _CloseButton( color: isSelected
visible: hover.value && widget.closable, ? widget.selectedTabBackgroundColor
tabSelected: isSelected, : widget.unSelectedTabBackgroundColor,
onClose: () => widget.onClose(), child: Row(
))) children: [
])).paddingOnly(left: 10, right: 5), SizedBox(
Offstage( height: _kTabBarHeight,
offstage: !showDivider, child: Row(
child: VerticalDivider( crossAxisAlignment: CrossAxisAlignment.center,
width: 1, children: [
indent: _kDividerIndent, _buildTabContent(),
endIndent: _kDividerIndent, Obx((() => _CloseButton(
color: MyTheme.tabbar(context).dividerColor, visible: hover.value && widget.closable,
), tabSelected: isSelected,
) onClose: () => widget.onClose(),
], )))
), ])).paddingOnly(left: 10, right: 5),
), Offstage(
offstage: !showDivider,
child: VerticalDivider(
width: 1,
indent: _kDividerIndent,
endIndent: _kDividerIndent,
color: MyTheme.tabbar(context).dividerColor,
),
)
],
),
)),
), ),
); );
} }