From 6e84720f0f21539ed3a535b7ac8c224a91dabdc8 Mon Sep 17 00:00:00 2001
From: Christian Pauly <christian-pauly@posteo.de>
Date: Sat, 5 Feb 2022 09:58:47 +0100
Subject: [PATCH] design: Improve create story page design

---
 lib/pages/add_story/add_story.dart      | 32 ++++++++---
 lib/pages/add_story/add_story_view.dart | 70 ++++++++++++++++---------
 2 files changed, 69 insertions(+), 33 deletions(-)

diff --git a/lib/pages/add_story/add_story.dart b/lib/pages/add_story/add_story.dart
index 90e3e588c..558f32731 100644
--- a/lib/pages/add_story/add_story.dart
+++ b/lib/pages/add_story/add_story.dart
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:io';
 
 import 'package:flutter/material.dart';
@@ -35,12 +36,25 @@ class AddStoryController extends State<AddStoryPage> {
 
   bool get hasMedia => image != null || video != null;
 
-  void updateColors() => hasMedia
-      ? null
-      : setState(() {
-          backgroundColor = controller.text.color;
-          backgroundColorDark = controller.text.darkColor;
-        });
+  bool hasText = false;
+
+  Timer? _updateColorsCooldown;
+
+  void updateColors() {
+    if (hasText != controller.text.isNotEmpty) {
+      setState(() {
+        hasText = controller.text.isNotEmpty;
+      });
+    }
+    _updateColorsCooldown?.cancel();
+    _updateColorsCooldown = Timer(
+      const Duration(seconds: 3),
+      () => setState(() {
+        backgroundColor = controller.text.color;
+        backgroundColorDark = controller.text.darkColor;
+      }),
+    );
+  }
 
   void importMedia() async {
     final picked = await FilePickerCross.importFromStorage(
@@ -88,6 +102,11 @@ class AddStoryController extends State<AddStoryPage> {
     });
   }
 
+  void reset() => setState(() {
+        image = video = null;
+        controller.clear();
+      });
+
   void postStory() async {
     if (video == null && image == null && controller.text.isEmpty) return;
     final client = Matrix.of(context).client;
@@ -150,7 +169,6 @@ class AddStoryController extends State<AddStoryPage> {
     backgroundColorDark = text.darkColor;
 
     final shareContent = Matrix.of(context).shareContent;
-    // ignore: unnecessary_null_comparison
     if (shareContent != null) {
       final shareFile = shareContent.tryGet<MatrixFile>('file')?.detectFileType;
 
diff --git a/lib/pages/add_story/add_story_view.dart b/lib/pages/add_story/add_story_view.dart
index f6bad492b..bdf942b78 100644
--- a/lib/pages/add_story/add_story_view.dart
+++ b/lib/pages/add_story/add_story_view.dart
@@ -4,7 +4,6 @@ import 'package:flutter/services.dart';
 import 'package:flutter_gen/gen_l10n/l10n.dart';
 import 'package:video_player/video_player.dart';
 
-import 'package:fluffychat/utils/platform_infos.dart';
 import 'add_story.dart';
 
 class AddStoryView extends StatelessWidget {
@@ -34,24 +33,13 @@ class AddStoryView extends StatelessWidget {
             ],
           ),
         ),
-        actions: controller.hasMedia
-            ? null
-            : [
-                IconButton(
-                  icon: const Icon(Icons.photo_outlined),
-                  onPressed: controller.importMedia,
-                ),
-                if (PlatformInfos.isMobile)
-                  IconButton(
-                    icon: const Icon(Icons.camera_alt_outlined),
-                    onPressed: controller.capturePhoto,
-                  ),
-                if (PlatformInfos.isMobile)
-                  IconButton(
-                    icon: const Icon(Icons.video_camera_back_outlined),
-                    onPressed: controller.captureVideo,
-                  ),
-              ],
+        actions: [
+          if (controller.hasMedia)
+            IconButton(
+              icon: const Icon(Icons.delete_outlined),
+              onPressed: controller.reset,
+            ),
+        ],
       ),
       extendBodyBehindAppBar: true,
       body: Stack(
@@ -104,7 +92,7 @@ class AddStoryView extends StatelessWidget {
                       ? null
                       : Colors.black.withOpacity(0.5),
                 ),
-                onEditingComplete: controller.updateColors,
+                onChanged: (_) => controller.updateColors(),
                 decoration: InputDecoration(
                   border: InputBorder.none,
                   hintText: controller.hasMedia
@@ -123,12 +111,42 @@ class AddStoryView extends StatelessWidget {
           ),
         ],
       ),
-      floatingActionButton: FloatingActionButton.extended(
-        onPressed: controller.postStory,
-        label: Text(L10n.of(context)!.publish),
-        backgroundColor: Theme.of(context).colorScheme.surface,
-        foregroundColor: Theme.of(context).colorScheme.onSurface,
-        icon: const Icon(Icons.send_rounded),
+      floatingActionButton: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          FloatingActionButton(
+            onPressed: controller.captureVideo,
+            backgroundColor: controller.backgroundColorDark,
+            foregroundColor: Colors.white,
+            heroTag: null,
+            child: const Icon(Icons.video_camera_front_outlined),
+          ),
+          const SizedBox(height: 16),
+          FloatingActionButton(
+            onPressed: controller.capturePhoto,
+            backgroundColor: controller.backgroundColorDark,
+            foregroundColor: Colors.white,
+            heroTag: null,
+            child: const Icon(Icons.camera_alt_outlined),
+          ),
+          const SizedBox(height: 16),
+          FloatingActionButton(
+            onPressed: controller.importMedia,
+            backgroundColor: controller.backgroundColorDark,
+            foregroundColor: Colors.white,
+            heroTag: null,
+            child: const Icon(Icons.photo_outlined),
+          ),
+          if (controller.hasMedia || controller.hasText) ...[
+            const SizedBox(height: 16),
+            FloatingActionButton(
+              onPressed: controller.postStory,
+              backgroundColor: Theme.of(context).colorScheme.surface,
+              foregroundColor: Theme.of(context).colorScheme.onSurface,
+              child: const Icon(Icons.send_rounded),
+            ),
+          ],
+        ],
       ),
     );
   }