The DotNetNuke Control Panel is generally positioned at the top of a page (although it can be positioned anywhere). It is displayed if a user has administrative rights to a page. After the initial layout of a page, the Control Panel is not often needed, but it continues to take up valuable screen real-estate. I saw a recent discussion on this issue in the ASP.net forums, and decided that it presents an interesting U.I. challenge. (Turns out it really isn’t much of a challenge.)
At Bryan Andrews’ suggestion, I had actually developed a script modeled after the Windows Terminal Services Client collapsible admin bar some months back. The bar is visible at the top, but rolls up after a few seconds. I posted the script to the Core Team forum, but unfortunately, there was no interest.
Anyway, getting back to the Control Panel solution. I like the Terminal Services client concept and modeled my solution after it. One of my design goals was to keep things really simple and not require any external images or the like.
My solution works as follows:
1) My script block needs to be inserted into any DNN skin, replacing the existing element with id=”ControlPanel”
2) It renders the Control Panel at the top of the page (coordinates 0,0). The Control Panel is initially hidden and is represented by a 5px tall red bar.
3) Move your mouse over the bar and the Control Panel is displayed over page content. This is an important difference from the standard Control Panel as the page content remains in place and does not scroll down.
4) When the mouse cursors is moved over the red bar one more time, the Control Panel smoothly rolls up.
Here is the code. Just paste it into a DNN skin ascx file, taking care to replace the element with id=”ControlPanel” that should already be present in the file.
<!-- Begin collapsible Control panel code -->
<script language="Javascript">
var rollUp = false;
function collapseElement(objId)
{
o = document.getElementById(objId);
h = parseInt(o.style.height);
if (h > 6)
{
h--;
o.style.height= h + "px";
window.setTimeout("collapseElement('" + objId + "')",5);
}
else
rollUp = false;
}
function displayElement(height)
{
obj = document.getElementById("<%= ControlPanel.ClientID %>");
if (rollUp)
collapseElement("<%= ControlPanel.ClientID %>");
else
{
rollUp = true;
obj.style.height = height;
}
}
</script>
<style>
.ControlPanelHeader
{
height:5px;
width:100%;
background-color:#cc0000;
padding-top:5px;
overflow:hidden
}
.RollUpControlPanel
{
position:absolute;
top:0px;
left:0px;
z-Index:1000;
height:5px;
width:100%;
overflow: hidden;
}
</style>
<div class="RollUpControlPanel" id="ControlPanel" runat="server">
<div class="ControlPanelHeader" onmouseover="displayElement('110px')"> </div>
</div>
<!-- End collapsible control panel code -->