[Kimchi-devel] [PATCH 05/10] [new-ui] Base template files
sguimaraes943 at gmail.com
sguimaraes943 at gmail.com
Tue Nov 10 21:17:34 UTC 2015
From: samhenri <samuel.guimaraes at eldorado.org.br>
Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
ui/pages/login.html.tmpl | 186 ++++++++++++++++++++------------------
ui/pages/wok-ui.html.tmpl | 222 +++++++++++++++++++++++++---------------------
2 files changed, 219 insertions(+), 189 deletions(-)
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
More information about the Kimchi-devel
mailing list