Skip to content

Commit

Permalink
Improved dictionary search UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@simjanos-dev
simjanos-dev committed Apr 16, 2024
1 parent 0b2d1be commit 180c1b4
Show file tree
Hide file tree
Showing 10 changed files with 200 additions and 162 deletions.
2 changes: 1 addition & 1 deletion resources/js/components/Home/Home.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@
<v-card outlined class="rounded-lg pt-0 mr-4 mb-4" width="290px">
<v-card-title>Version</v-card-title>
<v-card-text>
The current LinguaCafe version is v0.9.
The current LinguaCafe version is v0.10x.
<div class="footer-link-box mb-1 mt-4">
<router-link to="/patch-notes"><v-icon class="mr-2">mdi-update</v-icon>Patch notes</router-link>
</div>
Expand Down
5 changes: 4 additions & 1 deletion resources/js/components/Home/PatchNotes.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,10 @@
<b>Other changes:</b>
<ul>
<li>
The online user manual has moved from the GitHub Page to the GitHub Wiki. It also moved from a Vuetify format to Markdown.
Improved dictionary search UI: made dictionary colors less distracting and vocabulary sidebar more compact and uniform.
</li>
<li>
The online user manual has been moved from the GitHub Page to the GitHub Wiki. It also moved from a Vuetify format to Markdown.
</li>
<li>
DeepL API key error will not appear on the admin page anymore if it set to the default value.
Expand Down
2 changes: 1 addition & 1 deletion resources/js/components/Library/BookListLayout/BookListTable.vue
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<!-- Book list detailed -->
<div id="book-list" class="table-layout">
<v-simple-table class="no-hover border rounded-lg mt-4">
<v-simple-table class="no-hover border rounded-lg mt-4" v-if="books.length">
<thead>
<tr>
<th class="book-cover text-center">Cover</th>
Expand Down
88 changes: 23 additions & 65 deletions resources/js/components/Text/VocabularyBox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,11 +172,26 @@
@keydown.stop=";"
></v-textarea>

<!-- Search field -->
<v-text-field
placeholder="Dictionary search"
class="dictionary-search-field mt-2 mb-3"
filled
dense
rounded
width="100%"
hide-details
prepend-inner-icon="mdi-magnify"
:value="searchField"
@change="searchFieldChanged"
@keydown.stop=";"
></v-text-field>

<!-- Search box -->
<vocabulary-search-box
:deeplEnabled="$props.deeplEnabled"
:language="$props.language"
:_searchTerm="searchField"
:searchTerm="searchField"
@addDefinitionToInput="addDefinitionToInput"
></vocabulary-search-box>
</v-card-text>
Expand Down Expand Up @@ -345,9 +360,15 @@
};
},
mounted: function() {
this.makeSearchRequest();
},
methods: {
searchFieldChanged(event) {
if (event === '') {
return;
}
this.searchField = event;
},
setStage(stage) {
this.$emit('setStage', stage);
},
Expand All @@ -363,69 +384,6 @@
updateVocabBoxTranslationList() {
this.translationList = this.$props._translationText.split(';');
},
makeSearchRequest() {
this.searchResults = [];
if (this.searchField == '') {
return;
}
axios.post('/dictionary/search', {
language: this.$props.language,
term: this.searchField
}).then((response) => {
this.processVocabularySearchResults(response.data);
});
// search inflections
// axios.post('/dictionary/search/inflections', {
// dictionary: 'jmdict',
// term: this.searchField
// })
// .then((response) => {
// this.processInflectionSearchResults(response.data);
// });
},
processVocabularySearchResults(data) {
this.searchResults = [];
for (var dictionaryIndex = 0; dictionaryIndex < data.length; dictionaryIndex++) {
if (data[dictionaryIndex].name == 'JMDict') {
let searchResult = {
dictionary: data[dictionaryIndex].name,
color: data[dictionaryIndex].color,
records: []
};
for (var jmdictIndex = 0; jmdictIndex < data[dictionaryIndex].jmdictRecords.length; jmdictIndex++) {
var jmdictRecord = data[dictionaryIndex].jmdictRecords[jmdictIndex];
searchResult.records.push({
word: jmdictRecord.words.length ? jmdictRecord.words[0] : '',
otherForms: data[dictionaryIndex].jmdictRecords[jmdictIndex].words,
definitions: data[dictionaryIndex].jmdictRecords[jmdictIndex].definitions,
});
}
this.searchResults.push(searchResult);
} else {
let searchResult = {
dictionary: data[dictionaryIndex].name,
color: data[dictionaryIndex].color,
records: []
};
for (var recordIndex = 0; recordIndex < data[dictionaryIndex].records.length; recordIndex++) {
searchResult.records.push({
word: data[dictionaryIndex].records[recordIndex].word,
definitions: data[dictionaryIndex].records[recordIndex].definitions,
});
}
this.searchResults.push(searchResult);
}
}
},
addDefinitionToInput(definition) {
if (this.translationText.length && this.translationText[this.translationText.length - 1] !== ';') {
this.translationText += ';';
Expand Down
75 changes: 43 additions & 32 deletions resources/js/components/Text/VocabularySearchBox.vue
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,7 @@
<template>
<div id="vocabulary-search-box">
<v-text-field
label="Dictionary search"
class="mt-2 mb-3"
filled
dense
rounded
width="100%"
hide-details
v-model="searchField"
@change="makeSearchRequest"
@keydown.stop=";"
></v-text-field>


<div id="vocabulary-search-box" :language="$props.language">
<!-- Search results -->
<div id="search-results" class="border rounded-lg">
<div id="search-results" class="border rounded-lg pa-2">

<!-- DeepL translation -->
<div
Expand All @@ -25,8 +11,11 @@
'disabled': !deeplSearchResult.length || deeplSearchResult === 'DeepL error' || deeplSearchResult == 'loading'
}"
>
<div class="search-result-title rounded px-2" style="background-color: #92B9E2">
{{ searchField }} <div class="dictionary">DeepL</div>
<div class="search-result-title">
<div class="dictionary-title-icon mr-1" style="background-color: #92B9E2">
<v-icon small>mdi-translate</v-icon>
</div>
DeepL <div class="search-result-word" :title="$props.searchTerm">{{ $props.searchTerm }}</div>
</div>

<!-- DeepL search result -->
Expand All @@ -35,7 +24,7 @@
class="search-result-definition rounded"
@click="addDefinitionToInput(deeplSearchResult)"
>
{{ deeplSearchResult }} <v-icon v-if="deeplSearchResult.length">mdi-plus</v-icon>
{{ deeplSearchResult }} <v-icon v-if="deeplSearchResult.length" small>mdi-plus</v-icon>
</div>

<!-- DeepL search error -->
Expand All @@ -54,8 +43,11 @@

<!-- Dictionary loading -->
<div class="search-result disabled" v-if="dictionarySearchLoading">
<div class="search-result-title rounded px-2" style="background-color: #C5947D;">
{{ searchField }} <div class="dictionary">Dictionary search</div>
<div class="search-result-title">
<div class="dictionary-title-icon mr-1" style="background-color: var(--v-primary-base);">
<v-icon small>mdi-list-box</v-icon>
</div>
{{ $props.searchTerm }} <div class="search-result-word">Dictionary search</div>
</div>

<div class="search-result-definition rounded pr-2">
Expand All @@ -65,8 +57,11 @@

<!-- Dictionary no result message -->
<div class="search-result disabled" v-if="!dictionarySearchLoading && !dictionarySearchResultsFound">
<div class="search-result-title rounded px-2" style="background-color: #C5947D;">
{{ searchField }} <div class="dictionary">Dictionary search</div>
<div class="search-result-title">
<div class="dictionary-title-icon mr-1" style="background-color: var(--v-primary-base);">
<v-icon small>mdi-list-box</v-icon>
</div>
{{ $props.searchTerm }}
</div>

<div class="search-result-definition rounded pr-2">
Expand All @@ -79,24 +74,36 @@
<!-- Regular record -->
<template v-if="searchResult.dictionary !== 'JMDict'">
<div v-for="(record, recordIndex) in searchResult.records" :key="recordIndex">
<div class="search-result-title rounded px-2" :style="{'background-color': searchResult.color}">{{ record.word }} <div class="dictionary"> {{ searchResult.dictionary}} </div></div>
<div class="search-result-title">
<div class="dictionary-title-icon mr-1" :style="{'background-color': searchResult.color}">
<v-icon small>mdi-list-box</v-icon>
</div>
{{ searchResult.dictionary}}<div class="search-result-word" :title="record.word"> {{ record.word }} </div>
</div>

<div
v-for="(definition, definitionIndex) in record.definitions"
:key="definitionIndex"
class="search-result-definition rounded"
@click="addDefinitionToInput(definition)"
>
{{ definition }} <v-icon>mdi-plus</v-icon>
{{ definition }} <v-icon small>mdi-plus</v-icon>
</div>
</div>
</template>

<!-- JMDict record -->
<template v-if="searchResult.dictionary == 'JMDict'">
<div v-for="(record, recordIndex) in searchResult.records" :key="recordIndex">
<div class="search-result-title rounded px-2" :style="{'background-color': searchResult.color}">{{ record.word }} <div class="dictionary"> {{ searchResult.dictionary}} </div></div>
<div class="search-result-title">
<div class="dictionary-title-icon mr-1" :style="{'background-color': searchResult.color}">
<v-icon small>mdi-list-box</v-icon>
</div>
{{ searchResult.dictionary}}<div class="search-result-word" :title="record.word"> {{ record.word }} </div>
</div>

<div class="search-result-definition rounded" v-for="(definition, definitionIndex) in record.definitions" :key="definitionIndex" @click="addDefinitionToInput(definition)">
{{ definition }} <v-icon>mdi-plus</v-icon>
{{ definition }} <v-icon small>mdi-plus</v-icon>
</div>

<template v-if="record.otherForms.length">
Expand All @@ -119,11 +126,15 @@
props: {
language: String,
deeplEnabled: Boolean,
_searchTerm: String
searchTerm: String
},
watch: {
searchTerm: function(newVal, oldVal) {
this.makeSearchRequest();
}
},
data: function() {
return {
searchField: this.$props._searchTerm,
searchResults: [],
dictionarySearchLoading: false,
dictionarySearchResultsFound: true,
Expand All @@ -139,7 +150,7 @@
},
makeSearchRequest() {
this.searchResults = [];
if (this.searchField == '') {
if (this.$props.searchTerm == '') {
return;
}
Expand All @@ -148,7 +159,7 @@
this.dictionarySearchResultsFound = false;
axios.post('/dictionary/search', {
language: this.$props.language,
term: this.searchField
term: this.$props.searchTerm
}).then((response) => {
this.processVocabularySearchResults(response.data);
this.dictionarySearchLoading = false;
Expand All @@ -159,7 +170,7 @@
this.deeplSearchResult = 'loading';
axios.post('/dictionaries/deepl/search', {
language: this.$props.language,
term: this.searchField
term: this.$props.searchTerm
}).then((response) => {
this.deeplSearchResult = response.data.definition;
}).catch(() => {
Expand Down
Loading

0 comments on commit 180c1b4

Please sign in to comment.