From c4897cec0a18d30771fd7aed5f78ce7c830bd9d9 Mon Sep 17 00:00:00 2001 From: 23rd <23rd@vivaldi.net> Date: Mon, 2 Nov 2020 19:32:38 +0300 Subject: [PATCH] Replaced dummy lock icons with lock animation. --- .../history_view_voice_record_bar.cpp | 69 ++++++++++++++++--- Telegram/SourceFiles/ui/chat/chat.style | 11 ++- 2 files changed, 68 insertions(+), 12 deletions(-) diff --git a/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp b/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp index 1a85e370b1..d5cad9a26c 100644 --- a/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp +++ b/Telegram/SourceFiles/history/view/controls/history_view_voice_record_bar.cpp @@ -37,6 +37,8 @@ constexpr auto kMaxSamples = constexpr auto kPrecision = 10; +constexpr auto kLockArcAngle = 15.; + enum class FilterType { Continue, ShowBox, @@ -76,13 +78,22 @@ private: void setProgress(float64 progress); void startLockingAnimation(float64 to); + const QPen _arcPen; + Ui::Animations::Simple _lockAnimation; Ui::Animations::Simple _lockEnderAnimation; rpl::variable _progress = 0.; }; -RecordLock::RecordLock(not_null parent) : RpWidget(parent) { +RecordLock::RecordLock(not_null parent) +: RpWidget(parent) +, _arcPen( + st::historyRecordLockIconFg, + st::historyRecordLockIconLineWidth, + Qt::SolidLine, + Qt::SquareCap, + Qt::RoundJoin) { resize( st::historyRecordLockTopShadow.width(), st::historyRecordLockSize.height()); @@ -189,14 +200,54 @@ void RecordLock::drawProgress(Painter &p) { p.setOpacity(1.); } { - const auto &icon = isLocked() - ? st::historyRecordLockIcon - : st::historyRecordUnlockIcon; - icon.paint( - p, - inner.x() + (inner.width() - icon.width()) / 2, - inner.y() + (originTop.height() * 2 - icon.height()) / 2, - inner.width()); + PainterHighQualityEnabler hq(p); + const auto &size = st::historyRecordLockIconSize; + const auto &blockHeight = st::historyRecordLockIconBottomHeight; + const auto blockRect = QRect( + 0, + size.height() - blockHeight, + size.width(), + blockHeight); + const auto &lineHeight = st::historyRecordLockIconLineHeight; + const auto &offset = st::historyRecordLockIconLineSkip; + + p.setPen(Qt::NoPen); + p.setBrush(st::historyRecordLockIconFg); + p.translate( + inner.x() + (inner.width() - size.width()) / 2, + inner.y() + (originTop.height() * 2 - size.height()) / 2); + p.drawRoundedRect(blockRect, 2, 3); + + p.translate( + size.width() - offset, + blockRect.y()); + + if (progress < 1. && progress > 0.) { + p.rotate(kLockArcAngle * progress); + } + + p.setPen(_arcPen); + const auto rLine = QLineF(0, 0, 0, -lineHeight); + p.drawLine(rLine); + + const auto arcWidth = size.width() - offset * 2; + const auto &arcHeight = st::historyRecordLockIconArcHeight; + p.drawArc( + -arcWidth, + rLine.dy() - arcHeight - _arcPen.width() + rLine.y1(), + arcWidth, + arcHeight * 2, + 0, + 180 * 16); + + const auto lockProgress = 1. - _lockAnimation.value(1.); + if (progress == 1. && lockProgress < 1.) { + p.drawLine( + -arcWidth, + rLine.y2(), + -arcWidth, + rLine.dy() * lockProgress); + } } } diff --git a/Telegram/SourceFiles/ui/chat/chat.style b/Telegram/SourceFiles/ui/chat/chat.style index ebaca8649a..f783f6fd19 100644 --- a/Telegram/SourceFiles/ui/chat/chat.style +++ b/Telegram/SourceFiles/ui/chat/chat.style @@ -363,6 +363,14 @@ historyRecordTextRight: 25px; historyRecordLockShowDuration: historyToDownDuration; historyRecordLockSize: size(75px, 150px); +historyRecordLockIconFg: historyToDownFg; +historyRecordLockIconSize: size(14px, 18px); +historyRecordLockIconBottomHeight: 9px; +historyRecordLockIconLineHeight: 2px; +historyRecordLockIconLineSkip: 3px; +historyRecordLockIconLineWidth: 2px; +historyRecordLockIconArcHeight: 4px; + historyRecordLockTopShadow: icon {{ "lock/record_lock_top_shadow", historyToDownShadow }}; historyRecordLockTop: icon {{ "lock/record_lock_top", historyToDownBg }}; historyRecordLockBottomShadow: icon {{ "lock/record_lock_bottom_shadow", historyToDownShadow }}; @@ -374,9 +382,6 @@ historyRecordLockArrow: icon {{ "history_down_arrow-flip_vertical", historyToDow historyRecordLockPosition: historyToDownPosition; -historyRecordLockIcon: icon {{ "dialogs_unlock", historyToDownFg, point(1px, 0px) }}; -historyRecordUnlockIcon: icon {{ "dialogs_lock", historyToDownFg, point(0px, 0px) }}; - historySilentToggle: IconButton(historyBotKeyboardShow) { icon: icon {{ "send_control_silent_off", historyComposeIconFg }}; iconOver: icon {{ "send_control_silent_off", historyComposeIconFgOver }};