artin/sourcegraph
1
0
Fork 0
mirror of https://github.com/sourcegraph/sourcegraph.git synced 2026-02-06 18:51:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Show warning if browser doesn't support system theme (#2491)

Browse Source 
Closes #2490

Tells the user if their browser supports reacting to the system theme, while still supporting to state the system theme preference (for the near future) and not complicating the implementation. 

Also improves the style of the dropdown item.
This commit is contained in:
Felix Becker 2019-03-01 00:51:16 +01:00 committed by GitHub
parent 6e13d8ef3a
commit 7d2bfc0c2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/nav/NavLinks.scss
View File

@ -1,3 +1,5 @@
@import './UserNavItem.scss';
.nav-links {
position: relative; // For help form
white-space: nowrap;

5
web/src/nav/UserNavItem.scss Normal file
View File

@ -0,0 +1,5 @@
.user-nav-item {
&__dropdown-menu {
min-width: 12rem;
}
}

44
web/src/nav/UserNavItem.tsx
View File

@ -22,6 +22,8 @@ interface State {
* authenticated viewers.
*/
export class UserNavItem extends React.PureComponent<Props, State> {
private supportsSystemTheme = window.matchMedia('not all and (prefers-color-scheme), (prefers-color-scheme)')
.matches
public state: State = { isOpen: false }
public componentDidUpdate(prevProps: Props): void {
@ -45,7 +47,7 @@ export class UserNavItem extends React.PureComponent<Props, State> {
<strong>{this.props.authenticatedUser.username}</strong>
)}
</DropdownToggle>
<DropdownMenu right={true}>
<DropdownMenu right={true} className="user-nav-item__dropdown-menu">
<DropdownItem header={true} className="py-1">
Signed in as <strong>@{this.props.authenticatedUser.username}</strong>
</DropdownItem>
@ -85,18 +87,34 @@ export class UserNavItem extends React.PureComponent<Props, State> {
</>
)}
<DropdownItem divider={true} />
<div className="dropdown-item d-flex align-items-center">
<div className="mr-2">Theme</div>
{/* tslint:disable-next-line: jsx-ban-elements <Select> doesn't support small version */}
<select
className="custom-select custom-select-sm e2e-theme-toggle"
onChange={this.onThemeChange}
value={this.props.themePreference}
>
<option value={ThemePreference.Light}>Light</option>
<option value={ThemePreference.Dark}>Dark</option>
<option value={ThemePreference.System}>System</option>
</select>
<div className="px-2 py-1">
<div className="d-flex align-items-center">
<div className="mr-2">Theme</div>
{/* tslint:disable-next-line: jsx-ban-elements <Select> doesn't support small version */}
<select
className="custom-select custom-select-sm e2e-theme-toggle"
onChange={this.onThemeChange}
value={this.props.themePreference}
>
<option value={ThemePreference.Light}>Light</option>
<option value={ThemePreference.Dark}>Dark</option>
<option value={ThemePreference.System}>System</option>
</select>
</div>
{this.props.themePreference === ThemePreference.System && !this.supportsSystemTheme && (
<div className="text-wrap">
<small>
<a
href="https://caniuse.com/#feat=prefers-color-scheme"
className="text-warning"
target="_blank"
rel="noopener"
>
Your browser does not support the system theme.
</a>
</small>
</div>
)}
</div>
{this.props.authenticatedUser.session && this.props.authenticatedUser.session.canSignOut && (
<>