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

fix: Fix Encrypted Text alignment (#15866)

Browse Source
This commit is contained in:
Arsalan Yaldram 2022-08-22 11:12:51 +05:30 committed by GitHub
parent 9dae56ef30
commit aef6b4575f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
app/client/src/components/editorComponents/form/fields/StyledFormComponents.tsx
View File

@ -10,7 +10,7 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
props?.config?.controlType !== "SWITCH" &&
props?.config?.controlType !== "CHECKBOX"
? "block;"
: "inline;"}
: "inline;"};
font-weight: normal;
color: ${Colors.DOVE_GRAY};
font-size: 12px;
@ -20,15 +20,22 @@ export const StyledFormInfo = styled.span<{ config?: ControlProps }>`
`;
const FormSubtitleText = styled.span<{ config?: ControlProps }>`
display: ${(props) =>
//SWITCH and CHECKBOX display label text and form input aligned side by side
props?.config?.controlType !== "SWITCH" &&
props?.config?.controlType !== "CHECKBOX"
? "block;"
: "inline;"}
font-weight: normal;
color: ${Colors.DOVE_GRAY};
font-size: 12px;
display: ${(props) =>
//SWITCH and CHECKBOX display label text and form input aligned side by side
props?.config?.controlType !== "SWITCH" &&
props?.config?.controlType !== "CHECKBOX"
? "block;"
: "inline;"};
font-weight: normal;
color: ${Colors.DOVE_GRAY};
font-size: 12px;
`;
const EncryptedText = styled.span`
font-weight: normal;
color: ${Colors.DOVE_GRAY};
font-size: 12px;
margin-left: 2px;
`;
//Styled help text, intended to be used with Form Fields
@ -92,16 +99,16 @@ const StyledFormLabel = styled.label<{
extraStyles?: any;
}>`
display: inline-block;
// TODO: replace condition with props.config?.dataType === "TOGGLE"
// TODO: replace condition with props.config?.dataType === "TOGGLE"
// required for large texts in CHECKBOX and SWITCH
width: ${(props) => props.config?.customStyles?.width || "auto;"}
width: ${(props) => props.config?.customStyles?.width || "auto;"};
min-width: ${(props) =>
props.extraStyles?.minWidth
? props.extraStyles?.minWidth
: props.config?.controlType === "SWITCH" ||
props.config?.controlType === "CHECKBOX"
? "auto;"
: "20vw;"}
: "20vw;"};
font-weight: 400;
font-size: 14px;
line-height: 16px;
@ -112,7 +119,7 @@ const StyledFormLabel = styled.label<{
? props.extraStyles?.marginBottom
: props.config?.controlType === "CHECKBOX"
? "0;"
: "8px;"}
: "8px;"};
&:first-child {
margin-left: 0;
}
@ -129,10 +136,8 @@ const StyledFormLabel = styled.label<{
}
`;
const FormEncrytedSection = styled.div`
display: flex;
margin-left: 12px;
align-items: center;
const FormEncryptedSection = styled.span`
margin-left: 8px;
`;
interface FormLabelProps {
@ -158,6 +163,7 @@ function FormInfoText(props: FormLabelProps) {
}
export {
EncryptedText,
FormInputSwitchToJsonButton,
FormLabel,
FormInputAnchor,
@ -165,5 +171,5 @@ export {
FormInputHelperText,
FormInfoText,
FormSubtitleText,
FormEncrytedSection,
FormEncryptedSection,
};

12
app/client/src/pages/Editor/FormConfig.tsx
View File

@ -11,8 +11,8 @@ import {
FormInputAnchor,
FormInputErrorText,
FormInfoText,
FormSubtitleText,
FormEncrytedSection,
FormEncryptedSection,
EncryptedText,
} from "components/editorComponents/form/fields/StyledFormComponents";
import { FormIcons } from "icons/FormIcons";
import { FormControlProps } from "./FormControl";
@ -155,16 +155,14 @@ function renderFormConfigTop(props: {
</RequiredFieldWrapper>
)}
{encrypted && (
<FormEncrytedSection>
<FormEncryptedSection>
<FormIcons.LOCK_ICON
height={12}
keepColors
width={12}
/>
<FormSubtitleText config={props.config}>
Encrypted
</FormSubtitleText>
</FormEncrytedSection>
<EncryptedText>Encrypted</EncryptedText>
</FormEncryptedSection>
)}
</span>
</LabelWrapper>