date item and round button color themes were fixed

This commit is contained in:
Vladimir Khvan 2023-05-15 03:09:50 +05:00
parent ed477e4d93
commit ffd508a12b
13 changed files with 118 additions and 74 deletions

View File

@ -6,6 +6,8 @@ import {
MainButtonTheme,
CatalogItemTheme,
CalendarTheme,
DateItemTheme,
RoundButtonTheme,
BadgeTheme,
SubmenuTextTheme,
SubmenuItemLabelTheme,
@ -199,6 +201,24 @@ const ColorTheme = forwardRef(
/>
);
}
case ThemeType.RoundButton: {
return (
<RoundButtonTheme
{...props}
$currentColorScheme={currentColorScheme}
ref={ref}
/>
);
}
case ThemeType.DateItem: {
return (
<DateItemTheme
{...props}
$currentColorScheme={currentColorScheme}
ref={ref}
/>
);
}
case ThemeType.ComboButton: {
return (
<ComboButtonTheme

View File

@ -3,7 +3,6 @@ export const ThemeType = {
MainButton: "mainButton",
CatalogItem: "catalogItem",
Badge: "badge",
Calendar: 'calendar',
SubmenuText: "submenuText",
SubmenuItemLabel: "submenuItemLabel",
ToggleButton: "toggleButton",
@ -14,6 +13,8 @@ export const ThemeType = {
FilterBlockItemTag: "filterBlockItemTag",
IconWrapper: "iconWrapper",
Calendar: "calendar",
DateItem: "dateItem",
RoundButton: "RoundButton",
VersionBadge: "versionBadge",
Textarea: "textarea",
InputBlock: "inputBlock",

View File

@ -1,9 +1,7 @@
import styled, { css } from "styled-components";
import {
Container,
DateItem,
CurrentDateItem,
RoundButton,
HeaderActionIcon,
} from "@docspace/components/calendar/styled-components";
@ -20,27 +18,6 @@ const getDefaultStyles = ({ $currentColorScheme }) =>
background-color: ${$currentColorScheme.main.accent};
}
}
${DateItem} {
color: ${(props) =>
props.disabled
? props.theme.calendar.disabledColor
: props.focused
? $currentColorScheme.main.accent
: props.theme.calendar.color};
border-color: ${(props) => (props.focused ? $currentColorScheme.main.accent : "transparent")};
}
${RoundButton} {
:hover {
outline: ${(props) =>
props.disabled
? `1px solid ${props.theme.calendar.outlineColor}`
: `2px solid ${$currentColorScheme.main.accent}`};
span {
border-color: ${(props) =>
props.disabled ? props.theme.calendar.disabledArrow : $currentColorScheme.main.accent};
}
}
}
${HeaderActionIcon} {
border-color: ${$currentColorScheme.main.accent};
}

View File

@ -0,0 +1,16 @@
import styled, { css } from "styled-components";
import { DateItem } from "@docspace/components/calendar/styled-components";
const getDefaultStyles = ({ $currentColorScheme }) =>
$currentColorScheme &&
css`
color: ${(props) =>
props.disabled
? props.theme.calendar.disabledColor
: props.focused
? $currentColorScheme.main.accent
: props.theme.calendar.color};
border-color: ${(props) => (props.focused ? $currentColorScheme.main.accent : "transparent")};
`;
export default styled(DateItem)(getDefaultStyles);

View File

@ -6,7 +6,11 @@ export { default as CatalogItemTheme } from "./catalogItem";
export { default as BadgeTheme } from "./badge";
export { default as CalendarTheme } from './calendar'
export { default as CalendarTheme } from "./calendar";
export { default as RoundButtonTheme } from "./roundButton";
export { default as DateItemTheme } from "./dateItem";
export { default as SubmenuTextTheme } from "./submenuText";

View File

@ -0,0 +1,19 @@
import styled, { css } from "styled-components";
import { RoundButton } from "@docspace/components/calendar/styled-components";
const getDefaultStyles = ({ $currentColorScheme }) =>
$currentColorScheme &&
css`
:hover {
outline: ${(props) =>
props.disabled
? `1px solid ${props.theme.calendar.outlineColor}`
: `2px solid ${$currentColorScheme.main.accent}`};
span {
border-color: ${(props) =>
props.disabled ? props.theme.calendar.disabledArrow : $currentColorScheme.main.accent};
}
}
`;
export default styled(RoundButton)(getDefaultStyles);

View File

@ -19,6 +19,7 @@ const Calendar = ({
initialDate,
onChange,
isMobile,
forwardedRef,
}) => {
moment.locale(locale);
@ -53,6 +54,7 @@ const Calendar = ({
className={className}
style={style}
isMobile={isMobile}
ref={forwardedRef}
>
{selectedScene === 0 ? (
<Days

View File

@ -1,15 +1,18 @@
import React from "react";
import styled from "styled-components";
import { DateItem } from "./DateItem";
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
export const CurrentDateItem = styled(DateItem)`
export const CurrentDateItem = styled(({ ...props }) => (
<ColorTheme themeId={ThemeType.DateItem} {...props} />
))`
border-radius: 50%;
color: white;
color: white !important;
:hover{
color: white;
:hover {
color: white !important;
}
:focus{
color: white;
:focus {
color: white !important;
}
`;

View File

@ -1,19 +1,23 @@
import React from "react";
import styled from "styled-components";
import { DateItem } from "./";
import Base from "../../themes/base";
export const SecondaryDateItem = styled(DateItem)`
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
export const SecondaryDateItem = styled(({ ...props }) => (
<ColorTheme themeId={ThemeType.DateItem} {...props} />
))`
color: ${(props) =>
props.disabled
? props.theme.calendar.disabledColor
: props.theme.calendar.pastColor};
: props.theme.calendar.pastColor} !important;
:hover {
cursor: ${(props) => (props.disabled ? "auto" : "pointer")};
color: ${(props) =>
props.disabled
? props.theme.calendar.disabledColor
: props.theme.calendar.pastColor};
: props.theme.calendar.pastColor} !important;
}
`;
SecondaryDateItem.defaultProps = { theme: Base };

View File

@ -1,10 +1,6 @@
import React from "react";
import {
ButtonsContainer,
RoundButton,
PrevIcon,
NextIcon,
} from "../styled-components";
import { ButtonsContainer, PrevIcon, NextIcon } from "../styled-components";
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
export const HeaderButtons = ({
onLeftClick,
@ -14,17 +10,22 @@ export const HeaderButtons = ({
}) => {
return (
<ButtonsContainer>
<RoundButton
<ColorTheme
themeId={ThemeType.RoundButton}
style={{ marginRight: "12px" }}
onClick={onLeftClick}
disabled={isLeftDisabled}
>
<PrevIcon />
</RoundButton>
</ColorTheme>
<RoundButton onClick={onRightClick} disabled={isRightDisabled}>
<ColorTheme
themeId={ThemeType.RoundButton}
onClick={onRightClick}
disabled={isRightDisabled}
>
<NextIcon />
</RoundButton>
</ColorTheme>
</ButtonsContainer>
);
};

View File

@ -2,11 +2,8 @@ import React from "react";
import moment from "moment";
import { getCalendarDays } from "./getCalendarDays";
import {
CurrentDateItem,
DateItem,
SecondaryDateItem,
} from "../styled-components";
import { CurrentDateItem, SecondaryDateItem } from "../styled-components";
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
const onDateClick = (handleDateChange, newDate) => {
handleDateChange(moment(newDate));
@ -38,7 +35,8 @@ export const getDayElements = (
</SecondaryDateItem>
)),
currentMonthDays: calendarDays.currentMonthDays.map((day) => (
<DateItem
<ColorTheme
themeId={ThemeType.DateItem}
key={day.key}
onClick={() => onClick(moment(day.key, dateFormat))}
disabled={
@ -47,7 +45,7 @@ export const getDayElements = (
}
>
{day.value}
</DateItem>
</ColorTheme>
)),
nextMonthDays: calendarDays.nextMonthDays.map((day) => (
<SecondaryDateItem
@ -84,7 +82,8 @@ export const getDayElements = (
);
} else if (day.key === selectedDateFormated) {
monthDays[key][index] = (
<DateItem
<ColorTheme
themeId={ThemeType.DateItem}
key={day.key}
focused
onClick={() => onClick(moment(day.key, dateFormat))}
@ -94,7 +93,7 @@ export const getDayElements = (
}
>
{day.value}
</DateItem>
</ColorTheme>
);
}
});

View File

@ -1,10 +1,7 @@
import React from "react";
import moment from "moment";
import {
CurrentDateItem,
DateItem,
SecondaryDateItem,
} from "../styled-components";
import { CurrentDateItem, SecondaryDateItem } from "../styled-components";
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
const onDateClick = (dateString, setObservedDate, setSelectedScene) => {
setObservedDate((prevObservedDate) =>
@ -30,7 +27,8 @@ export const getMonthElements = (
const dateFormat = "YYYY-M";
const monthsElements = months.map((month) => (
<DateItem
<ColorTheme
themeId={ThemeType.DateItem}
big
key={month.key}
onClick={() => onClick(month.key)}
@ -40,7 +38,7 @@ export const getMonthElements = (
}
>
{month.value}
</DateItem>
</ColorTheme>
));
for (let i = 12; i < 16; i++) {
monthsElements[i] = (
@ -80,7 +78,8 @@ export const getMonthElements = (
);
} else if (month.key === formattedDate) {
monthsElements[index] = (
<DateItem
<ColorTheme
themeId={ThemeType.DateItem}
big
key={month.key}
focused
@ -91,7 +90,7 @@ export const getMonthElements = (
}
>
{month.value}
</DateItem>
</ColorTheme>
);
}
});

View File

@ -1,11 +1,8 @@
import React from "react";
import moment from "moment";
import moment from "moment";
import {
CurrentDateItem,
DateItem,
SecondaryDateItem,
} from "../styled-components";
import { CurrentDateItem, SecondaryDateItem } from "../styled-components";
import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
const onDateClick = (year, setObservedDate, setSelectedScene) => {
setObservedDate((prevObservedDate) =>
@ -41,7 +38,8 @@ export const getYearElements = (
for (let i = 1; i < 11; i++) {
yearElements[i] = (
<DateItem
<ColorTheme
themeId={ThemeType.DateItem}
big
key={years[i]}
onClick={() => onClick(years[i])}
@ -51,7 +49,7 @@ export const getYearElements = (
}
>
{years[i]}
</DateItem>
</ColorTheme>
);
}
@ -59,7 +57,8 @@ export const getYearElements = (
const selectedYearIndex = years.indexOf(moment(selectedDate).year());
if (selectedYearIndex !== -1) {
yearElements[selectedYearIndex] = (
<DateItem
<ColorTheme
themeId={ThemeType.DateItem}
big
focused
key={years[selectedYearIndex]}
@ -72,7 +71,7 @@ export const getYearElements = (
}
>
{years[selectedYearIndex]}
</DateItem>
</ColorTheme>
);
}
if (currentYearIndex !== -1) {