Skip to content

Commit

Permalink
Merge pull request #51 from ilyaagarkov/improve-logs-tab-markup
Browse files Browse the repository at this point in the history 
fix log/trace tabs layout
  • Loading branch information
@sergeysova
sergeysova authored Nov 15, 2022
2 parents 63458ee + 45127a4 commit dedcf8b
Show file tree
Hide file tree
Showing 5 changed files with 161 additions and 100 deletions.
10 changes: 7 additions & 3 deletions src/shared/ui/button/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {styled} from 'solid-styled-components';

export const Button = styled.button`
white-space: nowrap;
margin: 0;
margin-left: 1rem;
padding: 0.2rem 0.4rem;
color: var(--primary-text);
Expand All @@ -24,10 +24,14 @@ export const Button = styled.button`
const playSymbol = String.fromCharCode(parseInt('25B6', 16));
const pauseSymbol = String.fromCharCode(parseInt('25A0', 16));

const SwitchButton = styled(Button)`
white-space: nowrap;
`;

export function RunButton(props: {onClick: () => void}) {
return <Button onClick={props.onClick}>{playSymbol} Run</Button>;
return <SwitchButton onClick={props.onClick}>{playSymbol} Run</SwitchButton>;
}

export function PauseButton(props: {onClick: () => void}) {
return <Button onClick={props.onClick}>{pauseSymbol} Pause</Button>;
return <SwitchButton onClick={props.onClick}>{pauseSymbol} Pause</SwitchButton>;
}
1 change: 0 additions & 1 deletion src/shared/ui/forms/checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,4 @@ const Label = styled.label`
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 0.5rem;
`;
37 changes: 37 additions & 0 deletions src/shared/ui/templates/template.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import {JSX} from 'solid-js';
import {styled} from 'solid-styled-components';

export function TabTemplate(props: {header: JSX.Element; content: JSX.Element}) {
return (
<TabTemplateRoot>
<Header>{props.header}</Header>
<Content>{props.content}</Content>
</TabTemplateRoot>
);
}

export const Header = styled.header`
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
width: fit-content;
min-width: 100%;
box-sizing: border-box;
background-color: var(--content-bg);
position: sticky;
top: 0;
`;

export const Content = styled.section`
flex: 1;
width: max-content;
`;

export const TabTemplateRoot = styled.div`
display: flex;
flex-direction: column;
position: relative;
`;
127 changes: 72 additions & 55 deletions src/tabs/log/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {styled} from 'solid-styled-components';
import {UnitContent} from '../../entities/units';
import {Button, PauseButton, RunButton} from '../../shared/ui/button';
import {Checkbox, Input} from '../../shared/ui/forms';
import {TabTemplate} from '../../shared/ui/templates/template';
import {ValueView} from '../../shared/ui/values';

import {
Expand All @@ -27,65 +28,81 @@ export function Logs() {
]);

return (
<>
<Panel>
Show:
<Checkbox
value={kinds().includes('event')}
onClick={() => toggleKind('event')}
label="Event"
/>
<Checkbox
value={kinds().includes('store')}
onClick={() => toggleKind('store')}
label="Store"
/>
<Checkbox
value={kinds().includes('effect')}
onClick={() => toggleKind('effect')}
label="Effect"
/>
Filter:
<Input value={filterText()} onInput={(e) => filterChanged(e.currentTarget.value)} />
<Button onClick={() => logCleared()}>Clear</Button>
<Show
when={!isLogEnabled()}
fallback={<PauseButton onClick={() => isLogEnabledToggle()} />}
>
<RunButton onClick={() => isLogEnabledToggle()} />
</Show>
</Panel>
<LogList>
<For each={logs()}>
{(log) => {
const textMatched = log.name.includes(filterText());
<TabTemplate
header={
<>
<PanelSection>
Show:
<Checkbox
value={kinds().includes('event')}
onClick={() => toggleKind('event')}
label="Event"
/>
<Checkbox
value={kinds().includes('store')}
onClick={() => toggleKind('store')}
label="Store"
/>
<Checkbox
value={kinds().includes('effect')}
onClick={() => toggleKind('effect')}
label="Effect"
/>
</PanelSection>
<PanelSection>
Filter:
<FilterInput
value={filterText()}
onInput={(e) => filterChanged(e.currentTarget.value)}
/>
</PanelSection>
<PanelSection>
<Button onClick={() => logCleared()}>Clear</Button>
<Show
when={!isLogEnabled()}
fallback={<PauseButton onClick={() => isLogEnabledToggle()} />}
>
<RunButton onClick={() => isLogEnabledToggle()} />
</Show>
</PanelSection>
</>
}
content={
<LogList>
<For each={logs()}>
{(log) => {
const textMatched = log.name.includes(filterText());

if (!textMatched) {
return null;
}
if (!textMatched) {
return null;
}

const time = log.datetime.toLocaleTimeString();
return (
<LogItem>
<LogTitle>{time} ▸</LogTitle>
<LogTitle>{log.kind}</LogTitle>
<LogTitle> «{log.name}» </LogTitle>
<UnitContent>
<ValueView value={log.payload} />
</UnitContent>
</LogItem>
);
}}
</For>
</LogList>
</>
const time = log.datetime.toLocaleTimeString();
return (
<LogItem>
<LogTitle>{time} ▸</LogTitle>
<LogTitle>{log.kind}</LogTitle>
<LogTitle> «{log.name}» </LogTitle>
<UnitContent>
<ValueView value={log.payload} />
</UnitContent>
</LogItem>
);
}}
</For>
</LogList>
}
/>
);
}

const Panel = styled.div`
const FilterInput = styled(Input)`
line-height: 1.5rem;
`;

const PanelSection = styled.div`
display: flex;
flex-shrink: 0;
padding: 1rem;
gap: 0.5rem;
`;

const LogTitle = styled.pre`
Expand All @@ -96,7 +113,7 @@ const LogTitle = styled.pre`
font-family: 'JetBrains Mono', hasklig, monofur, monospace;
`;

const LogItem = styled.div`
const LogItem = styled.li`
display: flex;
margin: 0 0;
padding: 6px 10px;
Expand All @@ -111,7 +128,7 @@ const LogList = styled.ul`
flex-grow: 1;
margin: 0 0;
padding: 0 0;
overflow-x: auto;
width: 100%;
list-style-type: none;
`;
86 changes: 45 additions & 41 deletions src/tabs/trace/view.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {styled} from 'solid-styled-components';

import {UnitContent} from '../../entities/units';
import {Button, PauseButton, RunButton} from '../../shared/ui/button';
import {TabTemplate} from '../../shared/ui/templates/template';
import {ValueView} from '../../shared/ui/values';
import {TraceEffectRun, TraceEventTrigger, TraceStoreChange} from '../../types.h';

Expand All @@ -13,45 +14,49 @@ export function Trace() {
const [isTraceEnabled, traces] = useUnit([$isTraceEnabled, $traces]);

return (
<>
<Actions>
<Button onClick={() => traceCleared()}>Clear</Button>
<Show
when={!isTraceEnabled()}
fallback={<PauseButton onClick={() => traceEnableToggled()} />}
>
<RunButton onClick={() => traceEnableToggled()} />
</Show>
</Actions>
<TraceList>
<For each={traces()}>
{(trace) => (
<>
<TraceTitle>
<ValueView value={new Date(trace.time)} />
</TraceTitle>
<For each={trace.traces}>
{(line) => (
<Node>
<Switch>
<Match when={line.type === 'event'}>
<TraceEvent trace={line as TraceEventTrigger} />
</Match>
<Match when={line.type === 'store'}>
<TraceStore trace={line as TraceStoreChange} />
</Match>
<Match when={line.type === 'effect'}>
<TraceEffect trace={line as TraceEffectRun} />
</Match>
</Switch>
</Node>
)}
</For>
</>
)}
</For>
</TraceList>
</>
<TabTemplate
header={
<Actions>
<Button onClick={() => traceCleared()}>Clear</Button>
<Show
when={!isTraceEnabled()}
fallback={<PauseButton onClick={() => traceEnableToggled()} />}
>
<RunButton onClick={() => traceEnableToggled()} />
</Show>
</Actions>
}
content={
<TraceList>
<For each={traces()}>
{(trace) => (
<>
<TraceTitle>
<ValueView value={new Date(trace.time)} />
</TraceTitle>
<For each={trace.traces}>
{(line) => (
<Node>
<Switch>
<Match when={line.type === 'event'}>
<TraceEvent trace={line as TraceEventTrigger} />
</Match>
<Match when={line.type === 'store'}>
<TraceStore trace={line as TraceStoreChange} />
</Match>
<Match when={line.type === 'effect'}>
<TraceEffect trace={line as TraceEffectRun} />
</Match>
</Switch>
</Node>
)}
</For>
</>
)}
</For>
</TraceList>
}
/>
);
}

Expand Down Expand Up @@ -108,8 +113,8 @@ function TraceEffect(props: {trace: TraceEffectRun}) {

const Actions = styled.div`
display: flex;
gap: 0.5rem;
flex-shrink: 0;
padding: 1rem;
`;

const TraceList = styled.ul`
Expand All @@ -118,7 +123,6 @@ const TraceList = styled.ul`
flex-grow: 1;
margin: 0 0;
padding: 0 0;
overflow-x: auto;
list-style-type: none;
`;
Expand Down

0 comments on commit dedcf8b

Please sign in to comment.