Improve SendFilesBox previews layout.

Telegram/SourceFiles/boxes/boxes.style

@@ -515,8 +515,8 @@ sendBoxAlbumGroupRadius: 13px;
 sendBoxAlbumGroupHeight: 26px;
 
 sendBoxFileGroupSkipTop: 2px;
-sendBoxFileGroupSkipRight: 0px;
-sendBoxFileGroupEditInternalSkip: 4px;
+sendBoxFileGroupSkipRight: 8px;
+sendBoxFileGroupEditInternalSkip: -1px;
 
 sendBoxAlbumGroupButtonFile: IconButton(editMediaButton) {
 	ripple: RippleAnimation(defaultRippleAnimation) {

Telegram/SourceFiles/boxes/send_files_box.cpp

@@ -233,6 +233,7 @@ SendFilesBox::SendFilesBox(
 	SendMenu::Type sendMenuType)
 : _controller(controller)
 , _sendType(sendType)
+, _titleHeight(st::boxTitleHeight)
 , _list(std::move(list))
 , _sendLimit(limit)
 , _sendMenuType(sendMenuType)
@@ -262,7 +263,8 @@ void SendFilesBox::initPreview() {
 	rpl::combine(
 		_inner->heightValue(),
 		_footerHeight.value(),
-		_titleHeight + _1 + _2
+		_titleHeight.value(),
+		_1 + _2 + _3
 	) | rpl::start_with_next([=](int height) {
 		setDimensions(
 			st::boxWideWidth,
@@ -523,7 +525,9 @@ void SendFilesBox::pushBlock(int from, int till) {
 		gifPaused,
 		_sendWay.current());
 	auto &block = _blocks.back();
-	const auto widget = _inner->add(block.takeWidget());
+	const auto widget = _inner->add(
+		block.takeWidget(),
+		QMargins(0, _inner->count() ? st::sendMediaFileThumbSkip : 0, 0, 0));
 
 	block.itemDeleteRequest(
 	) | rpl::filter([=] {
@@ -817,7 +821,7 @@ void SendFilesBox::refreshTitleText() {
 		_titleHeight = st::boxTitleHeight;
 	} else {
 		_titleText = QString();
-		_titleHeight = 0;
+		_titleHeight = st::boxPhotoPadding.top();
 	}
 }
 
@@ -859,11 +863,11 @@ void SendFilesBox::paintEvent(QPaintEvent *e) {
 	if (!_titleText.isEmpty()) {
 		Painter p(this);
 
-		p.setFont(st::boxPhotoTitleFont);
+		p.setFont(st::boxTitleFont);
 		p.setPen(st::boxTitleFg);
 		p.drawTextLeft(
 			st::boxPhotoTitlePosition.x(),
-			st::boxPhotoTitlePosition.y(),
+			st::boxTitlePosition.y(),
 			width(),
 			_titleText);
 	}
@@ -889,6 +893,7 @@ void SendFilesBox::updateControlsGeometry() {
 					+ st::sendMediaPreviewSize
 					- _emojiToggle->width()),
 				_caption->y() + st::boxAttachEmojiTop);
+			_emojiToggle->update();
 		}
 	}
 	const auto pointers = {
@@ -903,8 +908,8 @@ void SendFilesBox::updateControlsGeometry() {
 			bottom -= st::boxPhotoCompressedSkip + pointer->heightNoMargins();
 		}
 	}
-	_scroll->resize(width(), bottom - _titleHeight);
-	_scroll->move(0, _titleHeight);
+	_scroll->resize(width(), bottom - _titleHeight.current());
+	_scroll->move(0, _titleHeight.current());
 }
 
 void SendFilesBox::setInnerFocus() {

Telegram/SourceFiles/boxes/send_files_box.h

@@ -158,7 +158,7 @@ private:
 	const Api::SendType _sendType = Api::SendType();
 
 	QString _titleText;
-	int _titleHeight = 0;
+	rpl::variable<int> _titleHeight = 0;
 
 	Ui::PreparedList _list;
 	std::optional<int> _removingIndex;

Telegram/SourceFiles/ui/chat/attach/attach_single_file_preview.cpp

@@ -32,9 +32,9 @@ SingleFilePreview::SingleFilePreview(
 	_editMedia->setIconOverride(&st::sendBoxAlbumGroupEditButtonIconFile);
 	_deleteMedia->setIconOverride(&st::sendBoxAlbumGroupDeleteButtonIconFile);
 
-	auto h = _fileThumb.isNull()
-		? (st::msgFilePadding.top() + st::msgFileSize + st::msgFilePadding.bottom())
-		: (st::msgFileThumbPadding.top() + st::msgFileThumbSize + st::msgFileThumbPadding.bottom());
+	const auto h = _fileThumb.isNull()
+		? st::msgFileSize
+		: st::sendMediaFileThumbSize;
 	resize(width(), h);
 }
 
@@ -57,9 +57,9 @@ void SingleFilePreview::prepareThumb(const QImage &preview) {
 
 	auto originalWidth = preview.width();
 	auto originalHeight = preview.height();
-	auto thumbWidth = st::msgFileThumbSize;
+	auto thumbWidth = st::sendMediaFileThumbSize;
 	if (originalWidth > originalHeight) {
-		thumbWidth = (originalWidth * st::msgFileThumbSize)
+		thumbWidth = (originalWidth * st::sendMediaFileThumbSize)
 			/ originalHeight;
 	}
 	auto options = Images::Option::Smooth
@@ -73,8 +73,8 @@ void SingleFilePreview::prepareThumb(const QImage &preview) {
 		thumbWidth * style::DevicePixelRatio(),
 		0,
 		options,
-		st::msgFileThumbSize,
-		st::msgFileThumbSize));
+		st::sendMediaFileThumbSize,
+		st::sendMediaFileThumbSize));
 }
 
 void SingleFilePreview::preparePreview(const PreparedFile &file) {
@@ -95,12 +95,8 @@ void SingleFilePreview::preparePreview(const PreparedFile &file) {
 		//	QString(),
 		//	true); // #TODO files
 		auto filename = "image.png";
-		_nameText.setText(
-			st::semiboldTextStyle,
-			filename,
-			NameTextOptions());
+		_name = filename;
 		_statusText = u"%1x%2"_q.arg(preview.width()).arg(preview.height());
-		_statusWidth = qMax(_nameText.maxWidth(), st::normalFont->width(_statusText));
 		_fileIsImage = true;
 	} else {
 		auto fileinfo = QFileInfo(filepath);
@@ -118,46 +114,48 @@ void SingleFilePreview::preparePreview(const PreparedFile &file) {
 			}
 		}
 
-		const auto nameString = ComposeNameString(
-			filename,
-			songTitle,
-			songPerformer);
-		_nameText.setText(
-			st::semiboldTextStyle,
-			nameString,
-			NameTextOptions());
+		_name = ComposeNameString(filename, songTitle, songPerformer);
 		_statusText = FormatSizeText(fileinfo.size());
-		_statusWidth = qMax(
-			_nameText.maxWidth(),
-			st::normalFont->width(_statusText));
 	}
+	const auto availableFileWidth = st::sendMediaPreviewSize
+		- st::sendMediaFileThumbSkip
+		- st::sendMediaFileThumbSize
+		// Right buttons.
+		- st::sendBoxAlbumGroupButtonFile.width * 2
+		- st::sendBoxAlbumGroupEditInternalSkip * 2
+		- st::sendBoxAlbumGroupSkipRight;
+	_nameWidth = st::semiboldFont->width(_name);
+	if (_nameWidth > availableFileWidth) {
+		_name = st::semiboldFont->elided(
+			_name,
+			availableFileWidth,
+			Qt::ElideMiddle);
+		_nameWidth = st::semiboldFont->width(_name);
+	}
+	_statusWidth = st::normalFont->width(_statusText);
 }
 
 void SingleFilePreview::paintEvent(QPaintEvent *e) {
 	Painter p(this);
 
 	auto w = width() - st::boxPhotoPadding.left() - st::boxPhotoPadding.right();
-	auto h = _fileThumb.isNull() ? (st::msgFilePadding.top() + st::msgFileSize + st::msgFilePadding.bottom()) : (st::msgFileThumbPadding.top() + st::msgFileThumbSize + st::msgFileThumbPadding.bottom());
-	auto nameleft = 0, nametop = 0, nameright = 0, statustop = 0, linktop = 0;
+	auto h = _fileThumb.isNull() ? st::msgFileSize : st::sendMediaFileThumbSize;
+	auto nameleft = 0, nametop = 0, statustop = 0;
 	if (_fileThumb.isNull()) {
-		nameleft = st::msgFilePadding.left() + st::msgFileSize + st::msgFilePadding.right();
-		nametop = st::msgFileNameTop;
-		nameright = st::msgFilePadding.left();
-		statustop = st::msgFileStatusTop;
+		nameleft = st::msgFileSize + st::msgFilePadding.right();
+		nametop = st::msgFileNameTop - st::msgFilePadding.top();
+		statustop = st::msgFileStatusTop - st::msgFilePadding.top();
 	} else {
-		nameleft = st::msgFileThumbPadding.left() + st::msgFileThumbSize + st::msgFileThumbPadding.right();
-		nametop = st::msgFileThumbNameTop;
-		nameright = st::msgFileThumbPadding.left();
-		statustop = st::msgFileThumbStatusTop;
-		linktop = st::msgFileThumbLinkTop;
+		nameleft = st::sendMediaFileThumbSize + st::sendMediaFileThumbSkip;
+		nametop = st::sendMediaFileNameTop;
+		statustop = st::sendMediaFileStatusTop;
 	}
-	auto namewidth = w - nameleft - (_fileThumb.isNull() ? st::msgFilePadding.left() : st::msgFileThumbPadding.left());
-	int32 x = (width() - w) / 2, y = 0;
+	const auto x = (width() - w) / 2, y = 0;
 
 	if (_fileThumb.isNull()) {
-		QRect inner(style::rtlrect(x + st::msgFilePadding.left(), y + st::msgFilePadding.top(), st::msgFileSize, st::msgFileSize, width()));
+		QRect inner(style::rtlrect(x, y, st::msgFileSize, st::msgFileSize, width()));
 		p.setPen(Qt::NoPen);
-		p.setBrush(st::msgFileOutBg);
+		p.setBrush(st::msgFileInBg);
 
 		{
 			PainterHighQualityEnabler hq(p);
@@ -165,23 +163,22 @@ void SingleFilePreview::paintEvent(QPaintEvent *e) {
 		}
 
 		auto &icon = _fileIsAudio
-			? st::historyFileOutPlay
+			? st::historyFileInPlay
 			: _fileIsImage
-			? st::historyFileOutImage
-			: st::historyFileOutDocument;
+			? st::historyFileInImage
+			: st::historyFileInDocument;
 		icon.paintInCenter(p, inner);
 	} else {
-		QRect rthumb(style::rtlrect(x + st::msgFileThumbPadding.left(), y + st::msgFileThumbPadding.top(), st::msgFileThumbSize, st::msgFileThumbSize, width()));
+		QRect rthumb(style::rtlrect(x, y, st::sendMediaFileThumbSize, st::sendMediaFileThumbSize, width()));
 		p.drawPixmap(rthumb.topLeft(), _fileThumb);
 	}
 	p.setFont(st::semiboldFont);
-	p.setPen(st::historyFileNameOutFg);
-	_nameText.drawLeftElided(p, x + nameleft, y + nametop, namewidth, width());
+	p.setPen(st::historyFileNameInFg);
+	p.drawTextLeft(x + nameleft, y + nametop, width(), _name, _nameWidth);
 
-	auto &status = st::mediaOutFg;
 	p.setFont(st::normalFont);
-	p.setPen(status);
-	p.drawTextLeft(x + nameleft, y + statustop, width(), _statusText);
+	p.setPen(st::mediaInFg);
+	p.drawTextLeft(x + nameleft, y + statustop, width(), _statusText, _statusWidth);
 }
 
 void SingleFilePreview::resizeEvent(QResizeEvent *e) {

Telegram/SourceFiles/ui/chat/attach/attach_single_file_preview.h

@@ -33,11 +33,12 @@ private:
 	void prepareThumb(const QImage &preview);
 
 	QPixmap _fileThumb;
-	Text::String _nameText;
+	QString _name;
+	QString _statusText;
+	int _nameWidth = 0;
+	int _statusWidth = 0;
 	bool _fileIsAudio = false;
 	bool _fileIsImage = false;
-	QString _statusText;
-	int _statusWidth = 0;
 
 	object_ptr<IconButton> _editMedia = { nullptr };
 	object_ptr<IconButton> _deleteMedia = { nullptr };

Telegram/SourceFiles/ui/chat/attach/attach_single_media_preview.cpp

@@ -155,7 +155,9 @@ void SingleMediaPreview::resizeEvent(QResizeEvent *e) {
 	const auto skipTop = st::sendBoxAlbumGroupSkipTop;
 	const auto groupWidth = size * 2 + skipInternal;
 
-	const auto left = _previewLeft + _previewWidth - groupWidth - skipRight;
+	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);
@@ -259,8 +261,9 @@ void SingleMediaPreview::paintButtonsBackground(QPainter &p) {
 	const auto skipRight = st::sendBoxAlbumGroupSkipRight;
 	const auto skipTop = st::sendBoxAlbumGroupSkipTop;
 	const auto groupWidth = size * 2 + skipInternal;
-
-	const auto left = _previewLeft + _previewWidth - groupWidth - skipRight;
+	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);