You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@rave.apache.org by ca...@apache.org on 2011/08/24 22:43:55 UTC
svn commit: r1161270 - in /incubator/rave/trunk/rave-portal/src/main/webapp:
WEB-INF/views/home.jsp css/default.css script/rave_layout.js
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"> </div>
</div>
-
- <div class="clear-float"> </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