From 5c0f221cc7ebd24308e596b1f3a03ad73cf40692 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Tue, 28 Jan 2020 11:57:46 +0530 Subject: [PATCH] Fix Editable Text. Sidnav styles. editor/viewer redirection from application card. --- .../editorComponents/EditableText.tsx | 4 +-- app/client/src/pages/AppViewer/index.tsx | 6 +--- .../viewer/AppViewerSideNavWrapper.tsx | 5 ++- .../src/pages/AppViewer/viewer/SideNav.tsx | 36 +++++++++---------- .../pages/AppViewer/viewer/SideNavItem.tsx | 29 +++++++++++---- app/client/src/sagas/SagaUtils.ts | 2 +- 6 files changed, 47 insertions(+), 35 deletions(-) diff --git a/app/client/src/components/editorComponents/EditableText.tsx b/app/client/src/components/editorComponents/EditableText.tsx index df1ce49a7b..104a976040 100644 --- a/app/client/src/components/editorComponents/EditableText.tsx +++ b/app/client/src/components/editorComponents/EditableText.tsx @@ -38,8 +38,8 @@ export const EditableText = (props: EditableTextProps) => { diff --git a/app/client/src/pages/AppViewer/index.tsx b/app/client/src/pages/AppViewer/index.tsx index 9e5ade6505..43f373530c 100644 --- a/app/client/src/pages/AppViewer/index.tsx +++ b/app/client/src/pages/AppViewer/index.tsx @@ -90,11 +90,7 @@ class AppViewer extends Component< - + props.theme.fontSizes[3]}px; &.bp3-intent-primary { background: ${props => props.theme.sideNav.activeItemBGColor}; } - & div { - line-height: ${props => props.theme.lineHeights[6]}px; + & > div { + display: inline-block; } } } diff --git a/app/client/src/pages/AppViewer/viewer/SideNav.tsx b/app/client/src/pages/AppViewer/viewer/SideNav.tsx index d5c5dc1bb3..e880949a9d 100644 --- a/app/client/src/pages/AppViewer/viewer/SideNav.tsx +++ b/app/client/src/pages/AppViewer/viewer/SideNav.tsx @@ -1,13 +1,12 @@ import React, { useState } from "react"; import styled from "styled-components"; -import { Menu, IconName, Button, Icon } from "@blueprintjs/core"; +import { Menu, Button } from "@blueprintjs/core"; import SideNavItem, { SideNavItemProps } from "./SideNavItem"; - +import LetterIcon from "components/editorComponents/LetterIcon"; type SideNavProps = { items?: SideNavItemProps[]; active?: string; headeroffset?: number; - iconSize?: number; }; /* eslint-disable no-unexpected-multiline */ @@ -21,25 +20,23 @@ const SideNavWrapper = styled.div<{ props.open ? props.theme.sideNav.maxWidth : props.theme.sideNav.minWidth}px; - transition: width 0.3s ease-in-out; + transition: width 0.1s ease-in; height: 100%; & ul { min-width: ${props => props.theme.sideNav.minWidth}px; overflow-y: auto; + & a { + text-decoration: none; + color: ${props => props.theme.colors.textOnDarkBG}; + } & li > div { width: 100%; display: flex; justify-content: center; align-items: center; - padding: 0; + padding: 0 ${props => (props.open ? props.theme.spaces[6] : 0)}px; height: ${props => props.theme.sideNav.navItemHeight}px; text-transform: capitalize; - & > div { - flex-grow: 0; - display: inline; - width: ${props => (props.open ? 100 : 0)}px; - color: ${props => props.theme.sideNav.fontColor}; - } & > span { margin-right: ${props => (props.open ? props.theme.spaces[3] : 0)}px; } @@ -64,7 +61,7 @@ const ToggleButton = styled(Button)<{ height: ${props => props.headeroffset || 50}px; justify-content: flex-end; padding-right: ${props => props.theme.sideNav.minWidth / 2}px; - transition: width 0.3s ease-in-out; + transition: width 0.1s ease-in; } `; @@ -74,16 +71,19 @@ export const SideNav = (props: SideNavProps) => { let items = sideNavItems; if (!items) { items = [ - { id: "0", text: "", path: "", loading: true }, - { id: "1", text: "", path: "", loading: true }, - { id: "2", text: "", path: "", loading: true }, + { id: "0", text: "", path: "", loading: true, showText: true }, + { id: "1", text: "", path: "", loading: true, showText: true }, + { id: "2", text: "", path: "", loading: true, showText: true }, ]; } return items.map(item => { - const icon = ( - + const icon = + item.text.length > 0 ? ( + + ) : null; + return ( + ); - return ; }); }; const toggleCollapse = () => { diff --git a/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx b/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx index 3bfc9720a4..a9c2ed9443 100644 --- a/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx +++ b/app/client/src/pages/AppViewer/viewer/SideNavItem.tsx @@ -1,13 +1,24 @@ -import React from "react"; +import React, { ReactNode } from "react"; +import styled from "styled-components"; import { NavLink, useRouteMatch } from "react-router-dom"; -import { MenuItem, Classes, IconName } from "@blueprintjs/core"; +import { MenuItem, Classes } from "@blueprintjs/core"; + +const Content = styled.div<{ collapsed: boolean }>` + display: flex; + justify-content: ${props => (props.collapsed ? "center" : "flex-start")}; + align-items: center; + & > div:first-of-type { + margin-right: ${props => (props.collapsed ? 0 : props.theme.spaces[5])}px; + } +`; export type SideNavItemProps = { id: string; - icon?: IconName | JSX.Element; + icon?: ReactNode; text: string; path: string; loading: boolean; + showText?: boolean; }; export const SideNavItem = (props: SideNavItemProps) => { @@ -15,13 +26,19 @@ export const SideNavItem = (props: SideNavItemProps) => { path: props.path, exact: true, }); + const menuItemContent = ( + + {props.icon} + {props.showText ? props.text : null} + + ); + return ( diff --git a/app/client/src/sagas/SagaUtils.ts b/app/client/src/sagas/SagaUtils.ts index a40f6b9558..7e12889e76 100644 --- a/app/client/src/sagas/SagaUtils.ts +++ b/app/client/src/sagas/SagaUtils.ts @@ -4,7 +4,7 @@ export const getDefaultPageId = ( ): string | undefined => { let defaultPage: ApplicationPagePayload | undefined = undefined; if (pages) { - pages.find(page => page.isDefault); + defaultPage = pages.find(page => page.isDefault); if (!defaultPage) { defaultPage = pages[0]; }