rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: use ellipsis for tags text in dropdown

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-06-01 19:08:52 -03:00
parent 19a85a1cc0
commit af3bed850e
3 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
app/assets/javascripts/components/AutocompleteTagInput.tsx
View File

@@ -135,22 +135,28 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
onBlur={closeOnBlur} onBlur={closeOnBlur}
tabIndex={tabIndex} tabIndex={tabIndex}
> >
<Icon type="hashtag" className="color-neutral mr-2" /> <Icon type="hashtag" className="color-neutral mr-2 min-h-5 min-w-5" />
{tag.title <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
.split(new RegExp(`(${searchQuery})`, 'gi')) {searchQuery === '' ? (
.map((substring, index) => ( tag.title
<span ) : (
key={index} tag.title
className={ .split(new RegExp(`(${searchQuery})`, 'gi'))
substring.toLowerCase() === .map((substring, index) => (
searchQuery.toLowerCase() <span
? 'font-bold whitespace-pre-wrap' key={index}
: 'whitespace-pre-wrap' className={`${
} substring.toLowerCase() ===
> searchQuery.toLowerCase()
{substring} ? 'font-bold whitespace-pre-wrap'
</span> : 'whitespace-pre-wrap '
))} }`}
>
{substring}
</span>
))
)}
</span>
</button> </button>
); );
})} })}

4
app/assets/javascripts/components/NoteTags.tsx
View File

@@ -156,7 +156,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
<div <div
ref={tagsContainerRef} ref={tagsContainerRef}
className={`absolute bg-default h-9 flex flex-wrap pl-1 -ml-1 ${ className={`absolute bg-default h-9 flex flex-wrap pl-1 -ml-1 ${
tagsContainerExpanded ? '' : 'overflow-y-hidden' tagsContainerExpanded ? '' : 'overflow-hidden'
}`} }`}
style={{ style={{
maxWidth: tagsContainerMaxWidth, maxWidth: tagsContainerMaxWidth,
@@ -188,7 +188,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
type="hashtag" type="hashtag"
className="sn-icon--small color-neutral mr-1" className="sn-icon--small color-neutral mr-1"
/> />
<span className="whitespace-nowrap overflow-y-hidden overflow-ellipsis"> <span className="whitespace-nowrap overflow-hidden overflow-ellipsis">
{tag.title} {tag.title}
</span> </span>
</button> </button>

12
app/assets/stylesheets/_sn.scss
View File

@@ -168,6 +168,10 @@
max-width: 20rem; max-width: 20rem;
} }
.min-w-5 {
min-width: 1.25rem;
}
.h-1px { .h-1px {
height: 1px; height: 1px;
} }
@@ -208,6 +212,10 @@
max-height: 30rem; max-height: 30rem;
} }
.min-h-5 {
min-height: 1.25rem;
}
.fixed { .fixed {
position: fixed; position: fixed;
} }
@@ -220,8 +228,8 @@
overflow: auto; overflow: auto;
} }
.overflow-y-hidden { .overflow-hidden {
overflow-y: hidden; overflow: hidden;
} }
.overflow-ellipsis { .overflow-ellipsis {