mirror of
https://github.com/element-hq/element-web
synced 2024-10-23 03:05:45 +03:00
Unify voice broadcast css (#9504)
This commit is contained in:
Michael Weimann
GitHub
parent
51e69427f3
commit
846417a3a8
10 changed files with 29 additions and 83 deletions
|
|
@ -374,6 +374,4 @@
|
|||
@import "./voice-broadcast/atoms/_PlaybackControlButton.pcss";
|
||||
@import "./voice-broadcast/atoms/_VoiceBroadcastControl.pcss";
|
||||
@import "./voice-broadcast/atoms/_VoiceBroadcastHeader.pcss";
|
||||
@import "./voice-broadcast/molecules/_VoiceBroadcastPlaybackBody.pcss";
|
||||
@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingBody.pcss";
|
||||
@import "./voice-broadcast/molecules/_VoiceBroadcastRecordingPip.pcss";
|
||||
@import "./voice-broadcast/molecules/_VoiceBroadcastBody.pcss";
|
||||
|
|
|
|||
|
|
@ -14,22 +14,26 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_VoiceBroadcastRecordingPip {
|
||||
background-color: $system;
|
||||
.mx_VoiceBroadcastBody {
|
||||
background-color: $quinary-content;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px 0 #0000004a;
|
||||
display: inline-block;
|
||||
padding: $spacing-12;
|
||||
}
|
||||
|
||||
.mx_VoiceBroadcastRecordingPip_divider {
|
||||
.mx_VoiceBroadcastBody--pip {
|
||||
background-color: $system;
|
||||
box-shadow: 0 2px 8px 0 #0000004a;
|
||||
}
|
||||
|
||||
.mx_VoiceBroadcastBody_divider {
|
||||
background-color: $quinary-content;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
margin: $spacing-12 0;
|
||||
}
|
||||
|
||||
.mx_VoiceBroadcastRecordingPip_controls {
|
||||
.mx_VoiceBroadcastBody_controls {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_VoiceBroadcastPlaybackBody {
|
||||
background-color: $quinary-content;
|
||||
border-radius: 8px;
|
||||
display: inline-block;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.mx_VoiceBroadcastPlaybackBody_controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_VoiceBroadcastRecordingBody {
|
||||
align-items: flex-start;
|
||||
background-color: $quinary-content;
|
||||
border-radius: 8px;
|
||||
display: inline-flex;
|
||||
gap: $spacing-8;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.mx_VoiceBroadcastRecordingBody_title {
|
||||
font-size: $font-12px;
|
||||
font-weight: $font-semi-bold;
|
||||
}
|
||||
|
|
@ -74,14 +74,14 @@ export const VoiceBroadcastPlaybackBody: React.FC<VoiceBroadcastPlaybackBodyProp
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="mx_VoiceBroadcastPlaybackBody">
|
||||
<div className="mx_VoiceBroadcastBody">
|
||||
<VoiceBroadcastHeader
|
||||
live={live}
|
||||
sender={sender}
|
||||
room={room}
|
||||
showBroadcast={true}
|
||||
/>
|
||||
<div className="mx_VoiceBroadcastPlaybackBody_controls">
|
||||
<div className="mx_VoiceBroadcastBody_controls">
|
||||
{ control }
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ export const VoiceBroadcastRecordingBody: React.FC<VoiceBroadcastRecordingBodyPr
|
|||
} = useVoiceBroadcastRecording(recording);
|
||||
|
||||
return (
|
||||
<div className="mx_VoiceBroadcastRecordingBody">
|
||||
<div className="mx_VoiceBroadcastBody">
|
||||
<VoiceBroadcastHeader
|
||||
live={live}
|
||||
sender={sender}
|
||||
|
|
|
|||
|
|
@ -52,15 +52,15 @@ export const VoiceBroadcastRecordingPip: React.FC<VoiceBroadcastRecordingPipProp
|
|||
: <VoiceBroadcastControl onClick={toggleRecording} icon={PauseIcon} label={_t("pause voice broadcast")} />;
|
||||
|
||||
return <div
|
||||
className="mx_VoiceBroadcastRecordingPip"
|
||||
className="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
|
||||
>
|
||||
<VoiceBroadcastHeader
|
||||
live={live}
|
||||
sender={sender}
|
||||
room={room}
|
||||
/>
|
||||
<hr className="mx_VoiceBroadcastRecordingPip_divider" />
|
||||
<div className="mx_VoiceBroadcastRecordingPip_controls">
|
||||
<hr className="mx_VoiceBroadcastBody_divider" />
|
||||
<div className="mx_VoiceBroadcastBody_controls">
|
||||
{ toggleControl }
|
||||
<VoiceBroadcastControl
|
||||
icon={StopIcon}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render as expected 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastPlaybackBody"
|
||||
class="mx_VoiceBroadcastBody"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
|
|
@ -51,7 +51,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastPlaybackBody_controls"
|
||||
class="mx_VoiceBroadcastBody_controls"
|
||||
>
|
||||
<div
|
||||
aria-label="resume voice broadcast"
|
||||
|
|
@ -71,7 +71,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 0 broadcast should render a
|
|||
exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render as expected 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastPlaybackBody"
|
||||
class="mx_VoiceBroadcastBody"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
|
|
@ -119,7 +119,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render a
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastPlaybackBody_controls"
|
||||
class="mx_VoiceBroadcastBody_controls"
|
||||
>
|
||||
<div
|
||||
aria-label="pause voice broadcast"
|
||||
|
|
@ -139,7 +139,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a 1 broadcast should render a
|
|||
exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast should render as expected 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastPlaybackBody"
|
||||
class="mx_VoiceBroadcastBody"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
|
|
@ -187,7 +187,7 @@ exports[`VoiceBroadcastPlaybackBody when rendering a buffering voice broadcast s
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastPlaybackBody_controls"
|
||||
class="mx_VoiceBroadcastBody_controls"
|
||||
>
|
||||
<div
|
||||
class="mx_Spinner"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`VoiceBroadcastRecordingBody when rendering a live broadcast should render the expected HTML 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingBody"
|
||||
class="mx_VoiceBroadcastBody"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`VoiceBroadcastRecordingPip when rendering a paused recording should render as expected 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingPip"
|
||||
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
|
|
@ -43,10 +43,10 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
|
|||
</div>
|
||||
</div>
|
||||
<hr
|
||||
class="mx_VoiceBroadcastRecordingPip_divider"
|
||||
class="mx_VoiceBroadcastBody_divider"
|
||||
/>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingPip_controls"
|
||||
class="mx_VoiceBroadcastBody_controls"
|
||||
>
|
||||
<div
|
||||
aria-label="resume voice broadcast"
|
||||
|
|
@ -76,7 +76,7 @@ exports[`VoiceBroadcastRecordingPip when rendering a paused recording should ren
|
|||
exports[`VoiceBroadcastRecordingPip when rendering a started recording should render as expected 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingPip"
|
||||
class="mx_VoiceBroadcastBody mx_VoiceBroadcastBody--pip"
|
||||
>
|
||||
<div
|
||||
class="mx_VoiceBroadcastHeader"
|
||||
|
|
@ -116,10 +116,10 @@ exports[`VoiceBroadcastRecordingPip when rendering a started recording should re
|
|||
</div>
|
||||
</div>
|
||||
<hr
|
||||
class="mx_VoiceBroadcastRecordingPip_divider"
|
||||
class="mx_VoiceBroadcastBody_divider"
|
||||
/>
|
||||
<div
|
||||
class="mx_VoiceBroadcastRecordingPip_controls"
|
||||
class="mx_VoiceBroadcastBody_controls"
|
||||
>
|
||||
<div
|
||||
aria-label="pause voice broadcast"
|
||||
|
|
|
|||
Loading…
Reference in a new issue