refactor: const z-index Level

xieliuduo · xieliuduo · commit 1d1293d6bac5 · 2022-04-15T18:56:26.000+08:00
diff --git a/frontend/src/app/components/ChartEditor.tsx b/frontend/src/app/components/ChartEditor.tsx
@@ -60,7 +60,7 @@ import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router';
 import styled from 'styled-components/macro';
-import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_100 } from 'styles/StyleConstants';
 import { CloneValueDeep, isEmptyArray } from 'utils/object';
 import ChartWorkbench from '../pages/ChartWorkbenchPage/components/ChartWorkbench/ChartWorkbench';
 import {
@@ -598,7 +598,7 @@ const StyledChartWorkbenchPage = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${EMPHASIS_LEVEL * 6};
+  z-index: ${LEVEL_100};
   display: flex;
   min-width: 0;
   min-height: 0;
diff --git a/frontend/src/app/components/ChartGraph/BasicTableChart/TableComponents.tsx b/frontend/src/app/components/ChartGraph/BasicTableChart/TableComponents.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from 'antd';
 import React from 'react';
 import { Resizable } from 'react-resizable';
 import styled from 'styled-components/macro';
-import { BLUE, STICKY_LEVEL } from 'styles/StyleConstants';
+import { BLUE, LEVEL_1 } from 'styles/StyleConstants';
 
 export const TableComponentsTd = ({
   children,
@@ -78,7 +78,7 @@ const ResizableHandleStyle = styled.span`
   position: absolute;
   right: -5px;
   bottom: 0;
-  z-index: ${STICKY_LEVEL};
+  z-index: ${LEVEL_1};
   width: 10px;
   height: 100%;
   cursor: col-resize;
diff --git a/frontend/src/app/components/LoadingMask.tsx b/frontend/src/app/components/LoadingMask.tsx
@@ -1,7 +1,7 @@
 import { LoadingOutlined } from '@ant-design/icons';
 import { cloneElement, ReactElement } from 'react';
 import styled, { createGlobalStyle } from 'styled-components/macro';
-import { STICKY_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_1 } from 'styles/StyleConstants';
 
 interface LoadingMaskProps {
   loading: boolean;
@@ -28,7 +28,7 @@ const SpinWrapper = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${STICKY_LEVEL};
+  z-index: ${LEVEL_1};
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/ChartDragLayer.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartDraggable/ChartDragLayer.tsx
@@ -18,7 +18,7 @@
 
 import { DragLayer } from 'react-dnd';
 import styled from 'styled-components';
-import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_100 } from 'styles/StyleConstants';
 import ChartDragPreview from './ChartDragPreview';
 
 const collect = monitor => {
@@ -76,6 +76,6 @@ const LayerStyles = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${EMPHASIS_LEVEL * 10};
+  z-index: ${LEVEL_100};
   pointer-events: none;
 `;
diff --git a/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/ChartPresentPanel.tsx b/frontend/src/app/pages/ChartWorkbenchPage/components/ChartOperationPanel/components/ChartPresentPanel/ChartPresentPanel.tsx
@@ -33,7 +33,7 @@ import { useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
 import {
   BORDER_RADIUS,
-  EMPHASIS_LEVEL,
+  LEVEL_10,
   LINE_HEIGHT_ICON_XXL,
   SPACE_LG,
   SPACE_MD,
@@ -204,7 +204,7 @@ const ReloadMask = styled.div`
   position: absolute;
   top: 0;
   left: 0;
-  z-index: ${EMPHASIS_LEVEL};
+  z-index: ${LEVEL_10};
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/frontend/src/app/pages/DashBoardPage/components/FullScreenPanel/FullScreenPanel.tsx b/frontend/src/app/pages/DashBoardPage/components/FullScreenPanel/FullScreenPanel.tsx
@@ -27,7 +27,7 @@ import { BoardState } from 'app/pages/DashBoardPage/pages/Board/slice/types';
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
-import { EMPHASIS_LEVEL, G90, WHITE } from 'styles/StyleConstants';
+import { G90, LEVEL_10, WHITE } from 'styles/StyleConstants';
 import { CanFullScreenWidgetTypes } from '../../constants';
 import { BoardContext } from '../BoardProvider/BoardProvider';
 import { FullScreenWidgetMapper } from './FullScreenWidgetMapper';
@@ -131,7 +131,7 @@ const FullScreenWrap = styled.div<{ show: boolean }>`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${EMPHASIS_LEVEL * 10};
+  z-index: ${LEVEL_10 * 10};
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -158,7 +158,7 @@ const FullScreenWrap = styled.div<{ show: boolean }>`
     position: absolute;
     top: 64px;
     left: ${p => (p.show ? '0' : '-300px')};
-    z-index: ${EMPHASIS_LEVEL};
+    z-index: ${LEVEL_10};
     width: 300px;
     height: 100%;
 
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/BlockMaskLayer.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/BlockMaskLayer.tsx
@@ -23,7 +23,7 @@ import {
 import React, { memo, useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components/macro';
-import { EMPHASIS_LEVEL, INFO, SUCCESS } from 'styles/StyleConstants';
+import { INFO, LEVEL_20, LEVEL_5, SUCCESS } from 'styles/StyleConstants';
 import {
   editDashBoardInfoActions,
   editWidgetInfoActions,
@@ -104,7 +104,7 @@ const MaskLayer = styled.div<MaskLayerProps>`
   position: absolute;
   top: -5px;
   left: -5px;
-  z-index: ${p => (p.front ? EMPHASIS_LEVEL + 10 : EMPHASIS_LEVEL - 5)};
+  z-index: ${p => (p.front ? LEVEL_20 : LEVEL_5)};
   width: calc(100% + 10px);
   height: calc(100% + 10px);
   cursor: move;
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/StyledWidgetToolBar.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/StyledWidgetToolBar.tsx
@@ -17,15 +17,15 @@
  */
 import { memo } from 'react';
 import styled from 'styled-components/macro';
-import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_50 } from 'styles/StyleConstants';
 export const StyledWidgetToolBar: React.FC<{}> = memo(props => {
   return <StyleWrap>{props.children} </StyleWrap>;
 });
 const StyleWrap = styled.div`
   position: absolute;
   top: 0;
   right: 0;
-  z-index: ${EMPHASIS_LEVEL * 3};
+  z-index: ${LEVEL_50};
   overflow: hidden;
   text-align: right;
   .widget-tool-dropdown {
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/WidgetDndHandleMask.tsx b/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/WidgetDndHandleMask.tsx
@@ -23,7 +23,7 @@ import {
 import React, { memo } from 'react';
 import { useDrag } from 'react-dnd';
 import { useDispatch } from 'react-redux';
-import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_10 } from 'styles/StyleConstants';
 import { editBoardStackActions } from '../../pages/BoardEditor/slice';
 export interface WidgetDndHandleMaskProps {
   widgetId: string;
@@ -86,7 +86,7 @@ export const WidgetDndHandleMask: React.FC<WidgetDndHandleMaskProps> = memo(
             position: 'absolute',
             cursor: 'grabbing',
             top: '0',
-            zIndex: EMPHASIS_LEVEL + 5,
+            zIndex: LEVEL_10 + 1,
             width: '100%',
             height: '100%',
           }}
diff --git a/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/constants.ts b/frontend/src/app/pages/DashBoardPage/components/WidgetComponents/constants.ts
@@ -17,14 +17,14 @@
  */
 
 import type { CSSProperties } from 'react';
-import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_10 } from 'styles/StyleConstants';
 export const FlexStyle: CSSProperties = {
   display: 'flex',
   flex: '1',
   minHeight: '0',
 };
 export const ZIndexStyle: CSSProperties = {
-  zIndex: EMPHASIS_LEVEL,
+  zIndex: LEVEL_10,
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/AutoEditor/AutoBoardEditor.tsx
@@ -47,7 +47,7 @@ import 'react-resizable/css/styles.css';
 import styled from 'styled-components/macro';
 import {
   BORDER_RADIUS,
-  EMPHASIS_LEVEL,
+  LEVEL_100,
   SPACE_MD,
   SPACE_XS,
 } from 'styles/StyleConstants';
@@ -197,7 +197,7 @@ const Wrap = styled.div<{}>`
   overflow-y: auto;
 
   .react-resizable-handle {
-    z-index: ${EMPHASIS_LEVEL * 10};
+    z-index: ${LEVEL_100};
   }
 
   &.desktop {
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/BoardToolBar.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/components/BoardToolBar/BoardToolBar.tsx
@@ -19,7 +19,7 @@
 import { BoardContext } from 'app/pages/DashBoardPage/components/BoardProvider/BoardProvider';
 import React, { useContext } from 'react';
 import styled from 'styled-components/macro';
-import { SPACE, SPACE_XL, STICKY_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_1, SPACE, SPACE_XL } from 'styles/StyleConstants';
 import { BoardToolRights } from './BoardToolRights';
 import { BoardToolBarContext } from './context/BoardToolBarContext';
 import { ToolBar } from './ToolBar';
@@ -39,7 +39,7 @@ export const BoardToolBar = () => {
 };
 
 const Wrapper = styled.div`
-  z-index: ${STICKY_LEVEL};
+  z-index: ${LEVEL_1};
   display: flex;
   flex-shrink: 0;
   align-items: center;
diff --git a/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/index.tsx b/frontend/src/app/pages/DashBoardPage/pages/BoardEditor/index.tsx
@@ -22,7 +22,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
-import { EMPHASIS_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_50 } from 'styles/StyleConstants';
 import { uuidv4 } from 'utils/utils';
 import EditorHeader from '../../components/BoardHeader/EditorHeader';
 import { BoardLoading } from '../../components/BoardLoading';
@@ -167,7 +167,7 @@ const Wrapper = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${EMPHASIS_LEVEL * 5};
+  z-index: ${LEVEL_50};
   display: flex;
   flex-direction: column;
   padding-bottom: 0;
diff --git a/frontend/src/app/pages/MainPage/Background.tsx b/frontend/src/app/pages/MainPage/Background.tsx
@@ -28,7 +28,7 @@ import styled, { keyframes } from 'styled-components/macro';
 import {
   FONT_SIZE_ICON_MD,
   FONT_WEIGHT_MEDIUM,
-  MODAL_LEVEL,
+  LEVEL_1000,
   SPACE_TIMES,
 } from 'styles/StyleConstants';
 import { OrganizationForm } from './OrganizationForm';
@@ -105,7 +105,7 @@ const Container = styled.div<{ visible: boolean }>`
   right: 0;
   bottom: 0;
   left: 0;
-  z-index: ${MODAL_LEVEL};
+  z-index: ${LEVEL_1000};
   display: ${p => (p.visible ? 'flex' : 'none')};
   flex: 1;
   align-items: center;
diff --git a/frontend/src/app/pages/MainPage/Navbar/index.tsx b/frontend/src/app/pages/MainPage/Navbar/index.tsx
@@ -46,7 +46,6 @@ import { downloadFile } from 'app/utils/fetch';
 import { BASE_RESOURCE_URL } from 'globalConstants';
 import { changeLang } from 'locales/i18n';
 import React, { cloneElement, useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import { useDispatch, useSelector } from 'react-redux';
 import { NavLink, useHistory, useRouteMatch } from 'react-router-dom';
 import styled from 'styled-components/macro';
@@ -55,7 +54,7 @@ import {
   BORDER_RADIUS,
   FONT_SIZE_ICON_SM,
   FONT_WEIGHT_MEDIUM,
-  NAV_LEVEL,
+  LEVEL_10,
   SPACE_LG,
   SPACE_MD,
   SPACE_TIMES,
@@ -93,7 +92,7 @@ export function Navbar() {
   const matchModules = useRouteMatch<{ moduleName: string }>(
     '/organizations/:orgId/:moduleName',
   );
-  const { i18n } = useTranslation();
+
   const t = useI18NPrefix('main');
   const brandClick = useCallback(() => {
     history.push('/');
@@ -397,7 +396,7 @@ export function Navbar() {
 }
 
 const MainNav = styled.div`
-  z-index: ${NAV_LEVEL};
+  z-index: ${LEVEL_10};
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/Toolbar.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Editor/Toolbar.tsx
@@ -37,10 +37,10 @@ import { format } from 'sql-formatter';
 import styled from 'styled-components/macro';
 import {
   INFO,
+  LEVEL_1,
   SPACE,
   SPACE_TIMES,
   SPACE_XS,
-  STICKY_LEVEL,
   WARNING,
 } from 'styles/StyleConstants';
 import { getInsertedNodeIndex } from 'utils/utils';
@@ -324,7 +324,7 @@ export const Toolbar = memo(({ allowManage, allowEnableViz }: ToolbarProps) => {
 });
 
 const Container = styled.div`
-  z-index: ${STICKY_LEVEL};
+  z-index: ${LEVEL_1};
   display: flex;
   flex-shrink: 0;
   align-items: center;
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/index.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Properties/index.tsx
@@ -33,7 +33,7 @@ import {
   useState,
 } from 'react';
 import styled from 'styled-components/macro';
-import { STICKY_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_1 } from 'styles/StyleConstants';
 import { EditorContext } from '../../EditorContext';
 import { ColumnPermissions } from './ColumnPermissions';
 import DataModelTree from './DataModelTree/DataModelTree';
@@ -95,5 +95,5 @@ const Container = styled.div`
   display: flex;
   flex-shrink: 0;
   background-color: ${p => p.theme.componentBackground};
-  z-index: ${STICKY_LEVEL};
+  z-index: ${LEVEL_1};
 `;
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Tabs.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Main/Tabs.tsx
@@ -29,7 +29,7 @@ import { memo, useCallback, useContext, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import styled, { css } from 'styled-components/macro';
-import { ORANGE, STICKY_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_1, ORANGE } from 'styles/StyleConstants';
 import { ViewViewModelStages } from '../constants';
 import { EditorContext } from '../EditorContext';
 import {
@@ -201,7 +201,7 @@ function CloseIcon({ touched, stage, error }: CloseIconProps) {
 }
 
 const Wrapper = styled.div`
-  z-index: ${STICKY_LEVEL};
+  z-index: ${LEVEL_1};
   flex-shrink: 0;
 `;
 
diff --git a/frontend/src/app/pages/MainPage/pages/ViewPage/Sidebar/index.tsx b/frontend/src/app/pages/MainPage/pages/ViewPage/Sidebar/index.tsx
@@ -35,7 +35,7 @@ import React, { memo, useCallback, useContext, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components/macro';
-import { NAV_LEVEL, SPACE_TIMES, SPACE_XS } from 'styles/StyleConstants';
+import { LEVEL_10, SPACE_TIMES, SPACE_XS } from 'styles/StyleConstants';
 import { getInsertedNodeIndex, uuidv4 } from 'utils/utils';
 import { UNPERSISTED_ID_PREFIX } from '../constants';
 import { SaveFormContext } from '../SaveFormContext';
@@ -261,7 +261,7 @@ const Wrapper = styled.div<{
 `;
 const ListNavWrapper = styled(ListNav)`
   position: relative;
-  z-index: ${NAV_LEVEL};
+  z-index: ${LEVEL_10};
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
diff --git a/frontend/src/app/pages/MainPage/pages/VizPage/Main/index.tsx b/frontend/src/app/pages/MainPage/pages/VizPage/Main/index.tsx
@@ -14,7 +14,7 @@ import {
   useRouteMatch,
 } from 'react-router-dom';
 import styled from 'styled-components/macro';
-import { STICKY_LEVEL } from 'styles/StyleConstants';
+import { LEVEL_1 } from 'styles/StyleConstants';
 import { useVizSlice } from '../slice';
 import {
   selectArchivedDashboards,
@@ -216,7 +216,7 @@ const Wrapper = styled.div`
 `;
 
 const TabsWrapper = styled.div`
-  z-index: ${STICKY_LEVEL};
+  z-index: ${LEVEL_1};
   flex-shrink: 0;
 `;
 
diff --git a/frontend/src/app/pages/MainPage/pages/VizPage/Sidebar/index.tsx b/frontend/src/app/pages/MainPage/pages/VizPage/Sidebar/index.tsx
diff --git a/frontend/src/app/pages/SharePage/BoardForShare.tsx b/frontend/src/app/pages/SharePage/BoardForShare.tsx
diff --git a/frontend/src/app/pages/SharePage/StoryPlayerForShare/BoardPageItem.tsx b/frontend/src/app/pages/SharePage/StoryPlayerForShare/BoardPageItem.tsx
diff --git a/frontend/src/app/pages/SharePage/StoryPlayerForShare/StoryPlayerForShare.tsx b/frontend/src/app/pages/SharePage/StoryPlayerForShare/StoryPlayerForShare.tsx
diff --git a/frontend/src/app/pages/SharePage/TitleForShare.tsx b/frontend/src/app/pages/SharePage/TitleForShare.tsx
diff --git a/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx b/frontend/src/app/pages/StoryBoardPage/Editor/index.tsx
diff --git a/frontend/src/app/pages/StoryBoardPage/Player/index.tsx b/frontend/src/app/pages/StoryBoardPage/Player/index.tsx
diff --git a/frontend/src/styles/StyleConstants.ts b/frontend/src/styles/StyleConstants.ts
diff --git a/frontend/src/styles/globalStyles/overwritten/globalOverlays.ts b/frontend/src/styles/globalStyles/overwritten/globalOverlays.ts
diff --git a/frontend/src/styles/globalStyles/reactSplit.ts b/frontend/src/styles/globalStyles/reactSplit.ts
