Merge branch 'release/v8.3.0' of https://git.onlyoffice.com/ONLYOFFIC…

…E/web-apps into release/v8.3.0
ONLYOFFICE · Dec 12, 2024 · 3502950 · 3502950
2 parents 58d9f39 + f64baf0
commit 3502950
Show file tree

Hide file tree

Showing 71 changed files with 3,431 additions and 2,644 deletions.
diff --git a/apps/api/documents/api.js b/apps/api/documents/api.js
@@ -480,7 +480,7 @@
 
                 if (typeof _config.document.fileType === 'string' && _config.document.fileType != '') {
                     _config.document.fileType = _config.document.fileType.toLowerCase();
-                    var type = /^(?:(xls|xlsx|ods|csv|gsheet|xlsm|xlt|xltm|xltx|fods|ots|xlsb|sxc|et|ett|numbers)|(pps|ppsx|ppt|pptx|odp|gslides|pot|potm|potx|ppsm|pptm|fodp|otp|sxi|dps|dpt|key)|(pdf|djvu|xps|oxps)|(doc|docx|odt|gdoc|txt|rtf|mht|htm|html|mhtml|epub|docm|dot|dotm|dotx|fodt|ott|fb2|xml|oform|docxf|sxw|stw|wps|wpt|pages)|(vsdx))$/
+                    var type = /^(?:(xls|xlsx|ods|csv|gsheet|xlsm|xlt|xltm|xltx|fods|ots|xlsb|sxc|et|ett|numbers)|(pps|ppsx|ppt|pptx|odp|gslides|pot|potm|potx|ppsm|pptm|fodp|otp|sxi|dps|dpt|key)|(pdf|djvu|xps|oxps)|(doc|docx|odt|gdoc|txt|rtf|mht|htm|html|mhtml|epub|docm|dot|dotm|dotx|fodt|ott|fb2|xml|oform|docxf|sxw|stw|wps|wpt|pages)|(vsdx|vssx|vstx|vsdm|vssm|vstm))$/
                                     .exec(_config.document.fileType);
                     if (!type) {
                         window.alert("The \"document.fileType\" parameter for the config object is invalid. Please correct it.");
@@ -1033,7 +1033,7 @@
             isForm = false;
         if (config.document) {
             if (typeof config.document.fileType === 'string')
-                type = /^(?:(pdf)|(djvu|xps|oxps)|(xls|xlsx|ods|csv|xlst|xlsy|gsheet|xlsm|xlt|xltm|xltx|fods|ots|xlsb|numbers)|(pps|ppsx|ppt|pptx|odp|pptt|ppty|gslides|pot|potm|potx|ppsm|pptm|fodp|otp|key)|(oform|docxf)|(vsdx))$/
+                type = /^(?:(pdf)|(djvu|xps|oxps)|(xls|xlsx|ods|csv|xlst|xlsy|gsheet|xlsm|xlt|xltm|xltx|fods|ots|xlsb|numbers)|(pps|ppsx|ppt|pptx|odp|pptt|ppty|gslides|pot|potm|potx|ppsm|pptm|fodp|otp|key)|(oform|docxf)|(vsdx|vssx|vstx|vsdm|vssm|vstm))$/
                     .exec(config.document.fileType);
 
             if (config.document.permissions)

diff --git a/apps/common/forms/resources/less/common.less b/apps/common/forms/resources/less/common.less
@@ -59,10 +59,6 @@
 @import "../../../../common/main/resources/less/advanced-settings-window.less";
 @import "../../../../common/main/resources/less/searchdialog.less";
 
-@toolbarBorderColor:            @border-toolbar-ie;
-@toolbarBorderColor:            @border-toolbar;
-@toolbarTopColor:               @background-toolbar-ie;
-@toolbarTopColor:               @background-toolbar;
 @toolbarFontSize:               12px;
 
 @iconSpriteCommonPath:          "../../../../common/forms/resources/img/glyphicons.png";
@@ -112,7 +108,7 @@
     min-width: 340px;
     z-index: 100;
     background-color: @background-toolbar-ie;
-    background-color: @toolbarTopColor;
+    background-color: @background-toolbar;
 
     display: flex;
     align-items: center;
@@ -124,7 +120,8 @@
         width: 100%;
         height: 40px;
 
-        .box-inner-shadow(0 -1px 0 @toolbarBorderColor);
+        .box-inner-shadow(0 -1px 0 @border-toolbar-ie);
+        .box-inner-shadow(0 -1px 0 @border-toolbar);
     }
 
     .group {

diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js
@@ -42,13 +42,15 @@ define([
         render: function(parentEl) {
             Common.UI.Button.prototype.render.call(this, parentEl);
 
-            if (/huge/.test(this.options.cls) &&  this.options.split === true && !this.options.hideColorLine) {
+            // options.colorLine: true/false/'line'/'box'
+            var colorLineCls = this.options.colorLine==='box' ? 'btn-color-value-box' : 'btn-color-value-line';
+            if (/huge/.test(this.options.cls) &&  this.options.split === true && (this.options.colorLine!==false)) {
                 var btnEl = $('button', this.cmpEl),
                     btnMenuEl = $(btnEl[1]);
-                btnMenuEl && btnMenuEl.append( $('<div class="btn-color-value-line"></div>'));
-            } else if (!this.options.hideColorLine)
-                $('button:first-child', this.cmpEl).append( $('<div class="btn-color-value-line"></div>'));
-            this.colorEl = this.cmpEl.find('.btn-color-value-line');
+                btnMenuEl && btnMenuEl.append( $('<div class="' + colorLineCls + '"></div>'));
+            } else if ((this.options.colorLine!==false))
+                $('button:first-child', this.cmpEl).append( $('<div class="' + colorLineCls + '"></div>'));
+            this.colorEl = this.cmpEl.find('.' + colorLineCls);
 
             if (this.options.auto)
                 this.autocolor = (typeof this.options.auto == 'object') ? this.options.auto.color || '000000' : '000000';
@@ -178,7 +180,7 @@ define([
 
             if (this.colorEl) {
                 this.colorEl.css({'background-color': (color=='transparent') ? color : ((typeof(color) == 'object') ? '#'+color.color : '#'+color)});
-                this.colorEl.toggleClass('bordered', color=='transparent');
+                this.colorEl.toggleClass('bordered', color=='transparent' || this.options.colorLine==='box');
             }
         },
 

diff --git a/apps/common/main/resources/less/buttons.less b/apps/common/main/resources/less/buttons.less
@@ -543,6 +543,29 @@
             top: 4px;
         }
     }
+    .btn-color-value-box {
+        pointer-events: none;
+        position: absolute;
+        left: 3px;
+        bottom: 3px;
+        width: 14px;
+        height: 14px;
+        background-color: red;
+        .rtl & {
+            left: auto;
+            right: 3px;
+        }
+        &.bordered {
+            border: @scaled-one-px-value-ie solid @border-color-shading-ie;
+            border: @scaled-one-px-value solid @border-color-shading;
+        }
+    }
+
+    &.no-icon {
+        .icon {
+            visibility: hidden;
+        }
+    }
 
     &.no-caret {
         .inner-box-caret {

diff --git a/apps/documenteditor/main/app/template/ImageSettings.template b/apps/documenteditor/main/app/template/ImageSettings.template
@@ -37,6 +37,24 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="image-panel-transparent-fill" style="width: 100%;">
+                <label class="header" style="display:block;"><%= scope.strTransparency %></label>
+                <div style="display: inline-block; margin-top: 3px;">
+                    <label id="image-lbl-transparency-start">0</label>
+                    <div id="image-slider-transparency" style="display: inline-block;margin: 0 4px; vertical-align: middle;"></div>
+                    <label id="image-lbl-transparency-end">100</label>
+                </div>
+                <div id="image-spin-transparency" class="float-right"></div>
+            </div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
     <tr>
         <td colspan=2 class="padding-small">
             <label class="header"><%= scope.textRotation %></label>

diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js
@@ -310,6 +310,37 @@ define([
             this.btnResetCrop.on('click', _.bind(this.onResetCrop, this));
             this.lockedControls.push(this.btnResetCrop);
 
+            this.numTransparency = new Common.UI.MetricSpinner({
+                el: $('#image-spin-transparency'),
+                step: 1,
+                width: 62,
+                value: '100 %',
+                defaultUnit : "%",
+                maxValue: 100,
+                minValue: 0,
+                dataHint: '1',
+                dataHintDirection: 'bottom',
+                dataHintOffset: 'big',
+                ariaLabel: this.strTransparency
+            });
+            this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
+            this.numTransparency.on('inputleave', function(){ this.fireEvent('editcomplete', this);});
+            this.lockedControls.push(this.numTransparency);
+
+            this.sldrTransparency = new Common.UI.SingleSlider({
+                el: $('#image-slider-transparency'),
+                width: 75,
+                minValue: 0,
+                maxValue: 100,
+                value: 100
+            });
+            this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
+            this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
+            this.lockedControls.push(this.sldrTransparency);
+
+            this.lblTransparencyStart = $(this.el).find('#image-lbl-transparency-start');
+            this.lblTransparencyEnd = $(this.el).find('#image-lbl-transparency-end');
+
             this.btnSelectImage = new Common.UI.Button({
                 parentEl: $('#image-button-replace'),
                 cls: 'btn-text-menu-default',
@@ -448,13 +479,28 @@ define([
                 this.btnRotate90.setDisabled(value || this._locked);
                 this.btnFlipV.setDisabled(value || this._locked);
                 this.btnFlipH.setDisabled(value || this._locked);
+                this.numTransparency.setDisabled(value || this._locked);
+                this.sldrTransparency.setDisabled(value || this._locked);
 
                 if (this._state.isOleObject) {
                     var plugin = DE.getCollection('Common.Collections.Plugins').findWhere({guid: pluginGuid});
                     this.btnEditObject.setDisabled(!this.api.asc_canEditTableOleObject() && (plugin===null || plugin ===undefined) || this._locked);
                 } else {
                     this.btnSelectImage.setDisabled(pluginGuid===null || this._locked);
                 }
+
+                var transparency = props.asc_getTransparent();
+                if (Math.abs(this._state.Transparency - transparency) > 0.001 || 
+                    Math.abs(this.numTransparency.getNumberValue() - transparency) > 0.001 || 
+                    (this._state.Transparency === null || transparency === null) && 
+                    (this._state.Transparency !== transparency || this.numTransparency.getNumberValue() !== transparency)) {
+
+                    if (transparency !== undefined) {
+                        this.sldrTransparency.setValue((transparency === null) ? 100 : transparency / 255 * 100, true);
+                        this.numTransparency.setValue(this.sldrTransparency.getValue(), true);
+                    }
+                    this._state.Transparency = transparency;
+                }
             }
         },
 
@@ -692,6 +738,46 @@ define([
             }
         },
 
+        onNumTransparencyChange: function(field, newValue, oldValue, eOpts){
+            this.sldrTransparency.setValue(field.getNumberValue(), true);
+            if (this.api)  {
+                var num = field.getNumberValue();
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(num * 2.55); 
+                this.api.ImgApply(properties);
+            }
+        },
+
+        onTransparencyChange: function(field, newValue, oldValue){
+            this._sliderChanged = newValue;
+            this.numTransparency.setValue(newValue, true);
+
+            if (this._sendUndoPoint) {
+                this.api.setStartPointHistory();
+                this._sendUndoPoint = false;
+                this.updateslider = setInterval(_.bind(this._transparencyApplyFunc, this), 100);
+            }
+        },
+
+        onTransparencyChangeComplete: function(field, newValue, oldValue){
+            clearInterval(this.updateslider);
+            this._sliderChanged = newValue;
+            if (!this._sendUndoPoint) { 
+                this.api.setEndPointHistory();
+                this._transparencyApplyFunc();
+            }
+            this._sendUndoPoint = true;
+        },
+
+         _transparencyApplyFunc: function() {
+            if (this._sliderChanged!==undefined) {
+                var properties = new Asc.asc_CImgProperty();
+                properties.asc_putTransparent(this._sliderChanged * 2.55);
+                this.api.ImgApply(properties);
+                this._sliderChanged = undefined;
+            }
+        },
+
         setLocked: function (locked) {
             this._locked = locked;
         },

diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js
@@ -1628,7 +1628,7 @@ define([
                         caption: me.capBtnPageColor,
                         menu: true,
                         eyeDropper: false,
-                        hideColorLine: true,
+                        colorLine: false,
                         additionalItemsBefore: [
                             me.mnuPageNoFill = new Common.UI.MenuItem({
                                 caption: me.strMenuNoFill,

diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json
@@ -2534,6 +2534,7 @@
   "DE.Views.ImageSettings.txtThrough": "Through",
   "DE.Views.ImageSettings.txtTight": "Tight",
   "DE.Views.ImageSettings.txtTopAndBottom": "Top and bottom",
+  "DE.Views.ImageSettings.strTransparency": "Opacity",
   "DE.Views.ImageSettingsAdvanced.strMargins": "Text padding",
   "DE.Views.ImageSettingsAdvanced.textAbsoluteWH": "Absolute",
   "DE.Views.ImageSettingsAdvanced.textAlignment": "Alignment",

diff --git a/apps/documenteditor/main/resources/less/rightmenu.less b/apps/documenteditor/main/resources/less/rightmenu.less
@@ -136,6 +136,10 @@
         #image-button-90, #image-button-flipv {
             display: inline-block;
         }
+
+        #image-spin-transparency {
+            display: inline-block;
+        }
     }
 
     &#id-header-settings {