Elgato_dark/fleet
1
0
Fork 0
mirror of https://github.com/fleetdm/fleet synced 2026-05-23 08:58:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 111

Fleet UI: Fix label dropdown height, indicator color (unreleased bug) (#8466)

Browse source
This commit is contained in:
RachelElysia 2022-10-27 14:06:33 -04:00 committed by GitHub
parent 124dbc0065
commit ef1be16a68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 13 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/components/icons/Chevron.tsx
View file

@ -17,7 +17,7 @@ const SVG_PATH = {
};
const FLEET_COLORS = {
coreFleetBlack: "#6a67fe",
coreFleetBlack: "#192147",
coreVibrantBlue: "#6a67fe",
};

3
frontend/pages/hosts/ManageHostsPage/components/CustomDropdownIndicator/CustomDropdownIndicator.tsx
View file

@ -15,7 +15,8 @@ const CustomDropdownIndicator = (
// no access to hover state here from react-select so that is done in the scss
// file of LabelFilterSelect.
const color =
isFocused || selectProps.menuIsOpen ? "coreVibrantBlue" : undefined;
isFocused || selectProps.menuIsOpen ? "coreVibrantBlue" : "coreFleetBlack";
return (
<components.DropdownIndicator {...props} className={baseClass}>
<Icon name="chevron" color={color} className={`${baseClass}__icon`} />

6
frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/LabelFilterSelect.tsx
View file

@ -4,6 +4,7 @@ import classnames from "classnames";
import { ILabel } from "interfaces/label";
import { PLATFORM_LABEL_DISPLAY_NAMES } from "utilities/constants";
import Icon from "components/Icon";
import CustomLabelGroupHeading from "../CustomLabelGroupHeading";
import { PLATFORM_TYPE_ICONS } from "./constants";
@ -49,7 +50,10 @@ const OptionLabel = (data: ILabel | IEmptyOption) => {
return (
<div className={"option-label"}>
{isPlatform && (
<img src={PLATFORM_TYPE_ICONS[data.display_text]} alt="" />
<Icon
name={PLATFORM_TYPE_ICONS[data.display_text]}
className="option-icon"
/>
)}
<span>{labelText}</span>
</div>

9
frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/_styles.scss
View file

@ -2,11 +2,10 @@
width: 175px;
&:hover {
// no access to hover state from react-select in JS so this is done here.
.custom-dropdown-indicator {
& path {
fill: $core-vibrant-blue
fill: $core-vibrant-blue;
}
}
}
@ -34,12 +33,10 @@
position: absolute;
content: url(../assets/images/icon-filter-v2-black-16x16@2x.png);
transform: scale(0.5);
top: -2px;
left: -6px;
}
}
.label-filter-select__single-value,
.label-filter-select__placeholder {
color: $core-fleet-black;
@ -112,9 +109,7 @@
white-space: nowrap;
}
img {
width: 16px;
height: 16px;
.option-icon {
margin-right: $pad-small;
}
}

10
frontend/pages/hosts/ManageHostsPage/components/LabelFilterSelect/constants.ts
View file

@ -1,7 +1,3 @@
import linuxIcon from "../../../../../../assets/images/icon-linux-fleet-black-16x16@2x.png";
import darwinIcon from "../../../../../../assets/images/icon-darwin-fleet-black-16x16@2x.png";
import windowsIcon from "../../../../../../assets/images/icon-windows-fleet-black-16x16@2x.png";
export const NO_LABELS_OPTION = {
label: "No custom labels",
isDisabled: true,
@ -13,9 +9,9 @@ export const EMPTY_OPTION = {
};
export const PLATFORM_TYPE_ICONS: Record<string, any> = {
"All Linux": linuxIcon,
macOS: darwinIcon,
"MS Windows": windowsIcon,
"All Linux": "linux",
macOS: "darwin",
"MS Windows": "windows",
};
export const FILTERED_LINUX = ["Red Hat Linux", "CentOS Linux", "Ubuntu Linux"];