Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix app title widths for both viewer and editor (#3094)

Browse Source
This commit is contained in:
Rishabh Saxena 2021-02-22 11:02:19 +05:30 committed by GitHub
parent 88c86fa881
commit 0dab943be2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/src/components/ads/EditableText.tsx
View File

@ -45,10 +45,18 @@ export type EditableTextProps = CommonComponentProps & {
underline?: boolean;
};
const EditableTextWrapper = styled.div<{
export const EditableTextWrapper = styled.div<{
filled: boolean;
}>`
width: ${(props) => (!props.filled ? "234px" : "100%")};
${(props) =>
!props.filled
? `
width: 243px;
`
: `
width: 100%;
flex: 1;
`}
.error-message {
margin-left: ${(props) => props.theme.spaces[5]}px;
color: ${(props) => props.theme.colors.danger.main};

5
app/client/src/pages/AppViewer/viewer/AppViewerHeader.tsx
View File

@ -46,7 +46,6 @@ const HeaderWrapper = styled(StyledHeader)<{ hasPages: boolean }>`
color: white;
flex-direction: column;
.${Classes.TEXT} {
max-width: 194px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -74,6 +73,10 @@ const HeaderWrapper = styled(StyledHeader)<{ hasPages: boolean }>`
width: 24px;
height: 24px;
}
& .current-app-name {
overflow: auto;
}
`;
const HeaderRow = styled.div<{ justify: string }>`

2
app/client/src/pages/Editor/EditableAppName.tsx
View File

@ -35,6 +35,8 @@ const Container = styled.div`
&&&& .${Classes.EDITABLE_TEXT_CONTENT} {
min-width: 0;
}
flex: 1;
overflow: auto;
`;
export default function EditableTextWrapper(props: EditableTextWrapperProps) {

4
app/client/src/pages/Editor/EditorHeader.tsx
View File

@ -50,6 +50,7 @@ import OnboardingIndicator from "components/editorComponents/Onboarding/Indicato
import { getThemeDetails, ThemeMode } from "selectors/themeSelectors";
const HeaderWrapper = styled(StyledHeader)`
width: 100%;
padding-right: 0;
padding-left: ${(props) => props.theme.spaces[7]}px;
background-color: ${(props) => props.theme.colors.header.background};
@ -83,6 +84,7 @@ const HeaderWrapper = styled(StyledHeader)`
const HeaderSection = styled.div`
display: flex;
flex: 1;
overflow: auto;
align-items: center;
:nth-child(1) {
justify-content: flex-start;
@ -211,7 +213,7 @@ export const EditorHeader = (props: EditorHeaderProps) => {
defaultValue={currentApplication.name || ""}
editInteractionKind={EditInteractionKind.SINGLE}
className="t--application-name editable-application-name"
fill={false}
fill={true}
savingState={
isSavingName ? SavingState.STARTED : SavingState.NOT_STARTED
}