matty/peertube-plugin-livechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fixes around input value for search and tags and tags input cosmetics

Browse Source
This commit is contained in:
Mehdi Benadel 2024-05-28 04:17:00 +02:00
parent cc75aadeb4
commit d425663516
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
assets/styles/configuration.scss
View File

@ -307,12 +307,20 @@ livechat-tags-input {
padding: 0; padding: 0;
margin: var(--tag-padding-vertical) 0; margin: var(--tag-padding-vertical) 0;
max-height: 150px; max-height: 150px;
overflow-y: scroll; overflow-y: auto;
border-bottom: 1px dashed var(--greyForegroundColor); border-bottom: 1px dashed var(--greyForegroundColor);
transition: 0.3s height; transition-property: height, margin;
transition-duration: 0.3s;
&.empty { &.empty {
visibility: hidden; height: 0;
margin: 0;
border: none;
}
@supports (scrollbar-width: auto) {
scrollbar-color: var(--greyForegroundColor) transparent;
scrollbar-width: thin;
} }
} }
@ -334,6 +342,7 @@ livechat-tags-input {
.tag-searched { .tag-searched {
width: auto; width: auto;
height: 24px; height: 24px;
max-width: 150px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -396,6 +405,9 @@ livechat-tags-input {
.tag-name { .tag-name {
margin-top: 3px; margin-top: 3px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
} }

10
client/common/lib/elements/tags-input.ts
View File

@ -46,7 +46,7 @@ export class TagsInputElement extends LivechatElement {
private _searchedTagsIndex: number[] = [] private _searchedTagsIndex: number[] = []
@state() @state()
private _isPressingKey: string[] = [] private readonly _isPressingKey: string[] = []
@property({ attribute: false }) @property({ attribute: false })
public separators?: string[] = ['\n'] public separators?: string[] = ['\n']
@ -62,7 +62,7 @@ export class TagsInputElement extends LivechatElement {
unfocused: this._searchedTagsIndex.length unfocused: this._searchedTagsIndex.length
})}> })}>
${repeat(this.value, tag => tag, ${repeat(this.value, tag => tag,
(tag, index) => html`<li key=${index} class="tag" ${animate({ (tag, index) => html`<li key=${index} class="tag" title=${tag} ${animate({
keyframeOptions: { keyframeOptions: {
duration: this.animDuration, duration: this.animDuration,
fill: 'both' fill: 'both'
@ -78,7 +78,7 @@ export class TagsInputElement extends LivechatElement {
</ul> </ul>
<ul id="tags-searched" class=${classMap({ empty: !this._searchedTagsIndex.length })}> <ul id="tags-searched" class=${classMap({ empty: !this._searchedTagsIndex.length })}>
${repeat(this._searchedTagsIndex, index => index, ${repeat(this._searchedTagsIndex, index => index,
(index) => html`<li key=${index} class="tag-searched" ${animate({ (index) => html`<li key=${index} class="tag-searched" title=${this.value[index]} ${animate({
keyframeOptions: { keyframeOptions: {
duration: this.animDuration, duration: this.animDuration,
fill: 'both' fill: 'both'
@ -145,6 +145,8 @@ export class TagsInputElement extends LivechatElement {
// no duplicate // no duplicate
this.value = [...new Set([...this.value, ...values])] this.value = [...new Set([...this.value, ...values])]
this._inputValue = target.value
this._updateSearchedTags() // is that necessary ? this._updateSearchedTags() // is that necessary ?
this.requestUpdate('value') this.requestUpdate('value')
@ -243,7 +245,6 @@ export class TagsInputElement extends LivechatElement {
e.preventDefault() e.preventDefault()
target.value = target.value.slice(0, -1) target.value = target.value.slice(0, -1)
this._handleNewTag(e) this._handleNewTag(e)
return false
} else { } else {
this._updateSearchedTags() this._updateSearchedTags()
} }
@ -258,6 +259,7 @@ export class TagsInputElement extends LivechatElement {
if (target) { if (target) {
this._addTag(target.value) this._addTag(target.value)
target.value = '' target.value = ''
this._inputValue = ''
this._updateSearchedTags() this._updateSearchedTags()
} }