Allow several lines in QR code intro step phrases.

Telegram/Resources/langs/lang.strings

@@ -179,9 +179,9 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL
 "lng_photos_comment" = "Comment";
 
 "lng_intro_qr_title" = "Scan From Mobile Telegram";
-"lng_intro_qr_step1" = "**1.** Open Telegram on your phone";
-"lng_intro_qr_step2" = "**2.** Go to Settings > Devices > Scan QR Code";
-"lng_intro_qr_step3" = "**3.** Scan this image to Log In";
+"lng_intro_qr_step1" = "Open Telegram on your phone";
+"lng_intro_qr_step2" = "Go to Settings > Devices > Scan QR Code";
+"lng_intro_qr_step3" = "Scan this image to Log In";
 "lng_intro_qr_skip" = "Or log in using your phone number";
 
 "lng_phone_title" = "Your Phone Number";

Telegram/SourceFiles/intro/intro.style

@@ -167,8 +167,11 @@ introQrTop: -6px;
 introQrPixel: 50px; // large enough
 introQrMaxSize: 180px;
 introQrLabelsWidth: 292px;
+introQrTitleWidth: 320px;
 introQrTitle: FlatLabel(defaultFlatLabel) {
 	textFg: introTitleFg;
+	align: align(top);
+	minWidth: introQrTitleWidth;
 	style: TextStyle(defaultTextStyle) {
 		font: font(20px semibold);
 		linkFont: font(20px semibold);
@@ -177,9 +180,11 @@ introQrTitle: FlatLabel(defaultFlatLabel) {
 }
 introQrErrorTop: 336px;
 introQrTitleTop: 196px;
-introQrStep: defaultFlatLabel;
+introQrStep: FlatLabel(defaultFlatLabel) {
+	minWidth: introQrLabelsWidth;
+}
 introQrStepsTop: 232px;
-introQrStepMargins: margins(0px, 8px, 0px, 0px);
+introQrStepMargins: margins(20px, 8px, 0px, 0px);
 introQrSkipTop: 360px;
 introQrCenterSize: 44px;
 introQrPlane: icon {{ "intro_qr_plane", activeButtonFg }};

Telegram/SourceFiles/intro/intro_qr.cpp

@@ -245,9 +245,12 @@ void QrWidget::setupControls() {
 		sizeValue(),
 		title->widthValue()
 	) | rpl::start_with_next([=](QSize size, int titleWidth) {
+		title->resizeToWidth(st::introQrTitleWidth);
+		const auto oneLine = st::introQrTitle.style.font->height;
+		const auto topDelta = (title->height() - oneLine);
 		title->moveToLeft(
-			(size.width() - st::introQrLabelsWidth) / 2,
-			contentTop() + st::introQrTitleTop);
+			(size.width() - title->width()) / 2,
+			contentTop() + st::introQrTitleTop - topDelta);
 	}, title->lifetime());
 
 	const auto steps = Ui::CreateChild<Ui::VerticalLayout>(this);
@@ -256,13 +259,26 @@ void QrWidget::setupControls() {
 		tr::lng_intro_qr_step2,
 		tr::lng_intro_qr_step3,
 	};
+	auto index = 0;
 	for (const auto &text : texts) {
-		steps->add(
+		const auto label = steps->add(
 			object_ptr<Ui::FlatLabel>(
-				this,
+				steps,
 				text(Ui::Text::RichLangValue),
 				st::introQrStep),
 			st::introQrStepMargins);
+		const auto number = Ui::CreateChild<Ui::FlatLabel>(
+			steps,
+			rpl::single(Ui::Text::Bold(QString::number(++index) + ".")),
+			st::defaultFlatLabel);
+		rpl::combine(
+			number->widthValue(),
+			label->positionValue()
+		) | rpl::start_with_next([=](int width, QPoint position) {
+			number->moveToLeft(
+				position.x() - width - st::normalFont->spacew,
+				position.y());
+		}, number->lifetime());
 	}
 	steps->resizeToWidth(st::introQrLabelsWidth);
 	rpl::combine(

Telegram/SourceFiles/intro/intro_widget.cpp

@@ -224,6 +224,7 @@ void Widget::historyMove(Direction direction) {
 		_coverShownAnimation.start([this] { updateControlsGeometry(); }, 0., 1., st::introCoverDuration, wasStep->hasCover() ? anim::linear : anim::easeOutCirc);
 	}
 
+	_stepLifetime.destroy();
 	if (direction == Direction::Forward || direction == Direction::Replace) {
 		wasStep->finished();
 	}
@@ -521,13 +522,10 @@ void Widget::setupNextButton() {
 	) | rpl::filter([](const QString &text) {
 		return !text.isEmpty();
 	}));
-	auto visible = getStep()->nextButtonText(
+	getStep()->nextButtonText(
 	) | rpl::map([](const QString &text) {
 		return !text.isEmpty();
-	});
-	std::move(
-		visible
-	) | rpl::filter([=](bool visible) {
+	}) | rpl::filter([=](bool visible) {
 		return visible != _nextShown;
 	}) | rpl::start_with_next([=](bool visible) {
 		_next->toggle(visible, anim::type::normal);
@@ -542,7 +540,7 @@ void Widget::setupNextButton() {
 			_nextShown ? 0. : 1.,
 			_nextShown ? 1. : 0.,
 			st::slideDuration);
-	}, getStep()->lifetime());
+	}, _stepLifetime);
 }
 
 void Widget::hideControls() {

Telegram/SourceFiles/intro/intro_widget.h

@@ -131,6 +131,7 @@ private:
 	QPixmap _cacheUnder, _cacheOver;
 
 	std::vector<details::Step*> _stepHistory;
+	rpl::lifetime _stepLifetime;
 
 	details::Data _data;