OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Improve Voice Broadcast header layout (#9437) 

* Fix Voice Broadcast live badge position

* Prevent voice broadcast header overflow

* Fix VoiceBroadcastPlaybackBody-test
pull/28217/head
Michael Weimann 2022-10-17 18:13:06 +02:00 committed by GitHub
parent 788dd904b7
commit e1d631cb47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 34 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
res/css/voice-broadcast/atoms/_VoiceBroadcastHeader.pcss
View File

@ -20,6 +20,11 @@ limitations under the License.
width: 266px;
}
.mx_VoiceBroadcastHeader_content {
flex-grow: 1;
min-width: 0;
}
.mx_VoiceBroadcastHeader_room {
font-size: $font-12px;
font-weight: $font-semi-bold;
@ -34,4 +39,14 @@ limitations under the License.
font-size: $font-12px;
display: flex;
gap: $spacing-4;
i {
flex-shrink: 0;
}
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

2
src/voice-broadcast/components/atoms/VoiceBroadcastHeader.tsx
View File

@ -47,7 +47,7 @@ export const VoiceBroadcastHeader: React.FC<VoiceBroadcastHeaderProps> = ({
</div>
<div className="mx_VoiceBroadcastHeader_line">
<Icon type={IconType.Microphone} colour={IconColour.CompoundSecondaryContent} />
{ sender.name }
<span>{ sender.name }</span>
</div>
{ broadcast }
</div>

8
test/voice-broadcast/components/atoms/__snapshots__/VoiceBroadcastHeader-test.tsx.snap
View File

@ -28,7 +28,9 @@ exports[`VoiceBroadcastHeader when rendering a live broadcast header with broadc
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
test user
<span>
test user
</span>
</div>
<div
class="mx_VoiceBroadcastHeader_line"
@ -85,7 +87,9 @@ exports[`VoiceBroadcastHeader when rendering a non-live broadcast header should
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
test user
<span>
test user
</span>
</div>
</div>
</div>

8
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastPlaybackBody-test.tsx.snap
View File

@ -31,7 +31,9 @@ exports[`VoiceBroadcastPlaybackBody when rendering a broadcast should render as
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
@user:example.com
<span>
@user:example.com
</span>
</div>
<div
class="mx_VoiceBroadcastHeader_line"
@ -109,7 +111,9 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
@user:example.com
<span>
@user:example.com
</span>
</div>
<div
class="mx_VoiceBroadcastHeader_line"

4
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingBody-test.tsx.snap
View File

@ -31,7 +31,9 @@ exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should rend
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
@user:example.com
<span>
@user:example.com
</span>
</div>
</div>
<div

4
test/voice-broadcast/components/molecules/__snapshots__/VoiceBroadcastRecordingPip-test.tsx.snap
View File

@ -31,7 +31,9 @@ exports[`VoiceBroadcastRecordingPip when rendering should create the expected re
role="presentation"
style="mask-image: url(\\"image-file-stub\\");"
/>
@user:example.com
<span>
@user:example.com
</span>
</div>
</div>
<div