From 5f90c7b60a954306d85789c979b239beecbb1b7f Mon Sep 17 00:00:00 2001 From: pjanik Date: Tue, 27 Aug 2024 18:34:40 +0200 Subject: [PATCH 1/2] feat: add arrow icon to dropdown component, update some assets [PT-188162567] --- src/assets/images/checkbox.svg | 3 ++- src/assets/images/orbital-sun.svg | 28 ++++++++++++++-------------- src/assets/images/slider-thumb.svg | 8 ++++---- src/components/dropdown.scss | 28 ++++++++++++++++++++-------- src/components/dropdown.tsx | 2 ++ 5 files changed, 42 insertions(+), 27 deletions(-) diff --git a/src/assets/images/checkbox.svg b/src/assets/images/checkbox.svg index 1c5997a..995ba93 100644 --- a/src/assets/images/checkbox.svg +++ b/src/assets/images/checkbox.svg @@ -1,8 +1,9 @@ + - + diff --git a/src/assets/images/orbital-sun.svg b/src/assets/images/orbital-sun.svg index 36e95ee..ff3853c 100644 --- a/src/assets/images/orbital-sun.svg +++ b/src/assets/images/orbital-sun.svg @@ -1,28 +1,28 @@ - + - + - + - + - + - + @@ -30,18 +30,18 @@ - - + + - - - + + + - - - + + + diff --git a/src/assets/images/slider-thumb.svg b/src/assets/images/slider-thumb.svg index f449ea4..3d4c6df 100644 --- a/src/assets/images/slider-thumb.svg +++ b/src/assets/images/slider-thumb.svg @@ -1,17 +1,17 @@ - + - + - - + + diff --git a/src/components/dropdown.scss b/src/components/dropdown.scss index c262ec7..7cdf8b3 100644 --- a/src/components/dropdown.scss +++ b/src/components/dropdown.scss @@ -51,16 +51,28 @@ background-color: white; border-radius: $input-border-radius; box-sizing: border-box; - } - .dropdown-main-button { - font-weight: 600; - cursor: pointer; - &:hover { - background-color: $codap-teal-lightest; + .arrow-icon { + position: absolute; + right: 5px; + top: 6px; + z-index: 1; + pointer-events: none; + + &.up { + transform: rotate(180deg); + } } - &:active { - background-color: $codap-teal-active; + + .dropdown-main-button { + font-weight: 600; + cursor: pointer; + &:hover { + background-color: $codap-teal-lightest; + } + &:active { + background-color: $codap-teal-active; + } } } diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx index a6cb541..9fa675a 100644 --- a/src/components/dropdown.tsx +++ b/src/components/dropdown.tsx @@ -1,5 +1,6 @@ import React, { useState, useEffect } from "react"; import { clsx } from "clsx"; +import DropdownArrow from "../assets/images/dropdown-arrow-icon.svg"; import "./dropdown.scss"; @@ -109,6 +110,7 @@ export const Dropdown = ({ ) : (
+
) } From e40d70d94f468396f7246b35a26a8a28608bde92 Mon Sep 17 00:00:00 2001 From: pjanik Date: Tue, 27 Aug 2024 19:43:36 +0200 Subject: [PATCH 2/2] feat: update My Locations to use custom dropdown [PT-188162567] --- src/components/dropdown.scss | 13 +++++++++ src/components/dropdown.tsx | 18 ++++++++---- src/grasp-seasons/components/my-locations.tsx | 28 +++++++++++-------- 3 files changed, 42 insertions(+), 17 deletions(-) diff --git a/src/components/dropdown.scss b/src/components/dropdown.scss index 7cdf8b3..fb5df31 100644 --- a/src/components/dropdown.scss +++ b/src/components/dropdown.scss @@ -3,6 +3,7 @@ .day-length-dropdown-container { box-sizing: border-box; font-size: 12px; + font-weight: 500; .day-length-dropdown-label { position: relative; @@ -31,6 +32,7 @@ left: 6px; top: 6px; z-index: 1; + pointer-events: none; } .dropdown-main-button, input { @@ -65,8 +67,18 @@ } .dropdown-main-button { + background-color: white; font-weight: 600; cursor: pointer; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.iconPresent { + padding-left: 28px; + font-weight: 500; + } + &:hover { background-color: $codap-teal-lightest; } @@ -101,6 +113,7 @@ button { font-size: 12px; + font-weight: 500; font-family: "Montserrat", sans-serif; border: none; background-color: white; diff --git a/src/components/dropdown.tsx b/src/components/dropdown.tsx index 9fa675a..e1663c0 100644 --- a/src/components/dropdown.tsx +++ b/src/components/dropdown.tsx @@ -4,7 +4,7 @@ import DropdownArrow from "../assets/images/dropdown-arrow-icon.svg"; import "./dropdown.scss"; -interface IOption { +export interface IOption { name: string; value?: string; } @@ -12,7 +12,7 @@ interface IOption { interface IDropdownProps { value: string; options: T[]; - onSelect: (place: T) => void; + onSelect: (option: T) => void; onSearchChange?: (value: string) => void; label: string; inputPlaceholder?: string; @@ -65,7 +65,7 @@ export const Dropdown = ({ setShowOptions(false); }; - const handleKeyDown = (event: React.KeyboardEvent) => { + const handleKeyDown = (event: React.KeyboardEvent) => { if (!showOptions) return; switch (event.key) { @@ -92,6 +92,8 @@ export const Dropdown = ({ } }; + const iconPresent = !!icon; + return (
@@ -109,7 +111,13 @@ export const Dropdown = ({ /> ) : (
- +
) @@ -129,7 +137,7 @@ export const Dropdown = ({ onMouseLeave={() => setFocusedOptionIndex(-1)} className={clsx({ focused: focusedOptionIndex === index ? "focused" : "", - iconPresent: icon + iconPresent }) } > diff --git a/src/grasp-seasons/components/my-locations.tsx b/src/grasp-seasons/components/my-locations.tsx index a33bd85..d75da95 100644 --- a/src/grasp-seasons/components/my-locations.tsx +++ b/src/grasp-seasons/components/my-locations.tsx @@ -2,6 +2,8 @@ import React, { Component } from "react"; import t, { Language } from "../translation/translate"; import { ILocation } from "../../types"; import { locationsEqual } from "../../utils/daylight-utils"; +import { Dropdown, IOption } from "../../components/dropdown"; +import LocationIcon from "../../assets/images/icon-location.svg"; import "./my-locations.scss"; @@ -19,22 +21,20 @@ export default class MyLocations extends Component { this.selectChange = this.selectChange.bind(this); } - selectChange(event: any) { + selectChange(option: IOption) { const { onLocationChange, locations } = this.props; - const location = locations[event.target.value]; - if (location.latitude && location.longitude) { + const location = locations[Number(option.value)]; + if (location && location.latitude && location.longitude) { onLocationChange(location.latitude, location.longitude, location.name); } } getOptions() { const { locations } = this.props; - const options = this.selectedLocation === "" ? [ - - ] : []; + const options = []; for (let i = 0; i < locations.length; i++) { const loc = locations[i]; - options.push(); + options.push({ name: loc.name || `(${loc.latitude}, ${loc.longitude})`, value: i.toString() }); } return options; } @@ -44,7 +44,7 @@ export default class MyLocations extends Component { const currentLocation: ILocation = { latitude: lat, longitude: long, name: "" }; for (let i = 0; i < locations.length; i++) { if (locationsEqual(currentLocation, locations[i])) { - return i; + return locations[i].name; } } return ""; // custom location @@ -53,10 +53,14 @@ export default class MyLocations extends Component { render() { return (
- - + } + />
); }