[Plugin] FolderView

[hernandito]

Hi @Mattaton...

 

I was finally able to start Docker Service on my recovering server.... Parity is almost done building. Then I have to rebuild library based on what I lost.

 

Since I have not been able to keep up w/ all the day to day changes, do you think you can share a complete custom.css file...I want to use your version and then make my version tweaks. Do you recall if you started with one of my custom.css files?

 

Thank you!

 

H.

[Mattaton]

12 hours ago, hernandito said:

Hi @Mattaton...

 

I was finally able to start Docker Service on my recovering server.... Parity is almost done building. Then I have to rebuild library based on what I lost.

 

Since I have not been able to keep up w/ all the day to day changes, do you think you can share a complete custom.css file...I want to use your version and then make my version tweaks. Do you recall if you started with one of my custom.css files?

 

Thank you!

 

H.

Glad you're starting to see some light at the end of that tunnel, bud!

 

I didn't start with one of yours, I was living under a rock and didn't realize you had that repo until @Masterwishx had a conflict between our code today. 😄 I knew about your icon gallery, but not the custom CSS.

I followed your lead and posted my files on GitHub. You can feel free to just fix it how you think best and incorporate into your package if you like. 

I'm sure what I have can be cleaned up even more than I have done, but it works. 😄

https://github.com/Tyree/folder.view.custom.css

I tried to use specificity over !important, but I'm interested to see how you would improve things.

Edited September 21, 2023 by Mattaton

[kennymc.c]

I noticed this syslog entry when opening the Docker tab:

[error] 8653#8653: *609961 open() "/usr/local/emhttp/plugins/folder.view/langs/de.json" failed (2: No such file or directory) while sending to client, client: 192.168.1.101, server: 192-168-1-201.xxx.myunraid.net, request: "GET /plugins/folder.view/langs/de.json HTTP/2.0", host: "192-168-1-201.xxx.myunraid.net", referrer: "https://192-168-1-201.xxx.myunraid.net/Docker"

The mentioned json file for the German translation indeed does not exist. Unfortunately, I can't find a folder for this plugin in the English GitHub Unraid translation repository, so this file can't exist. Or is there (for whatever reason) another way chosen for the translation of this plugin?

[Jaycedk]

Think this will help you.

 

[kennymc.c]

On 9/13/2023 at 12:42 PM, scolcipitato said:

This was a good idea, so good that i actually I made it, now I just need people to translate the plugin.

I'll leave the translation file if anyone wants to translate something.

The "locale" field and the name of the file should be an ISO 639-1 language code.

If you translate, don't edit any HTML tags you see, only edit text.

 

For anyone else, I'm getting a little burned out on the advanced context, so I made this, I promise I will continue, I just need to comment out the code, iron out some bugs, and copy the new code to the dashboard, the update is not far in the future.

With this update I also introduced the feature requested from @jbb, you can add containers to a folder with labels.

en.json 6.57 kB · 5 downloads

 

Edit:

For anyone translating, the field "updating" have a $1 in the string, that $1 is the name of the folder, so it should stay there, you can change its position.

The same concept is for HTML tags mentioned above, you can change their positions, but they shouldn't be removed.

 

Edit 2:

Forgot to mention I translated the plugin in Italian, if you want to redo my work you are more than welcome.

 

I created a German translation.

Maybe this could be moved to GitHub like with most of the other translations and plugins (https://github.com/unraid/lang-en_US)? This would also simplify updates and bug fixes.

de.json

Edited September 21, 2023 by kennymc.c

[scolcipitato]

Just now, kennymc.c said:

 

I created a German translation.

Maybe this could be moved to GitHub like with most of the other translations and plugins (https://github.com/unraid/lang-en_US)? This would also simplifies updates and bug fixes.

de.json 7.29 kB · 0 downloads

Good, nice to have it, I'll make an update to add it for everyone.

The translations are in the plugin repo, here.

[scolcipitato]

New version is out with the request from @Mattaton, now Docker container both in the dashboard and in the Docker tab have autostart status classes, refer to the template on the GH repo for more info.

 

@Mattaton and @hernandito can you include in the README or the CSS file itself on your GH repo the latest version of the plugin you know the CSS is working on?

I think this will make things easier knowing what works on what version.

[Mattaton]

1 hour ago, scolcipitato said:

New version is out with the request from @Mattaton, now Docker container both in the dashboard and in the Docker tab have autostart status classes, refer to the template on the GH repo for more info.

Oh nice! This will be fun to dig into! Thanks!

 

1 hour ago, scolcipitato said:

@Mattaton and @hernandito can you include in the README or the CSS file itself on your GH repo the latest version of the plugin you know the CSS is working on?

I think this will make things easier knowing what works on what version.

CSS files on my repo have been updated to include minimum folder.view version. Also added to README. Will update again once I implement styles for the new autostart classes.

https://github.com/Tyree/folder.view.custom.css

 

Thanks!

Edited September 22, 2023 by Mattaton

[scolcipitato]

8 minutes ago, Mattaton said:

Also added to README.

I saw that you said to put your files directly in the folder, are there some issue with the import on the settings?

[Mattaton]

18 minutes ago, scolcipitato said:

I saw that you said to put your files directly in the folder, are there some issue with the import on the settings?

When I first started editing the custom CSS files, I was unable to get the import/export to work. I would make changes to my file on my desktop, try to import and nothing would change. When I checked the CSS file in the plugins folder, it was still blank. Nothing had been imported. So I started working directly with the files in the plugins folder. I haven't tried it again since, but I can give it another go and see what it does.

@hernandito has the same thing in his README. Not sure if he had the same issues or not.

 

[Mattaton]

Significant update to the dashboard and docker page css. 

Per @Masterwishx request to be able to pick other icons other than basic play/stop, I've baked in the ability for users to easily change the started and stopped icons via custom properties at the top of the file.

Instructions are in the file.

https://github.com/Tyree/folder.view.custom.css

 

If you're using an older browser that doesn't support custom properties in CSS, you'll have to find and replace the variables within the style declarations and replace them with the values of those variables.

 

Here is an excerpt of the file showing the custom properties:

  /* EXPANDED FOLDER HEADER AND "DRAWER" */
  --exfold-header-bg-c: rgba(255, 255, 255, 0.1);
  --exfold-drawer-border-c: rgba(255, 255, 255, 0.1);

  /* ICONS */
  --folder-started-icon: "\f04b"; /* Normal started icon - default is play triangle */
  --folder-stopped-icon: "\f04d"; /* Normal stopped icon - default is rounded square */
  --folder-autostart-full-icon: "\f144"; /* Indicate ALL autostart containers within the folder are started */
  --folder-autostart-partial-icon: "\f144"; /* Indicates SOME autostart containers within the folder are started */
  --folder-autostart-off-icon: "\f144"; /* Indicates NO autostart containers within the folder are started */

  --container-started-icon: "\f04b"; /* Normal started icon - default is play triangle */
  --container-stopped-icon: "\f04d"; /* Normal stopped icon - default is rounded square */
  --container-autostart-started-icon: "\f144"; /* Indicates autostart container is started */
  --container-autostart-stopped-icon: "\f28d"; /* Indicates autostart container is stopped */
  --container-spin-icon: "\f110"; /* Spin icon temporarily shown between container stopping and starting */

  /* ICON COLORS */
  --folder-started-icon-c: #4caf50; /* Normal started icon - default is green */
  --folder-stopped-icon-c: #f0000c; /* Normal stopped icon - default is red */
  --folder-autostart-full-icon-c: #4caf50; /* Indicate ALL autostart containers within the folder are started */
  --folder-autostart-partial-icon-c: #e68a00; /* Indicates SOME autostart containers within the folder are started */
  --folder-autostart-off-icon-c: #f0000c; /* Indicates NO autostart containers within the folder are started */
  --container-spin-icon-c: #e68a00; /* Spin icon temporarily shown between container stopping and starting */

  --container-started-icon-c: #4caf50; /* Normal started icon - default is play triangle */
  --container-stopped-icon-c: #f0000c; /* Normal stopped icon - default is rounded square */
  --container-autostart-started-icon-c: #4caf50; /* Indicates autostart container is started */
  --container-autostart-stopped-icon-c: #f0000c; /* Indicates autostart container is stopped */

  /* ICON SIZES */
  --folder-status-size: 16px;
  --exfold-status-size: 20px;
  --container-status-size: 16px;

 

Edited September 22, 2023 by Mattaton

[Masterwishx]

@scolcipitato is anyway we can get also dark theme for preview context menu ?

or we can do it by CSS ?

[scolcipitato]

Just now, Masterwishx said:

@scolcipitato is anyway we can get also dark theme for preview context menu ?

or we can do it by CSS ?

Custom CSS will do the trick, I also forgot to mention that you can change the color of the graph line in the CSS.

[hernandito]

On 9/22/2023 at 8:46 AM, Mattaton said:

Oh nice! This will be fun to dig into! Thanks!

 

CSS files on my repo have been updated to include minimum folder.view version. Also added to README. Will update again once I implement styles for the new autostart classes.

https://github.com/Tyree/folder.view.custom.css

 

Thanks!

Hi Guys,

 

Don’t mean to ignore you… still struggling w less serious issues, and work has been very time consuming.

I promise to jump back in soon.

 

[Mattaton]

New custom CSS update added a few variables to control autostart icon size independently from normal icon size. Also variables for icon and color of spin icon started versus stopped.

 

I may work on a dark theme for the context menu, but I'm not sure when. I'll defer to @hernandito if it's something he wants to take a shot at.

 

Thanks!

 

Latest version does need Folder.View 2023.09.22-1 for the autostart styles to work.

https://github.com/Tyree/folder.view.custom.css

Edited September 23, 2023 by Mattaton

[kennymc.c]

On 9/21/2023 at 8:55 PM, scolcipitato said:

Good, nice to have it, I'll make an update to add it for everyone.

The translations are in the plugin repo, here.

 

Thanks for this quick update.

I noticed that the on/off sliders are not included in the translation files. Also "Force Update" is still show in English although it has been translated.

Another issue is that as soon as I click on a container name, menu entry or button on the Docker tab and come back the Add Folder button is in English. Only by reloading the page it is translated again. I could reproduce this with Chrome and Safari after I deleted my browser cache. Firefox doesn't seem to be affected. On the VM tab this button is always in English.

Edited September 23, 2023 by kennymc.c

[scolcipitato]

32 minutes ago, kennymc.c said:

I noticed that the on/off sliders are not included in the translation files.

I thought that ON and OFF were quite universally accepted, but I'll add them in the next update.

 

33 minutes ago, kennymc.c said:

Also "Force Update" is still show in English although it has been translated.

You used the file I posted, I added lines when the update came out, so the force update you are missing is actually another line ("update-force": "Force update"), I have this to match the case of the English version.

 

36 minutes ago, kennymc.c said:

Another issue is that as soon as I click on a container name, menu entry or button on the Docker tab and come back the Add Folder button is in English. Only by reloading the page it is translated again. I could reproduce this with Chrome and Safari after I deleted my browser cache. Firefox doesn't seem to be affected. On the VM tab this button is always in English.

I use Firefox, so I couldn't catch this issue, I'll try to understand what is going on.

The VM tab is not yet translated, because I need to make the same changes, bring some changes made in the docker tab to the VM tab, then I'll translate it.

You might have seen the VM related translation, but they were for the dashboard, sorry for the confusion.

[kennymc.c]

27 minutes ago, scolcipitato said:

You used the file I posted, I added lines when the update came out, so the force update you are missing is actually another line ("update-force": "Force update"), I have this to match the case of the English version.

 

Ok, I created a PR so that it matches the current English translation file.

[unr41dus3r]

I dont know if this is possible but i have a feature request.

 

Is it possible to add an button to the folder to ONLY start containers that are set to "Autostart" ?

This would be extremely helpful when i have to do maintanance.

[scolcipitato]

1 minute ago, unr41dus3r said:

I dont know if this is possible but i have a feature request.

 

Is it possible to add an button to the folder to ONLY start containers that are set to "Autostart" ?

This would be extremely helpful when i have to do maintanance.

I am working on custom actions, with that you can perform action on specified containers inside a folder.

[Mattaton]

@scolcipitatoI'm currently working on a dark mode style for the advanced context window and I'm noticing the graph at the top for cpu usage doesn't seem to do anything.

I'm assuming the span within the div.usage-disk is supposed to change its width based on the cpu usage percentage, but its width stays at 0%. 

[scolcipitato]

54 minutes ago, Mattaton said:

@scolcipitatoI'm currently working on a dark mode style for the advanced context window and I'm noticing the graph at the top for cpu usage doesn't seem to do anything.

I'm assuming the span within the div.usage-disk is supposed to change its width based on the cpu usage percentage, but its width stays at 0%. 

I know, it should change, the only problem is that that element is selected with an ID and not a class, so unraid will pick up only the one you see on the advanced view.
In the next version I have it resolved, I don't like the solution, but it works.

And you are right, only the width is supposed to change.

[hernandito]

On 9/23/2023 at 10:13 AM, Mattaton said:

New custom CSS update added a few variables to control autostart icon size independently from normal icon size. Also variables for icon and color of spin icon started versus stopped.

 

I may work on a dark theme for the context menu, but I'm not sure when. I'll defer to @hernandito if it's something he wants to take a shot at.

 

Thanks!

 

Latest version does need Folder.View 2023.09.22-1 for the autostart styles to work.

https://github.com/Tyree/folder.view.custom.css

 

I started looking at your edits for the Dashboard... and, dude, it is clearly that your CSS programming skills are way above mine!

 

I started making minor tweaks for colors and icon sizes... but I don't know that I can adjust some critical important things.

 

I think the community would be better served with you implementing the high end codes, and let me, (and other non-pros) tweak colors, borders, and such to their liking. In my screen below, I changed a couple things that should be ultimately user editable. I changed:

• Background color
• Text boldness, color, and size
• Border colors

I can still share my low skill level edits for those who like or prefer. But leave to you the high level skill stuff. In essence, your tweaks are to the original code, and my tweaks are tweaks to your tweaks. And users can further tweak.

 

If you are OK, I could help by  "Art Directing" some things that you can implement in your code.  I think some of these tweaks may require @scolcipitato to implement. Here are my first suggestions.

 

 

• #1 - Include (or option to include) the small icons for the UI's and Logs.
• #2 - Reduce this margin... to tall compared to the bottom.
• #3 - Reduce these gaps... No need to separate the icons so much.
• #4 - If enlarging these icons, padding/margins of the text block needs to be adjusted. Perhaps locate these parts together in the custom CSS would help... Also, I belive changing these margins/paddings affect the Folder Icons as well.
• #5 - Having to click to activate the mini menu and then select Expand / Compress seems unnecessary. Clicking on the icons and down arrows should toggle expand and compress. Clicking the Docker Icon when expanded can bring up that menu. Do people need that menu when clicking on a Folder icon?

 

Thoughts?

 

Thanks to both of you for this amazing work.

 

 

 

[Mattaton]

I started a new branch for the advanced context menu dark mode.

https://github.com/Tyree/folder.view.custom.css/blob/context-menu-dark-mode/docker-custom.css

 

All the styles at the top are the same as my other custom CSS file, but at the bottom you'll find all the dark mode styles. 

I set out a bunch of variables so that folks can take this boilerplate and change colors as they see fit without having to dig too deep into the CSS selectors themselves.

 

As I'm sure there will be, let me know if you have any issues as not everyone has the same unRAID theme, I very well may have missed something.

[Mattaton]

17 minutes ago, hernandito said:

I started looking at your edits for the Dashboard... and, dude, it is clearly that your CSS programming skills are way above mine!

I appreciate it, but I am just hacking my way through it.

A real CSS programmer would probably cry over the BS I'm slingin' 😄 

 

My comments inline below...

17 minutes ago, hernandito said:

• #1 - Include (or option to include) the small icons for the UI's and Logs.

Yeah, I think @scolcipitato has to add those in before I can style them or give an option to show/hide them.

 

17 minutes ago, hernandito said:

• #2 - Reduce this margin... to tall compared to the bottom.

Can do.

17 minutes ago, hernandito said:

• #3 - Reduce these gaps... No need to separate the icons so much.

I'll see what I can do. Some of this is a min-width based on how long a container name MAY be. Looks odd when the names are short, but could be troublesome if the names are long. But yeah, I'll see what I can do.

17 minutes ago, hernandito said:

• #4 - If enlarging these icons, padding/margins of the text block needs to be adjusted. Perhaps locate these parts together in the custom CSS would help... Also, I belive changing these margins/paddings affect the Folder Icons as well.

This should be doable. I think I can also affect just the container icons or the folder icons. Give separate controls.

17 minutes ago, hernandito said:

• #5 - Having to click to activate the mini menu and then select Expand / Compress seems unnecessary. Clicking on the icons and down arrows should toggle expand and compress. Clicking the Docker Icon when expanded can bring up that menu. Do people need that menu when clicking on a Folder icon?

Hmmmm...this would involve @scolcipitato again. Making the down arrow close the folder will be somewhat impossible since they don't "exist" in the html code. I am adding it with CSS. So scolcipitato can't make that any sort of event handler for closing the folder. He can have the folder icon just open and close with a left-click, but what about all the other options in the context menu?

Edited September 24, 2023 by Mattaton