mirror of
https://github.com/dbeaver/cloudbeaver.git
synced 2026-09-24 16:04:36 +08:00
Merge pull request #611 from dbeaver/fix/theme-blocks
fix(core-theming): CB-1458 form controls styles cleanup
This commit is contained in:
Alexey
@@ -8,9 +8,8 @@
|
||||
|
||||
import { observer } from 'mobx-react-lite';
|
||||
import {
|
||||
useEffect, useRef, useCallback, ChangeEvent
|
||||
useEffect, useRef, useCallback, ChangeEvent, useImperativeHandle
|
||||
} from 'react';
|
||||
import { useImperativeHandle } from 'react';
|
||||
import styled, { use } from 'reshadow';
|
||||
|
||||
import { Icon, IconOrImage, Loader, useObjectRef } from '@cloudbeaver/core-blocks';
|
||||
|
||||
@@ -46,19 +46,15 @@ export const InlineEditorStyles = composes(
|
||||
position: relative;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
& input {
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
letter-spacing: inherit;
|
||||
outline: none;
|
||||
& input, & input[disabled], & input[readonly] {
|
||||
border: none;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
padding-top: 1px; /* because of -1px top */
|
||||
line-height: 24px;
|
||||
border-radius: unset;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: unset;
|
||||
padding: 0 8px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -332,7 +332,6 @@ export const Combobox: ComboboxType = observer(function Combobox({
|
||||
)}
|
||||
<input
|
||||
ref={setInputRef}
|
||||
role='new'
|
||||
autoComplete="off"
|
||||
name={name}
|
||||
title={title}
|
||||
|
||||
@@ -165,7 +165,6 @@ export const InputField: InputFieldType = observer(function InputField({
|
||||
<input-container>
|
||||
<input
|
||||
ref={ref}
|
||||
role='new'
|
||||
{...rest}
|
||||
type={passwordRevealed ? 'text' : rest.type}
|
||||
name={name}
|
||||
|
||||
@@ -82,7 +82,7 @@ export const Textarea: TextareaType = observer(function Textarea({
|
||||
large,
|
||||
mod,
|
||||
embedded,
|
||||
onChange = () => {},
|
||||
onChange = () => { },
|
||||
...rest
|
||||
}: ControlledProps | ObjectProps<any, any>) {
|
||||
const context = useContext(FormContext);
|
||||
@@ -106,7 +106,6 @@ export const Textarea: TextareaType = observer(function Textarea({
|
||||
<field-label as='label' title={rest.title}>{children}</field-label>
|
||||
<textarea
|
||||
{...rest}
|
||||
role='new'
|
||||
value={value ?? ''}
|
||||
name={name}
|
||||
data-embedded={embedded}
|
||||
|
||||
@@ -42,5 +42,9 @@ export const baseFormControlStyles = composes(
|
||||
composes: theme-typography--caption from global;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-size: 12px;
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
@@ -57,6 +57,7 @@ export const ITEM_LIST_STYLES = composes(
|
||||
z-index: 1;
|
||||
}
|
||||
list-search {
|
||||
composes: theme-typography--body1 from global;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 16px 24px;
|
||||
@@ -67,8 +68,7 @@ export const ITEM_LIST_STYLES = composes(
|
||||
}
|
||||
|
||||
& input {
|
||||
padding: 4px 8px;
|
||||
padding-right: 32px;
|
||||
padding: 4px 32px 4px 8px;
|
||||
}
|
||||
|
||||
& search-button {
|
||||
@@ -76,8 +76,9 @@ export const ITEM_LIST_STYLES = composes(
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
right: 2.5px;
|
||||
top: 50%;
|
||||
right: 4px;
|
||||
transform: translateY(-50%);
|
||||
|
||||
& ListSearchButton {
|
||||
position: relative;
|
||||
|
||||
+3
-3
@@ -10,7 +10,7 @@ import { observer } from 'mobx-react-lite';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import styled from 'reshadow';
|
||||
|
||||
import { useClipboard, Button, Iframe } from '@cloudbeaver/core-blocks';
|
||||
import { useClipboard, Button, Iframe, Textarea } from '@cloudbeaver/core-blocks';
|
||||
import { CommonDialogWrapper, DialogComponent } from '@cloudbeaver/core-dialogs';
|
||||
import { useTranslate } from '@cloudbeaver/core-localization';
|
||||
import { useStyles } from '@cloudbeaver/core-theming';
|
||||
@@ -18,7 +18,7 @@ import { useStyles } from '@cloudbeaver/core-theming';
|
||||
import { ErrorModel, IErrorInfo } from './ErrorModel';
|
||||
import { dialogStyle, styles } from './styles';
|
||||
|
||||
function DisplayErrorInfo({ error }: {error: IErrorInfo}) {
|
||||
function DisplayErrorInfo({ error }: { error: IErrorInfo }) {
|
||||
return styled(useStyles(styles))(
|
||||
<>
|
||||
<property>
|
||||
@@ -28,7 +28,7 @@ function DisplayErrorInfo({ error }: {error: IErrorInfo}) {
|
||||
</property>
|
||||
{error.stackTrace && (
|
||||
<property>
|
||||
<textarea readOnly>{error.stackTrace}</textarea>
|
||||
<Textarea value={error.stackTrace} style={styles} readOnly embedded />
|
||||
</property>
|
||||
)}
|
||||
</>
|
||||
|
||||
+1
-3
@@ -22,9 +22,7 @@ export const styles = css`
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
min-height: 270px;
|
||||
resize: vertical;
|
||||
min-height: 270px !important;
|
||||
}
|
||||
message {
|
||||
overflow: auto;
|
||||
|
||||
@@ -17,56 +17,33 @@
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
@include mdc-theme-prop(color, on-secondary, false);
|
||||
@include mdc-theme-prop(background-color, secondary, false);
|
||||
box-sizing: border-box;
|
||||
padding: 0 4px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
border: 1px solid;
|
||||
border-radius: 3px;
|
||||
@include mdc-theme-prop(border-color, background, false);
|
||||
|
||||
&:global([type="checkbox"]) {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&:global([disabled]),
|
||||
&:not([|select]):global([readonly]) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&[use|mod="surface"] {
|
||||
@include mdc-theme-prop(color, on-surface, false);
|
||||
@include mdc-theme-prop(background-color, surface, false);
|
||||
}
|
||||
input:global([type="checkbox"]) {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
textarea[role="new"] {
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
input[role="new"] {
|
||||
input {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-height: 25px;
|
||||
}
|
||||
|
||||
input[role="new"],
|
||||
textarea[role="new"] {
|
||||
input,
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
padding: 7px 12px;
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
border: 2px solid;
|
||||
outline: none;
|
||||
border-radius: 3px;
|
||||
|
||||
@include mdc-theme-prop(color, on-secondary, false);
|
||||
@include mdc-theme-prop(border-color, background, false);
|
||||
@include mdc-theme-prop(color, input-color, false);
|
||||
@include mdc-theme-prop(border-color, input-border, false);
|
||||
@include mdc-theme-prop(background-color, input-background, false);
|
||||
|
||||
&:focus,
|
||||
@@ -91,9 +68,9 @@
|
||||
}
|
||||
|
||||
&:not([|select]):global([readonly]) {
|
||||
@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: 0.8;*/
|
||||
opacity: 1;
|
||||
&:-internal-autofill-selected,
|
||||
&:-internal-autofill-previewed {
|
||||
@@ -101,9 +78,9 @@
|
||||
}
|
||||
}
|
||||
&:global([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: 0.7;*/
|
||||
opacity: 1;
|
||||
&:-internal-autofill-selected,
|
||||
&:-internal-autofill-previewed {
|
||||
@@ -133,14 +110,4 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
font-size: 14px;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
border: solid 1px $input-border;
|
||||
@include mdc-theme-prop(color, on-surface, false);
|
||||
@include mdc-theme-prop(background-color, surface, false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,6 +27,9 @@ $color-status: #a08600;
|
||||
$link-color: $mdc-theme-primary;
|
||||
$link-color-focus: #3f96d1;
|
||||
|
||||
$input-color: $mdc-theme-on-secondary;
|
||||
$input-color-disabled: darken($input-color, 10%);
|
||||
$input-color-readonly: darken($input-color, 5%);
|
||||
$input-border: #585958;
|
||||
$input-border-disabled: darken($input-border, 10%);
|
||||
$input-border-readonly: darken($input-border, 5%);
|
||||
@@ -46,25 +49,25 @@ $mdc-theme-text-colors: (
|
||||
primary: rgba(black, 0.87),
|
||||
secondary: rgba(black, 0.45),
|
||||
hint: rgba(black, 0.45),
|
||||
disabled: rgba(black, 0.20),
|
||||
disabled: rgba(black, 0.2),
|
||||
icon: rgba(black, 0.38),
|
||||
),
|
||||
);
|
||||
|
||||
$mdc-ripple-dark-ink-opacities: (
|
||||
hover: 0.04,
|
||||
focus: 0.10,
|
||||
press: 0.10,
|
||||
focus: 0.1,
|
||||
press: 0.1,
|
||||
selected: 0.06,
|
||||
activated: 0.10,
|
||||
activated: 0.1,
|
||||
) !default;
|
||||
|
||||
$mdc-ripple-light-ink-opacities: (
|
||||
hover: 0.04,
|
||||
focus: 0.10,
|
||||
press: 0.10,
|
||||
focus: 0.1,
|
||||
press: 0.1,
|
||||
selected: 0.06,
|
||||
activated: 0.10,
|
||||
activated: 0.1,
|
||||
) !default;
|
||||
|
||||
$theme-name: "dark";
|
||||
|
||||
@@ -26,6 +26,9 @@ $color-status: #ff9900;
|
||||
$link-color: $mdc-theme-primary;
|
||||
$link-color-focus: #3f96d1;
|
||||
|
||||
$input-color: $mdc-theme-on-surface;
|
||||
$input-color-disabled: lighten($input-color, 20%);
|
||||
$input-color-readonly: $input-color;
|
||||
$input-border: #d9d9d9;
|
||||
$input-border-disabled: $input-border;
|
||||
$input-border-readonly: $input-border;
|
||||
|
||||
@@ -11,6 +11,9 @@ $mdc-theme-extra-property-values: (
|
||||
on-positive: $color-on-positive,
|
||||
negative: $color-negative,
|
||||
status: $color-status,
|
||||
input-color: $input-color,
|
||||
input-color-disabled: $input-color-disabled,
|
||||
input-color-readonly: $input-color-readonly,
|
||||
input-border: $input-border,
|
||||
input-border-readonly: $input-border-readonly,
|
||||
input-border-disabled: $input-border-disabled,
|
||||
|
||||
Reference in New Issue
Block a user