date item and round button color themes were fixed
This commit is contained in:
parent
ed477e4d93
commit
ffd508a12b
@ -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
|
||||
|
@ -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",
|
||||
|
@ -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};
|
||||
}
|
||||
|
16
packages/common/components/ColorTheme/styled/dateItem.js
Normal file
16
packages/common/components/ColorTheme/styled/dateItem.js
Normal 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);
|
@ -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";
|
||||
|
||||
|
19
packages/common/components/ColorTheme/styled/roundButton.js
Normal file
19
packages/common/components/ColorTheme/styled/roundButton.js
Normal 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);
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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 };
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user