mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-09-12 07:10:07 +02:00
fixing ui
This commit is contained in:
parent
6b73dd10b1
commit
788cb1ea98
@ -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 {
|
||||||
|
@ -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');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user