fixing ui

wise-webapp/src/main/webapp/css/mindmapList.less

@@ -1,4 +1,4 @@
-@import "bootstrap/css/bootstrap-colorpicker.min.css";
+@import "../bootstrap/css/bootstrap-colorpicker.min.css";
 @import "../bootstrap/css/bootstrap.min.css";
 @import "pageHeaders.css";
 
@@ -14,32 +14,17 @@
 @base-color: #111;
 
 /* ----------------------------- General -------------------------------- */
-.nav-list {
+.nav-pills li {
-  margin-top: -20px;
-}
-.nav-list li {
   position: relative;
   width: 90%;
 }
-.nav-list a, .nav-header {
+.nav-pills {
-  margin-top: 4px;
+  width: 108%;
-  border: 1px solid rgb(213, 207, 207);
-  border-radius: 6px;
-  box-shadow: 0px 1px 3px #888888;
-}
-.nav-header {
-  background-color: #eee;
 }
 .active {
   position: relative;
   left: 8px;
 }
-#mindmapListTable {
-  border-radius: 6px;
-  left: -4px;
-  position: relative;
-  box-shadow: 0px 1px 9px #888888;
-}
 
 #mindmapListContainer {
     background: #FFFFFF;
@@ -146,8 +131,8 @@ input#selectAll {
     height: 12px;
     display: inline-block;
     position: relative;
-    left: 2px;
+    left: 3px;
-    top: 1px;
+    top: 2px;
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     border-radius: 3px;
@@ -155,6 +140,11 @@ input#selectAll {
     float: left;
 }
 
+.colorInput {
+  border-radius: 4px !important;
+  border: 1px solid #ccc !important;
+}
+
 .labelIcon {
   float: left;
 }
@@ -163,7 +153,7 @@ input#selectAll {
     display: inline-block;
     position: relative;
     left: 7px;
-    top: -1px;
+    top: -2px;
 }
 
 .labelNameList {
@@ -201,6 +191,8 @@ input#selectAll {
   margin-bottom: 0px;
   margin-right: 5px;
   float: right;
+  position: relative;
+  top: 3px;
 }
 
 table.tableTag td {

wise-webapp/src/main/webapp/js/mindmapList.js

@@ -510,6 +510,13 @@ $(function () {
                 }
             }
         });
+
+        //setting max heigth to ul filters...
+        var maxHeight = $("#map-table").height() - 20;
+         $("#foldersContainer ul").css('overflow-y', 'scrollbar');
+         $("#foldersContainer ul").css('overflow-x', 'hidden');
+         $("#foldersContainer ul").height(maxHeight);
+
     })
 });
 
@@ -519,7 +526,7 @@ function createLabelItem(data, id) {
     var labelItem = $("<li data-filter=\""  + data.title  + "\">");
     labelItem.append(
         "<a href=\"#\"> " +
-            "<i class=\"icon-tag labelIcon\"></i>" +
+            "<i class=\"glyphicon glyphicon-tag labelIcon\"></i>" +
             "<div class='labelColor' style='background: " +  data.color + "'></div>" +
             "<div class='labelName labelNameList'>" + data.title + "</div>" +
             "<button id='deleteLabelBtn' class='close closeLabel' labelid=\""+ labelId +"\">x</button>" +
@@ -624,13 +631,9 @@ function linkLabelToMindmap(mapIds, label) {
 }
 
 //animations...
-$(document).on('mouseenter', '#foldersContainer li[class!="nav-header"]', function (event) {
+$(document).on('click', '#foldersContainer li[class!="nav-header"]', function (event) {
     if ($(this).attr('class') != 'active') {
         $(this).animate({left: '+=8px'}, 'fast');
     }
 });
 
-$(document).on('mouseleave', '#foldersContainer li[class!="active"][class!="nav-header"]', function (event) {
-    $(this).animate({left: '-=8px'}, 'fast');
-});
-

wise-webapp/src/main/webapp/jsp/mindmapList.jsp

@@ -15,6 +15,8 @@
 
     <script type="text/javascript" language="javascript" src="js/jquery-2.1.0.min.js"></script>
     <script type="text/javascript" language="javascript" src="bootstrap/js/bootstrap.js"></script>
+    <script type="text/javascript" language="javascript" src="bootstrap/js/bootstrap-colorpicker.js"></script>
+
     <script src="js/less.js" type="text/javascript"></script>
 
     <!--jQuery DataTables-->
@@ -50,11 +52,11 @@
                     },
                     {
                         sTitle: "<spring:message code="NAME"/>",
-                        sWidth: "270px",
+                        sWidth:"430px",
                         bUseRendered: false,
                         mDataProp: "title",
                         fnRender: function (obj) {
-                            return '<a href="c/maps/' + obj.aData.id + '/edit">' + $('<span></span>').text(obj.aData.title).html() + '</a>';
+                            return '<a class="mindmapName" value="'+ obj.aData.id +'" href="c/maps/' + obj.aData.id + '/edit">' + $('<span></span>').text(obj.aData.title).html() + '</a>' + labelTagsAsHtml(obj.aData.labels);
                         }
                     },
                     {
@@ -86,6 +88,8 @@
                 bStateSave: true
             });
 
+            $('#colorGroup').colorpicker();
+
             // Customize search action ...
             $('#mindmapListTable_filter').appendTo("#tableActions");
             $('#mindmapListTable_filter input').addClass('input-small search-query form-control');
@@ -130,18 +134,18 @@
     <div class="row">
         <div class="col-md-2" id="foldersContainer">
             <ul class="nav nav-pills nav-stacked">
-                <li data-filter="all" class="active"><a href="#"><i
+                <li data-filter="all" class="active" style="display: none"><a href="#"><i
                         class="glyphicon glyphicon-inbox glyphicon-white"></i>
                     <spring:message
                             code="ALL_MAPS"/></a></li>
-                <li data-filter="my_maps"><a href="#"><i class="glyphicon glyphicon-user"></i> <spring:message
+                <li data-filter="my_maps" style="display: none"><a href="#"><i class="glyphicon glyphicon-user"></i> <spring:message
                         code="MY_MAPS"/></a>
                 </li>
-                <li data-filter="shared_with_me"><a href="#"><i class="glyphicon glyphicon-share"></i> <spring:message
+                <li data-filter="shared_with_me" style="display: none"><a href="#"><i class="glyphicon glyphicon-share"></i> <spring:message
                         code="SHARED_WITH_ME"/></a></li>
-                <li data-filter="starred"><a href="#"><i class="glyphicon glyphicon-star"></i> <spring:message
+                <li data-filter="starred" style="display: none"><a href="#"><i class="glyphicon glyphicon-star"></i> <spring:message
                         code="STARRED"/></a></li>
-                <li data-filter="public"><a href="#"><i class="glyphicon glyphicon-globe"></i> <spring:message
+                <li data-filter="public" style="display: none"><a href="#"><i class="glyphicon glyphicon-globe"></i> <spring:message
                         code="PUBLIC_MAPS"/></a>
                 </li>
             </ul>
@@ -166,6 +170,23 @@
                 </button>
             </div>
 
+            <div class="btn-group">
+                <button id='addLabelButton' class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
+                    <i class="glyphicon glyphicon-tag glyphicon-white"></i>
+                    <spring:message code="LABEL"/>
+                    <span class="caret"></span>
+                </button>
+
+                <ul id="labelList" class="dropdown-menu">
+                    <li id="createLabelBtn">
+                        <a href="#" onclick="return false">
+                            <i class="glyphicon glyphicon-plus"></i>
+                            <spring:message code="CREATE"/>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
             <div class="btn-group act-multiple" id="deleteBtn" style="display:none">
                 <button class="btn btn-primary"><i class="glyphicon glyphicon-trash glyphicon-white"></i>
                     <spring:message
@@ -282,6 +303,45 @@
     </div>
 </div>
 
+<!-- New label dialog -->
+<div id="new-folder-dialog-modal" title="<spring:message code="ADD_NEW_LABEL"/>" class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button class="close" data-dismiss="modal">x</button>
+                <h3><spring:message code="NEW_LABEL_MSG"/></h3>
+            </div>
+            <div class="modal-body">
+                <div class="errorMessage"></div>
+                <form class="form-horizontal">
+                    <fieldset>
+                        <div class="form-group">
+                            <label class="col-md-3 control-label" for="newLabelTitle"><spring:message code="NAME"/>:</label>
+                            <div class="col-md-8">
+                                <input class="form-control" name="title" id="newLabelTitle" type="text" required="required"
+                                       placeholder="<spring:message code="LABEL_NAME_HINT"/>" autofocus="autofocus" maxlength="30"/>
+                            </div>
+                        </div>
+                        <div id="colorGroup" class="form-group">
+                            <label class="col-md-3 control-label" for="colorChooser"><spring:message code="COLOR"/>:</label>
+                            <div class="col-md-1">
+                                <input class="form-control" name="color" id="colorChooser" style="display: none" type="text" required="required" value="#000000"/>
+                                <span class="input-group-addon colorInput"><i></i></span>
+                            </div>
+                        </div>
+                    </fieldset>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary btn-accept" data-loading-text="<spring:message
+                        code="SAVING"/>"><spring:message
+                        code="CREATE"/></button>
+                <button class="btn btn-cancel" data-dismiss="modal"><spring:message code="CANCEL"/></button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Duplicate map dialog -->
 <div id="duplicate-dialog-modal" class="modal fade">
     <div class="modal-dialog">
@@ -391,6 +451,29 @@
     </div>
 </div>
 
+<!-- Delete label dialog -->
+<div id="delete-label-dialog-modal" class="modal fade">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button class="close" data-dismiss="modal">x</button>
+                <h3><spring:message code="DELETE"/></h3>
+            </div>
+            <div class="modal-body">
+                <div class="alert alert-block">
+                    <h4 class="alert-heading"><spring:message code="WARNING"/>!</h4><spring:message code="DELETE_LABELS_WARNING"/>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary btn-accept" data-loading-text="<spring:message
+                        code="SAVING"/> ..."><spring:message
+                        code="DELETE"/></button>
+                <button class="btn btn-cancel" data-dismiss="modal"><spring:message code="CANCEL"/></button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <!-- Info map dialog -->
 <div id="info-dialog-modal" class="modal fade">
     <div class="modal-dialog">
@@ -508,5 +591,6 @@
     </div>
 </div>
 
+</div>
 </body>
 </html>