mirror of
https://codeberg.org/aryak/mozhi
synced 2024-11-27 01:21:58 +05:30
Merge pull request 'Add a "Copy" button. Closes #5' (#8) from Midou36O/mozhi:copy-button into master
Reviewed-on: https://codeberg.org/aryak/mozhi/pulls/8
This commit is contained in:
commit
86e5c4eeea
@ -31,7 +31,7 @@ footer p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #F57C00;
|
color: #f57c00;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
@ -79,7 +79,7 @@ select {
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-left: 2px solid #F57C00;
|
border-left: 2px solid #f57c00;
|
||||||
/* Accent shadow */
|
/* Accent shadow */
|
||||||
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
|
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
|
||||||
color: #b2b2b2;
|
color: #b2b2b2;
|
||||||
@ -89,18 +89,36 @@ select {
|
|||||||
|
|
||||||
button {
|
button {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
font-size: 17px;
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #F57C00;
|
background: #f57c00;
|
||||||
}
|
}
|
||||||
button:hover {
|
button:hover {
|
||||||
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
|
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* While we're at it, fake button css style for the url.*/
|
||||||
|
|
||||||
|
.button {
|
||||||
|
display: flex;
|
||||||
|
font-size: 17px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 2px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: #f57c00;
|
||||||
|
}
|
||||||
|
.button:hover {
|
||||||
|
box-shadow: 5px 5px 0px 0px rgba(245, 124, 0, 0.25);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* Spacing stuff */
|
/* Spacing stuff */
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -168,11 +186,29 @@ button:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* Javascript searchable select used in source/target language */
|
/* Javascript searchable select used in source/target language */
|
||||||
.nice-select, .nice-select-dropdown, .nice-select-search {
|
.nice-select,
|
||||||
|
.nice-select-dropdown,
|
||||||
|
.nice-select-search {
|
||||||
border-right: none;
|
border-right: none;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
border-top: none;
|
border-top: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
border-left: 2px solid #F57C00;
|
border-left: 2px solid #f57c00;
|
||||||
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
|
box-shadow: 2px 2px 0px 0px rgba(245, 124, 0, 0.25);
|
||||||
}
|
}
|
||||||
|
.center-area {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 35%;
|
||||||
|
margin: auto;
|
||||||
|
margin-bottom: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center-area2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
@ -18,7 +18,7 @@
|
|||||||
<!-- This hidden input is so that the engine gets sent in the request even though its not declared here -->
|
<!-- This hidden input is so that the engine gets sent in the request even though its not declared here -->
|
||||||
<input name="engine" value="{{.Engine}}" type="hidden" />
|
<input name="engine" value="{{.Engine}}" type="hidden" />
|
||||||
|
|
||||||
<div class="wrap languages">
|
<div class="wrap languages center-area" >
|
||||||
<div class="language">
|
<div class="language">
|
||||||
<select name="from" aria-label="Source language" id="sourceLanguage">
|
<select name="from" aria-label="Source language" id="sourceLanguage">
|
||||||
{{range $key, $value := .SourceLanguages}} {{if $.From}}
|
{{range $key, $value := .SourceLanguages}} {{if $.From}}
|
||||||
@ -55,7 +55,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="item-wrapper">
|
<div class="center-area2 item-wrapper">
|
||||||
Source Text:
|
Source Text:
|
||||||
<textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
|
<textarea autofocus class="item" id="input" name="text" dir="auto" placeholder="Enter Text Here">
|
||||||
{{ .OriginalText }}</textarea>
|
{{ .OriginalText }}</textarea>
|
||||||
@ -68,9 +68,9 @@
|
|||||||
|
|
||||||
{{ if .TranslateAll }}
|
{{ if .TranslateAll }}
|
||||||
{{range $key, $value := .TranslateAll}}
|
{{range $key, $value := .TranslateAll}}
|
||||||
<div class="item-wrapper">
|
<div class="item-wrapper center-area2">
|
||||||
Engine: {{.Engine}}
|
Engine: {{.Engine}}
|
||||||
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
|
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
|
||||||
{{.OutputText}}</textarea>
|
{{.OutputText}}</textarea>
|
||||||
{{if .AutoDetect}}
|
{{if .AutoDetect}}
|
||||||
Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
|
Detected Language: {{.AutoDetect}}{{end}} {{if $.TtsTo}}
|
||||||
@ -81,8 +81,8 @@
|
|||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
{{ else }} {{if .TranslationExists}}
|
{{ else }} {{if .TranslationExists}}
|
||||||
<div class="item-wrapper">
|
<div class="item-wrapper center-area2">
|
||||||
<textarea class="translation item" dir="auto" placeholder="Translation" readonly>
|
<textarea class="translation item" dir="auto" placeholder="Translation" id="output" readonly>
|
||||||
{{.Translation.OutputText}}</textarea>
|
{{.Translation.OutputText}}</textarea>
|
||||||
{{if .Translation.AutoDetect}}
|
{{if .Translation.AutoDetect}}
|
||||||
Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
|
Detected Language: {{.Translation.AutoDetect}}{{end}} {{if .TtsTo}}
|
||||||
@ -92,10 +92,21 @@
|
|||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
|
<div style="display:flex; justify-content:space-around; align-items:center;">
|
||||||
|
{{if .TranslationExists}}
|
||||||
|
<button class="wrap" type="button" onclick="copyToClipboard()">
|
||||||
|
Copy the translation
|
||||||
|
</button>
|
||||||
|
{{end}}
|
||||||
|
{{ if and .Engine .From .To .OriginalText }}<p><a class="button" style="color:#010000; text-decoration: none;" href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
|
||||||
|
{{if .TranslationExists}}
|
||||||
<button class="wrap" type="submit">
|
<button class="wrap" type="submit">
|
||||||
|
{{else}}
|
||||||
|
<button class="wrap" style="margin-left:auto; position:relative; left:-10%;margin-top: 1%;" type="submit">
|
||||||
|
{{end}}
|
||||||
Translate!
|
Translate!
|
||||||
</button>
|
</button>
|
||||||
{{ if and .Engine .From .To .OriginalText }}<p><a href="/?engine={{.Engine}}&from={{.From}}&to={{.To}}&text={{.OriginalText}}">Copy translation link</a></p>{{end}}
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<script>
|
<script>
|
||||||
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0
|
||||||
@ -111,6 +122,13 @@
|
|||||||
var options = { searchable: true };
|
var options = { searchable: true };
|
||||||
NiceSelect.bind(document.getElementById("targetLanguage"), options);
|
NiceSelect.bind(document.getElementById("targetLanguage"), options);
|
||||||
NiceSelect.bind(document.getElementById("sourceLanguage"), options);
|
NiceSelect.bind(document.getElementById("sourceLanguage"), options);
|
||||||
|
// This function allows to copy the translated text to the clipboard
|
||||||
|
function copyToClipboard() {
|
||||||
|
var copyText = document.getElementById("output");
|
||||||
|
copyText.select();
|
||||||
|
copyText.setSelectionRange(0, 99999); // This is for mobile devices.
|
||||||
|
document.execCommand("copy");
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
</main>
|
</main>
|
||||||
{{ template "footer" .}}
|
{{ template "footer" .}}
|
||||||
|
Loading…
Reference in New Issue
Block a user