Start redesign of video stream comments.

Telegram/SourceFiles/calls/group/calls_group_viewport_opengl.cpp

@@ -17,6 +17,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/painter.h"
 #include "data/data_peer.h"
 #include "styles/style_calls.h"
+#include "styles/style_media_view.h"
 
 #include <QOpenGLShader>
 
@@ -789,8 +790,11 @@ void Viewport::RendererGL::paintTile(
 	program->setUniformValue(
 		"frameBg",
 		fullscreen ? QColor(0, 0, 0) : *clearColor());
+	const auto radius = _owner->videoStream()
+		? st::storiesRadius
+		: st::roundRadiusLarge;
 	program->setUniformValue("radiusOutline", QVector2D(
-		GLfloat(st::roundRadiusLarge * _factor * (fullscreen ? 0. : 1.)),
+		GLfloat(radius * _factor * (fullscreen ? 0. : 1.)),
 		(outline > 0) ? (st::groupCallOutline * _factor) : 0.f));
 	program->setUniformValue("roundRect", Uniform(rect));
 	program->setUniformValue("roundBg", *clearColor());

Telegram/SourceFiles/chat_helpers/chat_helpers.style

@@ -148,6 +148,7 @@ EmojiButton {
 }
 
 SendButton {
+	sendIconPosition: point;
 	inner: IconButton;
 	stars: RoundButton;
 	record: icon;
@@ -201,6 +202,7 @@ ComposeFiles {
 ComposeControls {
 	bg: color;
 	radius: pixels;
+	padding: margins;
 
 	field: InputField;
 	send: SendButton;
@@ -1105,6 +1107,8 @@ historyComposeField: InputField(defaultInputField) {
 }
 historyComposeFieldMaxHeight: 224px;
 historyComposeFieldFadeHeight: 6px;
+historySendRight: 2px;
+historySendPadding: 9px;
 // historyMinHeight: 56px;
 
 historyAttach: IconButton(defaultIconButton) {
@@ -1224,7 +1228,6 @@ boxAttachEmojiTop: 20px;
 
 historySendIcon: icon {{ "chat/input_send", historySendIconFg }};
 historySendIconOver: icon {{ "chat/input_send", historySendIconFgOver }};
-historySendIconPosition: point(10px, 11px);
 historySendSize: size(44px, 46px);
 historyScheduleIcon: icon {{ "chat/input_schedule", historyComposeAreaBg }};
 historyScheduleIconPosition: point(7px, 8px);
@@ -1366,6 +1369,7 @@ defaultRecordBar: RecordBar {
 }
 
 historySend: SendButton {
+	sendIconPosition: point(10px, 11px);
 	inner: IconButton(historyAttach) {
 		icon: historySendIcon;
 		iconOver: historySendIconOver;
@@ -1424,6 +1428,7 @@ defaultRestrictionLabel: FlatLabel(defaultFlatLabel) {
 defaultComposeControls: ComposeControls {
 	bg: historyComposeAreaBg;
 	radius: 0px;
+	padding: margins(historySendRight, historySendPadding, historySendRight, historySendPadding);
 
 	field: historyComposeField;
 	send: historySend;

Telegram/SourceFiles/chat_helpers/compose/compose_features.h

@@ -13,6 +13,7 @@ struct ComposeFeatures {
 	bool likes : 1 = false;
 	bool sendAs : 1 = true;
 	bool ttlInfo : 1 = true;
+	bool attachments : 1 = true;
 	bool botCommandSend : 1 = true;
 	bool silentBroadcastToggle : 1 = true;
 	bool attachBotsMenu : 1 = true;

Telegram/SourceFiles/history/view/controls/history_view_compose_controls.cpp

@@ -913,7 +913,9 @@ ComposeControls::ComposeControls(
 , _editStars(_features.editMessageStars
 	? Ui::CreateChild<Ui::IconButton>(_wrap.get(), _st.editStars)
 	: nullptr)
-, _attachToggle(Ui::CreateChild<Ui::IconButton>(_wrap.get(), _st.attach))
+, _attachToggle(_features.attachments
+	? Ui::CreateChild<Ui::IconButton>(_wrap.get(), _st.attach)
+	: nullptr)
 , _tabbedSelectorToggle(Ui::CreateChild<Ui::EmojiButton>(
 	_wrap.get(),
 	_st.emoji))
@@ -1113,6 +1115,7 @@ void ComposeControls::updateLikeParent() {
 }
 
 void ComposeControls::updateFeatures(ChatHelpers::ComposeFeatures features) {
+	auto changed = false;
 	const auto was = std::exchange(_features, features);
 	if (was.likes != features.likes) {
 		if (!features.likes) {
@@ -1126,7 +1129,7 @@ void ComposeControls::updateFeatures(ChatHelpers::ComposeFeatures features) {
 				updateControlsVisibility();
 			}
 		}
-		updateControlsGeometry(_wrap->size());
+		changed = true;
 	}
 	if (was.editMessageStars != features.editMessageStars) {
 		if (!features.editMessageStars) {
@@ -1137,12 +1140,27 @@ void ComposeControls::updateFeatures(ChatHelpers::ComposeFeatures features) {
 				_wrap.get(),
 				_st.editStars);
 			initEditStarsButton();
-			updateControlsGeometry(_wrap->size());
 		}
+		changed = true;
 	}
 	if (was.recordMediaMessage != features.recordMediaMessage) {
 		updateSendButtonType();
 	}
+	if (was.attachments != features.attachments) {
+		if (!features.attachments) {
+			delete base::take(_attachToggle);
+		} else {
+			_attachToggle = Ui::CreateChild<Ui::IconButton>(
+				_wrap.get(),
+				_st.attach);
+			updateControlsVisibility();
+		}
+		updateAttachBotsMenu();
+		changed = true;
+	}
+	if (changed) {
+		updateControlsGeometry(_wrap->size());
+	}
 }
 
 void ComposeControls::setCurrentDialogsEntryState(
@@ -2798,9 +2816,10 @@ void ComposeControls::updateControlsGeometry(QSize size) {
 	// (_attachDocument|_attachPhoto) _field (_ttlInfo) (_scheduled) (_silent|_botCommandStart) _tabbedSelectorToggle _send
 
 	const auto fieldWidth = size.width()
-		- _attachToggle->width()
+		- _st.padding.left()
+		- (_attachToggle ? _attachToggle->width() : 0)
 		- (_sendAs ? _sendAs->width() : 0)
-		- st::historySendRight
+		- _st.padding.right()
 		- _send->width()
 		- _tabbedSelectorToggle->width()
 		- (_likeShown ? _like->width() : 0)
@@ -2819,28 +2838,30 @@ void ComposeControls::updateControlsGeometry(QSize size) {
 		}
 	}
 
-	const auto buttonsTop = size.height() - _attachToggle->height();
+	const auto buttonsTop = size.height() - _st.attach.height;
 
-	auto left = st::historySendRight;
+	auto left = _st.padding.left();
 	if (_replaceMedia) {
 		_replaceMedia->moveToLeft(left, buttonsTop);
 	}
-	_attachToggle->moveToLeft(left, buttonsTop);
-	left += _attachToggle->width();
+	if (_attachToggle) {
+		_attachToggle->moveToLeft(left, buttonsTop);
+		left += _attachToggle->width();
+	}
 	if (_sendAs) {
 		_sendAs->moveToLeft(left, buttonsTop);
 		left += _sendAs->width();
 	}
 	_field->moveToLeft(
 		left,
-		size.height() - _field->height() - st::historySendPadding);
+		size.height() - _st.padding.bottom() - _field->height());
 
 	_header->resizeToWidth(size.width());
 	_header->moveToLeft(
 		0,
-		_field->y() - _header->height() - st::historySendPadding);
+		_field->y() - _st.padding.top() - _header->height());
 
-	auto right = st::historySendRight;
+	auto right = _st.padding.right();
 	_send->moveToRight(right, buttonsTop);
 	right += _send->width();
 	_tabbedSelectorToggle->moveToRight(right, buttonsTop);
@@ -2902,9 +2923,9 @@ void ComposeControls::updateControlsVisibility() {
 	}
 	if (_replaceMedia) {
 		_replaceMedia->show();
-		_attachToggle->hide();
-	} else {
-		_attachToggle->show();
+	}
+	if (_attachToggle) {
+		_attachToggle->setVisible(!_replaceMedia);
 	}
 	if (_scheduled) {
 		_scheduled->setVisible(!isEditingMessage());
@@ -2943,7 +2964,7 @@ void ComposeControls::updateOuterGeometry(QRect rect) {
 	if (_inlineResults) {
 		_inlineResults->moveBottom(rect.y());
 	}
-	const auto bottom = rect.y() + rect.height() - _attachToggle->height();
+	const auto bottom = rect.y() + rect.height() - _st.attach.height;
 	if (_tabbedPanel) {
 		_tabbedPanel->moveBottomRight(bottom, rect.x() + rect.width());
 	}
@@ -3000,6 +3021,7 @@ bool ComposeControls::updateSendAsButton() {
 void ComposeControls::updateAttachBotsMenu() {
 	_attachBotsMenu = nullptr;
 	if (!_features.attachBotsMenu
+		|| !_features.attachments
 		|| !_history
 		|| !_sendActionFactory
 		|| !_regularWindow) {
@@ -3130,9 +3152,10 @@ void ComposeControls::toggleTabbedSelectorMode() {
 }
 
 void ComposeControls::updateHeight() {
-	const auto height = _field->height()
-		+ (_header->isDisplayed() ? _header->height() : 0)
-		+ 2 * st::historySendPadding;
+	const auto height = (_header->isDisplayed() ? _header->height() : 0)
+		+ _st.padding.top()
+		+ _field->height()
+		+ _st.padding.bottom();
 	if (height != _wrap->height()) {
 		_wrap->resize(_wrap->width(), height);
 	}

Telegram/SourceFiles/history/view/controls/history_view_compose_controls.h

@@ -395,7 +395,7 @@ private:
 	Ui::IconButton *_like = nullptr;
 	Ui::IconButton *_editStars = nullptr;
 	std::optional<int> _chosenStarsCount;
-	const not_null<Ui::IconButton*> _attachToggle;
+	Ui::IconButton *_attachToggle = nullptr;
 	std::unique_ptr<Ui::IconButton> _replaceMedia;
 	const not_null<Ui::EmojiButton*> _tabbedSelectorToggle;
 	rpl::producer<QString> _fieldCustomPlaceholder;

Telegram/SourceFiles/media/stories/media_stories_reply.cpp

@@ -102,6 +102,7 @@ namespace {
 		.likes = !videoStream,
 		.sendAs = false,
 		.ttlInfo = false,
+		.attachments = !videoStream,
 		.botCommandSend = false,
 		.silentBroadcastToggle = false,
 		.attachBotsMenu = false,

Telegram/SourceFiles/media/view/media_view.style

@@ -457,7 +457,7 @@ storiesHeaderRepostWidthMin: 40px;
 storiesShadowTop: icon{{ "mediaview/shadow_bottom-flip_vertical", windowShadowFg }};
 storiesShadowBottom: mediaviewShadowBottom;
 storiesControlsMinWidth: 280px;
-storiesFieldMargin: margins(0px, 14px, 0px, 16px);
+storiesFieldMargin: margins(0px, 18px, 0px, 12px);
 storiesSideSkip: 145px;
 storiesCaptionFull: FlatLabel(defaultFlatLabel) {
 	style: mediaviewCaptionStyle;
@@ -479,8 +479,10 @@ storiesComposeRipple: RippleAnimation(defaultRippleAnimation) {
 	color: groupCallMembersBgRipple;
 }
 storiesAttach: IconButton(historyAttach) {
+	height: 42px;
 	icon: icon {{ "chat/input_attach", storiesComposeGrayIcon }};
 	iconOver: icon {{ "chat/input_attach", storiesComposeGrayIcon }};
+	rippleAreaPosition: point(2px, 1px);
 	ripple: storiesComposeRippleLight;
 }
 storiesLike: IconButton(storiesAttach) {
@@ -686,7 +688,8 @@ storiesBoxInputField: InputField(defaultComposeFilesField) {
 }
 storiesComposeControls: ComposeControls(defaultComposeControls) {
 	bg: storiesComposeBg;
-	radius: storiesRadius;
+	radius: 21px;
+	padding: margins(10px, 8px, 2px, 6px);
 	field: InputField(historyComposeField) {
 		textFg: storiesComposeWhiteText;
 		textBg: storiesComposeBg;
@@ -696,6 +699,7 @@ storiesComposeControls: ComposeControls(defaultComposeControls) {
 		menu: storiesPopupMenu;
 	}
 	send: SendButton(historySend) {
+		sendIconPosition: point(10px, 10px);
 		inner: IconButton(storiesAttach) {
 			icon: icon {{ "chat/input_send", storiesComposeBlue }};
 			iconOver: icon {{ "chat/input_send", storiesComposeBlue }};

Telegram/SourceFiles/media/view/media_view_video_stream.cpp

@@ -17,6 +17,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "chat_helpers/compose/compose_show.h"
 #include "core/application.h"
 #include "core/core_settings.h"
+#include "styles/style_calls.h"
 
 namespace Media::View {
 
@@ -119,11 +120,11 @@ not_null<Calls::GroupCall*> VideoStream::call() const {
 }
 
 void VideoStream::updateGeometry(int x, int y, int width, int height) {
+	const auto skip = st::groupCallMessageSkip;
 	_viewport->setGeometry(false, { x, y, width, height });
-	_messages->move(x, y + height, width, height);
+	_messages->move(x + skip, y + height, width - 2 * skip, height);
 }
 
-
 void VideoStream::ensureBorrowedRenderer(QOpenGLFunctions &f) {
 	_viewport->ensureBorrowedRenderer(f);
 }

Telegram/SourceFiles/ui/chat/chat.style

@@ -322,8 +322,6 @@ historyPinOutIcon: icon {{ "history_pin", historyOutIconFg }};
 historyPinOutSelectedIcon: icon {{ "history_pin", historyOutIconFgSelected }};
 historyPinInvertedIcon: icon {{ "history_pin", historySendingInvertedIconFg }};
 
-historySendPadding: 9px;
-historySendRight: 2px;
 historyBotMenuSkip: 8px;
 historyBotMenuMaxWidth: 160px;
 historyBotMenuButton: RoundButton(defaultActiveButton) {

Telegram/SourceFiles/ui/controls/send_button.cpp

@@ -196,9 +196,9 @@ void SendButton::paintSend(QPainter &p, bool over) {
 	const auto &sendIcon = over ? _st.inner.iconOver : _st.inner.icon;
 	if (isDisabled()) {
 		const auto color = st::historyRecordVoiceFg->c;
-		sendIcon.paint(p, st::historySendIconPosition, width(), color);
+		sendIcon.paint(p, _st.sendIconPosition, width(), color);
 	} else {
-		sendIcon.paint(p, st::historySendIconPosition, width());
+		sendIcon.paint(p, _st.sendIconPosition, width());
 	}
 }