Skip to content

Commit 461daf0

Browse files
ThomasHalwaxThomasHalwax
authored
Merge pull request #40 from syncpoint/symbols-vs-text
Symbols vs text-based navigation
2 parents cc465ea + 9ab43a5 commit 461daf0

File tree

12 files changed

+161
-82
lines changed

12 files changed

+161
-82
lines changed

‎src/renderer/components/DropdownMenu.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,13 @@ export const DropdownMenu = props => {
2929

3030
const option = ([key, command]) => {
3131
const handleClick = () => command.execute && command.execute()
32-
return <a key={key} onClick={handleClick}>{command.label}</a>
32+
const link =
33+
<div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
34+
{ command.path ? <Icon path={mdi[command.path]} size='20px' /> : null }
35+
<span>{command.label}</span>
36+
</div>
37+
38+
return <a key={key} onClick={handleClick}>{ link }</a>
3339
}
3440

3541
return (

‎src/renderer/components/properties/TilePresetProperties.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import React from 'react'
33
import SortableList, { SortableItem } from 'react-easy-sort'
44
import Icon from '@mdi/react'
5-
import { mdiDrag, mdiEye, mdiEyeOff, mdiOpacity } from '@mdi/js'
5+
import { mdiDrag, mdiEyeOutline, mdiEyeOff, mdiSquareOpacity } from '@mdi/js'
66
import { useServices, useList } from '../hooks'
77
import Range from './Range'
88
import { Tooltip } from 'react-tooltip'
@@ -54,14 +54,14 @@ const Layer = props => (
5454
<Icon path={mdiDrag} size='24px' className='tt-tile-preset-handle'/>
5555
<span className='bf12-card__description'>{props.name}</span>
5656
<Icon
57-
path={mdiOpacity}
57+
path={mdiSquareOpacity}
5858
size='24px'
5959
style={{ marginLeft: 'auto' }}
6060
className=' tt-tile-preset-opacity'
6161
onClick={props.onSelect}
6262
/>
6363
<Icon
64-
path={props.visible ? mdiEye : mdiEyeOff}
64+
path={props.visible ? mdiEyeOutline : mdiEyeOff}
6565
size='24px'
6666
onClick={props.onToggleVisible}
6767
className='tt-tile-preset-visibility'

‎src/renderer/components/sidebar/FilterInput.js

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { defaultSearch } from './state'
55
import { matcher, stopPropagation } from '../events'
66
import { cmdOrCtrl } from '../../platform'
77
import { preventDefault } from 'ol/events/Event'
8-
import { Tooltip } from 'react-tooltip'
98
import './FilterInput.scss'
109

1110

@@ -72,12 +71,6 @@ export const FilterInput = props => {
7271
onClick={stopPropagation}
7372
id='filter-input'
7473
/>
75-
<Tooltip anchorSelect='#filter-input' delayShow={750}>
76-
<div>
77-
You can search for multiple phrases or #tags<br/>
78-
and also combine them.
79-
</div>
80-
</Tooltip>
8174
</div>
8275
)
8376
}

‎src/renderer/components/sidebar/ScopeSwitcher.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
2+
.a74a-taglist {
3+
display: flex;
4+
flex-direction: row;
5+
flex-wrap: wrap;
6+
justify-content: space-between;
7+
gap: 2px;
8+
}
9+
10+
.a74a-scope-selector {
11+
width: 28px;
12+
height: 28px;
13+
}
14+
15+
.a74a-scope-selector-active {
16+
border: 1px solid #e9746c;
17+
border-radius: 2px;
18+
background-color: #e9746c;
19+
}
20+
21+
.a74a-scope-selector:hover {
22+
background-color: #e0e0e0;
23+
cursor: pointer;
24+
}
25+
26+
.a74a-icon {
27+
color:#68696B;
28+
width: 26px;
29+
height: 26px;
30+
padding: 0px;
31+
}
32+
33+
.a74a-icon-active {
34+
color: white;
35+
width: 26px;
36+
height: 26px;
37+
padding: 0px;
38+
}
39+
40+
.a74a-named {
41+
display: flex;
42+
flex-direction: column;
43+
gap: 4px;
44+
padding: 2px;
45+
}
46+
47+
.a74a-named-name {
48+
text-transform: uppercase;
49+
padding: 1px 3px;
50+
border: 1px solid #e9746c;
51+
border-radius: 2px;
52+
color: white;
53+
background-color: #e9746c;
54+
}

‎src/renderer/components/sidebar/ScopeSwitcher.js

Lines changed: 70 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,36 @@ import * as mdi from '@mdi/js'
55
import { useMemento } from '../hooks'
66
import { defaultSearch } from './state'
77
import * as ID from '../../ids'
8-
import { IconTag } from './IconTag'
98
import { Tooltip } from 'react-tooltip'
9+
import Icon from '@mdi/react'
10+
import './ScopeSwitcher.css'
11+
12+
13+
const SCOPES = {
14+
[`@${ID.LAYER}`]: 'mdiLayersTriple',
15+
[`@${ID.FEATURE}`]: 'mdiFormatListBulletedType',
16+
[`@${ID.LINK}`]: 'mdiLinkVariant',
17+
'#pin': 'mdiPinOutline',
18+
[`@${ID.SYMBOL}`]: 'mdiShapePlusOutline',
19+
[`@${ID.MARKER}`]: 'mdiCrosshairs',
20+
[`@${ID.BOOKMARK}`]: 'mdiBookmarkOutline',
21+
[`@${ID.PLACE}`]: 'mdiSearchWeb',
22+
[`@${ID.TILE_SERVICE}`]: 'mdiEarth',
23+
[`@${ID.MEASURE}`]: 'mdiAndroidStudio'
24+
}
1025

26+
const TOOLTIPS = {
27+
'#pin': 'Manage pinned items',
28+
[`@${ID.LAYER}`]: 'Manage existing layers',
29+
[`@${ID.FEATURE}`]: 'Manage existing features',
30+
[`@${ID.LINK}`]: 'Manage existing links',
31+
[`@${ID.SYMBOL}`]: 'Create new features based on the symbol palette',
32+
[`@${ID.MARKER}`]: 'Manage existing markers',
33+
[`@${ID.BOOKMARK}`]: 'Manage existing bookmarks',
34+
[`@${ID.PLACE}`]: 'Search for addresses based on OSM (online only)',
35+
[`@${ID.TILE_SERVICE}`]: 'Manage existing tile services for maps',
36+
[`@${ID.MEASURE}`]: 'Manage existing measurements'
37+
}
1138

1239
/**
1340
*
@@ -20,10 +47,10 @@ const ScopeSwitch = props => {
2047
: search.history[0].scope.split(' ').includes(props.scope)
2148

2249
const className = props.name
23-
? 'e3de-tag e3de-tag--named'
50+
? 'a74a-named'
2451
: enabled
25-
? 'e3de-tag e3de-tag--scope e3de-tag--active'
26-
: 'e3de-tag e3de-tag--system e3de-tag--active'
52+
? 'a74a-scope-selector a74a-scope-selector-active'
53+
: 'a74a-scope-selector'
2754

2855
const handleClick = () => {
2956
const findIndex = () => search.history.findIndex(entry => entry.scope === props.scope)
@@ -33,18 +60,40 @@ const ScopeSwitch = props => {
3360
setSearch({ history: history(), filter: '' })
3461
}
3562

36-
return props.name
37-
? <div className={className} onClick={handleClick}>
38-
<div className='name'>{props.name}</div>
39-
<div className='label'>{props.label}</div>
63+
64+
if (props.name && props.handleGoBack) {
65+
66+
return <div style={{ width: '100%', border: '1px solid #e9746c', borderRadius: '2px', marginTop: '3px' }} >
67+
<div style={{ display: 'flex', gap: '2px', backgroundColor: '#e9746c', flexGrow: 1, color: 'white', justifyContent: 'space-between' }}>
68+
<Icon className='a74a-icon-active'
69+
path={props.scope.match(/LINK/i) === null ? mdi.mdiFormatListBulletedType : mdi.mdiLinkVariant }
70+
/>
71+
<div style={{ textTransform: 'uppercase', padding: '3px', fontWeight: 400, fontSize: '0.86rem' }}>{props.name}</div>
72+
{ props.disabled
73+
? <div className='a74a-icon-active' style= {{ marginLeft: 'auto' }}/>
74+
: <Icon className='a74a-icon-active'
75+
path={mdi.mdiCloseBoxOutline}
76+
onClick={props.handleGoBack}
77+
style= {{ marginLeft: 'auto' }}
78+
/>}
4079
</div>
41-
: <>
42-
<span id={`ss-${props.label}`} className={className} onClick={handleClick}>{props.label}</span>
43-
<Tooltip anchorSelect={`#ss-${props.label}`} content={props.toolTip} delayShow={750} />
44-
</>
80+
<div style={{ padding: '3px', fontWeight: 300, fontSize: '0.86rem' }}>{props.label}</div>
81+
</div>
82+
}
83+
84+
return (
85+
<>
86+
<span id={`ss-${props.label}`} className={className} onClick={handleClick}>
87+
<Icon className={ enabled ? 'a74a-icon-active' : 'a74a-icon'} path={mdi[props.label]} />
88+
</span>
89+
<Tooltip anchorSelect={`#ss-${props.label}`} content={props.toolTip} delayShow={750} />
90+
</>
91+
)
4592
}
4693

4794
ScopeSwitch.propTypes = {
95+
disabled: PropTypes.bool,
96+
handleGoBack: PropTypes.func,
4897
name: PropTypes.string,
4998
label: PropTypes.string.isRequired,
5099
scope: PropTypes.string.isRequired,
@@ -64,36 +113,10 @@ export const ScopeSwitcher = props => {
64113
setSearch({ filter: '', history })
65114
}, [setSearch])
66115

67-
const handleClick = () => {
116+
const handleGoBack = () => {
68117
setHistory(R.dropLast(1, history))
69118
}
70119

71-
const SCOPES = {
72-
'#pin': 'pinned',
73-
[`@${ID.LAYER}`]: 'layer',
74-
[`@${ID.FEATURE}`]: 'feature',
75-
[`@${ID.LINK}`]: 'link',
76-
[`@${ID.SYMBOL}`]: 'symbol',
77-
[`@${ID.MARKER}`]: 'marker',
78-
[`@${ID.BOOKMARK}`]: 'bookmark',
79-
[`@${ID.PLACE}`]: 'place',
80-
[`@${ID.TILE_SERVICE}`]: 'tile-service',
81-
[`@${ID.MEASURE}`]: 'measure'
82-
}
83-
84-
const TOOLTIPS = {
85-
'#pin': 'Manage pinned items',
86-
[`@${ID.LAYER}`]: 'Manage existing layers',
87-
[`@${ID.FEATURE}`]: 'Manage existing features',
88-
[`@${ID.LINK}`]: 'Manage existing links',
89-
[`@${ID.SYMBOL}`]: 'Create new features based on the symbol palette',
90-
[`@${ID.MARKER}`]: 'Manage existing markers',
91-
[`@${ID.BOOKMARK}`]: 'Manage existing bookmarks',
92-
[`@${ID.PLACE}`]: 'Search for addresses based on OSM (online only)',
93-
[`@${ID.TILE_SERVICE}`]: 'Manage existing tile services for maps',
94-
[`@${ID.MEASURE}`]: 'Manage existing measurements'
95-
}
96-
97120
const defaultSwitches = Object.entries(SCOPES).map(([scope, label]) =>
98121
<ScopeSwitch
99122
key={scope}
@@ -103,31 +126,23 @@ export const ScopeSwitcher = props => {
103126
/>
104127
)
105128

106-
const childSwitches = R.drop(1, history).map(({ key, label, scope }) =>
107-
<ScopeSwitch
129+
const childSwitches = R.drop(1, history).map(({ key, label, scope }, index, elements) => {
130+
return <ScopeSwitch
108131
key={key}
109132
scope={scope}
110133
name={ID.scope(key)}
111134
label={label}
135+
handleGoBack={handleGoBack}
136+
disabled={elements.length > 1 && index < elements.length - 1 }
112137
/>
138+
}
113139
)
114140

115-
const back = history.length > 1
116-
? <><IconTag
117-
path={mdi.mdiArrowUp}
118-
onClick={handleClick}
119-
id='scope-back'
120-
/>
121-
<Tooltip anchorSelect='#scope-back' content='Return to parent scope' delayShow={750} />
122-
</>
123-
: null
124141

125142
return (
126-
<div className='scope-container e3de-row'>
127-
<div className='e3de-taglist'>
128-
{ defaultSwitches.concat(childSwitches) }
129-
{ back }
130-
</div>
143+
<div className='a74a-taglist'>
144+
{ defaultSwitches }
145+
{ childSwitches }
131146
</div>
132147
)
133148
}

‎src/renderer/components/sidebar/Sidebar.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -292,18 +292,24 @@ export const Sidebar = () => {
292292
*/
293293
if (activeAnchor?.id) return null
294294

295-
const toggler = ['VISIBLE', 'HIDDEN', 'LOCKED', 'UNLOCKED']
296295
const highlighter = ['LAYER', 'FEATURE', 'MARKER', 'PLACE']
297296
const linker = ['LINK']
298297

299-
if (toggler.includes(activeAnchor?.innerText)) return 'Click to toggle value'
300-
if (highlighter.includes(activeAnchor?.innerText)) return 'Click and hold to highlight'
301-
if (linker.includes(activeAnchor?.innerText)) return 'Show assigned links'
298+
if (highlighter.includes(activeAnchor?.innerText)) return 'Click and hold to highlight content.'
299+
if (linker.includes(activeAnchor?.innerText)) return 'Show linked documents.'
302300
return ''
303301
}} />
304302
<Tooltip anchorSelect='.e3de-icon-tag' delayShow={750} render={({ activeAnchor }) => {
305303
if (activeAnchor?.id) return null
306-
return 'Show content'
304+
switch (activeAnchor?.dataset?.path) {
305+
case 'mdiEyeOff': return 'Click to show.'
306+
case 'mdiEyeOutline': return 'Click to hide.'
307+
case 'mdiLock': return 'Click to unlock.'
308+
case 'mdiLockOpenVariantOutline': return 'Click to lock.'
309+
case 'mdiLinkVariant': return 'Show linked documents.'
310+
case 'mdiFormatListBulletedType': return 'Show layer content (features)'
311+
default: return null
312+
}
307313
}} />
308314

309315
</div>

‎src/renderer/components/sidebar/tags.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ export const SystemTag = props => {
103103
? <IconTag
104104
path={mdi[props.path]}
105105
onClick={handleClick}
106+
data-path={props.path}
106107
/>
107108
: <span
108109
className={className}

‎src/renderer/model/commands/CreationCommands.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const CreateLayer = function (services) {
88
this.selection = services.selection
99
this.store = services.store
1010
this.label = 'Create Layer'
11+
this.path = 'mdiLayersTriple'
1112
}
1213

1314
CreateLayer.prototype.execute = async function () {
@@ -24,6 +25,7 @@ const CreateTileService = function (services) {
2425
this.selection = services.selection
2526
this.store = services.store
2627
this.label = 'Create Tile Service'
28+
this.path = 'mdiEarth'
2729
}
2830

2931
CreateTileService.prototype.execute = function () {
@@ -41,6 +43,7 @@ const CreateMarker = function (services) {
4143
this.store = services.store
4244
this.sessionStore = services.sessionStore
4345
this.label = 'Create Marker'
46+
this.path = 'mdiCrosshairs'
4447
}
4548

4649
CreateMarker.prototype.execute = async function () {
@@ -68,6 +71,7 @@ const CreateBookmark = function (services) {
6871
this.store = services.store
6972
this.sessionStore = services.sessionStore
7073
this.label = 'Create Bookmark'
74+
this.path = 'mdiBookmarkOutline'
7175
}
7276

7377
CreateBookmark.prototype.execute = async function () {

‎src/renderer/store/options/feature.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,9 +46,9 @@ export default async function (id) {
4646
svg: icon,
4747
tags: [
4848
'SCOPE:FEATURE',
49-
hidden ? 'SYSTEM:HIDDEN' : 'SYSTEM:VISIBLE',
50-
locked ? 'SYSTEM:LOCKED' : 'SYSTEM:UNLOCKED',
51-
...(links.length ? ['SYSTEM:LINK'] : []),
49+
hidden ? 'SYSTEM:HIDDEN::mdiEyeOff' : 'SYSTEM:VISIBLE::mdiEyeOutline',
50+
locked ? 'SYSTEM:LOCKED::mdiLock' : 'SYSTEM:UNLOCKED::mdiLockOpenVariantOutline',
51+
...(links.length ? ['SYSTEM:LINK::mdiLinkVariant'] : []),
5252
geometryTag,
5353
...dimensions.map(label => `SYSTEM:${label}:NONE`),
5454
...scope.map(label => `SYSTEM:${label}:NONE`),

‎src/renderer/store/options/layer.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ export default async function (id) {
1212
description: layer.type === 'socket' ? layer.url : null,
1313
tags: [
1414
'SCOPE:LAYER',
15-
hidden ? 'SYSTEM:HIDDEN' : 'SYSTEM:VISIBLE',
16-
locked ? 'SYSTEM:LOCKED' : 'SYSTEM:UNLOCKED',
17-
...(links.length ? ['SYSTEM:LINK'] : []),
18-
'SYSTEM:LAYER:OPEN:mdiArrowDown', // navigate to contained features
15+
hidden ? 'SYSTEM:HIDDEN::mdiEyeOff' : 'SYSTEM:VISIBLE::mdiEyeOutline',
16+
locked ? 'SYSTEM:LOCKED::mdiLock' : 'SYSTEM:UNLOCKED::mdiLockOpenVariantOutline',
17+
...(links.length ? ['SYSTEM:LINK::mdiLinkVariant'] : []),
18+
'SYSTEM:LAYER:OPEN:mdiFormatListBulletedType', // navigate to contained features
1919
...((tags || [])).map(label => `USER:${label}:NONE`),
2020
...(defaultFlag ? ['USER:default:NONE'] : []),
2121
'PLUS'

0 commit comments

Comments
 (0)