pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 09:22:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

[DE] Add eyedropper in right menu, add icon to eyedropper

Browse Source
This commit is contained in:
JuliaSvinareva
2023-03-23 11:30:27 +03:00
parent 2313c1a9ad
commit b4ce3c7a30
8 changed files with 100 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/common/main/lib/component/ColorButton.js
View File

@ -101,13 +101,14 @@ define([
if (options.eyeDropper) {
eyedropper.push({
id: id + '-eyedropper',
caption: this.textEyedropper
caption: this.textEyedropper,
iconCls: 'menu__icon btn-eyedropper'
});
}
var menu = new Common.UI.Menu({
id: id,
cls: 'shifted-left',
cls: 'color-menu ' + (options.eyeDropper ? 'shifted-right' : 'shifted-left'),
additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([
{ template: _.template('<div id="' + id + '-color-menu" style="width: 164px; height:' + height + '; display: inline-block;"></div>') },

21
apps/common/main/resources/less/buttons.less
View File

@ -814,6 +814,27 @@
}
}
.color-menu.dropdown-menu.shifted-right {
li > a {
padding-left: 32px;
.rtl & {
padding-left: 20px;
padding-right: 32px;
}
span.color-auto {
margin-left: -18px;
margin-top: 1px;
.rtl & {
margin-left: 0;
margin-right: -18px;
}
}
}
}
.btn-options {
padding: 0;

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

@ -955,7 +955,8 @@ define([
// this.getMainMenu().closeFullScaleMenu();
var application = this.getApplication(),
toolbarController = application.getController('Toolbar'),
toolbarView = toolbarController.getView();
toolbarView = toolbarController.getView(),
rightMenu = application.getController('RightMenu').getView('RightMenu');
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
@ -970,7 +971,7 @@ define([
this.api.SetMarkerFormat(false);
toolbarView.btnHighlightColor.toggle(false, false);
}
if (this.appOptions.isEdit && toolbarView && toolbarView._isEyedropperStart) {
if (this.appOptions.isEdit && (toolbarView && toolbarView._isEyedropperStart || rightMenu && rightMenu._isEyedropperStart)) {
this.api.asc_cancelEyedropper();
}
application.getController('DocumentHolder').getView().focus();

12
apps/documenteditor/main/app/view/ParagraphSettings.js
View File

@ -191,6 +191,7 @@ define([
disabled: this._locked,
transparent: true,
menu: true,
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'medium'
@ -273,6 +274,8 @@ define([
this.cmbLineRule.on('selected', this.onLineRuleSelect.bind(this));
this.cmbLineRule.on('hide:after', this.onHideMenus.bind(this));
this.btnColor.on('color:select', this.onColorPickerSelect.bind(this));
this.btnColor.on('eyedropper:start', this.onEyedropperStart.bind(this));
this.btnColor.on('eyedropper:end', this.onEyedropperEnd.bind(this));
this.numIndentsLeft.on('change', this.onNumIndentsLeftChange.bind(this));
this.numIndentsRight.on('change', this.onNumIndentsRightChange.bind(this));
this.numSpecialBy.on('change', this.onFirstLineChange.bind(this));
@ -687,6 +690,15 @@ define([
}
},
onEyedropperStart: function (btn) {
this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn));
this.fireEvent('eyedropper', true);
},
onEyedropperEnd: function () {
this.fireEvent('eyedropper', false);
},
strParagraphSpacing: 'Paragraph Spacing',
strSomeParagraphSpace: 'Don\'t add interval between paragraphs of the same style',
strLineHeight: 'Line Spacing',

7
apps/documenteditor/main/app/view/RightMenu.js
View File

@ -250,12 +250,13 @@ define([
var me = this;
me.api = api;
var _fire_editcomplete = function() {me.fireEvent('editcomplete', me);};
this.paragraphSettings.setApi(api).on('editcomplete', _fire_editcomplete);
var _isEyedropperStart = function (isStart) {this._isEyedropperStart = isStart;};
this.paragraphSettings.setApi(api).on('editcomplete', _fire_editcomplete).on('eyedropper', _.bind(_isEyedropperStart, this));
this.headerSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.imageSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.chartSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.tableSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.shapeSettings.setApi(api).on('editcomplete', _fire_editcomplete);
this.tableSettings.setApi(api).on('editcomplete', _fire_editcomplete).on('eyedropper', _.bind(_isEyedropperStart, this));
this.shapeSettings.setApi(api).on('editcomplete', _fire_editcomplete).on('eyedropper', _.bind(_isEyedropperStart, this));
this.textartSettings.setApi(api).on('editcomplete', _fire_editcomplete);
if (this.mergeSettings) this.mergeSettings.setApi(api).on('editcomplete', _fire_editcomplete);
if (this.signatureSettings) this.signatureSettings.setApi(api).on('editcomplete', _fire_editcomplete);

24
apps/documenteditor/main/app/view/ShapeSettings.js
View File

@ -1884,6 +1884,7 @@ define([
parentEl: $('#shape-back-color-btn'),
transparent: true,
color: 'transparent',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1891,10 +1892,13 @@ define([
this.fillControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
this.btnBackColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnBackColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
this.btnFGColor = new Common.UI.ColorButton({
parentEl: $('#shape-foreground-color-btn'),
color: '000000',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1902,10 +1906,13 @@ define([
this.fillControls.push(this.btnFGColor);
this.colorsFG = this.btnFGColor.getPicker();
this.btnFGColor.on('color:select', _.bind(this.onColorsFGSelect, this));
this.btnFGColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnFGColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
this.btnBGColor = new Common.UI.ColorButton({
parentEl: $('#shape-background-color-btn'),
color: 'ffffff',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1913,10 +1920,13 @@ define([
this.fillControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker();
this.btnBGColor.on('color:select', _.bind(this.onColorsBGSelect, this));
this.btnBGColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnBGColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#shape-gradient-color-btn'),
color: '000000',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1924,10 +1934,13 @@ define([
this.fillControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnGradColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnGradColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#shape-border-color-btn'),
color: '000000',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1935,6 +1948,8 @@ define([
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnBorderColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
}
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -2094,6 +2109,15 @@ define([
}
},
onEyedropperStart: function (btn) {
this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn));
this.fireEvent('eyedropper', true);
},
onEyedropperEnd: function () {
this.fireEvent('eyedropper', false);
},
txtNoBorders : 'No Line',
strStroke : 'Stroke',
strColor : 'Color',

15
apps/documenteditor/main/app/view/TableSettings.js
View File

@ -714,16 +714,20 @@ define([
parentEl: $('#table-border-color-btn'),
color: 'auto',
auto: true,
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnBorderColor);
this.borderColor = this.btnBorderColor.getPicker();
this.btnBorderColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnBorderColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#table-back-color-btn'),
transparent: true,
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -731,6 +735,8 @@ define([
this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
this.btnBackColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnBackColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
}
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -984,6 +990,15 @@ define([
}
},
onEyedropperStart: function (btn) {
this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn));
this.fireEvent('eyedropper', true);
},
onEyedropperEnd: function () {
this.fireEvent('eyedropper', false);
},
textBorders: 'Border\'s Style',
textBorderColor: 'Color',
textBackColor: 'Background color',

18
apps/documenteditor/main/app/view/TextArtSettings.js
View File

@ -1242,6 +1242,7 @@ define([
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#textart-border-color-btn'),
color: '000000',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1249,10 +1250,13 @@ define([
this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker();
this.btnBorderColor.on('color:select', _.bind(this.onColorsBorderSelect, this));
this.btnBorderColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnBorderColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#textart-gradient-color-btn'),
color: '000000',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1260,11 +1264,14 @@ define([
this.lockedControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker();
this.btnGradColor.on('color:select', _.bind(this.onColorsGradientSelect, this));
this.btnGradColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnGradColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#textart-back-color-btn'),
transparent: true,
color: 'transparent',
eyeDropper: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
@ -1272,6 +1279,8 @@ define([
this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
this.btnBackColor.on('color:select', _.bind(this.onColorsBackSelect, this));
this.btnBackColor.on('eyedropper:start', _.bind(this.onEyedropperStart, this));
this.btnBackColor.on('eyedropper:end', _.bind(this.onEyedropperEnd, this));
}
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
@ -1398,6 +1407,15 @@ define([
}
},
onEyedropperStart: function (btn) {
this.api.asc_startEyedropper(_.bind(btn.eyedropperEnd, btn));
this.fireEvent('eyedropper', true);
},
onEyedropperEnd: function () {
this.fireEvent('eyedropper', false);
},
txtNoBorders : 'No Line',
strStroke : 'Stroke',
strColor : 'Color',