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