Better profile icons (#379)

* added translations * added german translation for towerslope * update german translations * replaced questions marks with numbers and added custom icon option * reformat code * added batch numbers to prevent duplicate icons * removed icon option in config; improved visabillity of batchNumbers * moved icons to seperate files; optimization * bug fix * separate empty key from default profile name * a little less code * improved key selection while creating customProfiles Record * separate empty key from default profile name (#1) * separate empty key from default profile name * a little less code --------- Co-authored-by: Peter <graphhopper@gmx.de>
graphhopper · May 6, 2024 · 65a7497 · 65a7497
1 parent 6fdf096
commit 65a7497
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 41 deletions.
diff --git a/src/sidebar/search/routingProfiles/RoutingProfiles.module.css b/src/sidebar/search/routingProfiles/RoutingProfiles.module.css
@@ -20,6 +20,7 @@
     flex-direction: row;
     justify-content: start;
     overflow: scroll;
+    gap: 0.1rem;
 
     /* Hide scrollbar for IE, Edge and Firefox */
     -ms-overflow-style: none;
@@ -67,9 +68,35 @@
 
 .profileBtn {
     border-radius: 50%;
-    margin: 0.1em;
     padding: 0.3em;
-    transform: scale(1.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.profileBtn span {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1.5em;
+    aspect-ratio: 1 / 1;
+    font-weight: bold;
+}
+
+.iconContainer {
+    position: relative;
+}
+
+.batchNumber {
+    position: absolute;
+    top: -7.1px;
+    right: -5px;
+    font-size: 0.75em;
+    font-weight: bold;
+    -webkit-text-stroke: 2px #fff;
+    paint-order: stroke fill;
 }
 
 .asIndicator {

diff --git a/src/sidebar/search/routingProfiles/RoutingProfiles.tsx b/src/sidebar/search/routingProfiles/RoutingProfiles.tsx
@@ -4,21 +4,10 @@ import Dispatcher from '@/stores/Dispatcher'
 import { SetVehicleProfile } from '@/actions/Actions'
 import { RoutingProfile } from '@/api/graphhopper'
 import PlainButton from '@/PlainButton'
-import BicycleIcon from './bike.svg'
-import CarIcon from './car.svg'
-import FootIcon from './foot.svg'
-import HikeIcon from './hike.svg'
-import MotorcycleIcon from './motorcycle.svg'
-import MtbBicycleIcon from './mtb-bicycle.svg'
-import RacingbikeIcon from './racingbike.svg'
-import ScooterIcon from './scooter.svg'
-import SmallTruckIcon from './small_truck.svg'
-import TruckIcon from './truck.svg'
-import WheelchairIcon from './wheelchair.svg'
-import QuestionMarkIcon from './question_mark.svg'
 import Chevron from './chevron.svg'
 import { tr } from '@/translation/Translation'
 import CustomModelBoxSVG from '@/sidebar/open_custom_model.svg'
+import { icons } from '@/sidebar/search/routingProfiles/profileIcons'
 
 export default function ({
     routingProfiles,
@@ -81,6 +70,16 @@ export default function ({
         setProfileScroll(profilesCarouselItems.scrollLeft)
     }
 
+    // Create a hash to count custom profiles to later enhance the base icon with a number.
+    let customProfiles: Record<string, Array<string>> = {}
+
+    // Now add the profiles to each key e.g. 'car_avoid_ferry' to the 'car_' key.
+    // Create a special key '_' for profile names with an unknown icon.
+    routingProfiles.forEach(p => {
+        const key = (Object.keys(icons).find(k => p.name.startsWith(k + '_')) || "") + "_"
+        if (!icons[p.name]) customProfiles[key] = [...(customProfiles[key] || []), p.name]
+    })
+
     return (
         <div className={styles.profilesParent}>
             <PlainButton
@@ -115,7 +114,7 @@ export default function ({
                                     {customModelBoxEnabled && profile.name === selectedProfile.name && (
                                         <CustomModelBoxSVG className={styles.asIndicator} />
                                     )}
-                                    {getIcon(profile)}
+                                    {getIcon(profile.name, customProfiles)}
                                 </PlainButton>
                             </li>
                         )
@@ -134,31 +133,35 @@ export default function ({
     )
 }
 
-function getIcon(profile: RoutingProfile) {
-    switch (profile.name) {
-        case 'car':
-            return <CarIcon />
-        case 'small_truck':
-            return <SmallTruckIcon />
-        case 'truck':
-            return <TruckIcon />
-        case 'scooter':
-            return <ScooterIcon />
-        case 'foot':
-            return <FootIcon />
-        case 'hike':
-            return <HikeIcon />
-        case 'bike':
-            return <BicycleIcon />
-        case 'mtb':
-            return <MtbBicycleIcon />
-        case 'racingbike':
-            return <RacingbikeIcon />
-        case 'motorcycle':
-            return <MotorcycleIcon />
-        case 'wheelchair':
-            return <WheelchairIcon />
-        default:
-            return <QuestionMarkIcon />
+function getIcon(profileName: string, customProfiles: Record<string, Array<string>>) {
+    let icon = icons[profileName]
+    if (icon) return React.createElement(icon)
+
+    // go through every key in customProfiles and check if the profile is in the array under that key
+    for (const [key, value] of Object.entries(customProfiles)) {
+        const index = value.findIndex(p => p == profileName) + 1
+        if (index >= 1) {
+            let icon = icons[key.slice(0, -1)] // slice to remove underscore from key
+            if (!icon) icon = icons.question_mark
+            return key === '_' ? <NumberIcon number={index} /> : <IconWithBatchNumber baseIcon={icon} number={index} />
+        }
     }
+
+    // this is the very last fallback, should never be reached
+    return React.createElement(icons.question_mark)
+}
+
+function IconWithBatchNumber({ baseIcon, number }: { baseIcon: any; number: number }) {
+    return (
+        <div className={styles.iconContainer}>
+            {React.createElement(baseIcon)}
+            <div className={styles.batchNumber}>
+                <NumberIcon number={number} />
+            </div>
+        </div>
+    )
+}
+
+function NumberIcon({ number }: { number: number }) {
+    return <span>{number}</span>
 }
diff --git a/src/sidebar/search/routingProfiles/profileIcons.ts b/src/sidebar/search/routingProfiles/profileIcons.ts
@@ -0,0 +1,29 @@
+import BicycleIcon from './bike.svg'
+import CarIcon from './car.svg'
+import FootIcon from './foot.svg'
+import HikeIcon from './hike.svg'
+import MotorcycleIcon from './motorcycle.svg'
+import MtbBicycleIcon from './mtb-bicycle.svg'
+import RacingbikeIcon from './racingbike.svg'
+import ScooterIcon from './scooter.svg'
+import SmallTruckIcon from './small_truck.svg'
+import TruckIcon from './truck.svg'
+import WheelchairIcon from './wheelchair.svg'
+import QuestionMarkIcon from './question_mark.svg'
+
+// ALL AVAILABLE ICONS
+// every svg gets mapped to a key, so icons can be easily added
+export const icons: Record<string, any> = {
+    car: CarIcon,
+    small_truck: SmallTruckIcon,
+    truck: TruckIcon,
+    scooter: ScooterIcon,
+    foot: FootIcon,
+    hike: HikeIcon,
+    bike: BicycleIcon,
+    mtb: MtbBicycleIcon, // Mountainbike
+    racingbike: RacingbikeIcon,
+    motorcycle: MotorcycleIcon,
+    wheelchair: WheelchairIcon,
+    question_mark: QuestionMarkIcon,
+}