diff --git a/apps/client/src/common/components/input/input/Input.module.scss b/apps/client/src/common/components/input/input/Input.module.scss index 44c428bf7..e37bfde2a 100644 --- a/apps/client/src/common/components/input/input/Input.module.scss +++ b/apps/client/src/common/components/input/input/Input.module.scss @@ -10,7 +10,12 @@ padding-inline: 0.5em; outline: none; - &:hover:not(:disabled) { + &::placeholder { + color: $gray-500; + letter-spacing: 0; + } + + &:hover:not(:disabled):not(:read-only) { background-color: $gray-1100; } @@ -25,9 +30,8 @@ cursor: not-allowed; } - &::placeholder { - color: $gray-500; - letter-spacing: 0; + &:read-only::placeholder { + opacity: 0; } } diff --git a/apps/client/src/common/components/input/textarea/Textarea.module.scss b/apps/client/src/common/components/input/textarea/Textarea.module.scss index cb4cb0454..1b5e45525 100644 --- a/apps/client/src/common/components/input/textarea/Textarea.module.scss +++ b/apps/client/src/common/components/input/textarea/Textarea.module.scss @@ -9,9 +9,13 @@ border-radius: $component-border-radius-md; border: 1px solid transparent; - padding-inline: 0.5em; outline: none; + &::placeholder { + color: $gray-500; + letter-spacing: 0; + } + &:hover:not(:disabled) { background-color: $gray-1100; } @@ -26,21 +30,21 @@ cursor: not-allowed; } - &::placeholder { - color: $gray-500; - letter-spacing: 0; + &:read-only::placeholder { + opacity: 0; } } .subtle { background-color: $gray-1200; - padding-top: 0.5em; + padding-inline: 0.5em; + padding-top: 0.25em; } .ghosted { background-color: transparent; padding: 0; - padding-top: 0.5em; + padding-top: 0.25em; } .fluid { diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss index 6ee7ef57a..194d166b8 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.module.scss @@ -1,8 +1,8 @@ .imageInput { - &::placeholder { + &:not(:read-only)::placeholder { opacity: 0.2; } - &:hover::placeholder { + &:not(:read-only):hover::placeholder { opacity: 1; } } diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx index cd0f7a0d6..4ebf07968 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EditableImage.tsx @@ -7,12 +7,13 @@ import style from './EditableImage.module.scss'; interface EditableImageProps { initialValue: string; + readOnly?: boolean; updateValue: (newValue: string) => void; } export default memo(EditableImage); -function EditableImage({ initialValue, updateValue }: EditableImageProps) { +function EditableImage({ initialValue, readOnly, updateValue }: EditableImageProps) { const handleUpdate = (newValue: string) => { if (newValue === initialValue) { return; @@ -35,6 +36,9 @@ function EditableImage({ initialValue, updateValue }: EditableImageProps) { variant='ghosted' className={style.imageInput} fluid + readOnly={readOnly} + // we disable the field to prevent receiving focus + disabled={readOnly} placeholder='Paste image URL' onBlur={(event) => handleUpdate(event.currentTarget.value)} onKeyDown={(event) => { @@ -49,12 +53,14 @@ function EditableImage({ initialValue, updateValue }: EditableImageProps) { return (