Finished SplitView for Tablet devices

This commit is contained in:
2023-09-12 09:31:34 +02:00
parent 482bf8dd0b
commit 6bc4d4d2ed
10 changed files with 75 additions and 50 deletions

View File

@ -0,0 +1,366 @@
import 'package:better_open_file/better_open_file.dart';
import 'package:bubble/bubble.dart';
import 'package:flowder/flowder.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:jiffy/jiffy.dart';
import 'package:provider/provider.dart';
import '../../../../api/marianumcloud/talk/chat/getChatResponse.dart';
import '../../../../api/marianumcloud/talk/deleteMessage/deleteMessage.dart';
import '../../../../api/marianumcloud/talk/deleteReactMessage/deleteReactMessage.dart';
import '../../../../api/marianumcloud/talk/deleteReactMessage/deleteReactMessageParams.dart';
import '../../../../api/marianumcloud/talk/reactMessage/reactMessage.dart';
import '../../../../api/marianumcloud/talk/reactMessage/reactMessageParams.dart';
import '../../../../api/marianumcloud/talk/room/getRoomResponse.dart';
import '../../../../model/chatList/chatProps.dart';
import '../../../../theming/appTheme.dart';
import '../../../../widget/debug/debugTile.dart';
import '../../files/fileElement.dart';
import 'chatMessage.dart';
import '../messageReactions.dart';
class ChatBubble extends StatefulWidget {
final BuildContext context;
final bool isSender;
final GetChatResponseObject bubbleData;
final GetRoomResponseObject chatData;
final void Function({bool renew}) refetch;
const ChatBubble({
required this.context,
required this.isSender,
required this.bubbleData,
required this.chatData,
required this.refetch,
Key? key}) : super(key: key);
@override
State<ChatBubble> createState() => _ChatBubbleState();
}
class _ChatBubbleState extends State<ChatBubble> {
BubbleStyle getSystemStyle() {
return BubbleStyle(
color: AppTheme.isDarkMode(context) ? const Color(0xff182229) : Colors.white,
borderWidth: 1,
elevation: 2,
margin: const BubbleEdges.only(bottom: 20, top: 10),
alignment: Alignment.center,
);
}
BubbleStyle getRemoteStyle(bool seamless) {
var color = AppTheme.isDarkMode(context) ? const Color(0xff202c33) : Colors.white;
return BubbleStyle(
nip: BubbleNip.leftTop,
color: seamless ? Colors.transparent : color,
borderWidth: seamless ? 0 : 1,
elevation: seamless ? 0 : 1,
margin: const BubbleEdges.only(bottom: 10, left: 10, right: 50),
alignment: Alignment.topLeft,
);
}
BubbleStyle getSelfStyle(bool seamless) {
var color = AppTheme.isDarkMode(context) ? const Color(0xff005c4b) : const Color(0xffd3d3d3);
return BubbleStyle(
nip: BubbleNip.rightBottom,
color: seamless ? Colors.transparent : color,
borderWidth: seamless ? 0 : 1,
elevation: seamless ? 0 : 1,
margin: const BubbleEdges.only(bottom: 10, right: 10, left: 50),
alignment: Alignment.topRight,
);
}
late ChatMessage message;
double downloadProgress = 0;
Future<DownloaderCore>? downloadCore;
Size _textSize(String text, TextStyle style) {
final TextPainter textPainter = TextPainter(
text: TextSpan(text: text, style: style),
maxLines: 1,
textDirection: TextDirection.ltr)
..layout(minWidth: 0, maxWidth: double.infinity);
return textPainter.size;
}
BubbleStyle getStyle() {
if(widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment) {
if(widget.isSender) {
return getSelfStyle(message.containsFile);
} else {
return getRemoteStyle(message.containsFile);
}
} else {
return getSystemStyle();
}
}
@override
Widget build(BuildContext context) {
message = ChatMessage(originalMessage: widget.bubbleData.message, originalData: widget.bubbleData.messageParameters);
bool showActorDisplayName = widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment && widget.chatData.type != GetRoomResponseObjectConversationType.oneToOne;
bool showBubbleTime = widget.bubbleData.messageType != GetRoomResponseObjectMessageType.system;
var actorTextStyle = TextStyle(color: Theme.of(context).primaryColor, fontWeight: FontWeight.bold);
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
textDirection: TextDirection.ltr,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
GestureDetector(
child: Bubble(
style: getStyle(),
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.9,
minWidth: showActorDisplayName ? _textSize(widget.bubbleData.actorDisplayName, actorTextStyle).width : 30,
),
child: Stack(
children: [
Padding(
padding: EdgeInsets.only(bottom: showBubbleTime ? 18 : 0, top: showActorDisplayName ? 18 : 0),
child: message.getWidget()
),
Visibility(
visible: showActorDisplayName,
child: Positioned(
top: 0,
left: 0,
child: Text(
widget.bubbleData.actorDisplayName,
textAlign: TextAlign.start,
style: actorTextStyle,
),
),
),
Visibility(
visible: showBubbleTime,
child: Positioned(
bottom: 0,
right: 0,
child: Text(
Jiffy.parseFromMillisecondsSinceEpoch(widget.bubbleData.timestamp * 1000).format(pattern: "HH:mm"),
textAlign: TextAlign.end,
style: const TextStyle(color: Colors.grey, fontSize: 12),
),
),
),
Visibility(
visible: downloadProgress > 0,
child: Positioned(
top: 0,
left: 0,
right: 0,
bottom: 0,
child: Stack(
children: [
const Center(child: Icon(Icons.download)),
const Center(child: CircularProgressIndicator(color: Colors.white)),
Center(child: CircularProgressIndicator(value: downloadProgress/100)),
],
)
),
),
],
),
),
),
onLongPress: () {
showDialog(context: context, builder: (context) {
List<String> commonReactions = ["👍", "👎", "😆", "❤️", "👀", "🤔"];
bool canReact = widget.bubbleData.messageType == GetRoomResponseObjectMessageType.comment;
return SimpleDialog(
children: [
Visibility(
visible: canReact,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Wrap(
alignment: WrapAlignment.center,
children: [
...commonReactions.map((e) => TextButton(
style: TextButton.styleFrom(
padding: EdgeInsets.zero,
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
minimumSize: const Size(40, 40)
),
onPressed: () {
Navigator.of(context).pop();
ReactMessage(
chatToken: widget.chatData.token,
messageId: widget.bubbleData.id,
params: ReactMessageParams(e),
).run().then((value) => widget.refetch(renew: true));
},
child: Text(e)),
),
],
),
const Divider(),
],
)
),
Visibility(
visible: canReact,
child: ListTile(
leading: const Icon(Icons.add_reaction_outlined),
title: const Text("Reaktionen"),
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => MessageReactions(
token: widget.chatData.token,
messageId: widget.bubbleData.id,
)));
},
),
),
Visibility(
visible: !message.containsFile,
child: ListTile(
leading: const Icon(Icons.copy),
title: const Text("Nachricht kopieren"),
onTap: () => {
Clipboard.setData(ClipboardData(text: widget.bubbleData.message)),
Navigator.of(context).pop(),
},
),
),
Visibility(
visible: !widget.isSender && widget.chatData.type != GetRoomResponseObjectConversationType.oneToOne,
child: ListTile(
leading: const Icon(Icons.sms_outlined),
title: Text("Private Nachricht an '${widget.bubbleData.actorDisplayName}'"),
onTap: () => {},
),
),
Visibility(
visible: widget.isSender && DateTime.fromMillisecondsSinceEpoch(widget.bubbleData.timestamp * 1000).add(const Duration(hours: 6)).isAfter(DateTime.now()),
child: ListTile(
leading: const Icon(Icons.delete_outline),
title: const Text("Nachricht löschen"),
onTap: () {
DeleteMessage(widget.chatData.token, widget.bubbleData.id).run().then((value) {
Provider.of<ChatProps>(context, listen: false).run();
Navigator.of(context).pop();
});
},
),
),
DebugTile(context).jsonData(widget.bubbleData.toJson()),
],
);
});
},
onTap: () {
if(message.file == null) return;
if(downloadProgress > 0) {
showDialog(context: context, builder: (context) {
return AlertDialog(
title: const Text("Download abbrechen?"),
content: const Text("Möchtest du den Download abbrechen?"),
actions: [
TextButton(onPressed: () {
Navigator.of(context).pop();
}, child: const Text("Nein")),
TextButton(onPressed: () {
downloadCore?.then((value) {
if(!value.isCancelled) value.cancel();
Navigator.of(context).pop();
});
setState(() {
downloadProgress = 0;
downloadCore = null;
});
}, child: const Text("Ja, Abbrechen"))
],
);
});
return;
}
downloadProgress = 1;
downloadCore = FileElement.download(context, message.file!.path!, message.file!.name, (progress) {
if(progress > 1) {
setState(() {
downloadProgress = progress;
});
}
}, (result) {
setState(() {
downloadProgress = 0;
});
if(result.type != ResultType.done) {
showDialog(context: context, builder: (context) {
return AlertDialog(
content: Text(result.message),
);
});
}
});
},
),
Visibility(
visible: widget.bubbleData.reactions != null,
child: Transform.translate(
offset: const Offset(0, -10),
child: Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 5, right: 5),
child: Wrap(
alignment: widget.isSender ? WrapAlignment.end : WrapAlignment.start,
crossAxisAlignment: WrapCrossAlignment.start,
children: widget.bubbleData.reactions?.entries.map<Widget>((e) {
bool hasSelfReacted = widget.bubbleData.reactionsSelf?.contains(e.key) ?? false;
return Container(
margin: const EdgeInsets.only(right: 2.5, left: 2.5),
child: ActionChip(
label: Text("${e.key} ${e.value}"),
visualDensity: const VisualDensity(vertical: VisualDensity.minimumDensity, horizontal: VisualDensity.minimumDensity),
padding: EdgeInsets.zero,
backgroundColor: hasSelfReacted ? Theme.of(context).primaryColor : null,
onPressed: () {
if(hasSelfReacted) {
// Delete existing reaction
DeleteReactMessage(
chatToken: widget.chatData.token,
messageId: widget.bubbleData.id,
params: DeleteReactMessageParams(
e.key
),
).run().then((value) => widget.refetch(renew: true));
} else {
// Add reaction
ReactMessage(
chatToken: widget.chatData.token,
messageId: widget.bubbleData.id,
params: ReactMessageParams(
e.key
)
).run().then((value) => widget.refetch(renew: true));
}
},
),
);
}).toList() ?? [],
),
),
),
),
],
);
}
}

View File

@ -0,0 +1,63 @@
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher_string.dart';
import '../../../../api/marianumcloud/talk/chat/getChatResponse.dart';
import '../../../../api/marianumcloud/talk/chat/richObjectStringProcessor.dart';
import '../../../../model/accountData.dart';
import '../../../../model/endpointData.dart';
class ChatMessage {
String originalMessage;
Map<String, RichObjectString>? originalData;
RichObjectString? file;
String content = "";
bool get containsFile => file != null;
ChatMessage({required this.originalMessage, this.originalData}) {
if(originalData?.containsKey("file") ?? false) {
file = originalData?['file'];
content = file?.name ?? "Datei";
} else {
content = RichObjectStringProcessor.parseToString(originalMessage, originalData);
}
}
Widget getWidget() {
if(file == null) {
return Linkify(
text: content,
onOpen: onOpen,
);
}
return CachedNetworkImage(
errorWidget: (context, url, error) {
return Column(
children: [
const Icon(Icons.image_not_supported_outlined, size: 35),
Text("Keine Dateivorschau:\n${file!.name}", style: const TextStyle(fontWeight: FontWeight.bold))
],
);
},
alignment: Alignment.center,
placeholder: (context, url) {
return const Padding(padding: EdgeInsets.all(10), child: CircularProgressIndicator());
},
imageUrl: "https://${AccountData().buildHttpAuthString()}@${EndpointData().nextcloud().full()}/index.php/core/preview?fileId=${file!.id}&x=100&y=-1&a=1",
);
}
void onOpen(LinkableElement link) async {
if(await canLaunchUrlString(link.url)) {
await launchUrlString(link.url);
} else {
}
}
}

View File

@ -0,0 +1,191 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:loader_overlay/loader_overlay.dart';
import 'package:provider/provider.dart';
import 'package:uuid/uuid.dart';
import '../../../../api/marianumcloud/files-sharing/fileSharingApi.dart';
import '../../../../api/marianumcloud/files-sharing/fileSharingApiParams.dart';
import '../../../../api/marianumcloud/talk/sendMessage/sendMessage.dart';
import '../../../../api/marianumcloud/talk/sendMessage/sendMessageParams.dart';
import '../../../../api/marianumcloud/webdav/webdavApi.dart';
import '../../../../model/chatList/chatProps.dart';
import '../../../../storage/base/settingsProvider.dart';
import '../../../../widget/filePick.dart';
import '../../files/fileUploadDialog.dart';
class ChatTextfield extends StatefulWidget {
final String sendToToken;
const ChatTextfield(this.sendToToken, {Key? key}) : super(key: key);
@override
State<ChatTextfield> createState() => _ChatTextfieldState();
}
class _ChatTextfieldState extends State<ChatTextfield> {
late SettingsProvider settings;
final TextEditingController _textBoxController = TextEditingController();
bool isLoading = false;
void _query() {
Provider.of<ChatProps>(context, listen: false).run();
}
void mediaUpload(String? path) async {
context.loaderOverlay.hide();
if(path == null) {
return;
}
String filename = "${path.split("/").last.split(".").first}-${const Uuid().v4()}.${path.split(".").last}";
String shareFolder = "MarianumMobile";
WebdavApi.webdav.then((webdav) {
webdav.mkcol(Uri.parse("/$shareFolder"));
});
showDialog(context: context, builder: (context) => FileUploadDialog(
doShowFinish: false,
fileName: filename,
localPath: path,
remotePath: [shareFolder],
onUploadFinished: () {
FileSharingApi().share(FileSharingApiParams(
shareType: 10,
shareWith: widget.sendToToken,
path: "$shareFolder/$filename",
)).then((value) => _query());
},
), barrierDismissible: false);
}
void setDraft(String text) {
if(text.isNotEmpty) {
settings.val(write: true).talkSettings.drafts[widget.sendToToken] = text;
} else {
settings.val(write: true).talkSettings.drafts.removeWhere((key, value) => key == widget.sendToToken);
}
}
@override
void initState() {
settings = Provider.of<SettingsProvider>(context, listen: false);
_textBoxController.text = settings.val().talkSettings.drafts[widget.sendToToken] ?? "";
super.initState();
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomLeft,
child: Container(
padding: const EdgeInsets.only(left: 10, bottom: 1, top: 1, right: 10),
width: double.infinity,
color: Theme.of(context).primaryColor,
child: Row(
children: <Widget>[
GestureDetector(
onTap: (){
showDialog(context: context, builder: (context) {
return SimpleDialog(
children: [
ListTile(
leading: const Icon(Icons.file_open),
title: const Text("Aus Dateien auswählen"),
onTap: () {
context.loaderOverlay.show();
FilePick.documentPick().then((value) {
mediaUpload(value);
});
Navigator.of(context).pop();
},
),
Visibility(
visible: !Platform.isIOS,
child: ListTile(
leading: const Icon(Icons.image),
title: const Text("Aus Gallerie auswählen"),
onTap: () {
context.loaderOverlay.show();
FilePick.galleryPick().then((value) {
mediaUpload(value?.path);
});
Navigator.of(context).pop();
},
),
),
],
);
});
},
child: Material(
elevation: 5,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(30),
),
child: const Icon(Icons.add, color: Colors.white, size: 20, ),
),
)
),
const SizedBox(width: 15),
Expanded(
child: TextField(
style: const TextStyle(
color: Colors.white,
),
controller: _textBoxController,
maxLines: 7,
minLines: 1,
decoration: InputDecoration(
hintText: "Nachricht schreiben...",
hintStyle: TextStyle(color: Theme.of(context).colorScheme.onSecondary),
border: InputBorder.none,
),
onChanged: (String text) {
setDraft(text);
},
),
),
const SizedBox(width: 15),
FloatingActionButton(
mini: true,
onPressed: (){
if(_textBoxController.text.isEmpty) return;
if(isLoading) return;
setState(() {
isLoading = true;
});
SendMessage(widget.sendToToken, SendMessageParams(_textBoxController.text)).run().then((value) {
_query();
setState(() {
isLoading = false;
});
_textBoxController.text = "";
setDraft("");
});
},
backgroundColor: Theme.of(context).primaryColor,
elevation: 5,
child: isLoading
? Container(padding: const EdgeInsets.all(10), child: const CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
: const Icon(Icons.send, color: Colors.white, size: 18),
),
],
),
),
),
],
);
}
}

View File

@ -0,0 +1,193 @@
import 'package:flutter/material.dart';
import 'package:flutter_split_view/flutter_split_view.dart';
import 'package:jiffy/jiffy.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
import 'package:provider/provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../../../../api/marianumcloud/talk/chat/richObjectStringProcessor.dart';
import '../../../../api/marianumcloud/talk/leaveRoom/leaveRoom.dart';
import '../../../../api/marianumcloud/talk/room/getRoomResponse.dart';
import '../../../../api/marianumcloud/talk/setFavorite/setFavorite.dart';
import '../../../../api/marianumcloud/talk/setReadMarker/setReadMarker.dart';
import '../../../../api/marianumcloud/talk/setReadMarker/setReadMarkerParams.dart';
import '../../../../model/chatList/chatProps.dart';
import '../../../../widget/confirmDialog.dart';
import '../../../../widget/debug/debugTile.dart';
import '../../../../widget/userAvatar.dart';
import '../chatView.dart';
class ChatTile extends StatefulWidget {
final GetRoomResponseObject data;
final void Function({bool renew}) query;
final bool disableContextActions;
final bool hasDraft;
const ChatTile({Key? key, required this.data, required this.query, this.disableContextActions = false, this.hasDraft = false}) : super(key: key);
@override
State<ChatTile> createState() => _ChatTileState();
}
class _ChatTileState extends State<ChatTile> {
late String username;
@override
void initState() {
super.initState();
SharedPreferences.getInstance().then((value) => {
username = value.getString("username")!
});
}
void setCurrentAsRead() {
SetReadMarker(
widget.data.token,
true,
setReadMarkerParams: SetReadMarkerParams(
lastReadMessage: widget.data.lastMessage.id
)
).run().then((value) => widget.query(renew: true));
}
@override
Widget build(BuildContext context) {
bool isGroup = widget.data.type == GetRoomResponseObjectConversationType.oneToOne;
UserAvatar circleAvatar = UserAvatar(username: widget.data.name, isGroup: isGroup);
return Consumer<ChatProps>(builder: (context, chatData, child) {
return ListTile(
style: ListTileStyle.list,
tileColor: chatData.currentToken() == widget.data.token && SplitView.of(context).pageCount > 1
? Theme.of(context).primaryColor.withAlpha(100)
: null,
leading: Stack(
children: [
circleAvatar,
Visibility(
visible: widget.data.isFavorite,
child: Positioned(
right: 0,
bottom: 0,
child: Container(
padding: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor.withAlpha(200),
borderRadius: BorderRadius.circular(90.0),
),
child: const Icon(Icons.star, color: Colors.amberAccent, size: 15),
),
),
)
],
),
title: Row(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Text(widget.data.displayName, overflow: TextOverflow.ellipsis),
),
if(widget.hasDraft) ...[
const SizedBox(width: 5),
const Icon(Icons.edit_outlined, size: 15),
],
],
),
subtitle: Text("${Jiffy.parseFromMillisecondsSinceEpoch(widget.data.lastMessage.timestamp * 1000).fromNow()}: ${RichObjectStringProcessor.parseToString(widget.data.lastMessage.message.replaceAll("\n", " "), widget.data.lastMessage.messageParameters)}", overflow: TextOverflow.ellipsis),
trailing: widget.data.unreadMessages <= 0
? null
: Container(
padding: const EdgeInsets.all(1),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(30),
),
constraints: const BoxConstraints(
minWidth: 20,
minHeight: 20,
),
child: Text(
"${widget.data.unreadMessages}",
style: const TextStyle(
color: Colors.white,
fontSize: 15,
),
textAlign: TextAlign.center,
),
),
onTap: () async {
setCurrentAsRead();
ChatView view = ChatView(room: widget.data, selfId: username, avatar: circleAvatar);
if(SplitView.of(context).isSecondaryVisible) {
SplitView.of(context).setSecondary(view);
} else {
PersistentNavBarNavigator.pushNewScreen(context, screen: view, withNavBar: false);
}
Provider.of<ChatProps>(context, listen: false).setQueryToken(widget.data.token);
},
onLongPress: () {
if(widget.disableContextActions) return;
showDialog(context: context, builder: (context) => SimpleDialog(
children: [
Visibility(
visible: widget.data.unreadMessages > 0,
replacement: ListTile(
leading: const Icon(Icons.mark_chat_unread_outlined),
title: const Text("Als ungelesen markieren"),
onTap: () {
SetReadMarker(widget.data.token, false).run().then((value) => widget.query(renew: true));
Navigator.of(context).pop();
},
),
child: ListTile(
leading: const Icon(Icons.mark_chat_read_outlined),
title: const Text("Als gelesen markieren"),
onTap: () {
setCurrentAsRead();
Navigator.of(context).pop();
},
),
),
Visibility(
visible: widget.data.isFavorite,
replacement: ListTile(
leading: const Icon(Icons.star_outline),
title: const Text("Zu Favoriten hinzufügen"),
onTap: () {
SetFavorite(widget.data.token, true).run().then((value) => widget.query(renew: true));
Navigator.of(context).pop();
},
),
child: ListTile(
leading: const Icon(Icons.stars_outlined),
title: const Text("Von Favoriten entfernen"),
onTap: () {
SetFavorite(widget.data.token, false).run().then((value) => widget.query(renew: true));
Navigator.of(context).pop();
},
),
),
ListTile(
leading: const Icon(Icons.delete_outline),
title: const Text("Konversation verlassen"),
onTap: () {
ConfirmDialog(
title: "Chat verlassen",
content: "Du benötigst ggf. eine Einladung um erneut beizutreten.",
confirmButton: "Löschen",
onConfirm: () {
LeaveRoom(widget.data.token).run().then((value) => widget.query(renew: true));
Navigator.of(context).pop();
},
).asDialog(context);
},
),
DebugTile(context).jsonData(widget.data.toJson()),
],
));
},
);
});
}
}

View File

@ -0,0 +1,22 @@
import 'package:flutter/material.dart';
class SplitViewPlaceholder extends StatelessWidget {
const SplitViewPlaceholder({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/logo/icon.png", height: 200),
const SizedBox(height: 30),
const Text("Marianum Fulda\nTalk", textAlign: TextAlign.center, style: TextStyle(fontSize: 30)),
],
),
)
);
}
}