Merge branch 'develop' into feature/net6
This commit is contained in:
commit
f715d15473
@ -11,7 +11,7 @@ import DragAndDrop from "@appserver/components/drag-and-drop";
|
||||
import { tablet } from "@appserver/components/utils/device";
|
||||
|
||||
const paddingStyles = css`
|
||||
padding: 17px 7px 16px 24px;
|
||||
padding: 17px 7px 16px 20px;
|
||||
@media ${tablet} {
|
||||
padding: 16px 0 16px 24px;
|
||||
}
|
||||
|
||||
@ -8,21 +8,14 @@ import { isMobile } from "react-device-detect";
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
import NoUserSelect from "@appserver/components/utils/commonStyles";
|
||||
const StyledSectionHeader = styled.div`
|
||||
height: 41px;
|
||||
height: 42px;
|
||||
margin-right: 24px;
|
||||
margin-top: -1px;
|
||||
${NoUserSelect}
|
||||
${isMobile &&
|
||||
css`
|
||||
height: 20px;
|
||||
/* height: 49px;
|
||||
min-height: 48px;
|
||||
max-height: 49px; */
|
||||
width: ${(props) => !props.isLoaded && "100%"};
|
||||
margin-top: 64px;
|
||||
/* @media ${tablet} {
|
||||
margin-top: 55px;
|
||||
} */
|
||||
`}
|
||||
|
||||
@media ${desktop} {
|
||||
@ -51,6 +44,7 @@ const StyledSectionHeader = styled.div`
|
||||
}
|
||||
|
||||
.section-header {
|
||||
height: 50px;
|
||||
${isMobile &&
|
||||
css`
|
||||
max-width: calc(100vw - 32px);
|
||||
|
||||
@ -89,6 +89,9 @@ class ComboBox extends React.Component {
|
||||
toggleAction,
|
||||
textOverflow,
|
||||
showDisabledItems,
|
||||
comboIcon,
|
||||
manualY,
|
||||
manualX,
|
||||
} = this.props;
|
||||
const { isOpen, selectedOption } = this.state;
|
||||
|
||||
@ -132,13 +135,15 @@ class ComboBox extends React.Component {
|
||||
isOpen={isOpen}
|
||||
size={size}
|
||||
scaled={scaled}
|
||||
comboIcon={comboIcon}
|
||||
/>
|
||||
{displayType !== "toggle" && (
|
||||
<DropDown
|
||||
className="dropdown-container not-selectable"
|
||||
directionX={directionX}
|
||||
directionY={directionY}
|
||||
manualY="102%"
|
||||
manualY={manualY}
|
||||
manualX={manualX}
|
||||
open={isOpen}
|
||||
clickOutsideAction={this.handleClickOutside}
|
||||
{...dropDownMaxHeightProp}
|
||||
@ -210,6 +215,9 @@ ComboBox.propTypes = {
|
||||
textOverflow: PropTypes.bool,
|
||||
/** Disables clicking on the icon */
|
||||
disableIconClick: PropTypes.bool,
|
||||
comboIcon: PropTypes.string,
|
||||
manualY: PropTypes.string,
|
||||
manualX: PropTypes.string,
|
||||
};
|
||||
|
||||
ComboBox.defaultProps = {
|
||||
@ -221,6 +229,7 @@ ComboBox.defaultProps = {
|
||||
size: "base",
|
||||
disableIconClick: true,
|
||||
showDisabledItems: false,
|
||||
manualY: "102%",
|
||||
};
|
||||
|
||||
export default ComboBox;
|
||||
|
||||
@ -32,6 +32,7 @@ class ComboButton extends React.Component {
|
||||
isOpen,
|
||||
scaled,
|
||||
size,
|
||||
comboIcon,
|
||||
} = this.props;
|
||||
|
||||
const defaultOption = selectedOption.default;
|
||||
@ -85,12 +86,18 @@ class ComboButton extends React.Component {
|
||||
isOpen={isOpen}
|
||||
className="combo-buttons_arrow-icon"
|
||||
>
|
||||
{(withOptions || withAdvancedOptions) && (
|
||||
<StyledExpanderDownIcon
|
||||
size="scale"
|
||||
className="combo-buttons_expander-icon"
|
||||
/>
|
||||
)}
|
||||
{(withOptions || withAdvancedOptions) &&
|
||||
(comboIcon ? (
|
||||
<ReactSVG
|
||||
src={comboIcon}
|
||||
className="custom-combo-buttons_expander-icon"
|
||||
/>
|
||||
) : (
|
||||
<StyledExpanderDownIcon
|
||||
size="scale"
|
||||
className="combo-buttons_expander-icon"
|
||||
/>
|
||||
))}
|
||||
</StyledArrowIcon>
|
||||
</StyledComboButton>
|
||||
);
|
||||
@ -116,6 +123,7 @@ ComboButton.propTypes = {
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "content"]),
|
||||
scaled: PropTypes.bool,
|
||||
onClick: PropTypes.func,
|
||||
comboIcon: PropTypes.string,
|
||||
};
|
||||
|
||||
ComboButton.defaultProps = {
|
||||
|
||||
59
packages/asc-web-components/table-container/GroupMenuItem.js
Normal file
59
packages/asc-web-components/table-container/GroupMenuItem.js
Normal file
@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { ReactSVG } from "react-svg";
|
||||
import styled from "styled-components";
|
||||
import Button from "../button";
|
||||
import { mobile, tablet } from "../utils/device";
|
||||
|
||||
const StyledButton = styled(Button)`
|
||||
border: none;
|
||||
padding: 4px 10px 0 10px;
|
||||
height: 50px;
|
||||
min-width: fit-content;
|
||||
|
||||
:hover,
|
||||
:active {
|
||||
border: none;
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
.btnIcon {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
@media ${tablet} {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 60px;
|
||||
padding: 12px 12px 0 12px;
|
||||
.btnIcon {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
padding: 18px 16px 0 16px;
|
||||
height: 50px;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
const GroupMenuItem = ({ item }) => {
|
||||
const { label, disabled, onClick, iconUrl } = item;
|
||||
return (
|
||||
<StyledButton
|
||||
label={label}
|
||||
isDisabled={disabled}
|
||||
onClick={onClick}
|
||||
icon={<ReactSVG src={iconUrl} className="combo-button_selected-icon" />}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
GroupMenuItem.propTypes = {
|
||||
item: PropTypes.object,
|
||||
};
|
||||
|
||||
export default GroupMenuItem;
|
||||
@ -1,13 +1,8 @@
|
||||
import styled, { css } from "styled-components";
|
||||
import Base from "../themes/base";
|
||||
|
||||
const HeaderStyles = css`
|
||||
height: 39px;
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
z-index: 1;
|
||||
border-bottom: 1px solid #eceef1;
|
||||
`;
|
||||
import { mobile, tablet } from "../utils/device";
|
||||
import Scrollbar from "../scrollbar";
|
||||
import { isMobile } from "react-device-detect";
|
||||
|
||||
const StyledTableContainer = styled.div`
|
||||
-moz-user-select: none;
|
||||
@ -69,61 +64,69 @@ const StyledTableContainer = styled.div`
|
||||
.table-container_group-menu-checkbox {
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.table-container_group-menu-combobox {
|
||||
height: 24px;
|
||||
width: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
.combo-button {
|
||||
height: 24px;
|
||||
margin-top: 8px;
|
||||
width: 16px;
|
||||
|
||||
.combo-buttons_arrow-icon {
|
||||
margin: 8px 16px 0 0;
|
||||
|
||||
/* svg {
|
||||
path {
|
||||
fill: #333;
|
||||
}
|
||||
} */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-container_group-menu-separator {
|
||||
border-right: 1px solid #eceef1;
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTableGroupMenu = styled.div`
|
||||
position: relative;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
width: ${(props) => props.width};
|
||||
width: 100%;
|
||||
z-index: 199;
|
||||
height: 52px;
|
||||
box-shadow: 0px 5px 20px rgba(4, 15, 27, 7%);
|
||||
border-radius: 0px 0px 6px 6px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
${HeaderStyles}
|
||||
@media ${tablet} {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
@media ${mobile} {
|
||||
height: 52px;
|
||||
}
|
||||
|
||||
.table-container_group-menu-checkbox {
|
||||
margin-left: 24px;
|
||||
${(props) => props.checkboxMargin && `margin-left: ${props.checkboxMargin}`}
|
||||
}
|
||||
|
||||
.table-container_group-menu-separator {
|
||||
border-right: 1px solid #d0d5da;
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.table-container_group-menu_button {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.table-container_group-menu-combobox {
|
||||
height: 24px;
|
||||
width: 16px;
|
||||
margin: 3px 0px 0px 3px;
|
||||
|
||||
.combo-button {
|
||||
.combo-buttons_arrow-icon {
|
||||
margin: 1px 16px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledTableHeader = styled.div`
|
||||
position: fixed;
|
||||
background: #fff;
|
||||
display: grid;
|
||||
margin: 0 -24px;
|
||||
padding: 0 24px;
|
||||
|
||||
${HeaderStyles}
|
||||
z-index: 1;
|
||||
height: 39px;
|
||||
border-bottom: 1px solid #eceef1;
|
||||
margin: 0 -20px;
|
||||
padding: 0 20px;
|
||||
|
||||
.table-container_header-checkbox {
|
||||
${(props) => props.checkboxMargin && `margin-left: ${props.checkboxMargin}`}
|
||||
@ -138,7 +141,7 @@ const StyledTableHeaderCell = styled.div`
|
||||
cursor: ${(props) => (props.showIcon ? "pointer" : "default")};
|
||||
|
||||
.header-container-text-icon {
|
||||
padding: 16px 0 0 4px;
|
||||
padding: 13px 0 0 4px;
|
||||
|
||||
display: ${(props) =>
|
||||
props.isActive && props.showIcon ? "block" : "none"};
|
||||
@ -146,7 +149,7 @@ const StyledTableHeaderCell = styled.div`
|
||||
props.sorted &&
|
||||
css`
|
||||
transform: scale(1, -1);
|
||||
padding: 14px 0 0 4px;
|
||||
padding: 12px 0 0 4px;
|
||||
`}
|
||||
}
|
||||
|
||||
@ -250,6 +253,15 @@ const StyledEmptyTableContainer = styled.div`
|
||||
height: 40px;
|
||||
`;
|
||||
|
||||
const StyledScrollbar = styled(Scrollbar)`
|
||||
.scroll-body {
|
||||
display: flex;
|
||||
}
|
||||
.nav-thumb-horizontal {
|
||||
${isMobile && "display: none !important"};
|
||||
}
|
||||
`;
|
||||
|
||||
StyledTableRow.defaultProps = { theme: Base };
|
||||
|
||||
export {
|
||||
@ -262,4 +274,5 @@ export {
|
||||
StyledTableSettings,
|
||||
StyledTableGroupMenu,
|
||||
StyledEmptyTableContainer,
|
||||
StyledScrollbar,
|
||||
};
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import Checkbox from "../checkbox";
|
||||
import { StyledTableGroupMenu } from "./StyledTableContainer";
|
||||
import Button from "../button";
|
||||
import { StyledTableGroupMenu, StyledScrollbar } from "./StyledTableContainer";
|
||||
import ComboBox from "../combobox";
|
||||
import GroupMenuItem from "./GroupMenuItem";
|
||||
|
||||
const TableGroupMenu = (props) => {
|
||||
const {
|
||||
isChecked,
|
||||
isIndeterminate,
|
||||
headerMenu,
|
||||
containerRef,
|
||||
onChange,
|
||||
checkboxOptions,
|
||||
columnStorageName,
|
||||
checkboxMargin,
|
||||
...rest
|
||||
} = props;
|
||||
@ -22,20 +20,9 @@ const TableGroupMenu = (props) => {
|
||||
onChange && onChange(e.target && e.target.checked);
|
||||
};
|
||||
|
||||
const width = containerRef.current
|
||||
? containerRef.current.clientWidth + "px"
|
||||
: "100%";
|
||||
|
||||
useEffect(() => {
|
||||
const storageSize = localStorage.getItem(columnStorageName);
|
||||
if (containerRef.current)
|
||||
containerRef.current.style.gridTemplateColumns = storageSize;
|
||||
}, [containerRef]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<StyledTableGroupMenu
|
||||
width={width}
|
||||
className="table-container_group-menu"
|
||||
checkboxMargin={checkboxMargin}
|
||||
{...rest}
|
||||
@ -47,24 +34,21 @@ const TableGroupMenu = (props) => {
|
||||
isIndeterminate={isIndeterminate}
|
||||
/>
|
||||
<ComboBox
|
||||
comboIcon="/static/images/triangle.navigation.down.react.svg"
|
||||
noBorder
|
||||
advancedOptions={checkboxOptions}
|
||||
className="table-container_group-menu-combobox not-selectable"
|
||||
options={[]}
|
||||
selectedOption={{}}
|
||||
manualY="42px"
|
||||
manualX="-32px"
|
||||
/>
|
||||
<div className="table-container_group-menu-separator" />
|
||||
{headerMenu.map((item, index) => {
|
||||
const { label, disabled, onClick } = item;
|
||||
return (
|
||||
<Button
|
||||
key={index}
|
||||
className="table-container_group-menu_button not-selectable"
|
||||
isDisabled={disabled}
|
||||
onClick={onClick}
|
||||
label={label}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
<StyledScrollbar>
|
||||
{headerMenu.map((item, index) => (
|
||||
<GroupMenuItem key={index} item={item} />
|
||||
))}
|
||||
</StyledScrollbar>
|
||||
</StyledTableGroupMenu>
|
||||
</>
|
||||
);
|
||||
@ -73,12 +57,10 @@ const TableGroupMenu = (props) => {
|
||||
TableGroupMenu.propTypes = {
|
||||
isChecked: PropTypes.bool,
|
||||
isIndeterminate: PropTypes.bool,
|
||||
headerMenu: PropTypes.arrayOf(PropTypes.object),
|
||||
headerMenu: PropTypes.arrayOf(PropTypes.object).isRequired,
|
||||
checkboxOptions: PropTypes.any.isRequired,
|
||||
onClick: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
containerRef: PropTypes.shape({ current: PropTypes.any }),
|
||||
columnStorageName: PropTypes.string,
|
||||
checkboxMargin: PropTypes.string,
|
||||
};
|
||||
|
||||
|
||||
@ -6,11 +6,9 @@ import {
|
||||
StyledTableRow,
|
||||
StyledEmptyTableContainer,
|
||||
} from "./StyledTableContainer";
|
||||
import Checkbox from "../checkbox";
|
||||
import TableSettings from "./TableSettings";
|
||||
import TableHeaderCell from "./TableHeaderCell";
|
||||
import { size } from "../utils/device";
|
||||
import TableGroupMenu from "./TableGroupMenu";
|
||||
|
||||
const minColumnSize = 150;
|
||||
const defaultMinColumnSize = 90;
|
||||
@ -211,7 +209,6 @@ class TableHeader extends React.Component {
|
||||
const {
|
||||
containerRef,
|
||||
columnStorageName,
|
||||
checkboxSize,
|
||||
resetColumnsSize,
|
||||
sectionWidth,
|
||||
} = this.props;
|
||||
@ -273,7 +270,6 @@ class TableHeader extends React.Component {
|
||||
|
||||
const column = document.getElementById("column_" + index);
|
||||
const enable =
|
||||
index == 0 ||
|
||||
index == tableContainer.length - 1 ||
|
||||
(column ? column.dataset.enable === "true" : item !== "0px");
|
||||
const defaultSize = column && column.dataset.defaultSize;
|
||||
@ -296,7 +292,7 @@ class TableHeader extends React.Component {
|
||||
this.getSubstring(gridTemplateColumns[index - colIndex]) +
|
||||
this.getSubstring(item) +
|
||||
"px";
|
||||
} else if (item !== `${settingsSize}px` && item !== checkboxSize) {
|
||||
} else if (item !== `${settingsSize}px`) {
|
||||
const percent = (this.getSubstring(item) / oldWidth) * 100;
|
||||
|
||||
if (index == 1) {
|
||||
@ -341,7 +337,7 @@ class TableHeader extends React.Component {
|
||||
};
|
||||
|
||||
resetColumns = () => {
|
||||
const { containerRef, checkboxSize, columnStorageName } = this.props;
|
||||
const { containerRef, columnStorageName } = this.props;
|
||||
const defaultSize = this.props.columns.find((col) => col.defaultSize)
|
||||
?.defaultSize;
|
||||
|
||||
@ -358,13 +354,10 @@ class TableHeader extends React.Component {
|
||||
|
||||
const percent = 100 / enableColumns.length;
|
||||
const newContainerWidth =
|
||||
containerWidth -
|
||||
this.getSubstring(checkboxSize) -
|
||||
containerMargin -
|
||||
(defaultSize || 0);
|
||||
containerWidth - containerMargin - (defaultSize || 0);
|
||||
const otherColumns = (newContainerWidth * percent) / 100 + "px";
|
||||
|
||||
str = `${checkboxSize} `;
|
||||
str = "";
|
||||
for (let col of this.props.columns) {
|
||||
str += col.enable
|
||||
? /* col.minWidth
|
||||
@ -388,110 +381,57 @@ class TableHeader extends React.Component {
|
||||
this.onResize();
|
||||
};
|
||||
|
||||
onChange = (checked) => {
|
||||
this.props.setSelected(checked);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
columns,
|
||||
sortBy,
|
||||
sorted,
|
||||
isHeaderVisible,
|
||||
checkboxOptions,
|
||||
containerRef,
|
||||
onChange,
|
||||
isChecked,
|
||||
isIndeterminate,
|
||||
headerMenu,
|
||||
columnStorageName,
|
||||
hasAccess,
|
||||
...rest
|
||||
} = this.props;
|
||||
const { columns, sortBy, sorted, ...rest } = this.props;
|
||||
|
||||
//console.log("TABLE HEADER RENDER", columns);
|
||||
|
||||
return (
|
||||
<>
|
||||
{isHeaderVisible ? (
|
||||
<TableGroupMenu
|
||||
checkboxOptions={checkboxOptions}
|
||||
containerRef={containerRef}
|
||||
onChange={onChange}
|
||||
isChecked={isChecked}
|
||||
isIndeterminate={isIndeterminate}
|
||||
headerMenu={headerMenu}
|
||||
columnStorageName={columnStorageName}
|
||||
{...rest}
|
||||
/>
|
||||
) : (
|
||||
<StyledTableHeader
|
||||
className="table-container_header"
|
||||
ref={this.headerRef}
|
||||
{...rest}
|
||||
>
|
||||
<StyledTableRow>
|
||||
{hasAccess ? (
|
||||
<Checkbox
|
||||
className="table-container_header-checkbox"
|
||||
onChange={this.onChange}
|
||||
isChecked={false}
|
||||
<StyledTableHeader
|
||||
className="table-container_header"
|
||||
ref={this.headerRef}
|
||||
{...rest}
|
||||
>
|
||||
<StyledTableRow>
|
||||
{columns.map((column, index) => {
|
||||
const nextColumn = this.getNextColumn(columns, index);
|
||||
const resizable = nextColumn ? nextColumn.resizable : false;
|
||||
|
||||
return (
|
||||
<TableHeaderCell
|
||||
key={column.key}
|
||||
index={index}
|
||||
column={column}
|
||||
sorted={sorted}
|
||||
sortBy={sortBy}
|
||||
resizable={resizable}
|
||||
defaultSize={column.defaultSize}
|
||||
onMouseDown={this.onMouseDown}
|
||||
/>
|
||||
) : (
|
||||
<div></div>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
|
||||
{columns.map((column, index) => {
|
||||
const nextColumn = this.getNextColumn(columns, index);
|
||||
const resizable = nextColumn ? nextColumn.resizable : false;
|
||||
<div className="table-container_header-settings">
|
||||
<TableSettings columns={columns} />
|
||||
</div>
|
||||
</StyledTableRow>
|
||||
</StyledTableHeader>
|
||||
|
||||
return (
|
||||
<TableHeaderCell
|
||||
key={column.key}
|
||||
index={index}
|
||||
column={column}
|
||||
sorted={sorted}
|
||||
sortBy={sortBy}
|
||||
resizable={resizable}
|
||||
defaultSize={column.defaultSize}
|
||||
onMouseDown={this.onMouseDown}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
<div className="table-container_header-settings">
|
||||
<TableSettings columns={columns} />
|
||||
</div>
|
||||
</StyledTableRow>
|
||||
</StyledTableHeader>
|
||||
)}
|
||||
<StyledEmptyTableContainer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TableHeader.defaultProps = {
|
||||
hasAccess: true,
|
||||
};
|
||||
|
||||
TableHeader.propTypes = {
|
||||
containerRef: PropTypes.shape({ current: PropTypes.any }).isRequired,
|
||||
columns: PropTypes.array.isRequired,
|
||||
setSelected: PropTypes.func.isRequired,
|
||||
sortBy: PropTypes.string,
|
||||
sorted: PropTypes.bool,
|
||||
columnStorageName: PropTypes.string,
|
||||
checkboxSize: PropTypes.string,
|
||||
sectionWidth: PropTypes.number,
|
||||
isHeaderVisible: PropTypes.bool,
|
||||
checkboxOptions: PropTypes.any.isRequired,
|
||||
isChecked: PropTypes.bool,
|
||||
onChange: PropTypes.func,
|
||||
isIndeterminate: PropTypes.bool,
|
||||
headerMenu: PropTypes.arrayOf(PropTypes.object),
|
||||
onClick: PropTypes.func,
|
||||
hasAccess: PropTypes.bool,
|
||||
resetColumnsSize: PropTypes.bool,
|
||||
};
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ const TableHeaderCell = ({
|
||||
}) => {
|
||||
const { title, enable, active, minWidth } = column;
|
||||
|
||||
const isActive = column.sortBy === sortBy || active;
|
||||
const isActive = (sortBy && column.sortBy === sortBy) || active;
|
||||
|
||||
const onClick = (e) => {
|
||||
column.onClick && column.onClick(column.sortBy, e);
|
||||
@ -33,7 +33,7 @@ const TableHeaderCell = ({
|
||||
isActive={isActive}
|
||||
showIcon={column.onClick}
|
||||
className="table-container_header-cell"
|
||||
id={`column_${index + 1}`}
|
||||
id={`column_${index}`}
|
||||
data-enable={enable}
|
||||
data-min-width={minWidth}
|
||||
data-default-size={defaultSize}
|
||||
@ -43,7 +43,7 @@ const TableHeaderCell = ({
|
||||
<div className="header-container-text-wrapper">
|
||||
<Text
|
||||
fontWeight={600}
|
||||
color={globalColors.gray}
|
||||
color={isActive ? globalColors.grayMain : globalColors.gray}
|
||||
className="header-container-text"
|
||||
>
|
||||
{enable ? title : ""}
|
||||
@ -51,14 +51,15 @@ const TableHeaderCell = ({
|
||||
|
||||
<IconButton
|
||||
onClick={column.onIconClick ? onIconClick : onClick}
|
||||
iconName="/static/images/folder arrow.react.svg"
|
||||
iconName="/static/images/sort.desc.react.svg"
|
||||
className="header-container-text-icon"
|
||||
size="small"
|
||||
color={isActive ? globalColors.grayMain : globalColors.gray}
|
||||
/>
|
||||
</div>
|
||||
{resizable && (
|
||||
<div
|
||||
data-column={`${index + 1}`}
|
||||
data-column={`${index}`}
|
||||
className="resize-handle not-selectable"
|
||||
onMouseDown={onMouseDown}
|
||||
/>
|
||||
|
||||
@ -4,7 +4,6 @@ import { StyledTableRow } from "./StyledTableContainer";
|
||||
import TableCell from "./TableCell";
|
||||
import ContextMenu from "../context-menu";
|
||||
import ContextMenuButton from "../context-menu-button";
|
||||
import Checkbox from "../checkbox";
|
||||
|
||||
const TableRow = (props) => {
|
||||
const {
|
||||
@ -12,14 +11,9 @@ const TableRow = (props) => {
|
||||
onHideContextMenu,
|
||||
children,
|
||||
contextOptions,
|
||||
checked,
|
||||
element,
|
||||
onContentSelect,
|
||||
item,
|
||||
className,
|
||||
style,
|
||||
selectionProp,
|
||||
hasAccess,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
@ -43,30 +37,12 @@ const TableRow = (props) => {
|
||||
return contextOptions;
|
||||
};
|
||||
|
||||
const onChange = (e) => {
|
||||
onContentSelect && onContentSelect(e.target.checked, item);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledTableRow
|
||||
onContextMenu={onContextMenu}
|
||||
className={`${className} table-container_row`}
|
||||
{...rest}
|
||||
>
|
||||
<TableCell
|
||||
hasAccess={hasAccess}
|
||||
checked={checked}
|
||||
{...selectionProp}
|
||||
style={style}
|
||||
className={`${selectionProp?.className} table-container_row-checkbox-wrapper`}
|
||||
>
|
||||
<div className="table-container_element">{element}</div>
|
||||
<Checkbox
|
||||
className="table-container_row-checkbox"
|
||||
onChange={onChange}
|
||||
isChecked={checked}
|
||||
/>
|
||||
</TableCell>
|
||||
{children}
|
||||
<div>
|
||||
<TableCell
|
||||
|
||||
@ -32,7 +32,7 @@ const TableSettings = ({ columns }) => {
|
||||
hoverColor="#657077"
|
||||
size={12}
|
||||
isFill
|
||||
iconName="/static/images/settings.react.svg"
|
||||
iconName="/static/images/settings.desc.react.svg"
|
||||
onClick={onClick}
|
||||
/>
|
||||
<DropDown
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="7" width="23" height="14" rx="2" fill="#B2BBC0"/>
|
||||
<path d="M2 2C0.895447 2 0 2.89551 0 4V9C0 7.89551 0.895447 7 2 7H21C22.1046 7 23 7.89551 23 9V7C23 5.89551 22.1046 5 21 5H10V4C10 2.89551 9.10455 2 8 2H2Z" fill="#788790"/>
|
||||
<path d="M4 4C3.44772 4 3 4.44775 3 5V9C3 8.44775 3.44772 8 4 8H21C21.5523 8 22 8.44775 22 9V8C22 7.44775 21.5523 7 21 7H11V5C11 4.44775 10.5523 4 10 4H4Z" fill="#788790"/>
|
||||
<rect x="3" y="8" width="19" height="12" rx="1" fill="#B2BBC0"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 336 B After Width: | Height: | Size: 341 B |
@ -1,4 +1,4 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect y="8" width="30" height="20" rx="2" fill="#B2BBC0"/>
|
||||
<path d="M0 4C0 2.89543 0.895431 2 2 2H11C12.1046 2 13 2.89543 13 4V6H28C29.1046 6 30 6.89543 30 8V10C30 8.89543 29.1046 8 28 8H2C0.895431 8 0 8.89543 0 10V4Z" fill="#788790"/>
|
||||
<path d="M2 6C2 4.89551 2.89543 4 4 4H12C13.1046 4 14 4.89551 14 6V8H28C29.1046 8 30 8.89551 30 10V12C30 10.8955 29.1046 10 28 10H4C2.89543 10 2 10.8955 2 12V6Z" fill="#788790"/>
|
||||
<rect x="2" y="10" width="28" height="18" rx="2" fill="#B2BBC0"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 339 B After Width: | Height: | Size: 348 B |
@ -47,7 +47,7 @@ const EditingWrapper = styled.div`
|
||||
padding-bottom: 4px;
|
||||
margin-top: 4px;
|
||||
|
||||
margin-left: -4px;
|
||||
/* margin-left: -4px; */
|
||||
`}
|
||||
|
||||
${(props) =>
|
||||
@ -109,7 +109,7 @@ const EditingWrapper = styled.div`
|
||||
}
|
||||
|
||||
.is-edit {
|
||||
margin-top: 4px;
|
||||
/* margin-top: 4px; */
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@ -4,9 +4,9 @@ import { inject, observer } from "mobx-react";
|
||||
import styled from "styled-components";
|
||||
|
||||
const StyledIcon = styled.img`
|
||||
width: 24px;
|
||||
/* width: 24px;
|
||||
height: 24px;
|
||||
margin-top: 4px;
|
||||
margin-top: 4px; */
|
||||
`;
|
||||
|
||||
const ItemIcon = ({
|
||||
|
||||
@ -151,70 +151,19 @@ class FilesTableHeader extends React.Component {
|
||||
fetchFiles(selectedFolderId, newFilter).finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
onChange = (checked) => {
|
||||
this.props.setSelected(checked ? "all" : "none");
|
||||
};
|
||||
|
||||
onSelect = (e) => {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this.props.setSelected(key);
|
||||
};
|
||||
|
||||
setSelected = (checked) => {
|
||||
this.props.setSelected && this.props.setSelected(checked ? "all" : "none");
|
||||
};
|
||||
|
||||
render() {
|
||||
const {
|
||||
t,
|
||||
containerRef,
|
||||
isHeaderVisible,
|
||||
isHeaderChecked,
|
||||
isHeaderIndeterminate,
|
||||
getHeaderMenu,
|
||||
filter,
|
||||
sectionWidth,
|
||||
userId,
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
} = this.props;
|
||||
|
||||
const { containerRef, filter, sectionWidth, userId } = this.props;
|
||||
const { sortBy, sortOrder } = filter;
|
||||
|
||||
const { columns, resetColumnsSize } = this.state;
|
||||
|
||||
const checkboxOptions = (
|
||||
<>
|
||||
{cbMenuItems.map((key) => {
|
||||
const label = getCheckboxItemLabel(t, key);
|
||||
return (
|
||||
<DropDownItem
|
||||
key={key}
|
||||
label={label}
|
||||
data-key={key}
|
||||
onClick={this.onSelect}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<TableHeader
|
||||
checkboxSize="32px"
|
||||
sorted={sortOrder === "descending"}
|
||||
sortBy={sortBy}
|
||||
setSelected={this.setSelected}
|
||||
containerRef={containerRef}
|
||||
columns={columns}
|
||||
columnStorageName={`${COLUMNS_SIZE}=${userId}`}
|
||||
sectionWidth={sectionWidth}
|
||||
isHeaderVisible={isHeaderVisible}
|
||||
checkboxOptions={checkboxOptions}
|
||||
onChange={this.onChange}
|
||||
isChecked={isHeaderChecked}
|
||||
isIndeterminate={isHeaderIndeterminate}
|
||||
headerMenu={getHeaderMenu(t)}
|
||||
resetColumnsSize={resetColumnsSize}
|
||||
/>
|
||||
);
|
||||
@ -222,26 +171,14 @@ class FilesTableHeader extends React.Component {
|
||||
}
|
||||
|
||||
export default inject(
|
||||
({
|
||||
auth,
|
||||
filesStore,
|
||||
filesActionsStore,
|
||||
selectedFolderStore,
|
||||
treeFoldersStore,
|
||||
}) => {
|
||||
({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
|
||||
const {
|
||||
setSelected,
|
||||
isHeaderVisible,
|
||||
isHeaderIndeterminate,
|
||||
isHeaderChecked,
|
||||
setIsLoading,
|
||||
filter,
|
||||
fetchFiles,
|
||||
canShare,
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
} = filesStore;
|
||||
const { getHeaderMenu } = filesActionsStore;
|
||||
const { isPrivacyFolder } = treeFoldersStore;
|
||||
|
||||
const withContent = canShare || (canShare && isPrivacyFolder && isDesktop);
|
||||
@ -249,20 +186,14 @@ export default inject(
|
||||
|
||||
return {
|
||||
isHeaderVisible,
|
||||
isHeaderIndeterminate,
|
||||
isHeaderChecked,
|
||||
filter,
|
||||
selectedFolderId: selectedFolderStore.id,
|
||||
withContent,
|
||||
personal,
|
||||
|
||||
setSelected,
|
||||
setIsLoading,
|
||||
fetchFiles,
|
||||
getHeaderMenu,
|
||||
userId: auth.userStore.user.id,
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
};
|
||||
}
|
||||
)(
|
||||
|
||||
@ -64,7 +64,12 @@ const StyledTableRow = styled(TableRow)`
|
||||
}
|
||||
|
||||
.table-container_element {
|
||||
margin-left: ${(props) => (props.item.isFolder ? "-3px" : "-4px")};
|
||||
/* margin-left: ${(props) => (props.isFolder ? "-3px" : "-4px")}; */
|
||||
}
|
||||
|
||||
.table-container_row-checkbox {
|
||||
padding-left: 4px;
|
||||
width: 26px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@ -77,7 +82,7 @@ const StyledTableRow = styled(TableRow)`
|
||||
}
|
||||
|
||||
.table-container_row-checkbox-wrapper {
|
||||
width: 50px;
|
||||
min-width: 30px;
|
||||
margin-left: -24px;
|
||||
padding-left: 24px;
|
||||
border-bottom: 1px solid;
|
||||
@ -236,20 +241,24 @@ const FilesTableRow = (props) => {
|
||||
dragging={dragging && isDragging}
|
||||
selectionProp={selectionProp}
|
||||
key={item.id}
|
||||
item={item}
|
||||
element={element}
|
||||
fileContextClick={fileContextClick}
|
||||
onContentSelect={onContentFileSelect}
|
||||
onClick={onMouseClick}
|
||||
{...contextOptionsProps}
|
||||
checked={checkedProps}
|
||||
isActive={isActive}
|
||||
isFolder={item.isFolder}
|
||||
onHideContextMenu={onHideContextMenu}
|
||||
isThirdPartyFolder={item.isThirdPartyFolder}
|
||||
onDoubleClick={onFilesClick}
|
||||
checked={checkedProps}
|
||||
>
|
||||
<TableCell {...dragStyles} {...selectionProp}>
|
||||
<FileNameCell {...props} />
|
||||
<FileNameCell
|
||||
onContentSelect={onContentFileSelect}
|
||||
checked={checkedProps}
|
||||
element={element}
|
||||
{...selectionProp}
|
||||
{...props}
|
||||
/>
|
||||
<StyledBadgesContainer>{badgesComponent}</StyledBadgesContainer>
|
||||
</TableCell>
|
||||
{!personal && (
|
||||
|
||||
@ -1,34 +1,65 @@
|
||||
import React from "react";
|
||||
import Link from "@appserver/components/link";
|
||||
import Text from "@appserver/components/text";
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
import TableCell from "@appserver/components/table-container/TableCell";
|
||||
|
||||
const FileNameCell = ({ item, titleWithoutExt, linkStyles }) => {
|
||||
const FileNameCell = ({
|
||||
item,
|
||||
titleWithoutExt,
|
||||
linkStyles,
|
||||
element,
|
||||
onContentSelect,
|
||||
checked,
|
||||
selectionProp,
|
||||
}) => {
|
||||
const { fileExst, title } = item;
|
||||
|
||||
const onChange = (e) => {
|
||||
onContentSelect && onContentSelect(e.target.checked, item);
|
||||
};
|
||||
|
||||
return (
|
||||
<Link
|
||||
type="page"
|
||||
title={title}
|
||||
fontWeight="600"
|
||||
fontSize="13px"
|
||||
{...linkStyles}
|
||||
color="#333"
|
||||
isTextOverflow
|
||||
className="item-file-name"
|
||||
>
|
||||
{titleWithoutExt}
|
||||
{fileExst ? (
|
||||
<Text
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="13px"
|
||||
fontWeight={600}
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst}
|
||||
</Text>
|
||||
) : null}
|
||||
</Link>
|
||||
<>
|
||||
<TableCell
|
||||
hasAccess={true}
|
||||
checked={checked}
|
||||
{...selectionProp}
|
||||
className={`${selectionProp?.className} table-container_row-checkbox-wrapper`}
|
||||
>
|
||||
<div className="table-container_element">{element}</div>
|
||||
<Checkbox
|
||||
className="table-container_row-checkbox"
|
||||
onChange={onChange}
|
||||
isChecked={checked}
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
<Link
|
||||
type="page"
|
||||
title={title}
|
||||
fontWeight="600"
|
||||
fontSize="13px"
|
||||
{...linkStyles}
|
||||
color="#333"
|
||||
isTextOverflow
|
||||
className="item-file-name"
|
||||
>
|
||||
{titleWithoutExt}
|
||||
{fileExst ? (
|
||||
<Text
|
||||
className="badge-ext"
|
||||
as="span"
|
||||
color="#A3A9AE"
|
||||
fontSize="13px"
|
||||
fontWeight={600}
|
||||
truncate={true}
|
||||
>
|
||||
{fileExst}
|
||||
</Text>
|
||||
) : null}
|
||||
</Link>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -65,7 +65,8 @@ const SectionBodyContent = (props) => {
|
||||
if (
|
||||
e.target.closest(".scroll-body") &&
|
||||
!e.target.closest(".files-item") &&
|
||||
!e.target.closest(".not-selectable")
|
||||
!e.target.closest(".not-selectable") &&
|
||||
!e.target.closest(".table-container_group-menu")
|
||||
) {
|
||||
setSelection([]);
|
||||
setBufferSelection(null);
|
||||
|
||||
@ -10,13 +10,31 @@ import { withTranslation } from "react-i18next";
|
||||
import { isMobile } from "react-device-detect";
|
||||
import ContextMenuButton from "@appserver/components/context-menu-button";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
import GroupButtonsMenu from "@appserver/components/group-buttons-menu";
|
||||
import IconButton from "@appserver/components/icon-button";
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
import { Consumer } from "@appserver/components/utils/context";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import TableGroupMenu from "@appserver/components/table-container/TableGroupMenu";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
.table-container_group-menu {
|
||||
${(props) =>
|
||||
props.viewAs === "table"
|
||||
? css`
|
||||
margin: 0px -20px;
|
||||
width: calc(100% + 44px);
|
||||
`
|
||||
: css`
|
||||
margin: 0px -24px;
|
||||
width: calc(100% + 48px);
|
||||
`}
|
||||
|
||||
@media ${tablet} {
|
||||
margin: 0 -16px;
|
||||
width: calc(100% + 32px);
|
||||
}
|
||||
}
|
||||
|
||||
.header-container {
|
||||
position: relative;
|
||||
${(props) =>
|
||||
@ -325,12 +343,9 @@ class SectionHeaderContent extends React.Component {
|
||||
fetchFiles(parentId, filter).finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
onCheck = (checked) => {
|
||||
this.props.setSelected(checked ? "all" : "none");
|
||||
};
|
||||
|
||||
onSelect = (item) => {
|
||||
this.props.setSelected(item.key);
|
||||
onSelect = (e) => {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
this.props.setSelected(key);
|
||||
};
|
||||
|
||||
onClose = () => {
|
||||
@ -338,29 +353,29 @@ class SectionHeaderContent extends React.Component {
|
||||
};
|
||||
|
||||
getMenuItems = () => {
|
||||
const { t, getHeaderMenu, cbMenuItems, getCheckboxItemLabel } = this.props;
|
||||
const { t, cbMenuItems, getCheckboxItemLabel } = this.props;
|
||||
|
||||
const headerMenu = getHeaderMenu(t);
|
||||
const children = cbMenuItems.map((key, index) => {
|
||||
const label = getCheckboxItemLabel(t, key);
|
||||
return <DropDownItem key={key} label={label} data-index={index} />;
|
||||
});
|
||||
const checkboxOptions = (
|
||||
<>
|
||||
{cbMenuItems.map((key) => {
|
||||
const label = getCheckboxItemLabel(t, key);
|
||||
return (
|
||||
<DropDownItem
|
||||
key={key}
|
||||
label={label}
|
||||
data-key={key}
|
||||
onClick={this.onSelect}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
|
||||
let menu = [
|
||||
{
|
||||
label: t("Common:Select"),
|
||||
isDropdown: true,
|
||||
isSeparator: true,
|
||||
isSelect: true,
|
||||
fontWeight: "bold",
|
||||
children,
|
||||
onSelect: this.onSelect,
|
||||
},
|
||||
];
|
||||
return checkboxOptions;
|
||||
};
|
||||
|
||||
menu = [...menu, ...headerMenu];
|
||||
|
||||
return menu;
|
||||
onChange = (checked) => {
|
||||
this.props.setSelected(checked ? "all" : "none");
|
||||
};
|
||||
|
||||
render() {
|
||||
@ -378,10 +393,12 @@ class SectionHeaderContent extends React.Component {
|
||||
isDesktop,
|
||||
isTabletView,
|
||||
personal,
|
||||
getHeaderMenu,
|
||||
viewAs,
|
||||
} = this.props;
|
||||
|
||||
const menuItems = this.getMenuItems();
|
||||
const headerMenu = getHeaderMenu(t);
|
||||
|
||||
return (
|
||||
<Consumer>
|
||||
@ -393,22 +410,16 @@ class SectionHeaderContent extends React.Component {
|
||||
title={title}
|
||||
isDesktop={isDesktop}
|
||||
isTabletView={isTabletView}
|
||||
viewAs={viewAs}
|
||||
>
|
||||
{isHeaderVisible && viewAs !== "table" ? (
|
||||
<div className="group-button-menu-container">
|
||||
<GroupButtonsMenu
|
||||
checked={isHeaderChecked}
|
||||
isIndeterminate={isHeaderIndeterminate}
|
||||
onChange={this.onCheck}
|
||||
menuItems={menuItems}
|
||||
visible={isHeaderVisible}
|
||||
moreLabel={t("Common:More")}
|
||||
closeTitle={t("Common:CloseButton")}
|
||||
onClose={this.onClose}
|
||||
selected={menuItems[0].label}
|
||||
sectionWidth={context.sectionWidth}
|
||||
/>
|
||||
</div>
|
||||
{isHeaderVisible ? (
|
||||
<TableGroupMenu
|
||||
checkboxOptions={menuItems}
|
||||
onChange={this.onChange}
|
||||
isChecked={isHeaderChecked}
|
||||
isIndeterminate={isHeaderIndeterminate}
|
||||
headerMenu={headerMenu}
|
||||
/>
|
||||
) : (
|
||||
<div className="header-container">
|
||||
{!title || !tReady ? (
|
||||
@ -506,11 +517,11 @@ export default inject(
|
||||
isHeaderChecked,
|
||||
isThirdPartySelection,
|
||||
setIsLoading,
|
||||
viewAs,
|
||||
cbMenuItems,
|
||||
getCheckboxItemLabel,
|
||||
getFolderInfo,
|
||||
setBufferSelection,
|
||||
viewAs,
|
||||
} = filesStore;
|
||||
const { setAction } = fileActionStore;
|
||||
const {
|
||||
@ -538,7 +549,6 @@ export default inject(
|
||||
isTabletView: auth.settingsStore.isTabletView,
|
||||
confirmDelete: settingsStore.confirmDelete,
|
||||
personal: auth.settingsStore.personal,
|
||||
viewAs,
|
||||
cbMenuItems,
|
||||
getFolderInfo,
|
||||
|
||||
@ -557,6 +567,7 @@ export default inject(
|
||||
downloadAction,
|
||||
getHeaderMenu,
|
||||
getCheckboxItemLabel,
|
||||
viewAs,
|
||||
};
|
||||
}
|
||||
)(
|
||||
|
||||
@ -685,6 +685,7 @@ class FilesActionStore {
|
||||
return {
|
||||
label: t("Share"),
|
||||
onClick: () => setSharingPanelVisible(true),
|
||||
iconUrl: "/static/images/share.react.svg",
|
||||
};
|
||||
|
||||
case "copy":
|
||||
@ -693,6 +694,7 @@ class FilesActionStore {
|
||||
return {
|
||||
label: t("Translations:Copy"),
|
||||
onClick: () => setCopyPanelVisible(true),
|
||||
iconUrl: "/static/images/copyTo.react.svg",
|
||||
};
|
||||
|
||||
case "download":
|
||||
@ -704,6 +706,7 @@ class FilesActionStore {
|
||||
this.downloadAction(
|
||||
t("Translations:ArchivingData")
|
||||
).catch((err) => toastr.error(err)),
|
||||
iconUrl: "/static/images/download.react.svg",
|
||||
};
|
||||
|
||||
case "downloadAs":
|
||||
@ -712,6 +715,7 @@ class FilesActionStore {
|
||||
return {
|
||||
label: t("Translations:DownloadAs"),
|
||||
onClick: () => setDownloadDialogVisible(true),
|
||||
iconUrl: "/static/images/downloadAs.react.svg",
|
||||
};
|
||||
|
||||
case "moveTo":
|
||||
@ -720,6 +724,7 @@ class FilesActionStore {
|
||||
return {
|
||||
label: t("MoveTo"),
|
||||
onClick: () => setMoveToPanelVisible(true),
|
||||
iconUrl: "/static/images/move.react.svg",
|
||||
};
|
||||
|
||||
case "delete":
|
||||
@ -742,6 +747,7 @@ class FilesActionStore {
|
||||
);
|
||||
}
|
||||
},
|
||||
iconUrl: "/static/images/delete.react.svg",
|
||||
};
|
||||
}
|
||||
};
|
||||
@ -857,11 +863,13 @@ class FilesActionStore {
|
||||
.set("restore", {
|
||||
label: t("Translations:Restore"),
|
||||
onClick: () => setMoveToPanelVisible(true),
|
||||
iconUrl: "/static/images/move.react.svg",
|
||||
})
|
||||
.set("delete", deleteOption)
|
||||
.set("emptyRecycleBin", {
|
||||
label: t("EmptyRecycleBin"),
|
||||
onClick: () => setEmptyTrashDialogVisible(true),
|
||||
iconUrl: "/static/images/delete.react.svg",
|
||||
});
|
||||
return this.convertToArray(itemsCollection);
|
||||
};
|
||||
|
||||
@ -1134,7 +1134,7 @@ class FilesStore {
|
||||
const isThirdPartyFolder = providerKey && id === rootFolderId;
|
||||
|
||||
//const isCanWebEdit = canWebEdit(item.fileExst);
|
||||
const iconSize = this.viewAs === "tile" && isMobile ? 32 : 24;
|
||||
const iconSize = this.viewAs === "table" ? 24 : 32;
|
||||
const icon = getIcon(iconSize, fileExst, providerKey, contentLength);
|
||||
|
||||
let isFolder = false;
|
||||
|
||||
@ -7,6 +7,7 @@ import withContent from "../../../../../HOCs/withContent";
|
||||
import Link from "@appserver/components/link";
|
||||
import Text from "@appserver/components/text";
|
||||
import styled from "styled-components";
|
||||
import Checkbox from "@appserver/components/checkbox";
|
||||
|
||||
const StyledPeopleRow = styled(TableRow)`
|
||||
.table-container_cell {
|
||||
@ -16,6 +17,7 @@ const StyledPeopleRow = styled(TableRow)`
|
||||
|
||||
.table-container_row-checkbox-wrapper {
|
||||
padding-left: 4px;
|
||||
min-width: 46px;
|
||||
|
||||
.table-container_row-checkbox {
|
||||
margin-left: 8px;
|
||||
@ -40,17 +42,26 @@ const PeopleTableRow = (props) => {
|
||||
const nameColor = statusType === "pending" ? "#A3A9AE" : "#333333";
|
||||
const sideInfoColor = statusType === "pending" ? "#D0D5DA" : "#A3A9AE";
|
||||
|
||||
const onChange = (e) => {
|
||||
onContentRowSelect && onContentRowSelect(e.target.checked, item);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledPeopleRow
|
||||
key={item.id}
|
||||
item={item}
|
||||
element={element}
|
||||
onContentSelect={onContentRowSelect}
|
||||
hasAccess={isAdmin}
|
||||
{...contextOptionsProps}
|
||||
{...checkedProps}
|
||||
>
|
||||
<StyledPeopleRow key={item.id} {...contextOptionsProps}>
|
||||
<TableCell>
|
||||
<TableCell
|
||||
hasAccess={isAdmin}
|
||||
className="table-container_row-checkbox-wrapper"
|
||||
checked={checkedProps.checked}
|
||||
>
|
||||
<div className="table-container_element">{element}</div>
|
||||
<Checkbox
|
||||
className="table-container_row-checkbox"
|
||||
onChange={onChange}
|
||||
isChecked={checkedProps.checked}
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
<Link
|
||||
type="page"
|
||||
title={displayName}
|
||||
|
||||
@ -2,7 +2,6 @@ import React, { useCallback, useState, useMemo } from "react";
|
||||
import styled, { css } from "styled-components";
|
||||
import { withRouter } from "react-router";
|
||||
|
||||
import GroupButtonsMenu from "@appserver/components/group-buttons-menu";
|
||||
import DropDownItem from "@appserver/components/drop-down-item";
|
||||
import ContextMenuButton from "@appserver/components/context-menu-button";
|
||||
import { tablet, desktop } from "@appserver/components/utils/device";
|
||||
@ -18,6 +17,7 @@ import { isMobile } from "react-device-detect";
|
||||
import { inject, observer } from "mobx-react";
|
||||
import config from "../../../../../package.json";
|
||||
import { combineUrl } from "@appserver/common/utils";
|
||||
import TableGroupMenu from "@appserver/components/table-container/TableGroupMenu";
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
.group-button-menu-container {
|
||||
@ -114,7 +114,6 @@ const SectionHeaderContent = (props) => {
|
||||
resetFilter,
|
||||
getHeaderMenu,
|
||||
setInvitationDialogVisible,
|
||||
viewAs,
|
||||
} = props;
|
||||
|
||||
const {
|
||||
@ -126,57 +125,51 @@ const SectionHeaderContent = (props) => {
|
||||
|
||||
//console.log("SectionHeaderContent render", props.isTabletView);
|
||||
|
||||
const onCheck = (checked) => {
|
||||
setSelected(checked ? "all" : "close");
|
||||
const onChange = (checked) => {
|
||||
setSelected(checked ? "all" : "none");
|
||||
};
|
||||
const onSelect = useCallback((selected) => setSelected(selected), [
|
||||
setSelected,
|
||||
]);
|
||||
|
||||
const onClose = () => setSelected("none");
|
||||
const onSelect = useCallback(
|
||||
(e) => {
|
||||
const key = e.currentTarget.dataset.key;
|
||||
setSelected(key);
|
||||
},
|
||||
[setSelected]
|
||||
);
|
||||
|
||||
const onSelectorSelect = useCallback(
|
||||
(item) => {
|
||||
onSelect && onSelect(item.key);
|
||||
setSelected(item.key);
|
||||
},
|
||||
[onSelect]
|
||||
);
|
||||
|
||||
let menuItems = useMemo(
|
||||
() => [
|
||||
...[
|
||||
{
|
||||
label: t("Common:Select"),
|
||||
isDropdown: true,
|
||||
isSeparator: true,
|
||||
isSelect: true,
|
||||
fontWeight: "bold",
|
||||
children: [
|
||||
<DropDownItem
|
||||
key="active"
|
||||
label={t("Common:Active")}
|
||||
data-index={0}
|
||||
/>,
|
||||
<DropDownItem
|
||||
key="disabled"
|
||||
label={t("Translations:DisabledEmployeeStatus")}
|
||||
data-index={1}
|
||||
/>,
|
||||
<DropDownItem
|
||||
key="invited"
|
||||
label={t("LblInvited")}
|
||||
data-index={2}
|
||||
/>,
|
||||
],
|
||||
onSelect: onSelectorSelect,
|
||||
},
|
||||
],
|
||||
],
|
||||
() => (
|
||||
<>
|
||||
<DropDownItem
|
||||
key="active"
|
||||
label={t("Common:Active")}
|
||||
data-key={"active"}
|
||||
onClick={onSelect}
|
||||
/>
|
||||
<DropDownItem
|
||||
key="disabled"
|
||||
label={t("Translations:DisabledEmployeeStatus")}
|
||||
data-key={"disabled"}
|
||||
onClick={onSelect}
|
||||
/>
|
||||
<DropDownItem
|
||||
key="invited"
|
||||
label={t("LblInvited")}
|
||||
data-key={"invited"}
|
||||
onClick={onSelect}
|
||||
/>
|
||||
</>
|
||||
),
|
||||
[t, onSelectorSelect]
|
||||
);
|
||||
|
||||
const headerMenu = getHeaderMenu(t);
|
||||
menuItems = [...menuItems, ...headerMenu];
|
||||
|
||||
const onEditGroup = useCallback(
|
||||
() =>
|
||||
@ -281,19 +274,14 @@ const SectionHeaderContent = (props) => {
|
||||
width={context.sectionWidth}
|
||||
isTabletView={isTabletView}
|
||||
>
|
||||
{isHeaderVisible && viewAs !== "table" ? (
|
||||
{isHeaderVisible ? (
|
||||
<div className="group-button-menu-container">
|
||||
<GroupButtonsMenu
|
||||
checked={isHeaderChecked}
|
||||
<TableGroupMenu
|
||||
checkboxOptions={menuItems}
|
||||
onChange={onChange}
|
||||
isChecked={isHeaderChecked}
|
||||
isIndeterminate={isHeaderIndeterminate}
|
||||
onChange={onCheck}
|
||||
menuItems={menuItems}
|
||||
visible={isHeaderVisible}
|
||||
moreLabel={t("Common:More")}
|
||||
closeTitle={t("Common:CloseButton")}
|
||||
onClose={onClose}
|
||||
selected={menuItems[0].label}
|
||||
sectionWidth={context.sectionWidth}
|
||||
headerMenu={headerMenu}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
@ -368,7 +356,6 @@ export default withRouter(
|
||||
selectedGroupStore,
|
||||
getHeaderMenu,
|
||||
dialogStore,
|
||||
viewAs,
|
||||
} = peopleStore;
|
||||
const { getUsersList, removeUser, updateUserStatus } = usersStore;
|
||||
const {
|
||||
@ -408,7 +395,6 @@ export default withRouter(
|
||||
isTabletView,
|
||||
getHeaderMenu,
|
||||
setInvitationDialogVisible,
|
||||
viewAs,
|
||||
};
|
||||
})(
|
||||
withTranslation(["Home", "Common", "Translations"])(
|
||||
|
||||
@ -111,6 +111,7 @@ class PeopleStore {
|
||||
}),
|
||||
disabled: !hasUsersToMakeEmployees,
|
||||
onClick: () => setEmployeeDialogVisible(true),
|
||||
iconUrl: "/static/images/change.to.employee.react.svg",
|
||||
},
|
||||
{
|
||||
label: t("ChangeToGuest", {
|
||||
@ -118,21 +119,25 @@ class PeopleStore {
|
||||
}),
|
||||
disabled: !hasUsersToMakeGuests,
|
||||
onClick: () => setGuestDialogVisible(true),
|
||||
iconUrl: "/static/images/change.to.guest.react.svg",
|
||||
},
|
||||
{
|
||||
label: t("LblSetActive"),
|
||||
disabled: !hasUsersToActivate,
|
||||
onClick: () => setActiveDialogVisible(true),
|
||||
iconUrl: "/static/images/enable.react.svg",
|
||||
},
|
||||
{
|
||||
label: t("LblSetDisabled"),
|
||||
disabled: !hasUsersToDisable,
|
||||
onClick: () => setDisableDialogVisible(true),
|
||||
iconUrl: "/static/images/disable.react.svg",
|
||||
},
|
||||
{
|
||||
label: t("LblInviteAgain"),
|
||||
disabled: !hasUsersToInvite,
|
||||
onClick: () => setSendInviteDialogVisible(true),
|
||||
iconUrl: "/static/images/invite.again.react.svg",
|
||||
},
|
||||
{
|
||||
label: t("LblSendEmail"),
|
||||
@ -144,11 +149,13 @@ class PeopleStore {
|
||||
}
|
||||
window.open(`mailto: ${str}`, "_self");
|
||||
},
|
||||
iconUrl: "/static/images/send.react.svg",
|
||||
},
|
||||
{
|
||||
label: t("Common:Delete"),
|
||||
disabled: !hasUsersToRemove,
|
||||
onClick: () => setDeleteDialogVisible(true),
|
||||
iconUrl: "/static/images/delete.react.svg",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
10
public/images/change.to.employee.react.svg
Normal file
10
public/images/change.to.employee.react.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17302:17809)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 4.70711L11 3.41423L10.9999 8.99994L12.9999 8.99995L13 3.4142L14.2929 4.70711L15.7071 3.29289L12.7071 0.292893C12.3166 -0.0976311 11.6834 -0.097631 11.2929 0.292893L8.29289 3.29289L9.70711 4.70711ZM5 5.5C4.44772 5.5 4 5.94772 4 6.5C4 6.9348 4.10395 7.5205 4.32809 7.95941C4.54496 8.38408 4.76659 8.5 5 8.5C5.23341 8.5 5.45504 8.38408 5.67191 7.95941C5.89605 7.5205 6 6.9348 6 6.5C6 5.94772 5.55228 5.5 5 5.5ZM2 6.5C2 4.84315 3.34315 3.5 5 3.5C6.65685 3.5 8 4.84315 8 6.5C8 7.16977 7.85395 8.08407 7.45309 8.86902C7.04496 9.6682 6.26659 10.5 5 10.5C3.73341 10.5 2.95504 9.6682 2.54691 8.86902C2.14605 8.08407 2 7.16977 2 6.5ZM2.36826 13.7522C2.11634 14.3936 2 15.2591 2 16H0C0 15.1052 0.133657 13.9707 0.506736 13.021C0.860069 12.1215 1.60456 11 3 11C3.32012 11 3.56782 11.0878 3.75971 11.1837C3.8319 11.2198 3.90144 11.26 3.94436 11.2849L3.95675 11.292C4.006 11.3204 4.03849 11.3387 4.07221 11.3556C4.15907 11.399 4.3756 11.5 5 11.5C5.6244 11.5 5.84093 11.399 5.92779 11.3556C5.96151 11.3387 5.994 11.3204 6.04325 11.292L6.05563 11.2849C6.09855 11.26 6.16809 11.2198 6.24029 11.1837C6.43218 11.0878 6.67988 11 7 11C8.39544 11 9.13993 12.1215 9.49326 13.021C9.86634 13.9707 10 15.1052 10 16H8C8 15.2591 7.88366 14.3936 7.63174 13.7522C7.40843 13.1838 7.19604 13.0416 7.06943 13.009L7.04269 13.0244C6.99038 13.0546 6.91349 13.0988 6.82221 13.1444C6.40907 13.351 5.8756 13.5 5 13.5C4.1244 13.5 3.59093 13.351 3.17779 13.1444C3.08651 13.0988 3.00962 13.0546 2.95731 13.0244L2.93057 13.009C2.80396 13.0416 2.59157 13.1838 2.36826 13.7522Z" fill="#333333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17302:17809">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
3
public/images/change.to.guest.react.svg
Normal file
3
public/images/change.to.guest.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.70711 4.29289L11 5.58577L10.9999 6.36654e-05L12.9999 4.95911e-05L13 5.5858L14.2929 4.29289L15.7071 5.70711L12.7071 8.70711C12.3166 9.09763 11.6834 9.09763 11.2929 8.70711L8.29289 5.70711L9.70711 4.29289ZM7 7.5C7 8.32843 6.5 9.5 5.5 9.5C4.5 9.5 4 8.32843 4 7.5C4 6.67157 4.5 6 5.5 6C6.5 6 7 6.67157 7 7.5ZM4.32368 12.5662C4.11871 13.1811 4 14.0659 4 15H2C2 13.9341 2.13129 12.8189 2.42632 11.9338C2.5726 11.4949 2.78012 11.0481 3.08449 10.693C3.40019 10.3247 3.87489 10 4.5 10C4.63075 10 4.76024 10.0256 4.88112 10.0755C5.29162 10.2447 5.43583 10.2627 5.51577 10.2617C5.59844 10.2607 5.72531 10.2391 6.11615 10.0766C6.2378 10.026 6.36825 10 6.5 10C7.12511 10 7.59981 10.3247 7.91551 10.693C8.21988 11.0481 8.4274 11.4949 8.57368 11.9338C8.86871 12.8189 9 13.9341 9 15L7 15C7 14.0659 6.88129 13.1811 6.67632 12.5662C6.60133 12.3413 6.52568 12.1858 6.46283 12.0858C6.17424 12.185 5.87096 12.2576 5.53971 12.2616C5.19066 12.2658 4.86404 12.1937 4.53847 12.0838C4.47537 12.1837 4.39919 12.3397 4.32368 12.5662Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
10
public/images/copyTo.react.svg
Normal file
10
public/images/copyTo.react.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17158:39447)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 -0.00048933C4.89543 -0.00048933 4 0.894941 4 1.99951L6 1.99951L14 1.99951L14 9.99951L14 11.9995C15.1046 11.9995 16 11.1041 16 9.99951L16 1.99951C16 0.894941 15.1046 -0.00048933 14 -0.00048933L6 -0.00048933ZM2 3.99951C0.895433 3.99951 2.44784e-06 4.89494 2.44784e-06 5.99951L2.44784e-06 13.9995C2.44784e-06 15.1041 0.895433 15.9995 2 15.9995L10 15.9995C11.1046 15.9995 12 15.1041 12 13.9995L12 5.99951C12 4.89494 11.1046 3.99951 10 3.99951L2 3.99951ZM2 13.9995L2 5.99951L10 5.99951L10 13.9995L2 13.9995Z" fill="#333333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17158:39447">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 826 B |
10
public/images/delete.react.svg
Normal file
10
public/images/delete.react.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17158:39464)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.49896 0L8.49896 0C9.32739 0 9.99896 0.671573 9.99896 1.5V2H10L13 2C14.1049 2 15 2.89593 15 4.00022L13 4.00022V4L10 4H8.49896L7.49896 4H6L3 4V4.00022H1C1 2.89593 1.89515 2 3 2L5.99896 2V1.5C5.99896 0.671573 6.67054 0 7.49896 0ZM3 5.00023L3 13.0002C3 14.6571 4.34315 16.0002 6 16.0002H10C11.6569 16.0002 13 14.6571 13 13.0002L13 5.00023H11L11 13.0002C11 13.5525 10.5523 14.0002 10 14.0002L6 14.0002C5.44771 14.0002 5 13.5525 5 13.0002L5 5.00023L3 5.00023ZM7 6L7 14H9V6H7Z" fill="#333333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17158:39464">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 793 B |
13
public/images/disable.react.svg
Normal file
13
public/images/disable.react.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17302:17829)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.00113 2.48786C5.00113 1.11383 6.11502 -3.14699e-05 7.48905 6.65749e-10C8.86303 3.15322e-05 9.97685 1.11388 9.97685 2.48786V2.97797C9.97685 3.82959 9.86385 4.66311 9.50199 5.31672C9.31283 5.65839 9.0469 5.96615 8.68518 6.18452C8.32164 6.404 7.91621 6.49997 7.50113 6.49997C6.60761 6.49997 5.90851 6.05741 5.49334 5.32603C5.12196 4.67178 5.00113 3.83635 5.00113 2.97797V2.48786ZM7.489 2C7.21956 1.99999 7.00113 2.21842 7.00113 2.48786L7.00113 2.97797C7.00113 3.70199 7.11279 4.12756 7.23265 4.33871C7.28475 4.43049 7.32574 4.45968 7.34235 4.46959C7.35719 4.47844 7.3987 4.49997 7.50113 4.49997C7.60355 4.49997 7.64135 4.47849 7.65153 4.47234C7.66355 4.46508 7.70185 4.43904 7.75225 4.34801C7.8695 4.13623 7.97685 3.70875 7.97685 2.97797L7.97685 2.48786C7.97685 2.21843 7.75844 2.00001 7.489 2Z" fill="#333333"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.4718 7.73109C3.81802 7.34868 4.32931 6.99992 5.0016 6.99992C5.22571 6.99992 5.44498 7.04412 5.61017 7.08337C5.77945 7.12359 5.96243 7.1766 6.12794 7.22454L6.14111 7.22836C6.65592 7.37748 7.10306 7.49992 7.5016 7.49992C7.56013 7.49992 7.61971 7.49728 7.68039 7.4923L5.92586 9.24683C5.81876 9.2173 5.71899 9.18836 5.62828 9.16204L5.58468 9.14939C5.40268 9.09668 5.26473 9.05697 5.14783 9.02919C5.0895 9.01533 5.05053 9.00803 5.02704 9.00419C5.01149 9.01591 4.98739 9.037 4.95445 9.07339C4.8381 9.2019 4.69814 9.43287 4.55784 9.78061C4.41415 10.1368 4.2955 10.5506 4.20175 10.9709L2.20757 12.9651C2.04522 12.6526 1.96964 12.2847 2.01868 11.8829C2.12094 11.0451 2.33359 9.94818 2.70311 9.0323C2.8866 8.57752 3.13309 8.10521 3.4718 7.73109ZM5.04844 8.99102C5.04842 8.9913 5.04617 8.99262 5.04173 8.99417C5.04623 8.99152 5.04845 8.99075 5.04844 8.99102Z" fill="#333333"/>
|
||||
<path d="M10.5787 10.2509L12.1338 8.69574C12.1874 8.81218 12.2363 8.92927 12.2811 9.04508C12.6361 9.96174 12.8319 11.0587 12.9245 11.8931C13.0581 13.0973 12.0787 13.9999 10.9956 13.9999L6.82965 13.9999L8.82965 11.9999H10.9235C10.8562 11.44 10.7424 10.8094 10.5787 10.2509Z" fill="#333333"/>
|
||||
<path d="M13.7078 5.70711L3.70783 15.7071L2.29362 14.2929L12.2936 4.29289L13.7078 5.70711Z" fill="#333333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17302:17829">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
10
public/images/download.react.svg
Normal file
10
public/images/download.react.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17158:39421)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00095 6.58749L7.00095 1L9.00095 1L9.00095 6.58409L11.2915 4.29342L12.7057 5.70759L8.70662 9.70693C8.31614 10.0974 7.68302 10.0975 7.29248 9.70704L3.29238 5.70792L4.70642 4.29353L7.00095 6.58749ZM2 8L2 12L13.9355 12V8H15.9355V12C15.9355 13.1046 15.0401 14 13.9355 14L2 14C0.895429 14 0 13.1046 0 12L0 8H2Z" fill="#333333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17158:39421">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 628 B |
3
public/images/downloadAs.react.svg
Normal file
3
public/images/downloadAs.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00095 1L7.00095 6.58749L4.70642 4.29353L3.29238 5.70792L7.29248 9.70704C7.68302 10.0975 8.31614 10.0974 8.70662 9.70693L12.7057 5.70759L11.2915 4.29342L9.00095 6.58409L9.00095 1L7.00095 1ZM2 12L2 8H0L0 12C0 13.1046 0.895431 14 2 14H3L3 12H2ZM13.9355 8V12H13V14H13.9355C15.0401 14 15.9355 13.1046 15.9355 12V8H13.9355ZM5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14ZM8 14C8.55228 14 9 13.5523 9 13C9 12.4477 8.55228 12 8 12C7.44772 12 7 12.4477 7 13C7 13.5523 7.44772 14 8 14ZM12 13C12 13.5523 11.5523 14 11 14C10.4477 14 10 13.5523 10 13C10 12.4477 10.4477 12 11 12C11.5523 12 12 12.4477 12 13Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 830 B |
10
public/images/duplicate.react.svg
Normal file
10
public/images/duplicate.react.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17158:39454)">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C4 0.895429 4.89543 -9.70792e-07 6 -8.74228e-07L14 -1.74846e-07C15.1046 -7.82811e-08 16 0.895431 16 2L16 10C16 11.1046 15.1046 12 14 12L14 10L14 2L6 2L4 2ZM8.74228e-07 6C9.70792e-07 4.89543 0.895432 4 2 4L10 4C11.1046 4 12 4.89543 12 6L12 14C12 15.1046 11.1046 16 10 16L2 16C0.895431 16 7.82811e-08 15.1046 1.74846e-07 14L8.74228e-07 6ZM2 6L2 14L10 14L10 6L2 6ZM5 13L5 11L3 11L3 9L5 9L5 7L7 7L7 9L9 9L9 11L7 11L7 13L5 13Z" fill="#333333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17158:39454">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 746 B |
13
public/images/enable.react.svg
Normal file
13
public/images/enable.react.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_17302:17825)">
|
||||
<path d="M7.5211 6.49995C9.25981 6.49995 10.0001 5.14276 10.0001 2.85706V2.49943C10.0001 1.11905 8.88114 2.72332e-05 7.50076 4.98402e-10C6.12035 -2.7224e-05 5.00128 1.11901 5.00128 2.49943V2.85706C5.00128 5.14276 5.7824 6.49995 7.5211 6.49995Z" fill="#333333"/>
|
||||
<path d="M2.08587 12.003C2.28012 9.89946 2.9164 6.99995 5.0006 6.99995C5.4805 6.99995 5.8042 7.11494 6.14113 7.23463C6.50678 7.36452 6.88801 7.49995 7.50138 7.49995C7.56189 7.49995 7.62013 7.49863 7.67632 7.49613L2.24822 12.9242C2.11685 12.6484 2.05521 12.3349 2.08587 12.003Z" fill="#333333"/>
|
||||
<path d="M6.82984 13.9995L12.1517 8.67759C12.6064 9.67074 12.8175 10.9387 12.9155 12.003C13.0168 13.1029 12.105 13.9995 11.0004 13.9995L6.82984 13.9995Z" fill="#333333"/>
|
||||
<path d="M13.7081 5.70711L3.70808 15.7071L2.29387 14.2929L12.2939 4.29289L13.7081 5.70711Z" fill="#333333"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_17302:17825">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 488 B After Width: | Height: | Size: 488 B |
3
public/images/invite.again.react.svg
Normal file
3
public/images/invite.again.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0V2L5 2L5 4L7 4V6L9 6L9 4L11 4V2L9 2V0L7 0ZM16 4.36969C16 3.17359 14.597 2.52832 13.6889 3.30673L8 8.18292L2.31111 3.30673C1.40297 2.52832 0 3.17359 0 4.36969L0 12C0 13.1046 0.895431 14 2 14L14 14C15.1046 14 16 13.1046 16 12L16 4.36969ZM9.30158 9.70144L14 5.67422V12L2 12L2 5.67422L6.69842 9.70144C7.4474 10.3434 8.5526 10.3434 9.30158 9.70144Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 518 B |
3
public/images/move.react.svg
Normal file
3
public/images/move.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1C0.895431 1 0 1.89543 0 3L0 5H2V3L6.58579 3L9 5.41421C9.37507 5.78929 9.88378 6 10.4142 6L14 6L14 13L2 13V11H0L0 13C0 14.1046 0.895431 15 2 15L14 15C15.1046 15 16 14.1046 16 13L16 6C16 4.89543 15.1046 4 14 4L10.4142 4L8 1.58579C7.62493 1.21071 7.11622 1 6.58579 1L2 1ZM3.29289 5.70711L4.58577 6.99998L6.3888e-05 6.99994L4.80408e-05 8.99994L4.58581 8.99998L3.29289 10.2929L4.70711 11.7071L7.70711 8.70711C8.09763 8.31658 8.09763 7.68342 7.70711 7.29289L4.70711 4.29289L3.29289 5.70711Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 659 B |
3
public/images/send.react.svg
Normal file
3
public/images/send.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2C0.89543 2 0 2.89543 0 4L0 12C0 13.1046 0.895431 14 2 14L14 14C15.1046 14 16 13.1046 16 12V4C16 2.89543 15.1046 2 14 2L2 2ZM12.2967 4L3.70326 4L8 7.68292L12.2967 4ZM2 5.17422L2 12L14 12L14 5.17422L9.30158 9.20144C8.5526 9.84342 7.4474 9.84342 6.69842 9.20144L2 5.17422Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 444 B |
3
public/images/settings.desc.react.svg
Normal file
3
public/images/settings.desc.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.16834 1.38262C2.33047 1.24792 2.56169 1.2443 2.73684 1.36157L3.80011 2.07346C4.10611 1.90165 4.43424 1.76458 4.77915 1.66758L5.0276 0.412448C5.06854 0.205596 5.23471 0.0446258 5.44469 0.0253558C5.62755 0.00857572 5.81277 0 6 0C6.18723 0 6.37246 0.00857572 6.55531 0.0253558C6.76529 0.0446258 6.93146 0.205596 6.9724 0.412449L7.22085 1.66758C7.56576 1.76458 7.89389 1.90165 8.19989 2.07346L9.26316 1.36157C9.43831 1.2443 9.66953 1.24792 9.83166 1.38261C10.1171 1.61976 10.3802 1.88288 10.6174 2.16834C10.7521 2.33047 10.7557 2.56169 10.6384 2.73684L9.92654 3.80011C10.0984 4.10611 10.2354 4.43424 10.3324 4.77915L11.5876 5.0276C11.7944 5.06854 11.9554 5.23471 11.9746 5.44469C11.9914 5.62755 12 5.81277 12 6C12 6.18723 11.9914 6.37246 11.9746 6.55531C11.9554 6.76529 11.7944 6.93146 11.5876 6.9724L10.3324 7.22085C10.2354 7.56576 10.0984 7.89389 9.92654 8.19989L10.6384 9.26316C10.7557 9.43831 10.7521 9.66953 10.6174 9.83166C10.3802 10.1171 10.1171 10.3802 9.83166 10.6174C9.66953 10.7521 9.43831 10.7557 9.26316 10.6384L8.19989 9.92654C7.89389 10.0984 7.56576 10.2354 7.22085 10.3324L6.9724 11.5876C6.93146 11.7944 6.76529 11.9554 6.55531 11.9746C6.37246 11.9914 6.18723 12 6 12C5.81277 12 5.62755 11.9914 5.44469 11.9746C5.23471 11.9554 5.06854 11.7944 5.0276 11.5876L4.77915 10.3324C4.43424 10.2354 4.10611 10.0984 3.80011 9.92654L2.73684 10.6384C2.56169 10.7557 2.33047 10.7521 2.16834 10.6174C1.88288 10.3802 1.61976 10.1171 1.38261 9.83166C1.24792 9.66953 1.2443 9.43831 1.36157 9.26316L2.07346 8.19989C1.90165 7.89389 1.76458 7.56576 1.66758 7.22085L0.412449 6.9724C0.205596 6.93146 0.0446258 6.76529 0.0253558 6.55531C0.00857572 6.37246 0 6.18723 0 6C0 5.81277 0.00857572 5.62755 0.0253558 5.44469C0.0446258 5.23471 0.205596 5.06854 0.412449 5.0276L1.66758 4.77915C1.76458 4.43424 1.90165 4.10611 2.07346 3.80011L1.36157 2.73684C1.2443 2.56169 1.24792 2.33047 1.38262 2.16834C1.61976 1.88288 1.88288 1.61976 2.16834 1.38262ZM6 7.5C6.82843 7.5 7.5 6.82843 7.5 6C7.5 5.17157 6.82843 4.5 6 4.5C5.17157 4.5 4.5 5.17157 4.5 6C4.5 6.82843 5.17157 7.5 6 7.5Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
3
public/images/share.react.svg
Normal file
3
public/images/share.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.9973 2.0376C14.9973 1.7592 14.8812 1.49341 14.677 1.30417C14.4728 1.11492 14.199 1.01936 13.9214 1.04048C7.04656 1.56346 1.56102 7.049 1.03804 13.9239C1.01692 14.2015 1.11248 14.4753 1.30172 14.6795C1.49097 14.8837 1.75676 14.9997 2.03516 14.9997L12.9973 14.9997C14.1018 14.9997 14.9973 14.1043 14.9973 12.9997V7.99951C14.9975 7.99951 14.9978 7.99951 14.998 7.99951L14.998 5.99951C14.9978 5.99951 14.9975 5.99951 14.9973 5.99951V2.0376ZM12.9973 6.22271V3.16551C7.9727 4.00826 4.00582 7.97515 3.16307 12.9997H6.22102C6.98441 9.63512 9.63282 6.98646 12.9973 6.22271ZM8.28787 12.9997H12.9973V8.28963C10.7398 8.96177 8.9597 10.7421 8.28787 12.9997Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 819 B |
3
public/images/sort.desc.react.svg
Normal file
3
public/images/sort.desc.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.14453 10.8536C6.33979 11.0488 6.65638 11.0488 6.85164 10.8536L10.3516 7.35355L9.64453 6.64645L6.99808 9.29289V2H5.99808V9.29289L3.35164 6.64645L2.64453 7.35355L6.14453 10.8536Z" fill="#657077"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 350 B |
3
public/images/triangle.navigation.down.react.svg
Normal file
3
public/images/triangle.navigation.down.react.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.75455 9.12731C6.35578 9.58777 5.64147 9.58777 5.24269 9.12731L2.23544 5.65484C1.67457 5.00719 2.13462 4.00018 2.99137 4.00018L9.00587 4.00018C9.86263 4.00018 10.3227 5.00719 9.7618 5.65484L6.75455 9.12731Z" fill="#333333"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 339 B |
Loading…
Reference in New Issue
Block a user