mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-22 14:17:57 +01:00
fixing ui
This commit is contained in:
Ezequiel Bergamaschi
parent
9e8f73df99
commit
7299c7d506
@ -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 {
|
||||
margin-top: -20px;
|
||||
}
|
||||
.nav-list li {
|
||||
.nav-pills li {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
}
|
||||
.nav-list a, .nav-header {
|
||||
margin-top: 4px;
|
||||
border: 1px solid rgb(213, 207, 207);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 1px 3px #888888;
|
||||
}
|
||||
.nav-header {
|
||||
background-color: #eee;
|
||||
.nav-pills {
|
||||
width: 108%;
|
||||
}
|
||||
.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;
|
||||
top: 1px;
|
||||
left: 3px;
|
||||
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 {
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user