Improve UI
Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner
parent
1dc1bc68db
commit
675ca58eef
3 changed files with 123 additions and 69 deletions
|
|
@ -106,6 +106,7 @@
|
|||
@import "./views/elements/_AddressTile.scss";
|
||||
@import "./views/elements/_DesktopBuildsNotice.scss";
|
||||
@import "./views/elements/_DirectorySearchBox.scss";
|
||||
@import "./views/elements/_DesktopCapturerSourcePicker.scss";
|
||||
@import "./views/elements/_Dropdown.scss";
|
||||
@import "./views/elements/_EditableItemList.scss";
|
||||
@import "./views/elements/_ErrorBoundary.scss";
|
||||
|
|
|
|||
|
|
@ -21,53 +21,60 @@ limitations under the License.
|
|||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
padding-right: 80px;
|
||||
}
|
||||
.desktop-capturer-selection-scroller {
|
||||
|
||||
.mx_streamSelectorDialog_tabLabels {
|
||||
display: flex;
|
||||
padding: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.mx_streamSelectorDialog_tabLabel,
|
||||
.mx_streamSelectorDialog_tabLabel_selected
|
||||
{
|
||||
width: 100%;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
padding: 8px 0;
|
||||
border-radius: 8px;
|
||||
font-size: $font-13px;
|
||||
position: relative;
|
||||
}
|
||||
.desktop-capturer-selection-list {
|
||||
max-width: calc(100% - 100px);
|
||||
margin: 0 50px 0 50px;
|
||||
padding: 0;
|
||||
|
||||
.mx_streamSelectorDialog_tabLabel_selected {
|
||||
background-color: $tab-label-active-bg-color;
|
||||
color: $tab-label-active-fg-color;
|
||||
}
|
||||
|
||||
.mx_streamSelectorDialog_panel {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
list-style: none;
|
||||
overflow: hidden;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
height: 500px;
|
||||
overflow: overlay;
|
||||
}
|
||||
.desktop-capturer-selection-item {
|
||||
display: flex;
|
||||
margin: 4px;
|
||||
}
|
||||
.desktop-capturer-selection-button {
|
||||
|
||||
.mx_streamSelectorDialog_stream_button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
width: 145px;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
background: #20262b;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
transition: background-color .15s, box-shadow .15s;
|
||||
}
|
||||
.desktop-capturer-selection-button:hover,
|
||||
.desktop-capturer-selection-button:focus {
|
||||
background: #363c43;
|
||||
|
||||
.mx_streamSelectorDialog_stream_button:hover,
|
||||
.mx_streamSelectorDialog_stream_button:focus {
|
||||
background: $roomtile-selected-bg-color;
|
||||
}
|
||||
.desktop-capturer-selection-thumbnail {
|
||||
width: 100%;
|
||||
height: 81px;
|
||||
object-fit: cover;
|
||||
|
||||
.mx_streamSelectorDialog_stream_thumbnail {
|
||||
margin: 4px;
|
||||
width: 312px;
|
||||
}
|
||||
.desktop-capturer-selection-name {
|
||||
margin: 6px 0 6px;
|
||||
|
||||
.mx_streamSelectorDialog_stream_name {
|
||||
margin: 0 4px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
width: 312px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,19 @@ limitations under the License.
|
|||
import React from 'react';
|
||||
import { _td } from '../../../languageHandler';
|
||||
import BaseDialog from "..//dialogs/BaseDialog"
|
||||
import AccessibleButton from './AccessibleButton';
|
||||
|
||||
export enum Tabs {
|
||||
Screens = "screens",
|
||||
Windows = "windows",
|
||||
}
|
||||
export interface ElectronDesktopCapturerSource {
|
||||
display_id: string;
|
||||
id: string;
|
||||
name: string;
|
||||
thumbnail,
|
||||
appIcon,
|
||||
}
|
||||
export interface DesktopCapturerSourceIProps {
|
||||
source: ElectronDesktopCapturerSource,
|
||||
onSelect(source: ElectronDesktopCapturerSource): void,
|
||||
|
|
@ -36,30 +48,25 @@ export class DesktopCapturerSource extends React.Component<DesktopCapturerSource
|
|||
|
||||
render() {
|
||||
return (
|
||||
<button
|
||||
className="desktop-capturer-selection-button"
|
||||
<AccessibleButton
|
||||
className="mx_streamSelectorDialog_stream_button"
|
||||
data-id={this.props.source.id}
|
||||
title={this.props.source.name}
|
||||
onClick={this.onClick} >
|
||||
<img
|
||||
className="desktop-capturer-selection-thumbnail"
|
||||
className="mx_streamSelectorDialog_stream_thumbnail"
|
||||
src={this.props.source.thumbnail.toDataURL()}
|
||||
/>
|
||||
<span className="desktop-capturer-selection-name">{this.props.source.name}</span>
|
||||
</button>
|
||||
<span className="mx_streamSelectorDialog_stream_name">{this.props.source.name}</span>
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export interface ElectronDesktopCapturerSource {
|
||||
display_id: string;
|
||||
id: string;
|
||||
name: string;
|
||||
thumbnail,
|
||||
appIcon,
|
||||
|
||||
export interface DesktopCapturerSourcePickerIState {
|
||||
selectedTab: Tabs;
|
||||
}
|
||||
|
||||
|
||||
export interface DesktopCapturerSourcePickerIProps {
|
||||
sources: Array<ElectronDesktopCapturerSource>;
|
||||
onFinished(source: ElectronDesktopCapturerSource): void,
|
||||
|
|
@ -67,41 +74,80 @@ export interface DesktopCapturerSourcePickerIProps {
|
|||
|
||||
// TODO: Figure out a way to update sources for live preview
|
||||
|
||||
export default class DesktopCapturerSourcePicker extends React.Component<DesktopCapturerSourcePickerIProps> {
|
||||
export default class DesktopCapturerSourcePicker extends React.Component<
|
||||
DesktopCapturerSourcePickerIProps,
|
||||
DesktopCapturerSourcePickerIState
|
||||
> {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
selectedTab: Tabs.Screens,
|
||||
}
|
||||
}
|
||||
|
||||
onSelect = (source) => {
|
||||
this.props.onFinished(source);
|
||||
}
|
||||
|
||||
render() {
|
||||
const screens = this.props.sources
|
||||
.filter((source) => {
|
||||
return source.id.startsWith("screen");
|
||||
})
|
||||
.map((source) => {
|
||||
return <DesktopCapturerSource source={source} onSelect={this.onSelect} key={source.id} />;
|
||||
});
|
||||
onScreensClick = (ev) => {
|
||||
this.setState({selectedTab: Tabs.Screens});
|
||||
}
|
||||
|
||||
const windows = this.props.sources
|
||||
.filter((source) => {
|
||||
return source.id.startsWith("window");
|
||||
})
|
||||
.map((source) => {
|
||||
return <DesktopCapturerSource source={source} onSelect={this.onSelect} key={source.id} />;
|
||||
});
|
||||
onWindowsClick = (ev) => {
|
||||
this.setState({selectedTab: Tabs.Windows});
|
||||
}
|
||||
|
||||
onCloseClick = (ev) => {
|
||||
this.props.onFinished(null);
|
||||
}
|
||||
|
||||
render() {
|
||||
let sources;
|
||||
if (this.state.selectedTab === Tabs.Screens) {
|
||||
sources = this.props.sources
|
||||
.filter((source) => {
|
||||
return source.id.startsWith("screen");
|
||||
})
|
||||
.map((source) => {
|
||||
return <DesktopCapturerSource source={source} onSelect={this.onSelect} key={source.id} />;
|
||||
});
|
||||
} else {
|
||||
sources = this.props.sources
|
||||
.filter((source) => {
|
||||
return source.id.startsWith("window");
|
||||
})
|
||||
.map((source) => {
|
||||
return <DesktopCapturerSource source={source} onSelect={this.onSelect} key={source.id} />;
|
||||
});
|
||||
}
|
||||
const buttonStyle = "mx_streamSelectorDialog_tabLabel";
|
||||
const screensButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Screens) ? "_selected" : "");
|
||||
const windowsButtonStyle = buttonStyle + ((this.state.selectedTab === Tabs.Windows) ? "_selected" : "");
|
||||
console.log(screensButtonStyle, windowsButtonStyle);
|
||||
|
||||
return (
|
||||
<BaseDialog className="mx_streamSelectorDialog">
|
||||
<h1>{_td("Screens")}</h1>
|
||||
<div className="desktop-capturer-selection-scroller">
|
||||
{ screens }
|
||||
<BaseDialog
|
||||
className="mx_streamSelectorDialog"
|
||||
onFinished={this.onCloseClick}
|
||||
title={_td("Share your screen")}
|
||||
>
|
||||
<div className="mx_streamSelectorDialog_tabLabels">
|
||||
<AccessibleButton
|
||||
className={screensButtonStyle}
|
||||
onClick={this.onScreensClick}
|
||||
>
|
||||
{_td("Screens")}
|
||||
</AccessibleButton>
|
||||
<AccessibleButton
|
||||
className={windowsButtonStyle}
|
||||
onClick={this.onWindowsClick}
|
||||
>
|
||||
{_td("Windows")}
|
||||
</AccessibleButton>
|
||||
</div>
|
||||
<h1>{_td("Windows")}</h1>
|
||||
<div className="desktop-capturer-selection-scroller">
|
||||
{ windows }
|
||||
<div className="mx_streamSelectorDialog_panel">
|
||||
{ sources }
|
||||
</div>
|
||||
</BaseDialog>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue