vmario/wisemapping-open-source
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-open-source.git synced 2024-11-09 00:43:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve mindmaplist render.

Browse Source
This commit is contained in:
Paulo Gustavo Veiga 2012-05-20 12:28:10 -03:00
parent fe688be593
commit a4e6325b12
2 changed files with 78 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
wise-webapp/src/main/webapp/css/mymaps.less
View File

@ -29,47 +29,11 @@
-moz-border-radius: @radius; -moz-border-radius: @radius;
} }
/* ------------------------------ Tags ---------------------------------- */
@tags-width: 10%;
@tags-border-size: @base-border-size;
@tags-padding: @base-padding;
#tags {
width: @tags-width;
opacity: 0;
padding: @tags-padding;
float: left;
border-right: none;
position: absolute;
background: @base-color * 14.5;
border: @base-border-size solid @base-color * 14;
h2 {
font-size: @base-font-size * 1.5;
margin-top: 0px;
}
div.tag {
margin-bottom: @base-margin;
.ui-icon {
float:left;
margin-right: @base-margin / 2;
position: relative;
top: -2px;
}
}
#tags-actions {
margin-top: @base-margin;
}
}
/* ------------------------------ Table --------------------------------- */ /* ------------------------------ Table --------------------------------- */
@table-gap: 2%; @table-gap: 2%;
@table-width: 100% - (@tags-width + (@tags-padding / @body-width * 100) + @table-gap); @table-width: 100%;
#map-table { #map-table {
width: 100% !important; width: 100% !important;
@ -81,21 +45,6 @@ input#selectAll {
left: 4px; left: 4px;
} }
/* ----------------------------- Toolbar -------------------------------- */
#toolbar {
border: @tags-border-size solid @base-color * 11;
padding: @base-padding;
margin-bottom: @base-margin;
}
/* ----------------------------- Buttons -------------------------------- */
#buttons {
margin-left: @tags-width;
margin-bottom: @base-margin;
}
@even-color: #FFFFFF; @even-color: #FFFFFF;
@sorting-even-color: #EAEBFF; @sorting-even-color: #EAEBFF;
@odd-color: #E2E4FF; @odd-color: #E2E4FF;
@ -114,13 +63,6 @@ input#selectAll {
-moz-border-radius: @radius; -moz-border-radius: @radius;
} }
.dataTables_wrapper {
position: relative;
min-height: 302px;
clear: both;
zoom: 1; /* Feeling sorry for IE */
}
.dataTables_processing { .dataTables_processing {
position: absolute; position: absolute;
top: 50%; top: 50%;
@ -137,90 +79,24 @@ input#selectAll {
background-color: white; background-color: white;
} }
.dataTables_length {
float: right;
margin-bottom: 10px;
}
.dataTables_filter { .dataTables_filter {
text-align: right; float:right;
margin-bottom: @base-margin; }
/* Pagination Styles */
#paginateContainer {
height:40px;
width:100%;
} }
.dataTables_info { .dataTables_length {
width: 60%; float: right;
float: left;
margin-top: @base-margin;
} }
.dataTables_paginate { .dataTables_paginate {
width: 44px; display: none;
float: right;
text-align: right;
margin-top: @base-margin;
} }
/* Pagination nested */
.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
height: 19px;
width: 19px;
margin-left: 3px;
float: left;
}
.paginate_disabled_previous {
background-image: url('../images/back_disabled.jpg');
}
.paginate_enabled_previous {
background-image: url('../images/back_enabled.jpg');
}
.paginate_disabled_next {
background-image: url('../images/forward_disabled.jpg');
}
.paginate_enabled_next {
background-image: url('../images/forward_enabled.jpg');
}
/* ---------------------------- Dislpay --------------------------------- */
table.display {
margin: 0 auto;
clear: both;
float:right;
width: 100%;
border: @base-border-size solid @base-color * 5;
thead th {
padding: 3px 18px 3px 10px;
border-bottom: 1px solid black;
font-weight: bold;
cursor: pointer;
}
tfoot th {
padding: 3px 18px 3px 10px;
border-top: 1px solid black;
font-weight: bold;
}
tr.heading2 td {
border-bottom: 1px solid #aaa;
}
td {
padding: 10px 10px;
}
td.center {
text-align: center;
}
}
/* ---------------------------- Sorting --------------------------------- */ /* ---------------------------- Sorting --------------------------------- */
.sorting_asc { .sorting_asc {
@ -249,77 +125,40 @@ table.display {
/* ----------------------------- Misc ----------------------------------- */ /* ----------------------------- Misc ----------------------------------- */
.dataTables_scroll {
clear: both;
}
.dataTables_scrollBody {
margin-top: -1px;
}
.top .dataTables_info {
float: none;
}
.clear {
clear: both;
}
.dataTables_empty { .dataTables_empty {
text-align: center; text-align: center;
} }
tfoot input { /* New styles */
margin: 0.5em 0;
width: 100%;
color: #444;
}
tfoot input.search_init {
color: #999;
}
td.group {
background-color: #d1cfd0;
border-bottom: 2px solid #A19B9E;
border-top: 2px solid #A19B9E;
}
td.details {
background-color: #d1cfd0;
border: 2px solid #A19B9E;
}
.example_alt_pagination div.dataTables_info {
width: 40%;
}
.paging_full_numbers {
width: 400px;
height: 22px;
line-height: 22px;
}
.paging_full_numbers span.paginate_button,
.paging_full_numbers span.paginate_active {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
}
.paging_full_numbers span.paginate_button {
background-color: #ddd;
}
.paging_full_numbers span.paginate_button:hover {
background-color: #ccc;
}
.row-selected { .row-selected {
background-color: #f5f5f5; background-color: #f5f5f5;
} }
#buttonsToolbar {
margin: 30px 0px 10px 0px
}
#tableActions {
float: right;
width: 500px;
white-space:nowrap;
}
#tableActions > div {
float: right;
margin-left:5px;
}
#pageInfo {
padding-top:5px;
padding-left:8px;
font-weight: bold;
}
#tableFooter {
width:100%;
height:50px;
white-space:nowrap;
}

69
wise-webapp/src/main/webapp/jsp/mindmapList.jsp
View File

@ -11,10 +11,10 @@
<link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet/less" type="text/css" href="css/mymaps.less"/> <link rel="stylesheet/less" type="text/css" href="css/mymaps.less"/>
<script src="js/less.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript" language="javascript" src="js/jquery-1.7.2.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 src="js/less.js" type="text/javascript"></script>
<!--jQuery DataTables--> <!--jQuery DataTables-->
@ -70,45 +70,39 @@
} }
} }
], ],
AutoWidth : false, bAutoWidth : false,
oLanguage : { oLanguage : {
"sSearch" : "Search", "sSearch" : "",
"sInfo" : "Page _END_ of _TOTAL_" "sInfo" : "_START_-_END_ of _TOTAL_"
}, },
bStateSave:true bStateSave:true
}); });
$('#mindmapListTable_filter').appendTo("#toolbar"); // Customize search action ...
$("#mindmapListTable_length").appendTo("#actionButtons"); $('#mindmapListTable_filter').appendTo("#tableActions");
$('#mindmapListTable_filter input').addClass('input-medium search-query');
$('#mindmapListTable_filter input').attr('placeholder', 'Search');
$("#mindmapListTable_info").appendTo("#pageInfo");
// Re-arrange pagination actions ...
$("#tableFooter").appendTo("#mindmapListTable_wrapper");
$("#mindmapListTable_length").appendTo("#tableFooter");
$('#mindmapListTable_length select').addClass('span1');
$('input:checkbox[id="selectAll"]').click(function() { $('input:checkbox[id="selectAll"]').click(function() {
$("#mindmapListTable").dataTableExt.selectAllMaps(); $("#mindmapListTable").dataTableExt.selectAllMaps();
}); });
// Hack for changing the lagination buttons ...
$('#nPageBtn').click(function() {
$('#mindmapListTable_next').click();
}); });
</script> $('#pPageBtn').click(function() {
$('#mindmapListTable_previous').click();
<!--Tags-->
<script type="text/javascript" charset="utf-8">
var tags = ['ThinkMapping', 'Akostic', 'Clients', 'Favoris'];
$(function() {
for (i in tags) {
var outerDiv = $('<div class="tag">' + tags[i] + '</div>');
var icon = $('<span class="ui-icon ui-icon-folder-collapsed"></span>');
outerDiv.append(icon);
$("#tags-list").append(outerDiv);
}
$("#tags-actions button").button({
icons: { primary: "ui-icon-plusthick" }
}); });
$("#tags-list .tag").each(function(index) {
$(this).click(function() {
console.log("ddfsfds");
})
})
}); });
</script> </script>
@ -248,7 +242,6 @@
}); });
// Register time update functions .... // Register time update functions ....
setTimeout(function() { setTimeout(function() {
jQuery("abbr.timeago").timeago() jQuery("abbr.timeago").timeago()
@ -287,15 +280,24 @@
</button> </button>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li id="duplicateBtn"><a href="#" onclick="return false"><i class="icon-plus-sign"></i> Duplicate</a></li> <li id="duplicateBtn"><a href="#" onclick="return false"><i class="icon-plus-sign"></i>
Duplicate</a></li>
<li id="renameBtn"><a href="#" onclick="return false"><i class="icon-edit"></i> Rename</a></li> <li id="renameBtn"><a href="#" onclick="return false"><i class="icon-edit"></i> Rename</a></li>
<li id="printBtn"><a href="#" onclick="return false"><i class="icon-print"></i> Print</a></li> <li id="printBtn"><a href="#" onclick="return false"><i class="icon-print"></i> Print</a></li>
<li id="publishMap"><a href="#" onclick="return false"><i class="icon-globe"></i>Publish</a></li> <li id="publishMap"><a href="#" onclick="return false"><i class="icon-globe"></i>Publish</a></li>
<li id="exportBtn"><a href="#" onclick="return false"><i class="icon-download-alt"></i> Export</a></li> <li id="exportBtn"><a href="#" onclick="return false"><i class="icon-download-alt"></i> Export</a>
</li>
<li id="shareMap"><a href="#" onclick="return false"><i class="icon-share"></i> Share</a></li> <li id="shareMap"><a href="#" onclick="return false"><i class="icon-share"></i> Share</a></li>
<li id="tagMap"><a href="#" onclick="return false"><i class="icon-tags"></i> Tag</a></li> <li id="tagMap"><a href="#" onclick="return false"><i class="icon-tags"></i> Tag</a></li>
</ul> </ul>
</div> </div>
<div id="tableActions" class="btn-toolbar">
<div class="btn-group" id="pageButtons">
<button class="btn" id="pPageBtn"><strong>&lt;</strong></button>
<button class="btn" id="nPageBtn"><strong>&gt;</strong></button>
</div>
<div id="pageInfo"></div>
</div>
</div> </div>
<div> <div>
@ -434,13 +436,14 @@
</div> </div>
</div> </div>
<div>
<div id="map-table"> <div id="map-table">
<table class="table table-bordered" id="mindmapListTable"> <table class="table table-bordered" id="mindmapListTable">
</table> </table>
<div id="tableFooter" class="form-inline"></div>
</div> </div>
</div>
</div> </div>
</div> </div>