[[Plugin] FolderView]

11 minutes ago, hernandito said:

Sorry... I figure out how to resolve the icon size.... let me keep trying before I keep asking for crap....

Check out the code near the bottom of this where I was styling the advanced context window for a dark mode. It has basically everything pulled into a selector you can play with. It's commented so you can see what's what.

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

 

Although I did style the root tipster element, against @scolcipitato's advice. That's what has the border styles on it, so I'm not sure how else to affect/override the border without styling that element.

[[Plugin] FolderView]

2 minutes ago, scolcipitato said:

I don't include them because I think the dashboard should be an overview of the server. If you want more access to information you should go to the tab, but I'll think about it, if this won't impact too badly the stock look.

 

I won't implement it for sure, as you said, I can't access the custom CSS you make. Even if I could, in the long run it would be a nightmare, having and maintaining custom code baked in for everyone who need something.

I have a couple of ideas for making custom script, this is far, far away, I have other things to do before that.

Agreed. I, personally, rarely use the dashboard for anything and pretty much always go straight to the docker tab if I'm in unRAID for that reason. When I start unRAID it's on the Main tab, so it's one click to go to Dashboard or Docker. Easy choice. 🙂 

[[Plugin] FolderView]

21 minutes ago, hernandito said:

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

Strange. Mine doesn't look like yours. Top and bottom space looks pretty even on mine:

 

[[Plugin] FolderView]

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?

[[Plugin] FolderView]

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.

[[Plugin] FolderView]

@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%. 

[[Plugin] FolderView]

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

[[Plugin] FolderView]

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;

 

[[Plugin] FolderView]

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.

 

[[Plugin] FolderView]

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!

[unRAID 6.12.4 - I'm trying to delete a container and it keeps coming back!]

I'm trying to remove a binhex-nzbget container and it keeps coming back after a few minutes.

 

I delete it the typical way, click and then choose remove. I choose the option to also delete the image. I even go in a delete its config folder from appdata. A few minutes later, it's not only back but supposedly even started.

 

I have disabled and reenabled docker. I've even rebooted the server. It refuses to go away.

 

What else can I try?

[[Plugin] FolderView]

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.

[[Plugin] FolderView]

So, thanks to @Masterwishxpointing out an issue, I realized I had way too much extraneous code. I was trying to add a new icon when I decided to just replace the existing icons, but I left all the extra code still in there. Anyway, here's the new code for the dashboard and docker page autostart icons (Full code can be found here: https://github.com/Tyree/folder.view.custom.css ):

/*************************************************/
/* AUTOSTART ICONS - DASH */
/*************************************************/
#docker_view
  .outer:not(.folder-docker).autostart.started
  i:not(.fa-spin)::before {
  content: "\f144"; /* Replace the green triangle with a different icon */
}
#docker_view
  .outer:not(.folder-docker).autostart.stopped
  i:not(.fa-spin)::before {
  content: "\f28d"; /* Replace the red square with a different icon */
}
#docker_view .outer:not(.folder-docker).autostart.started i.fa-spin::before,
#docker_view .outer:not(.folder-docker).autostart.stopped i.fa-spin::before {
  content: "\f110"; /* Replace the spinner with a different icon */
}

/*************************************************/
/* AUTOSTART ICONS - DOCKER PAGE */
/*************************************************/
.outer:not(.folder-outer).autostart i.started:not(.fa-spin)::before {
  content: "\f144"; /* Replace the green triangle with a different icon */
}
.outer:not(.folder-outer).autostart i.stopped:not(.fa-spin)::before {
  content: "\f28d"; /* Replace the red square with a different icon */
}
.outer:not(.folder-outer).autostart i.started.fa-spin::before,
.outer:not(.folder-outer).autostart i.stopped.fa-spin::before {
  content: "\f110"; /* Replace the spinner with a different icon */
}

 

[[Plugin] FolderView]

Just now, Masterwishx said:

 

OK Then , maybe if @scolcipitato will have time for it sometime , will be awesome . However he already made amazing job for us ...

Absolutely. All these little tweaks are just sprinkles on the icing on the cake. 🙂

[[Plugin] FolderView]

2 minutes ago, Masterwishx said:

 

Oh , maybe it was in plugin itself (Docker Folder) i mean ...

 

Yes

Also if im not mistaking,  Folder color also was orange when update was avalible for some containers

Yeah, those will have to be conditions that @scolcipitato would have to code in classes for, so we can select them for styling.

Someone smarter than me might be able to figure out some clever way to accomplish this with CSS alone, but it'd be WAY smoother with the classes in place. 🙂 

[[Plugin] FolderView]

Just now, Masterwishx said:

 

Can we also change folder icon if some of auto started container is stopped? I think it was orange stop button in past... 

What you're asking for may be impossible with CSS alone since there's nothing on the folder element itself to flag the condition you speak of.
Was the orange stop button based on only autostart containers or if ANY containers in the folder were stopped?

[[Plugin] FolderView]

Just now, scolcipitato said:

I noticed it too, but it's from unraid not mine.

Ah okay. Weird. I assume it's supposed to be class="appname" like other places.

[[Plugin] FolderView]

1 minute ago, Jaycedk said:

Don't be like me, and wonder why this does not work.
You will need this version of FolderView 2023.09.20 😁

 

Ah! Yes indeed! Yep. Couldn't do any of this new CSS without that update. 🙂

[[Plugin] FolderView]

This does the same thing as my last post, but for the docker page instead of the dashboard:

/*************************************************/
/* AUTOSTART ICONS */
/*************************************************/
.outer:not(.folder-outer).autostart .inner i:not(.fa-spin)::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: 4px;
}
.outer:not(.folder-outer).autostart .inner i.started:not(.fa-spin)::before {
  content: "\f144";
  color: #4caf50;
}
.outer:not(.folder-outer).autostart .inner i.stopped:not(.fa-spin)::before {
  content: "\f28d";
  color: #f0000c;
}
.outer:not(.folder-outer).autostart .inner i.started.fa-spin::before,
.outer:not(.folder-outer).autostart .inner i.stopped.fa-spin::before {
  content: "\f110";
}

 

[[Plugin] FolderView]

I went kinda simple here. I change the started/stopped triangle and square to use a circle version from font-awesome when set to autostart. 

 

Here's the code for it:

/*************************************************/
/* AUTOSTART ICONS */
/*************************************************/
#docker_view
  .outer:not(.folder-docker).autostart
  .inner
  i:not(.fa-spin)::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  margin-right: 4px;
}
#docker_view
  .outer:not(.folder-docker).autostart.started
  .inner
  i:not(.fa-spin)::before {
  content: "\f144";
  color: #4caf50;
}
#docker_view
  .outer:not(.folder-docker).autostart.stopped
  .inner
  i:not(.fa-spin)::before {
  content: "\f28d";
  color: #f0000c;
}
#docker_view
  .outer:not(.folder-docker).autostart.started
  .inner
  i.fa-spin::before,
#docker_view
  .outer:not(.folder-docker).autostart.stopped
  .inner
  i.fa-spin::before {
  content: "\f110";
}

 

[[Plugin] FolderView]

@scolcipitato As I was inspecting the code for the classes you added, I noticed there's a class property on the span wrapping the container name text on the dashboard, but it has no equals or value:

<span class>container name</span>

Doesn't seem to be causing any problems, just pointing it out.

[[Plugin] FolderView]

1 minute ago, scolcipitato said:

I pushed a new version with this.

You da man. Thanks! I'll see what I can do with it. 🙂

[[Plugin] FolderView]

2 hours ago, LlamaDuck said:

@Mattaton awesome work, I've noticed the folder icons show above the unraid nav/header if you scroll down on the dashboard.

Fixed that. Just have to change this css code:

/* Expand the clickable area to the full width of the header */
.folder-showcase-outer[expanded="true"] .folder-hand-docker {
  position: absolute;
  z-index: 50; /* Keep below the main unRAID Nav */
  display: inline-block;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 8px;
}

[[Plugin] FolderView]

2 minutes ago, scolcipitato said:

Sorry about that, I am working on another project and don't have much time, I'll implement it, you just have to wait a little bit.

No worries at all. Thanks!

[[Plugin] FolderView]

Just now, LlamaDuck said:

@Mattaton awesome work, I've noticed the folder icons show above the unraid nav/header if you scroll down on the dashboard.

Gotcha. Good catch. Should be an easy fix. Just have to check z-index on the nav and set the icons below that like I did with the folder context menus. I'll take a look when I get home tonight and post the tweaks.

 

I've been reworking and cleaning up the CSS to be just what it needs (with enough specificity to be clear and override default styles) and easily translated for the VM panel.

Hoping @scolcipitato (since he's not busy at all ) can hook us up with autostart-related classes on container wrappers so I can add some indications for that too. Then I'll post the updated CSS code. 

I've also added some effects that desaturate the folder (grayscale) and container icons and then saturate them on hover (color). Those are self-contained and can be easily axed if folks don't like it.