Merge pull request #220 from ONLYOFFICE/feature/shape-shadow

Add shape shadow

apps/documenteditor/main/app/template/ShapeSettings.template

@@ -177,6 +177,16 @@
             <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="shape-checkbox-shadow"></div>
+        </td>
+    </tr>
     <tr class="shape-only">
         <td class="padding-small">
             <div class="separator horizontal"></div>

apps/documenteditor/main/app/view/ShapeSettings.js

@@ -1156,6 +1156,8 @@ define([
                     this._state.GradColor = color;
                 }
 
+                this.chShadow.setValue(!!shapeprops.asc_getShadow(), true);
+
                 this._noApply = false;
             }
         },
@@ -1466,6 +1468,13 @@ define([
             this.btnChangeShape.render( $('#shape-btn-change')) ;
             this.lockedControls.push(this.btnChangeShape);
 
+            this.chShadow = new Common.UI.CheckBox({
+                el: $('#shape-checkbox-shadow'),
+                labelText: this.strShadow
+            });
+            this.chShadow.on('change', _.bind(this.onCheckShadow, this));
+            this.lockedControls.push(this.chShadow);
+
             this.linkAdvanced = $('#shape-advanced-link');
             $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
@@ -1591,6 +1600,16 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
+        onCheckShadow: function(field, newValue, oldValue, eOpts) {
+            if (this.api)   {
+                var props = new Asc.asc_CShapeProperty();
+                props.asc_putShadow((field.getValue()=='checked') ? new Asc.asc_CShadowProperty() : null);
+                this.imgprops.put_ShapeProperties(props);
+                this.api.ImgApply(this.imgprops);
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
         fillAutoShapes: function() {
             var me = this,
                 shapesStore = this.application.getCollection('ShapeGroups');
@@ -1854,6 +1873,7 @@ define([
         textHint270: 'Rotate 90° Counterclockwise',
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
-        textHintFlipH: 'Flip Horizontally'
+        textHintFlipH: 'Flip Horizontally',
+        strShadow: 'Show shadow'
     }, DE.Views.ShapeSettings || {}));
 });

apps/documenteditor/main/locale/en.json

@@ -1822,6 +1822,7 @@
   "DE.Views.ShapeSettings.txtTight": "Tight",
   "DE.Views.ShapeSettings.txtTopAndBottom": "Top and bottom",
   "DE.Views.ShapeSettings.txtWood": "Wood",
+  "DE.Views.ShapeSettings.strShadow": "Show shadow",
   "DE.Views.SignatureSettings.notcriticalErrorTitle": "Warning",
   "DE.Views.SignatureSettings.strDelete": "Remove Signature",
   "DE.Views.SignatureSettings.strDetails": "Signature Details",

apps/documenteditor/main/locale/ru.json

@@ -1819,6 +1819,7 @@
   "DE.Views.ShapeSettings.txtTight": "По контуру",
   "DE.Views.ShapeSettings.txtTopAndBottom": "Сверху и снизу",
   "DE.Views.ShapeSettings.txtWood": "Дерево",
+  "DE.Views.ShapeSettings.strShadow": "Отображать тень",
   "DE.Views.SignatureSettings.notcriticalErrorTitle": "Внимание",
   "DE.Views.SignatureSettings.strDelete": "Удалить подпись",
   "DE.Views.SignatureSettings.strDetails": "Состав подписи",

apps/presentationeditor/main/app/template/ShapeSettings.template

@@ -159,6 +159,16 @@
             <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="shape-checkbox-shadow"></div>
+        </td>
+    </tr>
     <tr class="shape-only">
         <td class="padding-small">
             <div class="separator horizontal"></div>

apps/presentationeditor/main/app/view/ShapeSettings.js

@@ -1069,6 +1069,8 @@ define([
                     this._state.GradColor = color;
                 }
 
+                this.chShadow.setValue(!!props.asc_getShadow(), true);
+
                 this._noApply = false;
             }
         },
@@ -1341,6 +1343,13 @@ define([
             this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
             this.lockedControls.push(this.btnFlipH);
 
+            this.chShadow = new Common.UI.CheckBox({
+                el: $('#shape-checkbox-shadow'),
+                labelText: this.strShadow
+            });
+            this.chShadow.on('change', _.bind(this.onCheckShadow, this));
+            this.lockedControls.push(this.chShadow);
+
             this.linkAdvanced = $('#shape-advanced-link');
             $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
         },
@@ -1447,6 +1456,15 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
+        onCheckShadow: function(field, newValue, oldValue, eOpts) {
+            if (this.api)   {
+                var props = new Asc.asc_CShapeProperty();
+                props.asc_putShadow((field.getValue()=='checked') ? new Asc.asc_CShadowProperty() : null);
+                this.api.ShapeApply(props);
+            }
+            this.fireEvent('editcomplete', this);
+        },
+
         fillAutoShapes: function() {
             var me = this,
                 shapesStore = this.application.getCollection('ShapeGroups');
@@ -1718,6 +1736,7 @@ define([
         textHint270: 'Rotate 90° Counterclockwise',
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
-        textHintFlipH: 'Flip Horizontally'
+        textHintFlipH: 'Flip Horizontally',
+        strShadow: 'Show shadow'
     }, PE.Views.ShapeSettings || {}));
 });

apps/presentationeditor/main/locale/en.json

@@ -1402,6 +1402,7 @@
   "PE.Views.ShapeSettings.txtNoBorders": "No Line",
   "PE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "PE.Views.ShapeSettings.txtWood": "Wood",
+  "PE.Views.ShapeSettings.strShadow": "Show shadow",
   "PE.Views.ShapeSettingsAdvanced.cancelButtonText": "Cancel",
   "PE.Views.ShapeSettingsAdvanced.okButtonText": "OK",
   "PE.Views.ShapeSettingsAdvanced.strColumns": "Columns",

apps/presentationeditor/main/locale/ru.json

@@ -1401,6 +1401,7 @@
   "PE.Views.ShapeSettings.txtNoBorders": "Без обводки",
   "PE.Views.ShapeSettings.txtPapyrus": "Папирус",
   "PE.Views.ShapeSettings.txtWood": "Дерево",
+  "PE.Views.ShapeSettings.strShadow": "Отображать тень",
   "PE.Views.ShapeSettingsAdvanced.cancelButtonText": "Отмена",
   "PE.Views.ShapeSettingsAdvanced.okButtonText": "OK",
   "PE.Views.ShapeSettingsAdvanced.strColumns": "Колонки",

apps/spreadsheeteditor/main/app/template/ShapeSettings.template

@@ -159,6 +159,16 @@
             <div id="shape-btn-change" style="display: inline-block; float:right;"></div>
         </td>
     </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div class="separator horizontal"></div>
+        </td>
+    </tr>
+    <tr>
+        <td class="padding-small" colspan=2>
+            <div id="shape-checkbox-shadow"></div>
+        </td>
+    </tr>
     <tr class="shape-only">
         <td class="padding-small">
             <div class="separator horizontal"></div>

apps/spreadsheeteditor/main/app/view/ShapeSettings.js

@@ -1093,6 +1093,8 @@ define([
                     this._state.GradColor = color;
                 }
 
+                this.chShadow.setValue(!!shapeprops.asc_getShadow(), true);
+
                 this._noApply = false;
             }
         },
@@ -1365,6 +1367,13 @@ define([
             this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
             this.lockedControls.push(this.btnFlipH);
 
+            this.chShadow = new Common.UI.CheckBox({
+                el: $('#shape-checkbox-shadow'),
+                labelText: this.strShadow
+            });
+            this.chShadow.on('change', _.bind(this.onCheckShadow, this));
+            this.lockedControls.push(this.chShadow);
+
             $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
             this.linkAdvanced = $('#shape-advanced-link');
         },
@@ -1533,6 +1542,16 @@ define([
             Common.NotificationCenter.trigger('edit:complete', this);
         },
 
+        onCheckShadow: function(field, newValue, oldValue, eOpts) {
+            if (this.api)   {
+                var props = new Asc.asc_CShapeProperty();
+                props.asc_putShadow((field.getValue()=='checked') ? new Asc.asc_CShadowProperty() : null);
+                this.imgprops.asc_putShapeProperties(props);
+                this.api.asc_setGraphicObjectProps(this.imgprops);
+            }
+            Common.NotificationCenter.trigger('edit:complete', this);
+        },
+
         UpdateThemeColors: function() {
             if (!this.btnBackColor) {
                 this.btnBackColor = new Common.UI.ColorButton({
@@ -1745,6 +1764,7 @@ define([
         textHint270: 'Rotate 90° Counterclockwise',
         textHint90: 'Rotate 90° Clockwise',
         textHintFlipV: 'Flip Vertically',
-        textHintFlipH: 'Flip Horizontally'
+        textHintFlipH: 'Flip Horizontally',
+        strShadow: 'Show shadow'
     }, SSE.Views.ShapeSettings || {}));
 });

apps/spreadsheeteditor/main/locale/en.json

@@ -1978,6 +1978,7 @@
   "SSE.Views.ShapeSettings.txtNoBorders": "No Line",
   "SSE.Views.ShapeSettings.txtPapyrus": "Papyrus",
   "SSE.Views.ShapeSettings.txtWood": "Wood",
+  "SSE.Views.ShapeSettings.strShadow": "Show shadow",
   "SSE.Views.ShapeSettingsAdvanced.cancelButtonText": "Cancel",
   "SSE.Views.ShapeSettingsAdvanced.okButtonText": "OK",
   "SSE.Views.ShapeSettingsAdvanced.strColumns": "Columns",

apps/spreadsheeteditor/main/locale/ru.json

@@ -1973,6 +1973,7 @@
   "SSE.Views.ShapeSettings.txtNoBorders": "Без обводки",
   "SSE.Views.ShapeSettings.txtPapyrus": "Папирус",
   "SSE.Views.ShapeSettings.txtWood": "Дерево",
+  "SSE.Views.ShapeSettings.strShadow": "Отображать тень",
   "SSE.Views.ShapeSettingsAdvanced.cancelButtonText": "Отмена",
   "SSE.Views.ShapeSettingsAdvanced.okButtonText": "ОК",
   "SSE.Views.ShapeSettingsAdvanced.strColumns": "Колонки",