From 7259688145d988f3bb0a1c045d67787f7742b5eb Mon Sep 17 00:00:00 2001
From: Alexander Yuzhin <alexander.yuzhin@onlyoffice.com>
Date: Thu, 24 Nov 2016 09:33:24 +0300
Subject: [PATCH] [SE mobile] Fixed display document area.
---
.../mobile/app/view/Toolbar.js | 20 ++-
.../mobile/resources/css/app-ios.css | 116 +++++++++---------
.../mobile/resources/css/app-material.css | 82 +++++--------
.../mobile/resources/less/app-ios.less | 12 ++
.../mobile/resources/less/app-material.less | 13 ++
5 files changed, 129 insertions(+), 114 deletions(-)
diff --git a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js
index 4feca18db..c3fd50008 100644
--- a/apps/spreadsheeteditor/mobile/app/view/Toolbar.js
+++ b/apps/spreadsheeteditor/mobile/app/view/Toolbar.js
@@ -81,15 +81,18 @@ define([
// Render layout
render: function() {
- var $el = $(this.el);
+ var me = this,
+ $el = $(me.el);
- $el.prepend(this.template({
+ $el.prepend(me.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
backTitle : Common.SharedSettings.get('android') ? '' : 'Back'
}));
- return this;
+ $('.view-main .navbar').on('addClass removeClass', _.bind(me.onDisplayMainNavbar, me));
+
+ return me;
},
setMode: function (mode) {
@@ -100,6 +103,17 @@ define([
}
},
+ onDisplayMainNavbar: function (e) {
+ var $target = $(e.currentTarget),
+ navbarHidden = $target.hasClass('navbar-hidden'),
+ pickerHeight = $('.picker-modal').height() || 260;
+
+ $('#editor_sdk').css({
+ top : navbarHidden ? 0 : '',
+ bottom : navbarHidden ? pickerHeight : ''
+ });
+ },
+
// Search
searchToggle: function() {
if ($$('.searchbar.document').length > 0) {
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
index 06c1dabb4..efdb0916d 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-ios.css
@@ -5865,89 +5865,75 @@ html.pixel-ratio-3 .phone.ios .container-edit .navbar:before {
.container-settings.popover {
width: 360px;
}
-.container-edit.popup .list-block ul,
-.container-add.popup .list-block ul,
-.container-settings.popup .list-block ul,
-.container-edit.popover .list-block ul,
-.container-add.popover .list-block ul,
-.container-settings.popover .list-block ul {
+.settings.popup .list-block ul,
+.settings.popover .list-block ul {
border-radius: 0 !important;
background: #fff;
}
-.container-edit.popup .list-block:first-child,
-.container-add.popup .list-block:first-child,
-.container-settings.popup .list-block:first-child,
-.container-edit.popover .list-block:first-child,
-.container-add.popover .list-block:first-child,
-.container-settings.popover .list-block:first-child {
+.settings.popup .list-block ul:last-child:after,
+.settings.popover .list-block ul:last-child:after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ right: auto;
+ top: auto;
+ height: 1px;
+ width: 100%;
+ background-color: #c8c7cc;
+ display: block;
+ z-index: 15;
+ -webkit-transform-origin: 50% 100%;
+ transform-origin: 50% 100%;
+}
+html.pixel-ratio-2 .settings.popup .list-block ul:last-child:after,
+html.pixel-ratio-2 .settings.popover .list-block ul:last-child:after {
+ -webkit-transform: scaleY(0.5);
+ transform: scaleY(0.5);
+}
+html.pixel-ratio-3 .settings.popup .list-block ul:last-child:after,
+html.pixel-ratio-3 .settings.popover .list-block ul:last-child:after {
+ -webkit-transform: scaleY(0.33);
+ transform: scaleY(0.33);
+}
+.settings.popup .list-block:first-child,
+.settings.popover .list-block:first-child {
margin-top: 0;
}
-.container-edit.popup .list-block li:first-child a,
-.container-add.popup .list-block li:first-child a,
-.container-settings.popup .list-block li:first-child a,
-.container-edit.popover .list-block li:first-child a,
-.container-add.popover .list-block li:first-child a,
-.container-settings.popover .list-block li:first-child a,
-.container-edit.popup .list-block li:last-child a,
-.container-add.popup .list-block li:last-child a,
-.container-settings.popup .list-block li:last-child a,
-.container-edit.popover .list-block li:last-child a,
-.container-add.popover .list-block li:last-child a,
-.container-settings.popover .list-block li:last-child a {
+.settings.popup .list-block li:first-child a,
+.settings.popover .list-block li:first-child a,
+.settings.popup .list-block li:last-child a,
+.settings.popover .list-block li:last-child a {
border-radius: 0 !important;
}
-.container-edit.popup > .content-block,
-.container-add.popup > .content-block,
-.container-settings.popup > .content-block,
-.container-edit.popover > .content-block,
-.container-add.popover > .content-block,
-.container-settings.popover > .content-block,
-.container-edit.popup .popover-inner > .content-block,
-.container-add.popup .popover-inner > .content-block,
-.container-settings.popup .popover-inner > .content-block,
-.container-edit.popover .popover-inner > .content-block,
-.container-add.popover .popover-inner > .content-block,
-.container-settings.popover .popover-inner > .content-block {
+.settings.popup > .content-block,
+.settings.popover > .content-block,
+.settings.popup .popover-inner > .content-block,
+.settings.popover .popover-inner > .content-block {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #000;
}
-.container-edit.popup .popover-view,
-.container-add.popup .popover-view,
-.container-settings.popup .popover-view,
-.container-edit.popover .popover-view,
-.container-add.popover .popover-view,
-.container-settings.popover .popover-view {
+.settings.popup .popover-view,
+.settings.popover .popover-view {
border-radius: 13px;
}
-.container-edit.popup .popover-view > .pages,
-.container-add.popup .popover-view > .pages,
-.container-settings.popup .popover-view > .pages,
-.container-edit.popover .popover-view > .pages,
-.container-add.popover .popover-view > .pages,
-.container-settings.popover .popover-view > .pages {
+.settings.popup .popover-view > .pages,
+.settings.popover .popover-view > .pages {
border-radius: 13px;
}
-.container-edit .categories,
-.container-add .categories,
-.container-settings .categories {
+.settings .categories {
width: 100%;
}
-.container-edit .categories > .buttons-row,
-.container-add .categories > .buttons-row,
-.container-settings .categories > .buttons-row {
+.settings .categories > .buttons-row {
width: 100%;
}
-.container-edit .categories > .buttons-row .button,
-.container-add .categories > .buttons-row .button,
-.container-settings .categories > .buttons-row .button {
+.settings .categories > .buttons-row .button {
padding: 0 1px;
}
-.container-edit .popover-inner,
-.container-add .popover-inner,
-.container-settings .popover-inner {
+.settings .popover-inner {
height: 400px;
}
.dataview.page-content {
@@ -6499,6 +6485,16 @@ 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%238ca946%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");
}
+#editor_sdk {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 44px;
+ bottom: 0;
+ height: auto;
+ -webkit-transition-duration: 300ms;
+ transition-duration: 300ms;
+}
#add-table .page,
#add-shape .page {
background-color: #fff;
diff --git a/apps/spreadsheeteditor/mobile/resources/css/app-material.css b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
index dad5c542e..6d43de0ec 100644
--- a/apps/spreadsheeteditor/mobile/resources/css/app-material.css
+++ b/apps/spreadsheeteditor/mobile/resources/css/app-material.css
@@ -5636,81 +5636,51 @@ a.item-link,
.container-settings.popover {
width: 360px;
}
-.container-edit.popup .list-block ul,
-.container-add.popup .list-block ul,
-.container-settings.popup .list-block ul,
-.container-edit.popover .list-block ul,
-.container-add.popover .list-block ul,
-.container-settings.popover .list-block ul {
+.settings.popup .list-block,
+.settings.popover .list-block {
+ margin: 32px 0;
+}
+.settings.popup .list-block ul,
+.settings.popover .list-block ul {
border-radius: 0;
background: #fff;
}
-.container-edit.popup .list-block:first-child,
-.container-add.popup .list-block:first-child,
-.container-settings.popup .list-block:first-child,
-.container-edit.popover .list-block:first-child,
-.container-add.popover .list-block:first-child,
-.container-settings.popover .list-block:first-child {
+.settings.popup .list-block:first-child,
+.settings.popover .list-block:first-child {
margin-top: 0;
}
-.container-edit.popup .list-block:first-child li:first-child a,
-.container-add.popup .list-block:first-child li:first-child a,
-.container-settings.popup .list-block:first-child li:first-child a,
-.container-edit.popover .list-block:first-child li:first-child a,
-.container-add.popover .list-block:first-child li:first-child a,
-.container-settings.popover .list-block:first-child li:first-child a {
+.settings.popup .list-block:first-child li:first-child a,
+.settings.popover .list-block:first-child li:first-child a {
border-radius: 0;
}
-.container-edit.popup > .content-block,
-.container-add.popup > .content-block,
-.container-settings.popup > .content-block,
-.container-edit.popover > .content-block,
-.container-add.popover > .content-block,
-.container-settings.popover > .content-block,
-.container-edit.popup .popover-inner > .content-block,
-.container-add.popup .popover-inner > .content-block,
-.container-settings.popup .popover-inner > .content-block,
-.container-edit.popover .popover-inner > .content-block,
-.container-add.popover .popover-inner > .content-block,
-.container-settings.popover .popover-inner > .content-block {
+.settings.popup > .content-block,
+.settings.popover > .content-block,
+.settings.popup .popover-inner > .content-block,
+.settings.popover .popover-inner > .content-block {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
-.container-edit.popup .popover-view,
-.container-add.popup .popover-view,
-.container-settings.popup .popover-view,
-.container-edit.popover .popover-view,
-.container-add.popover .popover-view,
-.container-settings.popover .popover-view {
+.settings.popup .popover-view,
+.settings.popover .popover-view {
border-radius: 3px;
}
-.container-edit.popup .popover-view > .pages,
-.container-add.popup .popover-view > .pages,
-.container-settings.popup .popover-view > .pages,
-.container-edit.popover .popover-view > .pages,
-.container-add.popover .popover-view > .pages,
-.container-settings.popover .popover-view > .pages {
+.settings.popup .popover-view > .pages,
+.settings.popover .popover-view > .pages {
border-radius: 3px;
}
-.container-edit .categories,
-.container-add .categories,
-.container-settings .categories {
+.settings .categories {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
-.container-edit .categories > .toolbar,
-.container-add .categories > .toolbar,
-.container-settings .categories > .toolbar {
+.settings .categories > .toolbar {
top: 0;
height: 100%;
}
-.container-edit .popover-inner,
-.container-add .popover-inner,
-.container-settings .popover-inner {
+.settings .popover-inner {
height: 400px;
}
.dataview .row {
@@ -6057,6 +6027,16 @@ 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%23fff%22%3E%3Cg%3E%3Cpolygon%20points%3D%2210.9%2C16.9%202%2C8.1%204.1%2C6%2011.1%2C12.8%2017.9%2C6%2020%2C8.1%2011.2%2C16.9%2011.1%2C17%20%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
+#editor_sdk {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 48px;
+ bottom: 0;
+ height: auto;
+ -webkit-transition-duration: 300ms;
+ transition-duration: 300ms;
+}
#add-table .page,
#add-shape .page {
background-color: #fff;
diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less
index 7e58f4001..a1aa187ae 100644
--- a/apps/spreadsheeteditor/mobile/resources/less/app-ios.less
+++ b/apps/spreadsheeteditor/mobile/resources/less/app-ios.less
@@ -63,6 +63,18 @@
@import url('ios/_search.less');
@import url('ios/_icons.less');
+// Top offset
+
+#editor_sdk {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: @toolbarSize;
+ bottom: 0;
+ height: auto;
+ .transition(300ms);
+}
+
// Add Container
#add-table,
diff --git a/apps/spreadsheeteditor/mobile/resources/less/app-material.less b/apps/spreadsheeteditor/mobile/resources/less/app-material.less
index 595267ff8..3db17205e 100644
--- a/apps/spreadsheeteditor/mobile/resources/less/app-material.less
+++ b/apps/spreadsheeteditor/mobile/resources/less/app-material.less
@@ -56,6 +56,19 @@
@import url('material/_search.less');
@import url('material/_icons.less');
+// Top offset
+
+#editor_sdk {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: @toolbarSize;
+ bottom: 0;
+ height: auto;
+ .transition(300ms);
+}
+
+
// Add Container
#add-table,