Web: Components: LinkRow: fixed styles
This commit is contained in:
parent
afeea40eb7
commit
f9adab1e99
@ -215,7 +215,9 @@ const LinkRow = (props: LinkRowProps) => {
|
|||||||
expirationDate: moment.Moment | null,
|
expirationDate: moment.Moment | null,
|
||||||
) => {
|
) => {
|
||||||
const newLink = { ...link };
|
const newLink = { ...link };
|
||||||
newLink.sharedTo.expirationDate = moment(expirationDate);
|
newLink.sharedTo.expirationDate = expirationDate
|
||||||
|
? moment(expirationDate)
|
||||||
|
: null;
|
||||||
editExternalLinkAction(newLink);
|
editExternalLinkAction(newLink);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -230,6 +232,7 @@ const LinkRow = (props: LinkRowProps) => {
|
|||||||
isPrimaryLink={isPrimaryLink}
|
isPrimaryLink={isPrimaryLink}
|
||||||
onAccessRightsSelect={onAccessRightsSelect}
|
onAccessRightsSelect={onAccessRightsSelect}
|
||||||
changeExpirationOption={changeExpirationOption}
|
changeExpirationOption={changeExpirationOption}
|
||||||
|
isArchiveFolder={isArchiveFolder}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -50,12 +50,23 @@ const StyledLinks = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
|
const StyledLinkRow = styled.div<{ isExpired?: boolean; isDisabled?: boolean }>`
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 68px;
|
height: 68px;
|
||||||
|
|
||||||
|
opacity: ${({ isDisabled }) => (isDisabled ? 0.4 : 1)};
|
||||||
|
|
||||||
|
.avatar-wrapper,
|
||||||
|
.avatar-wrapper:hover {
|
||||||
|
svg {
|
||||||
|
path {
|
||||||
|
fill: ${({ theme }) => theme.infoPanel.avatarColor};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.avatar_role-wrapper {
|
.avatar_role-wrapper {
|
||||||
svg {
|
svg {
|
||||||
path:nth-child(3) {
|
path:nth-child(3) {
|
||||||
@ -76,6 +87,7 @@ const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0;
|
gap: 0;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.internal-combobox {
|
.internal-combobox {
|
||||||
@ -102,6 +114,14 @@ const StyledLinkRow = styled.div<{ isExpired?: boolean }>`
|
|||||||
.expired-options {
|
.expired-options {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: ${({ theme }) => theme.infoPanel.links.color};
|
||||||
|
:hover {
|
||||||
|
color: ${({ theme }) => theme.infoPanel.links.color};
|
||||||
|
background: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
& > span > a {
|
& > span > a {
|
||||||
padding: 0px !important;
|
padding: 0px !important;
|
||||||
}
|
}
|
||||||
|
@ -58,6 +58,7 @@ export type LinkRowProps =
|
|||||||
loadingLinks: (string | number)[];
|
loadingLinks: (string | number)[];
|
||||||
isRoomsLink?: undefined;
|
isRoomsLink?: undefined;
|
||||||
isPrimaryLink?: undefined;
|
isPrimaryLink?: undefined;
|
||||||
|
isArchiveFolder?: undefined;
|
||||||
getData: () => undefined;
|
getData: () => undefined;
|
||||||
onOpenContextMenu?: undefined;
|
onOpenContextMenu?: undefined;
|
||||||
onCloseContextMenu?: undefined;
|
onCloseContextMenu?: undefined;
|
||||||
@ -75,7 +76,8 @@ export type LinkRowProps =
|
|||||||
availableExternalRights: TAvailableExternalRights;
|
availableExternalRights: TAvailableExternalRights;
|
||||||
loadingLinks: (string | number)[];
|
loadingLinks: (string | number)[];
|
||||||
isRoomsLink?: boolean;
|
isRoomsLink?: boolean;
|
||||||
isPrimaryLink?: boolean;
|
isPrimaryLink: boolean;
|
||||||
|
isArchiveFolder: boolean;
|
||||||
getData: () => ContextMenuModel[];
|
getData: () => ContextMenuModel[];
|
||||||
onOpenContextMenu: (e: React.MouseEvent) => void;
|
onOpenContextMenu: (e: React.MouseEvent) => void;
|
||||||
onCloseContextMenu: () => void;
|
onCloseContextMenu: () => void;
|
||||||
|
@ -66,6 +66,7 @@ const LinkRow = ({
|
|||||||
loadingLinks,
|
loadingLinks,
|
||||||
isRoomsLink,
|
isRoomsLink,
|
||||||
isPrimaryLink,
|
isPrimaryLink,
|
||||||
|
isArchiveFolder,
|
||||||
getData,
|
getData,
|
||||||
onOpenContextMenu,
|
onOpenContextMenu,
|
||||||
onCloseContextMenu,
|
onCloseContextMenu,
|
||||||
@ -124,6 +125,7 @@ const LinkRow = ({
|
|||||||
<StyledLinkRow
|
<StyledLinkRow
|
||||||
isExpired={isExpiredLink}
|
isExpired={isExpiredLink}
|
||||||
key={`share-link-row-${index * 5}`}
|
key={`share-link-row-${index * 5}`}
|
||||||
|
isDisabled={isArchiveFolder}
|
||||||
>
|
>
|
||||||
{isLoaded ? (
|
{isLoaded ? (
|
||||||
<Loader className="loader" size="20px" type={LoaderTypes.track} />
|
<Loader className="loader" size="20px" type={LoaderTypes.track} />
|
||||||
@ -137,7 +139,9 @@ const LinkRow = ({
|
|||||||
)}
|
)}
|
||||||
<div className="link-options">
|
<div className="link-options">
|
||||||
{isRoomsLink ? (
|
{isRoomsLink ? (
|
||||||
<Text className="link-options_title">{linkTitle}</Text>
|
<Text className="link-options_title" truncate>
|
||||||
|
{linkTitle}
|
||||||
|
</Text>
|
||||||
) : !isExpiredLink ? (
|
) : !isExpiredLink ? (
|
||||||
<ComboBox
|
<ComboBox
|
||||||
className="internal-combobox"
|
className="internal-combobox"
|
||||||
@ -160,12 +164,13 @@ const LinkRow = ({
|
|||||||
<ExpiredComboBox
|
<ExpiredComboBox
|
||||||
link={link}
|
link={link}
|
||||||
changeExpirationOption={changeExpirationOption}
|
changeExpirationOption={changeExpirationOption}
|
||||||
isDisabled={isLoaded}
|
isDisabled={isLoaded || isArchiveFolder}
|
||||||
isRoomsLink={isRoomsLink}
|
isRoomsLink={isRoomsLink}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="link-actions">
|
<div className="link-actions">
|
||||||
|
{!isArchiveFolder && (
|
||||||
<IconButton
|
<IconButton
|
||||||
size={16}
|
size={16}
|
||||||
className="link-row_copy-icon"
|
className="link-row_copy-icon"
|
||||||
@ -174,6 +179,7 @@ const LinkRow = ({
|
|||||||
title={t("Common:CreateAndCopy")}
|
title={t("Common:CreateAndCopy")}
|
||||||
isDisabled={isExpiredLink || isLoaded}
|
isDisabled={isExpiredLink || isLoaded}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
{isRoomsLink ? (
|
{isRoomsLink ? (
|
||||||
<>
|
<>
|
||||||
<AccessRightSelect
|
<AccessRightSelect
|
||||||
@ -185,8 +191,9 @@ const LinkRow = ({
|
|||||||
directionY="bottom"
|
directionY="bottom"
|
||||||
type="onlyIcon"
|
type="onlyIcon"
|
||||||
manualWidth="300px"
|
manualWidth="300px"
|
||||||
isDisabled={isExpiredLink || isLoaded}
|
isDisabled={isExpiredLink || isLoaded || isArchiveFolder}
|
||||||
/>
|
/>
|
||||||
|
{!isArchiveFolder && (
|
||||||
<ContextMenuButton
|
<ContextMenuButton
|
||||||
getData={getData}
|
getData={getData}
|
||||||
title={t("Files:ShowLinkActions")}
|
title={t("Files:ShowLinkActions")}
|
||||||
@ -195,6 +202,7 @@ const LinkRow = ({
|
|||||||
onClose={onCloseContextMenu}
|
onClose={onCloseContextMenu}
|
||||||
isDisabled={isExpiredLink || isLoaded}
|
isDisabled={isExpiredLink || isLoaded}
|
||||||
/>
|
/>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<ComboBox
|
<ComboBox
|
||||||
|
@ -2081,8 +2081,10 @@ export const getBaseTheme = () => {
|
|||||||
closeButtonBg: "transparent",
|
closeButtonBg: "transparent",
|
||||||
|
|
||||||
nameColor: "#858585",
|
nameColor: "#858585",
|
||||||
|
avatarColor: "#555F65",
|
||||||
|
|
||||||
links: {
|
links: {
|
||||||
|
color: "#4781D1",
|
||||||
iconColor: "#3B72A7",
|
iconColor: "#3B72A7",
|
||||||
iconErrorColor: "#F24724",
|
iconErrorColor: "#F24724",
|
||||||
primaryColor: "#555F65",
|
primaryColor: "#555F65",
|
||||||
|
@ -2053,8 +2053,10 @@ const Dark: TTheme = {
|
|||||||
closeButtonBg: "#a2a2a2",
|
closeButtonBg: "#a2a2a2",
|
||||||
|
|
||||||
nameColor: "#A3A9AE",
|
nameColor: "#A3A9AE",
|
||||||
|
avatarColor: "#A3A9AE",
|
||||||
|
|
||||||
links: {
|
links: {
|
||||||
|
color: "#4781D1",
|
||||||
iconColor: "#858585",
|
iconColor: "#858585",
|
||||||
iconErrorColor: "#E06451",
|
iconErrorColor: "#E06451",
|
||||||
primaryColor: "#ADADAD",
|
primaryColor: "#ADADAD",
|
||||||
|
Loading…
Reference in New Issue
Block a user