60dbda49e7
## Description Uses `AnimatedGridLayout` component to introduce transitions for the IDE. This is behind a feature flag Fixes #34538 Fixes #30863 Fixes #34544 ## Automation /ok-to-test tags="@tag.All" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!CAUTION] > 🔴 🔴 🔴 Some tests have failed. > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10737363879> > Commit: a912f5c52366abe48768727a1c605cd72b48752c > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10737363879&attempt=2&selectiontype=test&testsstatus=failed&specsstatus=fail" target="_blank">Cypress dashboard</a>. > Tags: @tag.All > Spec: > The following are new failures, please fix them before merging the PR: <ol> > <li>cypress/e2e/Regression/ServerSide/OnLoadTests/ExecuteAction_Spec.ts</ol> > <a href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master" target="_blank">List of identified flaky tests</a>. > <hr>Fri, 06 Sep 2024 16:32:30 UTC <!-- end of auto-generated comment: Cypress test results --> ## Communication Should the DevRel and Marketing teams inform users about this change? - [ ] Yes - [ ] No <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Summary by CodeRabbit - **New Features** - Introduced two new layout components: `AnimatedLayout` and `UnanimatedLayout` for improved editor interface structuring. - Added TypeScript type definitions for the DOM View Transitions API to enhance type safety and developer experience. - Implemented custom hooks, `useGridLayoutTemplate` and `useEditorStateLeftPaneWidth`, for dynamic grid management and left pane width calculation in the IDE layout. - **Improvements** - Enhanced layout responsiveness with the addition of dynamic grid management. - Updated the `Editor` component to use a centralized constant for height calculations, improving maintainability and consistency. - Enhanced test accuracy by refining assertions in the Git Branch Protection test suite. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Sagar Khalasi <sagar@appsmith.com>
70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
import styled from "styled-components";
|
|
import { Classes } from "@blueprintjs/core";
|
|
import { Link, Text } from "@appsmith/ads";
|
|
import { IDE_HEADER_HEIGHT } from "IDE";
|
|
|
|
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;
|
|
`;
|