From 0b73388b0b11def45b25ee30ba60d1ded041d46f Mon Sep 17 00:00:00 2001 From: AmanRajSinghMourya Date: Sat, 9 Aug 2025 11:35:00 +0530 Subject: [PATCH 1/6] fix search view background color --- .../lib/ui/tools/editor/image_editor/image_editor_page.dart | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart index e6bc90dbab..4f962d1357 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart @@ -227,6 +227,12 @@ class _ImageEditorPageState extends State { background: colorScheme.backgroundBase, ), emojiEditor: EmojiEditorTheme( + bottomActionBarConfig: BottomActionBarConfig( + showSearchViewButton: true, + buttonColor: colorScheme.backgroundBase, + buttonIconColor: colorScheme.tabIcon, + backgroundColor: colorScheme.backgroundBase, + ), backgroundColor: colorScheme.backgroundBase, ), ), From e32698e4be77e0c8e00bdfd92843c589ed22b23f Mon Sep 17 00:00:00 2001 From: AmanRajSinghMourya Date: Sat, 9 Aug 2025 23:33:36 +0530 Subject: [PATCH 2/6] update editor background color across image and video editor components --- mobile/apps/photos/lib/ente_theme_data.dart | 10 ++--- .../image_editor/circular_icon_button.dart | 8 ++-- .../image_editor_color_picker.dart | 5 +-- .../image_editor_crop_rotate.dart | 3 +- .../image_editor/image_editor_text_bar.dart | 13 ++++--- .../image_editor/image_editor_tune_bar.dart | 39 ++++++++++++++----- .../video_editor_bottom_action.dart | 2 +- .../video_editor_player_control.dart | 2 +- .../ui/tools/editor/video_editor_page.dart | 2 +- 9 files changed, 52 insertions(+), 32 deletions(-) diff --git a/mobile/apps/photos/lib/ente_theme_data.dart b/mobile/apps/photos/lib/ente_theme_data.dart index 6434e3ffe1..09fcb4a2e5 100644 --- a/mobile/apps/photos/lib/ente_theme_data.dart +++ b/mobile/apps/photos/lib/ente_theme_data.dart @@ -224,17 +224,17 @@ extension CustomColorScheme on ColorScheme { Color get videoPlayerPrimaryColor => brightness == Brightness.light ? const Color.fromRGBO(0, 179, 60, 1) : const Color.fromRGBO(1, 222, 77, 1); - - Color get videoPlayerBackgroundColor => brightness == Brightness.light - ? const Color(0xFFF5F5F5) - : const Color(0xFF252525); - + Color get videoPlayerBorderColor => brightness == Brightness.light ? const Color(0xFF424242) : const Color(0xFFFFFFFF); Color get imageEditorPrimaryColor => const Color.fromRGBO(8, 194, 37, 1); + Color get editorBackgroundColor => brightness == Brightness.light + ? const Color(0xFFF5F5F5) + : const Color(0xFF252525); + Color get defaultBackgroundColor => brightness == Brightness.light ? backgroundBaseLight : backgroundBaseDark; diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/circular_icon_button.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/circular_icon_button.dart index 7a025fe81f..1ecc52a7b7 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/circular_icon_button.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/circular_icon_button.dart @@ -3,7 +3,7 @@ import "package:flutter_svg/svg.dart"; import "package:photos/ente_theme_data.dart"; import "package:photos/theme/ente_theme.dart"; -class CircularIconButton extends StatelessWidget { +class CircularIconButton extends StatelessWidget { final String label; final VoidCallback onTap; final String? svgPath; @@ -11,7 +11,7 @@ class CircularIconButton extends StatelessWidget { final bool isSelected; const CircularIconButton({ - super.key, + super.key, required this.label, required this.onTap, this.svgPath, @@ -40,12 +40,12 @@ class CircularIconButton extends StatelessWidget { .colorScheme .imageEditorPrimaryColor .withOpacity(0.24) - : colorScheme.backgroundElevated2, + : Theme.of(context).colorScheme.editorBackgroundColor, shape: BoxShape.circle, border: Border.all( color: isSelected ? Theme.of(context).colorScheme.imageEditorPrimaryColor - : colorScheme.backgroundElevated2, + : Theme.of(context).colorScheme.editorBackgroundColor, width: 2, ), ), diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_color_picker.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_color_picker.dart index b87175d757..7aaa5f8880 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_color_picker.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_color_picker.dart @@ -1,5 +1,5 @@ import "package:flutter/material.dart"; -import "package:photos/theme/ente_theme.dart"; +import "package:photos/ente_theme_data.dart"; class ImageEditorColorPicker extends StatefulWidget { final double value; @@ -23,7 +23,6 @@ class ColorSliderState extends State { @override Widget build(BuildContext context) { - final colorScheme = getEnteColorScheme(context); return Padding( padding: const EdgeInsets.symmetric(horizontal: 20.0), child: SizedBox( @@ -55,7 +54,7 @@ class ColorSliderState extends State { end: Alignment.centerRight, ), border: Border.all( - color: colorScheme.backgroundElevated2, + color: Theme.of(context).colorScheme.editorBackgroundColor, width: 6, ), ), diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart index 10333cd3ce..31251e27ef 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_crop_rotate.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import "package:flutter_svg/svg.dart"; +import "package:photos/ente_theme_data.dart"; import "package:photos/generated/l10n.dart"; import "package:photos/theme/ente_theme.dart"; import "package:photos/ui/tools/editor/image_editor/circular_icon_button.dart"; @@ -191,7 +192,7 @@ class CropAspectChip extends StatelessWidget { decoration: BoxDecoration( color: isSelected ? colorScheme.fillBasePressed - : colorScheme.backgroundElevated2, + : Theme.of(context).colorScheme.editorBackgroundColor, borderRadius: BorderRadius.circular(25), ), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_text_bar.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_text_bar.dart index d4327fb136..14a21e00f1 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_text_bar.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_text_bar.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import "package:flutter_svg/svg.dart"; +import "package:photos/ente_theme_data.dart"; import "package:photos/generated/l10n.dart"; import "package:photos/theme/ente_theme.dart"; import "package:photos/ui/tools/editor/image_editor/circular_icon_button.dart"; @@ -174,7 +175,7 @@ class _FontPickerWidget extends StatelessWidget { decoration: BoxDecoration( color: isSelected ? colorScheme.fillBasePressed - : colorScheme.backgroundElevated2, + : Theme.of(context).colorScheme.editorBackgroundColor, borderRadius: BorderRadius.circular(25), ), child: Center( @@ -209,7 +210,7 @@ class _BackgroundPickerWidget extends StatelessWidget { 'text': 'Aa', 'selectedBackgroundColor': isLightMode ? colorScheme.fillFaint : Colors.white, - 'backgroundColor': colorScheme.backgroundElevated2, + 'backgroundColor': Theme.of(context).colorScheme.editorBackgroundColor, 'border': null, 'textColor': Colors.white, 'selectedInnerBackgroundColor': Colors.black, @@ -219,7 +220,7 @@ class _BackgroundPickerWidget extends StatelessWidget { 'text': 'Aa', 'selectedBackgroundColor': isLightMode ? colorScheme.fillFaint : Colors.white, - 'backgroundColor': colorScheme.backgroundElevated2, + 'backgroundColor': Theme.of(context).colorScheme.editorBackgroundColor, 'border': null, 'textColor': Colors.black, 'selectedInnerBackgroundColor': Colors.transparent, @@ -229,7 +230,7 @@ class _BackgroundPickerWidget extends StatelessWidget { 'text': 'Aa', 'selectedBackgroundColor': isLightMode ? colorScheme.fillFaint : Colors.white, - 'backgroundColor': colorScheme.backgroundElevated2, + 'backgroundColor': Theme.of(context).colorScheme.editorBackgroundColor, 'border': null, 'textColor': Colors.black, 'selectedInnerBackgroundColor': Colors.black.withOpacity(0.11), @@ -241,7 +242,7 @@ class _BackgroundPickerWidget extends StatelessWidget { 'text': 'Aa', 'selectedBackgroundColor': isLightMode ? colorScheme.fillFaint : Colors.black, - 'backgroundColor': colorScheme.backgroundElevated2, + 'backgroundColor': Theme.of(context).colorScheme.editorBackgroundColor, 'border': isLightMode ? null : Border.all(color: Colors.white, width: 2), 'textColor': Colors.black, @@ -354,7 +355,7 @@ class _AlignPickerWidget extends StatelessWidget { decoration: BoxDecoration( color: isSelected ? colorScheme.fillBasePressed - : colorScheme.backgroundElevated2, + : Theme.of(context).colorScheme.editorBackgroundColor, borderRadius: BorderRadius.circular(25), border: isSelected ? Border.all(color: Colors.black, width: 2) diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart index a7b5c69da4..d3cafa0bc5 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart @@ -1,6 +1,7 @@ import 'dart:math'; import 'package:flutter/material.dart'; +import "package:flutter/services.dart"; import "package:flutter_svg/svg.dart"; import "package:photos/ente_theme_data.dart"; import "package:photos/theme/ente_theme.dart"; @@ -36,6 +37,24 @@ class _ImageEditorTuneBarState extends State with ImageEditorConvertedConfigs, SimpleConfigsAccessState { TuneEditorState get tuneEditor => widget.editor; + final Map _lastValues = {}; + + void _handleTuneItemTap(int index) { + if (tuneEditor.selectedIndex == index) { + final currentValue = tuneEditor.tuneAdjustmentMatrix[index].value; + if (currentValue != 0) { + _lastValues[index] = currentValue; + tuneEditor.onChanged(0); + } else if (_lastValues.containsKey(index)) { + tuneEditor.onChanged(_lastValues[index]!); + } + } else { + tuneEditor.setState(() { + tuneEditor.selectedIndex = index; + }); + } + } + @override Widget build(BuildContext context) { return LayoutBuilder( @@ -77,11 +96,7 @@ class _ImageEditorTuneBarState extends State value: tuneEditor.tuneAdjustmentMatrix[index].value, max: item.max, min: item.min, - onTap: () { - tuneEditor.setState(() { - tuneEditor.selectedIndex = index; - }); - }, + onTap: () => _handleTuneItemTap(index), ); }), ), @@ -224,7 +239,10 @@ class _CircularProgressWithValueState extends State @override void didUpdateWidget(CircularProgressWithValue oldWidget) { super.didUpdateWidget(oldWidget); - + if ((oldWidget.value < 0 && widget.value >= 0) || + (oldWidget.value > 0 && widget.value <= 0)) { + HapticFeedback.mediumImpact(); + } if (oldWidget.value != widget.value) { _previousValue = oldWidget.value; _progressAnimation = Tween( @@ -303,11 +321,11 @@ class _CircularProgressWithValueState extends State shape: BoxShape.circle, color: showValue || widget.isSelected ? progressColor.withOpacity(0.2) - : colorTheme.backgroundElevated2, + : Theme.of(context).colorScheme.editorBackgroundColor, border: Border.all( color: widget.isSelected ? progressColor.withOpacity(0.4) - : colorTheme.backgroundElevated2, + : Theme.of(context).colorScheme.editorBackgroundColor, width: 2, ), ), @@ -395,7 +413,7 @@ class _TuneAdjustWidget extends StatelessWidget { margin: const EdgeInsets.symmetric(horizontal: 20), decoration: BoxDecoration( borderRadius: BorderRadius.circular(25), - color: colorScheme.backgroundElevated2, + color: Theme.of(context).colorScheme.editorBackgroundColor, ), ), ), @@ -410,7 +428,8 @@ class _TuneAdjustWidget extends StatelessWidget { overlayShape: const RoundSliderOverlayShape(overlayRadius: 0), activeTrackColor: Theme.of(context).colorScheme.imageEditorPrimaryColor, - inactiveTrackColor: colorScheme.backgroundElevated2, + inactiveTrackColor: + Theme.of(context).colorScheme.editorBackgroundColor, trackShape: const _CenterBasedTrackShape(), trackHeight: 24, ), diff --git a/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_bottom_action.dart b/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_bottom_action.dart index ed21e96dbf..d6c0f8aef6 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_bottom_action.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_bottom_action.dart @@ -31,7 +31,7 @@ class VideoEditorBottomAction extends StatelessWidget { height: 48, width: 48, decoration: BoxDecoration( - color: Theme.of(context).colorScheme.videoPlayerBackgroundColor, + color: Theme.of(context).colorScheme.editorBackgroundColor, shape: BoxShape.circle, border: Border.all( color: isSelected diff --git a/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_player_control.dart b/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_player_control.dart index 719b62dd60..b05fc13789 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_player_control.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/video_editor/video_editor_player_control.dart @@ -43,7 +43,7 @@ class VideoEditorPlayerControl extends StatelessWidget { vertical: 4, ), decoration: BoxDecoration( - color: Theme.of(context).colorScheme.videoPlayerBackgroundColor, + color: Theme.of(context).colorScheme.editorBackgroundColor, borderRadius: BorderRadius.circular(56), ), child: Row( diff --git a/mobile/apps/photos/lib/ui/tools/editor/video_editor_page.dart b/mobile/apps/photos/lib/ui/tools/editor/video_editor_page.dart index 679cea3c23..451a3d934a 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/video_editor_page.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/video_editor_page.dart @@ -74,7 +74,7 @@ class _VideoEditorPageState extends State { trimStyle: TrimSliderStyle( onTrimmedColor: const ColorScheme.dark().videoPlayerPrimaryColor, onTrimmingColor: const ColorScheme.dark().videoPlayerPrimaryColor, - background: Theme.of(context).colorScheme.videoPlayerBackgroundColor, + background: Theme.of(context).colorScheme.editorBackgroundColor, positionLineColor: Theme.of(context).colorScheme.videoPlayerBorderColor, lineColor: Theme.of(context) From 72f9d9e75615d9e199acae0a21536a61f61262bd Mon Sep 17 00:00:00 2001 From: AmanRajSinghMourya Date: Sat, 9 Aug 2025 23:34:15 +0530 Subject: [PATCH 3/6] refactor: fix bottom navigation bar colors --- .../image_editor/image_editor_page.dart | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart index 4f962d1357..ba28d1c293 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart @@ -1,10 +1,10 @@ import "dart:async"; import "dart:io"; import "dart:math"; -import "dart:typed_data"; import 'dart:ui' as ui show Image; import 'package:flutter/material.dart'; +import "package:flutter/services.dart"; import "package:flutter_image_compress/flutter_image_compress.dart"; import "package:flutter_svg/svg.dart"; import "package:logging/logging.dart"; @@ -176,17 +176,18 @@ class _ImageEditorPageState extends State { final isLightMode = Theme.of(context).brightness == Brightness.light; final colorScheme = getEnteColorScheme(context); final textTheme = getEnteTextTheme(context); - return Scaffold( - resizeToAvoidBottomInset: false, - backgroundColor: colorScheme.backgroundBase, - body: PopScope( - canPop: false, - onPopInvoked: (didPop) { - if (didPop) return; - editorKey.currentState?.disablePopScope = true; - _showExitConfirmationDialog(context); - }, - child: ProImageEditor.file( + return PopScope( + canPop: false, + onPopInvoked: (didPop) { + if (didPop) return; + editorKey.currentState?.disablePopScope = true; + _showExitConfirmationDialog(context); + }, + child: Scaffold( + extendBodyBehindAppBar: true, + resizeToAvoidBottomInset: false, + backgroundColor: colorScheme.backgroundBase, + body: ProImageEditor.file( key: editorKey, widget.file, callbacks: ProImageEditorCallbacks( @@ -205,6 +206,14 @@ class _ImageEditorPageState extends State { ), configs: ProImageEditorConfigs( imageEditorTheme: ImageEditorTheme( + uiOverlayStyle: SystemUiOverlayStyle( + systemNavigationBarContrastEnforced: true, + systemNavigationBarColor: Colors.transparent, + statusBarBrightness: + isLightMode ? Brightness.dark : Brightness.light, + statusBarIconBrightness: + isLightMode ? Brightness.dark : Brightness.light, + ), appBarBackgroundColor: colorScheme.backgroundBase, background: colorScheme.backgroundBase, bottomBarBackgroundColor: colorScheme.backgroundBase, From 1d25f23053f57b87965f7cedf91471f2b9f1e3d0 Mon Sep 17 00:00:00 2001 From: AmanRajSinghMourya Date: Mon, 11 Aug 2025 12:56:59 +0530 Subject: [PATCH 4/6] fix: update haptic feedback when reached zero --- .../lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart index d3cafa0bc5..7dcf73d4ed 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_tune_bar.dart @@ -241,7 +241,7 @@ class _CircularProgressWithValueState extends State super.didUpdateWidget(oldWidget); if ((oldWidget.value < 0 && widget.value >= 0) || (oldWidget.value > 0 && widget.value <= 0)) { - HapticFeedback.mediumImpact(); + HapticFeedback.vibrate(); } if (oldWidget.value != widget.value) { _previousValue = oldWidget.value; From 903762f28369f8247cf4be5c705efcd3ffacd7a2 Mon Sep 17 00:00:00 2001 From: AmanRajSinghMourya Date: Mon, 11 Aug 2025 15:34:02 +0530 Subject: [PATCH 5/6] fix: set initial color for painting editor --- .../lib/ui/tools/editor/image_editor/image_editor_page.dart | 1 + 1 file changed, 1 insertion(+) diff --git a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart index ba28d1c293..9d7fdf971a 100644 --- a/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart +++ b/mobile/apps/photos/lib/ui/tools/editor/image_editor/image_editor_page.dart @@ -221,6 +221,7 @@ class _ImageEditorPageState extends State { background: colorScheme.backgroundBase, ), paintingEditor: PaintingEditorTheme( + initialColor: const Color(0xFF00FFFF), background: colorScheme.backgroundBase, ), textEditor: const TextEditorTheme( From 4ff211868eb225b0f84f2b81eb335ca007d8c871 Mon Sep 17 00:00:00 2001 From: Neeraj Gupta <254676+ua741@users.noreply.github.com> Date: Tue, 12 Aug 2025 08:54:56 +0530 Subject: [PATCH 6/6] Update changes --- mobile/apps/photos/scripts/changes.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/mobile/apps/photos/scripts/changes.txt b/mobile/apps/photos/scripts/changes.txt index 965deccd99..6abb45295c 100644 --- a/mobile/apps/photos/scripts/changes.txt +++ b/mobile/apps/photos/scripts/changes.txt @@ -1 +1,2 @@ +- Aman: Fixed bottom nav bar color in light theme, resolved paint editor's initial color, and added tap-to-reset with haptics for tune adjustments (brightness/exposure) - Gracefully handle heic rendering on Android \ No newline at end of file