From: samhenri <samuel.guimaraes@eldorado.org.br> Signed-off-by: samhenri <samuel.guimaraes@eldorado.org.br> --- src/wok/plugins/kimchi/ui/config/tab-ext.xml | 8 +- ui/js/widgets/samples/grid.html | 4 +- ui/pages/login.html.tmpl | 186 +++++++++++----------- ui/pages/wok-ui.html.tmpl | 222 ++++++++++++++------------- 4 files changed, 225 insertions(+), 195 deletions(-) diff --git a/src/wok/plugins/kimchi/ui/config/tab-ext.xml b/src/wok/plugins/kimchi/ui/config/tab-ext.xml index 48ec9ec..415dbf1 100644 --- a/src/wok/plugins/kimchi/ui/config/tab-ext.xml +++ b/src/wok/plugins/kimchi/ui/config/tab-ext.xml @@ -3,28 +3,28 @@ <tab> <access role="admin" mode="admin"/> <access role="user" mode="byInstance"/> - + <class>guests</class> <title>Guests</title> <path>plugins/kimchi/guests.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="none"/> - + <class>templates</class> <title>Templates</title> <path>plugins/kimchi/templates.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="read-only"/> - + <class>storage</class> <title>Storage</title> <path>plugins/kimchi/storage.html</path> </tab> <tab> <access role="admin" mode="admin"/> <access role="user" mode="read-only"/> - + <class>network</class> <title>Network</title> <path>plugins/kimchi/network.html</path> </tab> diff --git a/ui/js/widgets/samples/grid.html b/ui/js/widgets/samples/grid.html index 860874f..ac667ac 100644 --- a/ui/js/widgets/samples/grid.html +++ b/ui/js/widgets/samples/grid.html @@ -57,9 +57,9 @@ input { </style> <script> function init(){ - $('#ibmers').grid({enableSorting: true}); + $('#ibmers').dataGrid({enableSorting: true}); $('input').on('keyup', function(){ - $('#ibmers').grid('filter', ($(this).val())); + $('#ibmers').dataGrid('filter', ($(this).val())); }); } </script> diff --git a/ui/pages/login.html.tmpl b/ui/pages/login.html.tmpl index 2703d02..92eb3d5 100644 --- a/ui/pages/login.html.tmpl +++ b/ui/pages/login.html.tmpl @@ -28,95 +28,109 @@ <!DOCTYPE html> <html lang="$lang.lang[0]"> <head> -<meta charset="UTF-8"> -<title>Kimchi</title> -<meta http-equiv="X-UA-Compatible" content="IE=edge"/> -<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> -<meta name="apple-mobile-web-app-capable" content="yes"> -<meta name="apple-mobile-web-app-title" content="Wok"> -<link href="images/apple-touch-icon-152.png" sizes="152x152" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-144.png" sizes="144x144" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-76.png" sizes="76x76" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-180x180.png" sizes="120x120" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed"> -<link rel="icon" type="image/png" href="images/android-chrome-192x192.png" sizes="192x192"> -<!--[if IE lte 9]><link rel="shortcut icon" href="images/favicon.ico"><![endif]--> -<link rel="shortcut icon" href="images/favicon.png"> -<meta name="application-name" content="Wok"> -<meta name="msapplication-config" content="none" /> -<meta name="msapplication-TileColor" content="#4f4f4f"/> -<meta name="msapplication-square70x70logo" content="images/tiny.png"/> -<meta name="msapplication-square150x150logo" content="images/square.png"/> -<meta name="msapplication-wide310x150logo" content="images/wide.png"/> -<meta name="msapplication-square310x310logo" content="images/large.png"/> -<link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> -<link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> -<link rel="stylesheet" href="$href('css/theme-default.min.css')"> -<script src="$href('libs/jquery/jquery.min.js')"></script> -<script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> -<script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> -<script src="$href('js/wok.min.js')"></script> -<style type="text/css"> -.topbar select { - float: right; - margin-top: 12px; - margin-right: 10px; -} -.login-area { - margin: 120px auto 0; -} -#login-window { - width: 315px; -} -.err-area { - height: auto; - margin-bottom: 10px; -} -.err-mess { - color: #C85305; -} -</style> + <meta charset="UTF-8"> + <title>Kimchi</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="images/apple-touch-icon-152.png" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-144.png" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-76.png" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-180x180.png" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="images/android-chrome-192x192.png" sizes="192x192"> + <!--[if IE lte 9]><link rel="shortcut icon" href="images/favicon.ico"><![endif]--> + <link rel="shortcut icon" href="images/favicon.png"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#4f4f4f" /> + <meta name="msapplication-square70x70logo" content="images/tiny.png" /> + <meta name="msapplication-square150x150logo" content="images/square.png" /> + <meta name="msapplication-wide310x150logo" content="images/wide.png" /> + <meta name="msapplication-square310x310logo" content="images/large.png" /> + <link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> + <link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> + <link rel="stylesheet" href="$href('css/bootstrap.custom.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="$href('libs/es5-shim/es5-shim.min.js')"></script> + <script src="$href('libs/jquery/jquery.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/bootstrap/bootstrap.min.js')"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="$href('js/wok.min.js')"></script> </head> <body onload="wok.login_main()"> -<div class="container topbar"> - <span id="logo"><img alt="Project Wok" src="images/theme-default/logo-white.png"></span> - <select id="userLang"> - <option value="en_US">English (US)</option> - <option value="zh_CN">中文（简体）</option> - <option value="pt_BR">Português (Brasil)</option> - <option value="de_DE">Deutsch (Deutschland)</option> - <option value="es_ES">Español (España)</option> - <option value="fr_FR">Français (France)</option> - <option value="it_IT">Italiano (Italia)</option> - <option value="ja_JP">日本語 (日本)</option> - <option value="ko_KR">한국어 (대한민국)</option> - <option value="ru_RU">Русский (Россия)</option> - <option value="zh_TW">中文（繁體）</option> - </select> -</div> -<div id="login-window" class="login-area"> - <div class="err-area"> - <div id="messUserPass" class="err-mess" style="display: none;">$_("The username or password you entered is incorrect. Please try again.")</div> - <div id="messSession" class="err-mess" style="display: none;">$_("Session timeout, please re-login.")</div> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a class="navbar-brand" href="#">Kimchi</a> + </div> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"><!-- Hamburguer button here --></span> + </button> + </div> + <div class="collapse navbar-collapse" id="nav-menu"> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> + </div> + </div> + </nav> </div> - <form id="form-login" class="login-panel" method="post"> - <div class="row"> - <input type="text" id="username" name="username" required="required" placeholder="$_("User Name")" autofocus/> - <div id="username-msg" class="msg-required"></div> + <div class="content"> + <div id="login-window" class="login-area"> + <div class="err-area"> + <div id="messUserPass" class="alert alert-danger" style="display: none;">$_("The username or password you entered is incorrect. Please try again.")</div> + <div id="messSession" class="alert alert-danger" style="display: none;">$_("Session timeout, please re-login.")</div> + </div> + <form id="form-login" class="form-horizontal" method="post"> + <div class="form-group"> + <label for="username" class="sr-only">$_("User Name")</label> + <input type="text" class="form-control" id="username" name="username" required="required" placeholder="$_(" User Name ")" autofocus autocomplete="off" /> + <div id="username-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <label for="password" class="sr-only">$_("Password")</label> + <input type="password" class="form-control" id="password" name="password" required="required" placeholder="$_(" Password ")" autocomplete="off" /> + <div id="password-msg" class="msg-required"></div> + </div> + <div class="form-group"> + <button id="btn-login" class="btn btn-login col-md-12 col-lg-12"> + <span id="login">$_("Log in")</span> + <span id="logging" style="display: none;">$_("Logging in...")</span> + </button> + </div> + <select id="userLang" class="selectpicker col-md-12 col-lg-12"> + <option value="en_US">English (US)</option> + <option value="zh_CN">中文（简体）</option> + <option value="pt_BR">Português (Brasil)</option> + <option value="de_DE">Deutsch (Deutschland)</option> + <option value="es_ES">Español (España)</option> + <option value="fr_FR">Français (France)</option> + <option value="it_IT">Italiano (Italia)</option> + <option value="ja_JP">日本語 (日本)</option> + <option value="ko_KR">한국어 (대한민국)</option> + <option value="ru_RU">Русский (Россия)</option> + <option value="zh_TW">中文（繁體）</option> + </select> + </form> </div> - <div class="row"> - <input type="password" id="password" name="password" required="required" placeholder="$_("Password")" /> - <div id="password-msg" class="msg-required"></div> - </div> - <div class="row"> - <button id="btn-login" class="btn-normal-1"> - <label id="login">$_("Log in")</label> - <label id="logging" style="display: none;">$_("Logging in...")</label> - </button> - </div> - </form> -</div> + </div> </body> </html> diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl index f2a09f5..acfae27 100644 --- a/ui/pages/wok-ui.html.tmpl +++ b/ui/pages/wok-ui.html.tmpl @@ -24,118 +24,134 @@ #silent _ = t.gettext #silent _t = t.gettext #from wok.config import get_version -<!DOCTYPE html> <html lang="$lang.lang[0]"> <head> -<meta charset="UTF-8"> -<title>Kimchi</title> -<meta http-equiv="X-UA-Compatible" content="IE=edge"/> -<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> -<meta name="apple-mobile-web-app-capable" content="yes"> -<meta name="apple-mobile-web-app-title" content="Wok"> -<link href="images/apple-touch-icon-152.png" sizes="152x152" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-144.png" sizes="144x144" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-76.png" sizes="76x76" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-180x180.png" sizes="120x120" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed"> -<link href="images/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed"> -<link rel="icon" type="image/png" href="images/android-chrome-192x192.png" sizes="192x192"> -<!--[if IE lte 9]><link rel="shortcut icon" href="images/favicon.ico"><![endif]--> -<link rel="shortcut icon" href="images/favicon.png"> -<meta name="application-name" content="Wok"> -<meta name="msapplication-config" content="none" /> -<meta name="msapplication-TileColor" content="#4f4f4f"/> -<meta name="msapplication-square70x70logo" content="images/tiny.png"/> -<meta name="msapplication-square150x150logo" content="images/square.png"/> -<meta name="msapplication-wide310x150logo" content="images/wide.png"/> -<meta name="msapplication-square310x310logo" content="images/large.png"/> -<link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> -<link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> -<link rel="stylesheet" href="$href('css/theme-default.min.css')"> - -<script src="$href('libs/jquery/jquery.min.js')"></script> -<script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> -<script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> -<script src="$href('base64/jquery.base64.js')"></script> -<script src="$href('js/wok.min.js')"></script> - -<!-- This is used for detecting if the UI needs to be built --> -<style type="text/css"> -#buildme { - position: fixed; - background: rgba(0, 0, 0, 0.5); - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 10000; -} - -#buildme div { - background-color: #FFB2C0; - border-style: solid; - border-color: #FF0000; - padding: 30px; - width: 75%; - margin-left: auto; - margin-right: auto; - margin-top: 50px; - -moz-border-radius: 15px; - border-radius: 15px; -} -</style> -</head> + <meta charset="UTF-8"> + <title>Kimchi</title> + <meta http-equiv="X-UA-Compatible" content="IE=edge" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> + <meta name="apple-mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-title" content="Wok"> + <link href="images/apple-touch-icon-152.png" sizes="152x152" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-144.png" sizes="144x144" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-76.png" sizes="76x76" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-72.png" sizes="72x72" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-180x180.png" sizes="120x120" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon-precomposed"> + <link href="images/apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon-precomposed"> + <link rel="icon" type="image/png" href="images/android-chrome-192x192.png" sizes="192x192"> + <!--[if IE lte 9]><link rel="shortcut icon" href="images/favicon.ico"><![endif]--> + <link rel="shortcut icon" href="images/favicon.png"> + <meta name="application-name" content="Wok"> + <meta name="msapplication-config" content="none" /> + <meta name="msapplication-TileColor" content="#4f4f4f" /> + <meta name="msapplication-square70x70logo" content="images/tiny.png" /> + <meta name="msapplication-square150x150logo" content="images/square.png" /> + <meta name="msapplication-wide310x150logo" content="images/wide.png" /> + <meta name="msapplication-square310x310logo" content="images/large.png" /> + <link rel="stylesheet" href="$href('libs/jquery-ui/themes/base/jquery-ui.min.css')"> + <link rel="stylesheet" href="$href('css/jquery-ui.custom.css')"> + <link rel="stylesheet" href="$href('css/bootstrap.custom.css')"> + <link rel="stylesheet" href="$href('libs/bootstrap-select/dist/css/bootstrap-select.min.css')"> + <link rel="stylesheet" href="$href('css/fontawesome/fontawesome.css')"> + <link rel="stylesheet" href="$href('css/opensans/opensans.css')"> + <link rel="stylesheet" href="$href('css/bootstrap-select.custom.css')"> + <link rel="stylesheet" href="$href('css/wok.css')"> + <script src="$href('libs/es5-shim/es5-shim.min.js')"></script> + <script src="$href('libs/jquery/jquery.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui.min.js')"></script> + <script src="$href('libs/jquery-ui/jquery-ui-i18n.min.js')"></script> + <script src="$href('libs/jquery-i18n/jquery.i18n.min.js')"></script> + <script src="$href('libs/bootstrap/bootstrap.min.js')"></script> + <script src="$href('libs/bootstrap-select/dist/js/bootstrap-select.min.js')"></script> + <script src="$href('base64/jquery.base64.js')"></script> + <script src="$href('js/wok.min.js')"></script> + <!-- This is used for detecting if the UI needs to be built --> + <style type="text/css"> + #buildme { + position: fixed; + background: rgba(0, 0, 0, 0.5); + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10000; + } + #buildme div { + background-color: #FFB2C0; + border-style: solid; + border-color: #FF0000; + padding: 30px; + width: 75%; + margin-left: auto; + margin-right: auto; + margin-top: 50px; + -moz-border-radius: 15px; + border-radius: 15px; + } + </style> + </head> <body onload="wok.main()"> -<div class="container"> -<header class="topbar"> - <h1 id="logo"><img alt="Project Wok" src="images/theme-default/logo-white.png"></h1> - <ul class="nav-top"> - <li> - <div id="peers" class="peers hide-content popable"> - <span>$_("Peers")</span> - <span class="arrow"></span> - <div class="dropdown popover right-side"> - <p id="search-peers">$_("Searching")...</p> - <p id="no-peers" class="hide-content">$_("No peers found.")</p> - </div> + <div class="topbar"> + <nav class="navbar navbar-inverse"> + <div class="container"> + <div class="navbar-header"> + <a id="logo" class="navbar-brand" href="#" title="Project Kimchi">Kimchi</a> </div> - </li> - <li> - <div id="user" class="popable"> - <span id="user-icon"></span> - <span id="user-name" class="empty-when-logged-off"></span> - <span class="arrow"></span> - <div class="action-panel popover right-side"> - <a id="btn-help" class="user-menu-item" href="javascript:void(0);">$_("Help")</a> - <br/> - <br/> - <a id="btn-about" class="user-menu-item" href="javascript:void(0);">$_("About")</a> - <br/> - <hr/> - <a id="btn-logout" class="user-menu-item" href="javascript: void(0);">$_("Log out")</a> - </div> + <ul class="nav navbar-nav navbar-right"> + <li class="dropdown hide-content peers" id="peers"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><span class="topbar-text">$_("Peers")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li id="search-peers"><span>$_("Searching")...</span></li> + <li id="no-peers" class="hide-content">$_("No peers found.")</li> + </ul> + </li> + <li class="dropdown" id="user"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> + <i class="fa fa-user" id="user-icon"></i><span class="topbar-text empty-when-logged-off" id="user-name"></span><span class="caret"></span> + </a> + <ul class="dropdown-menu"> + <li class="critical"><a id="btn-logout" href="javascript: void(0);"><i class="fa fa-ban"></i><span>$_("Log out")</span></a></li> + </ul> + </li> + <li class="dropdown"> + <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-question-circle"></i><span class="topbar-text">$_("Help")</span><span class="caret"></span></a> + <ul class="dropdown-menu"> + <li><a id="btn-help" href="javascript: void(0);">$_("Help")</a></li> + <li><a id="btn-about" href="javascript:void(0);">$_("About")</a></li> + </ul> + </li> + </ul> + </div> + </nav> + <nav class="navbar navbar-default"> + <div class="container"> + <div class="navbar-header"> + <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" aria-expanded="false"> + <span class="sr-only">Toggle navigation</span> + <span class="icon-bar"><!-- Hamburguer button here --></span> + </button> + </div> + <div class="collapse navbar-collapse" id="nav-menu"> + <ul class="nav navbar-nav"> + <li class="hostname"><span class="host-location"></span></li> + </ul> </div> - </li> - </ul> -</header> -<div class="content"> - <nav class="navbar"> - <ul id="nav-menu" class="nav-menu"> - <li class="menu-arrow"></li> - </ul> - </nav> - <div id="main"> + </div> + </nav> + </div> + <div class="content"> + <div id="main"> + </div> + </div> </div> -</div> -</div> -<div id="buildme"> - <div><p>Oops! It looks like I am running from a source tree and you forgot to build! + <div id="buildme" style="display:none"> + <div><p>Oops! It looks like I am running from a source tree and you forgot to build! Please run the following command from the wok and kimchi directories and reload this page:</p> - <p><code>make</code></p> + <p><code>make</code></p> + </div> </div> -</div> <script id="about-tmpl" type="wok/template"> <div class="window about-window"> -- 1.9.3