[Plugin] FolderView

[Mattaton]

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:

 

[scolcipitato]

20 minutes ago, hernandito said:

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

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.

 

9 minutes ago, Mattaton said:

26 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?

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.

[Mattaton]

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

[hernandito]

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

 

Tue enough... I was looking at the whole thing as Stand Alone user experience. For one, I am rarely in the dashboard. I'm normally on the Docker tab. It's nice to see all the great dockers up and running; knowing they are working for me.

 

[hernandito]

@scolcipitato

 

Hi, I am trying to do tweaks to the Advanced context menu (with the graphs and such). Does it react to items in the Tooltipser elements inserted in custom-docker css?

 

I try this and it does not respond:

 

==========================================
Advanced Docker ToolTip Box
==========================================
div.tooltipster-docker-folder {
	border: 1px solid #999999 !important;
	-webkit-box-shadow: 1px 1px 10px 3px #D1D1D1;
	box-shadow: 1px 1px 10px 3px #D1D1D1;
}

 

[hernandito]

Some Tooltipster items are common to the regular docker view. Would you consider making some items in there have their unique classes?

 

Thanks.

[scolcipitato]

4 minutes ago, hernandito said:

@scolcipitato

 

Hi, I am trying to do tweaks to the Advanced context menu (with the graphs and such). Does it react to items in the Tooltipser elements inserted in custom-docker css?

 

I try this and it does not respond:

 

==========================================
Advanced Docker ToolTip Box
==========================================
div.tooltipster-docker-folder {
	border: 1px solid #999999 !important;
	-webkit-box-shadow: 1px 1px 10px 3px #D1D1D1;
	box-shadow: 1px 1px 10px 3px #D1D1D1;
}

 

I had similar issue when creating the stock css, you don't really want to style the root element.

.tooltipster-docker-folder > .tooltipster-box {
	border: 1px solid #999999 !important;
	-webkit-box-shadow: 1px 1px 10px 3px #D1D1D1;
	box-shadow: 1px 1px 10px 3px #D1D1D1;
}

 

[hernandito]

Apologies some item are responding... I was updating the Dashboard custom css.

 

 

It would be great to make the Docker Icon and the Docker Name both larger. Maybe add some padding below the top light gey box. Right now they have the same class as the regular items behind.

[hernandito]

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

[Mattaton]

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.

[hernandito]

32 minutes ago, Mattaton said:

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.

 

I missed this response... on my own I got this:

 

 

With this code:

 

/* 
==========================================
Advanced Docker ToolTip Box
==========================================
*/
div.tooltipster-content {
	border: 1px solid #888888 !important;
	-webkit-box-shadow: 1px 1px 10px 3px #D1D1D1;
	box-shadow: 1px 1px 10px 3px #999999;
	padding: 8px !important;
	border-radius: 10px;
	background-color: white;
}


div.tooltipster-content img.img, i.img {
  width: 58px !important;
  height: 58px !important;
  padding-left: 10px;
  font-size: 2.3rem;
  font-weight: bold;
}

div.tooltipster-content div.preview-actual-name {
  padding-left: 5px;
}

div.tooltipster-content span.appname {
  font-size: 2.3rem;
  font-weight: bold;
}

div.tooltipster-content div.info-ct {
  padding-right: 30px;
}

div.tooltipster-content div.second-row {
  padding-top: 17px;
}

div[id*='info-ports-'] {
	padding-top: 10px !important;
	background-color: #fff7eb !important;
	padding-left: 10px;
	color: #486dba !important;
	border: 1px solid #d6d6d6 !important;
}
 
 div[id*='info-volumes-'] {
  padding-top: 10px !important;
  background-color: #fff7eb !important;
  padding-left: 10px;
  color: #486dba !important;
  border: 1px solid #d6d6d6 !important;
}
 
 div.tooltipster-content canvas {
  border: 1px solid #e1e1e1;
  padding: 2px;
}

div.tooltipster-content div.preview-name {
 border-right: 1px solid #c2c2c2 !important;
}

 

Does this still violate the Tooltipster root?

 

 

[hernandito]

Only problem w/ mine are if one has long Docker names. I keep mine short. I guess users can tweak.

[hernandito]

Would the below also be altering the toooltipster root?

 

div[id*='tooltipster-'] div.tooltipster-content {
	border: 1px solid #888888 !important;
	-webkit-box-shadow: 1px 1px 10px 3px #D1D1D1;
	box-shadow: 1px 1px 10px 3px #999999;
	padding: 8px !important;
	border-radius: 10px;
	background-color: white;
}

 

[Mattaton]

20 minutes ago, hernandito said:

Would the below also be altering the toooltipster root?

 

div[id*='tooltipster-'] div.tooltipster-content {
	border: 1px solid #888888 !important;
	-webkit-box-shadow: 1px 1px 10px 3px #D1D1D1;
	box-shadow: 1px 1px 10px 3px #999999;
	padding: 8px !important;
	border-radius: 10px;
	background-color: white;
}

 

I'm not sure how it's used elsewhere in unRAID, so I don't know if this breaks something or not. This is still the toolstipster, though. Like I said, that is the element with the border, so there's no real way to get around styling it for the border (and shadow)...

But, you can style the .preview-outbox for your padding and background color.

 

Sorry, I had some other things to get done today, so I'm not focused on this at the moment. I'll look back at what you've accomplished later tonight.

Edited September 24, 2023 by Mattaton

[hernandito]

OK... Don't freak out... don't shoot me... I was just daydreaming and inspired by the Advanced View. This is only a Photoshop mock up, a lot of things would need to be designed/compacted/adjusted. This would be an alternative view to the Docker Folder. It would allow you to group Dockers that work together with each other and see the how they perform at the same time. Could add a network tab for download/upload... Transcoding in Plex, while downloading in Sab.

 

Maybe this is not FolderView, but some other plug-in, call it DockerCards? 

 

Maybe you can get the same thing from one of those Grafana setups.

 

Edited September 24, 2023 by hernandito

[PilaScat]

Mine have some problems, latest version, I use dark reader dark theme, stats aren't visible and box is too big

[Masterwishx]

7 hours ago, PilaScat said:

Mine have some problems, latest version, I use dark reader dark theme, stats aren't visible and box is too big

 

Statistic not working if other pages than docker page is opened , its some unraid bug, i opened issue for this on github.

Check the count of your ports or volume mapping .

The box is big when you have many ports like this:

 

 

[Mattaton]

Updated dark mode advanced context menu. Color scheme updated for stock unRAID.

 

Most users will only need to tweak this section of variables to match their own color scheme:

/* Color Scheme - Edit to your preferences */
  --advc-cscheme-accent1: #ff8c2f; /* Main accent color */
  --advc-cscheme-accent2: #2cabe3; /* Secondary accent color */
  --advc-cscheme-light1: #ffffff; /* Light */
  --advc-cscheme-light2: #cccccc; /* Lighter */
  --advc-cscheme-light3: #a1a1a1; /* Lightest */
  --advc-cscheme-dark1: #212121; /* Dark */
  --advc-cscheme-dark2: #1c1b1b; /* Darker */
  --advc-cscheme-dark3: #191818; /* Darkerer */
  --advc-cscheme-dark4: #000000; /* Darkest */

 

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

This is a branch of my main Custom CSS. The Advanced Context Menu Dark Mode styles are at the bottom if you already have styles in place for the main docker table that you don't want to overwrite.

 

Edited September 25, 2023 by Mattaton

[Masterwishx]

1 hour ago, Mattaton said:

This is a branch of my main Custom CSS. The Advanced Context Menu Dark Mode styles are at the bottom if you already have styles in place for the main docker table that you don't want to overwrite.

Many Thanks ,its Super cool looking Dark Mode

[actunr]

I cannot seem to figure out how to reorder the folders themselves on the Docker tab. Reordering dockers within a folder is fine but what about the folders.

[scolcipitato]

Just now, actunr said:

I cannot seem to figure out how to reorder the folders themselves on the Docker tab. Reordering dockers within a folder is fine but what about the folders.

Take a look at the pinned comments.

[SimonF]

Just now, actunr said:

I cannot seem to figure out how to reorder the folders themselves on the Docker tab. Reordering dockers within a folder is fine but what about the folders.

Have you clicked on padlock to unlock and allow movement?

[actunr]

7 minutes ago, scolcipitato said:

Take a look at the pinned comments.

Thank you, totally glazed over it.

 

7 minutes ago, SimonF said:

Have you clicked on padlock to unlock and allow movement?

Got it, thanks.

[scolcipitato]

I'm getting this out before the plugin update, so people will read it. The new version will change how the custom CSS works and will introduce custom scripts for at least the docker tab (I need to work a couple of things out on the dashboard)

The new system will not work with current custom CSS file, no need to worry, all you need to do is rename the files.

 

The new system will work with filenames, you can make a file specific for a page (dashboard, docker, vm) by naming the file SOMETHING.NAME_OF_THE_PAGE.(css/js) where something is what you want. The plugin won't check that, but it should be there, NAME_OF_THE_PAGE is the name of the page (dashboard, docker, vm)

 

Ex.

scolcipitato.docker.css will work only on the docker tab.

scolcipitato.dashboard-docker-vm.css will work on the dashboard, docker and vm tabs

 

The files will also be detected if inside a folder.

Ex.

test/scolcipitato.docker.css will work only on the docker tab.

test/scolcipitato.dashboard-docker-vm.css will work on the dashboard, docker and vm tabs

[Mattaton]

14 minutes ago, scolcipitato said:

The new system will work with filenames, you can make a file specific for a page (dashboard, docker, vm) by naming the file SOMETHING.NAME_OF_THE_PAGE.(css/js) where something is what you want. The plugin won't check that, but it should be there, NAME_OF_THE_PAGE is the name of the page (dashboard, docker, vm)

Dude! You are awesome! This is so good I would like this post more than once if I could.

My CSS files have gotten kinda long and this will allow me to break pieces out so people can pick and choose what they want.

Ah man. Just awesome.

Thank you