Adding a GPX icon
This commit is contained in:
parent
d9c4837f82
commit
6b0b394d33
|
|
@ -5,6 +5,7 @@ import { Component, createSignal, Show } from 'solid-js';
|
|||
import dispatch from '../../workers/dispatcher-main';
|
||||
import Dialog from '../dialog';
|
||||
import GpxChooser from '../gpx-chooser';
|
||||
import GpxIcon from '../gpx/GpxIcon';
|
||||
//import GpxesIcon from '../../icons/adventure-journey-location-svgrepo-com.svg';
|
||||
import style from './GpxDialog.module.css';
|
||||
|
||||
|
|
@ -119,29 +120,7 @@ const GpxDialog: Component<{}> = (props) => {
|
|||
<>
|
||||
<div class={style.control}>
|
||||
<IconButton onClick={handleClickOpen}>
|
||||
<SvgIcon>
|
||||
<svg
|
||||
viewBox='0 0 170 170'
|
||||
width='64px'
|
||||
height='64px'
|
||||
version='1.1'
|
||||
style='stroke-width: 1%; stroke:black'
|
||||
xml:space='preserve'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
xmlns:xlink='http://www.w3.org/1999/xlink'
|
||||
>
|
||||
<g>
|
||||
<path d='M63.5,16c-0.3-0.2-0.7-0.3-1-0.1l-20.4,7.3l-14.3-5.2c0.8-2,1.2-3.8,1.2-5.3c0-2.7-1-5.1-2.9-7c-1.9-1.9-4.4-2.9-7-2.9 c-5.5,0-9.9,4.4-9.9,9.9c0,1.9,0.7,4.2,1.9,7L0.7,23.2c-0.4,0.2-0.7,0.6-0.7,1v36c0,0.4,0.2,0.7,0.5,0.9c0.2,0.1,0.4,0.2,0.6,0.2 c0.1,0,0.3,0,0.4-0.1L21.9,54l19.8,7.3c0.2,0.1,0.5,0.1,0.7,0l20.8-7.4c0.4-0.2,0.7-0.6,0.7-1v-36C64,16.5,63.8,16.2,63.5,16z M19.1,4.8c2.1,0,4,0.8,5.4,2.3c0,0,0,0,0,0c1.5,1.4,2.3,3.4,2.3,5.4c0,1.4-0.5,3.3-1.5,5.5c-1.8,4-4.8,8.2-6.2,10.1 c-0.2-0.2-0.3-0.4-0.5-0.7c-1.3-1.8-3.4-4.8-4.9-7.9c-1.5-2.9-2.2-5.3-2.2-7.1C11.4,8.3,14.9,4.8,19.1,4.8z M61.8,52.1l-19.7,7 l-19.8-7.3c-0.1,0-0.3-0.1-0.4-0.1c-0.1,0-0.3,0-0.4,0.1L2.2,58.7V25l10-3.5c0,0,0,0,0,0.1c0.1,0.1,0.1,0.2,0.2,0.3 c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.4,0.3,0.5 c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3 c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.2c0.1,0.2,0.2,0.3,0.3,0.4 c0,0.1,0.1,0.1,0.1,0.2c0.1,0.2,0.2,0.3,0.3,0.4c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0.1,0.1,0.1,0.1 c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0,0,0,0c0.1,0.1,0.2,0.2,0.3,0.3c0,0,0,0,0,0c0.2,0.3,0.4,0.5,0.4,0.6c0.2,0.3,0.5,0.4,0.9,0.4 c0.3,0,0.6-0.2,0.9-0.4c0,0,0.1-0.1,0.3-0.3c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0.1-0.1,0.2-0.2c0,0,0.1-0.1,0.1-0.1 c0.1-0.1,0.1-0.2,0.2-0.3c0-0.1,0.1-0.1,0.1-0.2c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.4 c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.4c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.1,0.2-0.3,0.3-0.4 c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.2,0.2-0.3,0.3-0.5 c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5 c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.2,0.2-0.3,0.2-0.5c0,0,0,0,0-0.1l14.8,5.4 c0.2,0.1,0.5,0.1,0.7,0l19.3-6.9V52.1z' />
|
||||
<path d='M52.5,42.4c0.2,0.1,0.5,0.1,0.7,0.1c0.6,0,1.2-0.2,1.7-0.5c0.7-0.5,1.2-1.2,1.4-2c0.2-0.8,0-1.7-0.4-2.4 c-0.5-0.7-1.2-1.2-2-1.4c-1.7-0.4-3.5,0.7-3.9,2.4v0c-0.2,0.8,0,1.7,0.4,2.4C51,41.7,51.7,42.2,52.5,42.4z M52.2,39 c0.1-0.6,0.7-0.9,1.2-0.8c0.3,0.1,0.5,0.2,0.6,0.5c0.1,0.2,0.2,0.5,0.1,0.8c-0.1,0.3-0.2,0.5-0.5,0.6c-0.2,0.1-0.5,0.2-0.8,0.1 c-0.3-0.1-0.5-0.2-0.6-0.5C52.2,39.5,52.2,39.3,52.2,39z' />
|
||||
<path d='M11,39.1l-0.7,0.4l-0.4-0.7c-0.3-0.5-1-0.7-1.5-0.3c-0.5,0.3-0.7,1-0.3,1.5l0.4,0.7l-0.7,0.4c-0.5,0.3-0.7,1-0.3,1.5 C7.6,43,8,43.1,8.3,43.1c0.2,0,0.4-0.1,0.6-0.2l0.7-0.4l0.4,0.7c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2 c0.5-0.3,0.7-1,0.3-1.5l-0.4-0.7l0.7-0.4c0.5-0.3,0.7-1,0.3-1.5C12.2,38.9,11.5,38.8,11,39.1z' />
|
||||
<path d='M21.3,42.1c-1.3,0-3-0.2-4.1-0.5c-0.6-0.1-1.2,0.3-1.3,0.9c-0.1,0.6,0.3,1.2,0.9,1.3c1.1,0.2,2.9,0.5,4.5,0.5c0,0,0,0,0,0 c0.6,0,1.1-0.5,1.1-1.1C22.4,42.6,21.9,42.1,21.3,42.1z' />
|
||||
<path d='M29.5,38.3c-0.7,1-1.5,1.8-2.5,2.4c-0.3,0.2-0.7,0.4-1.1,0.6c-0.6,0.2-0.8,0.9-0.6,1.5c0.2,0.4,0.6,0.7,1,0.7 c0.1,0,0.3,0,0.4-0.1c0.5-0.2,0.9-0.4,1.3-0.7c1.2-0.8,2.2-1.7,3.1-2.9c0.4-0.5,0.3-1.2-0.2-1.5C30.6,37.7,29.9,37.8,29.5,38.3z' />
|
||||
<path d='M37.5,31.1c-1.1,0-1.7,0.3-2.3,0.5c-1.4,0.6-2.6,1.9-2.9,2.3c-0.4,0.5-0.3,1.2,0.1,1.6c0.2,0.2,0.5,0.3,0.7,0.3 c0.3,0,0.6-0.1,0.8-0.4c0.5-0.6,1.3-1.3,2.1-1.7c0.6-0.2,0.8-0.3,1.5-0.4c0.6,0,1.1-0.5,1.1-1.1C38.6,31.6,38.1,31.1,37.5,31.1z' />
|
||||
<path d='M41.6,32.8c-0.2,0.6,0,1.2,0.6,1.5c1.1,0.5,2.7,1.3,3.9,2.2c0.2,0.1,0.4,0.2,0.6,0.2c0.4,0,0.7-0.2,0.9-0.5 c0.3-0.5,0.2-1.2-0.3-1.5c-1.4-0.9-3-1.8-4.3-2.3C42.5,32,41.9,32.3,41.6,32.8z' />
|
||||
<path d='M19.1,15.2c1.9,0,3.4-1.5,3.4-3.4S21,8.4,19.1,8.4c-1.9,0-3.4,1.5-3.4,3.4S17.3,15.2,19.1,15.2z M19.1,10.6 c0.6,0,1.2,0.5,1.2,1.2c0,0.6-0.5,1.2-1.2,1.2c-0.6,0-1.2-0.5-1.2-1.2C18,11.2,18.5,10.6,19.1,10.6z' />
|
||||
</g>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
<GpxIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<Dialog
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
import { SvgIcon } from '@suid/material';
|
||||
import { Component } from 'solid-js';
|
||||
|
||||
const GpxIcon: Component<{}> = (props) => {
|
||||
return (
|
||||
<SvgIcon>
|
||||
<svg
|
||||
viewBox='0 0 170 170'
|
||||
width='64px'
|
||||
height='64px'
|
||||
version='1.1'
|
||||
style='stroke-width: 1%; stroke:black'
|
||||
xml:space='preserve'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
xmlns:xlink='http://www.w3.org/1999/xlink'
|
||||
>
|
||||
<g>
|
||||
<path d='M63.5,16c-0.3-0.2-0.7-0.3-1-0.1l-20.4,7.3l-14.3-5.2c0.8-2,1.2-3.8,1.2-5.3c0-2.7-1-5.1-2.9-7c-1.9-1.9-4.4-2.9-7-2.9 c-5.5,0-9.9,4.4-9.9,9.9c0,1.9,0.7,4.2,1.9,7L0.7,23.2c-0.4,0.2-0.7,0.6-0.7,1v36c0,0.4,0.2,0.7,0.5,0.9c0.2,0.1,0.4,0.2,0.6,0.2 c0.1,0,0.3,0,0.4-0.1L21.9,54l19.8,7.3c0.2,0.1,0.5,0.1,0.7,0l20.8-7.4c0.4-0.2,0.7-0.6,0.7-1v-36C64,16.5,63.8,16.2,63.5,16z M19.1,4.8c2.1,0,4,0.8,5.4,2.3c0,0,0,0,0,0c1.5,1.4,2.3,3.4,2.3,5.4c0,1.4-0.5,3.3-1.5,5.5c-1.8,4-4.8,8.2-6.2,10.1 c-0.2-0.2-0.3-0.4-0.5-0.7c-1.3-1.8-3.4-4.8-4.9-7.9c-1.5-2.9-2.2-5.3-2.2-7.1C11.4,8.3,14.9,4.8,19.1,4.8z M61.8,52.1l-19.7,7 l-19.8-7.3c-0.1,0-0.3-0.1-0.4-0.1c-0.1,0-0.3,0-0.4,0.1L2.2,58.7V25l10-3.5c0,0,0,0,0,0.1c0.1,0.1,0.1,0.2,0.2,0.3 c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.4,0.3,0.6c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.4,0.3,0.5 c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3 c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.3c0.1,0.2,0.2,0.3,0.3,0.5c0.1,0.1,0.1,0.2,0.2,0.2c0.1,0.2,0.2,0.3,0.3,0.4 c0,0.1,0.1,0.1,0.1,0.2c0.1,0.2,0.2,0.3,0.3,0.4c0,0,0.1,0.1,0.1,0.1c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0.1,0.1,0.1,0.1 c0.1,0.1,0.2,0.3,0.3,0.4c0,0,0,0,0,0c0.1,0.1,0.2,0.2,0.3,0.3c0,0,0,0,0,0c0.2,0.3,0.4,0.5,0.4,0.6c0.2,0.3,0.5,0.4,0.9,0.4 c0.3,0,0.6-0.2,0.9-0.4c0,0,0.1-0.1,0.3-0.3c0,0,0.1-0.1,0.1-0.1c0.1-0.1,0.1-0.1,0.2-0.2c0,0,0.1-0.1,0.1-0.1 c0.1-0.1,0.1-0.2,0.2-0.3c0-0.1,0.1-0.1,0.1-0.2c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.4 c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.4c0.1-0.1,0.2-0.2,0.2-0.3c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.1,0.2-0.3,0.3-0.4 c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.1,0.2-0.3,0.3-0.4c0.1-0.2,0.2-0.3,0.3-0.5 c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5 c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.3,0.3-0.5c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.2,0.2-0.3,0.2-0.5c0,0,0,0,0-0.1l14.8,5.4 c0.2,0.1,0.5,0.1,0.7,0l19.3-6.9V52.1z' />
|
||||
<path d='M52.5,42.4c0.2,0.1,0.5,0.1,0.7,0.1c0.6,0,1.2-0.2,1.7-0.5c0.7-0.5,1.2-1.2,1.4-2c0.2-0.8,0-1.7-0.4-2.4 c-0.5-0.7-1.2-1.2-2-1.4c-1.7-0.4-3.5,0.7-3.9,2.4v0c-0.2,0.8,0,1.7,0.4,2.4C51,41.7,51.7,42.2,52.5,42.4z M52.2,39 c0.1-0.6,0.7-0.9,1.2-0.8c0.3,0.1,0.5,0.2,0.6,0.5c0.1,0.2,0.2,0.5,0.1,0.8c-0.1,0.3-0.2,0.5-0.5,0.6c-0.2,0.1-0.5,0.2-0.8,0.1 c-0.3-0.1-0.5-0.2-0.6-0.5C52.2,39.5,52.2,39.3,52.2,39z' />
|
||||
<path d='M11,39.1l-0.7,0.4l-0.4-0.7c-0.3-0.5-1-0.7-1.5-0.3c-0.5,0.3-0.7,1-0.3,1.5l0.4,0.7l-0.7,0.4c-0.5,0.3-0.7,1-0.3,1.5 C7.6,43,8,43.1,8.3,43.1c0.2,0,0.4-0.1,0.6-0.2l0.7-0.4l0.4,0.7c0.2,0.3,0.6,0.5,0.9,0.5c0.2,0,0.4-0.1,0.6-0.2 c0.5-0.3,0.7-1,0.3-1.5l-0.4-0.7l0.7-0.4c0.5-0.3,0.7-1,0.3-1.5C12.2,38.9,11.5,38.8,11,39.1z' />
|
||||
<path d='M21.3,42.1c-1.3,0-3-0.2-4.1-0.5c-0.6-0.1-1.2,0.3-1.3,0.9c-0.1,0.6,0.3,1.2,0.9,1.3c1.1,0.2,2.9,0.5,4.5,0.5c0,0,0,0,0,0 c0.6,0,1.1-0.5,1.1-1.1C22.4,42.6,21.9,42.1,21.3,42.1z' />
|
||||
<path d='M29.5,38.3c-0.7,1-1.5,1.8-2.5,2.4c-0.3,0.2-0.7,0.4-1.1,0.6c-0.6,0.2-0.8,0.9-0.6,1.5c0.2,0.4,0.6,0.7,1,0.7 c0.1,0,0.3,0,0.4-0.1c0.5-0.2,0.9-0.4,1.3-0.7c1.2-0.8,2.2-1.7,3.1-2.9c0.4-0.5,0.3-1.2-0.2-1.5C30.6,37.7,29.9,37.8,29.5,38.3z' />
|
||||
<path d='M37.5,31.1c-1.1,0-1.7,0.3-2.3,0.5c-1.4,0.6-2.6,1.9-2.9,2.3c-0.4,0.5-0.3,1.2,0.1,1.6c0.2,0.2,0.5,0.3,0.7,0.3 c0.3,0,0.6-0.1,0.8-0.4c0.5-0.6,1.3-1.3,2.1-1.7c0.6-0.2,0.8-0.3,1.5-0.4c0.6,0,1.1-0.5,1.1-1.1C38.6,31.6,38.1,31.1,37.5,31.1z' />
|
||||
<path d='M41.6,32.8c-0.2,0.6,0,1.2,0.6,1.5c1.1,0.5,2.7,1.3,3.9,2.2c0.2,0.1,0.4,0.2,0.6,0.2c0.4,0,0.7-0.2,0.9-0.5 c0.3-0.5,0.2-1.2-0.3-1.5c-1.4-0.9-3-1.8-4.3-2.3C42.5,32,41.9,32.3,41.6,32.8z' />
|
||||
<path d='M19.1,15.2c1.9,0,3.4-1.5,3.4-3.4S21,8.4,19.1,8.4c-1.9,0-3.4,1.5-3.4,3.4S17.3,15.2,19.1,15.2z M19.1,10.6 c0.6,0,1.2,0.5,1.2,1.2c0,0.6-0.5,1.2-1.2,1.2c-0.6,0-1.2-0.5-1.2-1.2C18,11.2,18.5,10.6,19.1,10.6z' />
|
||||
</g>
|
||||
</svg>
|
||||
</SvgIcon>
|
||||
);
|
||||
};
|
||||
|
||||
export default GpxIcon;
|
||||
|
|
@ -1,17 +1,32 @@
|
|||
import { Component } from 'solid-js';
|
||||
import cache from '../../lib/cache';
|
||||
import { peekCachedSignal } from '../../workers/cached-signals';
|
||||
import Tree from '../tree';
|
||||
import GpxIcon from './GpxIcon';
|
||||
|
||||
interface Props {
|
||||
gpxId: string;
|
||||
restrictToHierarchy?: any;
|
||||
}
|
||||
|
||||
const GpxViewer: Component<Props> = ({ gpxId }) => {
|
||||
const GpxViewer: Component<Props> = ({ gpxId, restrictToHierarchy }) => {
|
||||
const gpx = peekCachedSignal({ id: gpxId, method: 'getGpx' });
|
||||
console.log({ caller: 'GpxViewer', gpx: gpx() });
|
||||
const title = () => {};
|
||||
return <Tree title={'gpx'} content={undefined} subTree={undefined} />;
|
||||
console.log({ caller: 'GpxViewer', gpxId, restrictToHierarchy, gpx: gpx() });
|
||||
const title = () => {
|
||||
return gpx().metadata.name;
|
||||
};
|
||||
return (
|
||||
<Tree
|
||||
title={
|
||||
<>
|
||||
<GpxIcon />
|
||||
{' '}
|
||||
{title()}
|
||||
</>
|
||||
}
|
||||
content={undefined}
|
||||
subTree={undefined}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default GpxViewer;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
export { default } from './Gpx';
|
||||
|
||||
export { default as GpxViewer } from './GpxViewer';
|
||||
|
||||
export { default as GpxIcon } from './GpxIcon';
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const FeaturesTree: Component<{ featuresHierarchy: any }> = ({
|
|||
subTree={Object.keys(featuresHierarchy)
|
||||
.filter((key: string) => key.startsWith('gpx/'))
|
||||
.map((key: string) => (
|
||||
<GpxViewer gpxId={key} />
|
||||
<GpxViewer gpxId={key} restrictToHierarchy={featuresHierarchy[key]} />
|
||||
))}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import styled from '@suid/material/styles/styled';
|
|||
import { Component, JSXElement, Show } from 'solid-js';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
title: string | JSXElement;
|
||||
content: JSXElement | undefined;
|
||||
subTree: JSXElement | undefined;
|
||||
}
|
||||
|
|
@ -11,7 +11,7 @@ interface Props {
|
|||
const Item = styled(Paper)(({ theme }) => ({
|
||||
...theme.typography.body2,
|
||||
padding: theme.spacing(1),
|
||||
textAlign: 'center',
|
||||
textAlign: 'left',
|
||||
color: theme.palette.text.secondary,
|
||||
}));
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue