Merged feature/WISE-211-iconSupportOnLabels into develop
This commit is contained in:
Paulo Gustavo Veiga
@@ -352,8 +352,50 @@ abbr[title] {
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
#footerContainer > li.active {
|
||||
padding:0px;
|
||||
margin:0px;
|
||||
}
|
||||
|
||||
#foldersContainer > ul > li > a {
|
||||
padding: 8px 15px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ----------------------------- Icons ----------------------------------- */
|
||||
|
||||
#defaultIcon {
|
||||
background: #eee;
|
||||
border: 1px solid #ccc !important;
|
||||
}
|
||||
|
||||
#defaultIcon:hover {
|
||||
background-color: #C8C8C8;
|
||||
}
|
||||
|
||||
.colorInput:hover {
|
||||
background-color: #C8C8C8;
|
||||
}
|
||||
|
||||
.bs-glyphicons > ul {
|
||||
padding-left: 10px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.bs-glyphicons > ul > li {
|
||||
float: left;
|
||||
width: 12%;
|
||||
height: 20%;
|
||||
padding: 10px;
|
||||
font-size: 10px;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
border: 1px solid #fff;
|
||||
background-color: #f9f9f9;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bs-glyphicons > ul > li:hover {
|
||||
background-color: #C8C8C8;
|
||||
}
|
||||
@@ -66,7 +66,6 @@ jQuery.fn.dataTableExt.removeSelectedRows = function () {
|
||||
updateStatusToolbar();
|
||||
};
|
||||
|
||||
|
||||
jQuery.fn.dialogForm = function (options) {
|
||||
|
||||
var containerId = this[0].id;
|
||||
@@ -78,7 +77,8 @@ jQuery.fn.dialogForm = function (options) {
|
||||
|
||||
// Clear form values ...
|
||||
if (options.clearForm == undefined || options.clearForm) {
|
||||
$("#" + containerId).find('input[name!="color"]').val('');
|
||||
//FIXME: icon and color should be handled as exceptions..
|
||||
$("#" + containerId).find('input[name!="color"]input[name!="iconName"]').val('');
|
||||
}
|
||||
|
||||
// Clear button "Saving..." state ...
|
||||
@@ -177,7 +177,6 @@ jQuery.fn.dialogForm = function (options) {
|
||||
|
||||
};
|
||||
|
||||
|
||||
// Update toolbar events ...
|
||||
function updateStatusToolbar() {
|
||||
|
||||
@@ -301,10 +300,15 @@ $(function () {
|
||||
postUpdate: function(data, id) {
|
||||
createLabelItem(data, id);
|
||||
if (mapIds.length > 0) {
|
||||
linkLabelToMindmap(mapIds, {id: id, title: data.title, color: data.color});
|
||||
linkLabelToMindmap(mapIds, {id: id, title: data.title, color: data.color, icon: data.icon});
|
||||
}
|
||||
}
|
||||
});
|
||||
// Setting sizes to label icon list
|
||||
var dropDownHeight = $(window).height()/3;
|
||||
$("#labelIconItems ul").height(dropDownHeight);
|
||||
var dropDownWidth = $(window).width()/3;
|
||||
$("#labelIconItems ul").width(dropDownWidth);
|
||||
}
|
||||
);
|
||||
|
||||
@@ -531,7 +535,28 @@ $(function () {
|
||||
$("#foldersContainer ul").css('overflow-x', 'hidden');
|
||||
$("#foldersContainer ul").height(maxHeight);
|
||||
|
||||
})
|
||||
});
|
||||
|
||||
//init popovers...
|
||||
var icons = $(".bs-glyphicons-list li");
|
||||
icons.each(function() {
|
||||
$(this).popover({
|
||||
animation: true,
|
||||
placement: "auto",
|
||||
trigger: 'hover',
|
||||
//FIXME: Which is the best way to use messages.properties here?
|
||||
content: ($(this).attr('class').replace('glyphicon glyphicon-',''))
|
||||
})
|
||||
});
|
||||
|
||||
icons.on("click", function(){
|
||||
var defaultIcon = $("#defaultIcon");
|
||||
//remove current icon
|
||||
defaultIcon.find("i").remove();
|
||||
var myClass = $(this).attr("class");
|
||||
defaultIcon.prepend("<i class='" + myClass +"'></i>");
|
||||
defaultIcon.closest("#iconGroup").find('input').val(myClass);
|
||||
});
|
||||
});
|
||||
|
||||
/*--------------------------------------------- Label actions --------------------------------------------------**/
|
||||
@@ -540,7 +565,7 @@ function createLabelItem(data, id) {
|
||||
var labelItem = $("<li data-filter=\"" + data.title + "\">");
|
||||
labelItem.append(
|
||||
"<a href=\"#\"> " +
|
||||
"<i class=\"glyphicon glyphicon-tag labelIcon\"></i>" +
|
||||
"<i class=\"" + data.iconName + " 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>" +
|
||||
@@ -611,9 +636,10 @@ function prepareLabelList(labels) {
|
||||
//append items to dropdown
|
||||
$.each(labels, function(index, value) {
|
||||
labelList.append(
|
||||
$('<li class="chooseLabel"></li>').attr('value', value.id).attr('color', value.color)
|
||||
$('<li class="chooseLabel"></li>').attr('value', value.id).attr('color', value.color).attr('icon', value.icon)
|
||||
.append(
|
||||
'<a href="#" onclick="return false">' +
|
||||
"<div class='labelIcon " + value.iconName + "'></div>" +
|
||||
"<div class='labelColor' style='background: " + value.color + "'></div>" +
|
||||
"<div class='labelName'>" + value.title + "</div>" +
|
||||
'</a>')
|
||||
|
||||
132
wise-webapp/src/main/webapp/jsp/labelIconList.jsp
Normal file
132
wise-webapp/src/main/webapp/jsp/labelIconList.jsp
Normal file
@@ -0,0 +1,132 @@
|
||||
<%@page pageEncoding="UTF-8" %>
|
||||
|
||||
<ul class="bs-glyphicons-list">
|
||||
<li class="glyphicon glyphicon-asterisk"></li>
|
||||
<li class="glyphicon glyphicon-plus"></li>
|
||||
<li class="glyphicon glyphicon-euro"></li>
|
||||
<li class="glyphicon glyphicon-minus"></li>
|
||||
<li class="glyphicon glyphicon-cloud"></li>
|
||||
<li class="glyphicon glyphicon-envelope"></li>
|
||||
<li class="glyphicon glyphicon-pencil"></li>
|
||||
<li class="glyphicon glyphicon-glass"></li>
|
||||
<li class="glyphicon glyphicon-music"></li>
|
||||
<li class="glyphicon glyphicon-search"></li>
|
||||
<li class="glyphicon glyphicon-heart"></li>
|
||||
<li class="glyphicon glyphicon-star"></li>
|
||||
<li class="glyphicon glyphicon-star-empty"></li>
|
||||
<li class="glyphicon glyphicon-user"></li>
|
||||
<li class="glyphicon glyphicon-film"></li>
|
||||
<li class="glyphicon glyphicon-ok"></li>
|
||||
<li class="glyphicon glyphicon-remove"></li>
|
||||
<li class="glyphicon glyphicon-signal"></li>
|
||||
<li class="glyphicon glyphicon-cog"></li>
|
||||
<li class="glyphicon glyphicon-trash"></li>
|
||||
<li class="glyphicon glyphicon-home"></li>
|
||||
<li class="glyphicon glyphicon-file"></li>
|
||||
<li class="glyphicon glyphicon-time"></li>
|
||||
<li class="glyphicon glyphicon-download-alt"></li>
|
||||
<li class="glyphicon glyphicon-download"></li>
|
||||
<li class="glyphicon glyphicon-upload"></li>
|
||||
<li class="glyphicon glyphicon-inbox"></li>
|
||||
<li class="glyphicon glyphicon-repeat"></li>
|
||||
<li class="glyphicon glyphicon-refresh"></li>
|
||||
<li class="glyphicon glyphicon-list-alt"></li>
|
||||
<li class="glyphicon glyphicon-lock"></li>
|
||||
<li class="glyphicon glyphicon-flag"></li>
|
||||
<li class="glyphicon glyphicon-headphones"></li>
|
||||
<li class="glyphicon glyphicon-qrcode"></li>
|
||||
<li class="glyphicon glyphicon-barcode"></li>
|
||||
<li class="glyphicon glyphicon-tag"></li>
|
||||
<li class="glyphicon glyphicon-tags"></li>
|
||||
<li class="glyphicon glyphicon-book"></li>
|
||||
<li class="glyphicon glyphicon-bookmark"></li>
|
||||
<li class="glyphicon glyphicon-print"></li>
|
||||
<li class="glyphicon glyphicon-camera"></li>
|
||||
<li class="glyphicon glyphicon-list"></li>
|
||||
<li class="glyphicon glyphicon-facetime-video"></li>
|
||||
<li class="glyphicon glyphicon-picture"></li>
|
||||
<li class="glyphicon glyphicon-map-marker"></li>
|
||||
<li class="glyphicon glyphicon-adjust"></li>
|
||||
<li class="glyphicon glyphicon-tint"></li>
|
||||
<li class="glyphicon glyphicon-edit"></li>
|
||||
<li class="glyphicon glyphicon-share"></li>
|
||||
<li class="glyphicon glyphicon-check"></li>
|
||||
<li class="glyphicon glyphicon-chevron-left"></li>
|
||||
<li class="glyphicon glyphicon-chevron-right"></li>
|
||||
<li class="glyphicon glyphicon-plus-sign"></li>
|
||||
<li class="glyphicon glyphicon-minus-sign"></li>
|
||||
<li class="glyphicon glyphicon-remove-sign"></li>
|
||||
<li class="glyphicon glyphicon-ok-sign"></li>
|
||||
<li class="glyphicon glyphicon-question-sign"></li>
|
||||
<li class="glyphicon glyphicon-info-sign"></li>
|
||||
<li class="glyphicon glyphicon-screenshot"></li>
|
||||
<li class="glyphicon glyphicon-remove-circle"></li>
|
||||
<li class="glyphicon glyphicon-ok-circle"></li>
|
||||
<li class="glyphicon glyphicon-ban-circle"></li>
|
||||
<li class="glyphicon glyphicon-arrow-left"></li>
|
||||
<li class="glyphicon glyphicon-arrow-right"></li>
|
||||
<li class="glyphicon glyphicon-arrow-up"></li>
|
||||
<li class="glyphicon glyphicon-arrow-down"></li>
|
||||
<li class="glyphicon glyphicon-share-alt"></li>
|
||||
<li class="glyphicon glyphicon-exclamation-sign"></li>
|
||||
<li class="glyphicon glyphicon-gift"></li>
|
||||
<li class="glyphicon glyphicon-leaf"></li>
|
||||
<li class="glyphicon glyphicon-fire"></li>
|
||||
<li class="glyphicon glyphicon-eye-open"></li>
|
||||
<li class="glyphicon glyphicon-eye-close"></li>
|
||||
<li class="glyphicon glyphicon-warning-sign"></li>
|
||||
<li class="glyphicon glyphicon-plane"></li>
|
||||
<li class="glyphicon glyphicon-calendar"></li>
|
||||
<li class="glyphicon glyphicon-random"></li>
|
||||
<li class="glyphicon glyphicon-comment"></li>
|
||||
<li class="glyphicon glyphicon-magnet"></li>
|
||||
<li class="glyphicon glyphicon-chevron-up"></li>
|
||||
<li class="glyphicon glyphicon-chevron-down"></li>
|
||||
<li class="glyphicon glyphicon-shopping-cart"></li>
|
||||
<li class="glyphicon glyphicon-folder-close"></li>
|
||||
<li class="glyphicon glyphicon-folder-open"></li>
|
||||
<li class="glyphicon glyphicon-hdd"></li>
|
||||
<li class="glyphicon glyphicon-bullhorn"></li>
|
||||
<li class="glyphicon glyphicon-bell"></li>
|
||||
<li class="glyphicon glyphicon-certificate"></li>
|
||||
<li class="glyphicon glyphicon-thumbs-up"></li>
|
||||
<li class="glyphicon glyphicon-thumbs-down"></li>
|
||||
<li class="glyphicon glyphicon-hand-right"></li>
|
||||
<li class="glyphicon glyphicon-hand-left"></li>
|
||||
<li class="glyphicon glyphicon-hand-up"></li>
|
||||
<li class="glyphicon glyphicon-hand-down"></li>
|
||||
<li class="glyphicon glyphicon-circle-arrow-right"></li>
|
||||
<li class="glyphicon glyphicon-circle-arrow-left"></li>
|
||||
<li class="glyphicon glyphicon-circle-arrow-up"></li>
|
||||
<li class="glyphicon glyphicon-circle-arrow-down"></li>
|
||||
<li class="glyphicon glyphicon-globe"></li>
|
||||
<li class="glyphicon glyphicon-wrench"></li>
|
||||
<li class="glyphicon glyphicon-tasks"></li>
|
||||
<li class="glyphicon glyphicon-filter"></li>
|
||||
<li class="glyphicon glyphicon-briefcase"></li>
|
||||
<li class="glyphicon glyphicon-paperclip"></li>
|
||||
<li class="glyphicon glyphicon-heart-empty"></li>
|
||||
<li class="glyphicon glyphicon-link"></li>
|
||||
<li class="glyphicon glyphicon-phone"></li>
|
||||
<li class="glyphicon glyphicon-pushpin"></li>
|
||||
<li class="glyphicon glyphicon-usd"></li>
|
||||
<li class="glyphicon glyphicon-gbp"></li>
|
||||
<li class="glyphicon glyphicon-unchecked"></li>
|
||||
<li class="glyphicon glyphicon-flash"></li>
|
||||
<li class="glyphicon glyphicon-record"></li>
|
||||
<li class="glyphicon glyphicon-saved"></li>
|
||||
<li class="glyphicon glyphicon-send"></li>
|
||||
<li class="glyphicon glyphicon-floppy-disk"></li>
|
||||
<li class="glyphicon glyphicon-transfer"></li>
|
||||
<li class="glyphicon glyphicon-cutlery"></li>
|
||||
<li class="glyphicon glyphicon-header"></li>
|
||||
<li class="glyphicon glyphicon-compressed"></li>
|
||||
<li class="glyphicon glyphicon-earphone"></li>
|
||||
<li class="glyphicon glyphicon-phone-alt"></li>
|
||||
<li class="glyphicon glyphicon-tower"></li>
|
||||
<li class="glyphicon glyphicon-stats"></li>
|
||||
<li class="glyphicon glyphicon-copyright-mark"></li>
|
||||
<li class="glyphicon glyphicon-registration-mark"></li>
|
||||
<li class="glyphicon glyphicon-cloud-download"></li>
|
||||
<li class="glyphicon glyphicon-cloud-upload"></li>
|
||||
</ul>
|
||||
@@ -122,6 +122,12 @@
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--script type="text/javascript" language="javascript">
|
||||
$(function(){
|
||||
$("#labelIconList").load("jsp/labelIconList.jsp");
|
||||
});
|
||||
</script-->
|
||||
</head>
|
||||
<body>
|
||||
<jsp:include page="header.jsp">
|
||||
@@ -338,10 +344,23 @@
|
||||
<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"/>
|
||||
<input class="form-control" name="color" id="colorChooser" style="display: none" required="required" value="#000000"/>
|
||||
<span class="input-group-addon colorInput"><i></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="iconGroup" class="form-group">
|
||||
<label class="col-md-3 control-label" for="iconChooser"><spring:message code="ICON"/>:</label>
|
||||
<input class="form-control" name="iconName" id="iconChooser" style="display: none" required="required" value="glyphicon glyphicon-tag"/>
|
||||
<div class="col-md-1">
|
||||
<div class="btn dropdown-toggle" id="defaultIcon" data-toggle="dropdown">
|
||||
<i class="glyphicon glyphicon-tag"></i>
|
||||
</div>
|
||||
<div id="labelIconList" class="dropdown-menu bs-glyphicons"></div>
|
||||
<div id="labelIconItems" class="dropdown-menu bs-glyphicons">
|
||||
<jsp:include page="labelIconList.jsp"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user