From cb1c1cf3a327a5671912f32755ff9ac08b23f4a3 Mon Sep 17 00:00:00 2001 From: RadRussianRus Date: Sun, 11 Sep 2022 06:11:01 +0300 Subject: [PATCH] [Visual] Custom theming (currently for top bar only) --- .../view/history_view_top_bar_widget.cpp | 44 ++++++------ Telegram/SourceFiles/info/info.style | 72 +++++++++++++++++++ .../window/themes/window_theme_preview.cpp | 12 ++-- 3 files changed, 100 insertions(+), 28 deletions(-) diff --git a/Telegram/SourceFiles/history/view/history_view_top_bar_widget.cpp b/Telegram/SourceFiles/history/view/history_view_top_bar_widget.cpp index 96ae99abf..3f4cb3869 100644 --- a/Telegram/SourceFiles/history/view/history_view_top_bar_widget.cpp +++ b/Telegram/SourceFiles/history/view/history_view_top_bar_widget.cpp @@ -111,17 +111,17 @@ TopBarWidget::TopBarWidget( : RpWidget(parent) , _controller(controller) , _primaryWindow(controller->isPrimary()) -, _clear(this, tr::lng_selected_clear(), st::topBarClearButton) -, _forward(this, tr::lng_selected_forward(), st::defaultActiveButton) -, _sendNow(this, tr::lng_selected_send_now(), st::defaultActiveButton) -, _delete(this, tr::lng_selected_delete(), st::defaultActiveButton) -, _back(this, st::historyTopBarBack) +, _clear(this, tr::lng_selected_clear(), st::ktgTopBarClearButton) +, _forward(this, tr::lng_selected_forward(), st::ktgTopBarActiveButton) +, _sendNow(this, tr::lng_selected_send_now(), st::ktgTopBarActiveButton) +, _delete(this, tr::lng_selected_delete(), st::ktgTopBarActiveButton) +, _back(this, st::ktgHistoryTopBarBack) , _cancelChoose(this, st::topBarCloseChoose) -, _call(this, st::topBarCall) +, _call(this, st::ktgTopBarCall) , _groupCall(this, st::topBarGroupCall) -, _search(this, st::topBarSearch) -, _infoToggle(this, st::topBarInfo) -, _menuToggle(this, st::topBarMenuToggle) +, _search(this, st::ktgTopBarSearch) +, _infoToggle(this, st::ktgTopBarInfo) +, _menuToggle(this, st::ktgTopBarMenuToggle) , _titlePeerText(st::windowMinWidth / 3) , _onlineUpdater([=] { updateOnlineDisplay(); }) { setAttribute(Qt::WA_OpaquePaintEvent); @@ -446,7 +446,7 @@ void TopBarWidget::paintEvent(QPaintEvent *e) { : -st::topBarHeight; const auto slidingTop = std::max(selectedButtonsTop, searchFieldTop); - p.fillRect(QRect(0, 0, width(), st::topBarHeight), st::topBarBg); + p.fillRect(QRect(0, 0, width(), st::topBarHeight), st::ktgTopBarBg); if (slidingTop < 0) { p.translate(0, slidingTop + st::topBarHeight); paintTopBar(p); @@ -542,7 +542,7 @@ void TopBarWidget::paintTopBar(Painter &p) { if (availableWidth < textWidth) { text = st::historySavedFont->elided(text, availableWidth); } - p.setPen(st::dialogsNameFg); + p.setPen(st::ktgTopBarNameFg); p.setFont(st::historySavedFont); p.drawTextLeft( nameleft, @@ -552,7 +552,7 @@ void TopBarWidget::paintTopBar(Painter &p) { } else if (_activeChat.section == Section::Replies || _activeChat.section == Section::Scheduled || _activeChat.section == Section::Pinned) { - p.setPen(st::dialogsNameFg); + p.setPen(st::ktgTopBarNameFg); Ui::Text::String textStr; textStr.setText( @@ -561,7 +561,7 @@ void TopBarWidget::paintTopBar(Painter &p) { ? tr::lng_manage_discussion_group(tr::now) : history->peer->isSelf() ? tr::lng_saved_messages(tr::now) - : history->peer->topBarNameText().toString()), + : history->peer->topBarNameText()), Ui::NameTextOptions()); textStr.drawElided(p, nameleft, nametop, width()); @@ -574,7 +574,7 @@ void TopBarWidget::paintTopBar(Painter &p) { statustop, availableWidth, width(), - st::historyStatusFgTyping, + st::ktgTopBarStatusFgActive, now))) { paintStatus(p, nameleft, statustop, availableWidth, width()); } @@ -608,7 +608,7 @@ void TopBarWidget::paintTopBar(Painter &p) { }); const auto namewidth = availableWidth - badgeWidth; - p.setPen(st::dialogsNameFg); + p.setPen(st::ktgTopBarNameFg); _title.drawElided( p, nameleft, @@ -623,7 +623,7 @@ void TopBarWidget::paintTopBar(Painter &p) { statustop, availableWidth, width(), - st::historyStatusFgTyping, + st::ktgTopBarStatusFgActive, now)) { paintStatus(p, nameleft, statustop, availableWidth, width()); } @@ -680,7 +680,7 @@ bool TopBarWidget::paintConnectingState( left += st::topBarConnectingPosition.x() + st::topBarConnectingAnimation.size.width() + st::topBarConnectingSkip; - p.setPen(st::historyStatusFg); + p.setPen(st::ktgTopBarStatusFg); p.drawTextLeft(left, top, outerWidth, tr::lng_status_connecting(tr::now)); return true; } @@ -694,12 +694,12 @@ void TopBarWidget::paintStatus( using Section = Dialogs::EntryState::Section; const auto section = _activeChat.section; if (section == Section::Replies || section == Section::SavedSublist) { - p.setPen(st::historyStatusFg); + p.setPen(st::ktgTopBarStatusFg); p.drawTextLeft(left, top, outerWidth, _customTitleText); } else { p.setPen(_titlePeerTextOnline - ? st::historyStatusFgActive - : st::historyStatusFg); + ? st::ktgTopBarStatusFgActive + : st::ktgTopBarStatusFg); _titlePeerText.drawLeftElided( p, left, @@ -1531,10 +1531,10 @@ void TopBarWidget::updateInfoToggleActive() { && (Core::App().settings().thirdSectionInfoEnabled() || Core::App().settings().tabbedReplacedWithInfo()); auto iconOverride = infoThirdActive - ? &st::topBarInfoActive + ? &st::ktgTopBarInfoActive : nullptr; auto rippleOverride = infoThirdActive - ? &st::lightButtonBgOver + ? &st::ktgTopBarIconBgActiveRipple : nullptr; _infoToggle->setIconOverride(iconOverride, iconOverride); _infoToggle->setRippleColorOverride(rippleOverride); diff --git a/Telegram/SourceFiles/info/info.style b/Telegram/SourceFiles/info/info.style index 70391b249..a028794fb 100644 --- a/Telegram/SourceFiles/info/info.style +++ b/Telegram/SourceFiles/info/info.style @@ -1025,3 +1025,75 @@ similarChannelsLockAbout: FlatLabel(defaultFlatLabel) { minWidth: 128px; } similarChannelsLockAboutPadding: margins(12px, 12px, 12px, 12px); +ktgHistoryTopBarBack: IconButton(historyTopBarBack) { + icon: icon {{ "info/info_back", ktgTopBarBackIconFg }}; + iconOver: icon {{ "info/info_back", ktgTopBarBackIconFgOver }}; + + ripple: RippleAnimation(defaultRippleAnimation) { + color: ktgTopBarBackIconBgRipple; + } +} + +ktgTopBarCall: IconButton(topBarCall) { + icon: icon {{ "top_bar_call", ktgTopBarIconFg }}; + iconOver: icon {{ "top_bar_call", ktgTopBarIconFgOver }}; + + ripple: RippleAnimation(defaultRippleAnimation) { + color: ktgTopBarIconBgRipple; + } +} + +ktgTopBarSearch: IconButton(topBarSearch) { + icon: icon {{ "top_bar_search", ktgTopBarIconFg }}; + iconOver: icon {{ "top_bar_search", ktgTopBarIconFgOver }}; + + ripple: RippleAnimation(defaultRippleAnimation) { + color: ktgTopBarIconBgRipple; + } +} + +ktgTopBarInfo: IconButton(topBarInfo) { + icon: icon {{ "top_bar_profile", ktgTopBarIconFg }}; + iconOver: icon {{ "top_bar_profile", ktgTopBarIconFgOver }}; + + ripple: RippleAnimation(defaultRippleAnimation) { + color: ktgTopBarIconBgRipple; + } +} + +ktgTopBarInfoActive: icon {{ "top_bar_profile", ktgTopBarIconFgActive }}; + +ktgTopBarMenuToggle: IconButton(topBarMenuToggle) { + icon: icon {{ "title_menu_dots", ktgTopBarIconFg }}; + iconOver: icon {{ "title_menu_dots", ktgTopBarIconFgOver }}; + + ripple: RippleAnimation(defaultRippleAnimation) { + color: ktgTopBarIconBgRipple; + } +} + +ktgTopBarActiveButton: RoundButton(defaultActiveButton) { + textFg: ktgTopBarActiveButtonFg; + textFgOver: ktgTopBarActiveButtonFgOver; + numbersTextFg: ktgTopBarActiveButtonSecondaryFg; + numbersTextFgOver: ktgTopBarActiveButtonSecondaryFgOver; + textBg: ktgTopBarActiveButtonBg; + textBgOver: ktgTopBarActiveButtonBgOver; + + ripple: RippleAnimation(defaultRippleAnimation) { + color: ktgTopBarActiveButtonBgRipple; + } +} + +ktgTopBarClearButton: RoundButton(topBarClearButton) { + textFg: ktgTopBarClearButtonFg; + textFgOver: ktgTopBarClearButtonFgOver; + numbersTextFg: ktgTopBarClearButtonFg; + numbersTextFgOver: ktgTopBarClearButtonFgOver; + textBg: ktgTopBarClearButtonBg; + textBgOver: ktgTopBarClearButtonBgOver; + + ripple: RippleAnimation(defaultRippleAnimation) { + color: ktgTopBarClearButtonBgRipple; + } +} diff --git a/Telegram/SourceFiles/window/themes/window_theme_preview.cpp b/Telegram/SourceFiles/window/themes/window_theme_preview.cpp index bc61685b5..ad083c7e6 100644 --- a/Telegram/SourceFiles/window/themes/window_theme_preview.cpp +++ b/Telegram/SourceFiles/window/themes/window_theme_preview.cpp @@ -537,14 +537,14 @@ void Generator::paintHistoryBackground() { } void Generator::paintTopBar() { - _p->fillRect(_topBar, st::topBarBg[_palette]); + _p->fillRect(_topBar, st::ktgTopBarBg[_palette]); auto right = st::topBarMenuToggle.width; - st::topBarMenuToggle.icon[_palette].paint(*_p, _topBar.x() + _topBar.width() - right + st::topBarMenuToggle.iconPosition.x(), _topBar.y() + st::topBarMenuToggle.iconPosition.y(), _rect.width()); + st::ktgTopBarMenuToggle.icon[_palette].paint(*_p, _topBar.x() + _topBar.width() - right + st::topBarMenuToggle.iconPosition.x(), _topBar.y() + st::topBarMenuToggle.iconPosition.y(), _rect.width()); right += st::topBarSkip + st::topBarCall.width; - st::topBarCall.icon[_palette].paint(*_p, _topBar.x() + _topBar.width() - right + st::topBarCall.iconPosition.x(), _topBar.y() + st::topBarCall.iconPosition.y(), _rect.width()); + st::ktgTopBarCall.icon[_palette].paint(*_p, _topBar.x() + _topBar.width() - right + st::topBarCall.iconPosition.x(), _topBar.y() + st::topBarCall.iconPosition.y(), _rect.width()); right += st::topBarSearch.width; - st::topBarSearch.icon[_palette].paint(*_p, _topBar.x() + _topBar.width() - right + st::topBarSearch.iconPosition.x(), _topBar.y() + st::topBarSearch.iconPosition.y(), _rect.width()); + st::ktgTopBarSearch.icon[_palette].paint(*_p, _topBar.x() + _topBar.width() - right + st::topBarSearch.iconPosition.x(), _topBar.y() + st::topBarSearch.iconPosition.y(), _rect.width()); auto decreaseWidth = st::topBarCall.width + st::topBarCallSkip + st::topBarSearch.width + st::topBarMenuToggle.width; auto nameleft = _topBar.x() + st::topBarArrowPadding.right(); @@ -552,10 +552,10 @@ void Generator::paintTopBar() { auto statustop = _topBar.y() + st::topBarHeight - st::topBarArrowPadding.bottom() - st::dialogsTextFont->height; auto namewidth = _topBar.x() + _topBar.width() - decreaseWidth - nameleft - st::topBarArrowPadding.right(); _p->setFont(st::dialogsTextFont); - _p->setPen(_topBarStatusActive ? st::historyStatusFgActive[_palette] : st::historyStatusFg[_palette]); + _p->setPen(_topBarStatusActive ? st::ktgTopBarStatusFgActive[_palette] : st::ktgTopBarStatusFg[_palette]); _p->drawText(nameleft, statustop + st::dialogsTextFont->ascent, _topBarStatus); - _p->setPen(st::dialogsNameFg[_palette]); + _p->setPen(st::ktgTopBarNameFg[_palette]); _topBarName.drawElided(*_p, nameleft, nametop, namewidth); }