Improve unsupported stories design.

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

@@ -2791,24 +2791,24 @@ void ComposeControls::replyToMessage(FullMsgId id) {
 }
 
 void ComposeControls::cancelReplyMessage() {
-	Expects(_history != nullptr);
-
 	const auto wasReply = replyingToMessage();
 	_header->replyToMessage({});
-	const auto key = draftKey(DraftType::Normal);
+	if (_history) {
-	if (const auto localDraft = _history->draft(key)) {
+		const auto key = draftKey(DraftType::Normal);
-		if (localDraft->msgId) {
+		if (const auto localDraft = _history->draft(key)) {
-			if (localDraft->textWithTags.text.isEmpty()) {
+			if (localDraft->msgId) {
-				_history->clearDraft(key);
+				if (localDraft->textWithTags.text.isEmpty()) {
-			} else {
+					_history->clearDraft(key);
-				localDraft->msgId = 0;
+				} else {
+					localDraft->msgId = 0;
+				}
 			}
 		}
-	}
+		if (wasReply) {
-	if (wasReply) {
+			_saveDraftText = true;
-		_saveDraftText = true;
+			_saveDraftStart = crl::now();
-		_saveDraftStart = crl::now();
+			saveDraft();
-		saveDraft();
+		}
 	}
 }
 

Telegram/SourceFiles/info/info.style

@@ -496,7 +496,8 @@ infoMediaHeaderStyle: TextStyle(semiboldTextStyle) {
 }
 infoMediaHeaderHeight: 28px;
 infoMediaHeaderPosition: point(14px, 6px);
-infoMediaSkip: 5px;
+infoMediaSkip: 2px;
+infoMediaLeft: 3px;
 infoMediaMargin: margins(0px, 6px, 0px, 2px);
 infoMediaMinGridSize: 90px;
 
@@ -591,7 +592,7 @@ infoStoriesAboutArchive: FlatLabel(defaultFlatLabel) {
 	textFg: windowSubTextFg;
 	style: defaultTextStyle;
 }
-infoStoriesAboutArchivePadding: margins(22px, 8px, 22px, 16px);
+infoStoriesAboutArchivePadding: margins(22px, 12px, 22px, 12px);
 
 editPeerBottomButtonsLayoutMargins: margins(0px, 7px, 0px, 0px);
 

Telegram/SourceFiles/info/media/info_media_list_section.cpp

@@ -340,12 +340,15 @@ void ListSection::resizeToWidth(int newWidth) {
 	case Type::Video:
 	case Type::PhotoVideo: // #TODO stories
 	case Type::RoundFile: {
-		_itemsLeft = st::infoMediaSkip;
+		const auto skip = st::infoMediaSkip;
+		_itemsLeft = st::infoMediaLeft;
 		_itemsTop = st::infoMediaSkip;
-		_itemsInRow = (newWidth - _itemsLeft)
+		_itemsInRow = (newWidth - _itemsLeft * 2 + skip)
-			/ (st::infoMediaMinGridSize + st::infoMediaSkip);
+			/ (st::infoMediaMinGridSize + skip);
-		_itemWidth = ((newWidth - _itemsLeft) / _itemsInRow)
+		_itemWidth = ((newWidth - _itemsLeft * 2 + skip) / _itemsInRow)
 			- st::infoMediaSkip;
+		_itemsLeft = (newWidth - (_itemWidth + skip) * _itemsInRow + skip)
+			/ 2;
 		for (auto &item : _items) {
 			_itemHeight = item->resizeGetHeight(_itemWidth);
 		}

Telegram/SourceFiles/media/stories/media_stories_controller.cpp

@@ -39,7 +39,10 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 #include "ui/layers/box_content.h"
 #include "ui/widgets/buttons.h"
 #include "ui/widgets/labels.h"
+#include "ui/round_rect.h"
 #include "ui/rp_widget.h"
+#include "styles/style_chat.h"
+#include "styles/style_chat_helpers.h"
 #include "styles/style_media_view.h"
 #include "styles/style_widgets.h"
 #include "styles/style_boxes.h" // UserpicButton
@@ -84,14 +87,17 @@ private:
 
 class Controller::Unsupported final {
 public:
-	explicit Unsupported(not_null<Controller*> controller);
+	Unsupported(not_null<Controller*> controller, not_null<UserData*> user);
 
 private:
-	void setup();
+	void setup(not_null<UserData*> user);
 
 	const not_null<Controller*> _controller;
+	std::unique_ptr<Ui::RpWidget> _bg;
+	std::unique_ptr<Ui::RpWidget> _reply;
 	std::unique_ptr<Ui::FlatLabel> _text;
 	std::unique_ptr<Ui::RoundButton> _button;
+	Ui::RoundRect _bgRound;
 
 };
 
@@ -146,14 +152,52 @@ void Controller::PhotoPlayback::callback() {
 	});
 }
 
-Controller::Unsupported::Unsupported(not_null<Controller*> controller)
+Controller::Unsupported::Unsupported(
-: _controller(controller) {
+	not_null<Controller*> controller,
-	setup();
+	not_null<UserData*> user)
+: _controller(controller)
+, _bgRound(st::storiesRadius, st::storiesComposeBg) {
+	setup(user);
 }
 
-void Controller::Unsupported::setup() {
+void Controller::Unsupported::setup(not_null<UserData*> user) {
 	const auto wrap = _controller->wrap();
 
+	_bg = std::make_unique<Ui::RpWidget>(wrap);
+	_bg->show();
+	_bg->paintRequest() | rpl::start_with_next([=] {
+		auto p = QPainter(_bg.get());
+		_bgRound.paint(p, _bg->rect());
+	}, _bg->lifetime());
+
+	if (!user->isSelf()) {
+		_reply = std::make_unique<Ui::RpWidget>(wrap);
+		_reply->show();
+		_reply->paintRequest() | rpl::start_with_next([=] {
+			auto p = QPainter(_reply.get());
+			_bgRound.paint(p, _reply->rect());
+
+			p.setPen(st::storiesComposeGrayText);
+			p.setFont(st::normalFont);
+			p.drawText(
+				_reply->rect(),
+				tr::lng_stories_cant_reply(tr::now),
+				style::al_center);
+		}, _reply->lifetime());
+	}
+
+	_controller->layoutValue(
+	) | rpl::start_with_next([=](const Layout &layout) {
+		_bg->setGeometry(layout.content);
+		if (_reply) {
+			const auto height = st::storiesComposeControls.attach.height;
+			const auto position = layout.controlsBottomPosition
+				- QPoint(0, height);
+			_reply->setGeometry(
+				{ position, QSize{ layout.controlsWidth, height } });
+		}
+	}, _bg->lifetime());
+
 	_text = std::make_unique<Ui::FlatLabel>(
 		wrap,
 		tr::lng_stories_unsupported(),
@@ -164,17 +208,29 @@ void Controller::Unsupported::setup() {
 		wrap,
 		tr::lng_update_telegram(),
 		st::storiesUnsupportedUpdate);
+	_button->setTextTransform(Ui::RoundButton::TextTransform::NoTransform);
 	_button->show();
 
 	rpl::combine(
-		wrap->sizeValue(),
+		_controller->layoutValue(),
 		_text->sizeValue(),
 		_button->sizeValue()
-	) | rpl::start_with_next([=](QSize wrap, QSize text, QSize button) {
+	) | rpl::start_with_next([=](
-		_text->move((wrap.width() - text.width()) / 2, wrap.height() / 3);
+			const Layout &layout,
+			QSize text,
+			QSize button) {
+		const auto wrap = layout.content;
+		const auto totalHeight = st::storiesUnsupportedTop
+			+ text.height()
+			+ st::storiesUnsupportedSkip
+			+ button.height();
+		const auto top = (wrap.height() - totalHeight) / 2;
+		_text->move(
+			wrap.x() + (wrap.width() - text.width()) / 2,
+			wrap.y() + top + st::storiesUnsupportedTop);
 		_button->move(
-			(wrap.width() - button.width()) / 2,
+			wrap.x() + (wrap.width() - button.width()) / 2,
-			2 * wrap.height() / 3);
+			wrap.y() + top + totalHeight - button.height());
 	}, _button->lifetime());
 
 	_button->setClickedCallback([=] {
@@ -644,10 +700,13 @@ void Controller::show(
 		}
 	});
 
-	if (!story->unsupported()) {
+	const auto unsupported = story->unsupported();
+	if (!unsupported) {
 		_unsupported = nullptr;
 	} else {
-		_unsupported = std::make_unique<Unsupported>(this);
+		_unsupported = std::make_unique<Unsupported>(this, user);
+		_header->raise();
+		_slider->raise();
 	}
 
 	if (_shown == storyId) {
@@ -664,7 +723,10 @@ void Controller::show(
 	}
 
 	_header->show({ .user = user, .date = story->date() });
-	_replyArea->show({ .user = user, .id = story->id() });
+	_replyArea->show({
+		.user = unsupported ? nullptr : user,
+		.id = story->id(),
+	});
 	_recentViews->show({
 		.list = story->recentViewers(),
 		.total = story->views(),

Telegram/SourceFiles/media/stories/media_stories_header.cpp

@@ -131,6 +131,12 @@ void Header::show(HeaderData data) {
 	}
 }
 
+void Header::raise() {
+	if (_widget) {
+		_widget->raise();
+	}
+}
+
 void Header::updateDateText() {
 	if (!_date || !_data || !_data->date) {
 		return;

Telegram/SourceFiles/media/stories/media_stories_header.h

@@ -33,6 +33,7 @@ public:
 	~Header();
 
 	void show(HeaderData data);
+	void raise();
 
 private:
 	void updateDateText();

Telegram/SourceFiles/media/stories/media_stories_reply.cpp

@@ -74,6 +74,7 @@ ReplyArea::ReplyArea(not_null<Controller*> controller)
 )) {
 	initGeometry();
 	initActions();
+	_controls->hide();
 }
 
 ReplyArea::~ReplyArea() {

Telegram/SourceFiles/media/stories/media_stories_slider.cpp

@@ -73,6 +73,12 @@ void Slider::show(SliderData data) {
 	}, raw->lifetime());
 }
 
+void Slider::raise() {
+	if (_widget) {
+		_widget->raise();
+	}
+}
+
 void Slider::updatePlayback(const Player::TrackState &state) {
 	_progress->updateState(state);
 }

Telegram/SourceFiles/media/stories/media_stories_slider.h

@@ -37,6 +37,7 @@ public:
 	~Slider();
 
 	void show(SliderData data);
+	void raise();
 
 	void updatePlayback(const Player::TrackState &state);
 

Telegram/SourceFiles/media/view/media_view.style

@@ -786,13 +786,20 @@ storiesReactionsAddedTop: 200px;
 storiesUnsupportedLabel: FlatLabel(defaultFlatLabel) {
 	textFg: mediaviewControlFg;
 	style: TextStyle(defaultTextStyle) {
-		font: font(15px semibold);
+		font: font(14px);
-		linkFont: font(15px semibold);
+		linkFont: font(14px);
-		linkFontOver: font(15px semibold underline);
+		linkFontOver: font(14px underline);
+		lineHeight: 21px;
 	}
 	align: align(top);
 }
-storiesUnsupportedUpdate: themePreviewApplyButton;
+storiesUnsupportedUpdate: RoundButton(defaultActiveButton) {
+	width: -102px;
+	height: 42px;
+	textTop: 12px;
+}
+storiesUnsupportedTop: 24px;
+storiesUnsupportedSkip: 18px;
 storiesShortInfoBox: ShortInfoBox(shortInfoBox) {
 	label: FlatLabel(infoLabel) {
 		textFg: storiesComposeGrayText;