fix: icon color, padding and banner constraints to width

squidrye · Nov 15, 2023 · c152e1e · c152e1e
1 parent 563b362
commit c152e1e
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 95 deletions.
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_sizes.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_sizes.dart
@@ -4,6 +4,7 @@ class HomeSizes {
   static const double editPanelTopBarHeight = 60;
   static const double editPanelWidth = 400;
   static const double tabBarHeight = 40;
+  static const double readOnlyBannerHeight = 24;
   static const double tabWidth = 200;
   static const double resizeBarThickness = 2;
 }

diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/home_stack.dart
@@ -250,7 +250,11 @@ class PageManager {
         selector: (context, notifier) => notifier.titleWidget,
         builder: (context, widget, child) {
           return MoveWindowDetector(
-            child: HomeTopBar(layout: layout, paneId: paneId),
+            child: HomeTopBar(
+              layout: layout,
+              paneId: paneId,
+              notifier: notifier,
+            ),
           );
         },
       ),
@@ -276,55 +280,88 @@ class PageManager {
 }
 
 class HomeTopBar extends StatelessWidget {
-  const HomeTopBar({super.key, required this.layout, required this.paneId});
+  const HomeTopBar({
+    super.key,
+    required this.layout,
+    required this.paneId,
+    required this.notifier,
+  });
 
+  final PageNotifier notifier;
   final HomeLayout layout;
   final String paneId;
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      color: Theme.of(context).colorScheme.onSecondaryContainer,
-      height: HomeSizes.topBarHeight,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(
-          horizontal: HomeInsets.topBarTitlePadding,
+    return Column(
+      children: [
+        Container(
+          color: Theme.of(context).colorScheme.onSecondaryContainer,
+          height: HomeSizes.topBarHeight,
+          child: Padding(
+            padding: const EdgeInsets.symmetric(
+              horizontal: HomeInsets.topBarTitlePadding,
+            ),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                HSpace(layout.menuSpacing),
+                FlowyNavigation(currentPaneId: paneId),
+                const HSpace(16),
+                ChangeNotifierProvider.value(
+                  value: Provider.of<PageNotifier>(context, listen: false),
+                  child: Consumer(
+                    builder: (_, PageNotifier notifier, __) =>
+                        notifier.plugin.widgetBuilder.rightBarItem ??
+                        const SizedBox.shrink(),
+                  ),
+                ),
+                BlocBuilder<PanesBloc, PanesState>(
+                  builder: (context, state) {
+                    if (state.count <= 1) {
+                      return const SizedBox.shrink();
+                    }
+
+                    return Padding(
+                      padding: const EdgeInsets.all(2),
+                      child: FlowyIconButton(
+                        iconColorOnHover:
+                            Theme.of(context).colorScheme.onSurface,
+                        onPressed: () => context
+                            .read<PanesBloc>()
+                            .add(ClosePane(paneId: paneId)),
+                        icon: const FlowySvg(FlowySvgs.close_s),
+                      ),
+                    );
+                  },
+                ),
+              ],
+            ),
+          ).bottomBorder(color: Theme.of(context).dividerColor),
         ),
+        if (notifier.readOnly) _buildReadOnlyBanner(context),
+      ],
+    );
+  }
+
+  Widget _buildReadOnlyBanner(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    return Container(
+      width: double.infinity,
+      color: colorScheme.primary,
+      child: FittedBox(
+        alignment: Alignment.center,
+        fit: BoxFit.scaleDown,
         child: Row(
-          crossAxisAlignment: CrossAxisAlignment.center,
           children: [
-            HSpace(layout.menuSpacing),
-            FlowyNavigation(currentPaneId: paneId),
-            const HSpace(16),
-            ChangeNotifierProvider.value(
-              value: Provider.of<PageNotifier>(context, listen: false),
-              child: Consumer(
-                builder: (_, PageNotifier notifier, __) =>
-                    notifier.plugin.widgetBuilder.rightBarItem ??
-                    const SizedBox(),
-              ),
-            ),
-            BlocBuilder<PanesBloc, PanesState>(
-              builder: (context, state) {
-                if (state.count <= 1) {
-                  return const SizedBox.shrink();
-                }
-
-                return Padding(
-                  padding: const EdgeInsets.all(2),
-                  child: FlowyIconButton(
-                    iconColorOnHover: Theme.of(context).colorScheme.onSurface,
-                    onPressed: () => context
-                        .read<PanesBloc>()
-                        .add(ClosePane(paneId: paneId)),
-                    icon: const FlowySvg(FlowySvgs.close_s),
-                  ),
-                );
-              },
+            FlowyText.medium(
+              LocaleKeys.readOnlyViewText.tr(),
+              fontSize: 14,
+              color: Theme.of(context).colorScheme.onSurface,
             ),
           ],
         ),
-      ).bottomBorder(color: Theme.of(context).dividerColor),
+      ),
     );
   }
 }
@@ -358,41 +395,36 @@ class _HomeBodyState extends State<HomeBody> {
     if (widget.notifier.readOnly) {
       return ValueListenableBuilder(
         valueListenable: absorbTapsNotifier,
-        builder: (_, value, __) => Stack(
-          children: [
-            GestureDetector(
-              child: Listener(
-                behavior: HitTestBehavior.translucent,
-                onPointerPanZoomUpdate: (event) {
-                  absorbTapsNotifier.value = false;
-                  _timer?.cancel();
-                },
-                onPointerPanZoomEnd: (event) {
-                  _timer?.cancel();
-                  _applyTimer();
-                },
-                onPointerPanZoomStart: (event) {
-                  absorbTapsNotifier.value = false;
-                  _timer?.cancel();
-                },
-                onPointerSignal: (signal) {
-                  if (signal is PointerScrollEvent) {
-                    absorbTapsNotifier.value = false;
-                    _timer?.cancel();
-                    _applyTimer();
-                  }
-                },
-                child: IgnorePointer(
-                  ignoring: value,
-                  child: Opacity(
-                    opacity: 0.5,
-                    child: _buildWidgetStack(onDeleted: widget.onDeleted),
-                  ),
-                ),
+        builder: (_, value, __) => GestureDetector(
+          child: Listener(
+            behavior: HitTestBehavior.translucent,
+            onPointerPanZoomUpdate: (event) {
+              absorbTapsNotifier.value = false;
+              _timer?.cancel();
+            },
+            onPointerPanZoomEnd: (event) {
+              _timer?.cancel();
+              _applyTimer();
+            },
+            onPointerPanZoomStart: (event) {
+              absorbTapsNotifier.value = false;
+              _timer?.cancel();
+            },
+            onPointerSignal: (signal) {
+              if (signal is PointerScrollEvent) {
+                absorbTapsNotifier.value = false;
+                _timer?.cancel();
+                _applyTimer();
+              }
+            },
+            child: IgnorePointer(
+              ignoring: value,
+              child: Opacity(
+                opacity: 0.5,
+                child: _buildWidgetStack(onDeleted: widget.onDeleted),
               ),
             ),
-            Positioned(child: _buildReadOnlyBanner(context)),
-          ],
+          ),
         ),
       );
     }
@@ -430,27 +462,4 @@ class _HomeBodyState extends State<HomeBody> {
       ).toList(),
     );
   }
-
-  Widget _buildReadOnlyBanner(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-    return ConstrainedBox(
-      constraints: const BoxConstraints(minHeight: 20),
-      child: Container(
-        width: double.infinity,
-        color: colorScheme.primary,
-        child: FittedBox(
-          alignment: Alignment.center,
-          fit: BoxFit.scaleDown,
-          child: Row(
-            children: [
-              FlowyText.medium(
-                LocaleKeys.readOnlyViewText.tr(),
-                fontSize: 14,
-              ),
-            ],
-          ),
-        ),
-      ),
-    );
-  }
 }
diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/flowy_pane.dart b/frontend/appflowy_flutter/lib/workspace/presentation/home/panes/flowy_pane.dart
@@ -46,10 +46,14 @@ class _FlowyPaneState extends State<FlowyPane> {
       create: (context) => widget.node.tabsController,
       child: Consumer<TabsController>(
         builder: (_, value, __) {
-          final topHeight = value.pages == 1
+          double topHeight = value.pages == 1
               ? HomeSizes.topBarHeight
               : HomeSizes.topBarHeight + HomeSizes.tabBarHeight;
 
+          if (value.currentPageManager.readOnly) {
+            topHeight += HomeSizes.readOnlyBannerHeight;
+          }
+
           return DraggablePaneTarget(
             size: Size(
               widget.paneLayout.childPaneWidth,