Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-12 09:36:27 +00:00
Code Issues Releases Activity

style: make use of more blueprint styles

Browse Source 
https://blueprintjs.com/docs/#core/typography

Also fix wrapping license text while we are touching this.
This commit is contained in:
David Lechner
2022-07-27 16:55:46 -05:00
parent e6609b9054
commit c84afea181
8 changed files with 54 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/alerts/UnexpectedErrorAlert.tsx
+9 -2
View File
@@ -2,7 +2,14 @@
// Copyright (c) 2022 The Pybricks Authors
import './UnexpectedErrorAlert.scss';
import { AnchorButton, Button, ButtonGroup, Collapse, Intent } from '@blueprintjs/core';
import {
AnchorButton,
Button,
ButtonGroup,
Collapse,
Intent,
Pre,
} from '@blueprintjs/core';
import React, { useState } from 'react';
import { useId } from 'react-aria';
import { CreateToast } from '../i18nToaster';
@@ -33,7 +40,7 @@ const UnexpectedErrorAlert: React.VoidFunctionComponent<UnexpectedErrorAlertProp
<span id={labelId}>{i18n.translate('technicalInfo')}</span>
</span>
<Collapse isOpen={isExpanded}>
<pre className="pb-alerts-stack-trace">{error.stack}</pre>
<Pre className="pb-alerts-stack-trace">{error.stack}</Pre>
</Collapse>
<div>
<ButtonGroup minimal={true} fill={true}>
src/ble/alerts/NoWebBluetooth.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
import { Button, Intent } from '@blueprintjs/core';
import { Button, Code, Intent } from '@blueprintjs/core';
import React from 'react';
import { CreateToast } from '../../i18nToaster';
import { isIOS, isLinux } from '../../utils/os';
@@ -19,9 +19,9 @@ const NoWebBluetooth: React.VoidFunctionComponent = () => {
<>
<p>{i18n.translate('noWebBluetooth.linux')}</p>
<p>
<code>
<Code>
chrome://flags/#enable-experimental-web-platform-features
</code>
</Code>
<Button
icon="duplicate"
small={true}
src/explorer/fileNameFormGroup/FileNameFormGroup.tsx
+7 -7
View File
@@ -1,7 +1,7 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2022 The Pybricks Authors
import { Classes, FormGroup, InputGroup, Intent, Tag } from '@blueprintjs/core';
import { Classes, Code, FormGroup, InputGroup, Intent, Tag } from '@blueprintjs/core';
import type { AriaButtonProps } from '@react-types/button';
import React, { useCallback, useRef } from 'react';
import { useButton } from 'react-aria';
@@ -108,8 +108,8 @@ const FileNameHelpText: React.VoidFunctionComponent<FileNameHelpTextProps> = ({
return (
<>
{i18n.translate('helpText.hasInvalidFirstCharacter', {
letters: <code className={Classes.CODE}>a…z</code>,
underscore: <code className={Classes.CODE}>_</code>,
letters: <Code className={Classes.CODE}>a…z</Code>,
underscore: <Code className={Classes.CODE}>_</Code>,
})}
</>
);
@@ -117,10 +117,10 @@ const FileNameHelpText: React.VoidFunctionComponent<FileNameHelpTextProps> = ({
return (
<>
{i18n.translate('helpText.hasInvalidCharacters', {
letters: <code className={Classes.CODE}>a…z</code>,
numbers: <code className={Classes.CODE}>0…9</code>,
dash: <code className={Classes.CODE}>-</code>,
underscore: <code className={Classes.CODE}>_</code>,
letters: <Code className={Classes.CODE}>a…z</Code>,
numbers: <Code className={Classes.CODE}>0…9</Code>,
dash: <Code className={Classes.CODE}>-</Code>,
underscore: <Code className={Classes.CODE}>_</Code>,
})}{' '}
<FixItButton onPress={handleHasInvalidCharacters} />
</>
src/firmware/installPybricksDialog/InstallPybricksDialog.tsx
+9 -7
View File
@@ -7,6 +7,7 @@ import {
Callout,
Checkbox,
Classes,
Code,
ControlGroup,
DialogStep,
FormGroup,
@@ -17,6 +18,7 @@ import {
MenuItem,
MultistepDialog,
NonIdealState,
Pre,
Spinner,
Switch,
} from '@blueprintjs/core';
@@ -69,12 +71,12 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
popoverClassName={Classes2.POPOVER2_CONTENT_SIZING}
placement="right-end"
content={
<div>
<h3>
<div className={Classes.RUNNING_TEXT}>
<h4>
{i18n.translate(
'selectHubPanel.notOnListButton.info.mindstorms.title',
)}
</h3>
</h4>
<ul>
<li>
{i18n.translate(
@@ -92,11 +94,11 @@ const SelectHubPanel: React.VoidFunctionComponent = () => {
)}
</li>
</ul>
<h3>
<h4>
{i18n.translate(
'selectHubPanel.notOnListButton.info.poweredUp.title',
)}
</h3>
</h4>
<ul>
<li>
{i18n.translate(
@@ -156,7 +158,7 @@ const AcceptLicensePanel: React.VoidFunctionComponent<AcceptLicensePanelProps> =
<div className={dialogBody}>
<div className="pb-firmware-installPybricksDialog-license-text">
{data ? (
<pre>{data.licenseText}</pre>
<Pre>{data.licenseText}</Pre>
) : (
<NonIdealState
icon={error ? 'error' : <Spinner />}
@@ -247,7 +249,7 @@ const ConfigureOptionsPanel: React.VoidFunctionComponent<SelectOptionsPanelProps
<Switch
labelElement={i18n.translate(
'optionsPanel.customMain.include.label',
{ main: <code>main.py</code> },
{ main: <Code>main.py</Code> },
)}
checked={includeProgram}
onChange={(e) =>
src/firmware/installPybricksDialog/installPybricksDialog.scss
+6
View File
@@ -23,6 +23,12 @@
& .#{bp.$ns}-non-ideal-state {
min-height: bp.$pt-grid-size * 35;
}
& pre {
white-space: pre-wrap;
word-break: keep-all;
margin: 0;
}
}
&-checkbox {
src/index.scss
+4
View File
@@ -136,6 +136,10 @@ a.#{bp.$ns}-button {
min-width: math.div(bp.$pt-grid-size, 2);
}
.#{bp.$ns}-running-text h4:first-child {
margin-top: 0;
}
// make scrollbars fit our style
::-webkit-scrollbar {
width: 16px;
src/licenses/LicenseDialog.tsx
+4 -3
View File
@@ -10,6 +10,7 @@ import {
Classes,
Dialog,
NonIdealState,
Pre,
Spinner,
Text,
} from '@blueprintjs/core';
@@ -190,7 +191,7 @@ const LicenseInfoPanel = React.forwardRef<HTMLDivElement, LicenseInfoPanelProps>
{i18n.translate('help.selectPackage')}
</NonIdealState>
) : (
<div>
<>
<Card>
<p>
<strong>{i18n.translate('packageLabel')}</strong>{' '}
@@ -211,9 +212,9 @@ const LicenseInfoPanel = React.forwardRef<HTMLDivElement, LicenseInfoPanelProps>
</p>
</Card>
<div className="pb-license-text">
<pre>{licenseInfo.licenseText}</pre>
<Pre>{licenseInfo.licenseText}</Pre>
</div>
</div>
</>
)}
</div>
);
src/licenses/license.scss
+12 -2
View File
@@ -50,9 +50,19 @@
.pb-license-info {
width: 80%;
padding: 0px 16px;
overflow: auto;
display: flex;
flex-direction: column;
gap: bp.$pt-grid-size;
}
.pb-license-text {
padding: 0px 16px;
overflow: auto;
min-height: 0;
& pre {
white-space: pre-wrap;
word-break: keep-all;
margin: 0;
}
}