Can you please add coloring if we made any changes in current text

[yilmazdurmaz]

Describe the problem

Proofreading is a bit tricky process when translating, especially in electronic form.

When using pen and paper, you can make any marks on the part that needs editing.

For electronic active editing, such as Weblate, this is not possible in the expected sense.

And the worst part is to click on the wrong button to go to the next string, without saving if we had any changes.

Describe the solution you'd like

You can help us in two ways, one is simple to implement, the other needs some expertise

1. add some color to the translation's edit box if we have any changes in the text.

• you have already something similar working on the page: "needs edit" checkbox is disabled when we change the text. but it is not enough.
• adding some coloring (red, yellow, orange?) to the edit box will have our attention.

2. you may add a diff tools to show which bits have we changed.

• this too is already in use in other parts of the app: diff in history, and diff in automatic/suggestions.
• the hard part is that the text in the edit box is still under active editing.
• it may become slower on some machines, maybe add a checkbox to activate it, if you implement this.

Describe alternatives you've considered

Other than trying to memorize, I haven't tried anything else.

Screenshots

No response

Additional context

No response

[github-actions]

This issue has been put aside. It is currently unclear if it will ever be implemented as it seems to cover too narrow of a use case or doesn't seem to fit into Weblate.

Please try to clarify the use case or consider proposing something more generic to make it useful to more users.

[yilmazdurmaz]

Please try to clarify the use case

This one is for the bot:

Mainly for proofreading purposes, add some color indicator to the edit box to minimize:

• focus loss for long texts if there are any changes made in the text
• stress about saving any accidental edits

[yilmazdurmaz]

Hi again,

I have experimented with border coloring. I used the following code in "weblate/templates/translate.html" after line 170 (where the edit box is added), and it adds color to the input box border if the text has changed.

     <style>
      .border {
        border: 1px solid #dee2e6 !important;
      }
      
      .border-warning {
        --bs-border-opacity: 1;
        border-color: rgba( 220, 53, 69, 1) !important;
      }
    </style>     
    <script>
      window.addEventListener("DOMContentLoaded", (event) => {
        let editor = $(".translation-editor")
        let original = editor.text()
        let changed
        let detect = function(){
          changed = original !== this.value
            if (changed){
            editor.addClass("border border-warning")
          }else{
            editor.removeClass("border border-warning")
          }
        }
        editor.keyup(detect)
      });
    </script>

The code is long because:

• somehow jQuery does not load before this code, "$ is not defined", so I had to add extra lines.
• the copy of bootstrap files does not have border classes, so I had to add the custom style tag.

Can someone solve these two issues and make the code more elegant?

[yilmazdurmaz]

I made a brand new monkey script for this purpose, and put it as a gist here:

https://gist.github.com/yilmazdurmaz/db1e4ce6f60fdd000c7720fdd4e1a05c

Install TamperMonkey/GreaseMonkey on Edge/Chrome/Firefox and import the script.

• open the gist, and click "Raw" on the script. copy the link
• open the monkey's dashboard, select utilities, use "import from URL"

I hope you will find a better solution than a third-party one like this.