This commit is contained in:
Eric van der Vlist 2023-01-08 20:04:08 +01:00
parent f9a44b3b70
commit a2149f9a43
6 changed files with 32 additions and 12 deletions

View File

@ -21,7 +21,10 @@ const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
<Tree <Tree
title={ title={
<> <>
<GpxIcon /> {title()} <span>
{' '}
<GpxIcon /> {title()}
</span>
</> </>
} }
content={undefined} content={undefined}

View File

@ -29,7 +29,9 @@ const RteViewer: Component<Props> = ({ rteId }) => {
<Tree <Tree
title={ title={
<> <>
<RteIcon fill='black' width='24' height='24' /> {title()} <span>
<RteIcon fill='black' width='24' height='24' /> {title()}
</span>
</> </>
} }
content={ content={

View File

@ -0,0 +1,12 @@
.title {
background-color: rgba(14, 116, 144, 0.7);
color: white;
justify-content: space-between;
display: flex;
padding: 8px;
border-radius: 8px;
}
.title > div {
display: inline-block;
}

View File

@ -1,6 +1,7 @@
import { Paper, Stack } from '@suid/material'; import { Paper, Stack } from '@suid/material';
import styled from '@suid/material/styles/styled'; import styled from '@suid/material/styles/styled';
import { Component, JSXElement, Show } from 'solid-js'; import { Component, JSXElement, Show } from 'solid-js';
import style from './Tree.module.css';
interface Props { interface Props {
title: string | JSXElement; title: string | JSXElement;
@ -24,7 +25,7 @@ const Tree: Component<Props> = ({ title, content, subTree }) => {
sx={{ width: 'calc(100% - 5px)' }} sx={{ width: 'calc(100% - 5px)' }}
> >
<Item sx={{ width: 'calc(100% - 1px)' }}> <Item sx={{ width: 'calc(100% - 1px)' }}>
<div>{title}</div> <div class={style.title}>{title}</div>
<Show when={content !== undefined}> <Show when={content !== undefined}>
<div>{content}</div> <div>{content}</div>
</Show> </Show>

View File

@ -1,9 +1,8 @@
import { Component, For, from } from 'solid-js'; import { Component, For } from 'solid-js';
import { peekCachedSignal } from '../../workers/cached-signals'; import { peekCachedSignal } from '../../workers/cached-signals';
import Tree from '../tree'; import Tree from '../tree';
import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid'; import TrkIcon from '../../icons/human-footprints-svgrepo-com.svg?component-solid';
import { TrksegViewer } from '../trkseg'; import { TrksegViewer } from '../trkseg';
import { findAddress } from '../../lib/osm';
interface Props { interface Props {
trkId: string; trkId: string;
@ -21,14 +20,15 @@ const TrkViewer: Component<Props> = ({ trkId, restrictToHierarchy }) => {
<Tree <Tree
title={ title={
<> <>
<TrkIcon width='24' height='24' /> {title()} <div>
<span>
<TrkIcon fill='white' width='24' height='24' /> {title()}
</span>
</div>
<div>x</div>
</> </>
} }
content={ content={<div></div>}
<div>
</div>
}
subTree={ subTree={
<For <For
each={Object.keys(restrictToHierarchy).filter((key: string) => each={Object.keys(restrictToHierarchy).filter((key: string) =>

View File

@ -32,7 +32,9 @@ const TrksegViewer: Component<Props> = ({ trksegId }) => {
<Tree <Tree
title={ title={
<> <>
<TrkIcon fill='grey' width='16' height='16' /> {title()} <span>
<TrkIcon fill='white' width='16' height='16' /> {title()}
</span>
</> </>
} }
content={ content={