From e77d3bea0483b62de7705e26bc5266cc3d58f3ae Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 14 Apr 2021 15:08:11 -0600 Subject: [PATCH 1/5] Pulse animation option for voice record button --- .../views/rooms/_VoiceRecordComposerTile.scss | 22 ++++++++++++++++++- .../legacy-light/css/_legacy-light.scss | 6 +++-- res/themes/light/css/_light.scss | 5 +++-- 3 files changed, 28 insertions(+), 5 deletions(-) diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss index 2fb112a38c..4d706c7ed4 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.scss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss @@ -53,7 +53,9 @@ limitations under the License. font-size: $font-14px; &::before { - // TODO: @@ TravisR: Animate + // Pulsing animation + animation: recording-pulse 1.5s infinite; + content: ''; background-color: $voice-record-live-circle-color; width: 10px; @@ -74,3 +76,21 @@ limitations under the License. width: 42px; // we're not using a monospace font, so fake it } } + +@keyframes recording-pulse { + // Source: https://codepen.io/FlorinPop17/pen/drJJzK + // Same source: https://www.florin-pop.com/blog/2019/03/css-pulse-effect/ + + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 $voice-record-live-circle-color; + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 6px transparent; + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 transparent; + } +} diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 7cb7082c4e..8ce231f47c 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -189,11 +189,13 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%) $groupFilterPanel-divider-color: $roomlist-header-color; +// See non-legacy _light for variable information $voice-record-stop-border-color: #E3E8F0; -$voice-record-stop-symbol-color: $warning-color; +$voice-record-stop-symbol-color: #ff4b55; $voice-record-waveform-bg-color: #E3E8F0; $voice-record-waveform-fg-color: $muted-fg-color; -$voice-record-live-circle-color: $warning-color; +$voice-record-live-circle-color: #ff4b55; +$voice-record-live-halo-color: #ff4b5544; $roomtile-preview-color: #9e9e9e; $roomtile-default-badge-bg-color: #61708b; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index dc26c4d652..4744c4d5b6 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -181,10 +181,11 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%) $groupFilterPanel-divider-color: $roomlist-header-color; $voice-record-stop-border-color: #E3E8F0; -$voice-record-stop-symbol-color: $warning-color; +$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes $voice-record-waveform-bg-color: #E3E8F0; $voice-record-waveform-fg-color: $muted-fg-color; -$voice-record-live-circle-color: $warning-color; +$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes +$voice-record-live-halo-color: #ff4b5544; // $warning-color, but with some alpha and without theme support $roomtile-preview-color: $secondary-fg-color; $roomtile-default-badge-bg-color: #61708b; From 595225b98b240df574fc609d7f48618d3c023e08 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Wed, 14 Apr 2021 15:10:57 -0600 Subject: [PATCH 2/5] A different animation option for pulsing record icons --- .../views/rooms/_VoiceRecordComposerTile.scss | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss index 4d706c7ed4..6eee496e8d 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.scss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss @@ -54,7 +54,7 @@ limitations under the License. &::before { // Pulsing animation - animation: recording-pulse 1.5s infinite; + animation: recording-pulse 1s infinite; content: ''; background-color: $voice-record-live-circle-color; @@ -78,19 +78,13 @@ limitations under the License. } @keyframes recording-pulse { - // Source: https://codepen.io/FlorinPop17/pen/drJJzK - // Same source: https://www.florin-pop.com/blog/2019/03/css-pulse-effect/ - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 $voice-record-live-circle-color; + opacity: 1; } - 70% { - transform: scale(1); - box-shadow: 0 0 0 6px transparent; + 65% { + opacity: 0; } 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0 transparent; + opacity: 1; } } From 6b3ac20d76c45edebaba3a246ccf0a716ed6703f Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Apr 2021 09:53:15 -0600 Subject: [PATCH 3/5] Cleanup --- res/css/views/rooms/_VoiceRecordComposerTile.scss | 3 +-- res/themes/legacy-light/css/_legacy-light.scss | 1 - res/themes/light/css/_light.scss | 1 - 3 files changed, 1 insertion(+), 4 deletions(-) diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss index 6eee496e8d..062f18e196 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.scss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss @@ -53,8 +53,7 @@ limitations under the License. font-size: $font-14px; &::before { - // Pulsing animation - animation: recording-pulse 1s infinite; + animation: recording-pulse 1.5s infinite; content: ''; background-color: $voice-record-live-circle-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 8ce231f47c..0956f433b2 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -195,7 +195,6 @@ $voice-record-stop-symbol-color: #ff4b55; $voice-record-waveform-bg-color: #E3E8F0; $voice-record-waveform-fg-color: $muted-fg-color; $voice-record-live-circle-color: #ff4b55; -$voice-record-live-halo-color: #ff4b5544; $roomtile-preview-color: #9e9e9e; $roomtile-default-badge-bg-color: #61708b; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 4744c4d5b6..b307dbaba3 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -185,7 +185,6 @@ $voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting $voice-record-waveform-bg-color: #E3E8F0; $voice-record-waveform-fg-color: $muted-fg-color; $voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes -$voice-record-live-halo-color: #ff4b5544; // $warning-color, but with some alpha and without theme support $roomtile-preview-color: $secondary-fg-color; $roomtile-default-badge-bg-color: #61708b; From f0d1e7c5651281a152dcd254a0b0bb13b47eb751 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Apr 2021 10:04:15 -0600 Subject: [PATCH 4/5] Document the lamp effect --- res/css/views/rooms/_VoiceRecordComposerTile.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss index 062f18e196..6636120117 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.scss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss @@ -76,6 +76,14 @@ limitations under the License. } } +// The keyframes are slightly weird here to help make a ramping/punch effect +// for the recording dot. We start and end at 100% opacity to help make the +// dot feel a bit like a real lamp that is blinking: the animation ends up +// spending a lot of its time showing a steady state without a fade effect. +// This lamp effect extends into why the 0% opacity keyframe is not in the +// midpoint: lamps take longer to turn off than they do to turn on, and the +// extra frames give it a bit of a realistic punch for when the animation is +// ramping back up to 100% opacity. @keyframes recording-pulse { 0% { opacity: 1; From 3e24d6f8ac403779c1317cc0dc643e1118b3d5d8 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 15 Apr 2021 10:49:39 -0600 Subject: [PATCH 5/5] Change animation speed --- res/css/views/rooms/_VoiceRecordComposerTile.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/res/css/views/rooms/_VoiceRecordComposerTile.scss b/res/css/views/rooms/_VoiceRecordComposerTile.scss index 6636120117..8100a03890 100644 --- a/res/css/views/rooms/_VoiceRecordComposerTile.scss +++ b/res/css/views/rooms/_VoiceRecordComposerTile.scss @@ -53,7 +53,7 @@ limitations under the License. font-size: $font-14px; &::before { - animation: recording-pulse 1.5s infinite; + animation: recording-pulse 2s infinite; content: ''; background-color: $voice-record-live-circle-color; @@ -84,14 +84,17 @@ limitations under the License. // midpoint: lamps take longer to turn off than they do to turn on, and the // extra frames give it a bit of a realistic punch for when the animation is // ramping back up to 100% opacity. +// +// Target animation timings: steady for 1.5s, fade out for 0.3s, fade in for 0.2s +// (intended to be used in a loop for 2s animation speed) @keyframes recording-pulse { 0% { opacity: 1; } - 65% { + 35% { opacity: 0; } - 100% { + 65% { opacity: 1; } }