Added second button bar for paint mode in photo editor.

Telegram/SourceFiles/editor/editor.style

@@ -11,8 +11,11 @@ using "window/window.style";
 using "ui/widgets/widgets.style";
 using "ui/chat/chat.style";
 
-photoEditorControlsHeight: 100px;
+// photoEditorControlsBottomSkip * 2 + photoEditorControlsCenterSkip + photoEditorButtonBarHeight * 2
+photoEditorControlsHeight: 146px;
+
 photoEditorControlsBottomSkip: 20px;
+photoEditorControlsCenterSkip: 6px;
 
 photoEditorButtonIconFg: mediaviewPipControlsFg;
 photoEditorButtonIconFgOver: mediaviewPipControlsFgOver;
@@ -69,7 +72,6 @@ photoEditorStickersIconActive: icon {{ "settings_stickers", photoEditorButtonIco
 photoEditorUndoButtonInactive: icon {{ "photo_editor/undo", photoEditorButtonIconFgInactive }};
 photoEditorRedoButtonInactive: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFgInactive }};
 
-photoEditorColorPickerTopSkip: 20px;
 photoEditorColorPickerWidth: 250px;
 photoEditorColorPickerLineHeight: 10px;
 photoEditorColorPickerCanvasHeight: 300px;

Telegram/SourceFiles/editor/photo_editor.cpp

@@ -85,12 +85,13 @@ PhotoEditor::PhotoEditor(
 		const auto controlsRect = geometry
 			- style::margins(0, contentRect.height(), 0, 0);
 		_controls->setGeometry(controlsRect);
-
-		_colorPicker->moveLine(QPoint(
-			controlsRect.x() + controlsRect.width() / 2,
-			controlsRect.y() + st::photoEditorColorPickerTopSkip));
 	}, lifetime());
 
+	_controls->colorLinePositionValue(
+	) | rpl::start_with_next([=](const QPoint &p) {
+		_colorPicker->moveLine(p);
+	}, _controls->lifetime());
+
 	_mode.value(
 	) | rpl::start_with_next([=](const PhotoEditorMode &mode) {
 		_content->applyMode(mode);

Telegram/SourceFiles/editor/photo_editor_controls.cpp

@@ -174,6 +174,7 @@ PhotoEditorControls::PhotoEditorControls(
 , _bg(st::roundedBg)
 , _buttonHeight(st::photoEditorButtonBarHeight)
 , _transformButtons(base::make_unique_q<ButtonBar>(this, _bg))
+, _paintTopButtons(base::make_unique_q<ButtonBar>(this, _bg))
 , _paintBottomButtons(base::make_unique_q<ButtonBar>(this, _bg))
 , _transformCancel(base::make_unique_q<EdgeButton>(
 	_transformButtons,
@@ -209,10 +210,10 @@ PhotoEditorControls::PhotoEditorControls(
 	st::activeButtonFg,
 	st::photoEditorRotateButton.ripple))
 , _undoButton(base::make_unique_q<Ui::IconButton>(
-	_paintBottomButtons,
+	_paintTopButtons,
 	st::photoEditorUndoButton))
 , _redoButton(base::make_unique_q<Ui::IconButton>(
-	_paintBottomButtons,
+	_paintTopButtons,
 	st::photoEditorRedoButton))
 , _paintModeButtonActive(base::make_unique_q<Ui::IconButton>(
 	_paintBottomButtons,
@@ -238,6 +239,7 @@ PhotoEditorControls::PhotoEditorControls(
 			- padding.right();
 		_transformButtons->resize(w, _buttonHeight);
 		_paintBottomButtons->resize(w, _buttonHeight);
+		_paintTopButtons->resize(w, _buttonHeight);
 	}
 
 	{
@@ -269,6 +271,15 @@ PhotoEditorControls::PhotoEditorControls(
 			buttonsTop);
 	}, lifetime());
 
+	_paintBottomButtons->positionValue(
+	) | rpl::start_with_next([=](const QPoint &containerPos) {
+		_paintTopButtons->moveToLeft(
+			containerPos.x(),
+			containerPos.y()
+				- st::photoEditorControlsCenterSkip
+				- _paintTopButtons->height());
+	}, _paintBottomButtons->lifetime());
+
 	controllers->undoController->setPerformRequestChanges(rpl::merge(
 		_undoButton->clicks() | rpl::map_to(Undo::Undo),
 		_redoButton->clicks() | rpl::map_to(Undo::Redo)));
@@ -351,7 +362,19 @@ void PhotoEditorControls::applyMode(const PhotoEditorMode &mode) {
 	using Mode = PhotoEditorMode::Mode;
 	_transformButtons->setVisible(mode.mode == Mode::Transform);
 	_paintBottomButtons->setVisible(mode.mode == Mode::Paint);
+	_paintTopButtons->setVisible(mode.mode == Mode::Paint);
 	_mode = mode;
 }
 
+rpl::producer<QPoint> PhotoEditorControls::colorLinePositionValue() const {
+	return rpl::merge(
+		geometryValue() | rpl::to_empty,
+		_paintTopButtons->geometryValue() | rpl::to_empty
+	) | rpl::map([=] {
+		const auto r = _paintTopButtons->geometry();
+		return mapToParent(r.topLeft())
+			+ QPoint(r.width() / 2, r.height() / 2);
+	});
+}
+
 } // namespace Editor

Telegram/SourceFiles/editor/photo_editor_controls.h

@@ -34,6 +34,7 @@ public:
 	[[nodiscard]] rpl::producer<> paintModeRequests() const;
 	[[nodiscard]] rpl::producer<> doneRequests() const;
 	[[nodiscard]] rpl::producer<> cancelRequests() const;
+	[[nodiscard]] rpl::producer<QPoint> colorLinePositionValue() const;
 
 	void applyMode(const PhotoEditorMode &mode);
 
@@ -42,6 +43,7 @@ private:
 	const style::color &_bg;
 	const int _buttonHeight;
 	const base::unique_qptr<ButtonBar> _transformButtons;
+	const base::unique_qptr<ButtonBar> _paintTopButtons;
 	const base::unique_qptr<ButtonBar> _paintBottomButtons;
 
 	const base::unique_qptr<EdgeButton> _transformCancel;