Skip to content

Commit 2ff79e2

Browse files
karussellkarussell
committed
use clock on left and settings
1 parent f6c9941 commit 2ff79e2

7 files changed

Lines changed: 159 additions & 91 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 20 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/sidebar/SettingsBox.module.css‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,29 @@ input {
8888
font-weight: bold;
8989
}
9090

91+
.clearRecentsButton {
92+
border: 1px solid lightgray;
93+
border-radius: 8px;
94+
background: none;
95+
color: inherit;
96+
padding: 3px 5px;
97+
cursor: pointer;
98+
justify-self: center;
99+
display: flex;
100+
align-items: center;
101+
justify-content: center;
102+
}
103+
104+
.clearRecentsButton svg {
105+
scale: 1;
106+
margin: 0;
107+
}
108+
109+
.clearRecentsButton:hover {
110+
background: #ececec;
111+
color: #333;
112+
}
113+
91114
.title,
92115
.infoLine,
93116
.settingsTable,

‎src/sidebar/SettingsBox.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { SettingsContext } from '@/contexts/SettingsContext'
1010
import { RoutingProfile } from '@/api/graphhopper'
1111
import * as config from 'config'
1212
import { ProfileGroupMap } from '@/utils'
13+
import { clearRecentLocations } from '@/sidebar/search/RecentLocations'
1314

1415
export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
1516
const settings = useContext(SettingsContext)
@@ -51,6 +52,14 @@ export default function SettingsBox({ profile }: { profile: RoutingProfile }) {
5152
Dispatcher.dispatch(new UpdateSettings({ showDistanceInMiles: !settings.showDistanceInMiles }))
5253
}
5354
/>
55+
<div className={styles.settingsToggle} style={{ cursor: 'default' }}>
56+
<button className={styles.clearRecentsButton} onClick={() => clearRecentLocations()}>
57+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 -960 960 960">
58+
<path fill="currentColor" d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
59+
</svg>
60+
</button>
61+
<div>{tr('clear_recent_locations')}</div>
62+
</div>
5463
</div>
5564
<div className={styles.title}>{tr('settings_gpx_export')}</div>
5665
<div className={styles.settingsTable}>

‎src/sidebar/search/AddressInput.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { JSX, ReactNode, useCallback, useEffect, useRef, useState } from 'react'
22
import { QueryPoint, QueryPointType } from '@/stores/QueryStore'
33
import { Bbox, GeocodingHit, ReverseGeocodingHit } from '@/api/graphhopper'
44
import Autocomplete, { AutocompleteItem, GeocodingItem, POIQueryItem, RecentLocationItem } from '@/sidebar/search/AddressInputAutocomplete'
5-
import { clearRecentLocations, getRecentLocations, saveRecentLocation } from '@/sidebar/search/RecentLocations'
5+
import { getRecentLocations, saveRecentLocation } from '@/sidebar/search/RecentLocations'
66
import ArrowBack from './arrow_back.svg'
77
import Cross from '@/sidebar/times-solid-thin.svg'
88
import CurrentLocationIcon from './current-location.svg'
@@ -313,10 +313,6 @@ export default function AddressInput(props: AddressInputProps) {
313313
}
314314
focusNextOrBlur()
315315
}}
316-
onClearRecents={() => {
317-
clearRecentLocations()
318-
setAutocompleteItems([])
319-
}}
320316
/>
321317
</ResponsiveAutocomplete>
322318
)}

‎src/sidebar/search/AddressInputAutocomplete.module.css‎

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -62,40 +62,22 @@
6262
color: #5b616a;
6363
}
6464

65-
.recentLocationEntry {
65+
.recentEntry {
6666
display: flex;
67-
flex-direction: column;
67+
align-items: center;
6868
text-align: start;
69-
margin: 0.2rem 0.5rem;
69+
margin: 0.4rem 0.5rem;
7070
}
7171

72-
.recentHeader {
72+
.recentEntryText {
7373
display: flex;
74-
justify-content: space-between;
75-
align-items: center;
76-
padding: 0.1rem 0.5rem 0 0.5rem;
77-
margin-bottom: -0.3rem;
78-
padding-right: 0.1rem;
79-
}
80-
81-
.recentHeaderText {
82-
font-size: small;
83-
color: #999;
74+
flex-direction: column;
75+
flex: 1;
76+
min-width: 0;
8477
}
8578

86-
.clearRecentsButton {
87-
border: none;
88-
background: none;
79+
.recentIcon {
80+
flex-shrink: 0;
8981
color: #5b616a;
90-
cursor: pointer;
91-
padding: 0.3rem;
92-
min-width: 1.5rem;
93-
min-height: 1.5rem;
94-
display: flex;
95-
align-items: center;
96-
justify-content: center;
97-
}
98-
99-
.clearRecentsButton:hover {
100-
color: #333;
82+
margin-right: 0.5rem;
10183
}

‎src/sidebar/search/AddressInputAutocomplete.tsx‎

Lines changed: 17 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -50,45 +50,16 @@ export interface AutocompleteProps {
5050
items: AutocompleteItem[]
5151
highlightedItem: AutocompleteItem
5252
onSelect: (hit: AutocompleteItem) => void
53-
onClearRecents?: () => void
5453
}
5554

56-
export default function Autocomplete({ items, highlightedItem, onSelect, onClearRecents }: AutocompleteProps) {
57-
let recentHeaderShown = false
55+
export default function Autocomplete({ items, highlightedItem, onSelect }: AutocompleteProps) {
5856
return (
5957
<ul>
60-
{items.map((item, i) => {
61-
let header = null
62-
if (item instanceof RecentLocationItem && !recentHeaderShown) {
63-
recentHeaderShown = true
64-
header = (
65-
<div className={styles.recentHeader}>
66-
<span className={styles.recentHeaderText}>Recent</span>
67-
{onClearRecents && (
68-
<button
69-
className={styles.clearRecentsButton}
70-
onMouseDown={e => e.preventDefault()}
71-
onClick={onClearRecents}
72-
title="Clear recent locations"
73-
>
74-
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 -960 960 960">
75-
<path
76-
fill="currentColor"
77-
d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"
78-
/>
79-
</svg>
80-
</button>
81-
)}
82-
</div>
83-
)
84-
}
85-
return (
86-
<li key={i} className={styles.autocompleteItem}>
87-
{header}
88-
{mapToComponent(item, highlightedItem === item, onSelect)}
89-
</li>
90-
)
91-
})}
58+
{items.map((item, i) => (
59+
<li key={i} className={styles.autocompleteItem}>
60+
{mapToComponent(item, highlightedItem === item, onSelect)}
61+
</li>
62+
))}
9263
</ul>
9364
)
9465
}
@@ -153,9 +124,17 @@ function RecentLocationEntry({
153124
}) {
154125
return (
155126
<AutocompleteEntry isHighlighted={isHighlighted} onSelect={() => onSelect(item)}>
156-
<div className={styles.recentLocationEntry} title={item.toText()}>
157-
<span className={styles.mainText}>{item.mainText}</span>
158-
<span className={styles.secondaryText}>{item.secondText}</span>
127+
<div className={styles.recentEntry} title={item.toText()}>
128+
<svg className={styles.recentIcon} xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 -960 960 960">
129+
<path
130+
fill="currentColor"
131+
d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q150 0 255 105t105 255q0 150-105 255T480-120Zm0-80q117 0 198.5-81.5T760-480q0-117-81.5-198.5T480-760q-117 0-198.5 81.5T200-480q0 117 81.5 198.5T480-200Zm-40-264v-216h80v184l128 128-56 56-152-152Z"
132+
/>
133+
</svg>
134+
<div className={styles.recentEntryText}>
135+
<span className={styles.mainText}>{item.mainText}</span>
136+
<span className={styles.secondaryText}>{item.secondText}</span>
137+
</div>
159138
</div>
160139
</AutocompleteEntry>
161140
)

0 commit comments

Comments
 (0)