From d224f2921d28f3ed63a128dd15579ae9b78026f1 Mon Sep 17 00:00:00 2001 From: "vicky-primathon.in" Date: Thu, 15 Apr 2021 10:31:06 +0530 Subject: [PATCH] Fix scrollbars --- .../ads/HorizontalScrollIndicator.tsx | 159 ------------------ .../ads/VerticalScrollIndicator.tsx | 23 ++- .../appsmith/TableComponent/Table.tsx | 115 ++++++------- .../TableComponent/TableStyledWrappers.tsx | 37 +++- app/client/src/constants/DefaultTheme.tsx | 26 --- 5 files changed, 106 insertions(+), 254 deletions(-) delete mode 100644 app/client/src/components/ads/HorizontalScrollIndicator.tsx diff --git a/app/client/src/components/ads/HorizontalScrollIndicator.tsx b/app/client/src/components/ads/HorizontalScrollIndicator.tsx deleted file mode 100644 index abbfbe5561..0000000000 --- a/app/client/src/components/ads/HorizontalScrollIndicator.tsx +++ /dev/null @@ -1,159 +0,0 @@ -import React, { useEffect, useState, useRef } from "react"; -import styled from "styled-components"; -import _ from "lodash"; -import { useSpring, interpolate } from "react-spring"; -import { ScrollThumb, ScrollTrackCSS } from "constants/DefaultTheme"; -import { connect } from "react-redux"; -import { AppState } from "reducers"; - -const ScrollTrack = styled.div<{ - isVisible: boolean; - bottom?: string; - top?: string; - left?: string; - mode?: "DARK" | "LIGHT"; -}>` - ${ScrollTrackCSS}; - height: 4px; - /*&:hover { - height: 8px; - }*/ - ${(props) => (props.bottom ? "bottom:" + props.bottom : "")}; - ${(props) => (props.top ? "top:" + props.top : "")}; - left: ${(props) => (props.left ? props.left : "0")}; - opacity: ${(props) => (props.isVisible ? 1 : 0)}; - box-shadow: inset 0 0 6px - ${(props) => - props.mode - ? props.mode === "LIGHT" - ? props.theme.colors.scrollbarLightBG - : props.theme.colors.scrollbarDarkBG - : props.theme.colors.scrollbarLightBG}; -`; - -interface Props { - containerRef: React.RefObject; - bottom?: string; - top?: string; - left?: string; - alwaysShowScrollbar?: boolean; - mode?: "DARK" | "LIGHT"; - isResizing: boolean; -} -const HorizontalScrollIndicator = ({ - containerRef, - bottom, - top, - left, - alwaysShowScrollbar, - isResizing, -}: Props) => { - const [{ thumbPosition }, setThumbPosition] = useSpring<{ - thumbPosition: number; - config: { - clamp: boolean; - friction: number; - precision: number; - tension: number; - }; - }>(() => ({ - thumbPosition: 0, - config: { - clamp: true, - friction: 10, - precision: 0.1, - tension: 800, - }, - })); - const [isScrollVisible, setIsScrollVisible] = useState( - alwaysShowScrollbar || false, - ); - const thumbRef = useRef(null); - - const handleContainerScroll = (e: any): void => { - setIsScrollVisible(true); - const { offsetWidth, scrollWidth, scrollLeft } = e.target; - const thumbWidth = offsetWidth * (offsetWidth / scrollWidth); - const thumbPosition = - (scrollLeft / (scrollWidth - offsetWidth)) * (offsetWidth - thumbWidth); - if (thumbRef.current) { - thumbRef.current.style.width = thumbWidth + "px"; - } - setThumbPosition({ - thumbPosition, - }); - }; - - useEffect(() => { - containerRef.current?.addEventListener("scroll", handleContainerScroll); - if (thumbRef.current) { - // thumbRef.current.setAttribute("draggable", "true"); - thumbRef.current.addEventListener("ondrag", (e: any) => { - console.log("on drag"); - e.stopPropagation(); - }); - } - return () => { - containerRef.current?.removeEventListener( - "scroll", - handleContainerScroll, - ); - }; - }, []); - - useEffect(() => { - if (isScrollVisible) { - hideScrollbar(); - } - }, [isScrollVisible]); - - const hideScrollbar = _.debounce(() => { - setIsScrollVisible(alwaysShowScrollbar || false); - }, 1500); - useEffect(() => { - if (isResizing) { - console.log({ isResizing }); - setIsScrollVisible(false); - setTimeout(() => { - if (containerRef.current) { - const { offsetWidth, scrollWidth, scrollLeft } = containerRef.current; - const thumbWidth = offsetWidth * (offsetWidth / scrollWidth); - const thumbPosition = - (scrollLeft / (scrollWidth - offsetWidth)) * - (offsetWidth - thumbWidth); - if (thumbRef.current) { - console.log({ thumbWidth }); - thumbRef.current.style.width = thumbWidth + "px"; - } - setThumbPosition({ - thumbPosition, - }); - } - }, 1000); - } - }, [isResizing]); - return ( - - `${left}px`, - ), - }} - /> - - ); -}; - -const mapStateToProps = (state: AppState): { isResizing: boolean } => ({ - isResizing: state.ui.widgetDragResize.isResizing, -}); - -export default connect(mapStateToProps)(HorizontalScrollIndicator); diff --git a/app/client/src/components/ads/VerticalScrollIndicator.tsx b/app/client/src/components/ads/VerticalScrollIndicator.tsx index c285d4d5c0..395b97b5be 100644 --- a/app/client/src/components/ads/VerticalScrollIndicator.tsx +++ b/app/client/src/components/ads/VerticalScrollIndicator.tsx @@ -1,8 +1,23 @@ import React, { useEffect, useState, useRef } from "react"; import styled from "styled-components"; import _ from "lodash"; +import { animated } from "react-spring"; import { useSpring, interpolate } from "react-spring"; -import { ScrollThumb, ScrollTrackCSS } from "constants/DefaultTheme"; + +export const ScrollThumb = styled(animated.div)<{ + mode?: "DARK" | "LIGHT"; +}>` + position: relative; + width: 4px; + transform: translate3d(0, 0, 0); + background-color: ${(props) => + props.mode + ? props.mode === "LIGHT" + ? props.theme.colors.scrollbarLight + : props.theme.colors.scrollbarDark + : props.theme.colors.scrollbarLight}; + border-radius: ${(props) => props.theme.radii[3]}px; +`; const ScrollTrack = styled.div<{ isVisible: boolean; @@ -11,7 +26,10 @@ const ScrollTrack = styled.div<{ right?: string; mode?: "DARK" | "LIGHT"; }>` - ${ScrollTrackCSS}; + position: absolute; + z-index: 100; + overflow: hidden; + transition: opacity 0.15s ease-in; top: ${(props) => (props.top ? props.top : "0px")}; bottom: ${(props) => (props.bottom ? props.bottom : "0px")}; right: ${(props) => (props.right ? props.right : "2px")}; @@ -105,7 +123,6 @@ const VerticalScrollIndicator = ({ right={right} > { backgroundColor={Colors.WHITE} ref={tableHeaderWrapperRef} > - { - return column.accessor !== "actions"; - })} - hiddenColumns={props.hiddenColumns} - updateHiddenColumns={props.updateHiddenColumns} - filters={props.filters} - applyFilter={props.applyFilter} - editMode={props.editMode} - compactMode={props.compactMode} - updateCompactMode={props.updateCompactMode} - tableSizes={tableSizes} - /> + ( +
+ )} + renderThumbVertical={(props) => ( +
+ )} + > + + { + return column.accessor !== "actions"; + })} + hiddenColumns={props.hiddenColumns} + updateHiddenColumns={props.updateHiddenColumns} + filters={props.filters} + applyFilter={props.applyFilter} + editMode={props.editMode} + compactMode={props.compactMode} + updateCompactMode={props.updateCompactMode} + tableSizes={tableSizes} + /> + +
( -
+ style={{ width: props.width - 6, height: props.height - 48 }} + renderThumbHorizontal={(props) => ( +
)} - renderTrackVertical={({ style, ...props }) => ( -
- )} - renderThumbHorizontal={({ style, ...props }) => ( -
- )} - renderThumbVertical={({ style, ...props }) => ( -
- )} - style={{ width: props.width, height: props.height - 48 }} >
{
- - {/* */} + /> ); }; diff --git a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx index 89ff863ef6..3c1c4ba20d 100644 --- a/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx +++ b/app/client/src/components/designSystems/appsmith/TableComponent/TableStyledWrappers.tsx @@ -30,6 +30,14 @@ export const TableWrapper = styled.div<{ width: ${(props) => props.width - 8}px; overflow-x: auto; ${DisableNativeScrollbar}; + .thumb-horizontal { + height: 4px !important; + border-radius: ${(props) => props.theme.radii[3]}px; + background: ${(props) => props.theme.colors.scrollbarLight} !important; + &:hover { + height: 6px !important; + } + } } .table { border-spacing: 0; @@ -50,6 +58,7 @@ export const TableWrapper = styled.div<{ height: ${(props) => props.height - 80}px; width: 100%; overflow-y: auto; + ${DisableNativeScrollbar}; .tr { width: 100%; } @@ -405,11 +414,33 @@ export const TableHeaderWrapper = styled.div<{ .show-page-items { display: ${(props) => (props.width < 700 ? "none" : "flex")}; } - overflow-x: auto; - overflow-y: hidden; - ${DisableNativeScrollbar}; height: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT}px; min-height: ${(props) => props.tableSizes.TABLE_HEADER_HEIGHT}px; + overflow-x: auto; + ${DisableNativeScrollbar}; + .thumb-horizontal { + height: 4px !important; + border-radius: ${(props) => props.theme.radii[3]}px; + background: ${(props) => props.theme.colors.scrollbarLight}; + &:hover { + height: 6px !important; + } + } + .thumb-vertical { + display: none; + } +`; + +export const TableHeaderInnerWrapper = styled.div<{ + serverSidePaginationEnabled: boolean; + width: number; + tableSizes: TableSizes; + backgroundColor?: Color; +}>` + position: relative; + display: flex; + width: 100%; + height: 100%; `; export const CommonFunctionsMenuWrapper = styled.div<{ diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index b4325d20ab..40c85d19ff 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/app/client/src/constants/DefaultTheme.tsx @@ -7,7 +7,6 @@ import { AlertIcons } from "icons/AlertIcons"; import { IconProps } from "constants/IconConstants"; import { JSXElementConstructor } from "react"; export type FontFamily = typeof FontFamilies[keyof typeof FontFamilies]; -import { animated } from "react-spring"; const { default: styled, @@ -51,31 +50,6 @@ export const DisableNativeScrollbar = css` } `; -export const ScrollThumb = styled(animated.div)<{ - mode?: "DARK" | "LIGHT"; - isVertical?: boolean; -}>` - position: relative; - ${(props) => props.isVertical && `width: 4px;`} - ${(props) => - !props.isVertical && `height: 100%;`} - transform: translate3d(0, 0, 0); - background-color: ${(props) => - props.mode - ? props.mode === "LIGHT" - ? props.theme.colors.scrollbarLight - : props.theme.colors.scrollbarDark - : props.theme.colors.scrollbarLight}; - border-radius: ${(props) => props.theme.radii[3]}px; -`; - -export const ScrollTrackCSS = css` - position: absolute; - z-index: 100; - overflow: hidden; - transition: opacity 0.15s ease-in; -`; - export const truncateTextUsingEllipsis = css` text-overflow: ellipsis; overflow: hidden;