github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: material logo loader added

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-06-14 17:08:36 +05:30
parent 71c77d30a0
commit a65143c41a
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/ui/package.json
View File

@ -34,7 +34,8 @@
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-popper": "^2.3.0", "react-popper": "^2.3.0",
"sonner": "^1.4.41", "sonner": "^1.4.41",
"tailwind-merge": "^2.0.0" "tailwind-merge": "^2.0.0",
"use-font-face-observer": "^1.2.2"
}, },
"devDependencies": { "devDependencies": {
"@chromatic-com/storybook": "^1.4.0", "@chromatic-com/storybook": "^1.4.0",

35
packages/ui/src/emoji/icons-list.tsx
View File

@ -1,13 +1,15 @@
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
// icons
import { Search } from "lucide-react";
import { MATERIAL_ICONS_LIST } from "./icons";
import { InfoIcon } from "../icons";
// components // components
import { Input } from "../form-fields"; import { Input } from "../form-fields";
// hooks
import useFontFaceObserver from "use-font-face-observer";
// helpers // helpers
import { cn } from "../../helpers"; import { cn } from "../../helpers";
import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper"; import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper";
// icons
import { MATERIAL_ICONS_LIST } from "./icons";
import { InfoIcon } from "../icons";
import { Search } from "lucide-react";
export const IconsList: React.FC<TIconsListProps> = (props) => { export const IconsList: React.FC<TIconsListProps> = (props) => {
const { defaultColor, onChange } = props; const { defaultColor, onChange } = props;
@ -28,6 +30,15 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
const filteredArray = MATERIAL_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase())); const filteredArray = MATERIAL_ICONS_LIST.filter((icon) => icon.name.toLowerCase().includes(query.toLowerCase()));
const isMaterialSymbolsFontLoaded = useFontFaceObserver([
{
family: `Material Symbols Rounded`,
style: `normal`,
weight: `normal`,
stretch: `condensed`,
},
]);
return ( return (
<> <>
<div className="flex items-center px-2 py-[15px] w-full "> <div className="flex items-center px-2 py-[15px] w-full ">
@ -118,12 +129,16 @@ export const IconsList: React.FC<TIconsListProps> = (props) => {
}); });
}} }}
> >
<span {isMaterialSymbolsFontLoaded ? (
style={{ color: activeColor }} <span
className="material-symbols-rounded !text-[1.25rem] !leading-[1.25rem]" style={{ color: activeColor }}
> className="material-symbols-rounded !text-[1.25rem] !leading-[1.25rem]"
{icon.name} >
</span> {icon.name}
</span>
) : (
<span className="size-5 rounded animate-pulse bg-custom-background-80" />
)}
</button> </button>
))} ))}
</div> </div>