Author: akpetteroe
Date: Thu Aug 27 07:02:11 2009
New Revision: 808301
URL: http://svn.apache.org/viewvc?rev=808301&view=rev
Log:
A couple of changes to the web UI
Modified:
incubator/esme/branches/web-ui/server/src/main/webapp/index.html
Modified: incubator/esme/branches/web-ui/server/src/main/webapp/index.html
URL:
http://svn.apache.org/viewvc/incubator/esme/branches/web-ui/server/src/main/webapp/index.html?rev=808301&r1=808300&r2=808301&view=diff
==============================================================================
--- incubator/esme/branches/web-ui/server/src/main/webapp/index.html (original)
+++ incubator/esme/branches/web-ui/server/src/main/webapp/index.html Thu Aug 27
07:02:11 2009
@@ -1,8 +1,9 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";>
-<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml"; xmlns:lift="http://liftweb.net/";
xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;
charset=utf-8" />
<title>ESME: Enterprise Social Messaging Experiment</title>
+ <lift:Style.header />
<!-- STYLESHEETS -->
<link rel="stylesheet" type="text/css" href="styles/reset.css"
media="screen" />
<link rel="stylesheet" type="text/css" href="styles/text.css"
media="screen" />
@@ -15,108 +16,13 @@
<!-- JAVASCRIPT -->
<script type="text/javascript"
src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="scripts/jquery-ui-1.7.2.custom.min.js"></script>
+ <script type="text/javascript" src="scripts/esme.js"></script>
- <script type="text/javascript">
-
- // CONSTANTS
- const HIDE_LEFTBAR_AT_WIDTH = 500;
- const HIDE_RIGHTBAR_AT_WIDTH = 500;
-
-
- var leftBarHidden = false;
- var rightBarHidden = false;
- var leftHiddenManually = false;
- var rightHiddenManually = false;
-
- function hideLeftBar(){
- $("#leftSidebar").fadeOut(300);
- $("#content").animate({opacity: "0.1"}, 300,
function() {
- $("#content")
- .switchClass('grid_13','grid_16',400)
- .animate({opacity: "1"}, 400);
- });
- leftBarHidden = true;
- };
-
- function hideRightBar(){
- $("#rightSidebar").fadeOut(300);
- $("#messages").animate({opacity: "0.1"}, 300,
function() {
- $("#messages")
- .switchClass('grid_13','grid_16',400)
- .animate({opacity: "1"}, 400);
- });
- rightBarHidden = true;
- };
-
- function showLeftBar(){
- $("#content").animate({opacity: "0.1"}, 300,
function() {
- $("#content")
- .switchClass('grid_16','grid_13',400,
function() { $("#leftSidebar").fadeIn(800); })
- .animate({opacity: "1"}, 400);
- });
- leftBarHidden = false;
- };
-
- function showRightBar(){
-
- $("#messages").animate({opacity: "0.1"}, 300,
function() {
- $("#messages")
- .switchClass('grid_16','grid_13',400,
function() { $("#rightSidebar").fadeIn(800); })
- .animate({opacity: "1"}, 400);
- });
- rightBarHidden = false;
- };
-
- function onWindowResize(e){
- var newWindowWidth = $(window).width();
-
- if(newWindowWidth < HIDE_LEFTBAR_AT_WIDTH &&
!leftHiddenManually){
- if(!leftBarHidden) hideLeftBar();
- }
- if(newWindowWidth > HIDE_LEFTBAR_AT_WIDTH &&
!leftHiddenManually){
- if(leftBarHidden) showLeftBar();
- }
-
- if(newWindowWidth < HIDE_RIGHTBAR_AT_WIDTH &&
!rightHiddenManually){
- if(!rightBarHidden) hideRightBar();
- }
- if(newWindowWidth > HIDE_RIGHTBAR_AT_WIDTH &&
!rightHiddenManually){
- if(rightBarHidden) showRightBar();
- }
- }
-
-
- $(function(){
- $("#tabs").tabs();
-
- $("#toggleLeftBtn").click(function() {
- if(leftBarHidden) {
- showLeftBar();
-
leftHiddenManually = false;
- }
- else {
- hideLeftBar();
-
leftHiddenManually = true;
- }
- return false;
- });
-
- $("#toggleRightBtn").click(function() {
- if(rightBarHidden) {
- showRightBar();
-
rightHiddenManually = false;
- }
- else {
- hideRightBar();
-
rightHiddenManually = true;
- }
- return false;
- });
-
- $(window).bind("resize", onWindowResize);
- });
-
- </script>
+ <script type="text/javascript">
+ $(function() {
+ $("#accordion").accordion();
+ });
+ </script>
</head>
@@ -138,19 +44,80 @@
<!-- LEFT SIDEBAR -->
<div id="leftSidebar" class="grid_3">
<div class="ui-widget ui-widget-content
ui-corner-all">
- <div><p>LEFT BAR</p></div>
- </div>
+ <div id="accordion">
+ <h6><a href="#">Groups</a></h6>
+ <div>
+ <p>
+ <lift:UserSnip.accessPools />
+ </p>
+ </div>
+ <h6><a href="#">Personalization</a></h6>
+ <div>
+<p><lift:Menu.item name="EditUser"/></p>
+<p>Your Preferences</p>
+<p>Your Relationships</p>
+<p><lift:Menu.item name="actionMgt"/></p>
+<p><lift:Menu.item name="accessPools"/></p>
+<p>Your Tags</p>
+<p>Your Blacklist</p>
+ </div>
+ <h6><a href="#">System</a></h6>
+ <div>
+<p>About</p>
+<p>Help</p>
+<p>Usage Policies</p>
+ </div>
+ <h6><a href="#">Administration</a></h6>
+ <div>
+<p>Administer Groups</p>
+<p>Administer Users</p>
+<p>Administer Affiliates</p>
+ </div>
+ </div> <!-- END acordain widget -->
+ </div> <!-- END UI widget -->
</div> <!-- END LEFT SIDEBAR -->
<!-- CONTENT-->
<div id="content" class="grid_13">
- <!-- SEND MESSAGE -->
+ <!-- SEND MESSAGE -->
+ <div id="accordion">
<div id="sendMessage" class="grid_16">
- <p>Lorem ipsum dolor sit amet,
consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
- </div> <!-- END SEND MESSAGE -->
-
+ <div class="b-edit">
+ <div>
+ <label>What are you working on?</label>
+ <textarea rows="4" cols="20" id="textdude"
+ style="width: 90%"></textarea>
+ </div>
+ <div>
+ Replying to <span id="reply-to-span"> </span>
+ <button onclick="clearReplyTo()">remove reply</button>
+ </div>
+
+ <div >
+ <label>Tag your message</label>
+ <input id="tagdude" style="width: 90%"/>
+ <div class="note clear">
+ <span class="l">use commas to
+ separate tags</span>
+ <span class="r">not required</span>
+ </div>
+ </div>
+ <div>
+ <label>Access pool</label>
+ <select id="access_pool">
+ <option id="0">--public--</option>
+ <lift:UserSnip.accessPools />
+ </select>
+ </div>
+ <div>
+ <button class="btn"
onclick="javascript:post_msg();">Update</button>
+ </div>
+ <lift:UserSnip.postScript />
+ </div>
+ </div> <!-- END SEND MESSAGE -->
+ </div> <!-- END acordain widget -->
<!-- MESSAGES -->
@@ -159,13 +126,125 @@
<!-- TABS-->
<div id="tabs">
<ul>
- <li><a
href="#tabs-1">First</a></li>
- <li><a
href="#tabs-2">Second</a></li>
- <li><a
href="#tabs-3">Third</a></li>
+ <li><a
href="#tabs-1">My Timeline</a></li>
+ <li><a
href="#tabs-2">Public Timeline</a></li>
+ <li><a
href="#tabs-3">Replies</a></li>
+ <li><a
href="#tabs-4">Contacts</a></li>
</ul>
- <div id="tabs-1">Lorem
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</div>
- <div
id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id,
pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce
sed lorem in enim dictum bibendum.</div>
- <div id="tabs-3">Nam
dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi
urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor
ullamcorper augue.</div>
+ <div id="tabs-1">
+ <dl class="messages">
+ <dt class="caption">Your timeline</dt>
+
+ <dd>
+ <div class="b-list">
+ <table>
+ <thead>
+ <tr>
+ <th>Author</th>
+ <th>Message</th>
+ <th>Tags</th>
+ </tr>
+ </thead>
+ <lift:comet type="Timeline"/>
+ <tbody id="timeline_messages">
+ <tr id="message">
+ <td><img id="avatar"
src="http://static.twitter.com/images/default_profile_bigger.png";
alt="Anonymous" width="50px"/><div id="author">anon</div></td>
+ <td class="message">
+ <div class="outer">
+ <div class="inner clear">
+ <p id="body">This is a test message in
the HTML for designers.</p>
+ </div>
+ <div class="metainfo">
+ <span id="pool">in pool PUBLIC</span>
+ <span id="reason">resent by me</span>
+ <span id="when" class="date">today</span>
+ </div>
+ </div>
+ </td>
+ <td id="tags" class="tag">
+ <p id="tag"><a href="tag/tag1">tag1</a></p>
+ <p id="tag"><a href="tag/tag2">tag2</a></p>
+ </td>
+ <td><button id="resend"
class="btn">Resend</button></td>
+ </tr>
+ <tr id="message">
+ <td><img id="avatar"
src="http://static.twitter.com/images/default_profile_bigger.png";
alt="Anonymous" width="50px"/><div id="author">anon</div></td>
+ <td class="message">
+ <div class="outer">
+ <div class="inner clear">
+ <p class="text" id="body">This is
another test message in the HTML for designers.</p>
+ </div>
+ <div class="metainfo">
+ <span id="pool">in pool PUBLIC</span>
+ <span id="reason">resent by me</span>
+ <span id="when"
class="date">yesterday</span>
+ </div>
+ </div>
+ </td>
+ <td id="tags" class="tag">
+ <p id="tag"><a href="tag/tag1">tag1</a></p>
+ <p id="tag"><a href="tag/tag3">tag3</a></p>
+ </td>
+ <td><button id="resend"
class="btn">Resend</button></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </dd>
+ </dl>
+ <lift:UserSnip.resendScript/>
+ </div>
+ <div id="tabs-2">
+ <dl class="tagclouds">
+ <dt class="caption">Public timeline</dt>
+
+ <dd>
+ <div class="b-list">
+ <table>
+ <thead>
+ <tr>
+ <th>Author</th>
+ <th>Message</th>
+ <th>Tags</th>
+ </tr>
+ </thead>
+ <lift:comet type="PublicTimeline"/>
+ <tbody id="public_timeline_messages">
+ <tr id="message">
+ <td id="author">dhague</td>
+ <td class="message">
+ <div class="outer">
+ <div >
+ <p class="text" id="body">This is a public
timeline message in the HTML for designers.</p>
+ </div>
+ <div class="metainfo">
+ <span id="when" class="date">now</span>
+ </div>
+ </div>
+ </td>
+ <td id="tags" class="tag">
+ <p id="tag"><a href="tag/tagA">tagA</a></p>
+ <p id="tag"><a href="tag/tagB">tagB</a></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </dd>
+ </dl>
</div>
+ <div
id="tabs-3">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id,
pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce
sed lorem in enim dictum bibendum.
+ </div>
+
+ <div id="tabs-4">
+ <dd class="b-contacts"
style="height: 240px; overflow: auto">
+ Following:
+ <lift:UserSnip.following/>
+ </dd>
+ <dd class="b-contacts" style="height: 240px; overflow:
auto">
+ Followers:
+ <lift:UserSnip.followers/>
+ </dd>
+ </div>
</div><!-- END TABS-->
</div><!-- END MESSAGES-->
@@ -174,7 +253,22 @@
<!-- RIGHT SIDEBAR -->
<div id="rightSidebar" class="grid_3">
- <div class="ui-widget
ui-widget-content ui-corner-all"><p>RIGHT BAR</p></div>
+ <div class="ui-widget
ui-widget-content ui-corner-all">
+ <p>
+ <div class="b-cloud">
+ <lift:comet type="TagCloud"/>
+ </div>
+
+ <div class="b-stats">
+ <p id="stats-para">Popular messages</p>
+ <lift:UserSnip.popular/>
+ </div>
+
+ <div class="b-stats">
+ <p id="stats-para">Popular links</p>
+ <lift:UserSnip.links/>
+ </div>
+ </p></div>
</div> <!-- END LEFT SIDEBAR -->
</div><!-- END CONTENT-->
![http://static.twitter.com/images/default_profile_bigger.png"](http://static.twitter.com/images/default_profile_bigger.png"){kind=link}