Add scroll to file name

[sa-egor]

Hello!

Please add scrolling text (<marquee> or other) for div job-info__filename.
If filename long, not all text is displayed.
For example:

File name: CFFFP_Orange Pi PC and 3.5_ TFT display on 20x20mm profile lock.gcode

Lines for edit:

OctoDash/src/app/job-status/job-status.component.html

Line 9 in c6747fd

<span class="job-info__filename">{{ job.filename }}</span> <br />

OctoDash/src/app/job-status/job-status.component.html

Line 20 in c6747fd

<span class="job-info__filename">{{ job.filename }}</span> <br />

Thanks!

[UnchartedBull]

I think marquee isn't an official HTML tag and also looks a bit laggy. I'll have a look at this and see what I come up with. Definitely should be configurable, as I for example don't want my text to scroll.

[noxhirsch]

I wouldn't want my names to scroll either. I'd rather prefer a smaller font or/and two lines. In my opinion the filament grams below the name has more use on the file selection (if you start a print directly, you already can find that info in the slicer), so that space could be used for a second line of the filename.

[ruralaccent]

I use long file names as part of my workflow and file management. I definitely agree that it needs to either scroll or cross two lines (or have options for this). Thank you! :)

[UnchartedBull]

I will work on this after the v2 release, so it might need a little more time.

[noxhirsch]

Just a little sneak peek on the custom style I'm working on at the moment. This is of course not the printing screen, but it will be similar. One of my main goals is also to see as much as possible from the filename everywhere.

[noxhirsch]

Update:

In the filelist filament and file size are now hidden (I think it is enough to find them in the file view), so more of the filename is visible (also the scrollbar is smaller):

Full screen file view with big thumbnail (square thumbnails will be more narrow, of course):

Many changes on the file loaded screen (also enough space for square thumbnails):

The same changes on the printing screen:

As soon as two HTML changes are implemented, everything is just CSS which can be used with the custom CSS file available in the next version of OctoDash.

[sa-egor]

Looks cool!

[UnchartedBull]

I merged one of the HTML changes, the other one will be merged soonish. Once you're done with your design feel free to create a PR. I'm thinking for now as a temporary solution:

There will be a directory at root level of this repo called themes, inside of which there will be folders with some nifty names for the different themes. Each theme folder should contain a couple of screenshots and the custom-css file for people to download. I think this will work great as an intermediate Theme Store.

themes
| -- nifty-name-1
| -- -- screenshots
| -- -- custom-styles.css
| -- nifty-name-2
...