luckyimnotanigger/LibreTranslate
1
0
Fork 0
mirror of https://github.com/LibreTranslate/LibreTranslate.git synced 2025-05-25 11:22:28 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add downArrow to select language + fix select language problem with small screens

Browse source
This commit is contained in:
idotj 2021-06-13 19:11:58 +02:00
parent 6e086b411b
commit 42c95b9ace
3 changed files with 72 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

39
app/templates/index.html
View file

@ -122,7 +122,7 @@
<i class="material-icons">swap_horiz</i>
</a>
<span>Translate into</span>
<select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
<select class="browser-default" v-model="targetLang" ref="targetLangDropdown" @change="handleInput">
<template v-for="option in langs">
<option v-if="option.code !== 'auto'" :value="option.code">[[ option.name ]]</option>
</template>
@ -172,13 +172,13 @@
<div class="row center">
<div class="col s12 m12 l6 left-align">
<p>Request</p>
<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
<p class="mb-0">Request</p>
<pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(requestCode)">
</code></pre>
</div>
<div class="col s12 m12 l6 left-align">
<p>Response</p>
<pre class="code"><code class="language-javascript" v-html="$options.filters.highlight(output)">
<p class="mb-0">Response</p>
<pre class="code mt-0"><code class="language-javascript" v-html="$options.filters.highlight(output)">
</code></pre>
</div>
</div>
@ -337,17 +337,27 @@
}
// Update "selected" attribute (to overcome a vue.js limitation)
// but properly display checkmarks on supported browsers
// but properly display checkmarks on supported browsers.
// Also change the <select> width value depending on the <option> length
for (var i = 0; i < this.$refs.sourceLangDropdown.children.length; i++){
var el = this.$refs.sourceLangDropdown.children[i];
if (el.value === this.sourceLang) el.setAttribute('selected', '');
else el.removeAttribute('selected');
if (el.value === this.sourceLang){
el.setAttribute('selected', '');
this.$refs.sourceLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
}else{
el.removeAttribute('selected');
}
}
for (var i = 0; i < this.$refs.targetLangDropdown.children.length; i++){
var el = this.$refs.targetLangDropdown.children[i];
if (el.value === this.targetLang) el.setAttribute('selected', '');
else el.removeAttribute('selected');
if (el.value === this.targetLang){
el.setAttribute('selected', '');
this.$refs.targetLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
}else{
el.removeAttribute('selected');
}
}
},
computed: {
requestCode: function(){
@ -467,6 +477,14 @@
});
function getTextWidth(text) {
var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
var ctx = canvas.getContext("2d");
ctx.font = 'bold 16px sans-serif';
var textWidth = Math.ceil(ctx.measureText(text).width);
return textWidth;
}
function setApiKey(){
var prevKey = localStorage.getItem("api_key") || "";
var newKey = "";
@ -475,6 +493,7 @@
localStorage.setItem("api_key", newKey);
}
// @license-end
</script>
</body>