Skip to content

Commit

Permalink
fix(color picker): 🐛 color picker border removed for all colors and b… (
Browse files Browse the repository at this point in the history 
#107)

…lack border for white color



## PR Checklist

- [ ] Addresses an existing open issue: fixes #000
- [ ] That issue was marked as [`status: accepting prs`][1]
- [ ] Steps in [CONTRIBUTING.md][2] were taken

## Overview



[1]:
	https://github.com/timelessco/bookmark-tags/issues?q=is%3Aopen+is%3Aissue+label%3A%22status%3A+accepting+prs%22
[2]:
	https://github.com/timelessco/bookmark-tags/blob/main/.github/CONTRIBUTING.md
  • Loading branch information
@padmanathan10
padmanathan10 authored Dec 28, 2023
1 parent 151cb28 commit 97b1bc4
Show file tree
Hide file tree
Showing 4 changed files with 150 additions and 121 deletions.
41 changes: 36 additions & 5 deletions src/components/colorPicker.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,55 @@
import classNames from "classnames";

import { colorPickerColors } from "../utils/constants";

type ColorPickerProps = {
colorsList: string[];
onChange: (value: string) => void;
selectedColor: string;
};

const colorBlockWrapper = classNames(
"flex",
"cursor-pointer",
"items-center",
"space-x-1",
);

const colorBlockSelected = ({
colorItem,
selectedColor,
}: {
colorItem: string;
selectedColor: string;
}) =>
classNames("rounded-md", "p-1", "hover:bg-custom-gray-7", {
"bg-custom-gray-7": colorItem === selectedColor,
});

const colorBlockItemBorder = (colorItem: string) =>
classNames(
"h-4",
"w-4",
"rounded-full",
"border-[1px]",
"p-1",
{ "border-gray-900": colorItem === colorPickerColors[0] },
{ "border-transparent": colorItem !== colorPickerColors[0] },
);

const ColorPicker = ({
colorsList,
onChange,
selectedColor,
}: ColorPickerProps) => (
<div className="flex cursor-pointer items-center space-x-1">
<div className={colorBlockWrapper}>
{colorsList?.map((colorItem) => (
<div
className={`rounded-md p-1 hover:bg-custom-gray-7 ${
colorItem === selectedColor ? "bg-custom-gray-7" : ""
}`}
className={colorBlockSelected({ colorItem, selectedColor })}
key={colorItem}
>
<div
className="h-4 w-4 rounded-full border-[1px] border-gray-900 p-1"
className={colorBlockItemBorder(colorItem)}
onClick={() => onChange(colorItem)}
onKeyDown={() => {}}
role="button"
Expand Down
69 changes: 3 additions & 66 deletions src/pageComponents/dashboard/dashboardLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ import {
} from "../../utils/constants";

import "allotment/dist/style.css";

import isEmpty from "lodash/isEmpty";

import Input from "../../components/atoms/input";
Expand All @@ -58,6 +59,7 @@ import {
type BookmarksViewTypes,
type BookmarkViewCategories,
} from "../../types/componentStoreTypes";
import { optionsMenuListArray } from "../../utils/commonData";

import SidePane from "./sidePane";

Expand Down Expand Up @@ -144,72 +146,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
error: PostgrestError;
};

const optionsMenuList = [
{
icon: <SearchIconGray />,
name: "Search",
href: `/${SEARCH_URL}`,
current: currentPath === SEARCH_URL,
id: 0,
count: undefined,
},
{
icon: <HomeIconGray />,
name: "All Bookmarks",
href: `/${ALL_BOOKMARKS_URL}`,
current: currentPath === ALL_BOOKMARKS_URL,
id: 1,
count: bookmarksCountData?.data?.allBookmarks,
},
{
icon: <InboxIconGray />,
name: "Inbox",
href: `/${UNCATEGORIZED_URL}`,
current: currentPath === UNCATEGORIZED_URL,
id: 2,
count: bookmarksCountData?.data?.uncategorized,
},
{
icon: <TrashIconGray />,
name: "Trash",
href: `/${TRASH_URL}`,
current: currentPath === TRASH_URL,
id: 3,
count: bookmarksCountData?.data?.trash,
},
{
icon: <SettingsIcon />,
name: "Settings",
href: `/${SETTINGS_URL}`,
current: currentPath === SETTINGS_URL,
id: 4,
count: undefined,
},
{
icon: <ImageIcon />,
name: "Image",
href: `/${IMAGES_URL}`,
current: currentPath === IMAGES_URL,
id: 5,
count: undefined,
},
{
icon: <VideoIcon />,
name: "Videos",
href: `/${VIDEOS_URL}`,
current: currentPath === VIDEOS_URL,
id: 6,
count: undefined,
},
{
icon: <ArticleIcon />,
name: "Links",
href: `/${LINKS_URL}`,
current: currentPath === LINKS_URL,
id: 6,
count: undefined,
},
];
const optionsMenuList = optionsMenuListArray(currentPath, bookmarksCountData);

const currentCategoryData = find(
categoryData?.data,
Expand Down
66 changes: 16 additions & 50 deletions src/pageComponents/dashboard/sidePane/sidePaneOptionsMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import SettingsIcon from "../../../icons/settingsIcon";
import TrashIconGray from "../../../icons/trashIconGray";
import { useModalStore } from "../../../store/componentStore";
import { type BookmarksCountTypes } from "../../../types/apiTypes";
import { optionsMenuListArray } from "../../../utils/commonData";
import {
ALL_BOOKMARKS_URL,
BOOKMARKS_COUNT_KEY,
Expand Down Expand Up @@ -39,65 +40,30 @@ const SidePaneOptionsMenu = () => {
(state) => state.toggleShowSettingsModal,
);

const optionsMenuList = [
{
icon: <SearchIconGray />,
name: "Search",
href: `/${SEARCH_URL}`,
current: currentPath === SEARCH_URL,
id: 0,
count: undefined,
iconColor: "",
},
{
icon: <InboxIconGray />,
name: "Inbox",
href: `/${UNCATEGORIZED_URL}`,
current: currentPath === UNCATEGORIZED_URL,
id: 2,
count: bookmarksCountData?.data?.uncategorized,
iconColor: "",
},
{
icon: <HomeIconGray />,
name: "All",
href: `/${ALL_BOOKMARKS_URL}`,
current: currentPath === ALL_BOOKMARKS_URL,
id: 1,
count: bookmarksCountData?.data?.allBookmarks,
iconColor: "",
},

{
icon: <TrashIconGray />,
name: "Trash",
href: `/${TRASH_URL}`,
current: currentPath === TRASH_URL,
id: 3,
count: bookmarksCountData?.data?.trash,
iconColor: "",
},
{
icon: <SettingsIcon />,
name: "Settings",
href: "",
current: false,
id: 4,
count: undefined,
iconColor: "",
},
];
const optionsMenuList = optionsMenuListArray(
currentPath,
bookmarksCountData,
).filter((item) => {
if (
item?.name === "Inbox" ||
item?.name === "All Bookmarks" ||
item?.name === "Trash" ||
item?.name === "Settings"
) {
return item;
} else return null;
});

return (
<div className="pt-[10px]">
{optionsMenuList?.map((item) => (
<SingleListItem
extendedClassname="py-[6px]"
isLink={item?.id !== 4}
isLink={item?.id !== 3}
item={item}
key={item.id}
onClick={() => {
if (item?.id === 4) {
if (item?.id === 3) {
// we clicked on settings
toggleShowSettingsModal();
}
Expand Down
95 changes: 95 additions & 0 deletions src/utils/commonData.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,26 @@
import { type PostgrestError } from "@supabase/supabase-js";

import ArticleIcon from "../icons/articleIcon";
import HomeIconGray from "../icons/homeIconGray";
import ImageIcon from "../icons/imageIcon";
import InboxIconGray from "../icons/inboxIconGray";
import SearchIconGray from "../icons/searchIconGray";
import SettingsIcon from "../icons/settingsIcon";
import TrashIconGray from "../icons/trashIconGray";
import VideoIcon from "../icons/videoIcon";
import { type BookmarksCountTypes } from "../types/apiTypes";

import {
ALL_BOOKMARKS_URL,
IMAGES_URL,
LINKS_URL,
SEARCH_URL,
SETTINGS_URL,
TRASH_URL,
UNCATEGORIZED_URL,
VIDEOS_URL,
} from "./constants";

// TODO: check if this is needed (for code cleanup)
const object = [
{
Expand Down Expand Up @@ -3760,3 +3783,75 @@ export const options = () =>
</svg>
),
}));

export const optionsMenuListArray = (
currentPath: string | null,
bookmarksCountData: {
data: BookmarksCountTypes;
error: PostgrestError;
},
) => [
{
icon: <HomeIconGray />,
name: "All Bookmarks",
href: `/${ALL_BOOKMARKS_URL}`,
current: currentPath === ALL_BOOKMARKS_URL,
id: 0,
count: bookmarksCountData?.data?.allBookmarks,
iconColor: "",
},
{
icon: <InboxIconGray />,
name: "Inbox",
href: `/${UNCATEGORIZED_URL}`,
current: currentPath === UNCATEGORIZED_URL,
id: 1,
count: bookmarksCountData?.data?.uncategorized,
iconColor: "",
},
{
icon: <TrashIconGray />,
name: "Trash",
href: `/${TRASH_URL}`,
current: currentPath === TRASH_URL,
id: 2,
count: bookmarksCountData?.data?.trash,
iconColor: "",
},
{
icon: <SettingsIcon />,
name: "Settings",
href: `/${SETTINGS_URL}`,
current: currentPath === SETTINGS_URL,
id: 3,
count: undefined,
iconColor: "",
},
{
icon: <ImageIcon />,
name: "Image",
href: `/${IMAGES_URL}`,
current: currentPath === IMAGES_URL,
id: 4,
count: undefined,
iconColor: "",
},
{
icon: <VideoIcon />,
name: "Videos",
href: `/${VIDEOS_URL}`,
current: currentPath === VIDEOS_URL,
id: 5,
count: undefined,
iconColor: "",
},
{
icon: <ArticleIcon />,
name: "Links",
href: `/${LINKS_URL}`,
current: currentPath === LINKS_URL,
id: 6,
count: undefined,
iconColor: "",
},
];

1 comment on commit 97b1bc4

@vercel
Copy link

@vercel vercel bot commented on 97b1bc4 Dec 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

bookmark-tags – ./

bookmark-tags-timelessco.vercel.app
www.recollect.so
recollect.so
bookmark-tags.vercel.app
bookmark-tags-git-main-timelessco.vercel.app

Please sign in to comment.