diff --git a/xCAT-UI/css/login.css b/xCAT-UI/css/login.css new file mode 100644 index 000000000..402ba73c2 --- /dev/null +++ b/xCAT-UI/css/login.css @@ -0,0 +1,60 @@ +/*--- Body and content ---*/ +body { + background: #1C1C1C; + font: 12px verdana, arial, helvetica, sans-serif; +} + +/*--- Login dialog ---*/ +#login { + width: 600px; + margin: 0px auto; +} + +#login table { + border: solid 0px; + margin: 0px auto; +} + +#login td { + width: 100px; + height: 35px; + color: #0078AE; + font-weight: bold; + border: solid 0px; +} + +#login input { + font: 12px verdana, arial, helvetica, sans-serif; + width: 200px; + border: solid 1px #0078AE; + padding: 5px; +} + +#login label{ + font: bold 12px verdana, arial, helvetica, sans-serif; +} + +#login_status { + font: bold 12px verdana, arial, helvetica, sans-serif; +} + +#login button { + font: bold 12px verdana, arial, helvetica, sans-serif; + width: 90px; + float: right; +} + +#login_form { + background-color: #f5f5f5; + height: 280px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; +} + +#loginfo { + margin: 5px 0px; + text-align: right; + color: #f5f5f5; + font-weight:bold; +} \ No newline at end of file diff --git a/xCAT-UI/css/style.css b/xCAT-UI/css/style.css index 55247c9c7..6b22c82a6 100644 --- a/xCAT-UI/css/style.css +++ b/xCAT-UI/css/style.css @@ -31,63 +31,15 @@ margin: 0px; } -/*--- Login dialog ---*/ -#logdialog { - font: 12px verdana, arial, helvetica, sans-serif; - width: 600px; -} - -#logdialog table { - border: solid 0px; - margin: 0px auto; -} - -#logdialog td { - width: 100px; - height: 35px; - color: #0078AE; - font-weight: bold; - border: solid 0px; -} - -#logdialog input { - width: 210px; - border: solid 1px #0078AE; - font-size: 12px; - padding-bottom: 5px; -} - -#logdialog p { - font-size: 18px; -} - -#logdialog button { - font-weight: bold; - width: 90px; - float: right; -} - -#loginput { - background-color: #f5f5f5; - height: 280px; -} - -#loginfo { - margin: 5px 0px; - text-align: right; - color: #f5f5f5; - font-weight:bold; -} - /*--------------- Header ---------------*/ #header { height: 39px; width: 1000px; margin: 0px auto; background: url(../images/jquery/default/ui-bg_highlight-soft_75_2191c0_1x100.png) 50% 50% repeat-x; - -moz-border-radius: .5em; - -webkit-border-radius: .5em; - border-radius: .5em; + -moz-border-radius: .3em; + -webkit-border-radius: .3em; + border-radius: .3em; } #header ul { @@ -111,7 +63,7 @@ float: left; font: 14px verdana, arial, helvetica, sans-serif; font-weight: bold; - color: #2E6E9E; + color: white; padding: 11px 30px; cursor: pointer; } @@ -123,22 +75,13 @@ /* User name and log out */ #header div { float: right; -} - -#header div span { - color: #424242; - padding: 2px 15px 0px 2px; /* Top right left bottom*/ - text-align: right; - text-decoration: none; - display: block; + margin: 12px; } #header div a { - padding: 2px 15px 0px 2px; /* Top right left bottom*/ - text-align: right; + padding: 0px 6px; color: #0000FF; text-decoration: none; - display: block; cursor: pointer; } @@ -161,9 +104,9 @@ body { } .content { - -moz-border-radius: .5em; - -webkit-border-radius: .5em; - border-radius: .5em; + -moz-border-radius: .3em; + -webkit-border-radius: .3em; + border-radius: .3em; width: 1000px; min-height: 600px; margin: 10px auto; @@ -172,7 +115,7 @@ body { } #content .ui-widget-header { - border-color: #4297D7 #4297D7 #7BB642; + border-color: transparent transparent #6eac2c; border-width: 1px 1px 4px; } @@ -354,7 +297,7 @@ legend { font: 12px verdana, arial, helvetica, sans-serif; color: #424242; font-weight: bold; - padding: 10px 15px; + padding: 10px 5px; } .tab ol { @@ -387,7 +330,7 @@ legend { .sf-menu { background : none repeat scroll 0 0 #79B7E7; border :1px solid #f5f5f5; - border-radius :0.5em 0.5em 0.5em 0.5em; + border-radius :0.3em 0.3em 0.3em 0.3em; margin-bottom: 0; } @@ -423,9 +366,9 @@ legend { overflow: auto; width: auto; margin: 10px auto; - -moz-border-radius:5px; - -webkit-border-radius:5px; - border-radius:5px; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; background-color: #f5f5f5; } @@ -529,8 +472,8 @@ legend { .tab .datatable button { border: solid 1px #BDBDBD; - -moz-border-radius: .5em; - -webkit-border-radius: .5em; + -moz-border-radius: .3em; + -webkit-border-radius: .3em; padding: 5px 10px; margin: 0 10px; background-color: #D8D8D8; @@ -820,9 +763,9 @@ table a:hover { vertical-align: top; background-color: #A9D0F5; padding: 0px 0px 0px 5px; - -moz-border-radius: .5em; - -webkit-border-radius: .5em; - border-radius: .5em; + -moz-border-radius: .3em; + -webkit-border-radius: .3em; + border-radius: .3em; } .discovercurrentstep{ diff --git a/xCAT-UI/js/ui.js b/xCAT-UI/js/ui.js index 3f9381f96..94e2f69c6 100644 --- a/xCAT-UI/js/ui.js +++ b/xCAT-UI/js/ui.js @@ -452,13 +452,45 @@ function createMenu(items) { * * @return Nothing */ -function initPage() { +function initPage() { + // Load theme + var theme = $.cookie('xcat_theme'); + if (theme) { + switch (theme) { + case 'cupertino': + includeCss("css/jquery-ui-cupertino.css"); + break; + case 'dark_hive': + includeCss("css/jquery-ui-dark_hive.css"); + break; + case 'redmond': + includeCss("css/jquery-ui-redmond.css"); + break; + case 'start': + includeCss("css/jquery-ui-start.css"); + break; + case 'sunny': + includeCss("css/jquery-ui-sunny.css"); + break; + case 'ui_dark': + includeCss("css/jquery-ui-ui_darkness.css"); + break; + default: + includeCss("css/jquery-ui-start.css"); + } + } + + includeCss("css/query.dataTables.css"); + includeCss("css/superfish.css"); + includeCss("css/jstree.css"); + includeCss("css/jquery.jqplot.css"); + includeCss("css/style.css"); + // JQuery plugins includeJs("js/jquery/jquery.dataTables.min.js"); includeJs("js/jquery/jquery.form.min.js"); includeJs("js/jquery/jquery.jeditable.min.js"); includeJs("js/jquery/jquery.contextmenu.min.js"); - includeJs("js/jquery/jquery.cookie.min.js"); includeJs("js/jquery/superfish.min.js"); includeJs("js/jquery/hoverIntent.min.js"); includeJs("js/jquery/jquery.jstree.min.js"); @@ -481,12 +513,16 @@ function initPage() { includeJs("js/custom/hmc.js"); includeJs("js/custom/customUtils.js"); + // Enable settings link + $('#xcat_settings').click(function() { + openSettings(); + }); + // Get the page being loaded var url = window.location.pathname; var page = url.replace('/xcat/', ''); - var headers = $('#header ul li a'); - + // Show the page $("#content").children().remove(); if (page == 'configure.php') { @@ -544,6 +580,30 @@ function includeJs(file) { } } +/** + * Include CSS link in + * + * @param file + * File to include + * @return Nothing + */ +function includeCss(file) { + var link = $("head link[href='" + file + "']"); + + // If does not contain the link + if (!link.length) { + // Append the CSS link to + var link = $(''); + link.attr( { + type : 'text/css', + rel : 'stylesheet', + href : file + }); + + $('head').append(link); + } +} + /** * Write ajax response to a paragraph * @@ -649,3 +709,64 @@ function createIFrame(src) { return infoBar; } + + +/** + * Open dialog to set xCAT UI settings + * + * @return Nothing + */ +function openSettings() { + // Create form to add node range + var settingsForm = $('
'); + var info = createInfoBar('Select the settings you desire'); + settingsForm.append(info); + + // Create select drop down for themes + var themeFS = $('
'); + settingsForm.append(themeFS); + var legend = $('Theme'); + themeFS.append(legend); + var oList = $('
    '); + oList.append($('
  1. Cupertino
    2. ')); + oList.append($('
  2. Dark Hive
    3. ')); + oList.append($('
  3. Redmond
    4. ')); + oList.append($('
  4. Start
    5. ')); + oList.append($('
  5. Sunny
    6. ')); + oList.append($('
  6. UI Darkness
    7. ')); + themeFS.append(oList); + + if ($.cookie('xcat_theme')) { + // Select theme + oList.find('input[value="' + $.cookie('xcat_theme') + '"]').attr('checked', true); + } + + // Open form as a dialog + settingsForm.dialog({ + modal: true, + title: 'Settings', + width: 400, + buttons: { + "Ok": function(){ + // Save selected theme + var theme = $(this).find('input[name="theme"]:checked').val(); + $.cookie('xcat_theme', theme); + + // Show instructions to apply theme + $(this).empty(); + var info = createInfoBar('You will need to reload this page in order for changes to take effect'); + $(this).append(info); + + // Only show close button + $(this).dialog("option", "buttons", { + "Close" : function() { + $(this).dialog( "close" ); + } + }); + }, + "Cancel": function(){ + $(this).dialog( "close" ); + } + } + }); +} \ No newline at end of file diff --git a/xCAT-UI/js/xcatauth.js b/xCAT-UI/js/xcatauth.js index abdd36f4b..9c2bf54a6 100644 --- a/xCAT-UI/js/xcatauth.js +++ b/xCAT-UI/js/xcatauth.js @@ -6,11 +6,11 @@ $(document).ready(function() { $('#content').remove(); var winheight = document.body.clientHeight; - var diaheight = $('#logdialog').css('height'); + var diaheight = $('#login').css('height'); diaheight = diaheight.substr(0, diaheight.length - 2); diaheight = Number(diaheight); - // the window's height is to small to show the dialog + // The window's height is to small to show the dialog var tempheight = 0; if ((winheight - 50) < diaheight){ tempheight = 0; @@ -18,33 +18,33 @@ $(document).ready(function() { tempheight = parseInt((winheight - diaheight - 50) / 2); } - $('#logdialog').css('margin', tempheight + 'px auto'); + $('#login').css('margin', tempheight + 'px auto'); $('button').bind('click', function(){ authenticate(); }); - $('button').button(); + $('#login button').button(); if (document.location.protocol == "http:") { - $("#logstatus").html("You are using an unencrypted session!"); - $("#logstatus").css("color", "#ff0000"); + $("#login_status").html("You are using an unencrypted session!"); + $("#login_status").css("color", "#ff0000"); } - if ($("#username").val() == "") { - $("#username").focus(); + if ($("#login input[name='username']").val() == "") { + $("#login input[name='username']").focus(); } else { - $("#password").focus(); + $("#login input[name='password']").focus(); } // When enter is hit while in username, advance to password - $("#username").keydown(function(event) { + $("#login input[name='username']").keydown(function(event) { if (event.keyCode == 13) { - $("#password").focus(); + $("#login input[name='password']").focus(); } }); // Submit authentication if enter is pressed in password field - $("#password").keydown(function(event) { + $("#login input[name='password']").keydown(function(event) { if (event.keyCode == 13) { authenticate(); } @@ -62,9 +62,9 @@ $(document).ready(function() { */ function onlogin(data, txtStatus) { // Clear password field regardless of what happens - $("#password").val(""); + $("#login input[name='password']").val(""); if (data.authenticated == "yes") { - $("#logstatus").text("Login successful"); + $("#login_status").text("Login successful"); // Not the first time to log if ($.cookie('logonflag')){ @@ -81,8 +81,7 @@ function onlogin(data, txtStatus) { }); } else { - $("#logstatus").text("Authentication failure"); - $("#logstatus").css("color", "#FF0000"); + $("#login_status").text("Authentication failure").css("color", "#FF0000"); } } @@ -92,11 +91,11 @@ function onlogin(data, txtStatus) { * @return Nothing */ function authenticate() { - $("#logstatus").css("color", "#000000"); - $("#logstatus").html('Authenticating...'); - var passwd = $("#password").val(); + $("#login_status").css("color", "#000000"); + $("#login_status").html('Authenticating...'); + var passwd = $("#login input[name='password']").val(); $.post("lib/log.php", { - username : $("#username").val(), + username : $("#login input[name='username']").val(), password : passwd }, onlogin, "json"); } diff --git a/xCAT-UI/lib/ui.php b/xCAT-UI/lib/ui.php index 452c31b50..2846dac11 100644 --- a/xCAT-UI/lib/ui.php +++ b/xCAT-UI/lib/ui.php @@ -10,17 +10,13 @@ function loadPage() { echo ' - xCAT Console + xCAT - - - - - - + - + + '; // Header menu @@ -40,8 +36,7 @@ function loadPage() { if (isset($_SESSION['username'])){ echo "
    - User: {$_SESSION['username']} - Log out + {$_SESSION['username']} | Settings | Log out
    "; } @@ -83,19 +78,19 @@ function login() { echo ' -
    -
    +
    +
    - + - - - - + + + +

    eXtreme Cloud Administration Toolkit

    eXtreme Cloud Administration Toolkit
    -
    Open Source. EPL License
    +
    Open Source. EPL License.
    '; } ?> \ No newline at end of file