feat: custom tilebar on mac

This commit is contained in:
Sean Yesmunt 2019-10-09 12:34:18 -04:00
parent f1d2d0243b
commit f5bf2fae4f
7 changed files with 23 additions and 3 deletions

View file

@ -21,6 +21,7 @@ export default appState => {
minWidth: 950,
minHeight: 600,
autoHideMenuBar: true,
titleBarStyle: 'hiddenInset',
show: false,
// Create the window using the state information.
x: windowState.x,

View file

@ -1,6 +1,7 @@
// @flow
import * as ICONS from 'constants/icons';
import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import analytics from 'analytics';
import { buildURI, parseURI } from 'lbry-redux';
import Router from 'component/router/index';
@ -15,6 +16,7 @@ import usePrevious from 'effects/use-previous';
import Button from 'component/button';
export const MAIN_WRAPPER_CLASS = 'main-wrapper';
const IS_MAC = process.platform === 'darwin';
type Props = {
alertError: (string | {}) => void,
@ -120,7 +122,11 @@ function App(props: Props) {
}
return (
<div className={MAIN_WRAPPER_CLASS} ref={appRef} onContextMenu={e => openContextMenu(e)}>
<div
className={classnames(MAIN_WRAPPER_CLASS, { [`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC })}
ref={appRef}
onContextMenu={e => openContextMenu(e)}
>
<Router />
<ModalRouter />
<FileViewer pageUri={uri} />

View file

@ -12,6 +12,8 @@ import Icon from 'component/common/icon';
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import Tooltip from 'component/common/tooltip';
const IS_MAC = process.platform === 'darwin';
type Props = {
balance: string,
roundedBalance: number,
@ -62,7 +64,7 @@ const Header = (props: Props) => {
}
return (
<header className={classnames('header', { 'header--minimal': minimal })}>
<header className={classnames('header', { 'header--minimal': minimal, 'header--mac': IS_MAC })}>
<div className="header__contents">
<div className="header__navigation">
<Button

View file

@ -7,6 +7,8 @@
border-bottom: 1px solid $lbry-gray-1;
box-shadow: var(--card-box-shadow) $lbry-gray-1;
font-size: var(--font-body);
-webkit-user-select: none;
-webkit-app-region: drag;
[data-mode='dark'] & {
background-color: var(--dm-color-05);
@ -26,6 +28,10 @@
border-bottom: none;
}
.header--mac {
padding-top: var(--mac-titlebar-height);
}
.header__contents {
max-width: var(--page-max-width);
height: calc(var(--header-height) - 1px);

View file

@ -6,6 +6,10 @@
}
}
.main-wrapper--mac {
margin-top: calc(var(--header-height) + var(--mac-titlebar-height));
}
.main-wrapper__inner {
display: flex;
align-items: flex-start;

View file

@ -8,6 +8,7 @@ $large-breakpoint: 1921px;
:root {
// Width & spacing
--page-max-width: 1420px;
--mac-titlebar-height: 1.5rem;
--mobile: 600px;
--side-nav-width: 170px;
--spacing-miniscule: calc(2rem / 5);

View file

@ -804,4 +804,4 @@
"This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.": "This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.",
"(Only available on the desktop app.)": "(Only available on the desktop app.)",
"If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.": "If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page."
}
}