Update styles to match the design.

Telegram/SourceFiles/boxes/boxes.style

@@ -641,7 +641,7 @@ rightsToggle: Toggle(defaultToggle) {
 	stroke: 2px;
 	duration: 120;
 }
-rightsDividerHeight: 11px;
+rightsDividerHeight: 10px;
 rightsHeaderMargin: margins(23px, 20px, 23px, 8px);
 rightsToggleMargin: margins(23px, 8px, 23px, 8px);
 rightsAboutMargin: margins(23px, 8px, 23px, 8px);

Telegram/SourceFiles/info/info.style

@@ -81,11 +81,11 @@ infoTabs: SettingsSlider(defaultTabsSlider) {
 }
 
 infoProfilePhotoSize: 72px;
-infoProfilePhotoLeft: 27px;
-infoProfilePhotoTop: 22px;
-infoProfilePhotoBottom: 22px;
+infoProfilePhotoLeft: 19px;
+infoProfilePhotoTop: 18px;
+infoProfilePhotoBottom: 18px;
 
-infoProfileNameLeft: 111px;
+infoProfileNameLeft: 109px;
 infoProfileNameRight: 20px;
 infoProfileNameTop: 32px;
 infoProfileNameLabel: FlatLabel(defaultFlatLabel) {
@@ -102,7 +102,7 @@ infoProfileNameLabel: FlatLabel(defaultFlatLabel) {
 
 infoProfileStatusLeft: infoProfileNameLeft;
 infoProfileStatusRight: infoProfileNameRight;
-infoProfileStatusTop: 62px;
+infoProfileStatusTop: 58px;
 infoProfileStatusLabel: FlatLabel(infoProfileNameLabel) {
 	margin: margins(10px, 5px, 10px, 5px);
 	width: 160px;
@@ -123,32 +123,45 @@ infoProfileToggleTop: 40px;
 
 infoProfileSkip: 12px;
 
-infoProfileLabeledPadding: margins(77px, 10px, 10px, 10px);
+infoProfileLabeledPadding: margins(79px, 9px, 30px, 7px);
 infoProfileSeparatorPadding: margins(
-	73px,
+	77px,
 	infoProfileSkip,
 	0px,
 	infoProfileSkip);
 
 infoIconFg: menuIconFg;
-infoIconPosition: point(28px, 4px);
+infoIconPosition: point(25px, 12px);
 infoIconInformation: icon {{ "info_information", infoIconFg }};
 infoIconMembers: icon {{ "info_members", infoIconFg }};
 infoIconNotifications: icon {{ "info_notifications", infoIconFg }};
 infoIconActions: icon {{ "info_actions", infoIconFg }};
 
-infoLabel: FlatLabel(defaultFlatLabel) {
-	textFg: windowSubTextFg;
-}
-infoLabeled: FlatLabel(defaultFlatLabel) {
-	width: 180px;
-	margin: margins(5px, 5px, 5px, 5px);
-}
-infoLabeledOneLine: FlatLabel(infoLabeled) {
+infoLabeledOneLine: FlatLabel(defaultFlatLabel) {
 	width: 0px; // No need to set minWidth in one-line text.
 	maxHeight: 20px;
+	style: TextStyle(defaultTextStyle) {
+		lineHeight: 19px;
+	}
+}
+infoLabelSkip: 2px;
+infoLabel: FlatLabel(infoLabeledOneLine) {
+	textFg: windowSubTextFg;
+}
+infoLabeled: FlatLabel(infoLabeledOneLine) {
+	width: 180px;
+	maxHeight: 0px;
+	margin: margins(5px, 5px, 5px, 5px);
 }
 
+infoProfileToggle: Toggle(defaultToggle) {
+	diameter: 16px;
+	width: 14px;
+	untoggledFg: menuIconFg;
+}
+infoProfileToggleOver: Toggle(infoProfileToggle) {
+	untoggledFg: menuIconFgOver;
+}
 infoProfileButton: InfoProfileButton {
 	textFg: windowBoldFg;
 	textFgOver: windowBoldFgOver;
@@ -157,17 +170,19 @@ infoProfileButton: InfoProfileButton {
 
 	font: semiboldFont;
 
-	height: 22px;
-	padding: margins(80px, 8px, 8px, 8px);
+	height: 20px;
+	padding: margins(79px, 10px, 8px, 8px);
 
-	toggle: defaultMenuToggle;
-	toggleOver: defaultMenuToggleOver;
+	toggle: infoProfileToggle;
+	toggleOver: infoProfileToggleOver;
+	toggleSkip: 23px;
 
 	ripple: defaultRippleAnimation;
 }
 infoNotificationsButton: InfoProfileButton(infoProfileButton) {
-	padding: margins(80px, 11px, 8px, 9px);
+	padding: margins(79px, 13px, 8px, 9px);
 }
+infoNotificationsIconPosition: point(20px, 5px);
 infoMainButton: InfoProfileButton(infoProfileButton) {
 	textFg: lightButtonFg;
 	textFgOver: lightButtonFgOver;

Telegram/SourceFiles/info/info_profile_inner_widget.cpp

@@ -76,17 +76,13 @@ object_ptr<Ui::RpWidget> InnerWidget::setupDetailsContent(
 	auto result = object_ptr<Ui::VerticalLayout>(parent);
 
 	result->add(object_ptr<BoxContentDivider>(result));
-
-	auto skipPadding = QMargins(0, 0, 0, st::infoProfileSkip);
-	result->add(object_ptr<Ui::PaddingWrap<>>(result, skipPadding));
-
+	result->add(createSkipWidget(result));
 	result->add(setupInfoLines(result));
 	result->add(setupMuteToggle(result));
 	if (auto user = _peer->asUser()) {
 		setupMainUserButtons(result, user);
 	}
-
-	result->add(object_ptr<Ui::PaddingWrap<>>(result, skipPadding));
+	result->add(createSkipWidget(result));
 
 	return std::move(result);
 }
@@ -113,19 +109,28 @@ object_ptr<Ui::RpWidget> InnerWidget::setupMuteToggle(
 
 	object_ptr<FloatingIcon>(
 		result,
-		st::infoIconNotifications);
+		st::infoIconNotifications,
+		st::infoNotificationsIconPosition);
 	return std::move(result);
 }
 
 void InnerWidget::setupMainUserButtons(
 		Ui::VerticalLayout *wrap,
 		not_null<UserData*> user) const {
-	auto sendMessage = wrap->add(object_ptr<Ui::SlideWrap<Button>>(
-		wrap,
-		object_ptr<Button>(
+	auto tracker = MultiLineTracker();
+	auto topSkip = wrap->add(createSlideSkipWidget(wrap));
+	auto addButton = [&](rpl::producer<QString> &&text) {
+		auto result = wrap->add(object_ptr<Ui::SlideWrap<Button>>(
 			wrap,
-			Lang::Viewer(lng_profile_send_message) | ToUpperValue(),
-			st::infoMainButton)));
+			object_ptr<Button>(
+				wrap,
+				std::move(text),
+				st::infoMainButton)));
+		tracker.track(result);
+		return result;
+	};
+	auto sendMessage = addButton(
+		Lang::Viewer(lng_profile_send_message) | ToUpperValue());
 	_controller->historyPeer.value()
 		| rpl::map([user](PeerData *peer) { return peer == user; })
 		| rpl::start([sendMessage](bool peerHistoryShown) {
@@ -139,12 +144,8 @@ void InnerWidget::setupMainUserButtons(
 		}, sendMessage->lifetime());
 	sendMessage->finishAnimations();
 
-	auto addContact = wrap->add(object_ptr<Ui::SlideWrap<Button>>(
-		wrap,
-		object_ptr<Button>(
-			wrap,
-			Lang::Viewer(lng_info_add_as_contact) | ToUpperValue(),
-			st::infoMainButton)));
+	auto addContact = addButton(
+		Lang::Viewer(lng_info_add_as_contact) | ToUpperValue());
 	CanAddContactViewer(user)
 		| rpl::start([addContact](bool canAdd) {
 			addContact->toggleAnimated(canAdd);
@@ -159,12 +160,18 @@ void InnerWidget::setupMainUserButtons(
 				: user->phone();
 			Ui::show(Box<AddContactBox>(firstName, lastName, phone));
 		}, addContact->lifetime());
+
+	std::move(tracker).atLeastOneShownValue()
+		| rpl::start([topSkip](bool someShown) {
+			topSkip->toggleAnimated(someShown);
+		}, topSkip->lifetime());
+	topSkip->finishAnimations();
 }
 
 object_ptr<Ui::RpWidget> InnerWidget::setupInfoLines(
 		RpWidget *parent) const {
 	auto result = object_ptr<Ui::VerticalLayout>(parent);
-	auto infoPartsShown = std::vector<rpl::producer<bool>>();
+	auto tracker = MultiLineTracker();
 	auto addInfoLine = [&](
 			LangKey label,
 			rpl::producer<TextWithEntities> &&text,
@@ -177,7 +184,7 @@ object_ptr<Ui::RpWidget> InnerWidget::setupInfoLines(
 			textSt,
 			st::infoProfileLabeledPadding,
 			selectByDoubleClick));
-		infoPartsShown.push_back(line->shownValue());
+		tracker.track(line);
 		return line;
 	};
 	auto addInfoOneLine = [&](
@@ -201,10 +208,7 @@ object_ptr<Ui::RpWidget> InnerWidget::setupInfoLines(
 		result,
 		object_ptr<Ui::PlainShadow>(result, st::shadowFg),
 		st::infoProfileSeparatorPadding));
-	rpl::combine(std::move(infoPartsShown),	[](const auto &values) {
-			return base::find(values, true) != values.end();
-		})
-		| rpl::distinct_until_changed()
+	std::move(tracker).atLeastOneShownValue()
 		| rpl::start([separator](bool someShown) {
 			separator->toggleAnimated(someShown);
 		}, separator->lifetime());
@@ -215,6 +219,16 @@ object_ptr<Ui::RpWidget> InnerWidget::setupInfoLines(
 	return std::move(result);
 }
 
+object_ptr<Ui::RpWidget> InnerWidget::createSkipWidget(
+		RpWidget *parent) const {
+	return Ui::CreateSkipWidget(parent, st::infoProfileSkip);
+}
+
+object_ptr<Ui::SlideWrap<>> InnerWidget::createSlideSkipWidget(
+		RpWidget *parent) const {
+	return Ui::CreateSlideSkipWidget(parent, st::infoProfileSkip);
+}
+
 void InnerWidget::visibleTopBottomUpdated(
 		int visibleTop,
 		int visibleBottom) {
@@ -230,7 +244,8 @@ void InnerWidget::restoreState(not_null<Memento*> memento) {
 
 int InnerWidget::resizeGetHeight(int newWidth) {
 	_content->resizeToWidth(newWidth);
-	return qMax(_content->height(), _minHeight);
+	_content->moveToLeft(0, 0);
+	return qMax(_content->heightNoMargins(), _minHeight);
 }
 
 } // namespace Profile

Telegram/SourceFiles/info/info_profile_inner_widget.h

@@ -22,12 +22,17 @@ Copyright (c) 2014-2017 John Preston, https://desktop.telegram.org
 
 #include <rpl/producer.h>
 #include "ui/rp_widget.h"
-#include "ui/wrap/vertical_layout.h"
 
 namespace Window {
 class Controller;
 } // namespace Window
 
+namespace Ui {
+class VerticalLayout;
+template <typename Widget>
+class SlideWrap;
+} // namespace Ui
+
 namespace Info {
 namespace Profile {
 
@@ -66,6 +71,9 @@ private:
 	void setupMainUserButtons(
 		Ui::VerticalLayout *wrap,
 		not_null<UserData*> user) const;
+	object_ptr<RpWidget> createSkipWidget(RpWidget *parent) const;
+	object_ptr<Ui::SlideWrap<RpWidget>> createSlideSkipWidget(
+		RpWidget *parent) const;
 
 	not_null<Window::Controller*> _controller;
 	not_null<PeerData*> _peer;

Telegram/SourceFiles/info/info_profile_lines.cpp

@@ -293,6 +293,7 @@ LabeledLine::LabeledLine(
 		textSt));
 	labeled->setSelectable(true);
 	labeled->setDoubleClickSelectsParagraph(doubleClickSelects);
+	layout->add(Ui::CreateSkipWidget(this, st::infoLabelSkip));
 	layout->add(object_ptr<Ui::FlatLabel>(
 		this,
 		std::move(label),
@@ -522,7 +523,7 @@ void Button::paintEvent(QPaintEvent *e) {
 QRect Button::toggleRect() const {
 	Expects(_toggle != nullptr);
 	auto size = _toggle->getSize();
-	auto left = width() - _st.padding.right() - size.width();
+	auto left = width() - _st.toggleSkip - size.width();
 	auto top = (height() - size.height()) / 2;
 	return { QPoint(left, top), size };
 }
@@ -552,8 +553,7 @@ void Button::updateVisibleText(int newWidth) {
 		- _st.padding.left()
 		- _st.padding.right();
 	if (_toggle) {
-		availableWidth -= _toggle->getSize().width()
-			+ _st.padding.right();
+		availableWidth -= (width() - toggleRect().x());
 	}
 	accumulate_max(availableWidth, 0);
 	if (availableWidth < _originalWidth) {
@@ -566,5 +566,18 @@ void Button::updateVisibleText(int newWidth) {
 	update();
 }
 
+rpl::producer<bool> MultiLineTracker::atLeastOneShownValue() const {
+	auto shown = std::vector<rpl::producer<bool>>();
+	shown.reserve(_widgets.size());
+	for (auto &widget : _widgets) {
+		shown.push_back(widget->shownValue());
+	}
+	return rpl::combine(
+		std::move(shown),
+		[](const std::vector<bool> &values) {
+			return base::find(values, true) != values.end();
+		});
+}
+
 } // namespace Profile
 } // namespace Info

Telegram/SourceFiles/info/info_profile_lines.h

@@ -208,5 +208,19 @@ private:
 
 };
 
+class MultiLineTracker {
+public:
+	template <typename Widget>
+	void track(const Ui::SlideWrap<Widget> *wrap) {
+		_widgets.push_back(wrap);
+	}
+
+	rpl::producer<bool> atLeastOneShownValue() const;
+
+private:
+	std::vector<const Ui::SlideWrap<Ui::RpWidget>*> _widgets;
+
+};
+
 } // namespace Profile
 } // namespace Info

Telegram/SourceFiles/ui/widgets/widgets.style

@@ -509,6 +509,7 @@ InfoProfileButton {
 
 	toggle: Toggle;
 	toggleOver: Toggle;
+	toggleSkip: pixels;
 
 	ripple: RippleAnimation;
 }

Telegram/SourceFiles/ui/wrap/padding_wrap.h

@@ -72,4 +72,12 @@ public:
 
 };
 
+inline object_ptr<PaddingWrap<>> CreateSkipWidget(
+		QWidget *parent,
+		int skip) {
+	return object_ptr<PaddingWrap<>>(
+		parent,
+		QMargins(0, 0, 0, skip));
+}
+
 } // namespace Ui

Telegram/SourceFiles/ui/wrap/slide_wrap.cpp

@@ -50,12 +50,30 @@ SlideWrap<RpWidget>::SlideWrap(
 : SlideWrap(parent, std::move(child), style::margins(), duration) {
 }
 
+SlideWrap<RpWidget>::SlideWrap(
+	QWidget *parent,
+	const style::margins &padding)
+: SlideWrap(parent, nullptr, padding, st::slideWrapDuration) {
+}
+
+SlideWrap<RpWidget>::SlideWrap(
+	QWidget *parent,
+	const style::margins &padding,
+	int duration)
+: SlideWrap(parent, nullptr, padding, duration) {
+}
+
 SlideWrap<RpWidget>::SlideWrap(
 	QWidget *parent,
 	object_ptr<RpWidget> child,
 	const style::margins &padding,
 	int duration)
-: Parent(parent, object_ptr<PaddingWrap<RpWidget>>(parent, std::move(child), padding))
+: Parent(
+	parent,
+	object_ptr<PaddingWrap<RpWidget>>(
+		parent,
+		std::move(child),
+		padding))
 , _duration(duration) {
 }
 

Telegram/SourceFiles/ui/wrap/slide_wrap.h

@@ -41,6 +41,13 @@ public:
 		QWidget *parent,
 		object_ptr<RpWidget> child,
 		int duration);
+	SlideWrap(
+		QWidget *parent,
+		const style::margins &padding);
+	SlideWrap(
+		QWidget *parent,
+		const style::margins &padding,
+		int duration);
 	SlideWrap(
 		QWidget *parent,
 		object_ptr<RpWidget> child,
@@ -114,6 +121,17 @@ public:
 		int duration)
 	: Parent(parent, std::move(child), duration) {
 	}
+	SlideWrap(
+		QWidget *parent,
+		const style::margins &padding)
+	: Parent(parent, padding) {
+	}
+	SlideWrap(
+		QWidget *parent,
+		const style::margins &padding,
+		int duration)
+	: Parent(parent, nullptr, padding, duration) {
+	}
 	SlideWrap(
 		QWidget *parent,
 		object_ptr<Widget> child,
@@ -124,5 +142,13 @@ public:
 
 };
 
+inline object_ptr<SlideWrap<>> CreateSlideSkipWidget(
+		QWidget *parent,
+		int skip) {
+	return object_ptr<SlideWrap<>>(
+		parent,
+		QMargins(0, 0, 0, skip));
+}
+
 } // namespace Ui