Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix download dropdown UI

Browse Source
This commit is contained in:
vicky-primathon.in 2021-05-10 15:08:23 +05:30
parent 3d79900290
commit 30510c56b4
3 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/client/src/assets/icons/control/download-data-icon.svg Normal file
View 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="M3.63664 2.85717L5.50677 2.85717L7.06542 2.85717L7.06542 6.59999L5.81828 6.59999L8.0001 9.34284L10.1819 6.59999L8.93555 6.59999L8.93555 2.85717L10.4938 2.85717L12.3639 2.85717C13.741 2.85717 14.8574 4.08528 14.8574 5.60003C14.8574 6.88094 14.0551 7.9486 12.9761 8.24963C12.8564 10.9733 10.8173 13.1429 8.31197 13.1429C5.83467 13.1429 3.81243 11.022 3.65223 8.34083C2.25399 8.3518 1.14313 7.10654 1.14313 5.60003C1.14313 4.08529 2.2596 2.85717 3.63664 2.85717Z" fill="#A9A7A7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 630 B

23
app/client/src/components/designSystems/appsmith/TableComponent/TableDataDownload.tsx
View File

@ -7,7 +7,7 @@ import {
} from "@blueprintjs/core";
import { IconWrapper } from "constants/IconConstants";
import { Colors } from "constants/Colors";
import { ReactComponent as DownloadIcon } from "assets/icons/control/download-table.svg";
import { ReactComponent as DownloadIcon } from "assets/icons/control/download-data-icon.svg";
import { ReactTableColumnProps } from "components/designSystems/appsmith/TableComponent/Constants";
import { TableIconWrapper } from "components/designSystems/appsmith/TableComponent/TableStyledWrappers";
import TableActionIcon from "components/designSystems/appsmith/TableComponent/TableActionIcon";
@ -21,33 +21,32 @@ const DropDownWrapper = styled.div`
background: white;
z-index: 1;
border-radius: 4px;
border: 1px solid ${Colors.ATHENS_GRAY};
padding: 8px;
box-shadow: 0px 12px 28px -8px rgba(0, 0, 0, 0.1);
padding: 0;
`;
const OptionWrapper = styled.div`
display: flex;
width: calc(100% - 20px);
width: 100%;
justify-content: space-between;
align-items: center;
height: 32px;
box-sizing: border-box;
padding: 8px;
color: ${Colors.OXFORD_BLUE};
opacity: 0.7;
padding: 6px 12px;
color: ${Colors.CHARCOAL};
min-width: 200px;
cursor: pointer;
margin-bottom: 4px;
background: ${Colors.WHITE};
border-left: none;
border-radius: 4px;
border-radius: none;
.option-title {
font-weight: 500;
font-size: 14px;
line-height: 24px;
font-size: 13px;
line-height: 20px;
}
&:hover {
background: ${Colors.POLAR};
background: ${Colors.SEA_SHELL};
color: ${Colors.CODE_GRAY};
}
`;
interface TableDataDownloadProps {

1
app/client/src/constants/Colors.tsx
View File

@ -75,6 +75,7 @@ export const Colors: Record<string, string> = {
Galliano: "#E0B30E",
ROYAL_BLUE: "#457AE6",
ALTO2: "#E0DEDE",
SEA_SHELL: "#F1F1F1",
};
export type Color = typeof Colors[keyof typeof Colors];