From 675ca58eef8e2032bf0937655de1cd760f9f7fed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sat, 26 Dec 2020 16:56:25 +0100 Subject: [PATCH] Improve UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/_components.scss | 1 + .../_DesktopCapturerSourcePicker.scss | 73 ++++++----- .../elements/DesktopCapturerSourcePicker.tsx | 118 ++++++++++++------ 3 files changed, 123 insertions(+), 69 deletions(-) diff --git a/res/css/_components.scss b/res/css/_components.scss index d8bc238db5..d2000b0e23 100644 --- a/res/css/_components.scss +++ b/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"; diff --git a/res/css/views/elements/_DesktopCapturerSourcePicker.scss b/res/css/views/elements/_DesktopCapturerSourcePicker.scss index c23fbdf6ac..9f2c23eb48 100644 --- a/res/css/views/elements/_DesktopCapturerSourcePicker.scss +++ b/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; - 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; } diff --git a/src/components/views/elements/DesktopCapturerSourcePicker.tsx b/src/components/views/elements/DesktopCapturerSourcePicker.tsx index a1d57884e1..399aec1e2c 100644 --- a/src/components/views/elements/DesktopCapturerSourcePicker.tsx +++ b/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 - {this.props.source.name} - + {this.props.source.name} + ); } } -export interface ElectronDesktopCapturerSource { - display_id: string; - id: string; - name: string; - thumbnail, - appIcon, + +export interface DesktopCapturerSourcePickerIState { + selectedTab: Tabs; } - - export interface DesktopCapturerSourcePickerIProps { sources: Array; 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 { +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 ; - }); + onScreensClick = (ev) => { + this.setState({selectedTab: Tabs.Screens}); + } - const windows = this.props.sources - .filter((source) => { - return source.id.startsWith("window"); - }) - .map((source) => { - return ; - }); + 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 ; + }); + } else { + sources = this.props.sources + .filter((source) => { + return source.id.startsWith("window"); + }) + .map((source) => { + return ; + }); + } + 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 ( - -

{_td("Screens")}

-
- { screens } + +
+ + {_td("Screens")} + + + {_td("Windows")} +
-

{_td("Windows")}

-
- { windows } +
+ { sources }
);