From dab6d1ea3be6f9ebe787c1c402ee908e2dbda0eb Mon Sep 17 00:00:00 2001 From: satbir121 <39981226+satbir121@users.noreply.github.com> Date: Thu, 13 Aug 2020 22:07:15 +0530 Subject: [PATCH 1/2] Adding base64 library to realm executor (#304) * Adding base64 library to realm executor * Changing base64 interface to btoa and atob * Making base64 a dependancy --- app/client/package.json | 3 ++- .../src/jsExecution/JSExecutionManagerSingleton.ts | 9 +++++++++ app/client/yarn.lock | 5 +++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/app/client/package.json b/app/client/package.json index 642ec189c7..4ea39be357 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -61,6 +61,7 @@ "instantsearch.js": "^4.4.1", "interweave": "^12.1.1", "interweave-autolink": "^4.0.1", + "js-base64": "^3.4.5", "json-fn": "^1.1.1", "lint-staged": "^9.2.5", "localforage": "^1.7.3", @@ -199,4 +200,4 @@ "pre-commit": "lint-staged" } } -} \ No newline at end of file +} diff --git a/app/client/src/jsExecution/JSExecutionManagerSingleton.ts b/app/client/src/jsExecution/JSExecutionManagerSingleton.ts index df0240c910..f10d0d2f8c 100644 --- a/app/client/src/jsExecution/JSExecutionManagerSingleton.ts +++ b/app/client/src/jsExecution/JSExecutionManagerSingleton.ts @@ -1,6 +1,7 @@ import RealmExecutor from "./RealmExecutor"; import moment from "moment-timezone"; import { ActionDescription } from "entities/DataTree/dataTreeFactory"; +import { btoa, atob } from "js-base64"; export type JSExecutorGlobal = Record; export type JSExecutorResult = { @@ -30,6 +31,14 @@ export const extraLibraries = [ accessor: "moment", lib: moment, }, + { + accessor: "btoa", + lib: btoa, + }, + { + accessor: "atob", + lib: atob, + }, ]; class JSExecutionManager { diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 5319f4a0ea..c37745e1e7 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -10372,6 +10372,11 @@ js-base64@^2.1.8: version "2.5.1" resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121" +js-base64@^3.4.5: + version "3.4.5" + resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-3.4.5.tgz#6d1921e65a172cfd924604e1416dfaff45752c3e" + integrity sha512-Ub/AANierdcT8nm4ndBn3KzpZQ3MdHX4a+bwoVdjgeHCZ0ZEcP+UB4nmR4Z5lR6SH3Y+qAPmgVR0RxKJNHNHEg== + js-string-escape@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef" From 02a2d8e0a3af047516b732f2ac157f0aff364c7b Mon Sep 17 00:00:00 2001 From: vicky-primathon <67091118+vicky-primathon@users.noreply.github.com> Date: Thu, 13 Aug 2020 22:11:08 +0530 Subject: [PATCH 2/2] Fix-table widget compact mode row height (#285) * Table column header made sticky. Scrollbar background changed to be in consistent with the background for table body scroll and table header scroll * Row height changed for short compact mode * New "Tall" row size --- .../appsmith/AutoToolTipComponent.tsx | 33 +------------ .../appsmith/SearchComponent.tsx | 2 +- .../designSystems/appsmith/Table.tsx | 6 +-- .../appsmith/TableCompactMode.tsx | 4 ++ .../designSystems/appsmith/TableHeader.tsx | 13 +++-- .../appsmith/TableStyledWrappers.tsx | 48 +++++++++---------- .../src/pages/organization/settings.tsx | 25 ++++------ app/client/src/widgets/TableWidget.tsx | 26 ++++++---- 8 files changed, 68 insertions(+), 89 deletions(-) diff --git a/app/client/src/components/designSystems/appsmith/AutoToolTipComponent.tsx b/app/client/src/components/designSystems/appsmith/AutoToolTipComponent.tsx index 5e483b0733..0617567cb9 100644 --- a/app/client/src/components/designSystems/appsmith/AutoToolTipComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/AutoToolTipComponent.tsx @@ -1,37 +1,6 @@ import React, { createRef, useEffect, useState } from "react"; -import styled from "styled-components"; import { Tooltip } from "@blueprintjs/core"; - -const CellWrapper = styled.div<{ isHidden?: boolean }>` - display: flex; - align-items: center; - justify-content: flex-start; - width: 100%; - height: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - opacity: ${props => (props.isHidden ? "0.6" : "1")}; - .image-cell { - width: 40px; - height: 32px; - margin: 0 5px 0 0; - border-radius: 4px; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - } - video { - border-radius: 4px; - } - &.video-cell { - height: 100%; - iframe { - border: none; - border-radius: 4px; - } - } -`; +import { CellWrapper } from "components/designSystems/appsmith/TableStyledWrappers"; const AutoToolTipComponent = (props: { isHidden?: boolean; diff --git a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx index 802e444f34..5aefd3996d 100644 --- a/app/client/src/components/designSystems/appsmith/SearchComponent.tsx +++ b/app/client/src/components/designSystems/appsmith/SearchComponent.tsx @@ -15,7 +15,7 @@ const SearchInputWrapper = styled(InputGroup)` &&& svg { opacity: 0.6; } - margin: 14px 20px; + margin: 5px 20px; width: 250px; min-width: 150px; `; diff --git a/app/client/src/components/designSystems/appsmith/Table.tsx b/app/client/src/components/designSystems/appsmith/Table.tsx index b4f91c4ace..e8625ac2a7 100644 --- a/app/client/src/components/designSystems/appsmith/Table.tsx +++ b/app/client/src/components/designSystems/appsmith/Table.tsx @@ -114,17 +114,12 @@ export const Table = (props: TableProps) => { const selectedRowIndex = props.selectedRowIndex; const tableSizes = TABLE_SIZES[props.compactMode || CompactModeTypes.DEFAULT]; /* Subtracting 9px to handling widget padding */ - const tableRowHeight = - (props.height - - (tableSizes.COLUMN_HEADER_HEIGHT + tableSizes.TABLE_HEADER_HEIGHT + 9)) / - props.pageSize; return ( { displayColumnActions={props.displayColumnActions} compactMode={props.compactMode} updateCompactMode={props.updateCompactMode} + tableSizes={tableSizes} />
diff --git a/app/client/src/components/designSystems/appsmith/TableCompactMode.tsx b/app/client/src/components/designSystems/appsmith/TableCompactMode.tsx index f02c4949a1..8e1d2c2d3c 100644 --- a/app/client/src/components/designSystems/appsmith/TableCompactMode.tsx +++ b/app/client/src/components/designSystems/appsmith/TableCompactMode.tsx @@ -63,6 +63,10 @@ const CompactModes: CompactModeItem[] = [ title: "Default", value: CompactModeTypes.DEFAULT, }, + { + title: "Tall", + value: CompactModeTypes.TALL, + }, ]; interface TableCompactModeProps { diff --git a/app/client/src/components/designSystems/appsmith/TableHeader.tsx b/app/client/src/components/designSystems/appsmith/TableHeader.tsx index d8393130c1..f4c292264a 100644 --- a/app/client/src/components/designSystems/appsmith/TableHeader.tsx +++ b/app/client/src/components/designSystems/appsmith/TableHeader.tsx @@ -13,7 +13,11 @@ import TableColumnsVisibility from "components/designSystems/appsmith/TableColum import TableFilters, { ReactTableFilter, } from "components/designSystems/appsmith/TableFilters"; -import { ReactTableColumnProps, CompactMode } from "widgets/TableWidget"; +import { + ReactTableColumnProps, + CompactMode, + TableSizes, +} from "widgets/TableWidget"; import TableDataDownload from "components/designSystems/appsmith/TableDataDownload"; import TableCompactMode from "components/designSystems/appsmith/TableCompactMode"; import { Colors } from "constants/Colors"; @@ -26,7 +30,8 @@ const PageNumberInputWrapper = styled(NumericInput)` border: 1px solid ${Colors.GREEN}; box-sizing: border-box; border-radius: 4px; - width: 32px; + width: 24px; + height: 24px; padding: 0 !important; text-align: center; } @@ -81,6 +86,7 @@ interface TableHeaderProps { compactMode?: CompactMode; updateCompactMode: (compactMode: CompactMode) => void; width: number; + tableSizes: TableSizes; } const TableHeader = (props: TableHeaderProps) => { @@ -88,6 +94,7 @@ const TableHeader = (props: TableHeaderProps) => { { placeholder="Search..." onSearch={props.searchTableData} /> - + ` width: 100%; @@ -75,6 +74,8 @@ export const TableWrapper = styled.div<{ border-bottom: 1px solid ${Colors.GEYSER_LIGHT}; border-right: 1px solid ${Colors.GEYSER_LIGHT}; position: relative; + font-size: ${props => props.tableSizes.ROW_FONT_SIZE}px; + line-height: ${props => props.tableSizes.ROW_FONT_SIZE}px; :last-child { border-right: 0; } @@ -96,19 +97,13 @@ export const TableWrapper = styled.div<{ } .th { padding: 0 10px 0 0; - height: 52px; - line-height: 52px; + height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px; + line-height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px; background: ${Colors.ATHENS_GRAY_DARKER}; } .td { - height: ${props => - props.tableRowHeight - ? props.tableRowHeight - : props.tableSizes.ROW_HEIGHT}px; - line-height: ${props => - props.tableRowHeight - ? props.tableRowHeight - : props.tableSizes.ROW_HEIGHT}px; + height: ${props => props.tableSizes.ROW_HEIGHT}px; + line-height: ${props => props.tableSizes.ROW_HEIGHT}px; padding: 0 10px; } } @@ -136,8 +131,8 @@ export const TableWrapper = styled.div<{ } .column-menu { cursor: pointer; - height: 52px; - line-height: 52px; + height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px; + line-height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px; } .th { display: flex; @@ -150,8 +145,8 @@ export const TableWrapper = styled.div<{ } } .input-group { - height: 52px; - line-height: 52px; + height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px; + line-height: ${props => props.tableSizes.COLUMN_HEADER_HEIGHT}px; padding: 0 5px; } `; @@ -206,7 +201,7 @@ export const PaginationWrapper = styled.div` width: 100%; justify-content: flex-end; align-items: center; - padding: 14px 20px; + padding: 8px 20px; `; export const PaginationItemWrapper = styled.div<{ @@ -218,8 +213,8 @@ export const PaginationItemWrapper = styled.div<{ ${props => (props.selected ? Colors.GREEN : Colors.GEYSER_LIGHT)}; box-sizing: border-box; border-radius: 4px; - width: 32px; - height: 32px; + width: 24px; + height: 24px; display: flex; justify-content: center; align-items: center; @@ -257,7 +252,7 @@ export const ActionWrapper = styled.div` } `; -export const CellWrapper = styled.div<{ isHidden: boolean }>` +export const CellWrapper = styled.div<{ isHidden?: boolean }>` display: flex; align-items: center; justify-content: flex-start; @@ -291,6 +286,7 @@ export const CellWrapper = styled.div<{ isHidden: boolean }>` export const TableHeaderWrapper = styled.div<{ serverSidePaginationEnabled: boolean; width: number; + tableSizes: TableSizes; backgroundColor?: Color; }>` display: flex; @@ -301,15 +297,17 @@ export const TableHeaderWrapper = styled.div<{ } overflow-x: scroll; overflow-y: hidden; - height: 60px; - min-height: 60px; + height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px; + min-height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px; ${scrollbarLight}; `; -export const CommonFunctionsMenuWrapper = styled.div` +export const CommonFunctionsMenuWrapper = styled.div<{ + tableSizes: TableSizes; +}>` display: flex; align-items: center; - height: 60px; + height: ${props => props.tableSizes.TABLE_HEADER_HEIGHT}px; `; export const RowWrapper = styled.div` @@ -331,7 +329,7 @@ export const TableIconWrapper = styled.div<{ box-shadow: ${props => props.selected ? `inset 0px 4px 0px ${Colors.GREEN}` : "none"}; width: 48px; - height: 60px; + height: 45px; display: flex; align-items: center; justify-content: center; diff --git a/app/client/src/pages/organization/settings.tsx b/app/client/src/pages/organization/settings.tsx index b1bc1fd11b..f43bf87901 100644 --- a/app/client/src/pages/organization/settings.tsx +++ b/app/client/src/pages/organization/settings.tsx @@ -3,6 +3,7 @@ import { connect } from "react-redux"; import { Icon } from "@blueprintjs/core"; import { TableWrapper } from "components/designSystems/appsmith/TableStyledWrappers"; import { CompactModeTypes, TABLE_SIZES } from "widgets/TableWidget"; +import { Colors } from "constants/Colors"; import { AppState } from "reducers"; import { getAllUsers, @@ -64,19 +65,6 @@ const StyledDropDown = styled.div` const StyledTableWrapped = styled(TableWrapper)` min-height: 0px; height: auto; - .tableWrap { - display: flex; - flex: 1; - } - .table { - display: flex; - flex: 1; - flex-direction: column; - height: auto; - .tbody { - overflow: auto; - } - } `; const StyledMenu = styled(Menu)` @@ -190,6 +178,13 @@ export const OrgSettings = (props: PageProps) => { })); const data = React.useMemo(() => userTableData, [userTableData]); + const tableHeight = React.useMemo(() => { + const tableDataLength = + userTableData.length * TABLE_SIZES[CompactModeTypes.DEFAULT].ROW_HEIGHT + + TABLE_SIZES[CompactModeTypes.DEFAULT].COLUMN_HEADER_HEIGHT; + return tableDataLength < 200 ? tableDataLength : 200; + }, [userTableData]); + const columns = React.useMemo(() => { return [ { @@ -238,7 +233,6 @@ export const OrgSettings = (props: PageProps) => { fetchAllRoles(orgId); fetchCurrentOrg(orgId); }, [orgId, fetchUser, fetchAllRoles, fetchCurrentOrg]); - return ( @@ -268,8 +262,9 @@ export const OrgSettings = (props: PageProps) => { ) : (
diff --git a/app/client/src/widgets/TableWidget.tsx b/app/client/src/widgets/TableWidget.tsx index c31400475f..b63b06d18d 100644 --- a/app/client/src/widgets/TableWidget.tsx +++ b/app/client/src/widgets/TableWidget.tsx @@ -29,23 +29,33 @@ export type TableSizes = { COLUMN_HEADER_HEIGHT: number; TABLE_HEADER_HEIGHT: number; ROW_HEIGHT: number; + ROW_FONT_SIZE: number; }; export enum CompactModeTypes { SHORT = "SHORT", DEFAULT = "DEFAULT", + TALL = "TALL", } export const TABLE_SIZES: { [key: string]: TableSizes } = { [CompactModeTypes.DEFAULT]: { - COLUMN_HEADER_HEIGHT: 52, - TABLE_HEADER_HEIGHT: 61, - ROW_HEIGHT: 52, + COLUMN_HEADER_HEIGHT: 38, + TABLE_HEADER_HEIGHT: 45, + ROW_HEIGHT: 40, + ROW_FONT_SIZE: 12, }, [CompactModeTypes.SHORT]: { - COLUMN_HEADER_HEIGHT: 52, - TABLE_HEADER_HEIGHT: 61, - ROW_HEIGHT: 40, + COLUMN_HEADER_HEIGHT: 38, + TABLE_HEADER_HEIGHT: 45, + ROW_HEIGHT: 20, + ROW_FONT_SIZE: 10, + }, + [CompactModeTypes.TALL]: { + COLUMN_HEADER_HEIGHT: 38, + TABLE_HEADER_HEIGHT: 45, + ROW_HEIGHT: 60, + ROW_FONT_SIZE: 12, }, }; @@ -322,7 +332,7 @@ class TableWidget extends BaseWidget { (tableSizes.TABLE_HEADER_HEIGHT + tableSizes.COLUMN_HEADER_HEIGHT + tableSizes.ROW_HEIGHT * pageSize) > - 10 + 0 ) pageSize += 1; @@ -388,7 +398,7 @@ class TableWidget extends BaseWidget { applyFilter={(filters: ReactTableFilter[]) => { super.updateWidgetMetaProperty("filters", filters); }} - compactMode={this.props.compactMode} + compactMode={this.props.compactMode || CompactModeTypes.DEFAULT} updateCompactMode={(compactMode: CompactMode) => { super.updateWidgetMetaProperty("compactMode", compactMode); }}