Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix/WELLMS-292 #299

Merged
merged 4 commits into from
Aug 10, 2023
Merged

fix/WELLMS-292 #299

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ac0edee
Fix in bookmarks and notes component
SzymonMrzyglod Aug 9, 2023
034e5f5
Change background
SzymonMrzyglod Aug 9, 2023
d55ffdf
Change cursor
SzymonMrzyglod Aug 9, 2023
39c8ac3
.DS_Store removed
SzymonMrzyglod Aug 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,5 @@ package-lock.json
docs
yarn-error.log
lib
.idea
.idea
.DS_Store
Binary file removed src/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file removed src/components/.DS_Store
View file
Open in desktop
Binary file not shown.
Binary file removed src/components/atoms/.DS_Store
View file
Open in desktop
Binary file not shown.
76 changes: 57 additions & 19 deletions src/components/molecules/List/List.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { FC, HTMLAttributes, ReactNode } from "react";
import styled, { withTheme } from "styled-components";
import styled, { css, withTheme } from "styled-components";
import { IconText, Text } from "../../..";

import { getStylesBasedOnTheme } from "../../../utils/utils";
export interface ListItemProps {
id: number;
text: string;
Expand All @@ -16,6 +16,17 @@ interface ListProps extends Omit<HTMLAttributes<HTMLUListElement>, "onClick"> {
defaultSelectedId?: number;
currentIndex?: number;
}
const basicColorStyle = css<{ $isActive?: boolean }>`
color: ${({ theme, $isActive }) =>
$isActive
? theme.white
: getStylesBasedOnTheme(
theme.mode,
theme.dm__outlineButtonColor,
theme.outlineButtonColor,
theme.primaryColor
)};
`;

const ListComponent = styled.ul`
display: flex;
Expand All @@ -34,33 +45,60 @@ const ListItem = styled.li<{ $isActive?: boolean }>`
background-color: ${({ theme, $isActive }) =>
$isActive ? theme.dm__primaryColor : "transparent"};
cursor: pointer;

&:hover {
transform: scale(1.05);
}
`;

const StyledText = styled(Text)<{ $isActive?: boolean }>`
font-size: 14px;
font-weight: ${({ $isActive }) => ($isActive ? "bold" : "normal")};
${basicColorStyle}
`;

const StyledIconText = styled(IconText)<{ $isActive?: boolean }>`
& > span {
font-weight: ${({ $isActive }) => ($isActive ? "bold" : "normal")};
${basicColorStyle}
& > svg {
fill: ${({ theme, $isActive }) =>
$isActive
? theme.white
: getStylesBasedOnTheme(
theme.mode,
theme.dm__outlineButtonColor,
theme.outlineButtonColor,
theme.primaryColor
)};
}
}
`;
Comment on lines +60 to +75
Copy link
Contributor

Choose a reason for hiding this comment

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

tutaj też, jak się da klasę to po klasie albo osobny SC. W komponentach chyba klas używali częściej niż robienia osobnego SC. Chyba że to span z jakiejś libki i nie ma klasy to nie było tematu

const List: FC<ListProps> = ({
listItems,
selectedListItem,
setSelectedListItem,
...props
}) => {
return (
<ListComponent data-testid="list" {...props}>
{listItems.map(({ id, icon, text, numberOfItems }) => (
<ListItem
key={id}
}) => (
<ListComponent data-testid="list" {...props}>
{listItems.map(({ id, icon, text, numberOfItems }) => (
<ListItem
key={id}
$isActive={selectedListItem === id}
data-testid={text}
onClick={() => setSelectedListItem(id)}
>
<StyledIconText
icon={icon}
text={text}
noMargin
$isActive={selectedListItem === id}
data-testid={text}
onClick={() => setSelectedListItem(id)}
>
<IconText icon={icon} text={text} noMargin />
<Text>{numberOfItems}</Text>
</ListItem>
))}
</ListComponent>
);
};
/>
<StyledText $isActive={selectedListItem === id}>
{numberOfItems}
</StyledText>
</ListItem>
))}
</ListComponent>
);

export default withTheme(styled(List)``);
Binary file removed src/components/organisms/.DS_Store
View file
Open in desktop
Binary file not shown.
36 changes: 21 additions & 15 deletions src/components/organisms/BookmarkNotes/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,13 @@ import {
BookmarkNotesBody,
BookmarkNotesMenu,
BookmarkNotesContent,
BookmarkNotesContentHeader,
BookmarkNotesList,
BookmarkNotesItem,
NoteText,
StyledTitle,
BookmarksPage,
} from "./styles";
import { IconEdit, IconEditAlt } from "../../../styleguide/Icons";
import { IconEdit, IconEditAlt, IconAll } from "../../../styleguide/Icons";
import styled, { withTheme } from "styled-components";

export interface Dropdown {
Expand Down Expand Up @@ -59,26 +58,38 @@ const BookmarkNotes: FC<BookmarkNotesComponentProps> = ({
const listItems = [
{
id: 0,
icon: <IconAll />,
text: t<string>("Bookmarks.All"),
numberOfItems: bookmarkNotes.list?.data.length || 0,
},
{
id: 1,
icon: <IconEditAlt />,
text: t<string>("Bookmarks.Notes"),
numberOfTasks: bookmarkNotes.list?.data.length
numberOfItems: bookmarkNotes.list?.data.length
? Number(notes?.length)
: 0,
},
{
id: 1,
id: 2,
icon: <IconEdit />,
text: t<string>("Bookmarks.Bookmarks"),
numberOfTasks: bookmarkNotes.list?.data.length
numberOfItems: bookmarkNotes.list?.data.length
? Number(bookmarks?.length)
: 0,
},
];
const currentlySelectedListItem = listItems.find(
({ id }) => id === selectedListItem
);

const getArrayToMap = () => (selectedListItem === 0 ? notes : bookmarks);
const getArrayToMap = () => {
switch (selectedListItem) {
case 0:
return bookmarkNotes.list?.data;
case 1:
return notes;
case 2:
return bookmarks;
}
};

const handleBookmark = (id: number) =>
deleteBookmarkNote(id).then(() => {
Expand All @@ -105,9 +116,6 @@ const BookmarkNotes: FC<BookmarkNotesComponentProps> = ({
/>
</BookmarkNotesMenu>
<BookmarkNotesContent>
<BookmarkNotesContentHeader>
<Title level={4}>{currentlySelectedListItem?.text}</Title>
</BookmarkNotesContentHeader>
<BookmarkNotesList>
{getArrayToMap()?.map((item: API.BookmarkNote) => {
const { id, bookmarkable_type, value } = item;
Expand Down Expand Up @@ -137,9 +145,7 @@ const BookmarkNotes: FC<BookmarkNotesComponentProps> = ({
})}
</BookmarkNotesList>
{bookmarkNotes.list?.data.length === 0 && (
<Text $color="neutral600" weight="light">
{t<string>("Bookmarks.NoBookmarks")}
</Text>
<Text weight="light">{t<string>("Bookmarks.NoBookmarks")}</Text>
)}
</BookmarkNotesContent>
</BookmarkNotesBody>
Expand Down
27 changes: 17 additions & 10 deletions src/components/organisms/BookmarkNotes/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ export const BookmarkNotesContainer = styled.div`
min-width: 100%;
flex-direction: column;
background: ${({ theme }) =>
getStylesBasedOnTheme(theme.mode, theme.dm__background, theme.white)};
getStylesBasedOnTheme(
theme.mode,
theme.dm__cardBackgroundColor,
theme.cardBackgroundColor
)};
overflow: auto;
::-webkit-scrollbar {
width: 2px;
Expand All @@ -29,7 +33,6 @@ export const BookmarkNotesContainer = styled.div`
`;
export const BookmarkNotesBody = styled.div`
display: flex;

`;
export const BookmarkNotesHeader = styled.div`
${defaultFlex};
Expand All @@ -47,23 +50,18 @@ export const BookmarksPage = styled.div`
}
`;

export const BookmarkNotesContentHeader = styled.div`
${defaultFlex};
margin-bottom: 24px;
& h1 {
width: 30%;
}
`;
export const IconWrapper = styled.div`
border-radius: 50%;
border: 1px solid ${({ theme }) => theme.dm__primaryColor};
padding: 4px; ;
padding: 4px;
`;

export const BookmarkNotesMenu = styled.div`
border-right: 1px solid ${({ theme }) => theme.dm__primaryColor};
width: 25%;
padding: 12px 12px 12px 0px;
`;

export const BookmarkNotesContent = styled.div`
width: 100%;
padding: 24px 24px 24px 12px;
Expand All @@ -85,13 +83,22 @@ export const BookmarkNotesItem = styled.li`
align-self: center;
}
}
& > div {
transition: 0.3s;
}
&:hover {
& > div {
transform: scale(1.02);
}
}
Comment on lines +86 to +93
Copy link
Contributor

Choose a reason for hiding this comment

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

jak się da to warto tego diva zrobić z klasą albo jako osobny SC

`;

export const NoteText = styled(Text)`
text-transform: uppercase;
margin: 0px;
padding-top: 6px;
font-size: 12px;
cursor: pointer;
`;

export const StyledTitle = styled(Title)`
Expand Down
4 changes: 2 additions & 2 deletions src/components/organisms/ModalNote/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,11 @@ const ModalNote: FC<NoteModalProps> = ({
<TextArea
name="noteValue"
id="noteValue"
label={t("Note.yourNote", {
label={t("Bookmarks.YourNote", {
defaultValue: "Your note",
})}
placeholder={
t("Note.yourNote", {
t("Bookmarks.WriteNote", {
defaultValue: "Write a note...",
}) ?? undefined
}
Expand Down
26 changes: 15 additions & 11 deletions src/components/organisms/TasksComponent/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { getStylesBasedOnTheme } from '../../../utils/utils';
import { Title, Text } from '../../../';
import styled, { css } from 'styled-components';
import { getStylesBasedOnTheme } from "../../../utils/utils";
import { Title, Text } from "../../../";
import styled, { css } from "styled-components";

const defaultFlex = css`
display: flex;
Expand All @@ -14,7 +14,11 @@ export const TasksContainer = styled.div`
width: 100%;
flex-direction: column;
background: ${({ theme }) =>
getStylesBasedOnTheme(theme.mode, theme.dm__background, theme.white)};
getStylesBasedOnTheme(
theme.mode,
theme.dm__cardBackgroundColor,
theme.cardBackgroundColor
)};
overflow: auto;
::-webkit-scrollbar {
width: 2px;
Expand Down Expand Up @@ -82,13 +86,13 @@ export const TaskDateWrapper = styled.div`

export const StyledTitle = styled(Title)<{ $isCompleted: boolean }>`
text-decoration: ${({ $isCompleted }) =>
$isCompleted ? 'line-through' : 'none'};
$isCompleted ? "line-through" : "none"};
`;

export const ProgrammeText = styled(Text)`
text-transform: uppercase;
font-size: 12px;
.rc-tree-select-arrow{
.rc-tree-select-arrow {
display: none;
}
.rc-tree-select-selection-item {
Expand All @@ -100,10 +104,10 @@ export const ProgrammeText = styled(Text)`
cursor: pointer;
}
.rc-tree-select,
.rc-tree-select-selector{
.rc-tree-select-selector {
padding: 0px !important;
}
`;
}
`;

export const TasksPage = styled.div`
display: flex;
Expand All @@ -116,7 +120,7 @@ export const TasksPage = styled.div`
`;

export const TaskDate = styled.div<{
$date?: 'Today' | 'Tomorrow' | 'Upcoming' | 'Overdue';
$date?: "Today" | "Tomorrow" | "Upcoming" | "Overdue";
}>`
display: flex;
justify-content: flex-start;
Expand All @@ -126,7 +130,7 @@ export const TaskDate = styled.div<{
p,
picture {
color: ${({ $date, theme }) =>
['Today', 'Overdue'].includes($date ?? '')
["Today", "Overdue"].includes($date ?? "")
? theme.errorColor
: theme.positive};
}
Expand Down
Binary file removed src/styleguide/.DS_Store
View file
Open in desktop
Binary file not shown.
20 changes: 16 additions & 4 deletions src/styleguide/Icons/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@ export const IconEditAlt = () => (
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.078 0.539475C14.4686 0.148951 15.1017 0.148951 15.4923 0.539475L18.4923 3.53948C18.8828 3.93 18.8828 4.56316 18.4923 4.95369L9.49226 13.9537C9.30473 14.1412 9.05037 14.2466 8.78516 14.2466H5.78516C5.23287 14.2466 4.78516 13.7989 4.78516 13.2466V10.2466C4.78516 9.98137 4.89051 9.72701 5.07805 9.53948L14.078 0.539475ZM6.78516 10.6608V12.2466H8.37094L16.3709 4.24658L14.7852 2.6608L6.78516 10.6608ZM0.785156 4.24658C0.785156 3.14201 1.68059 2.24658 2.78516 2.24658H7.78516C8.33744 2.24658 8.78516 2.6943 8.78516 3.24658C8.78516 3.79887 8.33744 4.24658 7.78516 4.24658H2.78516V16.2466H14.7852V11.2466C14.7852 10.6943 15.2329 10.2466 15.7852 10.2466C16.3374 10.2466 16.7852 10.6943 16.7852 11.2466V16.2466C16.7852 17.3512 15.8897 18.2466 14.7852 18.2466H2.78516C1.68059 18.2466 0.785156 17.3512 0.785156 16.2466V4.24658Z"
fill="#4A4A4A"
fill="currentColor"
/>
</svg>
);
Expand All @@ -18,12 +17,25 @@ export const IconEdit = () => (
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.078 0.539475C14.4686 0.148951 15.1017 0.148951 15.4923 0.539475L19.4923 4.53948C19.8828 4.93 19.8828 5.56316 19.4923 5.95369L6.49226 18.9537C6.30473 19.1412 6.05037 19.2466 5.78516 19.2466H1.78516C1.23287 19.2466 0.785156 18.7989 0.785156 18.2466V14.2466C0.785156 13.9814 0.890513 13.727 1.07805 13.5395L11.0778 3.53968L14.078 0.539475ZM11.7852 5.6608L2.78516 14.6608V17.2466H5.37094L14.3709 8.24658L11.7852 5.6608ZM15.7852 6.83237L17.3709 5.24658L14.7852 2.6608L13.1994 4.24658L15.7852 6.83237Z"
fill="#4A4A4A"
fill="currentColor"
/>
</svg>
);

export const IconAll = () => (
<svg
width="20"
height="20"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m14.776 18.689 7.012-7.012c.133-.133.217-.329.217-.532 0-.179-.065-.363-.218-.515l-2.423-2.415c-.144-.143-.333-.215-.522-.215s-.378.072-.523.215l-7.027 6.996c-.442 1.371-1.158 3.586-1.265 3.952-.125.433.199.834.573.834.41 0 .696-.099 4.176-1.308zm-2.258-2.392 1.17 1.171c-.704.232-1.275.418-1.729.566zm.968-1.154 5.356-5.331 1.347 1.342-5.346 5.347zm-4.486-1.393c0-.402-.356-.75-.75-.75-2.561 0-2.939 0-5.5 0-.394 0-.75.348-.75.75s.356.75.75.75h5.5c.394 0 .75-.348.75-.75zm5-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75zm0-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75zm0-3c0-.402-.356-.75-.75-.75-2.561 0-7.939 0-10.5 0-.394 0-.75.348-.75.75s.356.75.75.75h10.5c.394 0 .75-.348.75-.75z"
fill="currentColor"
/>
</svg>
);
Loading
Loading