diff --git a/Telegram/Resources/icons/lock/record_lock_body.png b/Telegram/Resources/icons/lock/record_lock_body.png new file mode 100644 index 0000000000..6204b88ce4 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_body.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_body@2x.png b/Telegram/Resources/icons/lock/record_lock_body@2x.png new file mode 100644 index 0000000000..cf955e2914 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_body@2x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_body@3x.png b/Telegram/Resources/icons/lock/record_lock_body@3x.png new file mode 100644 index 0000000000..1da493f530 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_body@3x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_body_shadow.png b/Telegram/Resources/icons/lock/record_lock_body_shadow.png new file mode 100644 index 0000000000..ee20e6c70a Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_body_shadow.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_body_shadow@2x.png b/Telegram/Resources/icons/lock/record_lock_body_shadow@2x.png new file mode 100644 index 0000000000..3b01ea846d Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_body_shadow@2x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_body_shadow@3x.png b/Telegram/Resources/icons/lock/record_lock_body_shadow@3x.png new file mode 100644 index 0000000000..cef5497898 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_body_shadow@3x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_bottom.png b/Telegram/Resources/icons/lock/record_lock_bottom.png new file mode 100644 index 0000000000..8be9d5e19e Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_bottom.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_bottom@2x.png b/Telegram/Resources/icons/lock/record_lock_bottom@2x.png new file mode 100644 index 0000000000..99296c69fa Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_bottom@2x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_bottom@3x.png b/Telegram/Resources/icons/lock/record_lock_bottom@3x.png new file mode 100644 index 0000000000..bd1cd6a8a2 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_bottom@3x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_bottom_shadow.png b/Telegram/Resources/icons/lock/record_lock_bottom_shadow.png new file mode 100644 index 0000000000..efa0930639 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_bottom_shadow.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_bottom_shadow@2x.png b/Telegram/Resources/icons/lock/record_lock_bottom_shadow@2x.png new file mode 100644 index 0000000000..2804459cdc Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_bottom_shadow@2x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_bottom_shadow@3x.png b/Telegram/Resources/icons/lock/record_lock_bottom_shadow@3x.png new file mode 100644 index 0000000000..5421949809 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_bottom_shadow@3x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_top.png b/Telegram/Resources/icons/lock/record_lock_top.png new file mode 100644 index 0000000000..a4ee1db1b2 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_top.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_top@2x.png b/Telegram/Resources/icons/lock/record_lock_top@2x.png new file mode 100644 index 0000000000..b578b31059 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_top@2x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_top@3x.png b/Telegram/Resources/icons/lock/record_lock_top@3x.png new file mode 100644 index 0000000000..c8d63fe3c1 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_top@3x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_top_shadow.png b/Telegram/Resources/icons/lock/record_lock_top_shadow.png new file mode 100644 index 0000000000..30d0aa4ec9 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_top_shadow.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_top_shadow@2x.png b/Telegram/Resources/icons/lock/record_lock_top_shadow@2x.png new file mode 100644 index 0000000000..bc3943e4e0 Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_top_shadow@2x.png differ diff --git a/Telegram/Resources/icons/lock/record_lock_top_shadow@3x.png b/Telegram/Resources/icons/lock/record_lock_top_shadow@3x.png new file mode 100644 index 0000000000..5aca3269ce Binary files /dev/null and b/Telegram/Resources/icons/lock/record_lock_top_shadow@3x.png differ diff --git a/Telegram/SourceFiles/history/history_widget.cpp b/Telegram/SourceFiles/history/history_widget.cpp index dc7ec45716..2f706afca1 100644 --- a/Telegram/SourceFiles/history/history_widget.cpp +++ b/Telegram/SourceFiles/history/history_widget.cpp @@ -722,7 +722,7 @@ void HistoryWidget::initVoiceRecordBar() { _scroll->topValue(), _scroll->heightValue() ) | rpl::map([=](int top, int height) { - return top + height; + return top + height - st::historyRecordLockPosition.y(); }); _voiceRecordBar->setLockBottom(std::move(scrollHeight)); } 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 d942215658..a5d1a30850 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 @@ -66,13 +66,18 @@ public: private: void init(); + void drawProgress(Painter &p); + Ui::Animations::Simple _lockAnimation; rpl::variable _progress = 0.; }; RecordLock::RecordLock(not_null parent) : RpWidget(parent) { - resize(st::historyRecordLockSize); + resize( + st::historyRecordLockTopShadow.width(), + st::historyRecordLockSize.height()); + // resize(st::historyRecordLockSize); init(); } @@ -90,23 +95,101 @@ void RecordLock::init() { ) | rpl::start_with_next([=](const QRect &clip) { Painter p(this); if (isLocked()) { - const auto color = anim::color( - Qt::red, - Qt::green, + const auto top = anim::interpolate( + 0, + height() - st::historyRecordLockTopShadow.height() * 2, _lockAnimation.value(1.)); - p.fillRect(clip, color); + p.translate(0, top); + drawProgress(p); return; } - p.fillRect(clip, anim::color(Qt::blue, Qt::red, _progress.current())); + drawProgress(p); }, lifetime()); locks( ) | rpl::start_with_next([=] { - const auto duration = st::historyRecordVoiceShowDuration * 3; + const auto duration = st::historyRecordVoiceShowDuration; _lockAnimation.start([=] { update(); }, 0., 1., duration); }, lifetime()); } +void RecordLock::drawProgress(Painter &p) { + const auto progress = _progress.current(); + + const auto &originTop = st::historyRecordLockTop; + const auto &originBottom = st::historyRecordLockBottom; + const auto &originBody = st::historyRecordLockBody; + const auto &shadowTop = st::historyRecordLockTopShadow; + const auto &shadowBottom = st::historyRecordLockBottomShadow; + const auto &shadowBody = st::historyRecordLockBodyShadow; + const auto &shadowMargins = st::historyRecordLockMargin; + + const auto bottomMargin = anim::interpolate( + 0, + rect().height() - shadowTop.height() - shadowBottom.height(), + progress); + + const auto topMargin = anim::interpolate( + rect().height() / 4, + 0, + progress); + + const auto full = rect().marginsRemoved( + style::margins(0, topMargin, 0, bottomMargin)); + const auto inner = full.marginsRemoved(shadowMargins); + const auto content = inner.marginsRemoved(style::margins( + 0, + originTop.height(), + 0, + originBottom.height())); + const auto contentShadow = full.marginsRemoved(style::margins( + 0, + shadowTop.height(), + 0, + shadowBottom.height())); + + const auto w = full.width(); + { + shadowTop.paint(p, full.topLeft(), w); + originTop.paint(p, inner.topLeft(), w); + } + { + const auto shadowPos = QPoint( + full.x(), + contentShadow.y() + contentShadow.height()); + const auto originPos = QPoint( + inner.x(), + content.y() + content.height()); + shadowBottom.paint(p, shadowPos, w); + originBottom.paint(p, originPos, w); + } + { + shadowBody.fill(p, contentShadow); + originBody.fill(p, content); + } + { + const auto &arrow = st::historyRecordLockArrow; + const auto arrowRect = QRect( + inner.x(), + content.y() + content.height() - arrow.height() / 2, + inner.width(), + arrow.height()); + p.setOpacity(1. - progress); + arrow.paintInCenter(p, arrowRect); + 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()); + } +} + void RecordLock::requestPaintProgress(float64 progress) { if (isHidden() || isLocked()) { return; @@ -230,7 +313,7 @@ void VoiceRecordBar::init() { auto callback = [=](auto value) { const auto right = anim::interpolate( -_lock->width(), - 0, + st::historyRecordLockPosition.x(), value); _lock->moveToRight(right, _lock->y()); if (value == 0. && !show) { diff --git a/Telegram/SourceFiles/ui/chat/chat.style b/Telegram/SourceFiles/ui/chat/chat.style index 1bf1b08bae..325c6160db 100644 --- a/Telegram/SourceFiles/ui/chat/chat.style +++ b/Telegram/SourceFiles/ui/chat/chat.style @@ -345,7 +345,21 @@ historyRecordDurationFg: historyComposeAreaFg; historyRecordTextTop: 14px; historyRecordLockShowDuration: historyToDownDuration; -historyRecordLockSize: size(50px, 150px); +historyRecordLockSize: size(75px, 150px); + +historyRecordLockTopShadow: icon {{ "lock/record_lock_top_shadow", historyToDownShadow }}; +historyRecordLockTop: icon {{ "lock/record_lock_top", historyToDownBg }}; +historyRecordLockBottomShadow: icon {{ "lock/record_lock_bottom_shadow", historyToDownShadow }}; +historyRecordLockBottom: icon {{ "lock/record_lock_bottom", historyToDownBg }}; +historyRecordLockBodyShadow: icon {{ "lock/record_lock_body_shadow", historyToDownShadow }}; +historyRecordLockBody: icon {{ "lock/record_lock_body", historyToDownBg }}; +historyRecordLockMargin: margins(4px, 4px, 4px, 4px); +historyRecordLockArrow: icon {{ "history_down_arrow-flip_vertical", historyToDownFg }}; + +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 }};