incubator-esme-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From akpette...@apache.org
Subject svn commit: r808301 - /incubator/esme/branches/web-ui/server/src/main/webapp/index.html
Date Thu, 27 Aug 2009 07:02:12 GMT
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">&nbsp;</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-->	



Mime
View raw message