From d1a412d6a09d6536524f19ec9c47e38cb4daac0b Mon Sep 17 00:00:00 2001
From: SergeyEzhin <ezhin@mail.ru>
Date: Mon, 30 Nov 2020 20:16:42 +0300
Subject: [PATCH] [DE mobile] Make block Download

---
 apps/documenteditor/mobile/locale/en.json     |  3 +-
 .../src/controller/settings/Download.jsx      | 16 +++++
 .../mobile/src/css/icons-ios.less             | 58 +++++++++++++++++++
 .../mobile/src/view/settings/Download.jsx     | 49 ++++++++++++++++
 .../mobile/src/view/settings/Settings.jsx     |  7 ++-
 5 files changed, 131 insertions(+), 2 deletions(-)
 create mode 100644 apps/documenteditor/mobile/src/controller/settings/Download.jsx
 create mode 100644 apps/documenteditor/mobile/src/view/settings/Download.jsx

diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json
index 055a7ebe9..43f6290c3 100644
--- a/apps/documenteditor/mobile/locale/en.json
+++ b/apps/documenteditor/mobile/locale/en.json
@@ -46,7 +46,8 @@
     "textShowNotification": "Show Notification",
     "textDisableAllMacrosWithNotification": "Disable all macros with notification",
     "textEnableAll": "Enable All",
-    "textEnableAllMacrosWithoutNotification": "Enable all macros without notification"
+    "textEnableAllMacrosWithoutNotification": "Enable all macros without notification",
+    "textDownloadAs": "Download As"
   },
   "Collaboration": {
     "textEditUser": "Users who are editing the file:"
diff --git a/apps/documenteditor/mobile/src/controller/settings/Download.jsx b/apps/documenteditor/mobile/src/controller/settings/Download.jsx
new file mode 100644
index 000000000..d5c8fa064
--- /dev/null
+++ b/apps/documenteditor/mobile/src/controller/settings/Download.jsx
@@ -0,0 +1,16 @@
+import React, { Component } from "react";
+import Download from "../../view/settings/Download";
+
+class DownloadController extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (
+            <Download />
+        );
+    }
+}
+
+
+export default DownloadController;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/css/icons-ios.less b/apps/documenteditor/mobile/src/css/icons-ios.less
index 1defd0a90..362af679a 100644
--- a/apps/documenteditor/mobile/src/css/icons-ios.less
+++ b/apps/documenteditor/mobile/src/css/icons-ios.less
@@ -71,6 +71,64 @@
       height: 22px;
       .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 7 22 22" fill="@{themeColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
     }
+
+    // Download
+
+    &.icon-format-docx {
+      width: 30px;
+      height: 30px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="22.015 20.75 66 66"><defs><style>.cls-1{fill:"@{themeColor}"}.cls-2{fill:#fff;}.cls-3{fill:"@{themeColor}"}</style></defs><g id="g3103" transform="translate(-21.015556,0)" display="none"><path class="cls-1" fill="@{themeColor}" d="M78.521,0h7.475c0,3.337,0,6.663,0,10   c13.375,0.075,26.738-0.138,40.101,0.075c2.85-0.288,5.087,1.925,4.825,4.775c0.212,24.625-0.051,49.262,0.125,73.887   c-0.125,2.525,0.25,5.325-1.213,7.563c-1.825,1.3-4.188,1.138-6.313,1.237C111.008,97.475,98.508,97.5,85.996,97.5   c0,3.338,0,6.662,0,10h-7.813c-19.024-3.475-38.1-6.662-57.162-10c-0.013-29.162,0-58.325,0-87.475   C40.183,6.675,59.359,3.413,78.521,0z"/><path class="cls-2" d="M85.996,13.75c13.75,0,27.5,0,41.25,0   c0,26.663,0,53.338,0,80c-13.75,0-27.5,0-41.25,0c0-3.338,0-6.662,0-10c10.838,0,21.663,0,32.5,0c0-1.662,0-3.338,0-5   c-10.837,0-21.662,0-32.5,0c0-2.088,0-4.162,0-6.25c10.838,0,21.663,0,32.5,0c0-1.662,0-3.338,0-5c-10.837,0-21.662,0-32.5,0   c0-2.088,0-4.162,0-6.25c10.838,0,21.663,0,32.5,0c0-1.662,0-3.338,0-5c-10.837,0-21.662,0-32.5,0c0-2.087,0-4.163,0-6.25   c10.838,0,21.663,0,32.5,0c0-1.663,0-3.337,0-5c-10.837,0-21.662,0-32.5,0c0-2.087,0-4.163,0-6.25c10.838,0,21.663,0,32.5,0   c0-1.663,0-3.337,0-5c-10.837,0-21.662,0-32.5,0c0-2.087,0-4.163,0-6.25c10.838,0,21.663,0,32.5,0c0-1.663,0-3.337,0-5   c-10.837,0-21.662,0-32.5,0C85.996,19.587,85.996,16.663,85.996,13.75z"/><path class="cls-2" fill="#fff" d="M46.846,35.837   c2.375-0.137,4.75-0.237,7.125-0.362c1.662,8.438,3.362,16.862,5.162,25.262c1.413-8.675,2.976-17.325,4.487-25.987   c2.5-0.087,5-0.225,7.488-0.375c-2.825,12.112-5.301,24.325-8.388,36.362c-2.088,1.088-5.213-0.05-7.688,0.125   c-1.663-8.274-3.601-16.5-5.088-24.813c-1.462,8.075-3.362,16.075-5.037,24.101c-2.4-0.125-4.813-0.275-7.226-0.438   c-2.074-11-4.512-21.925-6.449-32.95c2.137-0.1,4.287-0.188,6.425-0.263c1.287,7.962,2.75,15.888,3.875,23.862   C43.297,52.188,45.096,44.013,46.846,35.837z"/></g><path class="cls-3" fill="@{themeColor}" d="M50.69,36.792c2.375-0.137,4.75-0.237,7.125-0.362  c1.662,8.438,3.362,16.862,5.162,25.262c1.413-8.675,2.976-17.325,4.487-25.987c2.5-0.087,5-0.225,7.488-0.375  c-2.825,12.112-5.301,24.325-8.388,36.362c-2.088,1.088-5.213-0.05-7.688,0.125c-1.663-8.274-3.601-16.5-5.088-24.813  c-1.462,8.075-3.362,16.075-5.037,24.101c-2.4-0.125-4.813-0.275-7.226-0.438c-2.074-11-4.512-21.925-6.449-32.95  c2.137-0.1,4.287-0.188,6.425-0.263c1.287,7.962,2.75,15.888,3.875,23.862C47.14,53.143,48.94,44.968,50.69,36.792z"/></svg>')
+    }
+
+    &.icon-format-pdf {
+      width: 30px;
+      height: 30px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 33 33" y="0px" x="0px"><defs><style>.cls-1{fill:"@{themeColor}"}</style></defs><path d="M11.875,18.648c0.8-1.567,1.709-3.334,2.437-5.107l0,0  l0.288-0.7c-0.95-3.616-1.52-6.519-1.011-8.396l0,0c0.137-0.489,0.704-0.786,1.31-0.786l0,0l0.369,0.005h0.068  c0.83-0.013,1.22,1.042,1.264,1.453l0,0c0.073,0.683-0.243,1.839-0.243,1.839l0,0c0-0.467,0.018-1.221-0.276-1.873l0,0  c-0.343-0.753-0.671-1.204-0.965-1.275l0,0c-0.148,0.099-0.292,0.304-0.342,0.699l0,0c-0.103,0.553-0.133,1.252-0.133,1.612l0,0  c0,1.272,0.25,2.952,0.743,4.683l0,0c0.093-0.268,0.174-0.526,0.24-0.767l0,0c0.101-0.38,0.743-2.901,0.743-2.901l0,0  c0,0-0.162,3.355-0.388,4.371l0,0c-0.048,0.215-0.102,0.427-0.158,0.644l0,0c0.812,2.268,2.121,4.292,3.68,5.75l0,0  c0.615,0.575,1.393,1.038,2.128,1.461l0,0c1.605-0.229,3.084-0.338,4.318-0.324l0,0c1.637,0.021,2.838,0.264,3.324,0.743l0,0  c0.238,0.232,0.335,0.514,0.365,0.83l0,0c0.007,0.122-0.053,0.41-0.07,0.482l0,0c0.018-0.088,0.018-0.518-1.297-0.938l0,0  c-1.034-0.33-2.971-0.32-5.295-0.073l0,0c2.688,1.315,5.307,1.968,6.137,1.577l0,0c0.203-0.1,0.449-0.437,0.449-0.437l0,0  c0,0-0.146,0.665-0.252,0.831l0,0c-0.134,0.18-0.396,0.376-0.646,0.441l0,0c-1.311,0.35-4.722-0.459-7.695-2.158l0,0  c-3.322,0.489-6.972,1.393-9.897,2.353l0,0c-2.874,5.037-5.035,7.351-6.793,6.471l0,0L3.63,28.833  c-0.263-0.15-0.303-0.516-0.242-0.813l0,0c0.205-1.003,1.462-2.513,3.988-4.021l0,0c0.272-0.165,1.483-0.805,1.483-0.805l0,0  c0,0-0.896,0.868-1.106,1.038l0,0c-2.016,1.652-3.504,3.73-3.467,4.536l0,0l0.007,0.069C6.005,28.594,8.573,25.109,11.875,18.648   M12.921,19.184c-0.551,1.038-1.09,2.001-1.588,2.886l0,0c2.752-1.153,5.715-1.892,8.535-2.416l0,0  c-0.379-0.262-0.746-0.539-1.093-0.832l0,0c-1.554-1.314-2.737-2.955-3.595-4.681l0,0C14.636,15.607,13.989,17.166,12.921,19.184" fill="@{themeColor}" class="cls-1"/></svg>')
+    }
+
+    &.icon-format-pdfa {
+      width: 30px;
+      height: 30px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 33 33" y="0px" x="0px"><defs><style>.cls-1{fill:"@{themeColor}"}</style></defs><path fill-rule="evenodd" clip-rule="evenodd" d="M11.875 18.648L11.9617 18.4783C12.7401 16.954 13.6102 15.2503 14.312 13.541L14.6 12.841C13.65 9.225 13.08 6.322 13.589 4.445C13.726 3.956 14.293 3.659 14.899 3.659L15.268 3.664H15.336C16.166 3.651 16.556 4.706 16.6 5.117C16.673 5.8 16.357 6.956 16.357 6.956L16.3571 6.87946C16.358 6.40944 16.3594 5.70047 16.081 5.083C15.738 4.33 15.41 3.879 15.116 3.808C14.968 3.907 14.824 4.112 14.774 4.507C14.671 5.06 14.641 5.759 14.641 6.119C14.641 7.391 14.891 9.071 15.384 10.802C15.477 10.534 15.558 10.276 15.624 10.035C15.725 9.655 16.367 7.134 16.367 7.134C16.367 7.134 16.205 10.489 15.979 11.505C15.931 11.72 15.877 11.932 15.821 12.149C16.633 14.417 17.942 16.441 19.501 17.899C19.9467 18.3157 20.4779 18.6735 21.0164 19H29C30.1046 19 31 19.8954 31 21V29C31 30.1046 30.1046 31 29 31H17C15.8954 31 15 30.1046 15 29V21.5492C13.6156 21.9019 12.2807 22.2896 11.07 22.687C8.19599 27.724 6.03499 30.038 4.27699 29.158L3.62999 28.833C3.36699 28.683 3.32699 28.317 3.38799 28.02C3.59299 27.017 4.84999 25.507 7.37599 23.999C7.64799 23.834 8.85899 23.194 8.85899 23.194C8.85899 23.194 7.96299 24.062 7.75299 24.232C5.73699 25.884 4.24899 27.962 4.28599 28.768L4.29299 28.837C6.00499 28.594 8.57299 25.109 11.875 18.648ZM18.775 18.822C18.8461 18.882 18.918 18.9413 18.9906 19H17C15.9681 19 15.1187 19.7815 15.0114 20.785C13.7648 21.146 12.529 21.5689 11.333 22.07C11.831 21.185 12.37 20.222 12.921 19.184C13.989 17.166 14.636 15.607 15.18 14.141C16.038 15.867 17.221 17.508 18.775 18.822ZM21.5553 27.3521H24.4447L24.9995 29H26.7518L23.7581 21.002H22.231L19.2537 29H21.006L21.5553 27.3521ZM23.9998 26.0172H22.0002L22.9945 23.0234L23.9998 26.0172Z" class="cls-1" fill="@{themeColor}"/></svg>')
+    }
+
+    &.icon-format-txt {
+      width: 24px;
+      height: 24px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><path d="M22 17H2V18H22V17Z" fill="@{themeColor}"/><path d="M22 20H2V21H22V20Z" fill="@{themeColor}"/><path d="M22 14H2V15H22V14Z" fill="@{themeColor}"/><path d="M22 11H2V12H22V11Z" fill="@{themeColor}"/><path d="M22 8H2V9H22V8Z" fill="@{themeColor}"/><path d="M22 5H2V6H22V5Z" fill="@{themeColor}"/><path d="M22 2H2V3H22V2Z" fill="@{themeColor}"/></svg>')
+    }
+
+    &.icon-format-rtf {
+      width: 24px;
+      height: 24px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"><rect x="2" y="2" width="7" height="7" fill="@{themeColor}"/><path d="M22 11H2V12H22V11Z" fill="@{themeColor}"/><path d="M22 14H2V15H22V14Z" fill="@{themeColor}"/><path d="M22 17H2V18H22V17Z" fill="@{themeColor}"/><path d="M22 20H2V21H22V20Z" fill="@{themeColor}"/><path d="M22 2H11V3H22V2Z" fill="@{themeColor}"/><path d="M22 5H11V6H22V5Z" fill="@{themeColor}"/><path d="M22 8H11V9H22V8Z" fill="@{themeColor}"/></svg>')
+    }
+
+    &.icon-format-odt {
+      width: 30px;
+      height: 30px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 193.631 193.63" y="0px" x="0px"><path d="M193.16,59.725v-0.006  c-0.334-0.173-0.671-0.334-1.004-0.497c-5.357-2.586-11.257-4.287-17.526-4.88c-11.083-1.049-21.673,1.496-30.622,6.678  c-6.13-3.477-13.072-5.741-20.542-6.448c-10.298-0.974-20.17,1.16-28.697,5.629c-0.084,0.044-0.17,0.095-0.251,0.135  c-0.207,0.162-0.347,0.414-0.347,0.697c0,0.492,0.392,0.89,0.889,0.89c0.046,0,0.091-0.007,0.139-0.017  c0.021-0.002,0.042-0.011,0.061-0.015c4.586-0.848,9.368-1.088,14.243-0.627c13.683,1.293,25.609,5.521,33.975,15.011  c0.436,0.455,0.822,0.427,1.265-0.024c10.524-12.2,26.663-17.021,44.006-15.382c0.968,0.094,1.921,0.213,2.871,0.355  c0.33,0.05,0.836,0.134,1.133,0.167c0.572,0.063,0.88-0.397,0.88-0.891C193.629,60.166,193.486,59.886,193.16,59.725L193.16,59.725z" class="cls-1"/><path d="M173.053,102.654c-0.056-0.029-0.106-0.046-0.154-0.066  c-10.517-4.349-22.02-6.758-34.093-6.758c-19.293,0-37.155,6.127-51.757,16.524c-11.146-4.993-23.497-7.776-36.496-7.776  c-18.485,0-35.648,5.617-49.895,15.237c-0.047,0.029-0.095,0.066-0.149,0.104C0.205,120.154,0,120.528,0,120.957  c0,0.729,0.592,1.324,1.323,1.324c0.086,0,0.174-0.013,0.259-0.03c0.058-0.015,0.107-0.028,0.161-0.048  c8.166-2.456,16.832-3.791,25.798-3.791c23.836,0,45.083,5.633,61.08,20.68c0.038,0.029,0.071,0.066,0.111,0.104  c0.232,0.205,0.53,0.325,0.863,0.325c0.412,0,0.774-0.189,1.018-0.486c0.006,0.004,0.515-0.72,0.773-1.07  c16.246-22.216,43.03-33.172,72.846-33.172c2.128,0,4.246,0.08,6.337,0.225c0.602,0.047,1.874,0.144,1.903,0.144  c0.726,0,1.322-0.591,1.322-1.324C173.796,103.313,173.492,102.862,173.053,102.654L173.053,102.654z" class="cls-1" fill="@{themeColor}"/></svg>')
+    }
+
+    &.icon-format-html {
+      width: 30px;
+      height: 30px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 62 62"><g><path class="cls-1" fill="@{themeColor}" d="M24.993,38.689L11.34,32.753v-3.288l13.653-5.91v3.872l-9.523,3.641l9.523,3.777V38.689z"/><path class="cls-1" fill="@{themeColor}" d="M27.09,41.298l4.931-20.596h2.867l-4.986,20.596H27.09z"/><path class="cls-1" fill="@{themeColor}" d="M36.986,38.703v-3.845l9.536-3.75L36.986,27.4v-3.817l13.666,5.91v3.261L36.986,38.703z"/></g></svg>')
+    }
+
+    &.icon-format-dotx {
+      width: 30px;
+      height: 30px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 33 33"><defs><style>.cls-1{fill:#446995;}.cls-2{fill:#fff;}.cls-3{fill:#446995;}</style></defs><g><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_38" data-name="Path 38" d="M12.223,119.714c1.251-.066,2.5-.115,3.752-.177.875,4.123,1.771,8.239,2.718,12.343.744-4.239,1.567-8.464,2.363-12.7,1.317-.042,2.633-.109,3.944-.183-1.488,5.917-2.792,11.886-4.417,17.767-1.1.531-2.745-.026-4.049.06-.876-4.042-1.9-8.061-2.679-12.123-.77,3.945-1.771,7.854-2.653,11.775-1.264-.06-2.535-.134-3.805-.213C6.3,130.892,5.02,125.553,4,120.167c1.125-.049,2.258-.093,3.384-.129.678,3.889,1.448,7.762,2.041,11.659C10.353,127.7,11.3,123.708,12.223,119.714Z" transform="translate(-2 -117)" class="cls-1" fill="@{themeColor}"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1" fill="@{themeColor}"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" class="cls-2" fill="#fff" /></g></g></svg>')
+    }
+
+    &.icon-format-ott {
+      width: 30px;
+      height: 30px;
+      .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 33 33"><defs><clipPath id="clip-ott"><rect width="33" height="33"/></clipPath><style>.cls-1{fill:#446995;}</style></defs><g id="ott" clip-path="url(#clip-ott)"><rect id="Rectangle_20" data-name="Rectangle 20" width="33" height="33" fill="none"/><path id="Path_33" data-name="Path 33" d="M125.173,121h0c-.046-.03-.093-.059-.141-.088a6.133,6.133,0,0,0-2.467-.869,6.014,6.014,0,0,0-4.309,1.188,6.223,6.223,0,0,0-2.892-1.147,5.965,5.965,0,0,0-4.039,1l-.036.024a.176.176,0,0,0-.049.125.145.145,0,0,0,.126.158l.019,0a.019.019,0,0,0,.009,0,5.781,5.781,0,0,1,2.005-.111,6.41,6.41,0,0,1,4.782,2.669c.06.081.115.076.178,0a6.288,6.288,0,0,1,6.194-2.735c.136.017.27.038.4.064.047.009.119.024.161.03.08.011.123-.071.123-.159A.155.155,0,0,0,125.173,121Z" transform="translate(-94.24 -116)" class="cls-1" fill="@{themeColor}"/><path id="Path_34" data-name="Path 34" d="M126.894,125.978a.175.175,0,0,0-.022-.011,11.686,11.686,0,0,0-4.905-1.082,11.924,11.924,0,0,0-7.444,2.647,11.725,11.725,0,0,0-5.251-1.245,11.884,11.884,0,0,0-7.176,2.441.229.229,0,0,0-.022.016.217.217,0,0,0-.073.167.2.2,0,0,0,.191.211.167.167,0,0,0,.037,0,.118.118,0,0,0,.023-.008,11.679,11.679,0,0,1,3.71-.608c3.429,0,6.486.9,8.787,3.315a.093.093,0,0,1,.016.016.172.172,0,0,0,.123.052.18.18,0,0,0,.147-.078s.075-.115.111-.171a12.1,12.1,0,0,1,10.479-5.315c.306,0,.611.014.912.037l.273.022a.2.2,0,0,0,.191-.211A.211.211,0,0,0,126.894,125.978Z" transform="translate(-100 -115.885)" class="cls-1" fill="@{themeColor}"/><g id="Group_5" data-name="Group 5" transform="translate(16 16)"><path id="Path_44" data-name="Path 44" d="M1.011,0H13.989A1.011,1.011,0,0,1,15,1.011V13.989A1.011,1.011,0,0,1,13.989,15H1.011A1.011,1.011,0,0,1,0,13.989V1.011A1.011,1.011,0,0,1,1.011,0Z" class="cls-1" fill="@{themeColor}"/><path id="Path_39" data-name="Path 39" d="M5.794,13.25V3.911H9.258V2.25h-9V3.911H3.729V13.25Z" transform="translate(2.742 -0.25)" fill="#fff"/></g></g></svg>')
+    }
+
+
     //Edit
     &.icon-text-additional {
       width: 22px;
diff --git a/apps/documenteditor/mobile/src/view/settings/Download.jsx b/apps/documenteditor/mobile/src/view/settings/Download.jsx
new file mode 100644
index 000000000..5bc0af468
--- /dev/null
+++ b/apps/documenteditor/mobile/src/view/settings/Download.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { observer } from "mobx-react";
+import { Page, Navbar, List, ListItem, BlockTitle, Icon } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageDownload = props => {
+    const { t } = useTranslation();
+    const _t = t("Settings", { returnObjects: true });
+
+    return (
+        <Page>
+            <Navbar title={_t.textDownload} backLink={_t.textBack} />
+            <BlockTitle>{_t.textDownloadAs}</BlockTitle>
+            <List>
+                <ListItem title="DOCX">
+                    <Icon slot="media" icon="icon-format-docx"></Icon>
+                </ListItem>
+                <ListItem title="PDF">
+                    <Icon slot="media" icon="icon-format-pdf"></Icon>
+                </ListItem>
+                <ListItem title="PDF/A">
+                    <Icon slot="media" icon="icon-format-pdfa"></Icon>
+                </ListItem>
+                <ListItem title="TXT">
+                    <Icon slot="media" icon="icon-format-txt"></Icon>
+                </ListItem>
+                <ListItem title="RTF">
+                    <Icon slot="media" icon="icon-format-rtf"></Icon>
+                </ListItem>
+                <ListItem title="ODT">
+                    <Icon slot="media" icon="icon-format-odt"></Icon>
+                </ListItem>
+                <ListItem title="HTML">
+                    <Icon slot="media" icon="icon-format-html"></Icon>
+                </ListItem>
+                <ListItem title="DOTX">
+                    <Icon slot="media" icon="icon-format-dotx"></Icon>
+                </ListItem>
+                <ListItem title="OTT">
+                    <Icon slot="media" icon="icon-format-ott"></Icon>
+                </ListItem>
+            </List>
+        </Page>
+    )
+}
+
+const Download = observer(PageDownload);
+
+export default Download;
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
index 1ece64a98..827d3f5ce 100644
--- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx
+++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx
@@ -6,6 +6,7 @@ import {Device} from '../../../../../common/mobile/utils/device';
 
 import DocumentSettingsController from "../../controller/settings/DocumentSettings";
 import DocumentInfoController from "../../controller/settings/DocumentInfo";
+import DownloadController from "../../controller/settings/Download";
 import ApplicationSettingsController from "../../controller/settings/ApplicationSettings";
 import { DocumentFormats, DocumentMargins } from "./DocumentSettings";
 import { MacrosSettings } from "./ApplicationSettings";
@@ -38,6 +39,10 @@ const routes = [
     {
         path: '/macros-settings/',
         component: MacrosSettings
+    },
+    {
+        path: '/download/',
+        component: DownloadController
     }
 ];
 
@@ -73,7 +78,7 @@ const SettingsList = withTranslation()(props => {
                     <ListItem title={_t.textApplicationSettings} link="#" onClick={onoptionclick.bind(this, "/application-settings/")}>
                         <Icon slot="media" icon="icon-app-settings"></Icon>
                     </ListItem>
-                    <ListItem title={_t.textDownload} link="#">
+                    <ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, "/download/")}>
                         <Icon slot="media" icon="icon-download"></Icon>
                     </ListItem>
                     <ListItem title={_t.textPrint}>