diff --git a/.env b/.env index 0454adfc..60826396 100644 --- a/.env +++ b/.env @@ -1 +1,2 @@ +REACT_APP_NAME="Pybricks Code" REACT_APP_VERSION=$npm_package_version diff --git a/package.json b/package.json index 83c4b367..360d6703 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@pybricks/pybricks-code", - "version": "1.0.0-beta.5", + "version": "1.0.0-beta.6", "license": "MIT", "author": "The Pybricks Authors", "repository": { diff --git a/public/index.html b/public/index.html index d466af9b..1080111b 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Pybricks Code + %REACT_APP_NAME% diff --git a/public/logo192.png b/public/logo192.png index 3906c86a..c3cf1e0e 100644 Binary files a/public/logo192.png and b/public/logo192.png differ diff --git a/public/logo192m.png b/public/logo192m.png new file mode 100644 index 00000000..bb5af6bc Binary files /dev/null and b/public/logo192m.png differ diff --git a/public/manifest.json b/public/manifest.json index 2a9da332..68d5832f 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -10,7 +10,14 @@ { "src": "logo192.png", "type": "image/png", - "sizes": "192x192" + "sizes": "192x192", + "purpose": "any" + }, + { + "src": "logo192m.png", + "type": "image/png", + "sizes": "192x192", + "purpose": "maskable" }, { "src": "logo512.png", @@ -20,6 +27,7 @@ ], "start_url": ".", "display": "fullscreen", + "orientation": "landscape", "theme_color": "#000000", "background_color": "#ffffff" } diff --git a/src/about/AboutDialog.tsx b/src/about/AboutDialog.tsx index 8eab2970..cd880f1d 100644 --- a/src/about/AboutDialog.tsx +++ b/src/about/AboutDialog.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { appName, + appVersion, legoDisclaimer, pybricksCopyright, pybricksWebsiteUrl, @@ -20,8 +21,6 @@ import en from './i18n.en.json'; import './about.scss'; -const version = process.env.REACT_APP_VERSION; - type OwnProps = { isOpen: boolean; onClose: () => void }; type AboutDialogProps = OwnProps & WithI18nProps; @@ -35,7 +34,7 @@ class AboutDialog extends React.Component { const { isOpen, onClose, i18n } = this.props; return ( onClose()} > diff --git a/src/app/app.scss b/src/app/app.scss index b8f24411..ad0510f6 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -8,7 +8,7 @@ .pb-app-body { // height makes everything fit without scrolling height: calc( - var(--pb-vh, 100vh) - #{$pt-navbar-height} - #{$pb-status-bar-height} + var(--pb-vh, 100vh) - #{$pb-toolbar-height} - #{$pb-status-bar-height} ) !important; } diff --git a/src/app/constants.ts b/src/app/constants.ts index 148891f3..c0c849e4 100644 --- a/src/app/constants.ts +++ b/src/app/constants.ts @@ -7,7 +7,11 @@ export const tooltipDelay = 1000; /** Official name of the app. */ -export const appName = 'Pybricks Code'; +export const appName = process.env.REACT_APP_NAME || 'REACT_APP_NAME is undefined'; + +/** The version of the app (without the "v" prefix). */ +export const appVersion = + process.env.REACT_APP_VERSION || 'REACT_APP_VERSION is undefined'; /** URL to main Pybricks website. */ export const pybricksWebsiteUrl = 'https://pybricks.com'; diff --git a/src/index.tsx b/src/index.tsx index b1158128..778710fc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,6 +11,7 @@ import { createLogger } from 'redux-logger'; import createSagaMiddleware from 'redux-saga'; import './index.scss'; import App from './app/App'; +import { appVersion } from './app/constants'; import { i18nManager } from './i18n'; import * as I18nToaster from './notifications/I18nToaster'; import { rootReducer } from './reducers'; @@ -65,7 +66,7 @@ store.subscribe(() => { }); // special styling for beta versions -if (process.env.REACT_APP_VERSION?.match(/beta/)) { +if (appVersion.match(/beta/)) { document.body.classList.add('pb-beta'); } diff --git a/src/toolbar/Toolbar.tsx b/src/toolbar/Toolbar.tsx index 951538a6..20365166 100644 --- a/src/toolbar/Toolbar.tsx +++ b/src/toolbar/Toolbar.tsx @@ -1,7 +1,7 @@ // SPDX-License-Identifier: MIT // Copyright (c) 2020 The Pybricks Authors -import { Alignment, ButtonGroup, Navbar } from '@blueprintjs/core'; +import { ButtonGroup } from '@blueprintjs/core'; import React from 'react'; import OpenButton from '../editor/OpenButton'; import SaveAsButton from '../editor/SaveAsButton'; @@ -22,44 +22,35 @@ class Toolbar extends React.Component { render(): JSX.Element { return ( - e.preventDefault()} - className="no-box-shadow" + className="pb-toolbar no-box-shadow" > - - - - - - - - - - - - - - - - - - - - - this.setState({ settingsDrawerIsOpen: true }) - } - /> - - this.setState({ settingsDrawerIsOpen: false }) - } - /> - - - + + + + + + + + + + + + + + + this.setState({ settingsDrawerIsOpen: true })} + /> + this.setState({ settingsDrawerIsOpen: false })} + /> + + ); } } diff --git a/src/toolbar/toolbar.scss b/src/toolbar/toolbar.scss index 02a29f4a..7f2ae0e4 100644 --- a/src/toolbar/toolbar.scss +++ b/src/toolbar/toolbar.scss @@ -5,7 +5,31 @@ @import '../variables.scss'; -.#{$ns}-navbar-divider { - // don't draw vertical line since we are just using button groups - border-left: unset; +.#{$ns}-dark .pb-toolbar { + background-color: $pt-dark-app-background-color; +} + +.pb-toolbar { + height: $pb-toolbar-height; + background-color: $pt-app-background-color; + padding: 0 $pt-grid-size * 1.5; + position: relative; + width: 100%; + z-index: $pt-z-index-content; +} + +.pb-toolbar-group { + align-items: center; + display: flex; + height: $pb-toolbar-height; + + &.pb-align-left { + float: left; + margin-right: $pt-grid-size * 2; + } + + &.pb-align-right { + float: right; + margin-left: $pt-grid-size * 2; + } } diff --git a/src/variables.scss b/src/variables.scss index d94d51f5..b6b0f9da 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -10,13 +10,10 @@ $pt-font-size: $pt-grid-size * 1.6; $pt-font-size-large: $pt-grid-size * 1.8; $pt-font-size-small: $pt-grid-size * 1.4; -$pt-navbar-height: 72px; +$pb-toolbar-height: 72px; $pb-status-bar-height: 24px; $pb-pybricks-blue: #0088ce; $pt-app-background-color: #e8e8e8; $pt-intent-primary: $pb-pybricks-blue; $pt-outline-color: rgba($pb-pybricks-blue, 0.6); - -$navbar-background-color: $pt-app-background-color; -$dark-navbar-background-color: $pt-dark-app-background-color;