[Plugin] FolderView

[Mattaton]

4 hours ago, Masterwishx said:

 

Added at end of file , all fine but have icon above menu:

Ah. Good catch. I'll look at that this evening.

Unfortunately, I just realized my server is down. I'm not at home, so I can't check it. I hope some of @hernandito's problems haven't spread my way. It was okay as of array check notifications 7 hours ago. 😕

[Mattaton]

14 hours ago, Masterwishx said:

 

Added at end of file , all fine but have icon above menu:

 

Okay. Fixed that by adding z-index: 900 to the .folder-hand-docker selector:

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

 

[Kloudz]

On 9/15/2023 at 3:43 AM, scolcipitato said:

This is the day.

The newest version of the plugin is here, 2023.09.15.

As said in the posts above, I have added:

• The advanced docker context menu.
• Support for more languages.
• Button to open the console in the preview. Thanks to @Kloudz
• Now you can add docker containers to a folder with labels, the label to do this is folder.view The value should be the name of the folder. Thanks to @jbb
• Added a small button to verify that the order of the autostart match the order you see.
  This icon will turn red if the autostart order is different from what you see.
• Fixed the error when rebooting the server without internet connectivity.

EXPECT A LOT OF BUGS!

 

SWEET! Thank you!

 

Also, one more enhancement that I would like to see is changing the order of the previews. Right now it's Web, Logs, Console. If we can reorder them. I'm a happy camper.

 

Thanks again!

[ALameLlama]

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

@scolcipitato Love the update! it's made it so much easier to get everything I need!

 

got a feature request but I'm not sure if it'll fit in the plugin, I've love to be able to add "tags" to docker containers. e.g tag containers that use authentik so I can see at a glace what containers are using it. or like tag ones that using traefik so I can see what is reverse proxied at a glace.

 

Maybe something so it's possible to add small icons to the bottom left on the container icons

[Mattaton]

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.

[scolcipitato]

12 minutes ago, Mattaton said:

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.

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.

[scolcipitato]

24 minutes ago, LlamaDuck said:

I've love to be able to add "tags" to docker containers. e.g tag containers that use authentik so I can see at a glace what containers are using it. or like tag ones that using traefik so I can see what is reverse proxied at a glace.

 

Maybe something so it's possible to add small icons to the bottom left on the container icons

I feel this is outside the scope of this plugin, but is a great idea, maybe an idea for another plugin.

[Mattaton]

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!

[Mattaton]

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;
}

[scolcipitato]

On 9/17/2023 at 8:10 PM, Mattaton said:

I know you just got done with some big fixing and sweet new updates, but a feature request for when you have a moment...

 

Can you add a css class to the containers that are set to autostart (both on the dashboard and docker tab)?

That way we can add some custom css to make the autostart setting obvious without opening the folders on the docker tab. And on the dashboard, I could add another icon to denote autostart status.

 

Thanks!!!

I pushed a new version with this.

[Mattaton]

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. 🙂

[Mattaton]

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

[Mattaton]

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";
}

 

Edited September 20, 2023 by Mattaton

[Mattaton]

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";
}

 

[Jaycedk]

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

 

[Mattaton]

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. 🙂

[scolcipitato]

1 hour ago, Mattaton said:

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

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

[Mattaton]

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.

[Masterwishx]

1 hour ago, Mattaton said:

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";
}

 

 

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

[Mattaton]

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?

[Masterwishx]

12 minutes ago, Mattaton said:

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.

 

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

 

13 minutes ago, Mattaton said:

Was the orange stop button based on only autostart containers or if ANY containers in the folder were stopped?

Yes

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

[Mattaton]

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. 🙂 

[Masterwishx]

3 minutes ago, Mattaton said:

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. 🙂 

 

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

[Mattaton]

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. 🙂

[Mattaton]

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 */
}

 

Edited September 20, 2023 by Mattaton