self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-01-02 14:47:55 +02:00
Code Issues Releases Activity

[GH-410] Remove background from read-only input fields (#452)

Browse Source 
* [GH-410] Remove background from read-only input fields

This makes the background of text input fields transparent when the field is
read-only. Making it transparent will make the background show through which
prevents giving the visual impression of being editable.

Fixes #410

* Update snapshot
This commit is contained in:
Johannes Marbach 2021-05-21 23:36:24 +02:00 committed by GitHub
parent 6bb987a233
commit 47b528b2f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
webapp/src/components/content/__snapshots__/checkboxElement.test.tsx.snap
View File

@ -56,7 +56,7 @@ exports[`components/content/CheckboxElement should match snapshot on read only 1
value="off"
/>
<input
class="Editable undefined"
class="Editable readonly undefined"
placeholder="Edit text..."
readonly=""
spellcheck="true"

3
webapp/src/widgets/editable.scss
View File

@ -17,4 +17,7 @@
border: 1px solid var(--error-color);
border-radius: var(--default-rad);
}
&.readonly {
background-color: transparent;
}
}

6
webapp/src/widgets/editable.tsx
View File

@ -58,7 +58,7 @@ const Editable = (props: Props, ref: React.Ref<{focus: (selectAll?: boolean) =>
saveOnBlur.current = true
}
const {value, onChange, className, placeholderText} = props
const {value, onChange, className, placeholderText, readonly} = props
let error = false
if (props.validator) {
error = !props.validator(value || '')
@ -67,7 +67,7 @@ const Editable = (props: Props, ref: React.Ref<{focus: (selectAll?: boolean) =>
return (
<input
ref={elementRef}
className={'Editable ' + (error ? 'error ' : '') + className}
className={'Editable ' + (error ? 'error ' : '') + (readonly ? 'readonly ' : '') + className}
placeholder={placeholderText}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
onChange(e.target.value)
@ -90,7 +90,7 @@ const Editable = (props: Props, ref: React.Ref<{focus: (selectAll?: boolean) =>
blur()
}
}}
readOnly={props.readonly}
readOnly={readonly}
spellCheck={props.spellCheck}
/>
)