- fixed some UI animation issues, reduced animations, #607 - refactored system body expand animation, #607 - reduced grid opacity, #604 - updated JS lib "VelocityJS" `v1.4.1` -> `v1.5.1`
This commit is contained in:
Mark Friedrich
@@ -1369,7 +1369,6 @@ class MapModel extends AbstractMapTrackingModel {
|
||||
|
||||
// check if a system has active characters
|
||||
foreach($activeUserCharactersData as $key => $activeUserCharacterData){
|
||||
|
||||
if(isset($activeUserCharacterData->log)){
|
||||
// user as log data
|
||||
if($activeUserCharacterData->log->system->id == $systemData->systemId){
|
||||
|
||||
@@ -30,7 +30,7 @@ requirejs.config({
|
||||
text: 'lib/requirejs/text', // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
|
||||
mustache: 'lib/mustache.min', // v1.0.0 Javascript template engine - http://mustache.github.io
|
||||
localForage: 'lib/localforage.min', // v1.4.2 localStorage library - https://mozilla.github.io/localForage
|
||||
velocity: 'lib/velocity.min', // v1.4.1 animation engine - http://julian.com/research/velocity
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
|
||||
@@ -42,8 +42,6 @@ define([
|
||||
systemBodyItemStatusClass: 'pf-user-status', // class for player status in system body
|
||||
systemBodyItemNameClass: 'pf-system-body-item-name', // class for player name in system body
|
||||
systemBodyRightClass: 'pf-system-body-right', // class for player ship name in system body
|
||||
systemTooltipInnerClass: 'pf-system-tooltip-inner', // class for system tooltip content
|
||||
systemTooltipInnerIdPrefix: 'pf-system-tooltip-inner-', // id prefix for system tooltip content
|
||||
dynamicElementWrapperId: 'pf-dialog-wrapper', // wrapper div for dynamic content (dialogs, context-menus,...)
|
||||
|
||||
// endpoint classes
|
||||
@@ -119,8 +117,6 @@ define([
|
||||
connectionTypes: Init.connectionTypes
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* updates a system with current information
|
||||
* @param map
|
||||
@@ -128,7 +124,6 @@ define([
|
||||
* @param currentUserIsHere boolean - if the current user is in this system
|
||||
*/
|
||||
$.fn.updateSystemUserData = function(map, data, currentUserIsHere){
|
||||
|
||||
let system = $(this);
|
||||
let systemId = system.attr('id');
|
||||
|
||||
@@ -207,21 +202,17 @@ define([
|
||||
// user count changed -> change tooltip content
|
||||
|
||||
// set tooltip color
|
||||
let highlight = false;
|
||||
let tooltipIconClass = '';
|
||||
let highlight = '';
|
||||
if(userCounter > oldUserCount){
|
||||
highlight = 'good';
|
||||
tooltipIconClass = 'fa-caret-up';
|
||||
}else if(userCounter < oldUserCount){
|
||||
highlight = 'bad';
|
||||
tooltipIconClass = 'fa-caret-down';
|
||||
}
|
||||
|
||||
let tooltipOptions = {
|
||||
trigger: 'manual',
|
||||
id: systemId,
|
||||
systemId: systemId,
|
||||
highlight: highlight,
|
||||
title: '<i class="fas ' + tooltipIconClass + '"></i> ' + userCounter
|
||||
userCount: userCounter
|
||||
};
|
||||
|
||||
// show system head
|
||||
@@ -231,13 +222,12 @@ define([
|
||||
duration: 50,
|
||||
display: 'inline-block',
|
||||
progress: function(){
|
||||
//revalidate element size and repaint
|
||||
//re-validate element size and repaint
|
||||
map.revalidate( systemId );
|
||||
},
|
||||
complete: function(){
|
||||
// show system body
|
||||
system.toggleBody(true, map, {complete: function(system){
|
||||
// complete callback function
|
||||
// show active user tooltip
|
||||
system.toggleSystemTooltip('show', tooltipOptions);
|
||||
}});
|
||||
@@ -322,131 +312,6 @@ define([
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* show/hide systems tooltip
|
||||
* @param show
|
||||
* @param options
|
||||
*/
|
||||
$.fn.toggleSystemTooltip = function(show, options){
|
||||
let colorClasses = {
|
||||
good: 'txt-color-green',
|
||||
bad: 'txt-color-red'
|
||||
};
|
||||
|
||||
return this.each(function(){
|
||||
let system = $(this);
|
||||
let tooltipId = 0;
|
||||
let tooltipClassHighlight = false;
|
||||
|
||||
// do not update tooltips while a system is dragged
|
||||
if(system.hasClass('jsPlumb_dragged')){
|
||||
// skip system
|
||||
return true;
|
||||
}
|
||||
|
||||
if(show === 'destroy'){
|
||||
system.tooltip( show );
|
||||
system.removeAttr('data-original-title');
|
||||
}else if(show === 'hide'){
|
||||
system.tooltip( show );
|
||||
} else if(show === 'toggle'){
|
||||
system.tooltip( show );
|
||||
}else if(show === 'show'){
|
||||
|
||||
// check if tooltip is currently visible
|
||||
let tooltipActive = (system.attr('aria-describedby') !== undefined);
|
||||
|
||||
if(options === undefined){
|
||||
options = {};
|
||||
}
|
||||
|
||||
// optional color highlight
|
||||
if(colorClasses.hasOwnProperty( options.highlight )){
|
||||
tooltipClassHighlight = colorClasses[ options.highlight ];
|
||||
}
|
||||
|
||||
if(
|
||||
tooltipActive === false &&
|
||||
options.id
|
||||
){
|
||||
|
||||
// init new tooltip
|
||||
tooltipId = config.systemTooltipInnerIdPrefix + options.id;
|
||||
|
||||
let template = '<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div id="' + tooltipId + '" class="tooltip-inner txt-color ' + config.systemTooltipInnerClass + '"></div>' +
|
||||
'</div>';
|
||||
|
||||
options.placement = getSystemTooltipPlacement(system);
|
||||
options.html = true;
|
||||
options.animation = true;
|
||||
options.template = template;
|
||||
options.viewport = system.parent('.' + config.mapClass);
|
||||
|
||||
system.attr('title', options.title);
|
||||
|
||||
system.tooltip(options);
|
||||
|
||||
system.tooltip(show);
|
||||
|
||||
if(tooltipClassHighlight !== false){
|
||||
// set tooltip observer and set new class after open -> due to transition effect
|
||||
|
||||
system.on('shown.bs.tooltip', function() {
|
||||
$('#' + tooltipId).addClass( tooltipClassHighlight );
|
||||
// remove observer -> color should not be changed every time a tooltip toggles e.g. dragging system
|
||||
$(this).off('shown.bs.tooltip');
|
||||
});
|
||||
}
|
||||
}else{
|
||||
// update/change/toggle tooltip text or color without tooltip reload
|
||||
|
||||
let tooltipInner = false;
|
||||
if(
|
||||
options.title ||
|
||||
tooltipClassHighlight !== false
|
||||
){
|
||||
tooltipInner = system.tooltip('fixTitle')
|
||||
.data('bs.tooltip')
|
||||
.$tip.find('.tooltip-inner');
|
||||
|
||||
if(options.title){
|
||||
tooltipInner.html( options.title );
|
||||
}
|
||||
|
||||
if(tooltipClassHighlight !== false){
|
||||
tooltipInner.removeClass( colorClasses.good + ' ' + colorClasses.bad).addClass(tooltipClassHighlight);
|
||||
}
|
||||
}
|
||||
|
||||
// update tooltip placement based on system position
|
||||
if (system.data('bs.tooltip')) {
|
||||
system.data('bs.tooltip').options.placement = getSystemTooltipPlacement(system);
|
||||
}
|
||||
|
||||
// show() can be forced
|
||||
if(options.show === true){
|
||||
system.tooltip('show');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* get tooltip position based on current system position
|
||||
* @param system
|
||||
* @returns {string}
|
||||
*/
|
||||
let getSystemTooltipPlacement = (system) => {
|
||||
let offsetParent = system.parent().offset();
|
||||
let offsetSystem = system.offset();
|
||||
|
||||
return (offsetSystem.top - offsetParent.top < 27) ? 'bottom' : 'top';
|
||||
};
|
||||
|
||||
/**
|
||||
* set or change the status of a system
|
||||
* @param status
|
||||
@@ -1007,6 +872,76 @@ define([
|
||||
checkMapSize(mapWrapper[0]);
|
||||
}
|
||||
|
||||
// system body expand -----------------------------------------------------------------------------------------
|
||||
mapWrapper.hoverIntent({
|
||||
over: function(e){
|
||||
let system = $(this).closest('.' + config.systemClass);
|
||||
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
|
||||
let systemId = system.attr('id');
|
||||
let systemBody = system.find('.' + config.systemBodyClass);
|
||||
|
||||
// bring system in front (increase zIndex)
|
||||
system.updateSystemZIndex();
|
||||
|
||||
// get ship counter and calculate expand height
|
||||
let userCount = parseInt(system.data('userCount'));
|
||||
let expandHeight = userCount * config.systemBodyItemHeight;
|
||||
|
||||
// calculate width
|
||||
let width = system[0].clientWidth;
|
||||
let minWidth = 150;
|
||||
let newWidth = width > minWidth ? width : minWidth; // in case of big systems
|
||||
|
||||
systemBody.velocity('stop').velocity(
|
||||
{
|
||||
height: expandHeight + 'px',
|
||||
width: newWidth,
|
||||
'min-width': minWidth + 'px'
|
||||
},{
|
||||
easing: 'easeInOutQuart',
|
||||
duration: 120,
|
||||
progress: function(){
|
||||
// repaint connections of current system
|
||||
map.revalidate(systemId);
|
||||
},
|
||||
complete: function(){
|
||||
map.revalidate(systemId);
|
||||
|
||||
// extend player name element
|
||||
let systemBody = $(this);
|
||||
let systemBodyItemNameWidth = newWidth - 50 - 10 - 20; // - bodyRight - icon - somePadding
|
||||
systemBody.find('.' + config.systemBodyItemNameClass).css({width: systemBodyItemNameWidth + 'px'});
|
||||
systemBody.find('.' + config.systemBodyRightClass).show();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
out: function(e){
|
||||
let system = $(this).closest('.' + config.systemClass);
|
||||
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
|
||||
let systemId = system.attr('id');
|
||||
let systemBody = system.find('.' + config.systemBodyClass);
|
||||
|
||||
// stop animation (prevent visual bug if user spams hover-icon [in - out])
|
||||
systemBody.velocity('stop');
|
||||
|
||||
// reduce player name element back to "normal" size (css class width is used)
|
||||
systemBody.find('.' + config.systemBodyRightClass).hide();
|
||||
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
|
||||
|
||||
systemBody.velocity('reverse', {
|
||||
complete: function(){
|
||||
// overwrite "complete" function from first "hover"-open
|
||||
// set animated "with" back to default "100%" important in case of system with change (e.g. longer name)
|
||||
$(this).css({width: ''});
|
||||
|
||||
map.revalidate(systemId);
|
||||
}
|
||||
});
|
||||
},
|
||||
selector: '.' + config.systemClass + ' .' + config.systemHeadExpandClass
|
||||
});
|
||||
|
||||
// system "effect" popover ------------------------------------------------------------------------------------
|
||||
// -> event delegation to system elements, popup only if needed (hover)
|
||||
mapWrapper.hoverIntent({
|
||||
@@ -2309,6 +2244,8 @@ define([
|
||||
}
|
||||
|
||||
// init system tooltips =======================================================================================
|
||||
// TODO check this code:
|
||||
/*
|
||||
let systemTooltipOptions = {
|
||||
toggle: 'tooltip',
|
||||
placement: 'right',
|
||||
@@ -2317,79 +2254,7 @@ define([
|
||||
};
|
||||
|
||||
system.find('.fas').tooltip(systemTooltipOptions);
|
||||
|
||||
// init system body expand ====================================================================================
|
||||
systemHeadExpand.hoverIntent(function(e){
|
||||
// hover in
|
||||
let hoverSystem = $(this).parents('.' + config.systemClass);
|
||||
let hoverSystemId = hoverSystem.attr('id');
|
||||
|
||||
// bring system in front (increase zIndex)
|
||||
hoverSystem.updateSystemZIndex();
|
||||
|
||||
// get ship counter and calculate expand height
|
||||
let userCount = parseInt( hoverSystem.data('userCount') );
|
||||
|
||||
let expandHeight = userCount * config.systemBodyItemHeight;
|
||||
|
||||
systemBody.velocity('stop').velocity(
|
||||
{
|
||||
height: expandHeight + 'px',
|
||||
width: 150,
|
||||
'min-width': '150px'
|
||||
},{
|
||||
easing: 'easeInOutQuart',
|
||||
duration: 150,
|
||||
progress: function(){
|
||||
// repaint connections of current system
|
||||
map.revalidate( hoverSystemId );
|
||||
},
|
||||
complete: function(){
|
||||
map.revalidate( hoverSystemId );
|
||||
|
||||
// extend player name element
|
||||
$(this).find('.' + config.systemBodyItemNameClass).css({width: '80px'});
|
||||
|
||||
$(this).find('.' + config.systemBodyRightClass).velocity('stop').velocity({
|
||||
opacity: 1
|
||||
},{
|
||||
duration: 150,
|
||||
display: 'auto'
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
}, function(e){
|
||||
// hover out
|
||||
let hoverSystem = $(this).parents('.' + config.systemClass);
|
||||
let hoverSystemId = hoverSystem.attr('id');
|
||||
|
||||
// stop animation (prevent visual bug if user spams hover-icon [in - out])
|
||||
systemBody.velocity('stop');
|
||||
|
||||
// reduce player name element back to "normal" size (css class width is used)
|
||||
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
|
||||
|
||||
systemBody.find('.' + config.systemBodyRightClass).velocity('stop').velocity( {
|
||||
opacity: 0,
|
||||
'min-width': '0px'
|
||||
},{
|
||||
easing: 'easeInOutQuart',
|
||||
duration: 150,
|
||||
display: 'none',
|
||||
complete: function(){
|
||||
systemBody.velocity('stop').velocity('reverse', {
|
||||
complete: function(){
|
||||
// overwrite "complete" function from first "hover"-open
|
||||
map.revalidate( hoverSystemId );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
*/
|
||||
// context menu ===============================================================================================
|
||||
|
||||
// trigger context menu
|
||||
@@ -3229,7 +3094,7 @@ define([
|
||||
|
||||
// users who are not in any map system --------------------------------------------------------------------
|
||||
for(let i = 0; i < userData.data.systems.length; i++){
|
||||
// users without location are grouped in systemid: 0
|
||||
// users without location are grouped in systemId: 0
|
||||
if(userData.data.systems[i].id){
|
||||
headerUpdateData.userCountOutside += userData.data.systems[i].user.length;
|
||||
}else{
|
||||
|
||||
@@ -19,7 +19,11 @@ define([
|
||||
y: 0
|
||||
},
|
||||
|
||||
mapClass: 'pf-map', // class for all maps
|
||||
|
||||
systemActiveClass: 'pf-system-active', // class for an active system on a map
|
||||
systemTooltipInnerIdPrefix: 'pf-system-tooltip-inner-', // id prefix for system tooltip content
|
||||
systemTooltipInnerClass: 'pf-system-tooltip-inner', // class for system tooltip content
|
||||
|
||||
dialogRallyId: 'pf-rally-dialog', // id for "Rally point" dialog
|
||||
|
||||
@@ -219,6 +223,139 @@ define([
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* toggle system tooltip (current pilot count)
|
||||
* @param show
|
||||
* @param tooltipOptions
|
||||
* @returns {*}
|
||||
*/
|
||||
$.fn.toggleSystemTooltip = function(show, tooltipOptions){
|
||||
let highlightData = {
|
||||
good: {
|
||||
colorClass: 'txt-color-green',
|
||||
iconClass: 'fa-caret-up'
|
||||
},
|
||||
bad: {
|
||||
colorClass: 'txt-color-red',
|
||||
iconClass: 'fa-caret-down'
|
||||
}
|
||||
};
|
||||
|
||||
let getHighlightClass = (highlight) => {
|
||||
return Util.getObjVal(highlightData, highlight + '.colorClass') || '';
|
||||
};
|
||||
|
||||
let getHighlightIcon = (highlight) => {
|
||||
return Util.getObjVal(highlightData, highlight + '.iconClass') || '';
|
||||
};
|
||||
|
||||
let getTitle = (userCounter, highlight) => {
|
||||
return '<i class="fas ' + getHighlightIcon(highlight) + '"></i> ' + userCounter + '';
|
||||
};
|
||||
|
||||
return this.each(function(){
|
||||
let system = $(this);
|
||||
switch(show){
|
||||
case 'destroy':
|
||||
//destroy tooltip and remove some attributes which are not deleted by 'destroy'
|
||||
system.tooltip('destroy').removeAttr('title data-original-title');
|
||||
break;
|
||||
case 'hide':
|
||||
system.tooltip('hide');
|
||||
break;
|
||||
case 'show':
|
||||
// initial "show" OR "update" open tooltip
|
||||
// -> do not update tooltips while a system is dragged
|
||||
let showTooltip = !system.hasClass('jsPlumb_dragged');
|
||||
|
||||
if(system.data('bs.tooltip')){
|
||||
// tooltip initialized but could be hidden
|
||||
// check for title update
|
||||
if(
|
||||
tooltipOptions.hasOwnProperty('userCount') &&
|
||||
tooltipOptions.hasOwnProperty('highlight')
|
||||
){
|
||||
let currentTitle = system.attr('data-original-title');
|
||||
let newTitle = getTitle(tooltipOptions.userCount, tooltipOptions.highlight);
|
||||
|
||||
if(currentTitle !== newTitle){
|
||||
// update tooltip
|
||||
let tooltipInner = system.attr('title', newTitle).tooltip('fixTitle').data('bs.tooltip').$tip.find('.tooltip-inner');
|
||||
tooltipInner.html(newTitle);
|
||||
|
||||
// change highlight class
|
||||
let highlightClass = getHighlightClass(tooltipOptions.highlight);
|
||||
if( !tooltipInner.hasClass(highlightClass) ){
|
||||
tooltipInner.removeClass( getHighlightClass('good') + ' ' + getHighlightClass('bad')).addClass(highlightClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let tip = system.data('bs.tooltip').tip();
|
||||
if( !tip.hasClass('in') && showTooltip){
|
||||
// update tooltip placement based on system position
|
||||
system.data('bs.tooltip').options.placement = getSystemTooltipPlacement(system);
|
||||
|
||||
system.tooltip('show');
|
||||
}
|
||||
}else{
|
||||
// no tooltip initialized
|
||||
// "some" config data is required
|
||||
if(
|
||||
tooltipOptions.hasOwnProperty('systemId') &&
|
||||
tooltipOptions.hasOwnProperty('userCount') &&
|
||||
tooltipOptions.hasOwnProperty('highlight')
|
||||
){
|
||||
let innerTooltipId = config.systemTooltipInnerIdPrefix + tooltipOptions.systemId;
|
||||
|
||||
let template = '<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div id="' + innerTooltipId + '" class="tooltip-inner txt-color ' + config.systemTooltipInnerClass + '"></div>' +
|
||||
'</div>';
|
||||
|
||||
let options = {
|
||||
trigger: 'manual',
|
||||
placement: getSystemTooltipPlacement(system),
|
||||
html: true,
|
||||
animation: true,
|
||||
template: template,
|
||||
viewport: system.closest('.' + config.mapClass)
|
||||
};
|
||||
|
||||
// init new tooltip -> Do not show automatic maybe system is currently dragged
|
||||
system.attr('title', getTitle(tooltipOptions.userCount, tooltipOptions.highlight));
|
||||
system.tooltip(options);
|
||||
|
||||
system.one('shown.bs.tooltip', function() {
|
||||
// set highlight only on FIRST show
|
||||
$('#' + this.innerTooltipId).addClass(this.highlightClass);
|
||||
}.bind({
|
||||
highlightClass: getHighlightClass(tooltipOptions.highlight),
|
||||
innerTooltipId: innerTooltipId
|
||||
}));
|
||||
|
||||
if(showTooltip){
|
||||
system.tooltip('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* get tooltip position (top, bottom) based on system position
|
||||
* @param system
|
||||
* @returns {string}
|
||||
*/
|
||||
let getSystemTooltipPlacement = (system) => {
|
||||
let offsetParent = system.parent().offset();
|
||||
let offsetSystem = system.offset();
|
||||
|
||||
return (offsetSystem.top - offsetParent.top < 27) ? 'bottom' : 'top';
|
||||
};
|
||||
|
||||
/**
|
||||
* delete system(s) with all their connections
|
||||
* (ajax call) remove system from DB
|
||||
@@ -266,7 +403,6 @@ define([
|
||||
* @param systems
|
||||
*/
|
||||
let removeSystems = (map, systems) => {
|
||||
|
||||
let removeSystemCallbak = function(deleteSystem){
|
||||
map.remove(deleteSystem);
|
||||
};
|
||||
@@ -343,6 +479,8 @@ define([
|
||||
return newPosition;
|
||||
};
|
||||
|
||||
|
||||
|
||||
return {
|
||||
deleteSystems: deleteSystems,
|
||||
removeSystems: removeSystems,
|
||||
|
||||
6
js/lib/velocity.min.js
vendored
6
js/lib/velocity.min.js
vendored
File diff suppressed because one or more lines are too long
2
js/lib/velocity.ui.min.js
vendored
2
js/lib/velocity.ui.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -30,7 +30,7 @@ requirejs.config({
|
||||
text: 'lib/requirejs/text', // v2.0.12 A RequireJS/AMD loader plugin for loading text resources.
|
||||
mustache: 'lib/mustache.min', // v1.0.0 Javascript template engine - http://mustache.github.io
|
||||
localForage: 'lib/localforage.min', // v1.4.2 localStorage library - https://mozilla.github.io/localForage
|
||||
velocity: 'lib/velocity.min', // v1.4.1 animation engine - http://julian.com/research/velocity
|
||||
velocity: 'lib/velocity.min', // v1.5.1 animation engine - http://julian.com/research/velocity
|
||||
velocityUI: 'lib/velocity.ui.min', // v5.2.0 plugin for velocity - http://julian.com/research/velocity/#uiPack
|
||||
slidebars: 'lib/slidebars', // v0.10 Slidebars - side menu plugin http://plugins.adchsm.me/slidebars
|
||||
jsPlumb: 'lib/dom.jsPlumb-1.7.6', // v1.7.6 jsPlumb (Vanilla)- main map draw plugin https://jsplumbtoolkit.com
|
||||
|
||||
@@ -42,8 +42,6 @@ define([
|
||||
systemBodyItemStatusClass: 'pf-user-status', // class for player status in system body
|
||||
systemBodyItemNameClass: 'pf-system-body-item-name', // class for player name in system body
|
||||
systemBodyRightClass: 'pf-system-body-right', // class for player ship name in system body
|
||||
systemTooltipInnerClass: 'pf-system-tooltip-inner', // class for system tooltip content
|
||||
systemTooltipInnerIdPrefix: 'pf-system-tooltip-inner-', // id prefix for system tooltip content
|
||||
dynamicElementWrapperId: 'pf-dialog-wrapper', // wrapper div for dynamic content (dialogs, context-menus,...)
|
||||
|
||||
// endpoint classes
|
||||
@@ -119,8 +117,6 @@ define([
|
||||
connectionTypes: Init.connectionTypes
|
||||
};
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* updates a system with current information
|
||||
* @param map
|
||||
@@ -128,7 +124,6 @@ define([
|
||||
* @param currentUserIsHere boolean - if the current user is in this system
|
||||
*/
|
||||
$.fn.updateSystemUserData = function(map, data, currentUserIsHere){
|
||||
|
||||
let system = $(this);
|
||||
let systemId = system.attr('id');
|
||||
|
||||
@@ -207,21 +202,17 @@ define([
|
||||
// user count changed -> change tooltip content
|
||||
|
||||
// set tooltip color
|
||||
let highlight = false;
|
||||
let tooltipIconClass = '';
|
||||
let highlight = '';
|
||||
if(userCounter > oldUserCount){
|
||||
highlight = 'good';
|
||||
tooltipIconClass = 'fa-caret-up';
|
||||
}else if(userCounter < oldUserCount){
|
||||
highlight = 'bad';
|
||||
tooltipIconClass = 'fa-caret-down';
|
||||
}
|
||||
|
||||
let tooltipOptions = {
|
||||
trigger: 'manual',
|
||||
id: systemId,
|
||||
systemId: systemId,
|
||||
highlight: highlight,
|
||||
title: '<i class="fas ' + tooltipIconClass + '"></i> ' + userCounter
|
||||
userCount: userCounter
|
||||
};
|
||||
|
||||
// show system head
|
||||
@@ -231,13 +222,12 @@ define([
|
||||
duration: 50,
|
||||
display: 'inline-block',
|
||||
progress: function(){
|
||||
//revalidate element size and repaint
|
||||
//re-validate element size and repaint
|
||||
map.revalidate( systemId );
|
||||
},
|
||||
complete: function(){
|
||||
// show system body
|
||||
system.toggleBody(true, map, {complete: function(system){
|
||||
// complete callback function
|
||||
// show active user tooltip
|
||||
system.toggleSystemTooltip('show', tooltipOptions);
|
||||
}});
|
||||
@@ -322,131 +312,6 @@ define([
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* show/hide systems tooltip
|
||||
* @param show
|
||||
* @param options
|
||||
*/
|
||||
$.fn.toggleSystemTooltip = function(show, options){
|
||||
let colorClasses = {
|
||||
good: 'txt-color-green',
|
||||
bad: 'txt-color-red'
|
||||
};
|
||||
|
||||
return this.each(function(){
|
||||
let system = $(this);
|
||||
let tooltipId = 0;
|
||||
let tooltipClassHighlight = false;
|
||||
|
||||
// do not update tooltips while a system is dragged
|
||||
if(system.hasClass('jsPlumb_dragged')){
|
||||
// skip system
|
||||
return true;
|
||||
}
|
||||
|
||||
if(show === 'destroy'){
|
||||
system.tooltip( show );
|
||||
system.removeAttr('data-original-title');
|
||||
}else if(show === 'hide'){
|
||||
system.tooltip( show );
|
||||
} else if(show === 'toggle'){
|
||||
system.tooltip( show );
|
||||
}else if(show === 'show'){
|
||||
|
||||
// check if tooltip is currently visible
|
||||
let tooltipActive = (system.attr('aria-describedby') !== undefined);
|
||||
|
||||
if(options === undefined){
|
||||
options = {};
|
||||
}
|
||||
|
||||
// optional color highlight
|
||||
if(colorClasses.hasOwnProperty( options.highlight )){
|
||||
tooltipClassHighlight = colorClasses[ options.highlight ];
|
||||
}
|
||||
|
||||
if(
|
||||
tooltipActive === false &&
|
||||
options.id
|
||||
){
|
||||
|
||||
// init new tooltip
|
||||
tooltipId = config.systemTooltipInnerIdPrefix + options.id;
|
||||
|
||||
let template = '<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div id="' + tooltipId + '" class="tooltip-inner txt-color ' + config.systemTooltipInnerClass + '"></div>' +
|
||||
'</div>';
|
||||
|
||||
options.placement = getSystemTooltipPlacement(system);
|
||||
options.html = true;
|
||||
options.animation = true;
|
||||
options.template = template;
|
||||
options.viewport = system.parent('.' + config.mapClass);
|
||||
|
||||
system.attr('title', options.title);
|
||||
|
||||
system.tooltip(options);
|
||||
|
||||
system.tooltip(show);
|
||||
|
||||
if(tooltipClassHighlight !== false){
|
||||
// set tooltip observer and set new class after open -> due to transition effect
|
||||
|
||||
system.on('shown.bs.tooltip', function() {
|
||||
$('#' + tooltipId).addClass( tooltipClassHighlight );
|
||||
// remove observer -> color should not be changed every time a tooltip toggles e.g. dragging system
|
||||
$(this).off('shown.bs.tooltip');
|
||||
});
|
||||
}
|
||||
}else{
|
||||
// update/change/toggle tooltip text or color without tooltip reload
|
||||
|
||||
let tooltipInner = false;
|
||||
if(
|
||||
options.title ||
|
||||
tooltipClassHighlight !== false
|
||||
){
|
||||
tooltipInner = system.tooltip('fixTitle')
|
||||
.data('bs.tooltip')
|
||||
.$tip.find('.tooltip-inner');
|
||||
|
||||
if(options.title){
|
||||
tooltipInner.html( options.title );
|
||||
}
|
||||
|
||||
if(tooltipClassHighlight !== false){
|
||||
tooltipInner.removeClass( colorClasses.good + ' ' + colorClasses.bad).addClass(tooltipClassHighlight);
|
||||
}
|
||||
}
|
||||
|
||||
// update tooltip placement based on system position
|
||||
if (system.data('bs.tooltip')) {
|
||||
system.data('bs.tooltip').options.placement = getSystemTooltipPlacement(system);
|
||||
}
|
||||
|
||||
// show() can be forced
|
||||
if(options.show === true){
|
||||
system.tooltip('show');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* get tooltip position based on current system position
|
||||
* @param system
|
||||
* @returns {string}
|
||||
*/
|
||||
let getSystemTooltipPlacement = (system) => {
|
||||
let offsetParent = system.parent().offset();
|
||||
let offsetSystem = system.offset();
|
||||
|
||||
return (offsetSystem.top - offsetParent.top < 27) ? 'bottom' : 'top';
|
||||
};
|
||||
|
||||
/**
|
||||
* set or change the status of a system
|
||||
* @param status
|
||||
@@ -1007,6 +872,76 @@ define([
|
||||
checkMapSize(mapWrapper[0]);
|
||||
}
|
||||
|
||||
// system body expand -----------------------------------------------------------------------------------------
|
||||
mapWrapper.hoverIntent({
|
||||
over: function(e){
|
||||
let system = $(this).closest('.' + config.systemClass);
|
||||
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
|
||||
let systemId = system.attr('id');
|
||||
let systemBody = system.find('.' + config.systemBodyClass);
|
||||
|
||||
// bring system in front (increase zIndex)
|
||||
system.updateSystemZIndex();
|
||||
|
||||
// get ship counter and calculate expand height
|
||||
let userCount = parseInt(system.data('userCount'));
|
||||
let expandHeight = userCount * config.systemBodyItemHeight;
|
||||
|
||||
// calculate width
|
||||
let width = system[0].clientWidth;
|
||||
let minWidth = 150;
|
||||
let newWidth = width > minWidth ? width : minWidth; // in case of big systems
|
||||
|
||||
systemBody.velocity('stop').velocity(
|
||||
{
|
||||
height: expandHeight + 'px',
|
||||
width: newWidth,
|
||||
'min-width': minWidth + 'px'
|
||||
},{
|
||||
easing: 'easeInOutQuart',
|
||||
duration: 120,
|
||||
progress: function(){
|
||||
// repaint connections of current system
|
||||
map.revalidate(systemId);
|
||||
},
|
||||
complete: function(){
|
||||
map.revalidate(systemId);
|
||||
|
||||
// extend player name element
|
||||
let systemBody = $(this);
|
||||
let systemBodyItemNameWidth = newWidth - 50 - 10 - 20; // - bodyRight - icon - somePadding
|
||||
systemBody.find('.' + config.systemBodyItemNameClass).css({width: systemBodyItemNameWidth + 'px'});
|
||||
systemBody.find('.' + config.systemBodyRightClass).show();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
out: function(e){
|
||||
let system = $(this).closest('.' + config.systemClass);
|
||||
let map = MapUtil.getMapInstance(system.attr('data-mapid'));
|
||||
let systemId = system.attr('id');
|
||||
let systemBody = system.find('.' + config.systemBodyClass);
|
||||
|
||||
// stop animation (prevent visual bug if user spams hover-icon [in - out])
|
||||
systemBody.velocity('stop');
|
||||
|
||||
// reduce player name element back to "normal" size (css class width is used)
|
||||
systemBody.find('.' + config.systemBodyRightClass).hide();
|
||||
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
|
||||
|
||||
systemBody.velocity('reverse', {
|
||||
complete: function(){
|
||||
// overwrite "complete" function from first "hover"-open
|
||||
// set animated "with" back to default "100%" important in case of system with change (e.g. longer name)
|
||||
$(this).css({width: ''});
|
||||
|
||||
map.revalidate(systemId);
|
||||
}
|
||||
});
|
||||
},
|
||||
selector: '.' + config.systemClass + ' .' + config.systemHeadExpandClass
|
||||
});
|
||||
|
||||
// system "effect" popover ------------------------------------------------------------------------------------
|
||||
// -> event delegation to system elements, popup only if needed (hover)
|
||||
mapWrapper.hoverIntent({
|
||||
@@ -2309,6 +2244,8 @@ define([
|
||||
}
|
||||
|
||||
// init system tooltips =======================================================================================
|
||||
// TODO check this code:
|
||||
/*
|
||||
let systemTooltipOptions = {
|
||||
toggle: 'tooltip',
|
||||
placement: 'right',
|
||||
@@ -2317,79 +2254,7 @@ define([
|
||||
};
|
||||
|
||||
system.find('.fas').tooltip(systemTooltipOptions);
|
||||
|
||||
// init system body expand ====================================================================================
|
||||
systemHeadExpand.hoverIntent(function(e){
|
||||
// hover in
|
||||
let hoverSystem = $(this).parents('.' + config.systemClass);
|
||||
let hoverSystemId = hoverSystem.attr('id');
|
||||
|
||||
// bring system in front (increase zIndex)
|
||||
hoverSystem.updateSystemZIndex();
|
||||
|
||||
// get ship counter and calculate expand height
|
||||
let userCount = parseInt( hoverSystem.data('userCount') );
|
||||
|
||||
let expandHeight = userCount * config.systemBodyItemHeight;
|
||||
|
||||
systemBody.velocity('stop').velocity(
|
||||
{
|
||||
height: expandHeight + 'px',
|
||||
width: 150,
|
||||
'min-width': '150px'
|
||||
},{
|
||||
easing: 'easeInOutQuart',
|
||||
duration: 150,
|
||||
progress: function(){
|
||||
// repaint connections of current system
|
||||
map.revalidate( hoverSystemId );
|
||||
},
|
||||
complete: function(){
|
||||
map.revalidate( hoverSystemId );
|
||||
|
||||
// extend player name element
|
||||
$(this).find('.' + config.systemBodyItemNameClass).css({width: '80px'});
|
||||
|
||||
$(this).find('.' + config.systemBodyRightClass).velocity('stop').velocity({
|
||||
opacity: 1
|
||||
},{
|
||||
duration: 150,
|
||||
display: 'auto'
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
}, function(e){
|
||||
// hover out
|
||||
let hoverSystem = $(this).parents('.' + config.systemClass);
|
||||
let hoverSystemId = hoverSystem.attr('id');
|
||||
|
||||
// stop animation (prevent visual bug if user spams hover-icon [in - out])
|
||||
systemBody.velocity('stop');
|
||||
|
||||
// reduce player name element back to "normal" size (css class width is used)
|
||||
systemBody.find('.' + config.systemBodyItemNameClass).css({width: ''});
|
||||
|
||||
systemBody.find('.' + config.systemBodyRightClass).velocity('stop').velocity( {
|
||||
opacity: 0,
|
||||
'min-width': '0px'
|
||||
},{
|
||||
easing: 'easeInOutQuart',
|
||||
duration: 150,
|
||||
display: 'none',
|
||||
complete: function(){
|
||||
systemBody.velocity('stop').velocity('reverse', {
|
||||
complete: function(){
|
||||
// overwrite "complete" function from first "hover"-open
|
||||
map.revalidate( hoverSystemId );
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
*/
|
||||
// context menu ===============================================================================================
|
||||
|
||||
// trigger context menu
|
||||
@@ -3229,7 +3094,7 @@ define([
|
||||
|
||||
// users who are not in any map system --------------------------------------------------------------------
|
||||
for(let i = 0; i < userData.data.systems.length; i++){
|
||||
// users without location are grouped in systemid: 0
|
||||
// users without location are grouped in systemId: 0
|
||||
if(userData.data.systems[i].id){
|
||||
headerUpdateData.userCountOutside += userData.data.systems[i].user.length;
|
||||
}else{
|
||||
|
||||
@@ -19,7 +19,11 @@ define([
|
||||
y: 0
|
||||
},
|
||||
|
||||
mapClass: 'pf-map', // class for all maps
|
||||
|
||||
systemActiveClass: 'pf-system-active', // class for an active system on a map
|
||||
systemTooltipInnerIdPrefix: 'pf-system-tooltip-inner-', // id prefix for system tooltip content
|
||||
systemTooltipInnerClass: 'pf-system-tooltip-inner', // class for system tooltip content
|
||||
|
||||
dialogRallyId: 'pf-rally-dialog', // id for "Rally point" dialog
|
||||
|
||||
@@ -219,6 +223,139 @@ define([
|
||||
return this;
|
||||
};
|
||||
|
||||
/**
|
||||
* toggle system tooltip (current pilot count)
|
||||
* @param show
|
||||
* @param tooltipOptions
|
||||
* @returns {*}
|
||||
*/
|
||||
$.fn.toggleSystemTooltip = function(show, tooltipOptions){
|
||||
let highlightData = {
|
||||
good: {
|
||||
colorClass: 'txt-color-green',
|
||||
iconClass: 'fa-caret-up'
|
||||
},
|
||||
bad: {
|
||||
colorClass: 'txt-color-red',
|
||||
iconClass: 'fa-caret-down'
|
||||
}
|
||||
};
|
||||
|
||||
let getHighlightClass = (highlight) => {
|
||||
return Util.getObjVal(highlightData, highlight + '.colorClass') || '';
|
||||
};
|
||||
|
||||
let getHighlightIcon = (highlight) => {
|
||||
return Util.getObjVal(highlightData, highlight + '.iconClass') || '';
|
||||
};
|
||||
|
||||
let getTitle = (userCounter, highlight) => {
|
||||
return '<i class="fas ' + getHighlightIcon(highlight) + '"></i> ' + userCounter + '';
|
||||
};
|
||||
|
||||
return this.each(function(){
|
||||
let system = $(this);
|
||||
switch(show){
|
||||
case 'destroy':
|
||||
//destroy tooltip and remove some attributes which are not deleted by 'destroy'
|
||||
system.tooltip('destroy').removeAttr('title data-original-title');
|
||||
break;
|
||||
case 'hide':
|
||||
system.tooltip('hide');
|
||||
break;
|
||||
case 'show':
|
||||
// initial "show" OR "update" open tooltip
|
||||
// -> do not update tooltips while a system is dragged
|
||||
let showTooltip = !system.hasClass('jsPlumb_dragged');
|
||||
|
||||
if(system.data('bs.tooltip')){
|
||||
// tooltip initialized but could be hidden
|
||||
// check for title update
|
||||
if(
|
||||
tooltipOptions.hasOwnProperty('userCount') &&
|
||||
tooltipOptions.hasOwnProperty('highlight')
|
||||
){
|
||||
let currentTitle = system.attr('data-original-title');
|
||||
let newTitle = getTitle(tooltipOptions.userCount, tooltipOptions.highlight);
|
||||
|
||||
if(currentTitle !== newTitle){
|
||||
// update tooltip
|
||||
let tooltipInner = system.attr('title', newTitle).tooltip('fixTitle').data('bs.tooltip').$tip.find('.tooltip-inner');
|
||||
tooltipInner.html(newTitle);
|
||||
|
||||
// change highlight class
|
||||
let highlightClass = getHighlightClass(tooltipOptions.highlight);
|
||||
if( !tooltipInner.hasClass(highlightClass) ){
|
||||
tooltipInner.removeClass( getHighlightClass('good') + ' ' + getHighlightClass('bad')).addClass(highlightClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let tip = system.data('bs.tooltip').tip();
|
||||
if( !tip.hasClass('in') && showTooltip){
|
||||
// update tooltip placement based on system position
|
||||
system.data('bs.tooltip').options.placement = getSystemTooltipPlacement(system);
|
||||
|
||||
system.tooltip('show');
|
||||
}
|
||||
}else{
|
||||
// no tooltip initialized
|
||||
// "some" config data is required
|
||||
if(
|
||||
tooltipOptions.hasOwnProperty('systemId') &&
|
||||
tooltipOptions.hasOwnProperty('userCount') &&
|
||||
tooltipOptions.hasOwnProperty('highlight')
|
||||
){
|
||||
let innerTooltipId = config.systemTooltipInnerIdPrefix + tooltipOptions.systemId;
|
||||
|
||||
let template = '<div class="tooltip" role="tooltip">' +
|
||||
'<div class="tooltip-arrow"></div>' +
|
||||
'<div id="' + innerTooltipId + '" class="tooltip-inner txt-color ' + config.systemTooltipInnerClass + '"></div>' +
|
||||
'</div>';
|
||||
|
||||
let options = {
|
||||
trigger: 'manual',
|
||||
placement: getSystemTooltipPlacement(system),
|
||||
html: true,
|
||||
animation: true,
|
||||
template: template,
|
||||
viewport: system.closest('.' + config.mapClass)
|
||||
};
|
||||
|
||||
// init new tooltip -> Do not show automatic maybe system is currently dragged
|
||||
system.attr('title', getTitle(tooltipOptions.userCount, tooltipOptions.highlight));
|
||||
system.tooltip(options);
|
||||
|
||||
system.one('shown.bs.tooltip', function() {
|
||||
// set highlight only on FIRST show
|
||||
$('#' + this.innerTooltipId).addClass(this.highlightClass);
|
||||
}.bind({
|
||||
highlightClass: getHighlightClass(tooltipOptions.highlight),
|
||||
innerTooltipId: innerTooltipId
|
||||
}));
|
||||
|
||||
if(showTooltip){
|
||||
system.tooltip('show');
|
||||
}
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* get tooltip position (top, bottom) based on system position
|
||||
* @param system
|
||||
* @returns {string}
|
||||
*/
|
||||
let getSystemTooltipPlacement = (system) => {
|
||||
let offsetParent = system.parent().offset();
|
||||
let offsetSystem = system.offset();
|
||||
|
||||
return (offsetSystem.top - offsetParent.top < 27) ? 'bottom' : 'top';
|
||||
};
|
||||
|
||||
/**
|
||||
* delete system(s) with all their connections
|
||||
* (ajax call) remove system from DB
|
||||
@@ -266,7 +403,6 @@ define([
|
||||
* @param systems
|
||||
*/
|
||||
let removeSystems = (map, systems) => {
|
||||
|
||||
let removeSystemCallbak = function(deleteSystem){
|
||||
map.remove(deleteSystem);
|
||||
};
|
||||
@@ -343,6 +479,8 @@ define([
|
||||
return newPosition;
|
||||
};
|
||||
|
||||
|
||||
|
||||
return {
|
||||
deleteSystems: deleteSystems,
|
||||
removeSystems: removeSystems,
|
||||
|
||||
6
public/js/v1.3.5/lib/velocity.min.js
vendored
6
public/js/v1.3.5/lib/velocity.min.js
vendored
File diff suppressed because one or more lines are too long
2
public/js/v1.3.5/lib/velocity.ui.min.js
vendored
2
public/js/v1.3.5/lib/velocity.ui.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -695,6 +695,7 @@ table{
|
||||
.pf-system-effect{
|
||||
display: none; // if effect is active it will be overwritten
|
||||
color: $gray-lighter;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.pf-system-effect-magnetar{
|
||||
|
||||
@@ -232,7 +232,17 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
|
||||
|
||||
// 20x20px grid background
|
||||
.pf-grid-small{
|
||||
background: inline-image("/grid_40x40.png") !important;
|
||||
&:before{
|
||||
content: ' ';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.6;
|
||||
background: inline-image("/grid_40x40.png") !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pf-map{
|
||||
@@ -299,7 +309,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
|
||||
&:hover{
|
||||
// makes the systems "flying" :)
|
||||
@include box-shadow(0 6px 12px rgba(0,0,0, 0.3));
|
||||
@include transform( translate3d(0, -2px, 0) !important);
|
||||
@include transform( translate3d(0, -1px, 0) !important);
|
||||
}
|
||||
|
||||
.pf-system-head{
|
||||
@@ -312,7 +322,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
|
||||
.pf-system-head-name{
|
||||
border: none;
|
||||
display: inline-block;
|
||||
min-width: 41px;
|
||||
min-width: 50px;
|
||||
color: $gray-lighter;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@@ -361,28 +371,32 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
|
||||
}
|
||||
|
||||
.pf-system-body-item{
|
||||
position: relative;
|
||||
color: lighten($gray-light, 10%);
|
||||
font-size: 10px;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
|
||||
.pf-system-body-right{
|
||||
text-overflow: ellipsis;
|
||||
float: right;
|
||||
color: $orange-light;
|
||||
width: 50px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
display: none; // hover effect
|
||||
}
|
||||
// user status ========================================================
|
||||
.pf-user-status{
|
||||
font-size: 7px;
|
||||
font-size: 6px;
|
||||
width: 10px;
|
||||
vertical-align: middle;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.pf-system-body-item-name{
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 65px;
|
||||
width: calc(100% - 10px); // -10px icon
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@@ -525,6 +539,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
|
||||
|
||||
&.jsplumb-hover{
|
||||
z-index: 80;
|
||||
filter: drop-shadow( -3px 3px 4px rgba(0,0,0, 0.3));
|
||||
|
||||
path:first-child{
|
||||
stroke: $gray-lightest; // hover style
|
||||
@@ -670,7 +685,7 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
|
||||
z-index: 1020;
|
||||
background-color: $gray;
|
||||
color: $gray-lighter;
|
||||
@include border-radius(50%);
|
||||
@include border-radius(5px);
|
||||
@include box-shadow(0 3px 6px rgba(0,0,0,.3));
|
||||
}
|
||||
}
|
||||
@@ -727,5 +742,4 @@ $mapWrapperMaxWidth: $mapWidth + 35px;
|
||||
padding: 2px 4px;
|
||||
min-width: 25px; // make sure tooltip is not flickering on low numbers -> fix width
|
||||
@include transition( color 0.2s ease-out );
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user