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

Fix: Table widget actions header scrollbar padding (#353)

Browse Source 
* Table header scrollbar padding removed. 
* Table row font size changed based on compact mode.
This commit is contained in:
vicky-primathon 2020-08-28 15:25:20 +05:30 committed by GitHub
parent 859b1f6966
commit 8a0805d77f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/src/components/designSystems/appsmith/TableStyledWrappers.tsx
View File

@ -291,7 +291,7 @@ export const TableHeaderWrapper = styled.div<{
.show-page-items { .show-page-items {
display: ${props => (props.width < 700 ? "none" : "flex")}; display: ${props => (props.width < 700 ? "none" : "flex")};
} }
overflow-x: scroll; overflow-x: auto;
overflow-y: hidden; overflow-y: hidden;
height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px; height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px;
min-height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px; min-height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px;
@ -325,7 +325,7 @@ export const TableIconWrapper = styled.div<{
box-shadow: ${props => box-shadow: ${props =>
props.selected ? `inset 0px 4px 0px ${Colors.GREEN}` : "none"}; props.selected ? `inset 0px 4px 0px ${Colors.GREEN}` : "none"};
width: 48px; width: 48px;
height: 45px; height: 42px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

4
app/client/src/constants/DefaultTheme.tsx
View File

@ -754,8 +754,8 @@ export const scrollbarLight = css<{ backgroundColor?: Color }>`
scrollbar-width: thin; scrollbar-width: thin;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width: 4px;
height: 6px; height: 4px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px box-shadow: inset 0 0 6px

12
app/client/src/widgets/TableWidget.tsx
View File

@ -41,21 +41,21 @@ export enum CompactModeTypes {
export const TABLE_SIZES: { [key: string]: TableSizes } = { export const TABLE_SIZES: { [key: string]: TableSizes } = {
[CompactModeTypes.DEFAULT]: { [CompactModeTypes.DEFAULT]: {
COLUMN_HEADER_HEIGHT: 38, COLUMN_HEADER_HEIGHT: 38,
TABLE_HEADER_HEIGHT: 45, TABLE_HEADER_HEIGHT: 42,
ROW_HEIGHT: 40, ROW_HEIGHT: 40,
ROW_FONT_SIZE: 12, ROW_FONT_SIZE: 14,
}, },
[CompactModeTypes.SHORT]: { [CompactModeTypes.SHORT]: {
COLUMN_HEADER_HEIGHT: 38, COLUMN_HEADER_HEIGHT: 38,
TABLE_HEADER_HEIGHT: 45, TABLE_HEADER_HEIGHT: 42,
ROW_HEIGHT: 20, ROW_HEIGHT: 20,
ROW_FONT_SIZE: 10, ROW_FONT_SIZE: 12,
}, },
[CompactModeTypes.TALL]: { [CompactModeTypes.TALL]: {
COLUMN_HEADER_HEIGHT: 38, COLUMN_HEADER_HEIGHT: 38,
TABLE_HEADER_HEIGHT: 45, TABLE_HEADER_HEIGHT: 42,
ROW_HEIGHT: 60, ROW_HEIGHT: 60,
ROW_FONT_SIZE: 12, ROW_FONT_SIZE: 18,
}, },
}; };