admin/linkding-ios
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Changed add link design

Browse Source
This commit is contained in:
Juan Gilsanz Polo
2024-02-23 19:48:52 +01:00
parent 371081ab73
commit ca15b8a445
8 changed files with 359 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files

455
lib/screens/links/ui/add_link_modal.dart
View File

@@ -1,266 +1,231 @@
import 'package:expandable/expandable.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:linkdy/screens/links/provider/add_link.provider.dart';
import 'package:linkdy/widgets/autocomplete_text_field.dart';
import 'package:linkdy/widgets/section_label.dart';
import 'package:linkdy/constants/enums.dart';
import 'package:linkdy/i18n/strings.g.dart';
import 'package:linkdy/constants/enums.dart';
class AddLinkModal extends ConsumerStatefulWidget {
const AddLinkModal({Key? key}) : super(key: key);
class AddLinkModal extends ConsumerWidget {
final bool fullscreen;
const AddLinkModal({
Key? key,
required this.fullscreen,
}) : super(key: key);
@override
AddLinkModalState createState() => AddLinkModalState();
}
class AddLinkModalState extends ConsumerState<AddLinkModal> with SingleTickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _animation;
@override
void initState() {
_animationController = AnimationController(
duration: const Duration(milliseconds: 200),
vsync: this,
);
_animation = Tween(
begin: 0.0,
end: 0.5,
).animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
Widget build(BuildContext context, WidgetRef ref) {
return Dialog.fullscreen(
child: Scaffold(
appBar: AppBar(
leading: CloseButton(
onPressed: () => Navigator.pop(context),
),
title: Text(t.links.addLink.addLink),
actions: [
IconButton(
onPressed: ref.watch(addLinkProvider).checkBookmark != null
? () => ref.read(addLinkProvider.notifier).addBookmark()
: null,
icon: const Icon(Icons.save_rounded),
tooltip: t.generic.save,
),
const SizedBox(width: 8),
],
),
body: const _ModalContent(),
),
);
super.initState();
}
}
class _ModalContent extends ConsumerWidget {
const _ModalContent({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final provider = ref.watch(addLinkProvider);
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
decoration: BoxDecoration(
borderRadius: const BorderRadius.only(topLeft: Radius.circular(28), topRight: Radius.circular(28)),
color: Theme.of(context).dialogBackgroundColor,
),
child: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 24),
Icon(
Icons.add_rounded,
color: Theme.of(context).colorScheme.secondary,
size: 24,
),
const SizedBox(height: 16),
Text(
t.links.addLink.addLink,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 24),
),
const SizedBox(height: 24),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: TextFormField(
controller: provider.urlController,
onChanged: ref.read(addLinkProvider.notifier).validateUrl,
enabled: provider.checkBookmarkLoadStatus != LoadStatus.loading,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.link_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
errorText: provider.urlError,
labelText: t.links.addLink.url,
),
),
),
if (provider.checkBookmarkLoadStatus == LoadStatus.loading)
Padding(
padding: const EdgeInsets.only(top: 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 12,
width: 12,
child: CircularProgressIndicator(
strokeWidth: 2,
),
),
const SizedBox(width: 8),
Text(t.links.addLink.checkingUrl),
],
),
),
if (provider.checkBookmark != null) ...[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
child: Divider(),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: TextFormField(
controller: provider.titleController,
// onChanged: ref.read(addLinkProvider.notifier).validateUrl,
// enabled: provider.checkBookmarkLoadStatus != LoadStatus.loading,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.title_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
errorText: provider.urlError,
labelText: t.links.addLink.title,
hintText: provider.checkBookmark?.metadata?.title,
floatingLabelBehavior: FloatingLabelBehavior.always,
helperText: t.links.addLink.leaveEmptyUseWebsiteTitle,
),
),
),
const SizedBox(height: 24),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: TextFormField(
controller: provider.descriptionController,
// onChanged: ref.read(addLinkProvider.notifier).validateUrl,
// enabled: provider.checkBookmarkLoadStatus != LoadStatus.loading,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.description_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
errorText: provider.urlError,
labelText: t.links.addLink.description,
hintText: provider.checkBookmark?.metadata?.description,
floatingLabelBehavior: FloatingLabelBehavior.always,
helperText: t.links.addLink.leaveEmptyUseWebsiteDescription,
),
),
),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: ExpandablePanel(
controller: provider.expandableController,
collapsed: ListTile(
onTap: () {
_animationController.animateTo(provider.expandableController.expanded == true ? 0 : 1);
provider.expandableController.toggle();
},
title: Text(t.links.addLink.addNotes),
trailing: RotationTransition(
turns: _animation,
child: Icon(
Icons.expand_more_rounded,
size: 26,
color: Theme.of(context).colorScheme.secondary,
),
),
contentPadding: const EdgeInsets.all(0),
),
expanded: Column(
children: [
ListTile(
onTap: () {
_animationController.animateTo(
provider.expandableController.expanded == true ? 0 : 1,
);
provider.expandableController.toggle();
},
title: Text(t.links.addLink.addNotes),
trailing: RotationTransition(
turns: _animation,
child: Icon(
Icons.expand_more_rounded,
size: 26,
color: Theme.of(context).colorScheme.secondary,
),
),
contentPadding: const EdgeInsets.all(0),
),
const SizedBox(height: 8),
SizedBox(
height: 130,
child: TextFormField(
controller: provider.notesController,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.note_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
labelText: t.links.addLink.notes,
),
autocorrect: false,
expands: true,
minLines: null,
maxLines: null,
textAlignVertical: TextAlignVertical.top,
),
),
const SizedBox(height: 16),
],
),
),
),
SwitchListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 0),
title: Text(t.links.addLink.markAsUnread),
value: provider.markAsUnread,
onChanged: ref.read(addLinkProvider.notifier).updateMarkAsUnread,
),
],
],
),
),
),
Padding(
padding: const EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(t.generic.cancel),
),
const SizedBox(width: 8),
if (provider.checkBookmark == null)
TextButton(
onPressed: provider.checkBookmarkLoadStatus != LoadStatus.loading
? ref.read(addLinkProvider.notifier).checkUrlDetails
: null,
child: Text(t.generic.next),
),
if (provider.checkBookmark != null)
TextButton(
onPressed: ref.read(addLinkProvider.notifier).addBookmark,
child: Text(t.generic.confirm),
),
],
),
),
],
return ListView(
children: [
const SizedBox(height: 16),
SectionLabel(
label: t.links.addLink.bookmarkUrl,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 0,
),
),
),
const SizedBox(height: 24),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: TextFormField(
controller: provider.urlController,
onChanged: ref.read(addLinkProvider.notifier).validateUrl,
enabled: provider.checkBookmarkLoadStatus != LoadStatus.loading,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.link_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
errorText: provider.urlError,
labelText: t.links.addLink.url,
),
),
),
const SizedBox(height: 16),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Center(
child: ElevatedButton(
onPressed: provider.checkBookmarkLoadStatus == null &&
provider.urlError == null &&
provider.urlController.text != ""
? () => ref.read(addLinkProvider.notifier).checkUrlDetails()
: null,
style: ButtonStyle(
foregroundColor: provider.checkBookmarkLoadStatus == LoadStatus.loaded
? const MaterialStatePropertyAll(Colors.green)
: provider.checkBookmarkLoadStatus == LoadStatus.loaded
? const MaterialStatePropertyAll(Colors.red)
: null,
backgroundColor: provider.checkBookmarkLoadStatus == LoadStatus.loaded
? MaterialStatePropertyAll(Colors.green.withOpacity(0.15))
: provider.checkBookmarkLoadStatus == LoadStatus.loaded
? MaterialStatePropertyAll(Colors.red.withOpacity(0.15))
: null,
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (provider.checkBookmarkLoadStatus == null) Text(t.links.addLink.validateUrl),
if (provider.checkBookmarkLoadStatus == LoadStatus.loading) ...[
const SizedBox(
width: 12,
height: 12,
child: CircularProgressIndicator(
strokeWidth: 2,
),
),
const SizedBox(width: 8),
Text(t.links.addLink.checkingUrl),
],
if (provider.checkBookmarkLoadStatus == LoadStatus.loaded) ...[
const Icon(Icons.check_circle_rounded),
const SizedBox(width: 8),
Text(t.links.addLink.urlValid),
],
if (provider.checkBookmarkLoadStatus == LoadStatus.error) ...[
const Icon(Icons.error_rounded),
const SizedBox(width: 8),
Text(t.links.addLink.cannotCheckUrl),
],
],
),
),
),
),
SectionLabel(
label: t.links.addLink.bookmarkDetails,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 24,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: TextFormField(
controller: provider.titleController,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.title_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
labelText: t.links.addLink.title,
hintText: provider.checkBookmark?.metadata?.title,
floatingLabelBehavior:
provider.checkBookmark != null ? FloatingLabelBehavior.always : FloatingLabelBehavior.auto,
helperText: t.links.addLink.leaveEmptyUseWebsiteTitle,
enabled: provider.checkBookmark != null,
),
),
),
const SizedBox(height: 24),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: TextFormField(
controller: provider.descriptionController,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.description_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
labelText: t.links.addLink.description,
hintText: provider.checkBookmark?.metadata?.description,
floatingLabelBehavior:
provider.checkBookmark != null ? FloatingLabelBehavior.always : FloatingLabelBehavior.auto,
helperText: t.links.addLink.leaveEmptyUseWebsiteDescription,
enabled: provider.checkBookmark != null,
),
),
),
SectionLabel(
label: t.links.addLink.tags,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 24,
),
),
SectionLabel(
label: t.links.addLink.others,
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 24,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: SizedBox(
height: 150,
child: TextFormField(
controller: provider.notesController,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.note_rounded),
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
labelText: t.links.addLink.notes,
helperText: t.generic.optional,
),
autocorrect: false,
expands: true,
minLines: null,
maxLines: null,
textAlignVertical: TextAlignVertical.top,
enabled: provider.checkBookmark != null,
),
),
),
const SizedBox(height: 12),
SwitchListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
title: Text(t.links.addLink.markAsUnread),
value: provider.markAsUnread,
onChanged:
provider.checkBookmark != null ? (v) => ref.read(addLinkProvider.notifier).updateMarkAsUnread(v) : null,
),
],
);
}
}

20
lib/screens/links/ui/links.dart
View File

@@ -1,3 +1,5 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
@@ -16,6 +18,8 @@ class Links extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final bookmarks = ref.watch(linksRequestProvider);
final width = MediaQuery.of(context).size.width;
String validateStrings(String? string1, String? string2) {
if (string1 != null && string1.isNotEmpty) {
return string1;
@@ -44,12 +48,18 @@ class Links extends ConsumerWidget {
}
void openAddModal() {
showModalBottomSheet(
useRootNavigator: true,
showGeneralDialog(
context: context,
isScrollControlled: true,
useSafeArea: true,
builder: (context) => const AddLinkModal(),
barrierColor: !(width > 700 || !(Platform.isAndroid || Platform.isIOS)) ? Colors.transparent : Colors.black54,
transitionBuilder: (context, anim1, anim2, child) {
return SlideTransition(
position: Tween(begin: const Offset(0, 1), end: const Offset(0, 0)).animate(
CurvedAnimation(parent: anim1, curve: Curves.easeInOutCubicEmphasized),
),
child: child,
);
},
pageBuilder: (context, animation, secondaryAnimation) => AddLinkModal(fullscreen: width <= 700),
);
}