rave-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlu...@apache.org
Subject svn commit: r1161270 - in /incubator/rave/trunk/rave-portal/src/main/webapp: WEB-INF/views/home.jsp css/default.css script/rave_layout.js
Date Wed, 24 Aug 2011 20:43:55 GMT
Author: carlucci
Date: Wed Aug 24 20:43:55 2011
New Revision: 1161270

URL: http://svn.apache.org/viewvc?rev=1161270&view=rev
Log:
RAVE-96: enhancements to page tabs UI

Modified:
    incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp
    incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css
    incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js

Modified: incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp
URL: http://svn.apache.org/viewvc/incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp?rev=1161270&r1=1161269&r2=1161270&view=diff
==============================================================================
--- incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp (original)
+++ incubator/rave/trunk/rave-portal/src/main/webapp/WEB-INF/views/home.jsp Wed Aug 24 20:43:55
2011
@@ -38,53 +38,37 @@
             <a href="<spring:url value="/app/store?referringPageId=${page.id}" />">Widget
Store</a>
         </div>
         <h1>Hello <c:out value="${page.owner.username}"/>, welcome to Rave!</h1>
-    </div>
-    <div id="dialog" title="Tab data" class="dialog">
-        <form id="pageForm">
-            <div id="pageFormErrors" class="error"></div>
-            <fieldset class="ui-helper-reset">
-                <label for="tab_title">Title</label>
-                <input type="text" name="tab_title" id="tab_title" value="" class="required
ui-widget-content ui-corner-all" />
-                <label for="pageLayout">Select Page Layout:</label>
-                <select name="pageLayout" id="pageLayout">
-                    <option value="columns_1" id="columns_1_id">One Column</option>
-                    <option value="columns_2" id="columns_2_id" selected="selected">Two
Columns</option>
-                    <option value="columns_2wn" id="columns_2wn_id">Two Columns (wide/narrow)</option>
-                    <option value="columns_3" id="columns_3_id">Three Columns</option>
-                    <option value="columns_3nwn" id="columns_3nwn_id">Three Columns
(narrow/wide/narrow)</option>
-                    <option value="columns_4" id="columns_4_id">Four Columns</option>
-                    <option value="columns_3nwn_1_bottom" id="columns_3nwn_1_bottom">Four
Columns (narrow/wide/narrow/bottom)</option>
-                </select>
-            </fieldset>
-        </form>
     </div>    
     <input id="currentPageId" type="hidden" value="${page.id}" />
-    <button id="add_page">Add Page</button>
-    <%-- render the page tabs --%>
-    <div id="tabs" class="rave-ui-tabs">
-        <c:forEach var="userPage" items="${pages}">
-             <%-- determine if the current page in the list matches the page the user
is viewing --%>
-             <c:set var="isCurrentPage">
-                 <c:choose>
-                     <c:when test="${page.id == userPage.id}">true</c:when>
-                     <c:otherwise>false</c:otherwise>
-                 </c:choose>
-             </c:set>                             
-             <div id="tab-${userPage.id}" class="rave-ui-tab<c:if test="${isCurrentPage}">
rave-ui-tab-selected</c:if>">
-                <div id="pageTitle-${userPage.id}" class="page-title" onclick="rave.viewPage(${userPage.id});"><c:out
value="${userPage.name}"/></div>
-                <c:if test="${isCurrentPage}">                   
-                    <div id="pageMenuWrapper">
-                        <span id="pageMenuButton" class="ui-icon ui-icon-circle-triangle-s"></span>
-                        <div id="pageMenu" class="page-menu">
-                            <div id="pageMenuEdit" class="page-menu-item">Edit Page</div>
-                            <div id="pageMenuDelete" class="page-menu-item<c:if test='${fn:length(pages)
== 1}'> page-menu-item-disabled</c:if>">Delete Page</div>
-                            <div id="pageMenuMove" class="page-menu-item">Move Page</div>
+    <div id="tabsHeader">      
+        <%-- render the page tabs --%>
+        <div id="tabs" class="rave-ui-tabs">
+            <c:forEach var="userPage" items="${pages}">
+                 <%-- determine if the current page in the list matches the page the user
is viewing --%>
+                 <c:set var="isCurrentPage">
+                     <c:choose>
+                         <c:when test="${page.id == userPage.id}">true</c:when>
+                         <c:otherwise>false</c:otherwise>
+                     </c:choose>
+                 </c:set>                             
+                 <div id="tab-${userPage.id}" class="rave-ui-tab<c:if test="${isCurrentPage}">
rave-ui-tab-selected</c:if>">
+                    <div id="pageTitle-${userPage.id}" class="page-title" onclick="rave.viewPage(${userPage.id});"><c:out
value="${userPage.name}"/></div>
+                    <c:if test="${isCurrentPage}">                   
+                        <div id="pageMenuWrapper">
+                            <span id="pageMenuButton" class="ui-icon ui-icon-circle-triangle-s"
title="Page Actions Menu"></span>
+                            <div id="pageMenu" class="page-menu">
+                                <div id="pageMenuEdit" class="page-menu-item">Edit
Page</div>
+                                <div id="pageMenuDelete" class="page-menu-item<c:if
test='${fn:length(pages) == 1}'> page-menu-item-disabled</c:if>">Delete Page</div>
+                                <div id="pageMenuMove" class="page-menu-item">Move
Page</div>
+                            </div>
                         </div>
-                    </div>
-                </c:if>
-            </div>
-        </c:forEach>        
-    </div>   
+                    </c:if>
+                </div>
+            </c:forEach>        
+            <%-- display the add page button at the end of the tabs --%>
+            <button id="add_page" title="Add a New Page" style="display: none;"></button>
+        </div>   
+    </div>
     <%--render the main page content (regions/widgets) --%>
     <div id="pageContent">
         <c:forEach var="region" items="${page.regions}">
@@ -114,9 +98,27 @@
                 </c:forEach>
             </div>
         </c:forEach>
+        <div class="clear-float">&nbsp;</div>
     </div>
-
-    <div class="clear-float">&nbsp;</div>
+    <div id="dialog" title="Add a New Page" class="dialog">
+        <form id="pageForm">
+            <div id="pageFormErrors" class="error"></div>
+            <fieldset class="ui-helper-reset">
+                <label for="tab_title">Title</label>
+                <input type="text" name="tab_title" id="tab_title" value="" class="required
ui-widget-content ui-corner-all" />
+                <label for="pageLayout">Select Page Layout:</label>
+                <select name="pageLayout" id="pageLayout">
+                    <option value="columns_1" id="columns_1_id">One Column</option>
+                    <option value="columns_2" id="columns_2_id" selected="selected">Two
Columns</option>
+                    <option value="columns_2wn" id="columns_2wn_id">Two Columns (wide/narrow)</option>
+                    <option value="columns_3" id="columns_3_id">Three Columns</option>
+                    <option value="columns_3nwn" id="columns_3nwn_id">Three Columns
(narrow/wide/narrow)</option>
+                    <option value="columns_4" id="columns_4_id">Four Columns</option>
+                    <option value="columns_3nwn_1_bottom" id="columns_3nwn_1_bottom">Four
Columns (narrow/wide/narrow/bottom)</option>
+                </select>
+            </fieldset>
+        </form>
+    </div>    
     <script src="//cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
     <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
     <script src="//ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js"></script>

Modified: incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css
URL: http://svn.apache.org/viewvc/incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css?rev=1161270&r1=1161269&r2=1161270&view=diff
==============================================================================
--- incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css (original)
+++ incubator/rave/trunk/rave-portal/src/main/webapp/css/default.css Wed Aug 24 20:43:55 2011
@@ -19,11 +19,14 @@
 * This is the same as rave.css used for the website.
 * FIXME: where is rave.css?
 */
+html {
+    background-color: #EBEBEB;
+}
 
 body {
     color: #000000;
     font-size: 62.5%;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;   
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#D7D7D3", endColorstr="#EBEBEB");
     background: -moz-linear-gradient(center top , #D7D7D3 0%, #EBEBEB 50%) repeat scroll
0 0 transparent;
     background: -webkit-gradient(linear, left top, left bottom, from(#D7D7D3), to(#EBEBEB));
@@ -176,7 +179,7 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .widget-prefs-label {
-    vertical-align: top;
+    vertical-align: top;    
     font-size: 0.8em;
     text-align: right;
 }
@@ -486,11 +489,16 @@ span.error, label.error {
 
 /* End of form fields */
 
-/*
-.rave-ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background:
#F2F2F2; height: 800px; }
-.rave-ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; background: #666666}
-.rave-ui-tabs add_tab { cursor: pointer; }
-*/
+#tabsHeader {
+    background-color: #FFFFFF;
+}
+
+#tabs {    
+    border-bottom: 1px solid #B4C4CF;
+    padding: 10px 15px 0 13px;
+    white-space: nowrap;
+}
+
 .rave-ui-tab {
     background-color: #FFFFFF;
     border: 1px solid #B4C4CF;
@@ -498,31 +506,43 @@ span.error, label.error {
     display: inline-block;
     font-style: italic;
     font-weight: normal;
-    height: 25px;
+    height: 25px; 
     position: relative;
-    top: 4px;    
+    top: 1px;    
 }
 
 .rave-ui-tab-selected {
-    background-color: #EFF3F5;
-    border-bottom: 1px solid #EFF3F5;
+    background-color: #D7D7D3;
+    border-bottom: 1px solid #D7D7D3;
     color: #000000;
     font-style: normal;
     font-weight: bold;
 }
 
-
-#tabs { margin-top: 1em; length: 95%; }
-#tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
 #dialog {
     width:400px;
+    display: none;
 }
 #dialog label { display:block; }
 #dialog input { display:block; }
 #dialog label { margin-top: 0.5em; }
 #dialog input { width: 95%; }
 #dialog textarea { width: 95%; }
-#add_page { cursor: pointer; }
+#add_page { 
+    cursor: pointer; 
+    width: 18px; 
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 10px;
+    padding-bottom: 4px;
+    padding-top: 3px;
+}
+
+#pageContent {
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#D7D7D3", endColorstr="#EBEBEB");
+    background: -moz-linear-gradient(center top , #D7D7D3 0%, #EBEBEB 50%) repeat scroll
0 0 transparent;
+    background: -webkit-gradient(linear, left top, left bottom, from(#D7D7D3), to(#EBEBEB));
+}
 
 .page-title {
     display: inline-block;

Modified: incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js
URL: http://svn.apache.org/viewvc/incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js?rev=1161270&r1=1161269&r2=1161270&view=diff
==============================================================================
--- incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js (original)
+++ incubator/rave/trunk/rave-portal/src/main/webapp/script/rave_layout.js Wed Aug 24 20:43:55
2011
@@ -150,19 +150,21 @@ rave.layout = rave.layout || (function()
     function init() {
         // add_page button to open the dialog for creating a new page
         $( "#add_page" )
-                .button()
+                .button({ 
+                    text: false,
+                    icons: {primary:'ui-icon-plusthick'} 
+                })
                 .click(function() {
-                        $dialog.dialog( "open" );
-                });
-
-       pageMenu.init();
+                    $dialog.dialog( "open" );
+                })
+                .show();
 
+        pageMenu.init();
     }
    
     // public rave.layout API
     return {
         init: init,
         getCurrentPageId: getCurrentPageId
-    };
-    
+    };    
 })();
\ No newline at end of file



Mime
View raw message