From f52c6a6daa0d37ed3026054fb8cb488f70690d58 Mon Sep 17 00:00:00 2001 From: 23rd <23rd@vivaldi.net> Date: Mon, 12 Apr 2021 19:25:58 +0300 Subject: [PATCH] Improved style for controls in SendFilesBox. --- Telegram/SourceFiles/boxes/boxes.style | 30 ++++---- .../ui/chat/attach/attach_album_thumbnail.cpp | 44 +++--------- .../ui/chat/attach/attach_album_thumbnail.h | 3 +- .../ui/chat/attach/attach_controls.cpp | 68 +++++++++++++++++++ .../ui/chat/attach/attach_controls.h | 44 ++++++++++++ .../attach/attach_single_media_preview.cpp | 45 +++--------- .../chat/attach/attach_single_media_preview.h | 10 +-- Telegram/cmake/td_ui.cmake | 8 ++- 8 files changed, 154 insertions(+), 98 deletions(-) create mode 100644 Telegram/SourceFiles/ui/chat/attach/attach_controls.cpp create mode 100644 Telegram/SourceFiles/ui/chat/attach/attach_controls.h diff --git a/Telegram/SourceFiles/boxes/boxes.style b/Telegram/SourceFiles/boxes/boxes.style index d5a18fb251..6c1dc29131 100644 --- a/Telegram/SourceFiles/boxes/boxes.style +++ b/Telegram/SourceFiles/boxes/boxes.style @@ -428,14 +428,14 @@ sendMediaPreviewSize: 308px; sendMediaPreviewHeightMax: 1280; sendMediaRowSkip: 10px; -editMediaButtonSize: 28px; +editMediaButtonSize: 32px; editMediaButtonSkip: 8px; editMediaButtonFileSkipRight: 1px; editMediaButtonFileSkipTop: 7px; -editMediaButtonIconFile: icon {{ "settings_edit", menuIconFg }}; -editMediaButtonIconPhoto: icon {{ "settings_edit", roundedFg }}; -editMediaButton: IconButton { +editMediaButtonIconFile: icon {{ "send_media/send_media_replace", menuIconFg }}; +editMediaButtonIconPhoto: icon {{ "send_media/send_media_replace", roundedFg }}; +editMediaButton: IconButton(defaultIconButton) { width: editMediaButtonSize; height: editMediaButtonSize; @@ -453,13 +453,13 @@ editMediaHintLabel: FlatLabel(defaultFlatLabel) { // SendFilesBox sendBoxAlbumGroupEditInternalSkip: 8px; -sendBoxAlbumGroupSkipRight: 6px; -sendBoxAlbumGroupSkipTop: 6px; -sendBoxAlbumGroupRadius: 13px; -sendBoxAlbumGroupHeight: 26px; +sendBoxAlbumGroupSkipRight: 5px; +sendBoxAlbumGroupSkipTop: 5px; +sendBoxAlbumGroupRadius: 4px; +sendBoxAlbumGroupSize: size(62px, 25px); sendBoxFileGroupSkipTop: 2px; -sendBoxFileGroupSkipRight: 8px; +sendBoxFileGroupSkipRight: 5px; sendBoxFileGroupEditInternalSkip: -1px; sendBoxAlbumGroupButtonFile: IconButton(editMediaButton) { @@ -468,16 +468,10 @@ sendBoxAlbumGroupButtonFile: IconButton(editMediaButton) { } } sendBoxAlbumGroupEditButtonIconFile: editMediaButtonIconFile; -sendBoxAlbumGroupDeleteButtonIconFile: icon {{ "history_file_cancel", menuIconFg, point(6px, 6px) }}; +sendBoxAlbumGroupDeleteButtonIconFile: icon {{ "send_media/send_media_delete", menuIconFg }}; -sendBoxAlbumGroupButtonMediaEdit: icon {{ "settings_edit", roundedFg, point(3px, -2px) }}; -sendBoxAlbumGroupButtonMediaDelete: icon {{ "history_file_cancel", roundedFg, point(2px, 5px) }}; -sendBoxAlbumGroupButtonMedia: IconButton { - width: sendBoxAlbumGroupHeight; - height: sendBoxAlbumGroupHeight; - - icon: sendBoxAlbumGroupButtonMediaEdit; -} +sendBoxAlbumGroupButtonMediaEdit: icon {{ "send_media/send_media_replace", roundedFg, point(4px, 1px) }}; +sendBoxAlbumGroupButtonMediaDelete: icon {{ "send_media/send_media_delete", roundedFg }}; // End of SendFilesBox diff --git a/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.cpp b/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.cpp index 1f8d47243a..273df0055c 100644 --- a/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.cpp +++ b/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.cpp @@ -30,8 +30,7 @@ AlbumThumbnail::AlbumThumbnail( , _fullPreview(file.preview) , _shrinkSize(int(std::ceil(st::historyMessageRadius / 1.4))) , _isPhoto(file.type == PreparedFile::Type::Photo) -, _isVideo(file.type == PreparedFile::Type::Video) -, _buttonsRect(st::sendBoxAlbumGroupRadius, st::roundedBg) { +, _isVideo(file.type == PreparedFile::Type::Video) { Expects(!_fullPreview.isNull()); moveToLayout(layout); @@ -77,11 +76,7 @@ AlbumThumbnail::AlbumThumbnail( const auto filepath = file.path; if (filepath.isEmpty()) { _name = "image.png"; - _status = u"%1x%2"_q.arg( - _fullPreview.width() - ).arg( - _fullPreview.height() - ); + _status = u"%1x%2"_q.arg(_fullPreview.width(), _fullPreview.height()); } else { auto fileinfo = QFileInfo(filepath); _name = fileinfo.fileName(); @@ -123,13 +118,11 @@ void AlbumThumbnail::updateFileRow(int row) { const auto fileHeight = st::attachPreviewThumbLayout.thumbSize + st::sendMediaRowSkip; - const auto top = row * fileHeight + st::sendBoxFileGroupSkipTop; - const auto size = st::editMediaButtonSize; - auto right = st::sendBoxFileGroupSkipRight + size; + auto right = st::sendBoxFileGroupSkipRight + st::boxPhotoPadding.right(); _deleteMedia->moveToRight(right, top); - right += st::sendBoxFileGroupEditInternalSkip + size; + right += st::sendBoxFileGroupEditInternalSkip + _deleteMedia->width(); _editMedia->moveToRight(right, top); } @@ -511,11 +504,9 @@ QRect AlbumThumbnail::paintButtons( QPoint point, int outerWidth, float64 shrinkProgress) { - const auto skipInternal = st::sendBoxAlbumGroupEditInternalSkip; - const auto size = st::sendBoxAlbumGroupHeight; - const auto skipRight = st::sendBoxAlbumGroupSkipRight; - const auto skipTop = st::sendBoxAlbumGroupSkipTop; - const auto groupWidth = size * 2 + skipInternal; + const auto &skipRight = st::sendBoxAlbumGroupSkipRight; + const auto &skipTop = st::sendBoxAlbumGroupSkipTop; + const auto groupWidth = _buttons.width(); // If the width is tiny, it would be better to not display the buttons. if (groupWidth > outerWidth) { @@ -528,26 +519,13 @@ QRect AlbumThumbnail::paintButtons( ? (outerWidth - groupWidth) / 2 : outerWidth - skipRight - groupWidth); const auto groupY = point.y() + skipTop; - const auto deleteLeft = skipInternal + size; + const auto opacity = p.opacity(); p.setOpacity(1.0 - shrinkProgress); + _buttons.paint(p, groupX, groupY); + p.setOpacity(opacity); - QRect groupRect(groupX, groupY, groupWidth, size); - _buttonsRect.paint(p, groupRect); - - st::sendBoxAlbumGroupButtonMediaEdit.paint( - p, - groupX, - groupY, - outerWidth); - st::sendBoxAlbumGroupButtonMediaDelete.paint( - p, - groupX + size + skipInternal, - groupY, - outerWidth); - p.setOpacity(1); - - return groupRect; + return QRect(groupX, groupY, groupWidth, _buttons.height()); } } // namespace Ui diff --git a/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.h b/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.h index ced90f7f75..a544f27dee 100644 --- a/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.h +++ b/Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.h @@ -7,6 +7,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL */ #pragma once +#include "ui/chat/attach/attach_controls.h" #include "ui/chat/attach/attach_send_files_way.h" #include "ui/effects/animations.h" #include "ui/grouped_layout.h" @@ -86,7 +87,7 @@ private: float64 _suggestedMove = 0.; Animations::Simple _suggestedMoveAnimation; int _lastShrinkValue = 0; - RoundRect _buttonsRect; + AttachControls _buttons; QRect _lastRectOfModify; QRect _lastRectOfButtons; diff --git a/Telegram/SourceFiles/ui/chat/attach/attach_controls.cpp b/Telegram/SourceFiles/ui/chat/attach/attach_controls.cpp new file mode 100644 index 0000000000..b8cd7400cc --- /dev/null +++ b/Telegram/SourceFiles/ui/chat/attach/attach_controls.cpp @@ -0,0 +1,68 @@ +/* +This file is part of Telegram Desktop, +the official desktop application for the Telegram messaging service. + +For license and copyright information please follow this link: +https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL +*/ +#include "ui/chat/attach/attach_controls.h" + +#include "styles/style_boxes.h" + +namespace Ui { + +AttachControls::AttachControls() +: _rect(st::sendBoxAlbumGroupRadius, st::roundedBg) { +} + +void AttachControls::paint(Painter &p, int x, int y) { + const auto groupWidth = width(); + const auto groupHeight = height(); + const auto groupHalfWidth = groupWidth / 2; + const auto &internalSkip = st::sendBoxAlbumGroupEditInternalSkip; + + QRect groupRect(x, y, groupWidth, groupHeight); + _rect.paint(p, groupRect); + + QRect leftRect(x, y, groupHalfWidth, groupHeight); + QRect rightRect(x + groupHalfWidth, y, groupHalfWidth, groupHeight); + st::sendBoxAlbumGroupButtonMediaEdit.paintInCenter(p, leftRect); + st::sendBoxAlbumGroupButtonMediaDelete.paintInCenter(p, rightRect); +} + +int AttachControls::width() const { + return st::sendBoxAlbumGroupSize.width(); +} + +int AttachControls::height() const { + return st::sendBoxAlbumGroupSize.height(); +} + +AttachControlsWidget::AttachControlsWidget(not_null parent) +: RpWidget(parent) +, _edit(base::make_unique_q(this)) +, _delete(base::make_unique_q(this)) { + const auto w = _controls.width(); + resize(w, _controls.height()); + _edit->resize(w / 2, _controls.height()); + _delete->resize(w / 2, _controls.height()); + + _edit->moveToLeft(0, 0, w); + _delete->moveToRight(0, 0, w); + + paintRequest( + ) | rpl::start_with_next([=] { + Painter p(this); + _controls.paint(p, 0, 0); + }, lifetime()); +} + +rpl::producer<> AttachControlsWidget::editRequests() const { + return _edit->clicks() | rpl::to_empty; +} + +rpl::producer<> AttachControlsWidget::deleteRequests() const { + return _delete->clicks() | rpl::to_empty; +} + +} // namespace Ui diff --git a/Telegram/SourceFiles/ui/chat/attach/attach_controls.h b/Telegram/SourceFiles/ui/chat/attach/attach_controls.h new file mode 100644 index 0000000000..5e75ce6efd --- /dev/null +++ b/Telegram/SourceFiles/ui/chat/attach/attach_controls.h @@ -0,0 +1,44 @@ +/* +This file is part of Telegram Desktop, +the official desktop application for the Telegram messaging service. + +For license and copyright information please follow this link: +https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL +*/ +#pragma once + +#include "ui/abstract_button.h" +#include "ui/round_rect.h" +#include "ui/rp_widget.h" + +namespace Ui { + +class AttachControls final { +public: + AttachControls(); + + void paint(Painter &p, int x, int y); + + [[nodiscard]] int width() const; + [[nodiscard]] int height() const; + +private: + RoundRect _rect; + +}; + +class AttachControlsWidget final : public RpWidget { +public: + AttachControlsWidget(not_null parent); + + [[nodiscard]] rpl::producer<> editRequests() const; + [[nodiscard]] rpl::producer<> deleteRequests() const; + +private: + const base::unique_qptr _edit; + const base::unique_qptr _delete; + AttachControls _controls; + +}; + +} // namespace Ui diff --git a/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.cpp b/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.cpp index ce52599a3a..6e346b706c 100644 --- a/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.cpp +++ b/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.cpp @@ -8,6 +8,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL #include "ui/chat/attach/attach_single_media_preview.h" #include "editor/photo_editor_common.h" +#include "ui/chat/attach/attach_controls.h" #include "ui/chat/attach/attach_prepare.h" #include "ui/widgets/buttons.h" #include "core/mime_type.h" @@ -69,24 +70,20 @@ SingleMediaPreview::SingleMediaPreview( , _animated(animated) , _sticker(sticker) , _photoEditorButton(base::make_unique_q(this)) -, _editMedia(this, st::sendBoxAlbumGroupButtonMedia) -, _deleteMedia(this, st::sendBoxAlbumGroupButtonMedia) -, _buttonsRect(st::sendBoxAlbumGroupRadius, st::roundedBg) { +, _controls(base::make_unique_q(this)) { Expects(!preview.isNull()); - _deleteMedia->setIconOverride(&st::sendBoxAlbumGroupButtonMediaDelete); - preparePreview(preview, animatedPreviewPath); } SingleMediaPreview::~SingleMediaPreview() = default; rpl::producer<> SingleMediaPreview::deleteRequests() const { - return _deleteMedia->clicks() | rpl::to_empty; + return _controls->deleteRequests(); } rpl::producer<> SingleMediaPreview::editRequests() const { - return _editMedia->clicks() | rpl::to_empty; + return _controls->editRequests(); } rpl::producer<> SingleMediaPreview::modifyRequests() const { @@ -132,7 +129,7 @@ void SingleMediaPreview::preparePreview( _previewWidth = qMax(preview.width(), kMinPreviewWidth); } auto maxthumbh = qMin(qRound(1.5 * _previewWidth), st::confirmMaxHeight); - const auto minthumbh = st::sendBoxAlbumGroupHeight + const auto minthumbh = st::sendBoxAlbumGroupSize.height() + st::sendBoxAlbumGroupSkipTop * 2; _previewHeight = qRound(originalHeight * float64(_previewWidth) / originalWidth); if (_previewHeight > maxthumbh) { @@ -169,18 +166,10 @@ void SingleMediaPreview::preparePreview( } void SingleMediaPreview::resizeEvent(QResizeEvent *e) { - const auto skipInternal = st::sendBoxAlbumGroupEditInternalSkip; - const auto size = st::sendBoxAlbumGroupHeight; - const auto skipRight = st::sendBoxAlbumGroupSkipRight; - const auto skipTop = st::sendBoxAlbumGroupSkipTop; - const auto groupWidth = size * 2 + skipInternal; - - const auto right = (st::boxWideWidth - st::sendMediaPreviewSize) / 2 - + st::sendMediaPreviewSize; - const auto left = right - groupWidth - skipRight; - const auto top = skipTop; - _editMedia->move(left, top); - _deleteMedia->move(left + size + skipInternal, top); + _controls->moveToRight( + st::boxPhotoPadding.right() + st::sendBoxAlbumGroupSkipRight, + st::sendBoxAlbumGroupSkipTop, + width()); } void SingleMediaPreview::prepareAnimatedPreview( @@ -273,22 +262,6 @@ void SingleMediaPreview::paintEvent(QPaintEvent *e) { auto icon = &st::historyFileInPlay; icon->paintInCenter(p, inner); } - paintButtonsBackground(p); -} - -void SingleMediaPreview::paintButtonsBackground(QPainter &p) { - const auto skipInternal = st::sendBoxAlbumGroupEditInternalSkip; - const auto size = st::sendBoxAlbumGroupHeight; - const auto skipRight = st::sendBoxAlbumGroupSkipRight; - const auto skipTop = st::sendBoxAlbumGroupSkipTop; - const auto groupWidth = size * 2 + skipInternal; - const auto right = (st::boxWideWidth - st::sendMediaPreviewSize) / 2 - + st::sendMediaPreviewSize; - const auto left = right - groupWidth - skipRight; - const auto top = skipTop; - - QRect groupRect(left, top, groupWidth, size); - _buttonsRect.paint(p, groupRect); } } // namespace Ui diff --git a/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.h b/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.h index ded3cede4f..b4523d66ca 100644 --- a/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.h +++ b/Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.h @@ -9,9 +9,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL #include "ui/rp_widget.h" #include "ui/abstract_button.h" -#include "ui/round_rect.h" #include "media/clip/media_clip_reader.h" -#include "base/object_ptr.h" namespace Lottie { class SinglePlayer; @@ -19,6 +17,7 @@ class SinglePlayer; namespace Ui { +class AttachControlsWidget; struct PreparedFile; class IconButton; @@ -50,7 +49,6 @@ private: QImage preview, const QString &animatedPreviewPath); void prepareAnimatedPreview(const QString &animatedPreviewPath); - void paintButtonsBackground(QPainter &p); void clipCallback(Media::Clip::Notification notification); Fn _gifPaused; @@ -63,10 +61,8 @@ private: Media::Clip::ReaderPointer _gifPreview; std::unique_ptr _lottiePreview; - base::unique_qptr _photoEditorButton; - object_ptr _editMedia = { nullptr }; - object_ptr _deleteMedia = { nullptr }; - RoundRect _buttonsRect; + const base::unique_qptr _photoEditorButton; + const base::unique_qptr _controls; rpl::event_stream<> _modifyRequests; diff --git a/Telegram/cmake/td_ui.cmake b/Telegram/cmake/td_ui.cmake index fb9fccc912..a8c161a239 100644 --- a/Telegram/cmake/td_ui.cmake +++ b/Telegram/cmake/td_ui.cmake @@ -47,7 +47,7 @@ target_precompile_headers(td_ui PRIVATE ${src_loc}/ui/ui_pch.h) nice_target_sources(td_ui ${src_loc} PRIVATE ${style_files} - + calls/group/ui/calls_group_scheduled_labels.cpp calls/group/ui/calls_group_scheduled_labels.h calls/group/ui/desktop_capture_choose_source.cpp @@ -106,10 +106,12 @@ PRIVATE ui/boxes/report_box.h ui/boxes/single_choice_box.cpp ui/boxes/single_choice_box.h - ui/chat/attach/attach_album_thumbnail.cpp - ui/chat/attach/attach_album_thumbnail.h ui/chat/attach/attach_album_preview.cpp ui/chat/attach/attach_album_preview.h + ui/chat/attach/attach_album_thumbnail.cpp + ui/chat/attach/attach_album_thumbnail.h + ui/chat/attach/attach_controls.cpp + ui/chat/attach/attach_controls.h ui/chat/attach/attach_extensions.cpp ui/chat/attach/attach_extensions.h ui/chat/attach/attach_prepare.cpp