mirror of
https://github.com/p-stream/p-stream.git
synced 2026-04-05 04:39:45 +00:00
update dropdown styles
This commit is contained in:
Pas
parent
35574c17c6
commit
d2e8b521f0
2 changed files with 29 additions and 9 deletions
|
|
@ -82,6 +82,7 @@ export enum Icons {
|
|||
BELL = "bell",
|
||||
RELOAD = "reload",
|
||||
REPEAT = "repeat",
|
||||
PLUS = "plus",
|
||||
}
|
||||
|
||||
export interface IconProps {
|
||||
|
|
@ -181,6 +182,7 @@ const iconList: Record<Icons, string> = {
|
|||
bell: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M320 64C302.3 64 288 78.3 288 96L288 99.2C215 114 160 178.6 160 256L160 277.7C160 325.8 143.6 372.5 113.6 410.1L103.8 422.3C98.7 428.6 96 436.4 96 444.5C96 464.1 111.9 480 131.5 480L508.4 480C528 480 543.9 464.1 543.9 444.5C543.9 436.4 541.2 428.6 536.1 422.3L526.3 410.1C496.4 372.5 480 325.8 480 277.7L480 256C480 178.6 425 114 352 99.2L352 96C352 78.3 337.7 64 320 64zM258 528C265.1 555.6 290.2 576 320 576C349.8 576 374.9 555.6 382 528L258 528z"/></svg>`,
|
||||
reload: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 640" fill="currentColor"><!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M544.1 256L552 256C565.3 256 576 245.3 576 232L576 88C576 78.3 570.2 69.5 561.2 65.8C552.2 62.1 541.9 64.2 535 71L483.3 122.8C439 86.1 382 64 320 64C191 64 84.3 159.4 66.6 283.5C64.1 301 76.2 317.2 93.7 319.7C111.2 322.2 127.4 310 129.9 292.6C143.2 199.5 223.3 128 320 128C364.4 128 405.2 143 437.7 168.3L391 215C384.1 221.9 382.1 232.2 385.8 241.2C389.5 250.2 398.3 256 408 256L544.1 256zM573.5 356.5C576 339 563.8 322.8 546.4 320.3C529 317.8 512.7 330 510.2 347.4C496.9 440.4 416.8 511.9 320.1 511.9C275.7 511.9 234.9 496.9 202.4 471.6L249 425C255.9 418.1 257.9 407.8 254.2 398.8C250.5 389.8 241.7 384 232 384L88 384C74.7 384 64 394.7 64 408L64 552C64 561.7 69.8 570.5 78.8 574.2C87.8 577.9 98.1 575.8 105 569L156.8 517.2C201 553.9 258 576 320 576C449 576 555.7 480.6 573.4 356.5z"/></svg>`,
|
||||
repeat: `<svg viewBox="0 0 24 24" width="1em" height="1em" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><polyline points="17 1 21 5 17 9"></polyline><path d="M3 11V9a4 4 0 0 1 4-4h14"></path><polyline points="7 23 3 19 7 15"></polyline><path d="M21 13v2a4 4 0 0 1-4 4H3"></path></svg>`,
|
||||
plus: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" width="1em" height="1em" fill="currentColor"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z"/></svg>`,
|
||||
};
|
||||
|
||||
export const Icon = memo((props: IconProps) => {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ import React, { useEffect, useRef, useState } from "react";
|
|||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { UserIcon, UserIcons } from "@/components/UserIcon";
|
||||
|
||||
import { Button } from "../buttons/Button";
|
||||
|
||||
interface GroupDropdownProps {
|
||||
groups: string[];
|
||||
currentGroups: string[];
|
||||
|
|
@ -122,6 +124,7 @@ export function GroupDropdown({
|
|||
)}
|
||||
{groups.map((group) => {
|
||||
const { icon, name } = parseGroupString(group);
|
||||
const isChecked = currentGroups.includes(group);
|
||||
return (
|
||||
<label
|
||||
key={group}
|
||||
|
|
@ -129,11 +132,27 @@ export function GroupDropdown({
|
|||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={currentGroups.includes(group)}
|
||||
checked={isChecked}
|
||||
onChange={() => handleToggleGroup(group)}
|
||||
className="accent-type-link"
|
||||
className="sr-only"
|
||||
/>
|
||||
<span className="w-5 h-5 flex items-center justify-center ml-1">
|
||||
<div
|
||||
className={`relative w-4 h-4 rounded border-2 transition-all duration-200 flex items-center justify-center ${
|
||||
isChecked
|
||||
? "bg-buttons-purple border-buttons-purple"
|
||||
: "border-background-secondary hover:border-buttons-purple/50"
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
icon={Icons.CHECKMARK}
|
||||
className={`w-4 h-4 transition-all duration-200 ${
|
||||
isChecked
|
||||
? "text-white opacity-100 scale-75"
|
||||
: "opacity-0"
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
<span className="w-4 h-4 flex items-center justify-center ml-1">
|
||||
<UserIcon
|
||||
icon={icon}
|
||||
className="inline-block w-full h-full"
|
||||
|
|
@ -158,15 +177,14 @@ export function GroupDropdown({
|
|||
}}
|
||||
style={{ minWidth: 0 }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="text-type-link font-bold px-2 py-1 min-w-[2.5rem]"
|
||||
<Button
|
||||
theme="purple"
|
||||
onClick={() => handleCreate(newGroup, selectedIcon)}
|
||||
disabled={!newGroup.trim()}
|
||||
style={{ flexShrink: 0 }}
|
||||
className="h-6 w-6 min-w-12 md:min-w-6 justify-center items-center"
|
||||
>
|
||||
{t("home.bookmarks.groups.dropdown.addButton")}
|
||||
</button>
|
||||
<Icon icon={Icons.PLUS} className="text-white w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
{newGroup.trim().length > 0 && (
|
||||
<div className="flex items-center gap-2 flex-wrap pt-2 w-full justify-center">
|
||||
|
|
|
|||
Loading…
Reference in a new issue