From e926e5f882e17dc26a9ca0adc23de5839ff3a931 Mon Sep 17 00:00:00 2001
From: 23rd <23rd@vivaldi.net>
Date: Sat, 3 Apr 2021 17:58:49 +0300
Subject: [PATCH] Slightly improved style of controls in photo editor.

---
 Telegram/SourceFiles/editor/editor.style      | 40 +++++++++++++------
 .../editor/photo_editor_controls.cpp          | 28 +++++++------
 .../editor/photo_editor_controls.h            |  2 +-
 3 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/Telegram/SourceFiles/editor/editor.style b/Telegram/SourceFiles/editor/editor.style
index cb74ac3cc..6c6856d14 100644
--- a/Telegram/SourceFiles/editor/editor.style
+++ b/Telegram/SourceFiles/editor/editor.style
@@ -11,38 +11,54 @@ using "ui/widgets/widgets.style";
 using "ui/chat/chat.style";
 
 photoEditorControlsHeight: 100px;
-photoEditorControlsTopSkip: 50px;
+photoEditorControlsTopSkip: 40px;
 
-photoEditorButtonIconFg: historyComposeIconFg;
-photoEditorButtonIconFgOver: historyComposeIconFgOver;
+photoEditorButtonIconFg: mediaviewPipControlsFg;
+photoEditorButtonIconFgOver: mediaviewPipControlsFgOver;
 
-photoEditorButtonIconFgActive: historyComposeIconFgOver;
-photoEditorButtonIconFgInactive: menuFgDisabled;
+photoEditorButtonIconFgActive: lightButtonFg;
+photoEditorButtonIconFgInactive: mediaviewPipPlaybackInactive;
+
+photoEditorRotateButton: IconButton(defaultIconButton) {
+	width: 56px;
+	height: 56px;
 
-photoEditorRotateButton: IconButton(historyAttach) {
 	icon: icon {{ "photo_editor/rotate", photoEditorButtonIconFg }};
 	iconOver: icon {{ "photo_editor/rotate", photoEditorButtonIconFgOver }};
+
+	rippleAreaPosition: point(8px, 8px);
+	rippleAreaSize: 40px;
+	ripple: RippleAnimation(defaultRippleAnimation) {
+		color: shadowFg;
+	}
 }
-photoEditorFlipButton: IconButton(historyAttach) {
+photoEditorFlipButton: IconButton(photoEditorRotateButton) {
 	icon: icon {{ "photo_editor/flip", photoEditorButtonIconFg }};
 	iconOver: icon {{ "photo_editor/flip", photoEditorButtonIconFgOver }};
 }
-photoEditorPaintModeButton: IconButton(historyAttach) {
+photoEditorFlipIconActive: icon {{ "photo_editor/flip", photoEditorButtonIconFgActive }};
+
+photoEditorPaintModeButton: IconButton(photoEditorRotateButton) {
 	icon: icon {{ "photo_editor/paint", photoEditorButtonIconFg }};
 	iconOver: icon {{ "photo_editor/paint", photoEditorButtonIconFgOver }};
 }
-photoEditorUndoButton: IconButton(historyAttach) {
+photoEditorPaintIconActive: icon {{ "photo_editor/paint", photoEditorButtonIconFgActive }};
+
+photoEditorUndoButton: IconButton(photoEditorRotateButton) {
 	icon: icon {{ "photo_editor/undo", photoEditorButtonIconFg }};
 	iconOver: icon {{ "photo_editor/undo", photoEditorButtonIconFgOver }};
 }
-photoEditorRedoButton: IconButton(historyAttach) {
+
+photoEditorRedoButton: IconButton(photoEditorRotateButton) {
 	icon: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFg }};
 	iconOver: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFgOver }};
 }
-photoEditorStickersButton: IconButton(historyAttach) {
+
+photoEditorStickersButton: IconButton(photoEditorRotateButton) {
 	icon: icon {{ "settings_stickers", photoEditorButtonIconFg }};
 	iconOver: icon {{ "settings_stickers", photoEditorButtonIconFgOver }};
 }
+photoEditorStickersIconActive: icon {{ "settings_stickers", photoEditorButtonIconFgActive }};
 
 photoEditorUndoButtonInactive: icon {{ "photo_editor/undo", photoEditorButtonIconFgInactive }};
 photoEditorRedoButtonInactive: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFgInactive }};
@@ -51,7 +67,7 @@ photoEditorTextButtonPadding: margins(10px, 0px, 10px, 0px);
 
 photoEditorColorPickerTopSkip: 20px;
 photoEditorColorPickerWidth: 250px;
-photoEditorColorPickerLineHeight: 20px;
+photoEditorColorPickerLineHeight: 10px;
 photoEditorColorPickerCanvasHeight: 300px;
 photoEditorColorPickerCircleSize: 24px;
 photoEditorColorPickerCircleBigSize: 50px;
diff --git a/Telegram/SourceFiles/editor/photo_editor_controls.cpp b/Telegram/SourceFiles/editor/photo_editor_controls.cpp
index 4aca10010..98d20b245 100644
--- a/Telegram/SourceFiles/editor/photo_editor_controls.cpp
+++ b/Telegram/SourceFiles/editor/photo_editor_controls.cpp
@@ -138,7 +138,7 @@ PhotoEditorControls::PhotoEditorControls(
 	const PhotoModifications modifications,
 	bool doneControls)
 : RpWidget(parent)
-, _bg(st::mediaviewSaveMsgBg)
+, _bg(st::roundedBg)
 , _transformButtons(base::make_unique_q<HorizontalContainer>(this))
 , _paintButtons(base::make_unique_q<HorizontalContainer>(this))
 , _rotateButton(base::make_unique_q<Ui::IconButton>(
@@ -179,14 +179,15 @@ PhotoEditorControls::PhotoEditorControls(
 	false,
 	_bg,
 	st::lightButtonFg,
-	st::photoEditorRotateButton.ripple))
-, _flipped(modifications.flipped) {
+	st::photoEditorRotateButton.ripple)) {
 
 	_transformButtons->updateChildrenPosition();
 	_paintButtons->updateChildrenPosition();
 
-	_paintModeButtonActive->setIconOverride(
-		&st::photoEditorPaintModeButton.iconOver);
+	{
+		const auto icon = &st::photoEditorPaintIconActive;
+		_paintModeButtonActive->setIconOverride(icon, icon);
+	}
 	_paintModeButtonActive->setAttribute(Qt::WA_TransparentForMouseEvents);
 
 	paintRequest(
@@ -263,18 +264,21 @@ PhotoEditorControls::PhotoEditorControls(
 
 		controllers->stickersPanelController->panelShown(
 		) | rpl::start_with_next([=](bool shown) {
-			_stickersButton->setIconOverride(shown
-				? &st::photoEditorStickersButton.iconOver
-				: nullptr);
+			const auto icon = shown
+				? &st::photoEditorStickersIconActive
+				: nullptr;
+			_stickersButton->setIconOverride(icon, icon);
 		}, _stickersButton->lifetime());
 	}
 
-	_flipButton->clicks(
+	rpl::single(
+		rpl::empty_value()
+	) | rpl::skip(modifications.flipped ? 0 : 1) | rpl::then(
+		_flipButton->clicks() | rpl::to_empty
 	) | rpl::start_with_next([=] {
 		_flipped = !_flipped;
-		_flipButton->setIconOverride(_flipped
-			? &st::photoEditorFlipButton.iconOver
-			: nullptr);
+		const auto icon = _flipped ? &st::photoEditorFlipIconActive : nullptr;
+		_flipButton->setIconOverride(icon, icon);
 	}, _flipButton->lifetime());
 
 }
diff --git a/Telegram/SourceFiles/editor/photo_editor_controls.h b/Telegram/SourceFiles/editor/photo_editor_controls.h
index 362a88b7e..4c44eb49f 100644
--- a/Telegram/SourceFiles/editor/photo_editor_controls.h
+++ b/Telegram/SourceFiles/editor/photo_editor_controls.h
@@ -55,7 +55,7 @@ private:
 	const base::unique_qptr<EdgeButton> _cancel;
 	const base::unique_qptr<EdgeButton> _done;
 
-	bool _flipped;
+	bool _flipped = false;
 
 	rpl::variable<PhotoEditorMode> _mode;