fix: tags being dimmed on safari (#1389)

This commit is contained in:
Aman Harwara
2022-08-10 18:34:05 +05:30
committed by GitHub
parent 82a8bcc440
commit 77cbb6b06e
2 changed files with 44 additions and 26 deletions

View File

@@ -135,17 +135,25 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState, isColla
>
<Icon type={iconType} className={isSelected ? 'text-info' : 'text-neutral'} />
</div>
<input
className={classNames('title', isEditing ? 'editing' : '', isCollapsed ? 'hidden' : 'block')}
disabled={!isEditing}
id={`react-tag-${view.uuid}`}
onBlur={onBlur}
onInput={onInput}
value={title}
onKeyUp={onKeyUp}
spellCheck={false}
ref={inputRef}
/>
{isEditing ? (
<input
className={classNames('title editing', isCollapsed ? 'hidden' : 'block')}
id={`react-tag-${view.uuid}`}
onBlur={onBlur}
onInput={onInput}
value={title}
onKeyUp={onKeyUp}
spellCheck={false}
ref={inputRef}
/>
) : (
<div
className={classNames('title overflow-hidden text-left', isCollapsed ? 'hidden' : 'block')}
id={`react-tag-${view.uuid}`}
>
{title}
</div>
)}
<div className={classNames('count', isCollapsed ? 'absolute top-0 right-0' : '')}>
{view.uuid === SystemViewId.AllNotes && tagsState.allNotesCount}
</div>

View File

@@ -242,21 +242,31 @@ export const TagsListItem: FunctionComponent<Props> = observer(
>
<Icon type="hashtag" className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
</div>
<input
className={classNames(
'title focus:shadow-none focus:outline-none',
isEditing ? 'editing' : '',
isCollapsed ? 'md-only:!w-min lg-only:!w-min' : '',
)}
id={`react-tag-${tag.uuid}`}
disabled={!isEditing}
onBlur={onBlur}
onInput={onInput}
value={title}
onKeyDown={onKeyDown}
spellCheck={false}
ref={inputRef}
/>
{isEditing ? (
<input
className={classNames(
'title editing focus:shadow-none focus:outline-none',
isCollapsed ? 'md-only:!w-min lg-only:!w-min' : '',
)}
id={`react-tag-${tag.uuid}`}
onBlur={onBlur}
onInput={onInput}
value={title}
onKeyDown={onKeyDown}
spellCheck={false}
ref={inputRef}
/>
) : (
<div
className={classNames(
'title overflow-hidden text-left focus:shadow-none focus:outline-none',
isCollapsed ? 'md-only:!w-min lg-only:!w-min' : '',
)}
id={`react-tag-${tag.uuid}`}
>
{title}
</div>
)}
<div className="flex items-center">
<a
role="button"