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

Improve the look and feel of the picker 

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-07-16 21:16:07 +02:00
parent 77c8425c3c
commit 31f5d012b8
No known key found for this signature in database
GPG Key ID: CC823428E9B582FB
2 changed files with 40 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,58 +16,42 @@ limitations under the License.
.mx_desktopCapturerSourcePicker { .mx_desktopCapturerSourcePicker {
overflow: hidden; overflow: hidden;
}
.mx_desktopCapturerSourcePicker_tabLabels { .mx_desktopCapturerSourcePicker_tab {
display: flex; display: flex;
padding: 0 0 8px 0; flex-wrap: wrap;
} justify-content: center;
align-items: flex-start;
height: 500px;
overflow: overlay;
}
.mx_desktopCapturerSourcePicker_tabLabel, .mx_desktopCapturerSourcePicker_source {
.mx_desktopCapturerSourcePicker_tabLabel_selected { display: flex;
width: 100%; flex-direction: column;
text-align: center; margin: 8px;
border-radius: 8px; }
padding: 8px 0;
font-size: $font-13px;
}
.mx_desktopCapturerSourcePicker_tabLabel_selected { .mx_desktopCapturerSourcePicker_source_thumbnail {
background-color: $tab-label-active-bg-color; margin: 4px;
color: $tab-label-active-fg-color; width: 312px;
} border-width: 2px;
border-radius: 8px;
border-style: solid;
border-color: transparent;
.mx_desktopCapturerSourcePicker_panel { &.mx_desktopCapturerSourcePicker_source_thumbnail_selected,
display: flex; &:hover,
flex-wrap: wrap; &:focus {
justify-content: center; border-color: $accent-color;
align-items: flex-start; }
height: 500px; }
overflow: overlay;
}
.mx_desktopCapturerSourcePicker_stream_button { .mx_desktopCapturerSourcePicker_source_name {
display: flex; margin: 0 4px;
flex-direction: column; white-space: nowrap;
margin: 8px; text-overflow: ellipsis;
border-radius: 4px; overflow: hidden;
} width: 312px;
}
.mx_desktopCapturerSourcePicker_stream_button_selected,
.mx_desktopCapturerSourcePicker_stream_button:hover,
.mx_desktopCapturerSourcePicker_stream_button:focus {
background: $roomtile-selected-bg-color;
}
.mx_desktopCapturerSourcePicker_stream_thumbnail {
margin: 4px;
width: 312px;
}
.mx_desktopCapturerSourcePicker_stream_name {
margin: 0 4px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 312px;
} }

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

@ -51,22 +51,22 @@ export class ExistingSource extends React.Component<ExistingSourceIProps> {
}; };
render() { render() {
const classes = classNames({ const thumbnailClasses = classNames({
mx_desktopCapturerSourcePicker_stream_button: true, mx_desktopCapturerSourcePicker_source_thumbnail: true,
mx_desktopCapturerSourcePicker_stream_button_selected: this.props.selected, mx_desktopCapturerSourcePicker_source_thumbnail_selected: this.props.selected,
}); });
return ( return (
<AccessibleButton <AccessibleButton
className={classes} className="mx_desktopCapturerSourcePicker_source"
title={this.props.source.name} title={this.props.source.name}
onClick={this.onClick} onClick={this.onClick}
> >
<img <img
className="mx_desktopCapturerSourcePicker_stream_thumbnail" className={thumbnailClasses}
src={this.props.source.thumbnailURL} src={this.props.source.thumbnailURL}
/> />
<span className="mx_desktopCapturerSourcePicker_stream_name">{this.props.source.name}</span> <span className="mx_desktopCapturerSourcePicker_source_name">{this.props.source.name}</span>
</AccessibleButton> </AccessibleButton>
); );
} }
@ -147,7 +147,7 @@ export default class DesktopCapturerSourcePicker extends React.Component<
}); });
return new Tab(type, label, null, ( return new Tab(type, label, null, (
<div className="mx_desktopCapturerSourcePicker_panel"> <div className="mx_desktopCapturerSourcePicker_tab">
{ sources } { sources }
</div> </div>
)); ));