From 1a5192815cb0764c0a89990ffe9d423a1f1176b3 Mon Sep 17 00:00:00 2001 From: sergeyteleshev Date: Thu, 10 Oct 2024 16:20:51 +0200 Subject: [PATCH] CB-5640-update-fileds-ui-for-dark-and-light-themes (#2985) * CB-5640 adds colors to inputs according to design (disabled, readonly) * CB-5640 merges disable logic into readonly * CB-5640 adds aria-disabled prop and styles to input * CB-5640 adds more styles for input * CB-5640 pr fixes * CB-5640 reverts logic * CB-5640 fixes styles * CB-5640 fixes styles * CB-5640 merges disable logic into readonly for all of the inputs all over the app * CB-5640 reverts form-controls styles * CB-5640 reverts form-controls styles * CB-5640 makes disabled design according to the figma * CB-5640 makes checkbox dissapear * CB-5640 cleanup --------- Co-authored-by: Evgenia <139753579+EvgeniaBzzz@users.noreply.github.com> --- .../core-blocks/src/FormControls/Filter.tsx | 2 +- .../InputField/InputField.module.css | 2 -- .../ObjectPropertyInfoForm/RenderField.tsx | 9 +++------ .../core-theming/src/styles/_checkbox.scss | 2 +- .../core-theming/src/styles/_form-controls.scss | 15 ++++----------- .../core-theming/src/styles/_theme-dark.scss | 6 +++--- .../core-theming/src/styles/main/color.pure.scss | 3 ++- .../Users/Teams/Options/TeamOptions.tsx | 6 +++--- .../UserForm/Info/UserFormInfoCredentials.tsx | 6 +++--- .../Dialog/AuthProviderForm/AuthProviderForm.tsx | 2 +- .../NetworkHandlerAuthForm.tsx | 4 ++-- .../Options/AdvancedPropertiesForm.tsx | 3 +-- .../src/ConnectionForm/Options/Options.tsx | 8 +++----- .../ConnectionForm/Options/ParametersForm.tsx | 8 ++++---- .../src/ConnectionForm/SSH/SSH.tsx | 16 ++++++---------- .../src/SaveScriptDialog.tsx | 2 +- .../src/SettingsPanel/Setting.tsx | 3 +-- .../UserAuthenticationPart/ChangePassword.tsx | 6 +++--- .../UserInfoPart/UserProfileFormInfo.tsx | 6 +++--- 19 files changed, 45 insertions(+), 64 deletions(-) diff --git a/webapp/packages/core-blocks/src/FormControls/Filter.tsx b/webapp/packages/core-blocks/src/FormControls/Filter.tsx index c7df95ab9f..162ae2a57d 100644 --- a/webapp/packages/core-blocks/src/FormControls/Filter.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Filter.tsx @@ -116,7 +116,7 @@ export const Filter = observer>(functio autoComplete="off" className={s(styles, { inputField: true })} placeholder={placeholder} - disabled={disabled} + readOnly={disabled} name={name} value={value} onChange={handleChange} diff --git a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css index 80befd67bb..6a36510309 100644 --- a/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css +++ b/webapp/packages/core-blocks/src/FormControls/InputField/InputField.module.css @@ -47,10 +47,8 @@ align-items: center; justify-content: center; } - .input[disabled] + .iconContainer { cursor: auto; - opacity: 0.8; } .input:not(:only-child) { padding-right: 32px !important; diff --git a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx index f3560b3ee2..d8aa15dae7 100644 --- a/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx +++ b/webapp/packages/core-blocks/src/ObjectPropertyInfo/ObjectPropertyInfoForm/RenderField.tsx @@ -221,8 +221,7 @@ export const RenderField = observer(function RenderField({ placeholder={passwordSavedMessage} name={property.id!} value={value} - disabled={disabled} - readOnly={readOnly} + readOnly={readOnly || disabled} className={className} > {property.displayName ?? ''} @@ -243,8 +242,7 @@ export const RenderField = observer(function RenderField({ autoHide={autoHide} description={property.hint} placeholder={passwordSavedMessage} - disabled={disabled} - readOnly={readOnly} + readOnly={readOnly || disabled} autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`} className={className} canShowPassword={canShowPassword} @@ -266,8 +264,7 @@ export const RenderField = observer(function RenderField({ defaultValue={defaultValue} description={property.hint} placeholder={passwordSavedMessage} - disabled={disabled} - readOnly={readOnly} + readOnly={readOnly || disabled} autoComplete={RESERVED_KEYWORDS.includes(autofillToken) ? autofillToken : `${autofillToken} ${property.id}`} className={className} canShowPassword={canShowPassword} diff --git a/webapp/packages/core-theming/src/styles/_checkbox.scss b/webapp/packages/core-theming/src/styles/_checkbox.scss index 45f2d22161..16b4169927 100644 --- a/webapp/packages/core-theming/src/styles/_checkbox.scss +++ b/webapp/packages/core-theming/src/styles/_checkbox.scss @@ -19,7 +19,7 @@ $mdc-checkbox-icon-size: 16px; @extend .mdc-checkbox__native-control; &:disabled { - opacity: 0; + opacity: 0 !important; } } .theme-checkbox__background { diff --git a/webapp/packages/core-theming/src/styles/_form-controls.scss b/webapp/packages/core-theming/src/styles/_form-controls.scss index a029b59cf6..f188cd8d1f 100644 --- a/webapp/packages/core-theming/src/styles/_form-controls.scss +++ b/webapp/packages/core-theming/src/styles/_form-controls.scss @@ -73,26 +73,19 @@ @include mdc-theme-prop(border-color, primary, false); } - &:not([data-select='true'])[readonly] { + &:not([data-select='true'])[readonly], + &:not([data-select='true'])[disabled] { @include mdc-theme-prop(color, input-color-readonly, false); @include mdc-theme-prop(border-color, input-border-readonly, false); @include mdc-theme-prop(background-color, input-background-readonly, false); opacity: 1; + cursor: text; + pointer-events: all; &:-internal-autofill-selected, &:-internal-autofill-previewed { box-shadow: 0 0 0 50px $input-background-readonly inset; } } - &[disabled] { - @include mdc-theme-prop(color, input-color-disabled, false); - @include mdc-theme-prop(border-color, input-border-disabled, false); - @include mdc-theme-prop(background-color, input-background-disabled, false); - opacity: 1; - &:-internal-autofill-selected, - &:-internal-autofill-previewed { - box-shadow: 0 0 0 50px $input-background-disabled inset; - } - } &[data-embedded='true'] { &[disabled], &:not([data-select='true'])[readonly] { diff --git a/webapp/packages/core-theming/src/styles/_theme-dark.scss b/webapp/packages/core-theming/src/styles/_theme-dark.scss index f32bf4a177..836ecfcf19 100644 --- a/webapp/packages/core-theming/src/styles/_theme-dark.scss +++ b/webapp/packages/core-theming/src/styles/_theme-dark.scss @@ -34,9 +34,9 @@ $input-color-readonly: darken($input-color, 5%); $input-border: #585958; $input-border-disabled: darken($input-border, 10%); $input-border-readonly: darken($input-border, 5%); -$input-background: $mdc-theme-secondary; -$input-background-disabled: $input-background; -$input-background-readonly: $input-background; +$input-background: $mdc-theme-surface; +$input-background-disabled: #3e3e3e; +$input-background-readonly: #3e3e3e; $mdc-theme-text-colors: ( dark: ( diff --git a/webapp/packages/core-theming/src/styles/main/color.pure.scss b/webapp/packages/core-theming/src/styles/main/color.pure.scss index 402a43ecb9..c5f809292d 100644 --- a/webapp/packages/core-theming/src/styles/main/color.pure.scss +++ b/webapp/packages/core-theming/src/styles/main/color.pure.scss @@ -6,7 +6,8 @@ * you may not use this file except in compliance with the License. */ -:disabled, [aria-disabled="true"] { +:disabled, +[aria-disabled='true'] { pointer-events: none; cursor: default; opacity: 0.5; diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx index 97082c6e5d..a7a4e82111 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/Teams/Options/TeamOptions.tsx @@ -23,13 +23,13 @@ export const TeamOptions: TabContainerPanelComponent = observer( return ( - + {translate('administration_teams_team_id')} - + {translate('administration_teams_team_name')} - diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfoCredentials.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfoCredentials.tsx index 029371d619..ac13ee727f 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfoCredentials.tsx +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UserForm/Info/UserFormInfoCredentials.tsx @@ -54,7 +54,7 @@ export const UserFormInfoCredentials = observer(function UserFormInfoCred return ( {translate('authentication_user_credentials')} - + {translate('authentication_user_name')} {local && ( @@ -67,7 +67,7 @@ export const UserFormInfoCredentials = observer(function UserFormInfoCred autoComplete="new-password" placeholder={editing ? PASSWORD_PLACEHOLDER : ''} canShowPassword={tabState.state['password'] !== ''} - disabled={disabled} + readOnly={disabled} required={!editing} keepSize tiny @@ -79,7 +79,7 @@ export const UserFormInfoCredentials = observer(function UserFormInfoCred type="password" name="passwordRepeat" placeholder={editing ? PASSWORD_PLACEHOLDER : ''} - disabled={disabled} + readOnly={disabled} required={!editing} canShowPassword keepSize diff --git a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx index 1cef309f13..d80bb3d3e0 100644 --- a/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx +++ b/webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/AuthProviderForm.tsx @@ -51,7 +51,7 @@ export const AuthProviderForm = observer(function AuthProviderForm({ prov type={parameter.encryption === 'none' ? 'text' : 'password'} name={parameter.id} state={credentials.credentials} - disabled={authenticate} + readOnly={authenticate} canShowPassword={false} autoComplete={`section-authentication section-${provider.id} ${configuration?.id ?? ''} ${parameter.id}`} > diff --git a/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx b/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx index d8cc310a91..a6f4298a67 100644 --- a/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionAuthentication/NetworkHandlerAuthForm.tsx @@ -67,10 +67,10 @@ export const NetworkHandlerAuthForm = observer(function NetworkHandlerAut {ssh && ( <> - + {translate(`connections_network_handler_${id}_user`, 'connections_network_handler_default_user')} - + {passwordLabel} diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/AdvancedPropertiesForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/AdvancedPropertiesForm.tsx index 8db7be00af..a949a2ebd5 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/AdvancedPropertiesForm.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/AdvancedPropertiesForm.tsx @@ -35,8 +35,7 @@ export const AdvancedPropertiesForm = observer(function AdvancedPropertie min={0} max={MAX_KEEP_ALIVE_INTERVAL} name="keepAliveInterval" - disabled={disabled} - readOnly={readonly} + readOnly={readonly || disabled} title={translate('connections_connection_keep_alive_tooltip')} state={config} defaultState={DEFAULT_CONFIG} diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx index d95cd5fa7f..d37e416c24 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/Options.tsx @@ -216,8 +216,7 @@ export const Options: TabContainerPanelComponent = observe type="text" name="url" state={config} - disabled={disabled} - readOnly={readonly} + readOnly={readonly || disabled} autoComplete={`section-${config.driverId || 'driver'} section-jdbc`} > {translate('plugin_connections_connection_form_part_main_url_jdbc')} @@ -245,7 +244,7 @@ export const Options: TabContainerPanelComponent = observe - + {translate('connections_connection_name')} {!config.template && ( @@ -262,7 +261,6 @@ export const Options: TabContainerPanelComponent = observe type="text" name="folder" state={config} - disabled={disabled} autoComplete={`section-${config.driverId || 'driver'} section-folder`} autoHide readOnly @@ -273,7 +271,7 @@ export const Options: TabContainerPanelComponent = observe )} - diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ParametersForm.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ParametersForm.tsx index a83cbc8810..1a557dc05b 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/Options/ParametersForm.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/Options/ParametersForm.tsx @@ -26,19 +26,19 @@ export const ParametersForm = observer(function ParametersForm({ config, {!embedded && ( - + {translate('plugin_connections_connection_form_part_main_custom_host')} - + {translate('plugin_connections_connection_form_part_main_custom_port')} )} - + {translate('plugin_connections_connection_form_part_main_custom_database')} {requiresServerName && ( - + {translate('plugin_connections_connection_form_part_main_custom_server_name')} )} diff --git a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx index c52f54f34c..93ca791def 100644 --- a/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx +++ b/webapp/packages/plugin-connections/src/ConnectionForm/SSH/SSH.tsx @@ -109,10 +109,10 @@ export const SSH: TabContainerPanelComponent = observer(function SSH({ st {translate('connections_network_handler_ssh_tunnel_auth_type')} - + {translate('connections_network_handler_ssh_tunnel_host')} - + {translate('connections_network_handler_ssh_tunnel_port')} @@ -121,8 +121,7 @@ export const SSH: TabContainerPanelComponent = observer(function SSH({ st type="text" name="userName" state={handlerState} - disabled={disabled || !enabled} - readOnly={readonly} + readOnly={readonly || disabled || !enabled} required={handlerState.savePassword} tiny fill @@ -134,8 +133,7 @@ export const SSH: TabContainerPanelComponent = observer(function SSH({ st name="password" autoComplete={isSafari ? 'section-connection-ssh-authentication section-ssh password' : 'new-password'} state={handlerState} - disabled={disabled || !enabled} - readOnly={readonly} + readOnly={readonly || disabled || !enabled} required={!passwordSaved && !keyAuth && handlerState.savePassword} description={passwordSaved ? translate('ui_processing_saved') : undefined} tiny @@ -171,8 +169,7 @@ export const SSH: TabContainerPanelComponent = observer(function SSH({ st type="number" name="aliveInterval" state={handlerState.properties} - disabled={disabled || !enabled} - readOnly={readonly} + readOnly={readonly || disabled || !enabled} labelTooltip={aliveIntervalLabel} tiny > @@ -182,8 +179,7 @@ export const SSH: TabContainerPanelComponent = observer(function SSH({ st type="number" name="sshConnectTimeout" state={handlerState.properties} - disabled={disabled || !enabled} - readOnly={readonly} + readOnly={readonly || disabled || !enabled} labelTooltip={connectTimeoutLabel} tiny > diff --git a/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx b/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx index d31edfd3cc..daca09f857 100644 --- a/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx +++ b/webapp/packages/plugin-resource-manager-scripts/src/SaveScriptDialog.tsx @@ -115,7 +115,7 @@ export const SaveScriptDialog: DialogComponent name="name" state={state} error={!state.valid} - disabled={state.projectId === null} + readOnly={state.projectId === null} description={errorMessage} onChange={state.validate} > diff --git a/webapp/packages/plugin-settings-panel/src/SettingsPanel/Setting.tsx b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Setting.tsx index aa9c6a5feb..de2095aca7 100644 --- a/webapp/packages/plugin-settings-panel/src/SettingsPanel/Setting.tsx +++ b/webapp/packages/plugin-settings-panel/src/SettingsPanel/Setting.tsx @@ -130,8 +130,7 @@ export const Setting = observer(function Setting({ source, setting }) { labelTooltip={description} value={value} description={description} - disabled={disabled} - readOnly={readOnly} + readOnly={readOnly || disabled} small onChange={handleChange} > diff --git a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserAuthenticationPart/ChangePassword.tsx b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserAuthenticationPart/ChangePassword.tsx index 8e9218414a..450929203f 100644 --- a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserAuthenticationPart/ChangePassword.tsx +++ b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserAuthenticationPart/ChangePassword.tsx @@ -35,7 +35,7 @@ export const ChangePassword = observer(function ChangePassword({ state, d type="password" name="oldPassword" state={state} - disabled={disabled} + readOnly={disabled} mapValue={(value?: string) => value?.trim() ?? ''} small required @@ -48,7 +48,7 @@ export const ChangePassword = observer(function ChangePassword({ state, d name="password" autoComplete="new-password" state={state} - disabled={disabled} + readOnly={disabled} mapValue={(value?: string) => value?.trim() ?? ''} small required @@ -60,7 +60,7 @@ export const ChangePassword = observer(function ChangePassword({ state, d type="password" name="repeatedPassword" state={state} - disabled={disabled} + readOnly={disabled} mapValue={(value?: string) => value?.trim() ?? ''} small required diff --git a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfoPart/UserProfileFormInfo.tsx b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfoPart/UserProfileFormInfo.tsx index fc1a71942d..1c2f1b3bef 100644 --- a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfoPart/UserProfileFormInfo.tsx +++ b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserInfoPart/UserProfileFormInfo.tsx @@ -30,13 +30,13 @@ export const UserProfileFormInfo: TabContainerPanelComponent {translate('plugin_user_profile_info')} - + {translate('plugin_user_profile_info_id')} - + {translate('plugin_user_profile_info_displayName')} - + {translate('authentication_user_role')}