go-shiori/shiori
1
1
Fork 0
mirror of https://github.com/go-shiori/shiori.git synced 2025-09-08 05:54:31 +08:00
Code Issues Projects Releases Packages Wiki Activity

Make suggestion clickable in bookmark creation (#765)

Browse source 
This was especially noticeable when using the web app on mobile devices
as the suggestion looks like it's clickable. It should be also a little
bit more convenient UX-wise when it's allowed to be clicked in non-
mobile context as well.

Co-authored-by: Felipe Martin <812088+fmartingr@users.noreply.github.com>
This commit is contained in:
cbe 2023-10-29 14:26:39 +00:00 • committed by GitHub
parent 5e9847a288
commit f16dd42e10
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
internal/view/assets/js/component/dialog.js
View file

@ -31,9 +31,10 @@ var template = `
@focus="$event.target.select()"
@keyup="handleInput(index)"
@keyup.enter="handleInputEnter(index)">
<span :ref="'suggestion-'+index"
v-if="field.suggestion"
class="suggestion">{{field.suggestion}}</span>
<button :ref="'suggestion-'+index"
v-if="field.suggestion"
@click="handleInputEnter(index)"
class="suggestion">{{field.suggestion}}</button>
</template>
</slot>
</div>
@ -191,11 +192,11 @@ export default {
// Display suggestion
this.$nextTick(() => {
var input = this.$refs.input[index],
span = this.$refs['suggestion-' + index][0],
suggestionNode = this.$refs['suggestion-' + index][0],
inputRect = input.getBoundingClientRect();
span.style.top = (inputRect.bottom - 1) + 'px';
span.style.left = inputRect.left + 'px';
suggestionNode.style.top = (inputRect.bottom - 1) + 'px';
suggestionNode.style.left = inputRect.left + 'px';
});
},
handleInputEnter(index) {
@ -214,6 +215,8 @@ export default {
this.formFields[index].value = words.join(separator) + separator;
this.formFields[index].suggestion = undefined;
// Focus input again after suggestion is accepted
this.$refs.input[index].focus();
},
focus() {
this.$nextTick(() => {
@ -235,4 +238,4 @@ export default {
})
}
}
}
}