search

jonaswinkler / paperless-ng

A supercharged version of paperless: scan, index and archive all your physical documents
https://paperless-ng.readthedocs.io/en/latest/
GNU General Public License v3.0
5.38k stars 356 forks source link

[BUG] Text document preview not visible in dark mode #1228

Open jat255 opened 3 years ago

jat255 commented 3 years ago

Describe the bug When dark mode is active, and previewing a .txt document, the text of the document is rendered in normal black color, which makes it illegible on the dark background.

To Reproduce Steps to reproduce the behavior:

  1. Enter a .txt file into the system
  2. Ensure dark mode display is active
  3. View document details and look at preview

Expected behavior

Font color should be light-colored, matching the rest of the application (looks like this is #abb2bf throughout the rest of dark mode)

Screenshots

image

This was a private document, so many of the details are blurred/redacted, but the part outlined shows the problem well enough

jat255 commented 2 years ago

Turns out this is not so simple to fix (at least for me), because that text is loaded as a virtual element, so CSS selectors from the main application will not match on it:

<object _ngcontent-iac-c113="" type="text/plain" width="100%" class="preview-sticky" data="http://paperless.lan/api/documents/<doc_id>/preview/">
  #document
    <html>
      <head></head>
      <body>
        <pre style="word-wrap: break-word; white-space: pre-wrap;">
          text content
        </pre>
      </body>
    </html>
</object>

Everything inside that virtual element is loaded from http://papelerless.lan/api/documents/_doc_id_/preview/ , which comes directly from src/documents/views.py in the backend. Since this is supposed to return just the file content, it does not make sense to add front-end CSS here, so I'm at a bit of a loss on how to get this to show up correctly on the edit page preview. @jonaswinkler any ideas?

shamoon commented 2 years ago

Yea a simple fix would be to have Angular add a class (eg the text-light class) if it detects a plaintext document. Honestly Im gonna hold off on a PR until (hopefully) development starts up again but its a simple fix

jat255 commented 2 years ago

I'm very much not an Angular expert, but would that work? I tried adding a class to the pre element and then a new rule for that class in my devtools, but the browser (at least Chrome) will not apply rules from the root document inside of the #document virtual element. The only other thing I can think of is some javascript that would apply the style after the preview is loaded.

shamoon commented 2 years ago

Oh sorry, youre right its like an iframe. Adding a background color to the container element might make more sense anyway

jat255 commented 2 years ago

Oh sorry, youre right its like an iframe. Adding a background color to the container element might make more sense anyway

Doh, you're right that's a smarter idea...

shamoon commented 2 years ago

Added the 1 line PR =) Hopefully this project comes back to life soon...

jat255 commented 2 years ago

Ah, you beat me to it: https://github.com/jat255/paperless-ng/commit/67464c810ae5ba669c7f818e4cb99293bb1e4044

shamoon commented 2 years ago

Yes but your approach will affect all preview objects, we dont want that, just when its text/plain. Especially with angular we have to manage CSS cascading carefully. Also, probably cleaner to use an existing class (.bg-white is in bootstrap) than a whole new rule, variable, etc.

👍