From 8e28a229f2a2f6d5332fe0fab8f3294e67c8d865 Mon Sep 17 00:00:00 2001 From: John Preston Date: Sat, 22 Dec 2018 14:23:22 +0400 Subject: [PATCH] Improve polls design. --- Telegram/Resources/langs/lang.strings | 2 + Telegram/SourceFiles/history/history.style | 38 +++++---- .../history/media/history_media_poll.cpp | 77 +++++++++++-------- .../history/media/history_media_poll.h | 1 + 4 files changed, 71 insertions(+), 47 deletions(-) diff --git a/Telegram/Resources/langs/lang.strings b/Telegram/Resources/langs/lang.strings index efa1d4ede..99c06f7db 100644 --- a/Telegram/Resources/langs/lang.strings +++ b/Telegram/Resources/langs/lang.strings @@ -1831,8 +1831,10 @@ https://github.com/telegramdesktop/tdesktop/blob/master/LEGAL "lng_launch_exe_dont_ask" = "Don't ask me again"; "lng_polls_anonymous" = "Anonymous Poll"; +"lng_polls_closed" = "Final results"; "lng_polls_votes_count#one" = "{count} vote"; "lng_polls_votes_count#other" = "{count} votes"; +"lng_polls_votes_none" = "No votes"; "lng_polls_retract" = "Retract vote"; "lng_polls_stop" = "Stop poll"; "lng_polls_stop_warning" = "If you stop this poll now, nobody will be able to vote in it anymore. This action cannot be undone."; diff --git a/Telegram/SourceFiles/history/history.style b/Telegram/SourceFiles/history/history.style index 0776ca0d8..77b844201 100644 --- a/Telegram/SourceFiles/history/history.style +++ b/Telegram/SourceFiles/history/history.style @@ -492,28 +492,38 @@ webPageDescriptionStyle: defaultTextStyle; webPagePhotoSize: 100px; webPagePhotoDelta: 8px; -historyPollQuestionFont: font(boxFontSize semibold); +historyPollQuestionFont: semiboldFont; historyPollQuestionStyle: TextStyle(defaultTextStyle) { font: historyPollQuestionFont; linkFont: historyPollQuestionFont; linkFontOver: historyPollQuestionFont; } -historyPollAnswerStyle: TextStyle(defaultTextStyle) { - font: boxTextFont; - linkFont: boxTextFont; - linkFontOver: boxTextFont; -} +historyPollAnswerStyle: defaultTextStyle; historyPollQuestionTop: 7px; -historyPollSubtitleSkip: 5px; -historyPollAnswerPadding: margins(30px, 16px, 0px, 16px); -historyPollAnswersSkip: 5px; +historyPollSubtitleSkip: 2px; +historyPollAnswerPadding: margins(31px, 10px, 0px, 10px); +historyPollAnswersSkip: 3px; historyPollPercentFont: semiboldFont; -historyPollPercentSkip: 5px; -historyPollPercentTop: 3px; +historyPollPercentSkip: 6px; +historyPollPercentTop: 0px; +historyPollTotalVotesSkip: 5px; historyPollFillingMin: 8px; -historyPollFillingHeight: 6px; -historyPollFillingRadius: 2px; -historyPollFillingBottom: 10px; +historyPollFillingHeight: 4px; +historyPollFillingRadius: 1px; +historyPollFillingBottom: 2px; +historyPollFillingRight: 4px; +historyPollRadio: Radio(defaultRadio) { + bg: transparent; + untoggledFg: checkboxFg; + toggledFg: windowBgActive; + diameter: 18px; + thickness: 2px; + skip: 65px; // * 0.1 + duration: 120; + rippleAreaPadding: 8px; +} +historyPollRadioOpacity: 0.7; +historyPollRadioOpacityOver: 1.; boxAttachEmoji: IconButton(historyAttachEmoji) { width: 30px; diff --git a/Telegram/SourceFiles/history/media/history_media_poll.cpp b/Telegram/SourceFiles/history/media/history_media_poll.cpp index c0739eb7a..71cb8cb39 100644 --- a/Telegram/SourceFiles/history/media/history_media_poll.cpp +++ b/Telegram/SourceFiles/history/media/history_media_poll.cpp @@ -93,10 +93,8 @@ QSize HistoryPoll::countOptimalSize() { _answers ) | ranges::view::transform([](const Answer &answer) { return st::historyPollAnswerPadding.top() - + 2 * st::defaultCheckbox.textPosition.y() + answer.text.minHeight() - + st::historyPollAnswerPadding.bottom() - + st::lineWidth; + + st::historyPollAnswerPadding.bottom(); }), 0); auto minHeight = st::historyPollQuestionTop @@ -121,10 +119,8 @@ int HistoryPoll::countAnswerHeight( - st::historyPollAnswerPadding.left() - st::historyPollAnswerPadding.right(); return st::historyPollAnswerPadding.top() - + 2 * st::defaultCheckbox.textPosition.y() + answer.text.countHeight(answerWidth) - + st::historyPollAnswerPadding.bottom() - + st::lineWidth; + + st::historyPollAnswerPadding.bottom(); } QSize HistoryPoll::countCurrentSize(int newWidth) { @@ -147,7 +143,7 @@ QSize HistoryPoll::countCurrentSize(int newWidth) { + st::msgDateFont->height + st::historyPollAnswersSkip + answersHeight - + st::msgPadding.bottom() + + st::historyPollTotalVotesSkip + st::msgDateFont->height + st::msgPadding.bottom(); if (!isBubbleTop()) { @@ -161,14 +157,35 @@ void HistoryPoll::updateTexts() { return; } _pollVersion = _poll->version; + _closed = _poll->closed; + _question.setText( st::historyPollQuestionStyle, _poll->question, Ui::WebpageTextTitleOptions()); _subtitle.setText( st::msgDateTextStyle, - lang(lng_polls_anonymous)); + lang(_closed ? lng_polls_closed : lng_polls_anonymous)); + updateAnswers(); +} + +void HistoryPoll::updateAnswers() { + const auto pairFromAnswer = [](const Answer &a) { + return std::make_pair(a.text.originalText(), a.option); + }; + const auto pairFromPollAnswer = [](const PollAnswer &p) { + return std::make_pair(p.text, p.option); + }; + const auto changed = !ranges::equal( + _answers, + _poll->answers, + ranges::equal_to(), + pairFromAnswer, + pairFromPollAnswer); + if (!changed) { + return; + } _answers = ranges::view::all( _poll->answers ) | ranges::view::transform([](const PollAnswer &answer) { @@ -184,8 +201,6 @@ void HistoryPoll::updateTexts() { for (auto &answer : _answers) { answer.handler = createAnswerClickHandler(answer); } - - _closed = _poll->closed; } ClickHandlerPtr HistoryPoll::createAnswerClickHandler( @@ -208,15 +223,17 @@ void HistoryPoll::updateTotalVotes() const { return; } _totalVotes = _poll->totalVoters; - if (!_totalVotes) { - _totalVotesLabel.clear(); - return; - } - const auto formatted = FormatLargeNumber(_totalVotes); - auto string = lng_polls_votes_count(lt_count, formatted.rounded); - if (formatted.shortened) { - string.replace(QString::number(formatted.rounded), formatted.text); - } + const auto string = [&] { + if (!_totalVotes) { + return lang(lng_polls_votes_none); + } + const auto format = FormatLargeNumber(_totalVotes); + auto text = lng_polls_votes_count(lt_count, format.rounded); + if (format.shortened) { + text.replace(QString::number(format.rounded), format.text); + } + return text; + }(); _totalVotesLabel.setText(st::msgDateTextStyle, string); } @@ -333,36 +350,30 @@ int HistoryPoll::paintAnswer( p.drawTextLeft(left, top + st::historyPollPercentTop, outerWidth, answer.votesPercent, answer.votesPercentWidth); } else { PainterHighQualityEnabler hq(p); - const auto &st = st::defaultRadio; + const auto &st = st::historyPollRadio; + const auto over = ClickHandler::showAsActive(answer.handler); auto pen = regular->p; pen.setWidth(st.thickness); p.setPen(pen); p.setBrush(Qt::NoBrush); + p.setOpacity(over ? st::historyPollRadioOpacityOver : st::historyPollRadioOpacity); p.drawEllipse(QRectF(left, top, st.diameter, st.diameter).marginsRemoved(QMarginsF(st.thickness / 2., st.thickness / 2., st.thickness / 2., st.thickness / 2.))); + p.setOpacity(1.); } - top += st::defaultCheckbox.textPosition.y(); p.setPen(outbg ? st::webPageDescriptionOutFg : st::webPageDescriptionInFg); answer.text.drawLeft(p, aleft, top, awidth, outerWidth); if (_voted || _closed) { - auto &semibold = selected ? (outbg ? st::msgOutServiceFgSelected : st::msgInServiceFgSelected) : (outbg ? st::msgOutServiceFg : st::msgInServiceFg); + const auto bar = outbg ? (selected ? st::msgWaveformOutActiveSelected : st::msgWaveformOutActive) : (selected ? st::msgWaveformInActiveSelected : st::msgWaveformInActive); PainterHighQualityEnabler hq(p); p.setPen(Qt::NoPen); - p.setBrush(semibold); - const auto size = anim::interpolate(st::historyPollFillingMin, awidth, answer.filling); + p.setBrush(bar); + const auto max = awidth - st::historyPollFillingRight; + const auto size = anim::interpolate(st::historyPollFillingMin, max, answer.filling); const auto radius = st::historyPollFillingRadius; const auto top = bottom - st::historyPollFillingBottom - st::historyPollFillingHeight; p.drawRoundedRect(aleft, top, size, st::historyPollFillingHeight, radius, radius); - } else { - p.setOpacity(0.5); - p.fillRect( - aleft, - bottom - st::lineWidth, - outerWidth - aleft, - st::lineWidth, - regular); - p.setOpacity(1.); } return result; } diff --git a/Telegram/SourceFiles/history/media/history_media_poll.h b/Telegram/SourceFiles/history/media/history_media_poll.h index 19a18b1a6..718fc4fd4 100644 --- a/Telegram/SourceFiles/history/media/history_media_poll.h +++ b/Telegram/SourceFiles/history/media/history_media_poll.h @@ -56,6 +56,7 @@ private: [[nodiscard]] ClickHandlerPtr createAnswerClickHandler( const Answer &answer) const; void updateTexts(); + void updateAnswers(); void updateVotes() const; void updateTotalVotes() const; void updateAnswerVotes() const;