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

Improved style for controls in SendFilesBox.

Browse source
This commit is contained in:
23rd 2021-04-12 19:25:58 +03:00
parent af10b6d487
commit f52c6a6daa
8 changed files with 154 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
Telegram/SourceFiles/boxes/boxes.style
View file

@ -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

44
Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.cpp
View file

@ -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

3
Telegram/SourceFiles/ui/chat/attach/attach_album_thumbnail.h
View file

@ -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;

68
Telegram/SourceFiles/ui/chat/attach/attach_controls.cpp Normal file
View file

@ -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<RpWidget*> parent)
: RpWidget(parent)
, _edit(base::make_unique_q<AbstractButton>(this))
, _delete(base::make_unique_q<AbstractButton>(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

44
Telegram/SourceFiles/ui/chat/attach/attach_controls.h Normal file
View file

@ -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<RpWidget*> parent);
[[nodiscard]] rpl::producer<> editRequests() const;
[[nodiscard]] rpl::producer<> deleteRequests() const;
private:
const base::unique_qptr<AbstractButton> _edit;
const base::unique_qptr<AbstractButton> _delete;
AttachControls _controls;
};
} // namespace Ui

45
Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.cpp
View file

@ -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<AbstractButton>(this))
, _editMedia(this, st::sendBoxAlbumGroupButtonMedia)
, _deleteMedia(this, st::sendBoxAlbumGroupButtonMedia)
, _buttonsRect(st::sendBoxAlbumGroupRadius, st::roundedBg) {
, _controls(base::make_unique_q<AttachControlsWidget>(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

10
Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.h
View file

@ -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<bool()> _gifPaused;
@ -63,10 +61,8 @@ private:
Media::Clip::ReaderPointer _gifPreview;
std::unique_ptr<Lottie::SinglePlayer> _lottiePreview;
base::unique_qptr<AbstractButton> _photoEditorButton;
object_ptr<IconButton> _editMedia = { nullptr };
object_ptr<IconButton> _deleteMedia = { nullptr };
RoundRect _buttonsRect;
const base::unique_qptr<AbstractButton> _photoEditorButton;
const base::unique_qptr<AttachControlsWidget> _controls;
rpl::event_stream<> _modifyRequests;

6
Telegram/cmake/td_ui.cmake
View file

@ -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