1berry/rustdesk
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

larger chat and moved to left

Browse Source
This commit is contained in:
NicKoehler 2023-05-19 23:21:13 +02:00
parent 3dbc3b9d6c
commit f106a116ab
No known key found for this signature in database
GPG Key ID: 0EC502B679A11DD1
3 changed files with 167 additions and 138 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
flutter/lib/common/widgets/chat_page.dart
View File

@ -1,7 +1,9 @@
import 'package:dash_chat_2/dash_chat_2.dart'; import 'package:dash_chat_2/dash_chat_2.dart';
import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hbb/common.dart'; import 'package:flutter_hbb/common.dart';
import 'package:flutter_hbb/models/chat_model.dart'; import 'package:flutter_hbb/models/chat_model.dart';
import 'package:get/get.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import '../../mobile/pages/home_page.dart'; import '../../mobile/pages/home_page.dart';
@ -43,12 +45,28 @@ class ChatPage extends StatelessWidget implements PageShape {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ChangeNotifierProvider.value( return ChangeNotifierProvider.value(
value: chatModel, value: chatModel,
child: Container( child: Container(
color: Theme.of(context).scaffoldBackgroundColor, color: Theme.of(context).scaffoldBackgroundColor,
child: Consumer<ChatModel>(builder: (context, chatModel, child) { padding: EdgeInsets.all(20.0),
final currentUser = chatModel.currentUser; child: Consumer<ChatModel>(
return Stack( builder: (context, chatModel, child) {
final currentUser = chatModel.currentUser;
return Container(
padding: EdgeInsets.symmetric(vertical: 5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Theme.of(context).colorScheme.background,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 1,
blurRadius: 1,
offset: Offset(0, 1.5), // changes position of shadow
),
],
),
child: Stack(
children: [ children: [
LayoutBuilder(builder: (context, constraints) { LayoutBuilder(builder: (context, constraints) {
final chat = DashChat( final chat = DashChat(
@ -61,40 +79,40 @@ class ChatPage extends StatelessWidget implements PageShape {
.messages[chatModel.currentID]?.chatMessages ?? .messages[chatModel.currentID]?.chatMessages ??
[], [],
inputOptions: InputOptions( inputOptions: InputOptions(
sendOnEnter: true, sendOnEnter: true,
focusNode: chatModel.inputNode, focusNode: chatModel.inputNode,
inputTextStyle: TextStyle( inputTextStyle: TextStyle(
fontSize: 14, fontSize: 14,
color: Theme.of(context) color:
.textTheme Theme.of(context).textTheme.titleLarge?.color),
.titleLarge inputDecoration: isDesktop
?.color), ? InputDecoration(
inputDecoration: isDesktop isDense: true,
? InputDecoration( hintText: translate('Write a message'),
isDense: true, filled: true,
hintText: fillColor:
"${translate('Write a message')}", Theme.of(context).colorScheme.background,
filled: true, contentPadding: EdgeInsets.all(10),
fillColor: border: OutlineInputBorder(
Theme.of(context).colorScheme.background, borderRadius: BorderRadius.circular(10.0),
contentPadding: EdgeInsets.all(10), borderSide: const BorderSide(
border: OutlineInputBorder( width: 1,
borderRadius: BorderRadius.circular(6), style: BorderStyle.solid,
borderSide: const BorderSide(
width: 0,
style: BorderStyle.none,
),
), ),
) ),
: defaultInputDecoration( )
hintText: : defaultInputDecoration(
"${translate('Write a message')}", hintText: translate('Write a message'),
fillColor: fillColor:
Theme.of(context).colorScheme.background), Theme.of(context).colorScheme.background,
sendButtonBuilder: defaultSendButton( ),
padding: EdgeInsets.symmetric( sendButtonBuilder: defaultSendButton(
horizontal: 6, vertical: 0), padding:
color: Theme.of(context).colorScheme.primary)), EdgeInsets.symmetric(horizontal: 6, vertical: 0),
color: Theme.of(context).colorScheme.primary,
icon: FluentIcons.send_24_filled,
),
),
messageOptions: MessageOptions( messageOptions: MessageOptions(
showOtherUsersAvatar: false, showOtherUsersAvatar: false,
textColor: Colors.white, textColor: Colors.white,
@ -104,32 +122,34 @@ class ChatPage extends StatelessWidget implements PageShape {
message.user.id == currentUser.id; message.user.id == currentUser.id;
return Column( return Column(
crossAxisAlignment: isOwnMessage crossAxisAlignment: isOwnMessage
? CrossAxisAlignment.end ? CrossAxisAlignment.start
: CrossAxisAlignment.start, : CrossAxisAlignment.end,
children: <Widget>[ children: <Widget>[
Text(message.text, Text(message.text,
style: TextStyle(color: Colors.white)), style: TextStyle(color: Colors.white)),
Padding( Text(
padding: const EdgeInsets.only(top: 5), "${message.createdAt.hour}:${message.createdAt.minute}",
child: Text( style: TextStyle(
"${message.createdAt.hour}:${message.createdAt.minute}", color: Colors.white,
style: TextStyle( fontSize: 8,
color: Colors.white,
fontSize: 10,
),
), ),
), ).marginOnly(top: 3),
], ],
); );
}, },
messageDecorationBuilder: (_, __, ___) => messageDecorationBuilder: (message, __, ___) {
defaultMessageDecoration( final isOwnMessage =
color: MyTheme.accent80, message.user.id == currentUser.id;
borderTopLeft: 8, return defaultMessageDecoration(
borderTopRight: 8, color: isOwnMessage
borderBottomRight: 8, ? Color.fromARGB(170, 71, 97, 129)
borderBottomLeft: 8, : MyTheme.accent80,
)), borderTopLeft: 8,
borderTopRight: 8,
borderBottomRight: isOwnMessage ? 8 : 2,
borderBottomLeft: isOwnMessage ? 2 : 8,
);
}),
); );
return SelectionArea(child: chat); return SelectionArea(child: chat);
}), }),
@ -148,9 +168,14 @@ class ChatPage extends StatelessWidget implements PageShape {
style: TextStyle(color: MyTheme.accent50), style: TextStyle(color: MyTheme.accent50),
), ),
], ],
)), ),
),
], ],
); ),
}))); );
},
),
),
);
} }
} }

4
flutter/lib/consts.dart
View File

@ -76,8 +76,8 @@ extension StringExtension on String {
String get nonBreaking => replaceAll(' ', String.fromCharCode($nbsp)); String get nonBreaking => replaceAll(' ', String.fromCharCode($nbsp));
} }
const Size kConnectionManagerWindowSizeClosedChat = Size(300, 500); const Size kConnectionManagerWindowSizeClosedChat = Size(300, 450);
const Size kConnectionManagerWindowSizeOpenChat = Size(600, 500); const Size kConnectionManagerWindowSizeOpenChat = Size(700, 450);
// Tabbar transition duration, now we remove the duration // Tabbar transition duration, now we remove the duration
const Duration kTabTransitionDuration = Duration.zero; const Duration kTabTransitionDuration = Duration.zero;
const double kEmptyMarginTop = 50; const double kEmptyMarginTop = 50;

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

@ -12,6 +12,7 @@ import 'package:get/get.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:window_manager/window_manager.dart'; import 'package:window_manager/window_manager.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import '../../common.dart'; import '../../common.dart';
import '../../common/widgets/chat_page.dart'; import '../../common/widgets/chat_page.dart';
@ -139,41 +140,45 @@ class ConnectionManagerState extends State<ConnectionManager> {
onPointerDown: pointerHandler, onPointerDown: pointerHandler,
onPointerMove: pointerHandler, onPointerMove: pointerHandler,
child: DesktopTab( child: DesktopTab(
showTitle: false, showTitle: false,
showMaximize: false, showMaximize: false,
showMinimize: true, showMinimize: true,
showClose: true, showClose: true,
onWindowCloseButton: handleWindowCloseButton, onWindowCloseButton: handleWindowCloseButton,
controller: serverModel.tabController, controller: serverModel.tabController,
maxLabelWidth: 100, maxLabelWidth: 100,
tail: buildScrollJumper(), tail: buildScrollJumper(),
selectedTabBackgroundColor: selectedTabBackgroundColor:
Theme.of(context).hintColor.withOpacity(0.2), Theme.of(context).hintColor.withOpacity(0.2),
tabBuilder: (key, icon, label, themeConf) { tabBuilder: (key, icon, label, themeConf) {
final client = serverModel.clients.firstWhereOrNull( final client = serverModel.clients
(client) => client.id.toString() == key); .firstWhereOrNull((client) => client.id.toString() == key);
return Row( return Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Tooltip( Tooltip(
message: key, message: key,
waitDuration: Duration(seconds: 1), waitDuration: Duration(seconds: 1),
child: label), child: label),
Obx(() => Offstage( Obx(() => Offstage(
offstage: offstage:
!(client?.hasUnreadChatMessage.value ?? false), !(client?.hasUnreadChatMessage.value ?? false),
child: child: Icon(Icons.circle, color: Colors.red, size: 10)))
Icon(Icons.circle, color: Colors.red, size: 10))) ],
], );
); },
}, pageViewBuilder: (pageView) => Row(
pageViewBuilder: (pageView) => Row(children: [ children: [
Expanded(child: pageView), Consumer<ChatModel>(
Consumer<ChatModel>( builder: (_, model, child) => model.isShowCMChatPage
builder: (_, model, child) => model.isShowCMChatPage ? Container(
? Expanded(child: Scaffold(body: ChatPage())) width: 400, child: Scaffold(body: ChatPage()))
: Offstage()) : Offstage()),
]))); Expanded(child: pageView),
],
),
),
);
} }
Widget buildTitleBar() { Widget buildTitleBar() {
@ -251,10 +256,11 @@ Widget buildConnectionCard(Client client) {
? Offstage() ? Offstage()
: _PrivilegeBoard(client: client), : _PrivilegeBoard(client: client),
Expanded( Expanded(
child: Align( child: Align(
alignment: Alignment.bottomCenter, alignment: Alignment.bottomCenter,
child: _CmControlPanel(client: client), child: _CmControlPanel(client: client),
)) ),
)
], ],
).paddingSymmetric(vertical: 8.0, horizontal: 8.0)); ).paddingSymmetric(vertical: 8.0, horizontal: 8.0));
} }
@ -341,7 +347,7 @@ class _CmHeaderState extends State<_CmHeader>
], ],
), ),
), ),
margin: EdgeInsets.all(5.0), margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),
padding: EdgeInsets.all(10), padding: EdgeInsets.all(10),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@ -416,7 +422,7 @@ class _CmHeaderState extends State<_CmHeader>
onPressed: () => checkClickTime( onPressed: () => checkClickTime(
client.id, () => gFFI.chatModel.toggleCMChatPage(client.id)), client.id, () => gFFI.chatModel.toggleCMChatPage(client.id)),
icon: Icon( icon: Icon(
Icons.message_rounded, FluentIcons.chat_32_filled,
color: Colors.white, color: Colors.white,
), ),
splashRadius: kDesktopIconButtonSplashRadius, splashRadius: kDesktopIconButtonSplashRadius,
@ -442,25 +448,14 @@ class _PrivilegeBoard extends StatefulWidget {
class _PrivilegeBoardState extends State<_PrivilegeBoard> { class _PrivilegeBoardState extends State<_PrivilegeBoard> {
late final client = widget.client; late final client = widget.client;
Widget buildPermissionTile(bool enabled, String assetPath, Widget buildPermissionTile(bool enabled, IconData iconData,
Function(bool)? onTap, String permissionText, String tooltipText) { Function(bool)? onTap, String permissionText, String tooltipText) {
return Row( return Row(
children: [ children: [
Tooltip( Tooltip(
message: tooltipText, message: tooltipText,
child: Container( child: Icon(
decoration: BoxDecoration( iconData,
color: MyTheme.accent,
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
child: SvgPicture.asset(
assetPath,
color: Colors.white,
width: 40.0,
height: 40.0,
),
).paddingOnly(left: 5.0, bottom: 5.0), ).paddingOnly(left: 5.0, bottom: 5.0),
).paddingOnly(right: 8.0), ).paddingOnly(right: 8.0),
SizedBox( SizedBox(
@ -514,7 +509,7 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
children: [ children: [
buildPermissionTile( buildPermissionTile(
client.keyboard, client.keyboard,
"assets/keyboard.svg", FluentIcons.keyboard_24_filled,
(enabled) { (enabled) {
bind.cmSwitchPermission( bind.cmSwitchPermission(
connId: client.id, name: "keyboard", enabled: enabled); connId: client.id, name: "keyboard", enabled: enabled);
@ -527,7 +522,7 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
), ),
buildPermissionTile( buildPermissionTile(
client.clipboard, client.clipboard,
"assets/clipboard.svg", FluentIcons.clipboard_24_filled,
(enabled) { (enabled) {
bind.cmSwitchPermission( bind.cmSwitchPermission(
connId: client.id, name: "clipboard", enabled: enabled); connId: client.id, name: "clipboard", enabled: enabled);
@ -540,7 +535,7 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
), ),
buildPermissionTile( buildPermissionTile(
client.audio, client.audio,
"assets/audio.svg", FluentIcons.speaker_1_24_filled,
(enabled) { (enabled) {
bind.cmSwitchPermission( bind.cmSwitchPermission(
connId: client.id, name: "audio", enabled: enabled); connId: client.id, name: "audio", enabled: enabled);
@ -553,7 +548,7 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
), ),
buildPermissionTile( buildPermissionTile(
client.file, client.file,
"assets/file.svg", FluentIcons.arrow_sort_24_filled,
(enabled) { (enabled) {
bind.cmSwitchPermission( bind.cmSwitchPermission(
connId: client.id, name: "file", enabled: enabled); connId: client.id, name: "file", enabled: enabled);
@ -566,7 +561,7 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
), ),
buildPermissionTile( buildPermissionTile(
client.restart, client.restart,
"assets/restart.svg", FluentIcons.arrow_clockwise_24_filled,
(enabled) { (enabled) {
bind.cmSwitchPermission( bind.cmSwitchPermission(
connId: client.id, name: "restart", enabled: enabled); connId: client.id, name: "restart", enabled: enabled);
@ -579,7 +574,7 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
), ),
buildPermissionTile( buildPermissionTile(
client.recording, client.recording,
"assets/rec.svg", FluentIcons.record_24_filled,
(enabled) { (enabled) {
bind.cmSwitchPermission( bind.cmSwitchPermission(
connId: client.id, name: "recording", enabled: enabled); connId: client.id, name: "recording", enabled: enabled);
@ -681,11 +676,17 @@ class _CmControlPanel extends StatelessWidget {
Row( Row(
children: [ children: [
Expanded( Expanded(
child: buildButton(context, child: buildButton(context,
color: Colors.redAccent, color: Colors.redAccent,
onClick: handleDisconnect, onClick: handleDisconnect,
text: 'Disconnect', text: 'Disconnect',
textColor: Colors.white)), icon: Icon(
FluentIcons.plug_disconnected_20_filled,
color: Colors.white,
size: 14,
),
textColor: Colors.white),
),
], ],
) )
], ],
@ -789,16 +790,19 @@ class _CmControlPanel extends StatelessWidget {
return Container( return Container(
height: 30, height: 30,
decoration: BoxDecoration( decoration: BoxDecoration(
color: color, borderRadius: BorderRadius.circular(4), border: border), color: color,
borderRadius: BorderRadius.circular(10.0),
border: border),
child: InkWell( child: InkWell(
onTap: () => checkClickTime(client.id, onClick), onTap: () => checkClickTime(client.id, onClick),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Offstage(offstage: icon == null, child: icon), Offstage(offstage: icon == null, child: icon).marginOnly(right: 5),
textWidget, textWidget,
], ],
)), ),
),
).marginAll(4); ).marginAll(4);
} }