From 7b01301a35da36ec0c2935742db2238e5029efd6 Mon Sep 17 00:00:00 2001
From: Alexander Yuzhin <alexander.yuzhin@onlyoffice.com>
Date: Thu, 24 Nov 2016 10:13:14 +0300
Subject: [PATCH] [DE mobile] Add table border style icons.

---
 .../mobile/app/template/EditTable.template    | 20 +++----
 .../mobile/resources/css/app-ios.css          | 56 ++++++++++++++++++-
 .../mobile/resources/css/app-material.css     | 56 ++++++++++++++++++-
 .../mobile/resources/less/app-ios.less        |  3 +-
 .../mobile/resources/less/app-material.less   |  3 +-
 .../mobile/resources/less/ios/_icons.less     | 53 ++++++++++++++++++
 .../resources/less/material/_icons.less       | 53 ++++++++++++++++++
 7 files changed, 228 insertions(+), 16 deletions(-)

diff --git a/apps/documenteditor/mobile/app/template/EditTable.template b/apps/documenteditor/mobile/app/template/EditTable.template
index 457bd64d9..d6a87ee14 100644
--- a/apps/documenteditor/mobile/app/template/EditTable.template
+++ b/apps/documenteditor/mobile/app/template/EditTable.template
@@ -309,20 +309,20 @@
                                 <div class="item-content buttons" style="-webkit-flex-flow: row wrap;justify-content: space-around;">
                                     <div class="item-inner" style="margin: 20px 0;">
                                         <div class="row">
-                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtbcm"><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type=""><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="cm"><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtb"><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="l"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtbcm"><i class="icon icon-table-borders-all"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type=""><i class="icon icon-table-borders-none"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="cm"><i class="icon icon-table-borders-inner"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtb"><i class="icon icon-table-borders-outer"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="l"><i class="icon icon-table-borders-left"></i></a>
                                         </div>
                                     </div>
                                     <div class="item-inner" style="margin: 0 0 20px;">
                                         <div class="row">
-                                            <a class="button no-ripple" style="min-width:0;" data-type="c"><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="r"><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="t"><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="m"><i class="icon icon-text-align-left"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="b"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="c"><i class="icon icon-table-borders-center"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="r"><i class="icon icon-table-borders-right"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="t"><i class="icon icon-table-borders-top"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="m"><i class="icon icon-table-borders-middle"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="b"><i class="icon icon-table-borders-bottom"></i></a>
                                         </div>
                                     </div>
                                 </div>
diff --git a/apps/documenteditor/mobile/resources/css/app-ios.css b/apps/documenteditor/mobile/resources/css/app-ios.css
index 1922b10f3..81b623cf8 100644
--- a/apps/documenteditor/mobile/resources/css/app-ios.css
+++ b/apps/documenteditor/mobile/resources/css/app-ios.css
@@ -6506,6 +6506,56 @@ i.icon.icon-link {
   height: 22px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20d%3D%22M12.4%2C9.8c0%2C0-2.1-0.1-3.8%2C1.2c-2.8%2C2-3.3%2C4.3-3.3%2C4.3s1.6-1.7%2C3.5-2.5c1.7-0.7%2C3.7-0.4%2C3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11c0%2C5.5%2C4.5%2C10%2C10%2C10s10-4.5%2C10-10C21%2C5.5%2C16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4.1-9-9C2%2C6%2C6%2C2%2C11%2C2s9%2C4.1%2C9%2C9C20%2C16%2C16%2C20%2C11%2C20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+i.icon.icon-table-borders-all {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20d%3D%22M26.9%2C0H0V27H27V0H26.9ZM13%2C26H1V14H13V26Zm0-13H1V1H13V13ZM26%2C26H14V14H26V26Zm0-13H14V1H26V13Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-none {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M26.9%2C0H0V27H27V0H26.9ZM13%2C26H1V14H13V26Zm0-13H1V1H13V13ZM26%2C26H14V14H26V26Zm0-13H14V1H26V13Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-inner {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpolygon%20points%3D%2226%2013%2014%2013%2014%201%2013%201%2013%2013%201%2013%201%2014%2013%2014%2013%2026%2014%2026%2014%2014%2026%2014%2026%2013%22%2F%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-outer {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-left {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20width%3D%221%22%20height%3D%2227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-center {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20x%3D%2213%22%20width%3D%221%22%20height%3D%2227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-right {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20x%3D%2226%22%20width%3D%221%22%20height%3D%2227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-top {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20width%3D%2227%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-middle {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20y%3D%2213%22%20width%3D%2227%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-bottom {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%234066D7%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20y%3D%2226%22%20width%3D%2227%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
 #editor_sdk {
   position: absolute;
   left: 0;
@@ -6524,11 +6574,13 @@ i.icon.icon-link {
 .table-styles .row li {
   margin-bottom: 12px;
 }
-.table-styles li {
+.table-styles li,
+.table-styles .row div {
   margin: 0;
   padding: 1px;
 }
-.table-styles li img {
+.table-styles li img,
+.table-styles .row div img {
   width: 70px;
   height: 50px;
 }
diff --git a/apps/documenteditor/mobile/resources/css/app-material.css b/apps/documenteditor/mobile/resources/css/app-material.css
index 455409dc2..f06cb06de 100644
--- a/apps/documenteditor/mobile/resources/css/app-material.css
+++ b/apps/documenteditor/mobile/resources/css/app-material.css
@@ -6044,6 +6044,56 @@ i.icon.icon-link {
   height: 22px;
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2022%2022%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M12.4%2C9.8c0%2C0-2.1-0.1-3.8%2C1.2c-2.8%2C2-3.3%2C4.3-3.3%2C4.3s1.6-1.7%2C3.5-2.5c1.7-0.7%2C3.7-0.4%2C3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z%20M11%2C1C5.5%2C1%2C1%2C5.5%2C1%2C11c0%2C5.5%2C4.5%2C10%2C10%2C10s10-4.5%2C10-10C21%2C5.5%2C16.5%2C1%2C11%2C1z%20M11%2C20c-5%2C0-9-4.1-9-9C2%2C6%2C6%2C2%2C11%2C2s9%2C4.1%2C9%2C9C20%2C16%2C16%2C20%2C11%2C20z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+i.icon.icon-table-borders-all {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M26.9%2C0H0V27H27V0H26.9ZM13%2C26H1V14H13V26Zm0-13H1V1H13V13ZM26%2C26H14V14H26V26Zm0-13H14V1H26V13Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-none {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M26.9%2C0H0V27H27V0H26.9ZM13%2C26H1V14H13V26Zm0-13H1V1H13V13ZM26%2C26H14V14H26V26Zm0-13H14V1H26V13Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-inner {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpolygon%20points%3D%2226%2013%2014%2013%2014%201%2013%201%2013%2013%201%2013%201%2014%2013%2014%2013%2026%2014%2026%2014%2014%2026%2014%2026%2013%22%2F%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-outer {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-left {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20width%3D%221%22%20height%3D%2227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-center {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20x%3D%2213%22%20width%3D%221%22%20height%3D%2227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-right {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20x%3D%2226%22%20width%3D%221%22%20height%3D%2227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-top {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20width%3D%2227%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-middle {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20y%3D%2213%22%20width%3D%2227%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
+i.icon.icon-table-borders-bottom {
+  width: 28px;
+  height: 28px;
+  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22%235a7dc9%22%3E%3Cg%3E%3Cpath%20opacity%3D%220.3%22%20d%3D%22M27%2C0H0V27H27V0ZM1%2C26V1H26V26H1Z%22%2F%3E%3Crect%20y%3D%2226%22%20width%3D%2227%22%20height%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
+}
 .navbar i.icon.icon-undo {
   width: 22px;
   height: 22px;
@@ -6122,11 +6172,13 @@ textarea {
 .table-styles .row li {
   margin-bottom: 12px;
 }
-.table-styles li {
+.table-styles li,
+.table-styles .row div {
   margin: 0;
   padding: 1px;
 }
-.table-styles li img {
+.table-styles li img,
+.table-styles .row div img {
   width: 70px;
   height: 50px;
 }
diff --git a/apps/documenteditor/mobile/resources/less/app-ios.less b/apps/documenteditor/mobile/resources/less/app-ios.less
index b0306bf55..8ed4742b1 100644
--- a/apps/documenteditor/mobile/resources/less/app-ios.less
+++ b/apps/documenteditor/mobile/resources/less/app-ios.less
@@ -105,7 +105,8 @@ input, textarea {
     }
   }
 
-  li {
+  li,
+  .row div {
     margin: 0;
     padding: 1px;
 
diff --git a/apps/documenteditor/mobile/resources/less/app-material.less b/apps/documenteditor/mobile/resources/less/app-material.less
index 4d89f571a..2d36bdaf9 100644
--- a/apps/documenteditor/mobile/resources/less/app-material.less
+++ b/apps/documenteditor/mobile/resources/less/app-material.less
@@ -98,7 +98,8 @@ input, textarea {
     }
   }
 
-  li {
+  li,
+  .row div {
     margin: 0;
     padding: 1px;
 
diff --git a/apps/documenteditor/mobile/resources/less/ios/_icons.less b/apps/documenteditor/mobile/resources/less/ios/_icons.less
index 9f7395ebc..ad6938491 100644
--- a/apps/documenteditor/mobile/resources/less/ios/_icons.less
+++ b/apps/documenteditor/mobile/resources/less/ios/_icons.less
@@ -195,4 +195,57 @@ i.icon {
     height: 22px;
     .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
   }
+
+  // Presets of table borders
+
+  &.icon-table-borders-all {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
+  }
+  &.icon-table-borders-none {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
+  }
+  &.icon-table-borders-inner {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
+  }
+  &.icon-table-borders-outer {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
+  }
+  &.icon-table-borders-left {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
+  }
+  &.icon-table-borders-center {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
+  }
+  &.icon-table-borders-right {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
+  }
+  &.icon-table-borders-top {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
+  }
+  &.icon-table-borders-middle {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
+  }
+  &.icon-table-borders-bottom {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
+  }
 }
\ No newline at end of file
diff --git a/apps/documenteditor/mobile/resources/less/material/_icons.less b/apps/documenteditor/mobile/resources/less/material/_icons.less
index 321b5376d..4734013c4 100644
--- a/apps/documenteditor/mobile/resources/less/material/_icons.less
+++ b/apps/documenteditor/mobile/resources/less/material/_icons.less
@@ -165,6 +165,59 @@ i.icon {
     height: 22px;
     .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M12.4,9.8c0,0-2.1-0.1-3.8,1.2c-2.8,2-3.3,4.3-3.3,4.3s1.6-1.7,3.5-2.5c1.7-0.7,3.7-0.4,3.7-0.4v1.9l4.8-3.3V11l-4.8-3.3V9.8z M11,1C5.5,1,1,5.5,1,11c0,5.5,4.5,10,10,10s10-4.5,10-10C21,5.5,16.5,1,11,1z M11,20c-5,0-9-4.1-9-9C2,6,6,2,11,2s9,4.1,9,9C20,16,16,20,11,20z"/></g></svg>');
   }
+
+  // Presets of table borders
+
+  &.icon-table-borders-all {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
+  }
+  &.icon-table-borders-none {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M26.9,0H0V27H27V0H26.9ZM13,26H1V14H13V26Zm0-13H1V1H13V13ZM26,26H14V14H26V26Zm0-13H14V1H26V13Z"/></g></svg>');
+  }
+  &.icon-table-borders-inner {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><polygon points="26 13 14 13 14 1 13 1 13 13 1 13 1 14 13 14 13 26 14 26 14 14 26 14 26 13"/><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
+  }
+  &.icon-table-borders-outer {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/></g></svg>');
+  }
+  &.icon-table-borders-left {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="1" height="27"/></g></svg>');
+  }
+  &.icon-table-borders-center {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="13" width="1" height="27"/></g></svg>');
+  }
+  &.icon-table-borders-right {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect x="26" width="1" height="27"/></g></svg>');
+  }
+  &.icon-table-borders-top {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect width="27" height="1"/></g></svg>');
+  }
+  &.icon-table-borders-middle {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="13" width="27" height="1"/></g></svg>');
+  }
+  &.icon-table-borders-bottom {
+    width: 28px;
+    height: 28px;
+    .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" fill="@{themeColor}"><g><path opacity="0.3" d="M27,0H0V27H27V0ZM1,26V1H26V26H1Z"/><rect y="26" width="27" height="1"/></g></svg>');
+  }
 }
 
 // Overwrite color for toolbar