EXOGTN-1591 [Edit-Inplace] Implement composer that allow to DnD new a…

…pplication to page
gatein · Oct 26, 2013 · 4732d27 · 4732d27
1 parent b26b274
commit 4732d27
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 18 deletions.
diff --git a/portal/web/src/main/java/org/gatein/portal/web/assets/editor.css b/portal/web/src/main/java/org/gatein/portal/web/assets/editor.css
@@ -29,17 +29,34 @@
 	min-height: 100px;
 }
 
-.composers {
-	border: solid 1px red;
+#composers {
+	margin: -70px 0 20px;
+}
+#composers .panel{
+	border: solid 1px #ccc;
 	border-radius: 4px;
 }
-.composers ul, .composers ul li {
+#composers .panel a{
+	color: #666;
+	padding-left: 7px;
+	text-decoration: none;
+}
+#composers .panel a:hover {
+	color: #333;
+}
+#composers .panel-body .composer-tooltip {
+	font-style: italic;
+	font-size: 12px;
+}
+#composers .in {
+	border-top: solid 1px #ccc;
+}
+#composers ul, .composers ul li {
 	list-style: none;
 }
-.composers ul li {
+#composers ul li {
 	float: left;
 	margin-left: 5px;
+	width: 130px;
+	text-align: center;
 }
-.composers ul li .portlet {
-	border: none;
-}
diff --git a/portal/web/src/main/java/org/gatein/portal/web/package-info.java b/portal/web/src/main/java/org/gatein/portal/web/package-info.java
@@ -24,6 +24,7 @@
     @Asset(id = "social-buttons", value = "social-buttons.css"),
     @Asset(id = "jquery", value = "javascripts/jquery-1.7.1.min.js"),
     @Asset(id = "jquery-ui", value = "javascripts/jquery-ui-1.10.3.custom.js"),
+	@Asset(id = "bootstrapjs", value = "javascripts/bootstrap.min.js"),
     @Asset(id = "bootstrap-dropdown", value = "javascripts/bootstrap-dropdown.js"),
     @Asset(id = "underscore", value = "javascripts/underscore.js"),
     @Asset(id = "backbone", value = "javascripts/backbone.js"),
@@ -35,7 +36,7 @@
     "editor",
     "jquery",
     "jquery-ui",
-    "bootstrap-dropdown",
+	"bootstrapjs",
     "underscore",
     "backbone",
     "layout-model",

diff --git a/portal/web/src/main/java/org/gatein/portal/web/templates/site.gtmpl b/portal/web/src/main/java/org/gatein/portal/web/templates/site.gtmpl
@@ -33,18 +33,30 @@
 <% } %>
 <!--Composer-->
 <% if(editing){%>
-<div id="composers" class="composers" data-url="@{PageEditor.getAllPortlets()}">
-	<ul id="portlet-list" class="portlet-list"></ul>
-	<div style="clear: both;"></div>
-
-	<!-- Template of portlet in composer -->
-	<script type="text/template" id="portlet-template">
-		<div class="portlet">
-			<img src="${"<%- logo %>"}"/>
-			<p>${"<%- name %>"}</p>
+<div class="panel-group" id="composers" data-url="@{PageEditor.getAllPortlets()}">
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<h5 class="panel-title">
+				<a class="accordion-toggle" data-toggle="collapse" data-parent="#composers" href="#portlets" title="Drag and drop to add new portlet">
+					Composer
+				</a>
+			</h5>
+		</div>
+		<div id="portlets" class="panel-collapse collapse">
+			<div class="panel-body">
+				<div class="composer-tooltip">Drag and drop to add new portlet!</div>
+				<ul id="portlet-list" class="portlet-list"></ul>
+				<div style="clear:both"></div>
+			</div>
 		</div>
-	</script>
+	</div>
 </div>
+<script type="text/template" id="portlet-template">
+	<div>
+		<img alt="${"<%- name %>"}" src="${"<%- logo %>"}"/>
+		<p>${"<%- name %>"}</p>
+	</div>
+</script>
 <%}%>
 <!-- end composer -->