feat: custom tilebar on mac
This commit is contained in:
parent
f1d2d0243b
commit
f5bf2fae4f
7 changed files with 23 additions and 3 deletions
|
@ -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,
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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."
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue