Mirror/brk
1
0
Fork 0
mirror of https://github.com/bitcoinresearchkit/brk.git synced 2026-05-02 10:30:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

app: add mini window support

Browse Source
This commit is contained in:
k
2024-06-24 06:50:23 +02:00
parent e55b5195a9
commit 7604787fbb
7 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/src/app/components/frames/box.tsx
View File

@@ -10,12 +10,14 @@ export function Box({
children,
dark,
overflowY,
classes,
}: {
flex?: boolean;
absolute?: "top" | "bottom";
padded?: boolean;
dark?: boolean;
overflowY?: boolean;
classes?: string;
} & ParentProps) {
const maybeScrollable = createRWS<HTMLDivElement | undefined>(undefined);
const scrollable = createRWS(false);
@@ -58,6 +60,7 @@ export function Box({
: "pointer-events-none bottom-0 bg-gradient-to-b from-transparent to-black",
]
: "relative",
classes,
])}
>
<div

1
app/src/app/components/frames/chart/components/legend.tsx
View File

@@ -47,6 +47,7 @@ export function Legend({
hovering.set(legend);
}}
onMouseLeave={() => hovering.set(undefined)}
onTouchEnd={() => hovering.set(undefined)}
onClick={() => {
const currentClickValueOf = new Date().valueOf();

2
app/src/app/components/frames/chart/components/timeScale.tsx
View File

@@ -6,7 +6,7 @@ import { Box } from "../../box";
export function TimeScale() {
return (
<Box dark padded overflowY>
<Box dark padded overflowY classes="short:hidden">
<Button onClick={() => setTimeScale()}>All Time</Button>
<Button onClick={() => setTimeScale(7)}>1 Week</Button>
<Button onClick={() => setTimeScale(30)}>1 Month</Button>

2
app/src/app/components/frames/chart/index.tsx
View File

@@ -38,7 +38,7 @@ export function ChartFrame({
display: (hide ? !hide() : true) ? undefined : "none",
}}
>
<Box flex={false} dark>
<Box flex={false} dark classes="short:hidden">
<Title presets={presets} />
<div class="-mx-2 border-t border-orange-200/15" />

11
app/src/app/index.tsx
View File

@@ -6,7 +6,6 @@ import { chartState } from "../scripts/lightweightCharts/chart/state";
import { setTimeScale } from "../scripts/lightweightCharts/chart/time";
import { createPresets } from "../scripts/presets";
import { priceToUSLocale } from "../scripts/utils/locale";
import { run } from "../scripts/utils/run";
import { sleep } from "../scripts/utils/sleep";
import {
readBooleanFromStorage,
@@ -101,8 +100,6 @@ export function App() {
equals: false,
});
// Can't put datasets inside a signal as it breaks lazy memo
const datasets = createDatasets({
setActiveResources: activeResources.set,
});
@@ -193,12 +190,12 @@ export function App() {
<Qrcode qrcode={qrcode} />
<Update />
<div class="flex size-full flex-col md:flex-row md:p-3">
<div class="md:short:p-0 flex size-full flex-col md:flex-row md:p-3">
<Show when={!windowSizeIsAtLeastMedium() || !fullscreen()}>
<div
class={classPropToString([
env.standalone && "border-t",
"flex h-full flex-col overflow-hidden border-white/10 bg-gradient-to-b from-orange-500/10 to-orange-950/10 md:flex-row md:rounded-2xl md:border",
"md:short:hidden flex h-full flex-col overflow-hidden border-white/10 bg-gradient-to-b from-orange-500/10 to-orange-950/10 md:flex-row md:rounded-2xl md:border",
])}
>
<div class="hidden flex-col gap-2 border-r border-white/10 bg-black/30 p-3 backdrop-blur-sm md:flex">
@@ -246,7 +243,7 @@ export function App() {
<div
class={classPropToString([
env.standalone && "pb-6",
"flex justify-between gap-3 border-t border-white/10 bg-black/30 p-2 backdrop-blur-sm md:hidden",
"short:hidden flex justify-between gap-3 border-t border-white/10 bg-black/30 p-2 backdrop-blur-sm md:hidden",
])}
>
<StripMobile
@@ -259,7 +256,7 @@ export function App() {
<Show when={!fullscreen()}>
<div
class="mx-[3px] my-8 hidden w-[6px] cursor-col-resize items-center justify-center rounded-full bg-orange-100 opacity-0 hover:opacity-50 md:block"
class="short:hidden mx-[3px] my-8 hidden w-[6px] cursor-col-resize items-center justify-center rounded-full bg-orange-100 opacity-0 hover:opacity-50 md:block"
onMouseDown={(event) => {
resizeInitialRange.set(chartState.range);