Replaced dummy lock icons with lock animation.

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<float64> _progress = 0.;
 };
 
-RecordLock::RecordLock(not_null<Ui::RpWidget*> parent) : RpWidget(parent) {
+RecordLock::RecordLock(not_null<Ui::RpWidget*> 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()
+		PainterHighQualityEnabler hq(p);
-			? st::historyRecordLockIcon
+		const auto &size = st::historyRecordLockIconSize;
-			: st::historyRecordUnlockIcon;
+		const auto &blockHeight = st::historyRecordLockIconBottomHeight;
-		icon.paint(
+		const auto blockRect = QRect(
-			p,
+			0,
-			inner.x() + (inner.width() - icon.width()) / 2,
+			size.height() - blockHeight,
-			inner.y() + (originTop.height() * 2 - icon.height()) / 2,
+			size.width(),
-			inner.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);
+		}
 	}
 }
 

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 }};