Move background button from project settings to top corner button and…

… improve grid files view
LinwoodDev · Jan 1, 2025 · bfa7f40 · bfa7f40
1 parent 887cfa9
commit bfa7f40
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 28 deletions.
diff --git a/app/lib/selections/file.dart b/app/lib/selections/file.dart
@@ -53,7 +53,7 @@ class _UtilitiesViewState extends State<_UtilitiesView>
 
   @override
   void initState() {
-    _tabController = TabController(length: 3, vsync: this);
+    _tabController = TabController(length: 2, vsync: this);
 
     _tabController.addListener(_onTabChange);
 
@@ -97,7 +97,6 @@ class _UtilitiesViewState extends State<_UtilitiesView>
         isScrollable: true,
         tabs: <List<dynamic>>[
           [PhosphorIconsLight.file, AppLocalizations.of(context).file],
-          [PhosphorIconsLight.book, AppLocalizations.of(context).page],
           [PhosphorIconsLight.camera, AppLocalizations.of(context).camera],
         ]
             .map((e) =>
@@ -259,8 +258,8 @@ class _UtilitiesViewState extends State<_UtilitiesView>
                                           filled: true,
                                           suffixIcon: IconButton(
                                             icon: Icon(showPassword
-                                                ? PhosphorIconsLight.eye
-                                                : PhosphorIconsLight.eyeSlash),
+                                                ? PhosphorIconsLight.eyeSlash
+                                                : PhosphorIconsLight.eye),
                                             onPressed: () => setState(
                                               () =>
                                                   showPassword = !showPassword,
@@ -285,8 +284,8 @@ class _UtilitiesViewState extends State<_UtilitiesView>
                                           filled: true,
                                           suffixIcon: IconButton(
                                             icon: Icon(showConfirmPassword
-                                                ? PhosphorIconsLight.eye
-                                                : PhosphorIconsLight.eyeSlash),
+                                                ? PhosphorIconsLight.eyeSlash
+                                                : PhosphorIconsLight.eye),
                                             onPressed: () => setState(
                                               () => showConfirmPassword =
                                                   !showConfirmPassword,
@@ -334,18 +333,6 @@ class _UtilitiesViewState extends State<_UtilitiesView>
                     )
                   ],
                 ),
-                Column(children: [
-                  MenuItemButton(
-                    leadingIcon: const PhosphorIcon(PhosphorIconsLight.image),
-                    shortcut: const SingleActivator(LogicalKeyboardKey.keyB,
-                        control: true),
-                    onPressed: () {
-                      Actions.maybeInvoke<BackgroundIntent>(
-                          context, BackgroundIntent(context));
-                    },
-                    child: Text(AppLocalizations.of(context).background),
-                  ),
-                ]),
                 Column(
                   children: [
                     OffsetPropertyView(

diff --git a/app/lib/views/app_bar.dart b/app/lib/views/app_bar.dart
@@ -1,5 +1,6 @@
 import 'dart:math';
 
+import 'package:butterfly/actions/background.dart';
 import 'package:butterfly/actions/change_path.dart';
 import 'package:butterfly/actions/settings.dart';
 import 'package:butterfly/actions/svg_export.dart';
@@ -388,6 +389,16 @@ class _MainPopupMenu extends StatelessWidget {
                     ),
                   ),
                 const Divider(),
+                MenuItemButton(
+                  leadingIcon: const PhosphorIcon(PhosphorIconsLight.image),
+                  shortcut: const SingleActivator(LogicalKeyboardKey.keyB,
+                      control: true),
+                  onPressed: () {
+                    Actions.maybeInvoke<BackgroundIntent>(
+                        context, BackgroundIntent(context));
+                  },
+                  child: Text(AppLocalizations.of(context).background),
+                ),
                 SubmenuButton(
                   menuChildren: [
                     MenuItemButton(

diff --git a/app/lib/views/files/grid.dart b/app/lib/views/files/grid.dart
@@ -47,10 +47,13 @@ class FileEntityGridItem extends StatelessWidget {
     final settingsCubit = fileSystem.settingsCubit;
     final remote = settingsCubit.getRemote(entity.location.remote);
     final documentSystem = fileSystem.buildDocumentSystem(remote);
-    final leading = PhosphorIcon(
-      icon,
-      color: colorScheme.outline,
-      size: 48,
+    final leading = Align(
+      alignment: Alignment.bottomCenter,
+      child: PhosphorIcon(
+        icon,
+        color: colorScheme.outline,
+        size: 48,
+      ),
     );
     return Card(
         elevation: 5,
@@ -59,7 +62,7 @@ class FileEntityGridItem extends StatelessWidget {
           horizontal: 0,
         ),
         shape: RoundedRectangleBorder(
-          borderRadius: BorderRadius.circular(16),
+          borderRadius: BorderRadius.circular(12),
           side: active
               ? BorderSide(
                   color: colorScheme.primaryContainer,
@@ -86,10 +89,10 @@ class FileEntityGridItem extends StatelessWidget {
                       child: Container(
                         height: 96,
                         padding: const EdgeInsets.only(
-                          left: 8,
-                          right: 8,
-                          top: 16,
-                          bottom: 8,
+                          left: 4,
+                          right: 4,
+                          top: 4,
+                          bottom: 2,
                         ),
                         child: thumbnail != null
                             ? AspectRatio(
@@ -127,7 +130,10 @@ class FileEntityGridItem extends StatelessWidget {
                 const SizedBox(height: 8),
                 Expanded(
                   child: Padding(
-                    padding: const EdgeInsets.all(8.0),
+                    padding: const EdgeInsets.symmetric(
+                      vertical: 4,
+                      horizontal: 12,
+                    ),
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.end,
                       crossAxisAlignment: CrossAxisAlignment.stretch,

diff --git a/docs/src/content/docs/docs/v2/utilities.md b/docs/src/content/docs/docs/v2/utilities.md
@@ -11,6 +11,12 @@ Additionally you can capture a thumbnail from the current viewport to see it in
 
 ## Page
 
+:::note
+
+This tab was removed in the nightly release.
+Please use the background menu item in the top left corner menu
+:::
+
 Here are all page specific properties. Currently you can find the background setting here.
 
 ## View

diff --git a/metadata/en-US/changelogs/127.txt b/metadata/en-US/changelogs/127.txt
@@ -8,8 +8,10 @@
   * Add size property
 * Move grid into own tool
   * Add offset property
+* Move background button from project settings to top corner button
 * Add password protected notes ([#771](https://github.com/LinwoodDev/Butterfly/issues/771))
 * Add option to import svg as text ([#596](https://github.com/LinwoodDev/Butterfly/issues/596))
+* Improve grid files view
 * Fix undo/redo tools not showing status correctly
 * Fix grid not working correctly
 * Fix capture thumbnail uses wrong position
-Original file line number
+Diff line change
@@ Expand Up @@
     ## Page
+    :::note
+    This tab was removed in the nightly release.
+    Please use the background menu item in the top left corner menu
+    :::
     Here are all page specific properties. Currently you can find the background setting here.
     ## View
@@ Expand Down @@