mirrors/TidGi-Desktop
1
Fork 0
mirror of https://github.com/tiddly-gittly/TidGi-Desktop.git synced 2026-04-28 00:00:52 -07:00
Code Issues Projects Releases Packages Wiki Activity

Improve address bar experience (#218)

Browse source
This commit is contained in:
Quang Lam 2020-04-27 22:10:18 +07:00 • committed by GitHub
parent b87608d619
commit f7434907c5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

5
public/libs/workspaces-views.js
View file

@ -108,7 +108,10 @@ const loadURL = (url, id) => {
}
const v = mainWindow.get().getBrowserView();
if (v) v.webContents.loadURL(url);
if (v) {
v.webContents.focus();
v.webContents.loadURL(url);
}
};
module.exports = {

129
src/components/main/navigation-bar.js
View file

@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
@ -99,66 +99,81 @@ const NavigationBar = ({
hasWorkspaces,
onUpdateAddressBarInfo,
shouldPauseNotifications,
}) => (
<div className={classNames(classes.root, hasTrafficLights && classes.rootWithTrafficLights)}>
<div className={classes.left}>
<IconButton aria-label="Go back" className={classes.iconButton} disabled={!hasWorkspaces || !canGoBack} onClick={requestGoBack}>
<ArrowBackIcon className={classes.icon} />
</IconButton>
<IconButton aria-label="Go forward" className={classes.iconButton} disabled={!hasWorkspaces || !canGoForward} onClick={requestGoForward}>
<ArrowForwardIcon className={classes.icon} />
</IconButton>
<IconButton aria-label="Reload" className={classes.iconButton} onClick={requestReload} disabled={!hasWorkspaces}>
<RefreshIcon className={classes.icon} />
</IconButton>
<IconButton aria-label="Go home" className={classes.iconButton} onClick={requestGoHome} disabled={!hasWorkspaces}>
<HomeIcon className={classes.icon} />
</IconButton>
</div>
<div className={classes.center}>
<InputBase
classes={{ root: classes.addressBarRoot, input: classes.addressBarInput }}
placeholder="Search Google or type a URL"
type="text"
value={hasWorkspaces ? address : ''}
disabled={!hasWorkspaces}
endAdornment={addressEdited && address && hasWorkspaces && (
<IconButton
aria-label="Go"
className={classes.goButton}
onClick={() => {
}) => {
const [addressInputClicked, setAddressInputClicked] = useState(false);
return (
<div className={classNames(classes.root, hasTrafficLights && classes.rootWithTrafficLights)}>
<div className={classes.left}>
<IconButton aria-label="Go back" className={classes.iconButton} disabled={!hasWorkspaces || !canGoBack} onClick={requestGoBack}>
<ArrowBackIcon className={classes.icon} />
</IconButton>
<IconButton aria-label="Go forward" className={classes.iconButton} disabled={!hasWorkspaces || !canGoForward} onClick={requestGoForward}>
<ArrowForwardIcon className={classes.icon} />
</IconButton>
<IconButton aria-label="Reload" className={classes.iconButton} onClick={requestReload} disabled={!hasWorkspaces}>
<RefreshIcon className={classes.icon} />
</IconButton>
<IconButton aria-label="Go home" className={classes.iconButton} onClick={requestGoHome} disabled={!hasWorkspaces}>
<HomeIcon className={classes.icon} />
</IconButton>
</div>
<div className={classes.center}>
<InputBase
classes={{ root: classes.addressBarRoot, input: classes.addressBarInput }}
placeholder="Search Google or type a URL"
type="text"
value={hasWorkspaces ? address : ''}
disabled={!hasWorkspaces}
endAdornment={addressEdited && address && hasWorkspaces && (
<IconButton
aria-label="Go"
className={classes.goButton}
onClick={() => {
const processedUrl = processUrl(address);
onUpdateAddressBarInfo(processedUrl, false);
requestLoadUrl(processedUrl);
}}
>
<ArrowForwardIcon fontSize="small" />
</IconButton>
)}
onChange={(e) => {
onUpdateAddressBarInfo(e.target.value, true);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
e.target.blur();
const processedUrl = processUrl(address);
onUpdateAddressBarInfo(processedUrl, false);
requestLoadUrl(processedUrl);
}}
>
<ArrowForwardIcon fontSize="small" />
</IconButton>
)}
onChange={(e) => {
onUpdateAddressBarInfo(e.target.value, true);
}}
onKeyDown={(e) => {
if (e.key === 'Enter') {
const processedUrl = processUrl(address);
onUpdateAddressBarInfo(processedUrl, false);
requestLoadUrl(processedUrl);
}
}}
/>
}
}}
// https://stackoverflow.com/a/16659291
onClick={(e) => {
if (!addressInputClicked) {
e.target.select();
setAddressInputClicked(true);
}
}}
onBlur={() => {
setAddressInputClicked(false);
}}
/>
</div>
<div>
<IconButton aria-label="Notifications" onClick={requestShowNotificationsWindow} className={classes.iconButton}>
{shouldPauseNotifications
? <NotificationsPausedIcon className={classes.icon} />
: <NotificationsIcon className={classes.icon} />}
</IconButton>
<IconButton aria-label="Preferences" className={classes.iconButton} onClick={() => requestShowPreferencesWindow()}>
<SettingsIcon className={classes.icon} />
</IconButton>
</div>
</div>
<div>
<IconButton aria-label="Notifications" onClick={requestShowNotificationsWindow} className={classes.iconButton}>
{shouldPauseNotifications
? <NotificationsPausedIcon className={classes.icon} />
: <NotificationsIcon className={classes.icon} />}
</IconButton>
<IconButton aria-label="Preferences" className={classes.iconButton} onClick={() => requestShowPreferencesWindow()}>
<SettingsIcon className={classes.icon} />
</IconButton>
</div>
</div>
);
);
};
NavigationBar.defaultProps = {
address: '',