etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Initial support for allowing users to change their UI skin.

This commit is contained in:
will 2011-01-11 12:08:37 -08:00
parent f60aedaa95
commit 5c275827ad
3 changed files with 100 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ui/css/main.css
View File

@ -268,7 +268,7 @@ a:hover {
.loginoptions_dropdown {
width:91px;
height:100px;
height:auto;
float:left;
position:absolute;
background:#FFF url(../images/actiondd_bg.gif) repeat-x top left;
@ -282,13 +282,13 @@ a:hover {
width:73px;
height:auto;
float:left;
margin:3px 0 0 9px;
margin:3px 0 0 5px;
padding:0 0 10px 0;
list-style:none;
}
.loginoptions_dropdown li{
width:68px;
width:80px;
height:auto;
float:left;
color:#333;
@ -297,7 +297,7 @@ a:hover {
background:none;
border-bottom:1px dotted #999;
margin:0;
padding:5px 0 3px 5px;
padding:5px 0 3px 0px;
list-style:none;
overflow:hidden;
}

42
ui/index.jsp
View File

@ -108,33 +108,26 @@
<div class="loginoptions_panel">
<div class="loginoptions_box">
<div class="loginoptions_dropdownbutton">
<p>English</p>
<div id="lang_button" class="loginoptions_dropdownbutton">
<p id="lang_name">English</p>
<div class="loginoptions_ddarrow"></div>
<div class="loginoptions_dropdown" style="display:none;">
<ul>
<li> Fran&ccedil;ais </li>
<li> 汉语 </li>
<li> Fran&ccedil;ais </li>
<li> 汉语 </li>
</ul>
<div id="lang_menu" class="loginoptions_dropdown" style="display:none;">
<ul>
<li id="lang_default"> English </li>
<li id="lang_chinese"> Chinese </li>
</ul>
</div>
</div>
</div>
<div class="loginoptions_dropdownbutton">
<p>Default Theme</p>
<div id="theme_button" class="loginoptions_dropdownbutton">
<p id="theme_name">Default Theme</p>
<div class="loginoptions_ddarrow"></div>
<div class="loginoptions_dropdown" style="display:none;">>
<ul>
<li> Custom 1 </li>
<li> Custom 2 </li>
<li> Custom 3 </li>
<li> Custom 4 </li>
</ul>
</div>
<div id="theme_menu" class="loginoptions_dropdown" style="display:none;">
<ul>
<li id="theme_default">Default Theme</li>
<li id="custom/custom1/css/custom1.css">Custom - Grey</li>
</ul>
</div>
</div>
</div>
</div>
@ -163,6 +156,7 @@
<p>
<fmt:message key="label.welcome"/> <span id="main_username"></span>, <a href="#" id="main_logout"><fmt:message key="label.logout"/></a>
</p>
<!--
<div class="language_dropdownpanel">
<div class="language_icon"></div>
<p>English</p>
@ -175,7 +169,7 @@
</ul>
</div>
</div>
-->
</div>
</div>
</div>

79
ui/scripts/cloud.core.init.js
View File

@ -18,7 +18,7 @@
// Default password is MD5 hashed. Set the following variable to false to disable this.
var md5Hashed = true;
$(document).ready(function() {
$(document).ready(function() {
function initUI() {
var context = $.urlParam('lp');
if (context != null) {
@ -39,6 +39,83 @@ var md5Hashed = true;
}
}
// Setup custom theme
var $currentTheme = null;
if ($.cookie("theme") != null) {
$currentTheme = $("<link>").appendTo("head").attr({
rel: "stylesheet",
type: "text/css",
href: $.cookie("theme")
});
$("#theme_button p").text($.cookie("theme_name"));
}
$("#theme_button").click(function(event) {
var $menu = $(this).find("#theme_menu");
if ($menu.css("display") == "none") {
$menu.slideDown(500);
} else {
$menu.slideUp(500);
}
});
$("#theme_button #theme_menu").click(function(event) {
var target = $(event.target);
var id = target.attr("id");
if ($currentTheme != null) {
$currentTheme.remove();
$currentTheme = null;
}
var name = "Default Theme";
if (id != "theme_default") {
$currentTheme = $("<link>").appendTo("head").attr({
rel: "stylesheet",
type: "text/css",
href: id
});
name = target.text();
$.cookie("theme_name", name)
$.cookie("theme", id);
} else {
if ($currentTheme != null) {
$currentTheme.remove();
}
$.cookie("theme", null);
$.cookie("theme_name", null);
name = "Default Theme";
}
$("#theme_button p").text(name);
$(this).hide();
return false;
});
// Setup Language option
$("#lang_button").click(function(event) {
var $menu = $(this).find("#lang_menu");
if ($menu.css("display") == "none") {
$menu.slideDown(500);
} else {
$menu.slideUp(500);
}
});
$("#lang_button #lang_menu").click(function(event) {
var target = $(event.target);
var id = target.attr("id");
var name = "English";
switch (id) {
case "lang_chinese" :
// Change Language here
name = "Chinese";
break;
default:
name = "English";
break;
}
$("#lang_button p").text(name);
$(this).hide();
return false;
});
// Setup drag and slide for the main UI
$("#west_panel").resizable({
minWidth: 221,