9f9a99373d
## Description Extracting out our IDE Header component into ADS for better usability. ADS Templates are shallow components built using opinionated ADS which provide "slots" to place other business logic components inside it. It reduces the work of using ADS by providing pre built UI components Also creating the EntityExplorer folder and created ListWithHeader as a component. Will keep updating this ADS template as we work on Entity Explorer modularization Fixes #37607 ## Automation /ok-to-test tags="@tag.Sanity" ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [x] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes - **New Features** - Introduced `ListWithHeader` component for improved layout in the entity explorer. - Added `IDEHeader` component with subcomponents for better header organization. - Implemented `IDEHeaderSwitcher` for enhanced navigation options in the header. - Added styled components `ListItemContainer` and `ListHeaderContainer` for consistent design. - **Bug Fixes** - Updated import paths for `IDE_HEADER_HEIGHT` to ensure consistent usage across components. - **Documentation** - Added comprehensive documentation for the `IDEHeader` component to aid developers. - **Chores** - Consolidated import statements for cleaner code structure across various components. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
69 lines
1.6 KiB
TypeScript
69 lines
1.6 KiB
TypeScript
import styled from "styled-components";
|
|
import { Classes } from "@blueprintjs/core";
|
|
import { Link, Text, IDE_HEADER_HEIGHT } from "@appsmith/ads";
|
|
|
|
export const Wrapper = styled.div`
|
|
flex-basis: calc(100% - ${(props) => props.theme.homePage.leftPane.width}px);
|
|
padding: var(--ads-v2-spaces-7);
|
|
|
|
/* 84px is the height of save bottom bar */
|
|
height: calc(100vh - ${(props) => props.theme.homePage.header}px - 84px);
|
|
overflow: auto;
|
|
`;
|
|
|
|
export const HeaderWrapper = styled.div<{ margin?: string }>`
|
|
margin-bottom: ${(props) => props.margin ?? `16px`};
|
|
`;
|
|
|
|
export const SettingsHeader = styled(Text)`
|
|
margin-bottom: 0px;
|
|
`;
|
|
|
|
export const SettingsSubHeader = styled(Text)``;
|
|
|
|
export const SettingsFormWrapper = styled.div`
|
|
max-width: 40rem;
|
|
.openid_tag {
|
|
.${Classes.TAG_REMOVE} {
|
|
display: none;
|
|
}
|
|
}
|
|
`;
|
|
|
|
export const BottomSpace = styled.div`
|
|
height: ${(props) => props.theme.settings.footerHeight + 20}px;
|
|
`;
|
|
|
|
export const ContentWrapper = styled.div``;
|
|
|
|
export const LoaderContainer = styled.div`
|
|
height: calc(100vh - ${IDE_HEADER_HEIGHT}px);
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
align-items: center;
|
|
`;
|
|
|
|
export const ContentBox = styled.div`
|
|
border-radius: var(--ads-v2-border-radius);
|
|
border-color: var(--ads-v2-color-border);
|
|
|
|
.business-tag {
|
|
width: fit-content;
|
|
}
|
|
|
|
.hover-state {
|
|
border-radius: var(--ads-v2-border-radius);
|
|
background-color: var(--ads-v2-color-bg-subtle);
|
|
}
|
|
`;
|
|
|
|
export const HelperText = styled(Text)`
|
|
font-size: 12px;
|
|
color: var(--ads-v2-color-fg-muted);
|
|
`;
|
|
|
|
export const NoUnderLineLink = styled(Link)`
|
|
text-decoration: none !important;
|
|
`;
|