Viewport cuts away custom commands

vmario89

Hey,

i put some special commands in my extcommands.xml to my printer slug. On regular computer this is working fine.

Now on smartphone or if i resice the browser window to some smaller windows there's reached the point where menu gets cut off. There's no way to scroll so the actions which are hidden. No chance on mobile phone to trigger those actions. Image 1 has a smaller viewport than image 2.

some feature: request regarding to this: make the extcommands.xml parser accepting custom svg icons and allow to put actions into custom seb menus.

Repetier

The SVG solution is great. Always wanted own icons just did not think about the obvious solution to be independent from internal fonts.

Could also recreate the menu problem. Just need an idea how to fix it as it is a library function from bootstrap and problem seems to be where the menu is included. The top menu for example does not have that problem - it extends the main size and scrolls while printer menu stays sticky even the content below scrolls so has the wrong anchor.

Repetier

Ok, found the scroll problem. If dropdown-append-to-body attribute is used, it is not scrolling. A known problem of library authors they won't fix. Fortunately removing the attribute seems to work well, so fixed for next release.

vmario89

hey nice to read! :-)

yeah svg icons could work. or some png files. question is the thing with resizing and colours maybe.

by the way sub menus could be done with "collapse" or "accordion".

i am not a software dev but i had a really quick look on the net:

https://getbootstrap.com/docs/4.3/components/collapse/</div><div>https://mdbootstrap.com/docs/jquery/javascript/accordion/ - guess sth is out there for that bootstrap theme similar to that jquery stuff

Repetier

With monochrome svg it is best to get color also in dark mode. I'm adding them as img so png would also work and I force height so icons have same size.

Submenu is a problem. We use bootstrap 3 in gui and 4 in monitor and 4 has no submenus any more. And it must work in all. I'm not really a fan of the accordion idea - it is a click more. Maybe at some time we add extra menus if it gets too much entries.

vmario89

hi, one addition to this bug: i realized that when opening Firefox first time the view also will look likt this always (all buttons are unusable):

after reloading the page once the buttons are displayed in the center (and still cutoff the last ones) so the can be used.

regards, Mario

Repetier

Ok, I see the problem with the menus not matching in position with narrow screens. Have found a solution for this making them full width when screen has less then 500 pixel width.

Not sure if I interpret your "all buttons unusable". Do you mean the menus open wrong or no click at all is possible so menus even won't open?

When I open it in firefox on desktop (can't debug mobile and ios is always based on safari anyway) the buttons are all usable, so I hope you meant the menus.

vmario89

hi. sorry for unclean description. Yes i mean just the fact that you cannot reach the buttons in the drop down menu so the entries cannot be triggered - you can click the outermost border and it will work - but if text is not displayed you just dont know what you are going to click then^^. This happens only on Smartphone Firefox. On Desktop everything is fine

Repetier

Great then it is already fixed in the 0.93.2 beta version I compiled for linux today.

vmario89

Hey,

now the day has come that i have too much entries in the custom drop down menu (14 entries in total). I have a lot of action calls which run python scripts i often need for our Hangprinter implementation. The problem is that i have to modify the browser zoom to 60% to see all the functions i need. Because accordion is not possible, maybe some custom dropdown buttons instead like the following (icons should be changed)?

img datei erstellen

Repetier

Nice idea. Will make the split for more the 4 extra entries to keep them balanced more.

vmario89

Hey. It's me again :D Happy to see that you released Repetier Server 0.94.0

Found in changelog that you added

* Allow user icons for own commands.
* Dropdown menus now orient based on available space.

Figured out that now the menu has proper width but it still cuts commands on smartphone. I can only see 9 of 15 entries i put in my menu. I cannot zoom out to reach the other missing entries. To fix it i have to change to desktop size viewport. Is it possible to add some scrollbar when the menu pops up?

Cool feature with icons for the custom commands. I did not find the recent documentation on how to do this. Could you give me some hint about xml configuration and constraints for the icon files like file format, size, alpha channel and so on? Did not find the recent docs at https://www.repetier-server.com/documentation/ yet

regards and thanks for your work, Mario

Repetier

Yes, I got a scrolling bug in 0.94.0 so also splittet it will not scroll with body. Can you test if that is solved in 0.94.1 beta. Just change linux download link to 0.94.1. At least menus now scroll with body.

Regarding icons just add icon attribute to command tag
<command icon="url" ....>

If it starts with / it is on the server. You can create and use the shadow directory for this to store own images. O ruse absolute urls to fetch them from anywhere you like.

vmario89

hi. thanks for the quick fix. menus work now :-) the icons i am going to test next days =)

Repetier

Forgot to mention - best use svg icons so color changes in dark mode as well.

vmario89

cool, icons work! Thanks for that feature implementation. This will clean up my user interface a lot

vim /var/lib/Repetier-Server/database/RepetierServer.xml

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<server>
<branding>
<shadow-www-directory>/var/lib/Repetier-Server/shadow</shadow-www-directory>
</branding>
</server>

cd /var/lib/Repetier-Server/
mkdir shadow/
chown repetierserver:dialout shadow/

And then finally put icon file into shadow directory and link it into extcommands.xml

:-)

vmario89

sorry for bugging you again. found the cut away error also in Server Monitor ;-D cannot use all my commands in that menu. by the way you can see my larger needs for some actions.

Repetier

Hope there is a solution in bootstrap-vue for this. I fear it will be real problem with the desktop like modification for scrolling. Need to make the menu it self scrollable I guess.
In server I had to rewrite the menu function my self get it all fixed. Will check monitor for next update.

And yes, I see you really have a lot of functions and also icons make good sense in your case.

vmario89

hi, since some more recent update the icons do not show anymore. I think since update 1.2.0 or 1.3.0. The files are still present and can be read. If i use the debugger from Firefox, i can see that the bounding box is messed. The wrong rendering happens on Chrome and Firefox and is the same issue on mobile devices and bigger view ports. I think some css must be broken. i did not change style settings or icons. the viewport and size attributes of the svg are fine.

Repetier

My icons are visible on firefox, see:
https://cln.sh/kG61fv<br/><br/>But today I learned firefox is a bit picky with svg icons and when they can be drawn. Can you provide the source of one icon not working for testing.