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

Add auto complete for tags

Browse source
This commit is contained in:
Radhi Fadlillah 2018-06-07 14:19:59 +07:00
parent 2d10415bb4
commit 9fa4cb2452
7 changed files with 44 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
cmd/serve/assets-prod.go
View file

File diff suppressed because one or more lines are too long

2
view/css/stylesheet.css
View file

File diff suppressed because one or more lines are too long

2
view/css/yla-dialog.css
View file

@ -1 +1 @@
.yla-dialog__overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:16px}.yla-dialog__overlay .yla-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:0;min-height:0;max-width:400px;max-height:100%;width:100%;overflow:hidden;background-color:#FFF;font-size:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;min-height:0;background-color:#292929;color:#FFF;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>p{-webkit-box-flex:1;flex:1 0;font-weight:600;font-size:1em;text-transform:uppercase}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.yla-dialog__content{grid-column-start:1;grid-column-end:3;align-self:baseline;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.label{padding:8px 0;align-self:stretch;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>input,.yla-dialog__overlay .yla-dialog>.yla-dialog__body>textarea{color:#232323;padding:8px;border:1px solid #E5E5E5;font-size:.9em;min-height:37px;resize:vertical;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>.suggestion{position:absolute;display:block;padding:8px;background-color:#EEE;border:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a{text-transform:uppercase;padding:0 8px;font-size:.9em;font-weight:600;border-bottom:1px dashed transparent}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:focus{outline:none;color:#F44336;border-bottom:1px dashed #F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>i{width:19px;line-height:19px;text-align:center}
.yla-dialog__overlay{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10001;background-color:rgba(0,0,0,0.6);padding:16px}.yla-dialog__overlay .yla-dialog{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:0;min-height:0;max-width:400px;max-height:100%;width:100%;overflow:hidden;background-color:#FFF;font-size:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__header{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;min-height:0;background-color:#292929;color:#FFF;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>p{-webkit-box-flex:1;flex:1 0;font-weight:600;font-size:1em;text-transform:uppercase}.yla-dialog__overlay .yla-dialog>.yla-dialog__header>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__body{padding:16px;display:grid;max-height:100%;min-height:80px;min-width:0;overflow:auto;grid-template-columns:max-content 1fr;-webkit-box-align:baseline;align-items:baseline;grid-gap:16px}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.yla-dialog__content{grid-column-start:1;grid-column-end:3;align-self:baseline;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>p.label{padding:8px 0;align-self:stretch;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>input,.yla-dialog__overlay .yla-dialog>.yla-dialog__body>textarea{color:#232323;padding:8px;border:1px solid #E5E5E5;font-size:.9em;min-height:37px;resize:vertical;flex-shrink:0}.yla-dialog__overlay .yla-dialog>.yla-dialog__body>.suggestion{position:absolute;display:block;padding:8px;background-color:#EEE;border:1px solid #E5E5E5;font-size:.9em}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer{padding:16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;-webkit-box-pack:end;justify-content:flex-end;border-top:1px solid #E5E5E5}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a{text-transform:uppercase;padding:0 8px;font-size:.9em;font-weight:600;border-bottom:1px dashed transparent}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:hover{color:#F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>a:focus{outline:none;color:#F44336;border-bottom:1px dashed #F44336}.yla-dialog__overlay .yla-dialog>.yla-dialog__footer>i{width:19px;line-height:19px;text-align:center}

13
view/index.html
View file

@ -271,11 +271,16 @@
}
})
.then((response) => {
this.loading = false;
this.bookmarks = response.data;
this.page = 0;
this.bookmarks = response.data;
this.maxPage = Math.ceil(this.bookmarks.length / pageSize) - 1;
window.scrollTo(0, 0);
return rest.get('/api/tags');
})
.then((response) => {
this.tags = response.data;
this.loading = false;
})
.catch((error) => {
var errorMsg = (error.response ? error.response.data : error.message).trim();
@ -359,7 +364,9 @@
type: 'area'
}, {
name: 'tags',
label: 'Comma separated tags (optional)'
label: 'Comma separated tags (optional)',
separator: ',',
dictionary: this.tags.map(tag => tag.name)
}, ],
mainText: 'OK',
secondText: 'Cancel',

14
view/js/component/yla-dialog.js
View file

@ -30,7 +30,7 @@ var YlaDialog = function () {
@focus="$event.target.select()"
@keyup="handleInput(index)"
@keyup.enter="handleInputEnter(index)">
<span ref="suggestion" v-if="field.suggestion" class="suggestion">{{field.suggestion}}</span>
<span :ref="'suggestion-'+index" v-if="field.suggestion" class="suggestion">{{field.suggestion}}</span>
</template>
</slot>
</div>
@ -112,6 +112,7 @@ var YlaDialog = function () {
value: '',
type: 'text',
dictionary: [],
separator: ' ',
suggestion: undefined
}
@ -121,6 +122,7 @@ var YlaDialog = function () {
value: field.value || '',
type: field.type || 'text',
dictionary: field.dictionary instanceof Array ? field.dictionary : [],
separator: field.separator || ' ',
suggestion: undefined
}
});
@ -161,7 +163,7 @@ var YlaDialog = function () {
if (dictionary.length === 0) return;
// Fetch suggestion from dictionary
var words = field.value.split(' '),
var words = field.value.split(field.separator),
lastWord = words[words.length - 1].toLowerCase(),
suggestion;
@ -179,7 +181,7 @@ var YlaDialog = function () {
// Display suggestion
this.$nextTick(() => {
var input = this.$refs.input[index],
span = this.$refs.suggestion[index],
span = this.$refs['suggestion-' + index][0],
inputRect = input.getBoundingClientRect();
span.style.top = (inputRect.bottom - 1) + 'px';
@ -194,11 +196,13 @@ var YlaDialog = function () {
return;
}
var words = this.formFields[index].value.split(' ');
var separator = this.formFields[index].separator,
words = this.formFields[index].value.split(separator);
words.pop();
words.push(suggestion);
this.formFields[index].value = words.join(' ') + ' ';
this.formFields[index].value = words.join(separator) + separator;
this.formFields[index].suggestion = undefined;
},
focus() {

4
view/less/stylesheet.less
View file

@ -30,6 +30,10 @@
border-color: var(--border);
background-color: var(--contentBg);
}
>.suggestion {
border-color: var(--border);
background-color: var(--bg);
}
}
>.yla-dialog__footer {
border-color: var(--border);

1
view/less/yla-dialog.less
View file

@ -81,6 +81,7 @@
padding: 8px;
background-color: @bg;
border: 1px solid @border;
font-size: 0.9em;
}
}
>.yla-dialog__footer {