[Kimchi-devel] [PATCH 05/10] [new-ui] Base template files

Tuesday, 10 November 2015

From: samhenri <samuel.guimaraes(a)eldorado.org.br&gt;

Signed-off-by: samhenri <samuel.guimaraes(a)eldorado.org.br&gt;
---
 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


    

2024

2023

2022

2021

2020

2019

2018

2017

2016

2015

2014

2013

[Kimchi-devel] [PATCH 05/10] [new-ui] Base template files