nhm91135 Posted October 6, 2023 Share Posted October 6, 2023 (edited) 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 Quote Link to comment
Squid Posted October 6, 2023 Author Share Posted October 6, 2023 8 hours ago, nhm91135 said: Dashboard Dashboard works completely different Quote Link to comment
dixtdf Posted October 17, 2023 Share Posted October 17, 2023 (edited) 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 1 Quote Link to comment
cinereus Posted December 23, 2023 Share Posted December 23, 2023 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... Quote Link to comment
FutyMax Posted June 29 Share Posted June 29 Hey, just a heads up. The link that points to this post in the plugin configuration is broken. In the text "Tab Position (see HERE)" the link in "HERE" points to https://lime-technology.com/forums/topic/57109-plugin-custom-tab/ and should be https://forums.unraid.net/topic/57109-plugin-custom-tab/ instead (because from the lime-technology domain it gets redirected to https://unraid.net/forums/topic/57109-plugin-custom-tab/ having "forums" as a page instead of a subdomain) Quote Link to comment
ronia Posted July 8 Share Posted July 8 On 10/16/2023 at 11:23 PM, dixtdf said: 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> Thanks. I used your solution and it worked great. Another thing you can do is create a file: /boot/config/plugins/customtab/resize.php Then paste the full contents of the <script>...</script> into that file. Then replace this line in /usr/local/emhttp/plugins/customtab/scripts/createTab.php line 121 (the logic that affects 'URL' type tabs): file_put_contents("/usr/local/emhttp/plugins/customtabtemp/$name".mt_rand().".page",$page); Replace with: $mtname = "$name".mt_rand(); file_put_contents("/usr/local/emhttp/plugins/customtabtemp/$mtname.page",$page); file_put_contents("/usr/local/emhttp/plugins/customtabtemp/$mtname.page", file_get_contents('/boot/config/plugins/customtab/resize.php'), FILE_APPEND | LOCK_EX); Bonus points, you can replace the file within /boot/config/plugins/customtab/customtab-[date stamp].txz and re-tar the file and I believe this should make it persistent across reboots. Quote Link to comment
dixtdf Posted July 8 Share Posted July 8 1 hour ago, ronia said: Thanks. I used your solution and it worked great. Another thing you can do is create a file: /boot/config/plugins/customtab/resize.php Then paste the full contents of the <script>...</script> into that file. Then replace this line in /usr/local/emhttp/plugins/customtab/scripts/createTab.php line 121 (the logic that affects 'URL' type tabs): file_put_contents("/usr/local/emhttp/plugins/customtabtemp/$name".mt_rand().".page",$page); Replace with: $mtname = "$name".mt_rand(); file_put_contents("/usr/local/emhttp/plugins/customtabtemp/$mtname.page",$page); file_put_contents("/usr/local/emhttp/plugins/customtabtemp/$mtname.page", file_get_contents('/boot/config/plugins/customtab/resize.php'), FILE_APPEND | LOCK_EX); Bonus points, you can replace the file within /boot/config/plugins/customtab/customtab-[date stamp].txz and re-tar the file and I believe this should make it persistent across reboots. @ronia I actually made this plugin and it worked better, but it seems that officials don't want individuals to develop plugins and I couldn't get it on the shelf, so I gave up on continuing to optimize it. If you're interested, give it a try, it hasn't been updated in over half a year https://github.com/dixtdf/taglib/blob/master/plugins/taglib.plg https://github.com/dixtdf/taglib/blob/master/releases/taglib-2023.11.30.txz Quote Link to comment
primeval_god Posted July 8 Share Posted July 8 (edited) 6 hours ago, dixtdf said: @ronia I actually made this plugin and it worked better, but it seems that officials don't want individuals to develop plugins and I couldn't get it on the shelf, so I gave up on continuing to optimize it. Not sure what you mean here? Your app does appear to be available via community applications. Edited July 8 by primeval_god Quote Link to comment
dixtdf Posted July 10 Share Posted July 10 (edited) @primeval_godIs that right? Then I'll try it in a while. I've been so busy with work lately. Edited July 10 by dixtdf Quote Link to comment
wassereimer Posted July 10 Share Posted July 10 @dixtdf I can confirm that I can find the Plugin. Installation also works. I just can't set it up, because it's in Chinese. 😅 Also as an information: After installation on the App Site, if you click on Actions and then Settings: You land on a blank Page. Going through the Settings Page to your Plugin works. Would be great if the Plugin would be available in English. 🙂 Quote Link to comment
dixtdf Posted July 10 Share Posted July 10 @wassereimerIf I can get it on the shelf properly, I'll add internationalization in the future, I didn't continue to develop it because I didn't find a way to get it on the shelf at the time, but now maybe you can use Chrome/Edge for webpage translation for temporary use!By the way can someone tell me how to apply for a shelf? Quote Link to comment
jcofer555 Posted July 25 Share Posted July 25 is it possible to make rows with the tabs rather than just extending the row of current tabs? screenshot for a rudimentary example Quote Link to comment
danioj Posted July 25 Share Posted July 25 (edited) Nice Plugin, thank you. Dead link on the settings page: Tab Position (see HERE) Edited July 25 by danioj Quote Link to comment
dixtdf Posted August 5 Share Posted August 5 (edited) On 7/10/2024 at 4:29 PM, wassereimer said: @dixtdf I can confirm that I can find the Plugin. Installation also works. I just can't set it up, because it's in Chinese. 😅 Also as an information: After installation on the App Site, if you click on Actions and then Settings: You land on a blank Page. Going through the Settings Page to your Plugin works. Would be great if the Plugin would be available in English. 🙂 @wassereimerYou might want to try updating it, it's now compatible with multiple languages, the language might not be perfect yet, fix it for the next version and experience it first, it works better than before because I refactored it using VUE Sorry it's late, I've been really busy with work. By the way, please backup /boot/config/plugins/taglib/taglib.json before updating, as the structure has been changed Edited August 5 by dixtdf Quote Link to comment
wassereimer Posted August 6 Share Posted August 6 (edited) @dixtdfThe Settings-Page from the Plugin stays blank. In the Firefox Dev-Console i've got an error. Edited August 6 by wassereimer Quote Link to comment
dixtdf Posted August 6 Share Posted August 6 @wassereimerI didn't find the issue in ubuntu firefox-128 version, I'm using fetch api, theoretically Firefox 39+ can use that api, you can try refreshing the page and then reclick on settings->taglib. Plugins->taglib->settings The link to the jump is not correct, I don't know why triggering it here carries /Apps Quote Link to comment
wassereimer Posted August 7 Share Posted August 7 (edited) @dixtdf I'm on Firefox 129 on Windows. I reinstalled it and got to the Plugin-Settings though settings->taglib. If I do a hard-refresh to clear the Browser-Cache, I can see a flicker from something - nothing more. firefox_2024-08-07_18-46-04.mp4 Edited August 7 by wassereimer Quote Link to comment
dixtdf Posted August 8 Share Posted August 8 @wassereimerIt doesn't seem to be reproducible, I'm trying to upgrade unraid to 6.12.11, hopefully I'll be able to find the problem! Quote Link to comment
motoflyer Posted August 11 Share Posted August 11 Unraid Version: 6.12.11 custom tab version installed: 2023.02.26 error: creating once again the same tab name after deleting it, it shows after the name a "_" Is there a solution for it? see below picture: Quote Link to comment
foo_fighter Posted September 7 Share Posted September 7 Is it possible to implement a tab that is a pulldown menu of URLs? I don't have enough real estate for many tabs but would like to add quick short cuts to Immich, Syncthing, Paperless, Frigate, Nextclock and a bunch of other dockers on the tab menu for convenience. Quote Link to comment
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.