feat(ui): Replace the squircles with a simple list

This commit is contained in:
PapaTutuWawa 2022-12-22 00:16:14 +01:00
parent db4b69a24a
commit c0fb9beef7
5 changed files with 188 additions and 164 deletions

View File

@ -154,15 +154,13 @@
"confirmBody": "One or more chats are unencrypted. This means that the file will be leaked to the server. Do you still want to continue?"
},
"profile": {
"self": {
"devices": "Devices"
"general": {
"omemo": "Security"
},
"conversation": {
"muteChatTooltip": "Mute chat",
"unmuteChatTooltip": "Unmute chat",
"muteChat": "Mute",
"unmuteChat": "Unmute",
"devices": "Devices"
"notifications": "Notifications",
"notificationsMuted": "Muted",
"notificationsEnabled": "Enabled"
},
"owndevices": {
"title": "Own Devices",

View File

@ -154,15 +154,13 @@
"confirmBody": "Einer oder mehr Chats sind unverschlüsselt. Das bedeutet, dass die Dateien dem Server unverschlüsselt vorliegen. Dateien trotzdem senden?"
},
"profile": {
"self": {
"devices": "Geräte"
"general": {
"omemo": "Sicherheit"
},
"conversation": {
"muteChatTooltip": "Chat stummschalten",
"unmuteChatTooltip": "Chat lautstellen",
"muteChat": "Stummschalten",
"unmuteChat": "Lautstellen",
"devices": "Geräte"
"notifications": "Benachrichtigungen",
"notificationsMuted": "Stumm",
"notificationsEnabled": "Eingeschaltet"
},
"owndevices": {
"title": "Eigene Geräte",

View File

@ -1,15 +1,13 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:moxxyv2/i18n/strings.g.dart';
import 'package:moxxyv2/shared/models/conversation.dart';
import 'package:moxxyv2/ui/bloc/devices_bloc.dart';
import 'package:moxxyv2/ui/bloc/profile_bloc.dart';
import 'package:moxxyv2/ui/constants.dart';
import 'package:moxxyv2/ui/helpers.dart';
import 'package:moxxyv2/ui/widgets/avatar.dart';
import 'package:moxxyv2/ui/widgets/chat/shared/base.dart';
import 'package:moxxyv2/ui/widgets/contact_helper.dart';
import 'package:moxxyv2/ui/widgets/profile/options.dart';
//import 'package:phosphor_flutter/phosphor_flutter.dart';
class ConversationProfileHeader extends StatelessWidget {
@ -81,124 +79,97 @@ class ConversationProfileHeader extends StatelessWidget {
),
),
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Row(
//mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Tooltip(
message: conversation.muted ?
t.pages.profile.conversation.unmuteChatTooltip :
t.pages.profile.conversation.muteChatTooltip,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SharedMediaContainer(
Icon(
conversation.muted ?
Icons.do_not_disturb_on :
Icons.do_not_disturb_off,
size: 32,
),
color: getTileColor(context),
onTap: () {
GetIt.I.get<ProfileBloc>().add(
MuteStateSetEvent(
conversation.jid,
!conversation.muted,
),
);
},
),
Text(
conversation.muted ?
t.pages.profile.conversation.unmuteChat :
t.pages.profile.conversation.muteChat,
style: const TextStyle(
fontSize: fontsizeAppbar,
),
),
],
),
),
// TODO(PapaTutuWawa): Only show when the chat partner has OMEMO keys
Tooltip(
message: t.pages.profile.conversation.devices,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SharedMediaContainer(
const Icon(
Icons.security_outlined,
size: 32,
),
color: getTileColor(context),
onTap: () {
GetIt.I.get<DevicesBloc>().add(DevicesRequestedEvent(conversation.jid));
},
),
Text(
t.pages.profile.conversation.devices,
style: const TextStyle(
fontSize: fontsizeAppbar,
),
),
],
),
),
// TODO(Unknown): How to integrate this into the UI?
/*
Tooltip(
message: subscribed ?
'Unsubscribe' :
'Subscribe',
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SharedMediaContainer(
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: ColoredBox(
color: getTileColor(context),
child: Icon(
subscribed ?
PhosphorIcons.link :
PhosphorIcons.linkBreak,
size: 32,
),
),
),
onTap: () {
GetIt.I.get<ProfileBloc>().add(
SetSubscriptionStateEvent(
conversation.jid,
!subscribed,
),
);
},
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
subscribed ?
'Unsubscribe' :
'Subscribe',
style: TextStyle(
fontSize: fontsizeAppbar,
),
),
Icon(Icons.info),
],
),
],
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(
top: 16,
left: 64,
right: 64,
),
child: ProfileOptions(
options: [
ProfileOption(
icon: Icons.security_outlined,
title: t.pages.profile.general.omemo,
onTap: () {
context.read<DevicesBloc>().add(
DevicesRequestedEvent(conversation.jid),
);
},
),
),*/
],
ProfileOption(
icon: conversation.muted ?
Icons.notifications_off :
Icons.notifications,
title: t.pages.profile.conversation.notifications,
description: conversation.muted ?
t.pages.profile.conversation.notificationsMuted :
t.pages.profile.conversation.notificationsEnabled,
onTap: () {
context.read<ProfileBloc>().add(
MuteStateSetEvent(
conversation.jid,
!conversation.muted,
),
);
},
),
],
),
),
),
/*
// TODO(Unknown): How to integrate this into the UI?
Tooltip(
message: subscribed ?
'Unsubscribe' :
'Subscribe',
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SharedMediaContainer(
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: ColoredBox(
color: getTileColor(context),
child: Icon(
subscribed ?
PhosphorIcons.link :
PhosphorIcons.linkBreak,
size: 32,
),
),
),
onTap: () {
GetIt.I.get<ProfileBloc>().add(
SetSubscriptionStateEvent(
conversation.jid,
!subscribed,
),
);
},
),
Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
subscribed ?
'Unsubscribe' :
'Subscribe',
style: TextStyle(
fontSize: fontsizeAppbar,
),
),
Icon(Icons.info),
],
),
],
),
),*/
],
);
}

View File

@ -1,11 +1,10 @@
import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:moxxyv2/i18n/strings.g.dart';
import 'package:moxxyv2/ui/bloc/own_devices_bloc.dart';
import 'package:moxxyv2/ui/constants.dart';
import 'package:moxxyv2/ui/helpers.dart';
import 'package:moxxyv2/ui/widgets/avatar.dart';
import 'package:moxxyv2/ui/widgets/chat/shared/base.dart';
import 'package:moxxyv2/ui/widgets/profile/options.dart';
class SelfProfileHeader extends StatelessWidget {
const SelfProfileHeader(
@ -79,36 +78,27 @@ class SelfProfileHeader extends StatelessWidget {
],
),
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Tooltip(
message: t.pages.profile.self.devices,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SharedMediaContainer(
const Icon(
Icons.security_outlined,
size: 32,
),
color: getTileColor(context),
onTap: () {
GetIt.I.get<OwnDevicesBloc>().add(OwnDevicesRequestedEvent());
},
),
Text(
t.pages.profile.self.devices,
style: const TextStyle(
fontSize: fontsizeAppbar,
),
),
],
Align(
alignment: Alignment.centerLeft,
child: Padding(
padding: const EdgeInsets.only(
top: 16,
left: 64,
right: 64,
),
child: ProfileOptions(
options: [
ProfileOption(
icon: Icons.security_outlined,
title: t.pages.profile.general.omemo,
onTap: () {
context.read<OwnDevicesBloc>().add(
OwnDevicesRequestedEvent(),
);
},
),
),
],
],
),
),
),
],

View File

@ -0,0 +1,67 @@
import 'package:flutter/material.dart';
class ProfileOption {
const ProfileOption({
required this.icon,
required this.title,
required this.onTap,
this.description,
});
final IconData icon;
final String title;
final String? description;
final void Function() onTap;
}
class ProfileOptions extends StatelessWidget {
const ProfileOptions({
required this.options,
super.key,
});
final List<ProfileOption> options;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: options
.map((option) => InkWell(
onTap: option.onTap,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 16,
horizontal: 8,
),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(right: 16),
child: Icon(
option.icon,
size: 32,
),
),
Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
option.title,
style: Theme.of(context).textTheme.headline6,
),
if (option.description != null)
Text(
option.description!,
style: Theme.of(context).textTheme.bodyMedium,
),
],
),
],
),
),
),).toList(),
);
}
}