Improve UI

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

res/css/_components.scss

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

res/css/views/elements/_DesktopCapturerSourcePicker.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;
+    text-align: center;
-    overflow-y: auto;
+    border-radius: 8px;
+    padding: 8px 0;
+    border-radius: 8px;
+    font-size: $font-13px;
+    position: relative;
 }
-.desktop-capturer-selection-list {
+
-    max-width: calc(100% - 100px);
+.mx_streamSelectorDialog_tabLabel_selected {
-    margin: 0 50px 0 50px;
+    background-color: $tab-label-active-bg-color;
-    padding: 0;
+    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;
+.mx_streamSelectorDialog_stream_button {
-    margin: 4px;
-}
-.desktop-capturer-selection-button {
     display: flex;
     flex-direction: column;
-    align-items: stretch;
+    margin: 8px;
-    width: 145px;
-    margin: 0;
-    border: 0;
     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 {
+.mx_streamSelectorDialog_stream_button:hover,
-    background: #363c43;
+.mx_streamSelectorDialog_stream_button:focus {
+    background: $roomtile-selected-bg-color;
 }
-.desktop-capturer-selection-thumbnail {
+
-    width: 100%;
+.mx_streamSelectorDialog_stream_thumbnail {
-    height: 81px;
+    margin: 4px;
-    object-fit: cover;
+    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;
 }

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
+            <AccessibleButton
-                className="desktop-capturer-selection-button"
+                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>
+                <span className="mx_streamSelectorDialog_stream_name">{this.props.source.name}</span>
-            </button>
+            </AccessibleButton>
         );
     }
 }
 
-export interface ElectronDesktopCapturerSource {
+
-    display_id: string;
+export interface DesktopCapturerSourcePickerIState {
-    id: string;
+    selectedTab: Tabs;
-    name: string;
-    thumbnail,
-    appIcon,
 }
-
-
 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() {
+    onScreensClick = (ev) => {
-        const screens = this.props.sources
+        this.setState({selectedTab: Tabs.Screens});
-            .filter((source) => {
+    }
-                return source.id.startsWith("screen");
-            })
-            .map((source) => {
-                return <DesktopCapturerSource source={source} onSelect={this.onSelect} key={source.id} />;
-            });
 
-        const windows = this.props.sources
+    onWindowsClick = (ev) => {
-            .filter((source) => {
+        this.setState({selectedTab: Tabs.Windows});
-                return source.id.startsWith("window");
+    }
-            })
+
-            .map((source) => {
+    onCloseClick = (ev) => {
-                return <DesktopCapturerSource source={source} onSelect={this.onSelect} key={source.id} />;
+        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">
+            <BaseDialog
-                <h1>{_td("Screens")}</h1>
+                className="mx_streamSelectorDialog"
-                <div className="desktop-capturer-selection-scroller">
+                onFinished={this.onCloseClick}
-                    { screens }
+                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="mx_streamSelectorDialog_panel">
-                <div className="desktop-capturer-selection-scroller">
+                    { sources }
-                    { windows }
                 </div>
             </BaseDialog>
         );