Adapt ui to support text scale

This commit is contained in:
Juan Gilsanz Polo 2023-11-29 11:56:28 +01:00
parent bddfac7e72
commit c9c960d1ee
23 changed files with 624 additions and 495 deletions

View file

@ -17,7 +17,7 @@ class LogsConfigOptions extends StatelessWidget {
final void Function() onConfirm;
const LogsConfigOptions({
Key? key,
super.key,
required this.generalSwitch,
required this.updateGeneralSwitch,
required this.anonymizeClientIp,
@ -27,10 +27,12 @@ class LogsConfigOptions extends StatelessWidget {
required this.updateRetentionTime,
required this.onClear,
required this.onConfirm
}) : super(key: key);
});
@override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Column(
mainAxisSize: MainAxisSize.min,
children: [
@ -111,10 +113,12 @@ class LogsConfigOptions extends StatelessWidget {
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
AppLocalizations.of(context)!.anonymizeClientIp,
style: const TextStyle(
fontSize: 16
Flexible(
child: Text(
AppLocalizations.of(context)!.anonymizeClientIp,
style: const TextStyle(
fontSize: 16
),
),
),
Switch(
@ -159,13 +163,21 @@ class LogsConfigOptions extends StatelessWidget {
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
if (width > 500) TextButton(
onPressed: () {
Navigator.pop(context);
onClear();
},
child: Text(AppLocalizations.of(context)!.clearLogs)
),
if (width <= 500) IconButton(
onPressed: () {
Navigator.pop(context);
onClear();
},
icon: const Icon(Icons.delete_rounded),
tooltip: AppLocalizations.of(context)!.clearLogs,
),
Row(
children: [
TextButton(
@ -174,7 +186,7 @@ class LogsConfigOptions extends StatelessWidget {
),
const SizedBox(width: 20),
TextButton(
onPressed: retentionTime != ''
onPressed: retentionTime != null
? () {
Navigator.pop(context);
onConfirm();
@ -183,7 +195,7 @@ class LogsConfigOptions extends StatelessWidget {
child: Text(
AppLocalizations.of(context)!.confirm,
style: TextStyle(
color: retentionTime != ''
color: retentionTime != null
? Theme.of(context).colorScheme.primary
: Colors.grey
),
@ -201,7 +213,7 @@ class LogsConfigOptions extends StatelessWidget {
}
class ConfigLogsLoading extends StatelessWidget {
const ConfigLogsLoading({Key? key}) : super(key: key);
const ConfigLogsLoading({super.key});
@override
Widget build(BuildContext context) {
@ -232,7 +244,7 @@ class ConfigLogsLoading extends StatelessWidget {
}
class ConfigLogsError extends StatelessWidget {
const ConfigLogsError({Key? key}) : super(key: key);
const ConfigLogsError({super.key});
@override
Widget build(BuildContext context) {

View file

@ -143,7 +143,6 @@ class _LogsConfigModalState extends State<LogsConfigModal> {
}
else {
return Container(
height: Platform.isIOS ? 436 : 420,
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(28),

View file

@ -12,10 +12,10 @@ class ClientsModal extends StatefulWidget {
final bool dialog;
const ClientsModal({
Key? key,
super.key,
required this.value,
required this.dialog
}) : super(key: key);
});
@override
State<ClientsModal> createState() => _ClientsModalState();
@ -75,10 +75,9 @@ class _ModalContent extends StatelessWidget {
final void Function(List<String>) onClientsSelected;
const _ModalContent({
Key? key,
required this.selectedClients,
required this.onClientsSelected,
}) : super(key: key);
});
@override
Widget build(BuildContext context) {
@ -188,11 +187,10 @@ class _ListItem extends StatelessWidget {
final void Function(bool) onChanged;
const _ListItem({
Key? key,
required this.label,
required this.checkboxActive,
required this.onChanged,
}) : super(key: key);
});
@override
Widget build(BuildContext context) {

View file

@ -11,10 +11,10 @@ class FilterStatusModal extends StatefulWidget {
final bool dialog;
const FilterStatusModal({
Key? key,
super.key,
required this.value,
required this.dialog
}) : super(key: key);
});
@override
State<FilterStatusModal> createState() => _FilterStatusModalState();
@ -39,164 +39,17 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
Navigator.pop(context);
}
Widget filterStatusListItem({
required String id,
required IconData icon,
required String label,
required void Function(String?) onChanged
}) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () => onChanged(id),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(
icon,
size: 24,
color: Theme.of(context).listTileTheme.iconColor
),
const SizedBox(width: 16),
Text(
label,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurface
),
)
],
),
Radio(
value: id,
groupValue: selectedResultStatus,
onChanged: onChanged
)
],
),
),
),
);
}
Widget content() {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: Wrap(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(
top: 24,
bottom: 16,
),
child: Icon(
Icons.shield_rounded,
size: 24,
color: Theme.of(context).listTileTheme.iconColor
),
),
Text(
AppLocalizations.of(context)!.responseStatus,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w400,
color: Theme.of(context).colorScheme.onSurface
),
),
],
)
],
),
Container(height: 16),
filterStatusListItem(
id: "all",
icon: Icons.shield_rounded,
label: AppLocalizations.of(context)!.all,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
filterStatusListItem(
id: "filtered",
icon: Icons.shield_rounded,
label: AppLocalizations.of(context)!.filtered,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
filterStatusListItem(
id: "processed",
icon: Icons.verified_user_rounded,
label: AppLocalizations.of(context)!.processedRow,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
filterStatusListItem(
id: "whitelisted",
icon: Icons.verified_user_rounded,
label: AppLocalizations.of(context)!.processedWhitelistRow,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
filterStatusListItem(
id: "blocked",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blocked,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
filterStatusListItem(
id: "blocked_safebrowsing",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blockedSafeBrowsingRow,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
filterStatusListItem(
id: "blocked_parental",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blockedParentalRow,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
filterStatusListItem(
id: "safe_search",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blockedSafeSearchRow,
onChanged: (value) => setState(() => selectedResultStatus = value!)
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: apply,
child: Text(AppLocalizations.of(context)!.apply)
)
],
),
),
if (Platform.isIOS) const SizedBox(height: 16)
],
);
}
if (widget.dialog == true) {
return Dialog(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 400
),
child: content()
child: _Content(
onApply: apply,
updateSelectedResultStatus: (v) => setState(() => selectedResultStatus = v),
selectedResultStatus: selectedResultStatus,
)
),
);
}
@ -209,8 +62,199 @@ class _FilterStatusModalState extends State<FilterStatusModal> {
),
color: Theme.of(context).dialogBackgroundColor
),
child: content()
child: _Content(
onApply: apply,
updateSelectedResultStatus: (v) => setState(() => selectedResultStatus = v),
selectedResultStatus: selectedResultStatus,
)
);
}
}
}
class _Content extends StatelessWidget {
final String selectedResultStatus;
final void Function(String) updateSelectedResultStatus;
final void Function() onApply;
const _Content({
required this.selectedResultStatus,
required this.updateSelectedResultStatus,
required this.onApply,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: Wrap(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Column(
children: [
Padding(
padding: const EdgeInsets.only(
top: 24,
bottom: 16,
),
child: Icon(
Icons.shield_rounded,
size: 24,
color: Theme.of(context).listTileTheme.iconColor
),
),
Text(
AppLocalizations.of(context)!.responseStatus,
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.w400,
color: Theme.of(context).colorScheme.onSurface
),
),
],
)
],
),
Container(height: 16),
_Item(
selectedResultStatus: selectedResultStatus,
id: "all",
icon: Icons.shield_rounded,
label: AppLocalizations.of(context)!.all,
onChanged: updateSelectedResultStatus
),
_Item(
selectedResultStatus: selectedResultStatus,
id: "filtered",
icon: Icons.shield_rounded,
label: AppLocalizations.of(context)!.filtered,
onChanged: updateSelectedResultStatus
),
_Item(
selectedResultStatus: selectedResultStatus,
id: "processed",
icon: Icons.verified_user_rounded,
label: AppLocalizations.of(context)!.processedRow,
onChanged: updateSelectedResultStatus
),
_Item(
selectedResultStatus: selectedResultStatus,
id: "whitelisted",
icon: Icons.verified_user_rounded,
label: AppLocalizations.of(context)!.processedWhitelistRow,
onChanged: updateSelectedResultStatus
),
_Item(
selectedResultStatus: selectedResultStatus,
id: "blocked",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blocked,
onChanged: updateSelectedResultStatus
),
_Item(
selectedResultStatus: selectedResultStatus,
id: "blocked_safebrowsing",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blockedSafeBrowsingRow,
onChanged: updateSelectedResultStatus
),
_Item(
selectedResultStatus: selectedResultStatus,
id: "blocked_parental",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blockedParentalRow,
onChanged: updateSelectedResultStatus
),
_Item(
selectedResultStatus: selectedResultStatus,
id: "safe_search",
icon: Icons.gpp_bad_rounded,
label: AppLocalizations.of(context)!.blockedSafeSearchRow,
onChanged: updateSelectedResultStatus
),
],
),
),
),
Padding(
padding: const EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: onApply,
child: Text(AppLocalizations.of(context)!.apply)
)
],
),
),
if (Platform.isIOS) const SizedBox(height: 16)
],
);
}
}
class _Item extends StatelessWidget {
final String selectedResultStatus;
final String id;
final IconData icon;
final String label;
final void Function(String) onChanged;
const _Item({
required this.selectedResultStatus,
required this.id,
required this.icon,
required this.label,
required this.onChanged,
});
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () => onChanged(id),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: Row(
children: [
Icon(
icon,
size: 24,
color: Theme.of(context).listTileTheme.iconColor
),
const SizedBox(width: 16),
Flexible(
child: Text(
label,
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.onSurface
),
),
)
],
),
),
Radio(
value: id,
groupValue: selectedResultStatus,
onChanged: (v) => onChanged(v!)
)
],
),
),
),
);
}
}