mirror of
https://github.com/ryanamay/pint.git
synced 2024-09-20 01:50:34 +00:00
feat: add search functionality
This commit is contained in:
parent
4c544170f7
commit
4430543e38
4 changed files with 53 additions and 13 deletions
|
@ -1,9 +1,8 @@
|
||||||
import "../../assets/styles/App.css";
|
import "../../assets/styles/App.css";
|
||||||
import chroma from "chroma-js";
|
|
||||||
interface Props {
|
interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
color?: string;
|
color?: string;
|
||||||
textcolor?: string | "#ffffff";
|
textcolor?: string | "#000000";
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -21,6 +21,7 @@ import {
|
||||||
AiFillClockCircle,
|
AiFillClockCircle,
|
||||||
AiFillCloseCircle,
|
AiFillCloseCircle,
|
||||||
AiFillHeart,
|
AiFillHeart,
|
||||||
|
AiOutlineSearch,
|
||||||
} from "react-icons/ai";
|
} from "react-icons/ai";
|
||||||
import { MdFormatColorText, MdTextSnippet } from "react-icons/md";
|
import { MdFormatColorText, MdTextSnippet } from "react-icons/md";
|
||||||
import * as settings from "../../methods/config/colorGroups.js";
|
import * as settings from "../../methods/config/colorGroups.js";
|
||||||
|
@ -42,10 +43,13 @@ var defaultSettings = Object.entries(baseSettings.settings);
|
||||||
interface Props {
|
interface Props {
|
||||||
color: string;
|
color: string;
|
||||||
setColor: (type: string) => void;
|
setColor: (type: string) => void;
|
||||||
|
filteredList: string[];
|
||||||
|
setFilter: (type: string[]) => void;
|
||||||
|
setting: string[];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Sidebar(props: Props) {
|
export default function Sidebar(props: Props) {
|
||||||
var { color, setColor } = props;
|
var { color, setColor, filteredList, setFilter, setting } = props;
|
||||||
|
|
||||||
react.useLayoutEffect(() => {
|
react.useLayoutEffect(() => {
|
||||||
pintGetUpdate(settings.cg46_6e7681[0], setScaleGray);
|
pintGetUpdate(settings.cg46_6e7681[0], setScaleGray);
|
||||||
|
@ -231,9 +235,33 @@ export default function Sidebar(props: Props) {
|
||||||
chrome.tabs.reload();
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function settingsFilter(searchquery: string) {
|
||||||
|
if (searchquery === "") {
|
||||||
|
setFilter(setting);
|
||||||
|
} else {
|
||||||
|
// replace all spaces with underscores
|
||||||
|
let filteredsearch = searchquery.replace(/\s/g, "_");
|
||||||
|
setFilter(setting.filter((s) => s.includes(filteredsearch)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="w-[428px] sticky flex left-0 top-0 flex-col h-screen ">
|
<aside className="w-[428px] sticky flex left-0 top-0 flex-col h-screen ">
|
||||||
<div className="w-[410px] pint flex flex-row mx-2 mt-2 mb-1 pt-[78px]">
|
<div className="flex flex-col rounded-lg mb-1 mt-2 mx-3 pt-[82px]">
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] bg-[#161b22] border-solid border-[#30363d] border-2 ">
|
||||||
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2 mb-2">
|
||||||
|
<AiOutlineSearch className="mx-1" />
|
||||||
|
<input
|
||||||
|
id="aaa"
|
||||||
|
type="text"
|
||||||
|
className="p-1 text-white w-full bg-[#161b22] text-left"
|
||||||
|
placeholder="Search or jump to..."
|
||||||
|
onChange={(e) => settingsFilter(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[410px] pint flex flex-row mx-2 mb-1">
|
||||||
<div className="flex-1 flex-col rounded-[6px] m-1 bg-[#010409] border-solid border-[#30363d] border-2 ">
|
<div className="flex-1 flex-col rounded-[6px] m-1 bg-[#010409] border-solid border-[#30363d] border-2 ">
|
||||||
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
<BsFillPaletteFill className="mx-1" size={15} />
|
<BsFillPaletteFill className="mx-1" size={15} />
|
||||||
|
@ -263,7 +291,7 @@ export default function Sidebar(props: Props) {
|
||||||
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
<BsFillBrushFill className="mx-1" size={15} />
|
<BsFillBrushFill className="mx-1" size={15} />
|
||||||
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
<p className="text-semibold"> color painter </p>
|
<p className="text-semibold"> group painter </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
||||||
|
|
|
@ -237,7 +237,7 @@ export default function QuickChange() {
|
||||||
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
<BsFillBrushFill className="mx-1" size={15} />
|
<BsFillBrushFill className="mx-1" size={15} />
|
||||||
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
<p className="text-semibold"> color painter </p>
|
<p className="text-semibold"> group painter </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
||||||
|
|
|
@ -13,23 +13,36 @@ var defaultValue = "#c0ffee";
|
||||||
|
|
||||||
export default function Options() {
|
export default function Options() {
|
||||||
const [color, setColor] = react.useState(defaultValue);
|
const [color, setColor] = react.useState(defaultValue);
|
||||||
|
const [filteredList, setFilter] = react.useState(settingsList);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative inline-flex flex-col align justify-center">
|
<div className="relative inline-flex flex-col align justify-center">
|
||||||
<Header />
|
<Header />
|
||||||
<div className="relative inline-flex flex-row self-center">
|
<div className="relative inline-flex flex-row self-center">
|
||||||
<Sidebar color={color} setColor={setColor} />
|
<Sidebar
|
||||||
|
color={color}
|
||||||
|
setColor={setColor}
|
||||||
|
filteredList={filteredList}
|
||||||
|
setFilter={setFilter}
|
||||||
|
setting={settingsList}
|
||||||
|
/>
|
||||||
<div className="inline-flex flex-col">
|
<div className="inline-flex flex-col">
|
||||||
<p className="text-3xl text-white p-1 mt-2">all settings</p>
|
<p className="text-3xl text-white p-1 mt-2">all settings</p>
|
||||||
<p className="text-l text-white p-1 mb-2">
|
<p className="text-l text-white p-1 mb-2">
|
||||||
customise everything from every text to every div
|
customise everything from every text to every div
|
||||||
</p>
|
</p>
|
||||||
<div className="grid xl:grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 gap-1">
|
<div className="grid xl:grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 gap-1">
|
||||||
{settingsList.map((setting) => {
|
{filteredList.length > 0 ? (
|
||||||
|
filteredList.map((setting) => {
|
||||||
return (
|
return (
|
||||||
<ChangeCard settingName={setting} colorPickerColor={color} />
|
<ChangeCard settingName={setting} colorPickerColor={color} />
|
||||||
);
|
);
|
||||||
})}
|
})
|
||||||
|
) : (
|
||||||
|
<div className="text-[#7e7e7e] p-1 w-[260px] ">
|
||||||
|
no setting found. try another search term?
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue