From c5d7889ac941b8333348179429824380ea8e569b Mon Sep 17 00:00:00 2001 From: John Preston Date: Fri, 11 Feb 2022 12:09:20 +0300 Subject: [PATCH] Adjust username change box to the mockup. --- Telegram/Resources/langs/lang.strings | 2 +- Telegram/SourceFiles/boxes/boxes.style | 8 ++- Telegram/SourceFiles/boxes/username_box.cpp | 68 ++++++++++----------- Telegram/SourceFiles/boxes/username_box.h | 4 +- 4 files changed, 42 insertions(+), 40 deletions(-) diff --git a/Telegram/Resources/langs/lang.strings b/Telegram/Resources/langs/lang.strings index ba5d9f1ae..1c938fa35 100644 --- a/Telegram/Resources/langs/lang.strings +++ b/Telegram/Resources/langs/lang.strings @@ -296,7 +296,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL "lng_settings_drop_area_subtitle" = "to set it as your photo"; "lng_username_title" = "Username"; -"lng_username_about" = "You can choose a username on Telegram.\nIf you do, other people will be able to find\nyou by this username and contact you\nwithout knowing your phone number.\n\nYou can use a-z, 0-9 and underscores.\nMinimum length is 5 characters."; +"lng_username_description" = "You can choose a username on Telegram. If you do, other people will be able to find you by this username and contact you without knowing your phone number.\n\nYou can use **a-z**, **0-9** and **underscores**.\nMinimum length is **5 characters**."; "lng_username_choose" = "Choose your username."; "lng_username_invalid" = "This username is invalid."; "lng_username_occupied" = "This username is already occupied."; diff --git a/Telegram/SourceFiles/boxes/boxes.style b/Telegram/SourceFiles/boxes/boxes.style index a3ad67357..06ba871b0 100644 --- a/Telegram/SourceFiles/boxes/boxes.style +++ b/Telegram/SourceFiles/boxes/boxes.style @@ -508,10 +508,12 @@ passcodeTextStyle: TextStyle(defaultTextStyle) { lineHeight: 20px; } -usernamePadding: margins(22px, 6px, 21px, 12px); -usernameSkip: 49px; -usernameTextStyle: TextStyle(boxTextStyle, passcodeTextStyle) { +defaultBoxLabel: FlatLabel(defaultFlatLabel) { + minWidth: 272px; } +usernamePadding: margins(24px, 2px, 24px, 10px); +usernameSkip: 44px; +usernameTextStyle: defaultTextStyle; usernameDefaultFg: windowSubTextFg; editMediaLabelMargins: margins(0px, 11px, 0px, 0px); diff --git a/Telegram/SourceFiles/boxes/username_box.cpp b/Telegram/SourceFiles/boxes/username_box.cpp index 96bd3d477..631291523 100644 --- a/Telegram/SourceFiles/boxes/username_box.cpp +++ b/Telegram/SourceFiles/boxes/username_box.cpp @@ -10,8 +10,10 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL #include "boxes/peers/edit_peer_common.h" #include "lang/lang_keys.h" #include "ui/widgets/buttons.h" +#include "ui/widgets/labels.h" #include "ui/special_fields.h" #include "ui/toast/toast.h" +#include "ui/text/text_utilities.h" #include "main/main_session.h" #include "data/data_session.h" #include "data/data_user.h" @@ -23,10 +25,9 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL UsernameBox::UsernameBox(QWidget*, not_null session) : _session(session) -, _textStyle(st::usernameTextStyle) -, _font(st::boxTextFont) +, _font(st::normalFont) , _padding(st::usernamePadding) -, _textCenterTop((_textStyle.lineHeight - _font->height) / 2) +, _textCenterTop((_font->height - _font->height) / 2) , _api(&_session->mtp()) , _username( this, @@ -34,8 +35,11 @@ UsernameBox::UsernameBox(QWidget*, not_null session) rpl::single(qsl("@username")), session->user()->username, QString()) -, _link(this, QString(), st::boxLinkButton) -, _about(st::boxWidth - _padding.left()) +, _about( + this, + tr::lng_username_description(Ui::Text::RichLangValue), + st::defaultBoxLabel) +, _link(this, QString(), st::defaultLinkButton) , _checkTimer([=] { check(); }) { } @@ -53,15 +57,19 @@ void UsernameBox::prepare() { connect(_username, &Ui::MaskedInputField::submitted, [=] { save(); }); _link->addClickHandler([=] { linkClick(); }); - _about.setText(_textStyle, tr::lng_username_about(tr::now)); - setDimensions( - st::boxWidth, - _padding.top() - + _username->height() - + st::usernameSkip - + _about.countHeight(st::boxWidth - _padding.left()) - + 3 * _textStyle.lineHeight - + _padding.bottom()); + _about->resizeToWidth( + st::boxWideWidth - _padding.left() - _padding.right()); + _about->heightValue( + ) | rpl::start_with_next([=](int height) { + setDimensions( + st::boxWideWidth, + (_padding.top() + + _username->height() + + st::usernameSkip + + height + + 3 * _font->height + + _padding.bottom())); + }, lifetime()); updateLinkText(); } @@ -103,20 +111,12 @@ void UsernameBox::paintEvent(QPaintEvent *e) { tr::lng_username_choose(tr::now)); } p.setPen(st::boxTextFg); - const auto availW = st::boxWidth - _padding.left(); - const auto h = _about.countHeight(availW); - _about.drawLeft( - p, - _padding.left(), - _username->y() + _username->height() + st::usernameSkip, - availW, - width()); const auto linkTop = _username->y() + _username->height() + st::usernameSkip - + h - + _textStyle.lineHeight + + _about->height() + + _font->height + _textCenterTop; if (_link->isHidden()) { p.drawTextLeft( @@ -129,7 +129,7 @@ void UsernameBox::paintEvent(QPaintEvent *e) { p.drawTextLeft( _padding.left(), linkTop - + _textStyle.lineHeight + + _font->height + _textCenterTop, width(), link); @@ -150,17 +150,17 @@ void UsernameBox::resizeEvent(QResizeEvent *e) { _username->height()); _username->moveToLeft(_padding.left(), _padding.top()); - const auto availW = st::boxWidth - _padding.left(); - const auto h = _about.countHeight(availW); - const auto linkTop = _username->y() - + _username->height() - + st::usernameSkip - + h - + _textStyle.lineHeight + _about->moveToLeft( + _padding.left(), + _username->y() + _username->height() + st::usernameSkip); + + const auto linkTop = _about->y() + + _about->height() + + _font->height + _textCenterTop; _link->moveToLeft( _padding.left(), - linkTop + _textStyle.lineHeight + _textCenterTop); + linkTop + _font->height + _textCenterTop); } void UsernameBox::save() { @@ -305,7 +305,7 @@ void UsernameBox::updateLinkText() { const auto uname = getName(); _link->setText(_font->elided( _session->createInternalLinkFull(uname), - st::boxWidth - _padding.left() - _padding.right())); + st::boxWideWidth - _padding.left() - _padding.right())); if (uname.isEmpty()) { if (!_link->isHidden()) { _link->hide(); diff --git a/Telegram/SourceFiles/boxes/username_box.h b/Telegram/SourceFiles/boxes/username_box.h index 4289a6a9a..922c12c02 100644 --- a/Telegram/SourceFiles/boxes/username_box.h +++ b/Telegram/SourceFiles/boxes/username_box.h @@ -14,6 +14,7 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL namespace Ui { class UsernameInput; class LinkButton; +class FlatLabel; } // namespace Ui namespace Main { @@ -47,20 +48,19 @@ private: void updateLinkText(); const not_null _session; - const style::TextStyle &_textStyle; const style::font &_font; const style::margins &_padding; const int _textCenterTop; MTP::Sender _api; object_ptr _username; + object_ptr _about; object_ptr _link; mtpRequestId _saveRequestId = 0; mtpRequestId _checkRequestId = 0; QString _sentUsername, _checkUsername, _errorText, _goodText; - Ui::Text::String _about; base::Timer _checkTimer; };