Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit a94c1a9

Browse files
turt2liveturt2live
committed
Update colours and sizing for voice messages
Fixes element-hq/element-web#17162
1 parent 2bf931b commit a94c1a9

File tree

9 files changed

+44
-39
lines changed

9 files changed

+44
-39
lines changed

‎res/css/views/rooms/_VoiceRecordComposerTile.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ limitations under the License.
3939
width: 14px; // w&h are size of icon
4040
height: 18px;
4141
vertical-align: middle;
42-
margin-right: 7px; // distance from left edge of waveform container (container has some margin too)
42+
margin-right: 11px; // distance from left edge of waveform container (container has some margin too)
4343
background-color: $voice-record-icon-color;
4444
mask-repeat: no-repeat;
4545
mask-size: contain;
@@ -55,7 +55,9 @@ limitations under the License.
5555
position: relative; // important for the live circle
5656

5757
&.mx_VoiceRecordComposerTile_recording {
58-
padding-left: 16px; // +10px for the live circle, +6px for regular padding
58+
// We are putting the circle in this padding, so we need +10px from the regular
59+
// padding on the left side.
60+
padding-left: 22px;
5961

6062
&::before {
6163
animation: recording-pulse 2s infinite;
@@ -65,8 +67,8 @@ limitations under the License.
6567
width: 10px;
6668
height: 10px;
6769
position: absolute;
68-
left: 8px;
69-
top: 16px; // vertically center
70+
left: 12px; // 12px from the left edge for container padding
71+
top: 18px; // vertically center (middle align with clock)
7072
border-radius: 10px;
7173
}
7274
}

‎res/css/views/voice_messages/_PlaybackContainer.scss‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ limitations under the License.
1919

2020
// Container for live recording and playback controls
2121
.mx_VoiceMessagePrimaryContainer {
22-
padding: 6px; // makes us 4px taller than the send/stop button
23-
padding-right: 5px; // there's 1px from the waveform itself, so account for that
22+
// 7px top and bottom for visual design. 12px left & right, but the waveform (right)
23+
// has a 1px padding on it that we want to account for.
24+
padding: 7px 12px 7px 11px;
2425
background-color: $voice-record-waveform-bg-color;
2526
border-radius: 12px;
2627

@@ -30,11 +31,9 @@ limitations under the License.
3031

3132
color: $voice-record-waveform-fg-color;
3233
font-size: $font-14px;
34+
line-height: $font-24px;
3335

3436
.mx_Waveform {
35-
// We want the bars to be 2px shorter than the play/pause button in the waveform control
36-
height: 28px; // default is 30px, so we're subtracting the 2px border off the bars
37-
3837
.mx_Waveform_bar {
3938
background-color: $voice-record-waveform-incomplete-fg-color;
4039

@@ -47,8 +46,8 @@ limitations under the License.
4746
}
4847

4948
.mx_Clock {
50-
padding-right: 4px; // isolate from waveform
51-
padding-left: 8px; // isolate from live circle
52-
width: 40px; // we're not using a monospace font, so fake it
49+
width: 42px; // we're not using a monospace font, so fake it
50+
padding-right: 6px; // with the fixed width this ends up as a visual 8px most of the time, as intended.
51+
padding-left: 8px; // isolate from recording circle / play control
5352
}
5453
}

‎res/themes/dark/css/_dark.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -42,13 +42,13 @@ $preview-bar-bg-color: $header-panel-bg-color;
4242
$groupFilterPanel-bg-color: rgba(38, 39, 43, 0.82);
4343
$inverted-bg-color: $base-color;
4444

45-
$voice-record-stop-border-color: #6F7882; // "Quarterly"
45+
$voice-record-stop-border-color: #6F7882; // "Quartary"
4646
$voice-record-waveform-bg-color: #394049; // "Dark Tile"
47-
$voice-record-waveform-fg-color: $tertiary-fg-color;
48-
$voice-record-waveform-incomplete-fg-color: #5b646d;
49-
$voice-record-icon-color: $tertiary-fg-color;
47+
$voice-record-waveform-fg-color: $secondary-fg-color;
48+
$voice-record-waveform-incomplete-fg-color: #6F7882; // "Quartary"
49+
$voice-record-icon-color: #6F7882; // "Quartary"
5050
$voice-playback-button-bg-color: $tertiary-fg-color;
51-
$voice-playback-button-fg-color: $bg-color;
51+
$voice-playback-button-fg-color: #21262C; // "Separator"
5252

5353
// used by AddressSelector
5454
$selected-color: $room-highlight-color;

‎res/themes/legacy-dark/css/_legacy-dark.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,11 +127,11 @@ $groupFilterPanel-divider-color: $roomlist-header-color;
127127
// See non-legacy dark for variable information
128128
$voice-record-stop-border-color: #6F7882;
129129
$voice-record-waveform-bg-color: #394049;
130-
$voice-record-waveform-fg-color: $tertiary-fg-color;
131-
$voice-record-waveform-incomplete-fg-color: #5b646d;
132-
$voice-record-icon-color: $tertiary-fg-color;
130+
$voice-record-waveform-fg-color: $secondary-fg-color;
131+
$voice-record-waveform-incomplete-fg-color: #6F7882;
132+
$voice-record-icon-color: #6F7882;
133133
$voice-playback-button-bg-color: $tertiary-fg-color;
134-
$voice-playback-button-fg-color: $bg-color;
134+
$voice-playback-button-fg-color: #21262C;
135135

136136
$roomtile-preview-color: #9e9e9e;
137137
$roomtile-default-badge-bg-color: #61708b;

‎res/themes/legacy-light/css/_legacy-light.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -192,15 +192,15 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
192192
$groupFilterPanel-divider-color: $roomlist-header-color;
193193

194194
// See non-legacy _light for variable information
195-
$voice-record-stop-border-color: #E3E8F0;
196195
$voice-record-stop-symbol-color: #ff4b55;
196+
$voice-record-live-circle-color: #ff4b55;
197+
$voice-record-stop-border-color: #E3E8F0;
197198
$voice-record-waveform-bg-color: #E3E8F0;
198-
$voice-record-waveform-fg-color: $muted-fg-color;
199+
$voice-record-waveform-fg-color: $secondary-fg-color;
199200
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
200-
$voice-record-live-circle-color: #ff4b55;
201-
$voice-record-icon-color: $muted-fg-color;
201+
$voice-record-icon-color: $tertiary-fg-color;
202202
$voice-playback-button-bg-color: $primary-bg-color;
203-
$voice-playback-button-fg-color: $muted-fg-color;
203+
$voice-playback-button-fg-color: $secondary-fg-color;
204204

205205
$roomtile-preview-color: #9e9e9e;
206206
$roomtile-default-badge-bg-color: #61708b;

‎res/themes/light/css/_light.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -182,15 +182,18 @@ $roomsublist-skeleton-ui-bg: linear-gradient(180deg, #ffffff 0%, #ffffff00 100%)
182182

183183
$groupFilterPanel-divider-color: $roomlist-header-color;
184184

185-
$voice-record-stop-border-color: #E3E8F0;
186-
$voice-record-stop-symbol-color: #ff4b55; // $warning-color, but without letting people change it in themes
187-
$voice-record-waveform-bg-color: #E3E8F0;
188-
$voice-record-waveform-fg-color: $muted-fg-color;
189-
$voice-record-waveform-incomplete-fg-color: #C1C6CD;
190-
$voice-record-live-circle-color: #ff4b55; // $warning-color, but without letting people change it in themes
191-
$voice-record-icon-color: $muted-fg-color;
185+
// These two don't change between themes. They are the $warning-color, but we don't
186+
// want custom themes to affect them by accident.
187+
$voice-record-stop-symbol-color: #ff4b55;
188+
$voice-record-live-circle-color: #ff4b55;
189+
190+
$voice-record-stop-border-color: #E3E8F0; // "Separator"
191+
$voice-record-waveform-bg-color: #E3E8F0; // "Separator"
192+
$voice-record-waveform-fg-color: $secondary-fg-color;
193+
$voice-record-waveform-incomplete-fg-color: #C1C6CD; // "Quartary"
194+
$voice-record-icon-color: $tertiary-fg-color;
192195
$voice-playback-button-bg-color: $primary-bg-color;
193-
$voice-playback-button-fg-color: $muted-fg-color;
196+
$voice-playback-button-fg-color: $secondary-fg-color;
194197

195198
$roomtile-preview-color: $secondary-fg-color;
196199
$roomtile-default-badge-bg-color: #61708b;

‎src/components/views/voice_messages/LiveRecordingWaveform.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,11 @@ limitations under the License.
1515
*/
1616

1717
import React from "react";
18-
import {IRecordingUpdate, VoiceRecording} from "../../../voice/VoiceRecording";
18+
import {IRecordingUpdate, RECORDING_PLAYBACK_SAMPLES, VoiceRecording} from "../../../voice/VoiceRecording";
1919
import {replaceableComponent} from "../../../utils/replaceableComponent";
2020
import {arrayFastResample, arraySeed} from "../../../utils/arrays";
2121
import {percentageOf} from "../../../utils/numbers";
2222
import Waveform from "./Waveform";
23-
import {PLAYBACK_WAVEFORM_SAMPLES} from "../../../voice/Playback";
2423

2524
interface IProps {
2625
recorder: VoiceRecording;
@@ -38,14 +37,14 @@ export default class LiveRecordingWaveform extends React.PureComponent<IProps, I
3837
public constructor(props) {
3938
super(props);
4039

41-
this.state = {heights: arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES)};
40+
this.state = {heights: arraySeed(0, RECORDING_PLAYBACK_SAMPLES)};
4241
this.props.recorder.liveData.onUpdate(this.onRecordingUpdate);
4342
}
4443

4544
private onRecordingUpdate = (update: IRecordingUpdate) => {
4645
// The waveform and the downsample target are pretty close, so we should be fine to
4746
// do this, despite the docs on arrayFastResample.
48-
const bars = arrayFastResample(Array.from(update.waveform), PLAYBACK_WAVEFORM_SAMPLES);
47+
const bars = arrayFastResample(Array.from(update.waveform), RECORDING_PLAYBACK_SAMPLES);
4948
this.setState({
5049
// The incoming data is between zero and one, but typically even screaming into a
5150
// microphone won't send you over 0.6, so we artificially adjust the gain for the

‎src/voice/Playback.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export enum PlaybackState {
2929
Playing = "playing", // active progress through timeline
3030
}
3131

32-
export const PLAYBACK_WAVEFORM_SAMPLES = 35;
32+
export const PLAYBACK_WAVEFORM_SAMPLES = 38;
3333
const DEFAULT_WAVEFORM = arraySeed(0, PLAYBACK_WAVEFORM_SAMPLES);
3434

3535
export class Playback extends EventEmitter implements IDestroyable {

‎src/voice/VoiceRecording.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ const BITRATE = 24000; // 24kbps is pretty high quality for our use case in opus
3333
const TARGET_MAX_LENGTH = 120; // 2 minutes in seconds. Somewhat arbitrary, though longer == larger files.
3434
const TARGET_WARN_TIME_LEFT = 10; // 10 seconds, also somewhat arbitrary.
3535

36+
export const RECORDING_PLAYBACK_SAMPLES = 43;
37+
3638
export interface IRecordingUpdate {
3739
waveform: number[]; // floating points between 0 (low) and 1 (high).
3840
timeSeconds: number; // float

0 commit comments

Comments
 (0)