From b020ad72a4a348ec2398b5b437a4c439511ed720 Mon Sep 17 00:00:00 2001 From: Rishabh Rathod Date: Fri, 3 Sep 2021 17:26:09 +0530 Subject: [PATCH] feat: Add horizontal tabs in gitSync Modal (#7048) Add horizontal tabs in gitSync Modal --- .../components/ads/TabItemBackgroundFill.tsx | 2 +- app/client/src/constants/messages.ts | 2 +- .../src/pages/Editor/gitSync/GitSyncModal.tsx | 26 +++++----- app/client/src/pages/Editor/gitSync/Menu.tsx | 29 +++++++---- .../Editor/gitSync/components/TabItem.tsx | 48 +++++++++++++++++++ .../src/pages/Editor/gitSync/constants.ts | 24 +++++----- 6 files changed, 95 insertions(+), 36 deletions(-) create mode 100644 app/client/src/pages/Editor/gitSync/components/TabItem.tsx diff --git a/app/client/src/components/ads/TabItemBackgroundFill.tsx b/app/client/src/components/ads/TabItemBackgroundFill.tsx index 8fc7e8dc91..4e1c3f35e5 100644 --- a/app/client/src/components/ads/TabItemBackgroundFill.tsx +++ b/app/client/src/components/ads/TabItemBackgroundFill.tsx @@ -29,7 +29,7 @@ const Wrapper = styled.div` &:hover, &:focus { color: ${(props) => - props.theme.colors.tabItemBackgroundFill.highlightTextColor};} + props.theme.colors.tabItemBackgroundFill.highlightTextColor}; } padding: ${(props) => diff --git a/app/client/src/constants/messages.ts b/app/client/src/constants/messages.ts index 37ae047275..7a9cb49f0d 100644 --- a/app/client/src/constants/messages.ts +++ b/app/client/src/constants/messages.ts @@ -433,7 +433,7 @@ export const SNIPPET_EXECUTION_FAILED = () => `Snippet execution failed.`; export const SEARCH_ITEM_SELECT = () => `Hit ⏎ to insert`; export const APPLY_SEARCH_CATEGORY = () => `⏎ Jump`; // Git sync -export const GIT_CONNECTION = () => "GIT Connection"; +export const GIT_CONNECTION = () => "Git Connections"; export const DEPLOY = () => "Deploy"; export const MERGE = () => "Merge"; export const SHARE_APPLICATION = () => "Share Application"; diff --git a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx index f62b3158fd..5bb29beca7 100644 --- a/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx +++ b/app/client/src/pages/Editor/gitSync/GitSyncModal.tsx @@ -15,9 +15,10 @@ import { Colors } from "constants/Colors"; import { Classes } from "./constants"; const Container = styled.div` - height: 70vh; + height: 660px; width: 100%; display: flex; + flex-direction: column; position: relative; overflow-y: hidden; `; @@ -32,17 +33,14 @@ const BodyContainer = styled.div` `; const MenuContainer = styled.div` - flex: 1; - height: 100%; - background-color: ${(props) => - props.theme.colors.gitSyncModal.menuBackgroundColor}; - padding-top: ${(props) => props.theme.spaces[15]}px; + padding: ${(props) => + `${props.theme.spaces[12]}px ${props.theme.spaces[10]}px ${props.theme.spaces[6]}px;`}; `; const CloseBtnContainer = styled.div` position: absolute; - right: 55px; - top: 53px; + right: 10px; + top: 10px; &:hover { background-color: ${(props) => props.theme.colors.modal.hoverState}; } @@ -50,16 +48,16 @@ const CloseBtnContainer = styled.div` border-radius: ${(props) => props.theme.radii[1]}px; `; -function NoopComponent() { - return
; -} +// function NoopComponent() { +// return
; +// } const ComponentsByTab = { [MENU_ITEM.GIT_CONNECTION]: GitConnection, [MENU_ITEM.DEPLOY]: Deploy, [MENU_ITEM.MERGE]: Merge, - [MENU_ITEM.SHARE_APPLICATION]: NoopComponent, - [MENU_ITEM.SETTINGS]: NoopComponent, + // [MENU_ITEM.SHARE_APPLICATION]: NoopComponent, + // [MENU_ITEM.SETTINGS]: NoopComponent, }; function GitSyncModal() { @@ -81,7 +79,7 @@ function GitSyncModal() { isOpen={isModalOpen} maxWidth={"900px"} onClose={handleClose} - width={"60vw"} + width={"600px"} > diff --git a/app/client/src/pages/Editor/gitSync/Menu.tsx b/app/client/src/pages/Editor/gitSync/Menu.tsx index a8d8559c51..1078ed909d 100644 --- a/app/client/src/pages/Editor/gitSync/Menu.tsx +++ b/app/client/src/pages/Editor/gitSync/Menu.tsx @@ -1,21 +1,34 @@ import React from "react"; import { TabComponent } from "components/ads/Tabs"; import { MENU_ITEMS } from "./constants"; -import TabItemBackgroundFill from "components/ads/TabItemBackgroundFill"; +import styled from "styled-components"; +import { Colors } from "constants/Colors"; +import TabItem from "./components/TabItem"; type Props = { activeTabIndex: number; onSelect: (index: number) => void; }; +const TabWrapper = styled.div` + .react-tabs { + border-bottom: 1px solid ${Colors.ALTO2}; + } + .react-tabs__tab { + margin-right: 0px; + padding-right: ${(props) => props.theme.spaces[8]}px; + } +`; + export default function Menu(props: Props) { return ( - + + + ); } diff --git a/app/client/src/pages/Editor/gitSync/components/TabItem.tsx b/app/client/src/pages/Editor/gitSync/components/TabItem.tsx new file mode 100644 index 0000000000..259f022d91 --- /dev/null +++ b/app/client/src/pages/Editor/gitSync/components/TabItem.tsx @@ -0,0 +1,48 @@ +import React from "react"; +import styled from "styled-components"; +import { getTypographyByKey, Theme } from "constants/DefaultTheme"; +import { TabProp } from "components/ads/Tabs"; + +type WrapperProps = { + selected: boolean; + vertical: boolean; + theme: Theme; +}; + +const getSelectedStyles = (props: WrapperProps) => + props.selected + ? `color: ${props.theme.colors.tabItemBackgroundFill.highlightTextColor}; + font-weight: 500; + border-bottom: 2px solid ${props.theme.colors.info.light}; + ` + : `color: ${props.theme.colors.tabItemBackgroundFill.textColor}; + `; + +const Wrapper = styled.div` + display: flex; + ${(props) => getTypographyByKey(props, "p1")}; + ${(props) => getSelectedStyles(props)}; + + &:hover, + &:focus { + color: ${(props) => + props.theme.colors.tabItemBackgroundFill.highlightTextColor}; + } + + padding: ${(props) => `${props.theme.spaces[5]}px 0px`}; + + width: 100%; +`; + +export default function TabItem(props: { + tab: TabProp; + selected: boolean; + vertical: boolean; +}) { + const { selected, tab, vertical } = props; + return ( + + {tab.title} + + ); +} diff --git a/app/client/src/pages/Editor/gitSync/constants.ts b/app/client/src/pages/Editor/gitSync/constants.ts index 38ac7cdb9d..a0555b3682 100644 --- a/app/client/src/pages/Editor/gitSync/constants.ts +++ b/app/client/src/pages/Editor/gitSync/constants.ts @@ -4,16 +4,16 @@ import { GIT_CONNECTION, DEPLOY, MERGE, - SHARE_APPLICATION, - SETTINGS, + // SHARE_APPLICATION, + // SETTINGS, } from "constants/messages"; export enum MENU_ITEM { GIT_CONNECTION = "GIT_CONNECTION", DEPLOY = "DEPLOY", MERGE = "MERGE", - SHARE_APPLICATION = "SHARE_APPLICATION", - SETTINGS = "SETTINGS", + // SHARE_APPLICATION = "SHARE_APPLICATION", + // SETTINGS = "SETTINGS", } export const MENU_ITEMS: TabProp[] = [ @@ -29,14 +29,14 @@ export const MENU_ITEMS: TabProp[] = [ key: MENU_ITEM.MERGE, title: createMessage(MERGE), }, - { - key: MENU_ITEM.SHARE_APPLICATION, - title: createMessage(SHARE_APPLICATION), - }, - { - key: MENU_ITEM.SETTINGS, - title: createMessage(SETTINGS), - }, + // { + // key: MENU_ITEM.SHARE_APPLICATION, + // title: createMessage(SHARE_APPLICATION), + // }, + // { + // key: MENU_ITEM.SETTINGS, + // title: createMessage(SETTINGS), + // }, ]; export enum AUTH_TYPE {