pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-25 15:33:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE] Add preview color and tip to eyedropper

Browse Source
This commit is contained in:
JuliaSvinareva
2023-03-30 23:42:38 +03:00
parent 81f365419d
commit 94fb660d3b
3 changed files with 104 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
apps/common/main/resources/less/tooltip.less
View File

@ -66,4 +66,24 @@
.auto-tooltip .tooltip-inner {
max-width: none;
}
.eyedropper-color {
width: 30px;
height: 30px;
border: @scaled-one-px-value-ie solid @background-normal;
border: @scaled-one-px-value solid @background-normal;
outline: @scaled-one-px-value-ie solid @border-regular-control;
outline: @scaled-one-px-value solid @border-regular-control;
position: absolute;
top: -1000px;
left: -1000px;
z-index: 1001;
}
.eyedropper-tooltip {
.tooltip-inner {
padding: 2px;
line-height: 16px;
}
}

81
apps/documenteditor/main/app/controller/DocumentHolder.js
View File

@ -139,6 +139,18 @@ define([
isHidden: true,
isVisible: false
};
me.eyedropperTip = {
toolTip: new Common.UI.Tooltip({
owner: this,
html: true,
cls: 'eyedropper-tooltip'
}),
isHidden: true,
isVisible: false,
eyedropperColor: null,
tipInterval: null,
isTipVisible: false
}
me.userTooltip = true;
me.wrapEvents = {
userTipMousover: _.bind(me.userTipMousover, me),
@ -170,6 +182,7 @@ define([
/** coauthoring begin **/
me.userTipHide();
/** coauthoring end **/
me.hideEyedropper();
me.mode && me.mode.isDesktopApp && me.api && me.api.asc_onShowPopupWindow();
},
@ -183,6 +196,7 @@ define([
me.userTipHide();
/** coauthoring end **/
me.hideTips();
me.hideEyedropper();
me.onDocumentHolderResize();
}
});
@ -946,6 +960,17 @@ define([
/** coauthoring end **/
},
hideEyedropper: function () {
if (this.eyedropperTip.isVisible) {
this.eyedropperTip.isVisible = false;
this.eyedropperTip.eyedropperColor.css({left: '-1000px', top: '-1000px'});
}
if (this.eyedropperTip.isTipVisible) {
this.eyedropperTip.isTipVisible = false;
this.eyedropperTip.toolTip.hide();
}
},
onMouseMoveStart: function() {
var me = this;
me.screenTip.isHidden = true;
@ -975,6 +1000,9 @@ define([
me.mouseMoveData = null;
});
}
if (me.eyedropperTip.isHidden) {
me.hideEyedropper();
}
},
onMouseMove: function(moveData) {
@ -996,7 +1024,7 @@ define([
type = moveData.get_Type();
if (type==Asc.c_oAscMouseMoveDataTypes.Hyperlink || type==Asc.c_oAscMouseMoveDataTypes.Footnote || type==Asc.c_oAscMouseMoveDataTypes.Form ||
type==Asc.c_oAscMouseMoveDataTypes.Review && me.mode.reviewHoverMode) {
type==Asc.c_oAscMouseMoveDataTypes.Review && me.mode.reviewHoverMode || type==Asc.c_oAscMouseMoveDataTypes.Eyedropper) {
if (me.isTooltipHiding) {
me.mouseMoveData = moveData;
return;
@ -1027,6 +1055,57 @@ define([
if (ToolTip.length>1000)
ToolTip = ToolTip.substr(0, 1000) + '...';
}
} else if (type==Asc.c_oAscMouseMoveDataTypes.Eyedropper) {
if (me.eyedropperTip.isTipVisible) {
me.eyedropperTip.isTipVisible = false;
me.eyedropperTip.toolTip.hide();
}
var color = moveData.get_EyedropperColor().asc_getColor(),
r = color.get_r(),
g = color.get_g(),
b = color.get_b(),
hex = Common.Utils.ThemeColor.getHexColor(r,g,b);
if (!me.eyedropperTip.eyedropperColor) {
var colorEl = $(document.createElement("div"));
colorEl.addClass('eyedropper-color');
colorEl.appendTo(document.body);
me.eyedropperTip.eyedropperColor = colorEl;
$('#id_main_view').on('mouseleave', _.bind(me.hideEyedropper, me));
}
me.eyedropperTip.eyedropperColor.css({
backgroundColor: '#' + hex,
left: (moveData.get_X() + me._XY[0] + 23) + 'px',
top: (moveData.get_Y() + me._XY[1] - 53) + 'px'
});
me.eyedropperTip.isVisible = true;
if (me.eyedropperTip.tipInterval) {
clearInterval(me.eyedropperTip.tipInterval);
}
me.eyedropperTip.tipInterval = setInterval(function () {
clearInterval(me.eyedropperTip.tipInterval);
if (me.eyedropperTip.isVisible) {
ToolTip = '<div>RGB(' + r + ',' + g + ',' + b + ')</div>' +
'<div>' + moveData.get_EyedropperColor().asc_getName() + '</div>';
me.eyedropperTip.toolTip.setTitle(ToolTip);
me.eyedropperTip.isTipVisible = true;
me.eyedropperTip.toolTip.show([-10000, -10000]);
me.eyedropperTip.tipWidth = me.eyedropperTip.toolTip.getBSTip().$tip.width();
showPoint = [moveData.get_X(), moveData.get_Y()];
showPoint[1] += (me._XY[1] - 57);
showPoint[0] += (me._XY[0] + 58);
if (showPoint[0] + me.eyedropperTip.tipWidth > me._BodyWidth ) {
showPoint[0] = showPoint[0] - me.eyedropperTip.tipWidth - 40;
}
me.eyedropperTip.toolTip.getBSTip().$tip.css({
top: showPoint[1] + 'px',
left: showPoint[0] + 'px'
});
}
}, 800);
me.eyedropperTip.isHidden = false;
return;
}
var recalc = false;

6
apps/documenteditor/main/app/controller/Main.js
View File

@ -956,7 +956,8 @@ define([
var application = this.getApplication(),
toolbarController = application.getController('Toolbar'),
toolbarView = toolbarController.getView(),
rightMenu = application.getController('RightMenu').getView('RightMenu');
rightMenu = application.getController('RightMenu').getView('RightMenu'),
documentHolder = application.getController('DocumentHolder');
if (this.appOptions.isEdit && toolbarView && (toolbarView.btnInsertShape.pressed || toolbarView.btnInsertText.pressed) &&
( !_.isObject(arguments[1]) || arguments[1].id !== 'tlbtn-insertshape')) { // TODO: Event from api is needed to clear btnInsertShape state
@ -975,7 +976,8 @@ define([
toolbarView._isEyedropperStart ? toolbarView._isEyedropperStart = false : rightMenu._isEyedropperStart = false;
this.api.asc_cancelEyedropper();
}
application.getController('DocumentHolder').getView().focus();
documentHolder.hideEyedropper();
documentHolder.getView().focus();
if (this.api && this.appOptions.isEdit && !toolbarView._state.previewmode) {
var cansave = this.api.asc_isDocumentCanSave(),