[Plugin] FolderView

[Mattaton]

2 minutes ago, hernandito said:

 It would look better if that grey down arrow be on the right side and bigger…. This way all icons would line up. I would also place the top horizontal border above the folder icon. Also give the expanded folder icon and label their own class. This way, in custom.css, one could make the folder icon and name larger to show better hierarchy between folders and the folder contents…. Background of a wrapper for the folder icon and label should run full width as well. This way one could apply a custom background color, and radius corners - again to do better visual distinction between folder and its containers.

 

i would leave all the non-expanded folders as shown above.

 

i wish I could illustrate w some mock-ups… but I’m still struggling to rebuild data…

Agreed, this was a second version in case @Linguafoeda liked the arrow on the left better.

I like your other ideas, too. The expanded folders and icons don't have a class, but the container does have an expanded="true", so can be selected with:

.folder-showcase-outer[expanded="true"]

I think that still allows what you're suggesting, right?

I can only mess with custom CSS, @scolcipitato would have to add classes, if the above won't accomplish/allow what you're suggesting.

[Mattaton]

@hernandito Here's an update based on your notes. Thoughts?

 

 

And a little fancier:

Edited September 15, 2023 by Mattaton

[Masterwishx]

50 minutes ago, scolcipitato said:

I pushed an update, now should be fixed.

Thanks it fixed ,but somehow still have some random containers without linked to webui when point on globe Draw.io in second picure:

 

[Masterwishx]

@scolcipitato Also graph still without lines of CPU/MEM , using combined mode, in dynamix color black

[Jaycedk]

11 minutes ago, Masterwishx said:

Thanks it fixed ,but somehow still have some random containers without linked to webui when point on globe Draw.io in second picure:

 

I'm seeing that to.

Can you see if you see this too ?

 

In that docker

All my dockers that work shows like this

Edited September 15, 2023 by Jaycedk

[Mattaton]

5 minutes ago, Jaycedk said:

I'm seeing that to.

Can you see if you see this too ?

 

In that docker

Are you guys saying there are containers that should have globe icons (Web UIs) but the globe isn't showing up?

That's what I have happening. Containers that should have the globe icon link, but do not.

 

Not sure if it's coincidence or not, but for me it's the first container in three folders that should have the globe but don't.

Edited September 15, 2023 by Mattaton

[scolcipitato]

4 minutes ago, Jaycedk said:

I'm seeing that to.

Can you see if you see this too ?

 

In that docker

All my dockers that work shows like this

This is the reason I don't want to mess with unraid code, I'll try to fix it.

[scolcipitato]

5 minutes ago, Mattaton said:

Are you guys saying there are containers that should have globe icons (Web UIs) but the globe isn't showing up?

That's what I have happening. Containers that should have the globe icon link, but do not.

For this I need the debug file.

[Masterwishx]

12 minutes ago, Jaycedk said:

Can you see if you see this too ?

Sorry dont understand the question ....

http://[IP]:[PORT:20211]  this i have in both containers with and without showing ip in left corner that not linked

[Jaycedk]

Ok just think that was it 😁

[Masterwishx]

i meaned that @scolcipitato has fixed globe linked to ip:port of containers but some of them  still not fixed ...

[Mattaton]

8 minutes ago, scolcipitato said:

For this I need the debug file.

Are there instructions somewhere for doing that?

[scolcipitato]

Just now, Mattaton said:

Are there instructions somewhere for doing that?

First post

[scolcipitato]

41 minutes ago, Masterwishx said:

@scolcipitato Also graph still without lines of CPU/MEM , using combined mode, in dynamix color black

Any error in the browser console?

[scolcipitato]

34 minutes ago, Jaycedk said:

I'm seeing that to.

Can you see if you see this too ?

 

In that docker

All my dockers that work shows like this

I think I fixed it, now I'll wait for the other bug that have been reported and push the update.

[scolcipitato]

Pushed the new update with the fix. 🥳

[Mattaton]

4 minutes ago, scolcipitato said:

Pushed the new update with the fix. 🥳

Unfortunately, I'm still missing those globe icons after the update. 😕

[Masterwishx]

13 hours ago, Mattaton said:

Unfortunately, I'm still missing those globe icons after the update.

i have also missing globe icon for urBackup,Krusader

 

Mostly webui now link ip:port is working but still have piAlert,Home-Assistant-Core ... no link (about:blank#blocked)

 

 

Moslty i dont have lines of CPU/MEM but after refresh i have it for couple sec then it stuck /stop :

 

 

 

 

 

 

 

 

Edited September 16, 2023 by Masterwishx

[hernandito]

17 hours ago, Mattaton said:

@hernandito Here's an update based on your notes. Thoughts?

 

 

And a little fancier:

Sweet!

 

You did this all in custom.css? 
 

only tweaks would be to indent the rows of non-expanded folder icons so their left edges align w left edge of expanded large folder icon.

also indent the whole block of expanded container icons so visually they look like a subset of the folder icon.

 

would you mind sharing your code?

 

excellent work!

 

ps. I can’t tell the difference between the regular version and fancier versions above….

 

[Mattaton]

2 hours ago, hernandito said:

Sweet!

 

You did this all in custom.css? 
 

only tweaks would be to indent the rows of non-expanded folder icons so their left edges align w left edge of expanded large folder icon.

also indent the whole block of expanded container icons so visually they look like a subset of the folder icon.

 

would you mind sharing your code?

 

excellent work!

 

ps. I can’t tell the difference between the regular version and fancier versions above….

 

Yeah, this is all with the custom css file. Here's where I am currently. Starting to get a little hacky with the indents. Getting the folder icons to line up is tricky and ends up making the docker pane look different than the vm pane. But I guess you could apply this to both panes. All the other panes have a 10px padding. I'm increasing the left padding to 20px and then giving a negative left margin of 10px to the expanded folder so it'll line up (other than the 1px border width - easily fixed).

This works, more or less, but I can't figure out how to get the right margin of the expanded folder to extend another 10px to compensate for its negative left margin. Since it's set to be 100% width, I'm not sure how to add 10px to it. Tried negative right margin, but that had no effect.

 

The only difference between the previous two images, was the fancy one had a rounded corner box around the child containers like a drawer instead of just the bottom border.

 

Here's the code so far:

/* Add a padding left to the entire docker icon area */
#docker_view tr:nth-child(2) td {
  padding-left: 20px;
}

/* Overcome 20px container padding-left by giving
expanded folder a negative left margin */
.folder-showcase-outer[expanded="true"] {
  margin-left: -10px;
}

/* Push expanded folder and its children to full width
and break them out of flow with non-expanded icons */
.folder-showcase-outer[expanded="true"],
.folder-showcase-outer[expanded="true"] .folder-showcase {
  box-sizing: border-box;
  float: left;
  display: block;
  width: 100%;
}

/* Styles for the expanded folder header */
.folder-showcase-outer[expanded="true"] .folder-docker {
  position: relative;
  display: block;
  float: none;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  margin-bottom: -10px;
}

/* Increase the size of the expanded folder's icon */
.folder-showcase-outer[expanded="true"] .folder-img-docker {
  width: 48px;
  height: 48px;
}

/* Increase the font size for the expanded folder */
.folder-showcase-outer[expanded="true"] .folder-appname-docker {
  font-size: 2rem;
}

/* Down arrow icon for the expanded folder header */
.folder-showcase-outer[expanded="true"] .folder-docker::after {
  position: absolute;
  content: "\f0d7";
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 3rem;
  right: 1rem;
  bottom: 0;
}

/* Styles for the child docker container icons "drawer" */
.folder-showcase-outer[expanded="true"] .folder-showcase {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-width: 0 1px 1px 1px;
  border-radius: 0 0 10px 10px;
  margin-bottom: 2rem;
  padding: 30px 20px 0 20px;
}

/* Hide the "started" and "stopped" text so that only
the green arrow or red square shows on containers */
#docker_view .folder-element-docker .state {
  display: none;
}

 

[Mattaton]

@hernandito

A few tweaks. Added border-box to all elements inside the docker pane. Border-box should just be the default, let's be honest. 😄

/* Apply border-box to all elements inside the docker pane */
#docker_view * {
  box-sizing: border-box;
}

 

Removed the width: 100% on the wrappers and used left: 0 and right: 0 to make sure it touches the edges at the 10px mark.

/* Push expanded folder and its children to full width
and break them out of flow with non-expanded icons */
.folder-showcase-outer[expanded="true"],
.folder-showcase-outer[expanded="true"] .folder-showcase {
  float: left;
  display: block;
  /* width: 100%; */
  left: 0;
  right: 0;
}

 

Also updated the expanded folder header to compensate for border and keep the icons lined up.

/* Styles for the expanded folder header */
.folder-showcase-outer[expanded="true"] .folder-docker {
  position: relative;
  display: block;
  float: none;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: -10px;
}

 

Which gives me this:

[Mattaton]

@hernandito

Okay. Sorry to blow things up with css code. Last tweak, I hope. 🙂

I realized that the left: 0 and right: 0 only worked on folders with enough container children to fill the width of the pane. Othwerwise it dropped back into flow with the unexpanded folders. That's fixed and I used a calc() to add 10px to the 100% width.

 

I also refactored some code and cleaned things up. This should work pretty solid. I don't have any folders on my VMs, but this should style that area to match the docker pane with a few tweaks.

 

/* Apply border-box to all elements inside the docker and vm panes */
#docker_view *,
#vm_view * {
  box-sizing: border-box;
}

/* Add a padding left to the entire docker and vm icon area */
#docker_view tr:nth-child(2) td,
#vm_view tr:nth-child(2) td {
  padding-left: 20px;
}

/* Expanded folder outer wrapper styles */
.folder-showcase-outer[expanded="true"] {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  margin-left: -10px; /* Overcome 20px container padding-left by giving
                      expanded folder a negative left margin */
}

/* Push expanded folder and its children to full width
and break them out of flow with non-expanded icons */
.folder-showcase-outer[expanded="true"],
.folder-showcase-outer[expanded="true"] .folder-showcase {
  float: left;
  display: block;
  width: calc(
    100% + 10px 
  ); /* Add 10px to the width to overcome negative margin */
}

/* Expanded folder header styles */
.folder-showcase-outer[expanded="true"] .folder-docker {
  position: relative; /* Needed for absolute positioning of expanded arrow icon */
  display: block;
  float: none;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0); /* transparent border for size */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Increase the size of the expanded folder's icon */
.folder-showcase-outer[expanded="true"] .folder-img-docker {
  width: 48px;
  height: 48px;
}

/* Increase the font size for the expanded folder */
.folder-showcase-outer[expanded="true"] .folder-appname-docker {
  font-size: 2rem;
}

/* Down arrow icon for the expanded folder header */
.folder-showcase-outer[expanded="true"] .folder-docker::after {
  position: absolute;
  content: "\f0d7";
  display: block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 3rem;
  right: 1rem;
  bottom: 0;
}

/* Child docker container icons "drawer" styles */
.folder-showcase-outer[expanded="true"] .folder-showcase {
  padding: 0 20px;
}

/* Hide the "started" and "stopped" text so that only
the green arrow or red square shows on containers */
#docker_view .folder-element-docker .state {
  display: none;
}

 

Edited September 16, 2023 by Mattaton

[hernandito]

1 hour ago, Mattaton said:

@hernandito

Okay. Sorry to blow things up with css code. Last tweak, I hope. 🙂

I realized that the left: 0 and right: 0 only worked on folders with enough container children to fill the width of the pane. Othwerwise it dropped back into flow with the unexpanded folders. That's fixed and I used a calc() to add 10px to the 100% width.

 

I also refactored some code and cleaned things up. This should work pretty solid. I don't have any folders on my VMs, but this should style that area to match the docker pane with a few tweaks.

 

/* Apply border-box to all elements inside the docker and vm panes */
#docker_view *,
#vm_view * {
  box-sizing: border-box;
}

/* Add a padding left to the entire docker and vm icon area */
#docker_view tr:nth-child(2) td,
#vm_view tr:nth-child(2) td {
  padding-left: 20px;
}

/* Expanded folder outer wrapper styles */
.folder-showcase-outer[expanded="true"] {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  margin-left: -10px; /* Overcome 20px container padding-left by giving
                      expanded folder a negative left margin */
}

/* Push expanded folder and its children to full width
and break them out of flow with non-expanded icons */
.folder-showcase-outer[expanded="true"],
.folder-showcase-outer[expanded="true"] .folder-showcase {
  float: left;
  display: block;
  width: calc(
    100% + 10px 
  ); /* Add 10px to the width to overcome negative margin */
}

/* Expanded folder header styles */
.folder-showcase-outer[expanded="true"] .folder-docker {
  position: relative; /* Needed for absolute positioning of expanded arrow icon */
  display: block;
  float: none;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0); /* transparent border for size */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Increase the size of the expanded folder's icon */
.folder-showcase-outer[expanded="true"] .folder-img-docker {
  width: 48px;
  height: 48px;
}

/* Increase the font size for the expanded folder */
.folder-showcase-outer[expanded="true"] .folder-appname-docker {
  font-size: 2rem;
}

/* Down arrow icon for the expanded folder header */
.folder-showcase-outer[expanded="true"] .folder-docker::after {
  position: absolute;
  content: "\f0d7";
  display: block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 3rem;
  right: 1rem;
  bottom: 0;
}

/* Child docker container icons "drawer" styles */
.folder-showcase-outer[expanded="true"] .folder-showcase {
  padding: 0 20px;
}

/* Hide the "started" and "stopped" text so that only
the green arrow or red square shows on containers */
#docker_view .folder-element-docker .state {
  display: none;
}

 

 

this is fantastic…. Awesome work… can’t wait to try it… my serve is still in intensive care. Thank you!

Edited September 16, 2023 by hernandito

[Masterwishx]

1 hour ago, Mattaton said:

@hernandito

Okay. Sorry to blow things up with css code. Last tweak, I hope. 🙂

I realized that the left: 0 and right: 0 only worked on folders with enough container children to fill the width of the pane. Othwerwise it dropped back into flow with the unexpanded folders. That's fixed and I used a calc() to add 10px to the 100% width.

 

I also refactored some code and cleaned things up. This should work pretty solid. I don't have any folders on my VMs, but this should style that area to match the docker pane with a few tweaks.

 

/* Apply border-box to all elements inside the docker and vm panes */
#docker_view *,
#vm_view * {
  box-sizing: border-box;
}

/* Add a padding left to the entire docker and vm icon area */
#docker_view tr:nth-child(2) td,
#vm_view tr:nth-child(2) td {
  padding-left: 20px;
}

/* Expanded folder outer wrapper styles */
.folder-showcase-outer[expanded="true"] {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
  margin-left: -10px; /* Overcome 20px container padding-left by giving
                      expanded folder a negative left margin */
}

/* Push expanded folder and its children to full width
and break them out of flow with non-expanded icons */
.folder-showcase-outer[expanded="true"],
.folder-showcase-outer[expanded="true"] .folder-showcase {
  float: left;
  display: block;
  width: calc(
    100% + 10px 
  ); /* Add 10px to the width to overcome negative margin */
}

/* Expanded folder header styles */
.folder-showcase-outer[expanded="true"] .folder-docker {
  position: relative; /* Needed for absolute positioning of expanded arrow icon */
  display: block;
  float: none;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0); /* transparent border for size */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

/* Increase the size of the expanded folder's icon */
.folder-showcase-outer[expanded="true"] .folder-img-docker {
  width: 48px;
  height: 48px;
}

/* Increase the font size for the expanded folder */
.folder-showcase-outer[expanded="true"] .folder-appname-docker {
  font-size: 2rem;
}

/* Down arrow icon for the expanded folder header */
.folder-showcase-outer[expanded="true"] .folder-docker::after {
  position: absolute;
  content: "\f0d7";
  display: block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: 3rem;
  right: 1rem;
  bottom: 0;
}

/* Child docker container icons "drawer" styles */
.folder-showcase-outer[expanded="true"] .folder-showcase {
  padding: 0 20px;
}

/* Hide the "started" and "stopped" text so that only
the green arrow or red square shows on containers */
#docker_view .folder-element-docker .state {
  display: none;
}

 

 

Thanks, its really cool looking in dashboard

[Mattaton]

18 minutes ago, hernandito said:

this is fantastic…. Awesome work… can’t wait to try it… my serve is still in intensive care. Thank you!

Glad to help!

Ugh. I recall you saying you were into some data recovery. Sorry, man. 😕