Web:Client:Add CalendarComponent.
This commit is contained in:
parent
be954b594c
commit
6ed7eacf8c
@ -5,7 +5,7 @@ import { hugeMobile, tablet } from "@docspace/components/utils/device";
|
||||
|
||||
const StyledInfoPanelBody = styled.div`
|
||||
height: auto;
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 0px 20px 0 3px;
|
||||
@ -13,8 +13,8 @@ const StyledInfoPanelBody = styled.div`
|
||||
: css`
|
||||
padding: 0px 3px 0 20px;
|
||||
`}
|
||||
color: ${props => props.theme.infoPanel.textColor};
|
||||
background-color: ${props => props.theme.infoPanel.backgroundColor};
|
||||
color: ${(props) => props.theme.infoPanel.textColor};
|
||||
background-color: ${(props) => props.theme.infoPanel.backgroundColor};
|
||||
|
||||
.no-item {
|
||||
text-align: center;
|
||||
@ -29,7 +29,7 @@ const StyledInfoPanelBody = styled.div`
|
||||
}
|
||||
|
||||
@media ${hugeMobile} {
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 0px 16px 0 8px;
|
||||
@ -44,7 +44,7 @@ const StyledTitle = styled.div`
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 24px 20px 24px 0px;
|
||||
@ -55,7 +55,7 @@ const StyledTitle = styled.div`
|
||||
margin-left: -20px;
|
||||
`}
|
||||
|
||||
background: ${props => props.theme.infoPanel.backgroundColor};
|
||||
background: ${(props) => props.theme.infoPanel.backgroundColor};
|
||||
|
||||
display: flex;
|
||||
flex-wrap: no-wrap;
|
||||
@ -74,7 +74,7 @@ const StyledTitle = styled.div`
|
||||
}
|
||||
&.is-room {
|
||||
border-radius: 6px;
|
||||
outline: 1px solid ${props => props.theme.itemIcon.borderColor};
|
||||
outline: 1px solid ${(props) => props.theme.itemIcon.borderColor};
|
||||
}
|
||||
}
|
||||
|
||||
@ -91,12 +91,12 @@ const StyledTitle = styled.div`
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.withBottomBorder &&
|
||||
css`
|
||||
width: calc(100% + 20px);
|
||||
margin: 0 -20px 0 -20px;
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 23px 23px 23px 0;
|
||||
@ -104,7 +104,7 @@ const StyledTitle = styled.div`
|
||||
: css`
|
||||
padding: 23px 0 23px 20px;
|
||||
`}
|
||||
border-bottom: ${props =>
|
||||
border-bottom: ${(props) =>
|
||||
`solid 1px ${props.theme.infoPanel.borderColor}`};
|
||||
`}
|
||||
|
||||
@ -115,7 +115,7 @@ const StyledTitle = styled.div`
|
||||
|
||||
@media ${hugeMobile} {
|
||||
width: calc(100vw - 32px);
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 24px 16px 24px 0;
|
||||
@ -124,11 +124,11 @@ const StyledTitle = styled.div`
|
||||
padding: 24px 0 24px 16px;
|
||||
`}
|
||||
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.withBottomBorder &&
|
||||
css`
|
||||
width: calc(100% + 16px);
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding: 23px 16px 23px 0;
|
||||
@ -184,7 +184,7 @@ const StyledProperties = styled.div`
|
||||
background: red;
|
||||
max-width: 195px;
|
||||
margin: 0;
|
||||
background: ${props => props.theme.infoPanel.details.tagBackground};
|
||||
background: ${(props) => props.theme.infoPanel.details.tagBackground};
|
||||
p {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@ -209,7 +209,7 @@ const StyledProperties = styled.div`
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
path {
|
||||
fill: ${props =>
|
||||
fill: ${(props) =>
|
||||
props.theme.infoPanel.details.commentEditorIconColor};
|
||||
}
|
||||
}
|
||||
@ -247,7 +247,27 @@ const StyledProperties = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledItemOptions = styled.div`
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
|
||||
display: flex;
|
||||
`;
|
||||
|
||||
StyledInfoPanelBody.defaultProps = { theme: Base };
|
||||
StyledTitle.defaultProps = { theme: Base };
|
||||
StyledItemOptions.defaultProps = { theme: Base };
|
||||
|
||||
export { StyledInfoPanelBody, StyledTitle, StyledSubtitle, StyledProperties };
|
||||
export {
|
||||
StyledInfoPanelBody,
|
||||
StyledTitle,
|
||||
StyledSubtitle,
|
||||
StyledProperties,
|
||||
StyledItemOptions,
|
||||
};
|
||||
|
@ -0,0 +1,46 @@
|
||||
import { useState } from "react";
|
||||
import styled from "styled-components";
|
||||
import Calendar from "@docspace/components/calendar";
|
||||
|
||||
const StyledCalendar = styled.div`
|
||||
position: relative;
|
||||
|
||||
.calendar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
/* ${(props) =>
|
||||
props.isMobile &&
|
||||
css`
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
`} */
|
||||
}
|
||||
`;
|
||||
|
||||
const CalendarComponent = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selectedDate, setSelectedDate] = useState(null);
|
||||
|
||||
const toggleCalendar = () => setIsOpen((open) => !open);
|
||||
const onDateSet = (date) => {
|
||||
console.log("date", date);
|
||||
setSelectedDate(date);
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledCalendar>
|
||||
<div onClick={toggleCalendar}>Calendar</div>
|
||||
{isOpen && (
|
||||
<Calendar
|
||||
className="calendar"
|
||||
setSelectedDate={onDateSet}
|
||||
selectedDate={selectedDate}
|
||||
/>
|
||||
)}
|
||||
</StyledCalendar>
|
||||
);
|
||||
};
|
||||
|
||||
export default CalendarComponent;
|
@ -6,15 +6,17 @@ import { ReactSVG } from "react-svg";
|
||||
import { Text } from "@docspace/components";
|
||||
|
||||
import ItemContextOptions from "./ItemContextOptions";
|
||||
import CalendarComponent from "./Calendar";
|
||||
|
||||
import { StyledTitle } from "../../styles/common";
|
||||
import { StyledTitle, StyledItemOptions } from "../../styles/common";
|
||||
|
||||
const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
|
||||
const FilesItemTitle = ({ t, selection, isSeveralItems, openHistory }) => {
|
||||
const itemTitleRef = useRef();
|
||||
|
||||
if (isSeveralItems) return <></>;
|
||||
|
||||
const icon = selection.icon;
|
||||
//only history
|
||||
|
||||
return (
|
||||
<StyledTitle ref={itemTitleRef}>
|
||||
@ -27,11 +29,15 @@ const FilesItemTitle = ({ t, selection, isSeveralItems }) => {
|
||||
</div>
|
||||
<Text className="text">{selection.title}</Text>
|
||||
{selection && (
|
||||
<StyledItemOptions>
|
||||
{openHistory && <CalendarComponent />}
|
||||
|
||||
<ItemContextOptions
|
||||
t={t}
|
||||
itemTitleRef={itemTitleRef}
|
||||
selection={selection}
|
||||
/>
|
||||
</StyledItemOptions>
|
||||
)}
|
||||
</StyledTitle>
|
||||
);
|
||||
|
@ -6,16 +6,16 @@ import { ContextMenu, ContextMenuButton } from "@docspace/components";
|
||||
|
||||
import ContextHelper from "../../helpers/ContextHelper";
|
||||
|
||||
const StyledItemContextOptions = styled.div`
|
||||
${props =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
margin-right: auto;
|
||||
`
|
||||
: css`
|
||||
margin-left: auto;
|
||||
`}
|
||||
`;
|
||||
// const StyledItemContextOptions = styled.div`
|
||||
// ${props =>
|
||||
// props.theme.interfaceDirection === "rtl"
|
||||
// ? css`
|
||||
// margin-right: auto;
|
||||
// `
|
||||
// : css`
|
||||
// margin-left: auto;
|
||||
// `}
|
||||
// `;
|
||||
|
||||
const ItemContextOptions = ({
|
||||
t,
|
||||
@ -33,7 +33,7 @@ const ItemContextOptions = ({
|
||||
|
||||
const contextMenuRef = useRef();
|
||||
|
||||
const onContextMenu = e => {
|
||||
const onContextMenu = (e) => {
|
||||
e.button === 2;
|
||||
if (!contextMenuRef.current.menuRef.current) itemTitleRef.current.click(e);
|
||||
contextMenuRef.current.show(e);
|
||||
@ -70,7 +70,7 @@ const ItemContextOptions = ({
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledItemContextOptions>
|
||||
<>
|
||||
<ContextMenu
|
||||
ref={contextMenuRef}
|
||||
getContextModel={getData}
|
||||
@ -91,7 +91,7 @@ const ItemContextOptions = ({
|
||||
displayType="toggle"
|
||||
/>
|
||||
)}
|
||||
</StyledItemContextOptions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -44,12 +44,15 @@ const ItemTitle = ({
|
||||
? selectionParentRoom
|
||||
: selection;
|
||||
|
||||
const openHistory = roomsView === "info_history";
|
||||
|
||||
return (
|
||||
<FilesItemTitle
|
||||
selectionLength={selectionLength}
|
||||
selection={filesItemSelection}
|
||||
isSeveralItems={isSeveralItems}
|
||||
getIcon={getIcon}
|
||||
openHistory={openHistory}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
@ -41,8 +41,11 @@ const HistoryBlock = ({
|
||||
? initiator.avatarSmall
|
||||
: DefaultUserAvatarSmall;
|
||||
|
||||
console.log("json.ModifiedDate", json.ModifiedDate);
|
||||
|
||||
return (
|
||||
<StyledHistoryBlock
|
||||
id="StyledHistoryBlock"
|
||||
withBottomDivider={!isLastEntity}
|
||||
isUserAction={isUserAction}
|
||||
>
|
||||
|
@ -72,8 +72,10 @@ const History = ({
|
||||
if (!selectionHistory) return <Loaders.InfoPanelViewLoader view="history" />;
|
||||
if (!selectionHistory?.length) return <NoHistory t={t} />;
|
||||
|
||||
console.log("selectionHistory", selectionHistory);
|
||||
|
||||
return (
|
||||
<StyledHistoryList>
|
||||
<StyledHistoryList id="StyledHistoryList">
|
||||
{selectionHistory.map(({ day, feeds }) => [
|
||||
<StyledHistorySubtitle key={day}>{day}</StyledHistorySubtitle>,
|
||||
...feeds.map((feed, i) => (
|
||||
|
@ -10,7 +10,7 @@ const StyledScrollbar = styled(Scrollbar)`
|
||||
box-sizing: border-box;
|
||||
& .scroll-wrapper > .scroller > .scroll-body {
|
||||
overflow: hidden !important;
|
||||
${props =>
|
||||
${(props) =>
|
||||
props.theme.interfaceDirection === "rtl"
|
||||
? css`
|
||||
padding-left: 17px !important;
|
||||
@ -30,11 +30,14 @@ const StyledScrollbar = styled(Scrollbar)`
|
||||
const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => {
|
||||
const content = children?.props?.children;
|
||||
|
||||
console.log("SubInfoPanelBody");
|
||||
|
||||
return (
|
||||
<StyledScrollbar
|
||||
$isScrollLocked={isInfoPanelScrollLocked}
|
||||
scrollclass="section-scroll"
|
||||
stype="mediumBlack">
|
||||
stype="mediumBlack"
|
||||
>
|
||||
{content}
|
||||
</StyledScrollbar>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user