Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix Gtk.Popover select translate and save state select language. #1399

Open
wants to merge 5 commits into
base: gtk4
Choose a base branch
from
Open

Fix Gtk.Popover select translate and save state select language. #1399

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d159221
Add save state select translate.
Sep 15, 2024
cbefd34
Fix bug close Gtk.Popover
Sep 19, 2024
6d2bccc
Fix link color and style.
Sep 23, 2024
3064472
Fix for looong language label.
Sep 24, 2024
166a710
Fix resize text "by Google".
Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 69 additions & 13 deletions src/selection-tools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,24 +249,50 @@ html, body {
width: 100%;
}
body {
flex: 1;
display: flex;
flex-direction: column;
}
select {
header {
flex: 1;
padding: 8px;
display: none;
}
header button {
width: 100%;
margin-top: 6px;
}
header button:first-child {
margin-top: 0;
}
main {
flex: 1;
display: flex;
overflow-y: auto;
margin: 8px 0;
}
footer {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
}
footer div {
white-space: nowrap;
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text will not always fit. You might try setting the flex-basis to max-content or fit-content but still allow it to shrink and wrap. The same applies to the . Also should probably add a gap so that the texts won't run together.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no such long names. I added a fix for correct output.

Screenshot from 2024-09-24 07-54-05

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's very much possible that the line would not fit. The texts are localized and in other languages they could be much longer than they are in English. Also the font is set to menu, so the text could also become too long depending on the font set by the user.

Copy link
Author

@keygenqt keygenqt Sep 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • fix long language name
  • fix big "by Google"

}
footer a:any-link {
color: inherit;
}
#output {
padding: 0 8px;
}
</style>
<header></header>
<main><div id="output"></div></main>
<footer>${_('Translation by Google Translate')}</footer>
<footer>
<div>${_('Translation by Google Translate')}</div>
<a id="language" href="javascript:void(0)">?</a>
</footer>
<script>
const googleTranslate = (text, lang = defaultLang) => {
fetch('https://translate.googleapis.com/translate_a/single?client=gtx'
Expand All @@ -282,20 +308,50 @@ const googleTranslate = (text, lang = defaultLang) => {
}

const text = "${encodeURIComponent(text)}"

const select = document.createElement('select')
const localStorageKey = 'foliate:storage-change-lang'
const select = document.createElement('div')
const [langs, defaultLang] = JSON.parse(decodeURI("${encodeURI(getGoogleTranslateLanguages())}"))
const selectLang = window.localStorage.getItem(localStorageKey) ?? defaultLang
for (const [lang, label] of langs) {
const option = document.createElement('option')
option.value = lang
option.innerText = label
if (lang === defaultLang) option.selected = true
select.append(option)
const button = document.createElement('button')
button.innerText = label
button.onclick = (e) => {
// Update translate
googleTranslate(text, lang)
// Save state
window.localStorage.setItem(localStorageKey, lang)
// Update language text
document.querySelector('#language').innerText = label
// Update UI
document.querySelector('header').style.display = 'none'
document.querySelector('main').style.display = 'flex'
document.querySelector('footer').style.display = 'flex'
// Enable button
var buttons = document.getElementsByTagName('button')
for (let i = 0; i < buttons.length; i++) {
buttons[i].disabled = false
}
// Disable button
button.disabled = true
}
if (lang === selectLang) {
// Set language text
document.querySelector('#language').innerText = label
// Disable select button
button.disabled = true
}
select.append(button)
}
document.querySelector('header').append(select)
select.onchange = () => googleTranslate(text, select.value)

googleTranslate(text)
document.querySelector('#language').onclick = () => {
// Update UI, show select list languages
document.querySelector('header').style.display = 'flex'
document.querySelector('main').style.display = 'none'
document.querySelector('footer').style.display = 'none'
}

document.querySelector('header').append(select)
googleTranslate(text, selectLang)
</script>
`,
},
Expand All @@ -310,7 +366,7 @@ const SelectionToolPopover = GObject.registerClass({
enable_back_forward_navigation_gestures: false,
enable_hyperlink_auditing: false,
enable_html5_database: false,
enable_html5_local_storage: false,
enable_html5_local_storage: true,
}),
}), {
'decide-policy': (_, decision, type) => {
Expand Down