fixing ui

This commit is contained in:
Ezequiel Bergamaschi 2014-02-11 00:18:46 -03:00
parent 9e8f73df99
commit 7299c7d506
3 changed files with 114 additions and 35 deletions

View File

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

View File

@ -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 + "\">"); var labelItem = $("<li data-filter=\"" + data.title + "\">");
labelItem.append( labelItem.append(
"<a href=\"#\"> " + "<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='labelColor' style='background: " + data.color + "'></div>" +
"<div class='labelName labelNameList'>" + data.title + "</div>" + "<div class='labelName labelNameList'>" + data.title + "</div>" +
"<button id='deleteLabelBtn' class='close closeLabel' labelid=\""+ labelId +"\">x</button>" + "<button id='deleteLabelBtn' class='close closeLabel' labelid=\""+ labelId +"\">x</button>" +
@ -624,13 +631,9 @@ function linkLabelToMindmap(mapIds, label) {
} }
//animations... //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') { if ($(this).attr('class') != 'active') {
$(this).animate({left: '+=8px'}, 'fast'); $(this).animate({left: '+=8px'}, 'fast');
} }
}); });
$(document).on('mouseleave', '#foldersContainer li[class!="active"][class!="nav-header"]', function (event) {
$(this).animate({left: '-=8px'}, 'fast');
});

View File

@ -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="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.js"></script>
<script type="text/javascript" language="javascript" src="bootstrap/js/bootstrap-colorpicker.js"></script>
<script src="js/less.js" type="text/javascript"></script> <script src="js/less.js" type="text/javascript"></script>
<!--jQuery DataTables--> <!--jQuery DataTables-->
@ -50,11 +52,11 @@
}, },
{ {
sTitle: "<spring:message code="NAME"/>", sTitle: "<spring:message code="NAME"/>",
sWidth: "270px", sWidth:"430px",
bUseRendered: false, bUseRendered: false,
mDataProp: "title", mDataProp: "title",
fnRender: function (obj) { 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 bStateSave: true
}); });
$('#colorGroup').colorpicker();
// Customize search action ... // Customize search action ...
$('#mindmapListTable_filter').appendTo("#tableActions"); $('#mindmapListTable_filter').appendTo("#tableActions");
$('#mindmapListTable_filter input').addClass('input-small search-query form-control'); $('#mindmapListTable_filter input').addClass('input-small search-query form-control');
@ -130,18 +134,18 @@
<div class="row"> <div class="row">
<div class="col-md-2" id="foldersContainer"> <div class="col-md-2" id="foldersContainer">
<ul class="nav nav-pills nav-stacked"> <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> class="glyphicon glyphicon-inbox glyphicon-white"></i>
<spring:message <spring:message
code="ALL_MAPS"/></a></li> 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> code="MY_MAPS"/></a>
</li> </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> 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> 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> code="PUBLIC_MAPS"/></a>
</li> </li>
</ul> </ul>
@ -166,6 +170,23 @@
</button> </button>
</div> </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"> <div class="btn-group act-multiple" id="deleteBtn" style="display:none">
<button class="btn btn-primary"><i class="glyphicon glyphicon-trash glyphicon-white"></i> <button class="btn btn-primary"><i class="glyphicon glyphicon-trash glyphicon-white"></i>
<spring:message <spring:message
@ -282,6 +303,45 @@
</div> </div>
</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 --> <!-- Duplicate map dialog -->
<div id="duplicate-dialog-modal" class="modal fade"> <div id="duplicate-dialog-modal" class="modal fade">
<div class="modal-dialog"> <div class="modal-dialog">
@ -391,6 +451,29 @@
</div> </div>
</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 --> <!-- Info map dialog -->
<div id="info-dialog-modal" class="modal fade"> <div id="info-dialog-modal" class="modal fade">
<div class="modal-dialog"> <div class="modal-dialog">
@ -508,5 +591,6 @@
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>