prosody-modules
99465bbfa205

Find changesets by keywords by author, files, the commit message, revision number or hash, or revset expression.

Software / code / prosody-modules

Changeset

539:99465bbfa205

First pass of web-admin redesign
author Florian Zeitz <florob@babelmonkeys.de>
date Tue, 10 Jan 2012 19:16:28 +0100
parents 538:de64963d8e7a
children 540:31c29832ef3e
files mod_admin_web/admin_web/get_deps.sh mod_admin_web/admin_web/www_files/index.html mod_admin_web/admin_web/www_files/js/main.js mod_admin_web/admin_web/www_files/style.css
diffstat 4 files changed, 112 insertions(+), 85 deletions(-) [+]
line wrap: on
line diff
--- a/mod_admin_web/admin_web/get_deps.sh	Sun Jan 08 17:25:34 2012 +0000
+++ b/mod_admin_web/admin_web/get_deps.sh	Tue Jan 10 19:16:28 2012 +0100
@@ -1,5 +1,5 @@
 #!/bin/sh
-JQUERY_VERSION="1.6.2"
+JQUERY_VERSION="1.7.1"
 STROPHE_VERSION="1.0.2"
 cd www_files/js
 test -e jquery-$JQUERY_VERSION.min.js || wget http://code.jquery.com/jquery-$JQUERY_VERSION.min.js
--- a/mod_admin_web/admin_web/www_files/index.html	Sun Jan 08 17:25:34 2012 +0000
+++ b/mod_admin_web/admin_web/www_files/index.html	Tue Jan 10 19:16:28 2012 +0100
@@ -6,54 +6,58 @@
 <title>Prosody Webadmin</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
-<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
+<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="js/strophe.min.js"></script>
 <script type="text/javascript" src="js/adhoc.js"></script>
 <script type="text/javascript" src="js/main.js"></script>
 </head>
+
 <body>
-<div id='left'>
+<div id='top'>
+  <div id='header'>
+    <img src="images/prosody.png" alt="Prosody"/>
+  </div>
   <div id='menu'>
     <ul>
       <li id='adhocMenu'><a href="#">General</a></li>
       <li id='serverMenu'><a href="#">Servers</a></li>
       <li id='clientMenu'><a href="#">Clients</a></li>
+      <li><span id="selector">Host:<select id="host"></select></span></li>
+      <li><a href="#" id='logout'>Logout</a></li>
     </ul>
   </div>
-  <div id='login'>
-    <form id='cred' name='cred'>
-      <fieldset>
-        <label for='jid'>JID:</label><br/>
-        <input type='text' id='jid' />
-        <br />
-        <label for='pass'>Password:</label><br/>
-        <input type='password' id='pass' />
-        <br />
-        <input type='submit' id='connect' value='connect' />
-      </fieldset>
-    </form>
-  </div>
 </div>
 
-<div id='right'>
-  <span id="selector">Host: <select id="host"></select></span>
-  <div id='main'>
-    <div id="adhoc"></div>
-    <div id="s2sList">
-      <div class="container">
-	Incomming S2S connections:
-	<ul id="s2sin"></ul>
-      </div>
-      <div class="container">
-	Outgoing S2S connections:
-	<ul id="s2sout"></ul>
-      </div>
+<div id='login'>
+  <form id='cred' name='cred'>
+    <fieldset>
+      <label for='jid'>JID:</label><br/>
+      <input type='text' id='jid' />
+      <br />
+      <label for='pass'>Password:</label><br/>
+      <input type='password' id='pass' />
+      <br />
+      <input type='submit' id='connect' value='Login' />
+    </fieldset>
+  </form>
+</div>
+
+<div id='main'>
+  <div id="adhoc"></div>
+  <div id="s2sList">
+    <div class="container">
+      <h2>Incomming S2S connections:</h2>
+      <ul id="s2sin"></ul>
     </div>
-    <div id="c2sList">
-      <div class="container">
-	Client connections:
-	<ul id="c2s"></ul>
-      </div>
+    <div class="container">
+      <h2>Outgoing S2S connections:</h2>
+      <ul id="s2sout"></ul>
+    </div>
+  </div>
+  <div id="c2sList">
+    <div class="container">
+      <h2>Client connections:</h2>
+      <ul id="c2s"></ul>
     </div>
   </div>
 </div>
--- a/mod_admin_web/admin_web/www_files/js/main.js	Sun Jan 08 17:25:34 2012 +0000
+++ b/mod_admin_web/admin_web/www_files/js/main.js	Tue Jan 10 19:16:28 2012 +0100
@@ -138,17 +138,11 @@
 }
 
 function showConnect() {
-    var jid = $('#jid');
-    var pass = $('#pass');
-    var button = $('#connect').get(0);
-
-    button.value = 'connect';
-    pass.show();
-    jid.show();
+    $('#pass').show();
+    $('#jid').show();
+    $('#login').show();
     $('#menu').hide();
-    $('#right').hide();
-    $('#cred label').show();
-    $('#cred br').show();
+    $('#main').hide();
     $('#s2sin').empty();
     $('#s2sout').empty();
     $('#c2s').empty();
@@ -156,20 +150,15 @@
 }
 
 function showDisconnect() {
-    var jid = $('#jid');
-    var pass = $('#pass');
-    var button = $('#connect').get(0);
-
-    button.value = 'disconnect';
-    pass.hide();
-    jid.hide();
-    $('#menu').show();
-    $('#right').show();
-    $('#adhoc').show();
+    $('#jid').hide();
+    $('#pass').hide();
     $('#s2sList').hide();
     $('#c2sList').hide();
-    $('#cred label').hide();
-    $('#cred br').hide();
+    $('#login').hide();
+
+    $('#menu').show();
+    $('#main').show();
+    $('#adhoc').show();
 }
 
 $(document).ready(function () {
@@ -190,15 +179,16 @@
         var pass = $('#pass');
         localJID = jid.get(0).value;
 
-        if (button.value == 'connect') {
-            $('#log').empty();
-            connection.connect(localJID, pass.get(0).value, onConnect);
-        } else {
-            connection.disconnect();
-        }
+	$('#log').empty();
+	connection.connect(localJID, pass.get(0).value, onConnect);
         event.preventDefault();
     });
 
+    $('#logout').click(function (event) {
+	connection.disconnect();
+	event.preventDefault();
+    });
+
     $('#adhocMenu').click(function (event) {
         $('#s2sList').slideUp();
         $('#c2sList').slideUp();
--- a/mod_admin_web/admin_web/www_files/style.css	Sun Jan 08 17:25:34 2012 +0000
+++ b/mod_admin_web/admin_web/www_files/style.css	Tue Jan 10 19:16:28 2012 +0100
@@ -8,69 +8,102 @@
 }
 
 body {
-  padding: 1em;
-  background: #f29b00;
-  color: #000000
+  margin: 0
 }
 
 a {
   color: #0000FF
 }
 
+ul {
+  margin: 0
+}
+
 #log_container {
   clear: both;
   display: none
 }
 
 .container {
-  margin: 2em;
-  padding: 0.5em;
-  border: solid;
+  margin: 0 2em;
   float: left
 }
 
-#left {
+#login {
   float: left;
+  margin-left: 1em;
   margin-right: 2em;
+  margin-top: 1em;
   padding: 1em;
   border: solid 1px;
-  background: #6197DF;
+  background: #eef0f2;
   color: #000000
 }
 
-#selector {
-  padding: 1em;
-  border: solid 1px;
-  background: #6197DF;
-  color: #000000
+#main {
+  display: none;
+  margin: 1em
 }
 
-#right {
-  display: none;
-  float: left
-}
-
-#main {
-  margin-top: 1em
+#main p {
+  margin: 0
 }
 
 #cred input[type="submit"] {
   margin-left: 0em
 }
 
+#cred input[type="submit"]:hover {
+  color: #6197DF;
+  text-decoration: underline;
+}
+
 #cred fieldset {
   border: 0px
 }
 
+#top {
+  clear: both;
+  width: 100%;
+  padding: 0
+}
+
+#header {
+  height: 172px;
+  background: url(images/blue_orange.png) repeat-x
+}
+
 #menu {
-  display: none
+  display: none;
+  color: #454748;
+  font-size: 1.1em;
+  background: #eef0f2;
+  width: 100%;
 }
 
 #menu ul {
+  display: inline;
   list-style-type: none;
-  padding: 0px;
+  margin: 0;
+  padding: 0.5em 0
 }
 
 #menu li {
-  font-size: 20pt
+  display: inline;
+  padding: 0 0.5em
+}
+
+#menu a {
+  color: #454748;
+  text-decoration: none
 }
+
+#menu li a:hover {
+  color: #6197DF;
+  text-decoration: underline
+}
+
+#s2sList h2, #c2sList h2 {
+  color: #4b8ade;
+  margin: 0
+}