void/AyuGramDesktop
2
0
Fork 0
mirror of https://github.com/AyuGram/AyuGramDesktop.git synced 2025-06-05 06:33:57 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Slightly improved style of controls in photo editor.

Browse source
This commit is contained in:
23rd 2021-04-03 17:58:49 +03:00
parent 221d45b500
commit e926e5f882
3 changed files with 45 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
Telegram/SourceFiles/editor/editor.style
View file

@ -11,38 +11,54 @@ using "ui/widgets/widgets.style";
using "ui/chat/chat.style"; using "ui/chat/chat.style";
photoEditorControlsHeight: 100px; photoEditorControlsHeight: 100px;
photoEditorControlsTopSkip: 50px; photoEditorControlsTopSkip: 40px;
photoEditorButtonIconFg: historyComposeIconFg; photoEditorButtonIconFg: mediaviewPipControlsFg;
photoEditorButtonIconFgOver: historyComposeIconFgOver; photoEditorButtonIconFgOver: mediaviewPipControlsFgOver;
photoEditorButtonIconFgActive: historyComposeIconFgOver; photoEditorButtonIconFgActive: lightButtonFg;
photoEditorButtonIconFgInactive: menuFgDisabled; photoEditorButtonIconFgInactive: mediaviewPipPlaybackInactive;
photoEditorRotateButton: IconButton(defaultIconButton) {
width: 56px;
height: 56px;
photoEditorRotateButton: IconButton(historyAttach) {
icon: icon {{ "photo_editor/rotate", photoEditorButtonIconFg }}; icon: icon {{ "photo_editor/rotate", photoEditorButtonIconFg }};
iconOver: icon {{ "photo_editor/rotate", photoEditorButtonIconFgOver }}; 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 }}; icon: icon {{ "photo_editor/flip", photoEditorButtonIconFg }};
iconOver: icon {{ "photo_editor/flip", photoEditorButtonIconFgOver }}; iconOver: icon {{ "photo_editor/flip", photoEditorButtonIconFgOver }};
} }
photoEditorPaintModeButton: IconButton(historyAttach) { photoEditorFlipIconActive: icon {{ "photo_editor/flip", photoEditorButtonIconFgActive }};
photoEditorPaintModeButton: IconButton(photoEditorRotateButton) {
icon: icon {{ "photo_editor/paint", photoEditorButtonIconFg }}; icon: icon {{ "photo_editor/paint", photoEditorButtonIconFg }};
iconOver: icon {{ "photo_editor/paint", photoEditorButtonIconFgOver }}; iconOver: icon {{ "photo_editor/paint", photoEditorButtonIconFgOver }};
} }
photoEditorUndoButton: IconButton(historyAttach) { photoEditorPaintIconActive: icon {{ "photo_editor/paint", photoEditorButtonIconFgActive }};
photoEditorUndoButton: IconButton(photoEditorRotateButton) {
icon: icon {{ "photo_editor/undo", photoEditorButtonIconFg }}; icon: icon {{ "photo_editor/undo", photoEditorButtonIconFg }};
iconOver: icon {{ "photo_editor/undo", photoEditorButtonIconFgOver }}; iconOver: icon {{ "photo_editor/undo", photoEditorButtonIconFgOver }};
} }
photoEditorRedoButton: IconButton(historyAttach) {
photoEditorRedoButton: IconButton(photoEditorRotateButton) {
icon: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFg }}; icon: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFg }};
iconOver: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFgOver }}; iconOver: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFgOver }};
} }
photoEditorStickersButton: IconButton(historyAttach) {
photoEditorStickersButton: IconButton(photoEditorRotateButton) {
icon: icon {{ "settings_stickers", photoEditorButtonIconFg }}; icon: icon {{ "settings_stickers", photoEditorButtonIconFg }};
iconOver: icon {{ "settings_stickers", photoEditorButtonIconFgOver }}; iconOver: icon {{ "settings_stickers", photoEditorButtonIconFgOver }};
} }
photoEditorStickersIconActive: icon {{ "settings_stickers", photoEditorButtonIconFgActive }};
photoEditorUndoButtonInactive: icon {{ "photo_editor/undo", photoEditorButtonIconFgInactive }}; photoEditorUndoButtonInactive: icon {{ "photo_editor/undo", photoEditorButtonIconFgInactive }};
photoEditorRedoButtonInactive: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFgInactive }}; photoEditorRedoButtonInactive: icon {{ "photo_editor/undo-flip_horizontal", photoEditorButtonIconFgInactive }};
@ -51,7 +67,7 @@ photoEditorTextButtonPadding: margins(10px, 0px, 10px, 0px);
photoEditorColorPickerTopSkip: 20px; photoEditorColorPickerTopSkip: 20px;
photoEditorColorPickerWidth: 250px; photoEditorColorPickerWidth: 250px;
photoEditorColorPickerLineHeight: 20px; photoEditorColorPickerLineHeight: 10px;
photoEditorColorPickerCanvasHeight: 300px; photoEditorColorPickerCanvasHeight: 300px;
photoEditorColorPickerCircleSize: 24px; photoEditorColorPickerCircleSize: 24px;
photoEditorColorPickerCircleBigSize: 50px; photoEditorColorPickerCircleBigSize: 50px;

28
Telegram/SourceFiles/editor/photo_editor_controls.cpp
View file

@ -138,7 +138,7 @@ PhotoEditorControls::PhotoEditorControls(
const PhotoModifications modifications, const PhotoModifications modifications,
bool doneControls) bool doneControls)
: RpWidget(parent) : RpWidget(parent)
, _bg(st::mediaviewSaveMsgBg) , _bg(st::roundedBg)
, _transformButtons(base::make_unique_q<HorizontalContainer>(this)) , _transformButtons(base::make_unique_q<HorizontalContainer>(this))
, _paintButtons(base::make_unique_q<HorizontalContainer>(this)) , _paintButtons(base::make_unique_q<HorizontalContainer>(this))
, _rotateButton(base::make_unique_q<Ui::IconButton>( , _rotateButton(base::make_unique_q<Ui::IconButton>(
@ -179,14 +179,15 @@ PhotoEditorControls::PhotoEditorControls(
false, false,
_bg, _bg,
st::lightButtonFg, st::lightButtonFg,
st::photoEditorRotateButton.ripple)) st::photoEditorRotateButton.ripple)) {
, _flipped(modifications.flipped) {
_transformButtons->updateChildrenPosition(); _transformButtons->updateChildrenPosition();
_paintButtons->updateChildrenPosition(); _paintButtons->updateChildrenPosition();
_paintModeButtonActive->setIconOverride( {
&st::photoEditorPaintModeButton.iconOver); const auto icon = &st::photoEditorPaintIconActive;
_paintModeButtonActive->setIconOverride(icon, icon);
}
_paintModeButtonActive->setAttribute(Qt::WA_TransparentForMouseEvents); _paintModeButtonActive->setAttribute(Qt::WA_TransparentForMouseEvents);
paintRequest( paintRequest(
@ -263,18 +264,21 @@ PhotoEditorControls::PhotoEditorControls(
controllers->stickersPanelController->panelShown( controllers->stickersPanelController->panelShown(
) | rpl::start_with_next([=](bool shown) { ) | rpl::start_with_next([=](bool shown) {
_stickersButton->setIconOverride(shown const auto icon = shown
? &st::photoEditorStickersButton.iconOver ? &st::photoEditorStickersIconActive
: nullptr); : nullptr;
_stickersButton->setIconOverride(icon, icon);
}, _stickersButton->lifetime()); }, _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([=] { ) | rpl::start_with_next([=] {
_flipped = !_flipped; _flipped = !_flipped;
_flipButton->setIconOverride(_flipped const auto icon = _flipped ? &st::photoEditorFlipIconActive : nullptr;
? &st::photoEditorFlipButton.iconOver _flipButton->setIconOverride(icon, icon);
: nullptr);
}, _flipButton->lifetime()); }, _flipButton->lifetime());
} }

2
Telegram/SourceFiles/editor/photo_editor_controls.h
View file

@ -55,7 +55,7 @@ private:
const base::unique_qptr<EdgeButton> _cancel; const base::unique_qptr<EdgeButton> _cancel;
const base::unique_qptr<EdgeButton> _done; const base::unique_qptr<EdgeButton> _done;
bool _flipped; bool _flipped = false;
rpl::variable<PhotoEditorMode> _mode; rpl::variable<PhotoEditorMode> _mode;