Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-09-14 10:35:11 +00:00
Code Issues Releases Activity

move docs toggle to settings

Browse Source
This commit is contained in:
David Lechner
2021-01-14 10:55:00 -06:00
parent b6bda26484
commit b15b2e1dea
16 changed files with 93 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/App.tsx
+1 -1
View File
@@ -14,7 +14,7 @@ import Toolbar from './Toolbar';
import 'react-splitter-layout/lib/index.css';
function App(): JSX.Element {
const showDocs = useSelector((s: RootState): boolean => s.app.showDocs);
const showDocs = useSelector((s: RootState): boolean => s.settings.showDocs);
const [dragging, setDragging] = useState(false);
return (
src/components/DocsButton.tsx
-33
View File
@@ -1,33 +0,0 @@
// SPDX-License-Identifier: MIT
// Copyright (c) 2020 The Pybricks Authors
// File: components/DocsButton.ts
// Toolbar button for toggling documentation.
import { connect } from 'react-redux';
import { Action, Dispatch } from '../actions';
import { toggleDocs } from '../actions/app';
import ActionButton, { ActionButtonProps } from './ActionButton';
import { TooltipId } from './button-i18n';
import docsIcon from './images/question-mark.svg';
type StateProps = undefined;
type DispatchProps = Pick<ActionButtonProps, 'onAction'>;
type OwnProps = Pick<ActionButtonProps, 'id'> &
Pick<ActionButtonProps, 'keyboardShortcut'>;
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
onAction: (): Action => dispatch(toggleDocs()),
});
const mergeProps = (
_stateProps: StateProps,
dispatchProps: DispatchProps,
ownProps: OwnProps,
): ActionButtonProps => ({
tooltip: TooltipId.Docs,
icon: docsIcon,
...ownProps,
...dispatchProps,
});
export default connect(undefined, mapDispatchToProps, mergeProps)(ActionButton);
src/components/SettingsDrawer.tsx
+23 -2
View File
@@ -7,7 +7,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { Action, Dispatch } from '../actions';
import { closeSettings } from '../actions/app';
import { toggleDarkMode } from '../actions/settings';
import { toggleDarkMode, toggleDocs } from '../actions/settings';
import { RootState } from '../reducers';
import { SettingsStringId } from './settings-i18n';
import en from './settings-i18n.en.json';
@@ -16,11 +16,13 @@ import './settings.scss';
type StateProps = {
open: boolean;
showDocs: boolean;
darkMode: boolean;
};
type DispatchProps = {
onClose: () => void;
onShowDocsChanged: () => void;
onDarkModeChanged: () => void;
};
@@ -28,16 +30,33 @@ type SettingsProps = StateProps & DispatchProps & WithI18nProps;
class SettingsDrawer extends React.PureComponent<SettingsProps> {
render(): JSX.Element {
const { i18n, open, onClose, darkMode, onDarkModeChanged } = this.props;
const {
i18n,
open,
onClose,
showDocs,
onShowDocsChanged,
darkMode,
onDarkModeChanged,
} = this.props;
return (
<Drawer
isOpen={open}
icon="cog"
size={Drawer.SIZE_SMALL}
title={i18n.translate(SettingsStringId.Title)}
onClose={() => onClose()}
>
<div className="pb-settings">
<FormGroup label={i18n.translate(SettingsStringId.AppearanceTitle)}>
<Switch
label={i18n.translate(
SettingsStringId.AppearanceDocumentationLabel,
)}
large={true}
checked={showDocs}
onChange={() => onShowDocsChanged()}
/>
<Switch
label={i18n.translate(
SettingsStringId.AppearanceDarkModeLabel,
@@ -55,11 +74,13 @@ class SettingsDrawer extends React.PureComponent<SettingsProps> {
const mapStateToProps = (state: RootState): StateProps => ({
open: state.app.showSettings,
showDocs: state.settings.showDocs,
darkMode: state.settings.darkMode,
});
const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
onClose: (): Action => dispatch(closeSettings()),
onShowDocsChanged: (): Action => dispatch(toggleDocs()),
onDarkModeChanged: (): Action => dispatch(toggleDarkMode()),
});
src/components/Toolbar.tsx
-2
View File
@@ -4,7 +4,6 @@
import { Alignment, ButtonGroup, Navbar } from '@blueprintjs/core';
import React from 'react';
import BluetoothButton from './BluetoothButton';
import DocsButton from './DocsButton';
import FlashButton from './FlashButton';
import OpenButton from './OpenButton';
import ReplButton from './ReplButton';
@@ -40,7 +39,6 @@ class Toolbar extends React.Component {
<Navbar.Group align={Alignment.RIGHT}>
<ButtonGroup>
<SettingsButton id="settings" />
<DocsButton id="docs" />
</ButtonGroup>
</Navbar.Group>
</Navbar>
src/components/button-i18n.en.json
+1 -2
View File
@@ -9,6 +9,5 @@
"disconnect": { "tooltip": "Disconnect Bluetooth" }
},
"flash": { "tooltip": "Flash hub firmware" },
"docs": { "tooltip": "Show/hide documentation" },
"settings": { "tooltip": "Open setting" }
"settings": { "tooltip": "Settings" }
}
src/components/button-i18n.ts
-1
View File
@@ -12,6 +12,5 @@ export enum TooltipId {
Flash = 'flash.tooltip',
BluetoothConnect = 'bluetooth.connect.tooltip',
BluetoothDisconnect = 'bluetooth.disconnect.tooltip',
Docs = 'docs.tooltip',
Settings = 'settings.tooltip',
}
src/components/images/question-mark.svg
-145
View File
@@ -1,145 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
width="50"
height="50"
viewBox="0 0 50.000001 50.000001"
xml:space="preserve"
sodipodi:docname="question-mark.svg"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"><metadata
id="metadata43"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title><cc:license
rdf:resource="http://creativecommons.org/publicdomain/zero/1.0/" /><dc:source>https://www.svgrepo.com/svg/131030/question-mark</dc:source></cc:Work><cc:License
rdf:about="http://creativecommons.org/publicdomain/zero/1.0/"><cc:permits
rdf:resource="http://creativecommons.org/ns#Reproduction" /><cc:permits
rdf:resource="http://creativecommons.org/ns#Distribution" /><cc:permits
rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /></cc:License></rdf:RDF></metadata><defs
id="defs41" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="2560"
inkscape:window-height="1376"
id="namedview39"
showgrid="false"
inkscape:pagecheckerboard="true"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="3.8803824"
inkscape:cx="21.870149"
inkscape:cy="16.167941"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="Capa_1" />
<g
id="g6"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,4.9999645,5.0000021)">
<path
d="m 502.29,788.199 h -47 c -33.1,0 -60,26.9 -60,60 v 64.9 c 0,33.1 26.9,60 60,60 h 47 c 33.101,0 60,-26.9 60,-60 v -64.9 c 0,-33.199 -26.899,-60 -60,-60 z"
id="path2"
inkscape:connector-curvature="0"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m 170.89,285.8 86.7,10.8 c 27.5,3.4 53.6,-12.4 63.5,-38.3 12.5,-32.7 29.9,-58.5 52.2,-77.3 31.601,-26.6 70.9,-40 117.9,-40 48.7,0 87.5,12.8 116.3,38.3 28.8,25.6 43.1,56.2 43.1,92.1 0,25.8 -8.1,49.4 -24.3,70.8 -10.5,13.6 -42.8,42.2 -96.7,85.9 -54,43.7 -89.899,83.099 -107.899,118.099 -18.4,35.801 -24.8,75.5 -26.4,115.301 -1.399,34.1 25.8,62.5 60,62.5 h 49 c 31.2,0 57,-23.9 59.8,-54.9 2,-22.299 5.7,-39.199 11.301,-50.699 9.399,-19.701 33.699,-45.701 72.699,-78.1 C 723.59,477.8 772.79,428.4 795.891,392 c 23,-36.3 34.6,-74.8 34.6,-115.5 0,-73.5 -31.3,-138 -94,-193.4 -62.6,-55.4 -147,-83.1 -253,-83.1 -100.8,0 -182.1,27.3 -244.1,82 -52.8,46.6 -84.9,101.8 -96.2,165.5 -3.501,18.6 9.199,36 27.699,38.3 z"
id="path4"
inkscape:connector-curvature="0"
style="fill:#ffffff;fill-opacity:1" />
</g>
<g
id="g8"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g10"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g12"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g14"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g16"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g18"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g20"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g22"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g24"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g26"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g28"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g30"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g32"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g34"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
<g
id="g36"
style="fill:#ffffff;fill-opacity:1"
transform="matrix(0.04110579,0,0,0.04110579,-0.86208638,5.0000021)">
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 5.2 KiB

src/components/settings-i18n.en.json
+3
View File
@@ -3,6 +3,9 @@
"title": "Settings",
"appearance": {
"title": "Appearance",
"documentation": {
"label": "Documentation"
},
"dark-mode": {
"label": "Dark mode"
}
src/components/settings-i18n.ts
+1
View File
@@ -6,5 +6,6 @@
export enum SettingsStringId {
Title = 'settings.title',
AppearanceTitle = 'settings.appearance.title',
AppearanceDocumentationLabel = 'settings.appearance.documentation.label',
AppearanceDarkModeLabel = 'settings.appearance.dark-mode.label',
}