Michel2/pybricks-code
1
0
Fork 0
mirror of https://github.com/pybricks/pybricks-code.git synced 2026-07-28 04:08:05 +00:00
Code Issues Releases Activity

app: Generalize docs toggle style.

Browse Source 
Allow adding several views to be opened and closed. Also make it easily discoverable by making them the same color as the main buttons.
This commit is contained in:
Laurens Valk
2026-03-30 14:46:36 +02:00
parent 38a71238f9
commit da4c58608f
2 changed files with 26 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/App.tsx
+17 -16
View File
@@ -142,22 +142,23 @@ const App: React.FunctionComponent = () => {
>
<Editor />
</React.Suspense>
<Button
className="pb-app-doc-button"
minimal
large
icon={<Manual />}
title={
sideView === 'docs'
? i18n.translate('docs.hide')
: i18n.translate('docs.show')
}
onClick={() =>
setSideView(
sideView === 'docs' ? 'off' : 'docs',
)
}
/>
<div className="pb-app-side-view-buttons">
<Button
large
intent="primary"
icon={<Manual />}
title={
sideView === 'docs'
? i18n.translate('docs.hide')
: i18n.translate('docs.show')
}
onClick={() =>
setSideView(
sideView === 'docs' ? 'off' : 'docs',
)
}
/>
</div>
</main>
<aside
className="pb-app-terminal"
src/app/app.scss
+9 -1
View File
@@ -79,11 +79,19 @@
}
}
.pb-app-doc-button {
.pb-app-side-view-buttons {
position: absolute;
bottom: bp.$pt-grid-size;
right: bp.$pt-grid-size;
z-index: bp.$pt-z-index-overlay;
display: flex;
flex-direction: row;
gap: bp.$pt-grid-size * 0.5;
// match toolbar button appearance: no box-shadow border or active-state shadow
& * {
box-shadow: unset !important;
}
}
$splitter-background-color: bp.$light-gray2;