From e019e418b41b1fc5da259fcd6e3e550fc9eba82a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kr=C3=A6n=20Hansen?= Date: Wed, 13 Sep 2017 16:08:03 +0200 Subject: [PATCH] UX improvements (#97) * Making the greeting panel links visible This fixes #86 * Ensuring that a realm wont be opened twice * Default server url and username * Making links open in the external browser * Fixing the sidebar width This fixes #96 --- src/actions.ts | 11 +++++++++-- src/main/application.ts | 15 +++++++++------ src/main/window-manager.ts | 8 +++++++- src/ui/connect-to-server/ConnectToServer.tsx | 2 +- .../ConnectToServerContainer.tsx | 17 ++++++++++++++--- .../UsernamePasswordForm.tsx | 2 +- src/ui/greeting/Greeting.scss | 4 ++++ src/ui/greeting/HistoryPanel.tsx | 5 ++--- src/ui/realm-browser/RealmBrowser.scss | 4 ++-- .../ServerAdministration.tsx | 4 +++- .../ServerAdministrationContainer.tsx | 19 +++++++++++++------ 11 files changed, 65 insertions(+), 26 deletions(-) diff --git a/src/actions.ts b/src/actions.ts index fd28b9b22..6191de58a 100644 --- a/src/actions.ts +++ b/src/actions.ts @@ -28,8 +28,15 @@ export const showOpenLocalRealm = (options?: void) => { ipcRenderer.sendSync(Actions.ShowOpenLocalRealm, options); }; -export const showRealmBrowser = (options: IRealmBrowserOptions) => { - ipcRenderer.sendSync(Actions.ShowRealmBrowser, options); +export const showRealmBrowser = async (options: IRealmBrowserOptions) => { + return new Promise((resolve, reject) => { + const success = ipcRenderer.sendSync(Actions.ShowRealmBrowser, options); + if (success) { + resolve(); + } else { + reject(); + } + }); }; export const showServerAdministration = (options: IServerAdministrationOptions) => { diff --git a/src/main/application.ts b/src/main/application.ts index ed6129e1a..3208366c6 100644 --- a/src/main/application.ts +++ b/src/main/application.ts @@ -31,8 +31,8 @@ export default class Application { this.showOpenLocalRealm(); event.returnValue = true; }, - [Actions.ShowRealmBrowser]: (event, ...args) => { - this.showRealmBrowser(args[0] as IRealmBrowserOptions); + [Actions.ShowRealmBrowser]: async (event, ...args) => { + await this.showRealmBrowser(args[0] as IRealmBrowserOptions); event.returnValue = true; }, [Actions.ShowServerAdministration]: (event, ...args) => { @@ -92,10 +92,13 @@ export default class Application { }); } - public showRealmBrowser(options: IRealmBrowserOptions) { - const window = this.windowManager.createWindow(WindowType.RealmBrowser, options); - window.once("ready-to-show", () => { - window.show(); + public async showRealmBrowser(options: IRealmBrowserOptions) { + return new Promise((resolve) => { + const window = this.windowManager.createWindow(WindowType.RealmBrowser, options); + window.once("ready-to-show", () => { + window.show(); + resolve(); + }); }); } diff --git a/src/main/window-manager.ts b/src/main/window-manager.ts index 90541225f..b5fd2d65b 100644 --- a/src/main/window-manager.ts +++ b/src/main/window-manager.ts @@ -1,4 +1,4 @@ -import { BrowserWindow, screen } from "electron"; +import { BrowserWindow, screen, shell } from "electron"; import * as path from "path"; import * as url from "url"; @@ -58,6 +58,12 @@ export default class WindowManager { event.preventDefault(); }); + // Open all links in the external browser + window.webContents.on("new-window", (event, openedUrl: string) => { + event.preventDefault(); + shell.openExternal(openedUrl); + }); + window.on("closed", () => { const index = this.windows.indexOf(window); if (index > -1) { diff --git a/src/ui/connect-to-server/ConnectToServer.tsx b/src/ui/connect-to-server/ConnectToServer.tsx index 20b94bab6..cdffb3dbf 100644 --- a/src/ui/connect-to-server/ConnectToServer.tsx +++ b/src/ui/connect-to-server/ConnectToServer.tsx @@ -43,7 +43,7 @@ export const ConnectToServer = ({
-
diff --git a/src/ui/connect-to-server/ConnectToServerContainer.tsx b/src/ui/connect-to-server/ConnectToServerContainer.tsx index a8240644e..65a031f13 100644 --- a/src/ui/connect-to-server/ConnectToServerContainer.tsx +++ b/src/ui/connect-to-server/ConnectToServerContainer.tsx @@ -41,6 +41,7 @@ export class ConnectToServerContainer extends React.Component<{}, { const { url, username, password, token } = this.state; const preparedUrl = this.prepareUrl(url); + const preparedUsername = this.prepareUsername(username); this.setState({ isConnecting: true, @@ -54,7 +55,7 @@ export class ConnectToServerContainer extends React.Component<{}, { }, }); } else { - Realm.Sync.User.login(preparedUrl, username, password, (err, user) => { + Realm.Sync.User.login(preparedUrl, preparedUsername, password, (err, user) => { this.setState({ isConnecting: false, }); @@ -68,7 +69,7 @@ export class ConnectToServerContainer extends React.Component<{}, { showServerAdministration({ url: user.server, credentials: { - username, + username: preparedUsername, password, }, }); @@ -110,10 +111,20 @@ export class ConnectToServerContainer extends React.Component<{}, { } private prepareUrl(url: string) { - if (url.indexOf("http") !== 0) { + if (url === "") { + return "http://localhost:9080"; + } else if (url.indexOf("http") !== 0) { return `http://${url}`; } else { return url; } } + + private prepareUsername(username: string) { + if (username === "") { + return "realm-admin"; + } else { + return username; + } + } } diff --git a/src/ui/connect-to-server/UsernamePasswordForm.tsx b/src/ui/connect-to-server/UsernamePasswordForm.tsx index 4c9790ef8..b66b02c4b 100644 --- a/src/ui/connect-to-server/UsernamePasswordForm.tsx +++ b/src/ui/connect-to-server/UsernamePasswordForm.tsx @@ -18,7 +18,7 @@ export const UsernamePasswordForm = ({ }) => (
- diff --git a/src/ui/greeting/Greeting.scss b/src/ui/greeting/Greeting.scss index 39bc992a9..f92bcf79c 100644 --- a/src/ui/greeting/Greeting.scss +++ b/src/ui/greeting/Greeting.scss @@ -79,6 +79,10 @@ $history-panel-icon-size: 20px; justify-content: center; padding: $spacer / 2; user-select: none; + + a { + text-decoration: underline; + } } } diff --git a/src/ui/greeting/HistoryPanel.tsx b/src/ui/greeting/HistoryPanel.tsx index 369cb7fe5..1080c6c78 100644 --- a/src/ui/greeting/HistoryPanel.tsx +++ b/src/ui/greeting/HistoryPanel.tsx @@ -56,9 +56,8 @@ export const HistoryPanel = ({

Welcome to Realm Studio!

- Download and start the  - - Realm Object Server + + Download and start the Realm Object Server , if you have not already done that.

diff --git a/src/ui/realm-browser/RealmBrowser.scss b/src/ui/realm-browser/RealmBrowser.scss index 22e377c1b..f29a56ab4 100644 --- a/src/ui/realm-browser/RealmBrowser.scss +++ b/src/ui/realm-browser/RealmBrowser.scss @@ -9,8 +9,8 @@ $realm-browser-header-handle-width: 8px; &__Sidebar { background: $window-background; + flex: 0 2 200px; padding: $spacer / 2; - width: 30%; &__Header { border-bottom: 1px solid $color-dove; @@ -58,7 +58,7 @@ $realm-browser-header-handle-width: 8px; } &__Content { - width: 70%; + flex: 1 1 0; &__HeaderCell, &__Cell { diff --git a/src/ui/server-administration/ServerAdministration.tsx b/src/ui/server-administration/ServerAdministration.tsx index 7ab92efff..ad2e019ff 100644 --- a/src/ui/server-administration/ServerAdministration.tsx +++ b/src/ui/server-administration/ServerAdministration.tsx @@ -21,11 +21,13 @@ export enum Tab { export const ServerAdministration = ({ activeTab, + isRealmOpening, onRealmOpened, onTabChanged, user, }: { activeTab: Tab, + isRealmOpening: boolean, onRealmOpened: (path: string) => void, onTabChanged: (tab: Tab) => void, user: Realm.Sync.User | null, @@ -79,7 +81,7 @@ export const ServerAdministration = ({
{content}
- +
); }; diff --git a/src/ui/server-administration/ServerAdministrationContainer.tsx b/src/ui/server-administration/ServerAdministrationContainer.tsx index 2b8f81696..6c2330e92 100644 --- a/src/ui/server-administration/ServerAdministrationContainer.tsx +++ b/src/ui/server-administration/ServerAdministrationContainer.tsx @@ -16,6 +16,7 @@ import { ServerAdministration, Tab } from "./ServerAdministration"; export class ServerAdministrationContainer extends React.Component { @@ -23,6 +24,7 @@ export class ServerAdministrationContainer extends React.Component { - showRealmBrowser({ - mode: RealmBrowserMode.Synced, - serverUrl: this.props.url, - path, - credentials: this.props.credentials, - } as ISyncedRealmBrowserOptions); + if (!this.state.isRealmOpening) { + this.setState({ isRealmOpening: true }); + // Let the UI update before sync waiting on the window to appear + showRealmBrowser({ + mode: RealmBrowserMode.Synced, + serverUrl: this.props.url, + path, + credentials: this.props.credentials, + } as ISyncedRealmBrowserOptions); + this.setState({ isRealmOpening: false }); + } } public onTabChanged = (tab: Tab) => {