Improve UI

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

src/components/views/elements/DesktopCapturerSourcePicker.tsx

@@ -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>
         );