switched to grid layout

This commit is contained in:
NicKoehler 2023-05-20 15:12:52 +02:00
parent f106a116ab
commit 11fc56ab2c
No known key found for this signature in database
GPG Key ID: 0EC502B679A11DD1
6 changed files with 229 additions and 193 deletions

View File

@ -183,6 +183,8 @@ class MyTheme {
), ),
); );
static const SwitchThemeData switchTheme = SwitchThemeData(splashRadius: 0);
// Checkbox // Checkbox
static const CheckboxThemeData checkboxTheme = CheckboxThemeData( static const CheckboxThemeData checkboxTheme = CheckboxThemeData(
splashRadius: 0, splashRadius: 0,
@ -307,6 +309,7 @@ class MyTheme {
), ),
), ),
), ),
switchTheme: switchTheme,
checkboxTheme: checkboxTheme, checkboxTheme: checkboxTheme,
listTileTheme: listTileTheme, listTileTheme: listTileTheme,
menuBarTheme: MenuBarThemeData( menuBarTheme: MenuBarThemeData(
@ -346,12 +349,16 @@ class MyTheme {
) )
: null, : null,
textTheme: const TextTheme( textTheme: const TextTheme(
titleLarge: TextStyle(fontSize: 19), titleLarge: TextStyle(fontSize: 19),
titleSmall: TextStyle(fontSize: 14), titleSmall: TextStyle(fontSize: 14),
bodySmall: TextStyle(fontSize: 12, height: 1.25), bodySmall: TextStyle(fontSize: 12, height: 1.25),
bodyMedium: TextStyle(fontSize: 14, height: 1.25), bodyMedium: TextStyle(fontSize: 14, height: 1.25),
labelLarge: TextStyle( labelLarge: TextStyle(
fontSize: 16.0, fontWeight: FontWeight.bold, color: accent80)), fontSize: 16.0,
fontWeight: FontWeight.bold,
color: accent80,
),
),
cardColor: Color(0xFF24252B), cardColor: Color(0xFF24252B),
visualDensity: VisualDensity.adaptivePlatformDensity, visualDensity: VisualDensity.adaptivePlatformDensity,
tabBarTheme: const TabBarTheme( tabBarTheme: const TabBarTheme(
@ -397,6 +404,7 @@ class MyTheme {
), ),
), ),
), ),
switchTheme: switchTheme,
checkboxTheme: checkboxTheme, checkboxTheme: checkboxTheme,
listTileTheme: listTileTheme, listTileTheme: listTileTheme,
menuBarTheme: MenuBarThemeData( menuBarTheme: MenuBarThemeData(

View File

@ -57,14 +57,6 @@ class ChatPage extends StatelessWidget implements PageShape {
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0), borderRadius: BorderRadius.circular(10.0),
color: Theme.of(context).colorScheme.background, 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( child: Stack(
children: [ children: [
@ -109,12 +101,13 @@ class ChatPage extends StatelessWidget implements PageShape {
sendButtonBuilder: defaultSendButton( sendButtonBuilder: defaultSendButton(
padding: padding:
EdgeInsets.symmetric(horizontal: 6, vertical: 0), EdgeInsets.symmetric(horizontal: 6, vertical: 0),
color: Theme.of(context).colorScheme.primary, color: MyTheme.accent,
icon: FluentIcons.send_24_filled, icon: FluentIcons.send_24_filled,
), ),
), ),
messageOptions: MessageOptions( messageOptions: MessageOptions(
showOtherUsersAvatar: false, showOtherUsersAvatar: false,
showOtherUsersName: false,
textColor: Colors.white, textColor: Colors.white,
maxWidth: constraints.maxWidth * 0.7, maxWidth: constraints.maxWidth * 0.7,
messageTextBuilder: (message, _, __) { messageTextBuilder: (message, _, __) {
@ -128,7 +121,7 @@ class ChatPage extends StatelessWidget implements PageShape {
Text(message.text, Text(message.text,
style: TextStyle(color: Colors.white)), style: TextStyle(color: Colors.white)),
Text( Text(
"${message.createdAt.hour}:${message.createdAt.minute}", "${message.createdAt.hour}:${message.createdAt.minute.toString().padLeft(2, '0')}",
style: TextStyle( style: TextStyle(
color: Colors.white, color: Colors.white,
fontSize: 8, fontSize: 8,
@ -142,8 +135,8 @@ class ChatPage extends StatelessWidget implements PageShape {
message.user.id == currentUser.id; message.user.id == currentUser.id;
return defaultMessageDecoration( return defaultMessageDecoration(
color: isOwnMessage color: isOwnMessage
? Color.fromARGB(170, 71, 97, 129) ? Colors.blueGrey
: MyTheme.accent80, : MyTheme.accent,
borderTopLeft: 8, borderTopLeft: 8,
borderTopRight: 8, borderTopRight: 8,
borderBottomRight: isOwnMessage ? 8 : 2, borderBottomRight: isOwnMessage ? 8 : 2,
@ -165,7 +158,7 @@ class ChatPage extends StatelessWidget implements PageShape {
SizedBox(width: 5), SizedBox(width: 5),
Text( Text(
"${currentUser.firstName} ${currentUser.id}", "${currentUser.firstName} ${currentUser.id}",
style: TextStyle(color: MyTheme.accent50), style: TextStyle(color: MyTheme.accent),
), ),
], ],
), ),

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, 450); const Size kConnectionManagerWindowSizeClosedChat = Size(300, 490);
const Size kConnectionManagerWindowSizeOpenChat = Size(700, 450); const Size kConnectionManagerWindowSizeOpenChat = Size(700, 490);
// 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;

View File

@ -348,7 +348,12 @@ class _CmHeaderState extends State<_CmHeader>
), ),
), ),
margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0), margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 10.0),
padding: EdgeInsets.all(10), padding: EdgeInsets.only(
top: 10.0,
bottom: 10.0,
left: 10.0,
right: 5.0,
),
child: Row( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
@ -420,7 +425,9 @@ class _CmHeaderState extends State<_CmHeader>
offstage: !client.authorized || client.type_() != ClientType.remote, offstage: !client.authorized || client.type_() != ClientType.remote,
child: IconButton( child: IconButton(
onPressed: () => checkClickTime( onPressed: () => checkClickTime(
client.id, () => gFFI.chatModel.toggleCMChatPage(client.id)), client.id,
() => gFFI.chatModel.toggleCMChatPage(client.id),
),
icon: Icon( icon: Icon(
FluentIcons.chat_32_filled, FluentIcons.chat_32_filled,
color: Colors.white, color: Colors.white,
@ -448,36 +455,34 @@ 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, IconData iconData, Widget buildPermissionIcon(bool enabled, IconData iconData,
Function(bool)? onTap, String permissionText, String tooltipText) { Function(bool)? onTap, String permissionText, String tooltipText) {
return Row( return Tooltip(
children: [ message: tooltipText,
Tooltip( child: Container(
message: tooltipText, decoration: BoxDecoration(
color: enabled ? MyTheme.accent : Colors.blueGrey,
borderRadius: BorderRadius.circular(10.0),
),
padding: EdgeInsets.all(4.0),
child: InkWell(
onTap: () =>
checkClickTime(widget.client.id, () => onTap?.call(!enabled)),
child: Icon( child: Icon(
iconData, iconData,
).paddingOnly(left: 5.0, bottom: 5.0), size: 30.0,
).paddingOnly(right: 8.0), color: Colors.white,
SizedBox(
child: Text(
permissionText,
style: TextStyle(fontSize: 18),
),
width: 250),
Switch(
value: enabled,
onChanged: (v) => checkClickTime(
widget.client.id,
() => onTap?.call(v),
), ),
), ),
], ),
); );
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
width: double.infinity,
height: 200.0,
margin: EdgeInsets.all(5.0), margin: EdgeInsets.all(5.0),
padding: EdgeInsets.all(5.0), padding: EdgeInsets.all(5.0),
decoration: BoxDecoration( decoration: BoxDecoration(
@ -488,7 +493,7 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
color: Colors.black.withOpacity(0.2), color: Colors.black.withOpacity(0.2),
spreadRadius: 1, spreadRadius: 1,
blurRadius: 1, blurRadius: 1,
offset: Offset(0, 1.5), // changes position of shadow offset: Offset(0, 1.5),
), ),
], ],
), ),
@ -499,101 +504,102 @@ class _PrivilegeBoardState extends State<_PrivilegeBoard> {
translate("Permissions"), translate("Permissions"),
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold), style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
textAlign: TextAlign.center, textAlign: TextAlign.center,
).marginOnly(left: 4.0), ).marginOnly(left: 4.0, bottom: 8.0),
SizedBox( Expanded(
height: 8.0, child: GridView.count(
crossAxisCount: 3,
padding: EdgeInsets.symmetric(horizontal: 20.0),
mainAxisSpacing: 20.0,
crossAxisSpacing: 20.0,
children: [
buildPermissionIcon(
client.keyboard,
FluentIcons.keyboard_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "keyboard", enabled: enabled);
setState(() {
client.keyboard = enabled;
});
},
translate("Input Control"),
translate('Allow using keyboard and mouse'),
),
buildPermissionIcon(
client.clipboard,
FluentIcons.clipboard_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "clipboard", enabled: enabled);
setState(() {
client.clipboard = enabled;
});
},
translate("Clipboard"),
translate('Allow using clipboard'),
),
buildPermissionIcon(
client.audio,
FluentIcons.speaker_1_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "audio", enabled: enabled);
setState(() {
client.audio = enabled;
});
},
translate("Audio"),
translate('Allow hearing sound'),
),
buildPermissionIcon(
client.file,
FluentIcons.arrow_sort_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "file", enabled: enabled);
setState(() {
client.file = enabled;
});
},
translate("File"),
translate('Allow file copy and paste'),
),
buildPermissionIcon(
client.restart,
FluentIcons.arrow_sync_circle_20_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "restart", enabled: enabled);
setState(() {
client.restart = enabled;
});
},
translate("Restart"),
translate('Allow remote restart'),
),
buildPermissionIcon(
client.recording,
FluentIcons.record_stop_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "recording", enabled: enabled);
setState(() {
client.recording = enabled;
});
},
translate("Recording"),
translate('Allow recording session'),
)
],
),
), ),
FittedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildPermissionTile(
client.keyboard,
FluentIcons.keyboard_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "keyboard", enabled: enabled);
setState(() {
client.keyboard = enabled;
});
},
translate("Input Control"),
translate('Allow using keyboard and mouse'),
),
buildPermissionTile(
client.clipboard,
FluentIcons.clipboard_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "clipboard", enabled: enabled);
setState(() {
client.clipboard = enabled;
});
},
translate("Clipboard"),
translate('Allow using clipboard'),
),
buildPermissionTile(
client.audio,
FluentIcons.speaker_1_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "audio", enabled: enabled);
setState(() {
client.audio = enabled;
});
},
translate("Audio"),
translate('Allow hearing sound'),
),
buildPermissionTile(
client.file,
FluentIcons.arrow_sort_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "file", enabled: enabled);
setState(() {
client.file = enabled;
});
},
translate("File"),
translate('Allow file copy and paste'),
),
buildPermissionTile(
client.restart,
FluentIcons.arrow_clockwise_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "restart", enabled: enabled);
setState(() {
client.restart = enabled;
});
},
translate("Restart"),
translate('Allow remote restart'),
),
buildPermissionTile(
client.recording,
FluentIcons.record_24_filled,
(enabled) {
bind.cmSwitchPermission(
connId: client.id, name: "recording", enabled: enabled);
setState(() {
client.recording = enabled;
});
},
translate("Recording"),
translate('Allow recording session'),
)
],
)),
], ],
), ),
); );
} }
} }
const double bigMargin = 15; const double buttonBottomMargin = 8;
class _CmControlPanel extends StatelessWidget { class _CmControlPanel extends StatelessWidget {
final Client client; final Client client;
@ -620,12 +626,18 @@ class _CmControlPanel extends StatelessWidget {
children: [ children: [
Offstage( Offstage(
offstage: !client.inVoiceCall, offstage: !client.inVoiceCall,
child: buildButton(context, child: buildButton(
color: Colors.red, context,
onClick: () => closeVoiceCall(), color: Colors.red,
icon: Icon(Icons.phone_disabled_rounded, color: Colors.white), onClick: () => closeVoiceCall(),
text: "Stop voice call", icon: Icon(
textColor: Colors.white), FluentIcons.call_end_20_filled,
color: Colors.white,
size: 14,
),
text: "Stop voice call",
textColor: Colors.white,
),
), ),
Offstage( Offstage(
offstage: !client.incomingVoiceCall, offstage: !client.incomingVoiceCall,
@ -635,18 +647,27 @@ class _CmControlPanel extends StatelessWidget {
child: buildButton(context, child: buildButton(context,
color: MyTheme.accent, color: MyTheme.accent,
onClick: () => handleVoiceCall(true), onClick: () => handleVoiceCall(true),
icon: Icon(Icons.phone_enabled, color: Colors.white), icon: Icon(
FluentIcons.call_20_filled,
color: Colors.white,
size: 14,
),
text: "Accept", text: "Accept",
textColor: Colors.white), textColor: Colors.white),
), ),
Expanded( Expanded(
child: buildButton(context, child: buildButton(
color: Colors.red, context,
onClick: () => handleVoiceCall(false), color: Colors.red,
icon: onClick: () => handleVoiceCall(false),
Icon(Icons.phone_disabled_rounded, color: Colors.white), icon: Icon(
text: "Dismiss", FluentIcons.call_dismiss_20_filled,
textColor: Colors.white), color: Colors.white,
size: 14,
),
text: "Dismiss",
textColor: Colors.white,
),
) )
], ],
), ),
@ -662,16 +683,21 @@ class _CmControlPanel extends StatelessWidget {
), ),
Offstage( Offstage(
offstage: !showElevation, offstage: !showElevation,
child: buildButton(context, color: Colors.green[700], onClick: () { child: buildButton(
handleElevate(context); context,
windowManager.minimize(); color: MyTheme.accent,
}, onClick: () {
icon: Icon( handleElevate(context);
Icons.security_sharp, windowManager.minimize();
color: Colors.white, },
), icon: Icon(
text: 'Elevate', FluentIcons.shield_checkmark_20_filled,
textColor: Colors.white), color: Colors.white,
size: 14,
),
text: 'Elevate',
textColor: Colors.white,
),
), ),
Row( Row(
children: [ children: [
@ -690,9 +716,7 @@ class _CmControlPanel extends StatelessWidget {
], ],
) )
], ],
) ).marginOnly(bottom: buttonBottomMargin);
.marginOnly(bottom: showElevation ? 0 : bigMargin)
.marginSymmetric(horizontal: showElevation ? 0 : bigMargin);
} }
buildDisconnected(BuildContext context) { buildDisconnected(BuildContext context) {
@ -706,7 +730,7 @@ class _CmControlPanel extends StatelessWidget {
text: 'Close', text: 'Close',
textColor: Colors.white)), textColor: Colors.white)),
], ],
).marginOnly(bottom: 15).marginSymmetric(horizontal: bigMargin); ).marginOnly(bottom: buttonBottomMargin);
} }
buildUnAuthorized(BuildContext context) { buildUnAuthorized(BuildContext context) {
@ -728,8 +752,9 @@ class _CmControlPanel extends StatelessWidget {
}, },
text: 'Accept', text: 'Accept',
icon: Icon( icon: Icon(
Icons.security_sharp, FluentIcons.shield_checkmark_20_filled,
color: Colors.white, color: Colors.white,
size: 14,
), ),
textColor: Colors.white), textColor: Colors.white),
), ),
@ -740,26 +765,33 @@ class _CmControlPanel extends StatelessWidget {
Expanded( Expanded(
child: Column( child: Column(
children: [ children: [
buildButton(context, color: MyTheme.accent, onClick: () { buildButton(
handleAccept(context); context,
windowManager.minimize(); color: MyTheme.accent,
}, text: 'Accept', textColor: Colors.white), onClick: () {
handleAccept(context);
windowManager.minimize();
},
text: 'Accept',
textColor: Colors.white,
),
], ],
), ),
), ),
Expanded( Expanded(
child: buildButton(context, child: buildButton(
color: Colors.transparent, context,
border: Border.all(color: Colors.grey), color: Colors.transparent,
onClick: handleDisconnect, border: Border.all(color: Colors.grey),
text: 'Cancel', onClick: handleDisconnect,
textColor: null)), text: 'Cancel',
textColor: null,
),
),
], ],
), ),
], ],
) ).marginOnly(bottom: buttonBottomMargin);
.marginOnly(bottom: showElevation ? 0 : bigMargin)
.marginSymmetric(horizontal: showElevation ? 0 : bigMargin);
} }
Widget buildButton( Widget buildButton(
@ -788,7 +820,7 @@ class _CmControlPanel extends StatelessWidget {
); );
} }
return Container( return Container(
height: 30, height: 28,
decoration: BoxDecoration( decoration: BoxDecoration(
color: color, color: color,
borderRadius: BorderRadius.circular(10.0), borderRadius: BorderRadius.circular(10.0),

View File

@ -2,6 +2,7 @@ import 'dart:async';
import 'package:dash_chat_2/dash_chat_2.dart'; import 'package:dash_chat_2/dash_chat_2.dart';
import 'package:draggable_float_widget/draggable_float_widget.dart'; import 'package:draggable_float_widget/draggable_float_widget.dart';
import 'package:fluentui_system_icons/fluentui_system_icons.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_hbb/models/platform_model.dart'; import 'package:flutter_hbb/models/platform_model.dart';
import 'package:get/get_rx/src/rx_types/rx_types.dart'; import 'package:get/get_rx/src/rx_types/rx_types.dart';
@ -104,21 +105,23 @@ class ChatModel with ChangeNotifier {
final overlay = OverlayEntry(builder: (context) { final overlay = OverlayEntry(builder: (context) {
return DraggableFloatWidget( return DraggableFloatWidget(
config: DraggableFloatWidgetBaseConfig( config: DraggableFloatWidgetBaseConfig(
initPositionYInTop: false, initPositionYInTop: false,
initPositionYMarginBorder: 100, initPositionYMarginBorder: 100,
borderTopContainTopBar: true, borderTopContainTopBar: true,
), ),
child: FloatingActionButton( child: FloatingActionButton(
onPressed: () { onPressed: () {
if (chatWindowOverlayEntry == null) { if (chatWindowOverlayEntry == null) {
showChatWindowOverlay(); showChatWindowOverlay();
} else { } else {
hideChatWindowOverlay(); hideChatWindowOverlay();
} }
}, },
backgroundColor: Theme.of(context).colorScheme.primary, backgroundColor: Theme.of(context).colorScheme.primary,
child: Icon(Icons.message))); child: Icon(FluentIcons.chat_24_filled),
),
);
}); });
overlayState.insert(overlay); overlayState.insert(overlay);
chatIconOverlayEntry = overlay; chatIconOverlayEntry = overlay;

View File

@ -288,8 +288,8 @@ class ServerModel with ChangeNotifier {
/// Toggle the screen sharing service. /// Toggle the screen sharing service.
toggleService() async { toggleService() async {
if (_isStart) { if (_isStart) {
final res = final res = await parent.target?.dialogManager
await parent.target?.dialogManager.show<bool>((setState, close, context) { .show<bool>((setState, close, context) {
submit() => close(true); submit() => close(true);
return CustomAlertDialog( return CustomAlertDialog(
title: Row(children: [ title: Row(children: [
@ -311,8 +311,8 @@ class ServerModel with ChangeNotifier {
stopService(); stopService();
} }
} else { } else {
final res = final res = await parent.target?.dialogManager
await parent.target?.dialogManager.show<bool>((setState, close, context) { .show<bool>((setState, close, context) {
submit() => close(true); submit() => close(true);
return CustomAlertDialog( return CustomAlertDialog(
title: Row(children: [ title: Row(children: [