[Plugin] Custom Tab

[nhm91135]

6 hours ago, Squid said:

Not all .page files (built in pages) are compatible with being able to be displayed as a tab due to their design.

 

But, in this particular case, why would you want Docker Containers to be shown as a tab when they're already shown in the existing Docker tab???

I was hoping that it would be the Containers box from the Dashboard because when trying to open a WebGui from my phone, I have to zoom in on the Container box but then the Select List to open the gui opens off of the screen to the left, so I have to zoom out, a bit, hopefully enough to see the select list.   

I understand now that Custom Tab is not for that.
Still, having the container box from dashboard by itself on a page would be amazing.

We did something similar in our own software, maybe my mind is node locked, Thanks.

Edited October 6, 2023 by nhm91135

[Squid]

8 hours ago, nhm91135 said:

Dashboard

Dashboard works completely different

[dixtdf]

I have done everything for a better experience, and I hope not to be held accountable for using the following methods
I hope the author of 'Custom Tab' can see this code, which implements adaptive window size The current form can only be set to a fixed size and is not friendly for devices with different resolutions I hope to add an adaptive window size option, and I can only temporarily resolve it this way until further updates arrive

// ==UserScript==
// @name         Unraid Custom Tab自适应窗体大小
// @namespace    https://github.com/dixtdf/Unraid-Custom-Tab-Adaptive-Window-Size
// @version      1.0
// @description  窗体宽高随意设置即可
// @author       dixtdf
// @match        http*://*/*
// @icon         https://upload.forums.unraid.net/live/monthly_2017_05/customlarge.png.e0cb690d73cea725de6927fc0abce6a7.png
// @grant        none
// @license      MIT
// ==/UserScript==

(function() {
    function onWindowResize() {
        let elementsByClassName = window.document.getElementsByClassName("content shift");
        if (elementsByClassName.length>0){
            let computedStyle = window.getComputedStyle(elementsByClassName[0].querySelector(".title"));
            if (computedStyle){
                let height = window.innerHeight-(
                    window.document.getElementById("header").offsetHeight
                    +window.document.getElementById("menu").offsetHeight
                    +(window.document.getElementById("footer")!=null?window.document.getElementById("footer").offsetHeight:26)
                    +parseInt(computedStyle.getPropertyValue("height").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-top").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-bottom").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("margin-top").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("margin-bottom").replace("px",""), 10)
                    +30
                )

                let width=parseInt(computedStyle.getPropertyValue("width").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-left").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-right").replace("px",""), 10)

                let iframeElement = window.document.querySelector(".content.shift iframe");
                iframeElement.style.width = width+"px";
                iframeElement.style.height = height+"px";
                iframeElement.style.border = "0px";
            }
        }
    }

    window.addEventListener("resize", function() {
        clearTimeout(window.resizedFinished);
        window.resizedFinished = setTimeout(onWindowResize, 200);
    });

    onWindowResize();
})();

 

Of course, you can manually edit/usr/local/emhttp/plugins/customtabtemp/View *. page to insert the following code into the last line, which can achieve the same effect

<script>
    function onWindowResize() {
        let elementsByClassName = window.document.getElementsByClassName("content shift");
        if (elementsByClassName.length>0){
            let computedStyle = window.getComputedStyle(elementsByClassName[0].querySelector(".title"));
            if (computedStyle){
                let height = window.innerHeight-(
                    window.document.getElementById("header").offsetHeight
                    +window.document.getElementById("menu").offsetHeight
                    +(window.document.getElementById("footer")!=null?window.document.getElementById("footer").offsetHeight:26)
                    +parseInt(computedStyle.getPropertyValue("height").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-top").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-bottom").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("margin-top").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("margin-bottom").replace("px",""), 10)
                    +30
                )

                let width=parseInt(computedStyle.getPropertyValue("width").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-left").replace("px",""), 10)
                    +parseInt(computedStyle.getPropertyValue("padding-right").replace("px",""), 10)

                let iframeElement = window.document.querySelector(".content.shift iframe");
                iframeElement.style.width = width+"px";
                iframeElement.style.height = height+"px";
                iframeElement.style.border = "0px";
            }
        }
    }

    window.addEventListener("resize", function() {
        clearTimeout(window.resizedFinished);
        window.resizedFinished = setTimeout(onWindowResize, 200);
    });

    onWindowResize();
</script>

 

Edited October 17, 2023 by dixtdf

[cinereus]

On 6/18/2017 at 4:43 PM, Squid said:

Added in support for custom tabs when using 6.4 RC3+ and the Azure / Gray themes

 

Dynamix utilizes font-awesome for the new themes.  A new entry on each Custom Tab setting will allow you to enter in the appropriate font-awesome code for the icon.

 

This is a list of the font-awesome codes:  http://fontawesome.io/cheatsheet/

 

When looking at it, you'll see entries like:

 

fa-envelope [] 

 

What you need to enter for this particular icon is f0e0  Entering in an invalid code may result in strange results from dynamix (but doesn't appear to cause any crashing of unRaid's UI)

 

 

Icons don't work...