dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-21 00:06:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
Jan Prochazka
2021-02-14 09:26:24 +01:00
parent d08fc85459
commit b0deba4bae
4 changed files with 51 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/web/src/utility/formStyle.js
View File

@@ -14,10 +14,10 @@ export const FormLabel = styled.div`
export const FormValue = styled.div``;
export function FormFieldTemplateDefault({ label, children, onLabelClick, type }) {
export function FormFieldTemplateDefault({ label, children, labelProps, type }) {
return (
<FormRow>
<FormLabel onClick={onLabelClick}>{label}</FormLabel>
<FormLabel {...labelProps}>{label}</FormLabel>
<FormValue>{children}</FormValue>
</FormRow>
);
@@ -36,19 +36,33 @@ export const FormValueTiny = styled.div`
margin-top: 3px;
`;
export function FormFieldTemplateTiny({ label, children, onLabelClick, type }) {
const FormLabelSpan = styled.span`
${props =>
// @ts-ignore
props.disabled &&
`
color: ${props.theme.manager_font3};
`}
`;
export function FormFieldTemplateTiny({ label, children, labelProps, type }) {
const theme = useTheme();
if (type == 'checkbox') {
return (
<FormRowTiny>
{children} <span onClick={onLabelClick}>{label}</span>
{children}{' '}
<FormLabelSpan theme={theme} {...labelProps}>
{label}
</FormLabelSpan>
</FormRowTiny>
);
}
return (
<FormRowTiny>
<FormLabelTiny theme={theme} onClick={onLabelClick}>
{label}
<FormLabelTiny theme={theme}>
<FormLabelSpan theme={theme} {...labelProps}>
{label}
</FormLabelSpan>
</FormLabelTiny>
<FormValueTiny>{children}</FormValueTiny>
</FormRowTiny>
@@ -76,7 +90,7 @@ export const FormLabelLarge = styled.div`
export const FormValueLarge = styled.div``;
export function FormFieldTemplateLarge({ label, onLabelClick, children, type, noMargin = false }) {
export function FormFieldTemplateLarge({ label, labelProps, children, type, noMargin = false }) {
const theme = useTheme();
if (type == 'checkbox') {
return (
@@ -84,7 +98,10 @@ export function FormFieldTemplateLarge({ label, onLabelClick, children, type, no
// @ts-ignore
noMargin={noMargin}
>
{children} <span onClick={onLabelClick}>{label}</span>
{children}{' '}
<FormLabelSpan {...labelProps} theme={theme}>
{label}
</FormLabelSpan>
</FormRowLargeTemplate>
);
}
@@ -94,8 +111,10 @@ export function FormFieldTemplateLarge({ label, onLabelClick, children, type, no
// @ts-ignore
noMargin={noMargin}
>
<FormLabelLarge theme={theme} onClick={onLabelClick}>
{label}
<FormLabelLarge theme={theme}>
<FormLabelSpan theme={theme} {...labelProps}>
{label}
</FormLabelSpan>
</FormLabelLarge>
<FormValueLarge>{children}</FormValueLarge>
</FormRowLargeTemplate>

8
packages/web/src/utility/forms.js
View File

@@ -75,7 +75,7 @@ export function FormPasswordFieldRaw({ name, focused = false, ...other }) {
type={isCrypted || showPassword ? 'text' : 'password'}
/>
{!isCrypted && (
<InlineButton onClick={() => setShowPassword(x => !x)}>
<InlineButton onClick={() => setShowPassword(x => !x)} disabled={other.disabled}>
<FontIcon icon="icon eye" />
</InlineButton>
)}
@@ -119,7 +119,9 @@ export function FormCheckboxField({ label, templateProps = undefined, ...other }
<FieldTemplate
label={label}
type="checkbox"
onLabelClick={other.disabled ? undefined : () => setFieldValue(other.name, !values[other.name])}
labelProps={
other.disabled ? { disabled: true } : { onClick: () => setFieldValue(other.name, !values[other.name]) }
}
{...templateProps}
>
<FormCheckboxFieldRaw {...other} />
@@ -353,7 +355,7 @@ export function FormElectronFileSelectorRaw({ name, ...other }) {
return (
<FlexContainer>
<TextField value={values[name]} onClick={handleBrowse} {...other} readOnly />
<InlineButton onClick={handleBrowse}>Browse</InlineButton>
<InlineButton onClick={handleBrowse} disabled={other.disabled}>Browse</InlineButton>
</FlexContainer>
);
}