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

Fixed class names 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-01-05 19:49:09 +01:00
parent efd889c09a
commit 8652c2e653
No known key found for this signature in database
GPG Key ID: 9760693FDD98A790
2 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
res/css/views/elements/_DesktopCapturerSourcePicker.scss
View File

@ -15,17 +15,17 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
.mx_streamSelectorDialog { .mx_desktopCapturerSourcePicker {
overflow: hidden; overflow: hidden;
} }
.mx_streamSelectorDialog_tabLabels { .mx_desktopCapturerSourcePicker_tabLabels {
display: flex; display: flex;
padding: 0 0 8px 0; padding: 0 0 8px 0;
} }
.mx_streamSelectorDialog_tabLabel, .mx_desktopCapturerSourcePicker_tabLabel,
.mx_streamSelectorDialog_tabLabel_selected { .mx_desktopCapturerSourcePicker_tabLabel_selected {
width: 100%; width: 100%;
text-align: center; text-align: center;
border-radius: 8px; border-radius: 8px;
@ -33,12 +33,12 @@ limitations under the License.
font-size: $font-13px; font-size: $font-13px;
} }
.mx_streamSelectorDialog_tabLabel_selected { .mx_desktopCapturerSourcePicker_tabLabel_selected {
background-color: $tab-label-active-bg-color; background-color: $tab-label-active-bg-color;
color: $tab-label-active-fg-color; color: $tab-label-active-fg-color;
} }
.mx_streamSelectorDialog_panel { .mx_desktopCapturerSourcePicker_panel {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
@ -47,24 +47,24 @@ limitations under the License.
overflow: overlay; overflow: overlay;
} }
.mx_streamSelectorDialog_stream_button { .mx_desktopCapturerSourcePicker_stream_button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 8px; margin: 8px;
border-radius: 4px; border-radius: 4px;
} }
.mx_streamSelectorDialog_stream_button:hover, .mx_desktopCapturerSourcePicker_stream_button:hover,
.mx_streamSelectorDialog_stream_button:focus { .mx_desktopCapturerSourcePicker_stream_button:focus {
background: $roomtile-selected-bg-color; background: $roomtile-selected-bg-color;
} }
.mx_streamSelectorDialog_stream_thumbnail { .mx_desktopCapturerSourcePicker_stream_thumbnail {
margin: 4px; margin: 4px;
width: 312px; width: 312px;
} }
.mx_streamSelectorDialog_stream_name { .mx_desktopCapturerSourcePicker_stream_name {
margin: 0 4px; margin: 0 4px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;

14
src/components/views/elements/DesktopCapturerSourcePicker.tsx
View File

@ -42,15 +42,15 @@ export class ExistingSource extends React.Component<DesktopCapturerSourceIProps>
render() { render() {
return ( return (
<AccessibleButton <AccessibleButton
className="mx_streamSelectorDialog_stream_button" className="mx_desktopCapturerSourcePicker_stream_button"
data-id={this.props.source.id} data-id={this.props.source.id}
title={this.props.source.name} title={this.props.source.name}
onClick={this.onClick} > onClick={this.onClick} >
<img <img
className="mx_streamSelectorDialog_stream_thumbnail" className="mx_desktopCapturerSourcePicker_stream_thumbnail"
src={this.props.source.thumbnail.toDataURL()} src={this.props.source.thumbnail.toDataURL()}
/> />
<span className="mx_streamSelectorDialog_stream_name">{this.props.source.name}</span> <span className="mx_desktopCapturerSourcePicker_stream_name">{this.props.source.name}</span>
</AccessibleButton> </AccessibleButton>
); );
} }
@ -113,17 +113,17 @@ export default class DesktopCapturerSourcePicker extends React.Component<
return <ExistingSource source={source} onSelect={this.onSelect} key={source.id} />; return <ExistingSource source={source} onSelect={this.onSelect} key={source.id} />;
}); });
} }
const buttonStyle = "mx_streamSelectorDialog_tabLabel"; const buttonStyle = "mx_desktopCapturerSourcePicker_tabLabel";
const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : ""); const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : "");
const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : ""); const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : "");
return ( return (
<BaseDialog <BaseDialog
className="mx_streamSelectorDialog" className="mx_desktopCapturerSourcePicker"
onFinished={this.onCloseClick} onFinished={this.onCloseClick}
title={_td("Share your screen")} title={_td("Share your screen")}
> >
<div className="mx_streamSelectorDialog_tabLabels"> <div className="mx_desktopCapturerSourcePicker_tabLabels">
<AccessibleButton <AccessibleButton
className={screensButtonStyle} className={screensButtonStyle}
onClick={this.onScreensClick} onClick={this.onScreensClick}
@ -137,7 +137,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<
{_td("Windows")} {_td("Windows")}
</AccessibleButton> </AccessibleButton>
</div> </div>
<div className="mx_streamSelectorDialog_panel"> <div className="mx_desktopCapturerSourcePicker_panel">
{ sources } { sources }
</div> </div>
</BaseDialog> </BaseDialog>