Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Change css name of settings container.

Browse source
This commit is contained in:
Alexander Yuzhin 2016-11-16 11:01:10 +03:00
parent 45593c0e26
commit 0255f1b309
17 changed files with 796 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
apps/common/mobile/resources/less/ios/_container.less
View file

@ -19,7 +19,9 @@
&.popover {
width: 360px;
}
}
.settings {
&.popup,
&.popover {
.list-block {
@ -27,6 +29,10 @@
ul {
border-radius: 0 !important;
background: #fff;
&:last-child {
.hairline(bottom, @listBlockBorderColor);
}
}
&:first-child {
@ -70,6 +76,7 @@
}
}
}
.popover-inner {
height: 400px;
}

2
apps/documenteditor/mobile/app-dev.js
View file

@ -134,6 +134,7 @@ require([
controllers : [
'Editor',
'Toolbar',
'Search',
'Main',
'DocumentHolder',
'Settings',
@ -198,6 +199,7 @@ require([
'common/main/lib/util/utils',
'documenteditor/mobile/app/controller/Editor',
'documenteditor/mobile/app/controller/Toolbar',
'documenteditor/mobile/app/controller/Search',
'documenteditor/mobile/app/controller/Main',
'documenteditor/mobile/app/controller/DocumentHolder',
'documenteditor/mobile/app/controller/Settings',

2
apps/documenteditor/mobile/app.js
View file

@ -145,6 +145,7 @@ require([
controllers : [
'Editor',
'Toolbar',
'Search',
'Main',
'DocumentHolder',
'Settings',
@ -209,6 +210,7 @@ require([
'common/main/lib/util/utils',
'documenteditor/mobile/app/controller/Editor',
'documenteditor/mobile/app/controller/Toolbar',
'documenteditor/mobile/app/controller/Search',
'documenteditor/mobile/app/controller/Main',
'documenteditor/mobile/app/controller/DocumentHolder',
'documenteditor/mobile/app/controller/Settings',

223
apps/documenteditor/mobile/app/controller/Search.js Normal file
View file

@ -0,0 +1,223 @@
/*
*
* (c) Copyright Ascensio System Limited 2010-2016
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
* EU, LV-1021.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* Search.js
* Document Editor
*
* Created by Alexander Yuzhin on 11/15/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'core',
'jquery',
'underscore',
'backbone',
'documenteditor/mobile/app/view/Search'
], function (core, $, _, Backbone) {
'use strict';
DE.Controllers.Search = Backbone.Controller.extend((function() {
// private
var _isShow = false,
_startPoint = {};
var pointerEventToXY = function(e){
var out = {x:0, y:0};
if(e.type == 'touchstart' || e.type == 'touchend'){
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
out.x = touch.pageX;
out.y = touch.pageY;
} else if (e.type == 'mousedown' || e.type == 'mouseup') {
out.x = e.pageX;
out.y = e.pageY;
}
return out;
};
return {
models: [],
collections: [],
views: [
'Search'
],
initialize: function() {
this.addListeners({
'Search': {
'searchbar:show' : this.onSearchbarShow,
'searchbar:hide' : this.onSearchbarHide,
'searchbar:render' : this.onSearchbarRender
}
});
},
setApi: function(api) {
this.api = api;
},
setMode: function (mode) {
this.getView('Search').setMode(mode);
},
onLaunch: function() {
var me = this;
me.createView('Search').render();
$('#editor_sdk').single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
$('#editor_sdk').single('mouseup touchend', _.bind(me.onEditorTouchEnd, me));
},
showSearch: function () {
this.getView('Search').showSearch();
},
hideSearch: function () {
this.getView('Search').hideSearch();
},
// Handlers
onEditorTouchStart: function (e) {
_startPoint = pointerEventToXY(e);
},
onEditorTouchEnd: function (e) {
var _endPoint = pointerEventToXY(e);
if (_isShow) {
var distance = Math.sqrt((_endPoint.x -= _startPoint.x) * _endPoint.x + (_endPoint.y -= _startPoint.y) * _endPoint.y);
if (distance < 1) {
this.hideSearch();
}
}
},
onSearchbarRender: function(bar) {
var me = this;
me.searchBar = uiApp.searchbar('.searchbar.document .searchbar.search', {
customSearch: true,
onSearch : _.bind(me.onSearchChange, me),
onEnable : _.bind(me.onSearchEnable, me),
onClear : _.bind(me.onSearchClear, me)
});
me.replaceBar = uiApp.searchbar('.searchbar.document .searchbar.replace', {
customSearch: true,
onSearch : _.bind(me.onReplaceChange, me),
onEnable : _.bind(me.onReplaceEnable, me),
onClear : _.bind(me.onReplaceClear, me)
});
me.searchPrev = $('.searchbar.document .prev');
me.searchNext = $('.searchbar.document .next');
me.searchPrev.single('click', _.bind(me.onSearchPrev, me));
me.searchNext.single('click', _.bind(me.onSearchNext, me));
},
onSearchbarShow: function(bar) {
_isShow = true;
},
onSearchEnable: function (bar) {
this.replaceBar.container.removeClass('searchbar-active');
},
onSearchbarHide: function(bar) {
_isShow = false;
},
onSearchChange: function(search) {
var me = this,
isEmpty = (search.query.trim().length < 1);
_.each([me.searchPrev, me.searchNext], function(btn) {
btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
});
},
onSearchClear: function(search) {
// window.focus();
// document.activeElement.blur();
},
onReplaceChange: function(replace) {
var me = this,
isEmpty = (replace.query.trim().length < 1);
},
onReplaceEnable: function (bar) {
this.searchBar.container.removeClass('searchbar-active');
},
onReplaceClear: function(replace) {
//
},
onSearchPrev: function(btn) {
this.onQuerySearch(this.searchBar.query, 'back');
},
onSearchNext: function(btn) {
this.onQuerySearch(this.searchBar.query, 'next');
},
onQuerySearch: function(query, direction, opts) {
if (query && query.length) {
if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
var me = this;
uiApp.alert(
'',
me.textNoTextFound,
function () {
me.searchBar.input.focus();
}
);
}
}
},
// API handlers
textNoTextFound : 'Text not found',
}
})());
});

4
apps/documenteditor/mobile/app/controller/Settings.js
View file

@ -107,7 +107,7 @@ define([
showModal: function() {
if (Common.SharedSettings.get('phone')) {
modalView = uiApp.popup(
'<div class="popup container-settings">' +
'<div class="popup settings container-settings">' +
'<div class="content-block">' +
'<div class="view settings-root-view navbar-through">' +
this.getView('Settings').rootLayout() +
@ -117,7 +117,7 @@ define([
);
} else {
modalView = uiApp.popover(
'<div class="popover container-settings">' +
'<div class="popover settings container-settings">' +
'<div class="popover-angle"></div>' +
'<div class="popover-inner">' +
'<div class="content-block">' +

83
apps/documenteditor/mobile/app/controller/Toolbar.js
View file

@ -42,8 +42,11 @@
define([
'core',
'jquery',
'underscore',
'backbone',
'documenteditor/mobile/app/view/Toolbar'
], function (core) {
], function (core, $, _, Backbone) {
'use strict';
DE.Controllers.Toolbar = Backbone.Controller.extend((function() {
@ -58,13 +61,6 @@ define([
],
initialize: function() {
this.addListeners({
'Toolbar': {
'searchbar:show' : this.onSearchbarShow,
'searchbar:render' : this.onSearchbarRender
}
});
Common.Gateway.on('init', _.bind(this.loadConfig, this));
},
@ -100,74 +96,6 @@ define([
$('#toolbar-title').html(title);
},
// Search
onSearchbarRender: function(bar) {
var me = this;
me.searchBar = uiApp.searchbar('.searchbar.document', {
customSearch: true,
onSearch : _.bind(me.onSearchChange, me),
onEnable : _.bind(me.onSearchEnable, me),
onDisable : _.bind(me.onSearchDisable, me),
onClear : _.bind(me.onSearchClear, me)
});
me.searchPrev = $('.searchbar.document .prev');
me.searchNext = $('.searchbar.document .next');
me.searchPrev.on('click', _.bind(me.onSearchPrev, me));
me.searchNext.on('click', _.bind(me.onSearchNext, me));
},
onSearchbarShow: function(bar) {
//
},
onSearchChange: function(search) {
var me = this,
isEmpty = (search.query.trim().length < 1);
_.each([me.searchPrev, me.searchNext], function(btn) {
btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
});
},
onSearchEnable: function(search) {
//
},
onSearchDisable: function(search) {
//
},
onSearchClear: function(search) {
// window.focus();
// document.activeElement.blur();
},
onSearchPrev: function(btn) {
this.onQuerySearch(this.searchBar.query, 'back');
},
onSearchNext: function(btn) {
this.onQuerySearch(this.searchBar.query, 'next');
},
onQuerySearch: function(query, direction, opts) {
if (query && query.length) {
if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
var me = this;
uiApp.alert(
'',
me.textNoTextFound,
function () {
me.searchBar.input.focus();
}
);
}
}
},
// Handlers
onBack: function (e) {
@ -219,8 +147,7 @@ define([
dlgLeaveTitleText : 'You leave the application',
dlgLeaveMsgText : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
leaveButtonText : 'Leave this Page',
stayButtonText : 'Stay on this Page',
textNoTextFound : 'Text not found',
stayButtonText : 'Stay on this Page'
}
})());
});

4
apps/documenteditor/mobile/app/controller/add/AddContainer.js
View file

@ -220,7 +220,7 @@ define([
if (isPhone) {
me.picker = $$(uiApp.popup(
'<div class="popup container-add">' +
'<div class="popup settings container-add">' +
'<div class="view add-root-view navbar-through">' +
$layoutNavbar.prop('outerHTML') +
$layoutPages.prop('outerHTML') +
@ -229,7 +229,7 @@ define([
))
} else {
me.picker = uiApp.popover(
'<div class="popover container-add">' +
'<div class="popover settings container-add">' +
'<div class="popover-angle"></div>' +
'<div class="popover-inner">' +
'<div class="content-block">' +

4
apps/documenteditor/mobile/app/controller/edit/EditContainer.js
View file

@ -265,7 +265,7 @@ define([
if (isPhone) {
me.picker = $$(uiApp.pickerModal(
'<div class="picker-modal container-edit">' +
'<div class="picker-modal settings container-edit">' +
'<div class="view edit-root-view navbar-through">' +
$layoutNavbar.prop('outerHTML') +
$layoutPages.prop('outerHTML') +
@ -277,7 +277,7 @@ define([
mainView.hideNavbar();
} else {
me.picker = uiApp.popover(
'<div class="popover container-edit">' +
'<div class="popover settings container-edit">' +
'<div class="popover-angle"></div>' +
'<div class="popover-inner">' +
'<div class="content-block">' +

105
apps/documenteditor/mobile/app/template/Search.template Normal file
View file

@ -0,0 +1,105 @@
<!--Toolbar panel-->
<div id="search-panel-view">
<div class="searchbar document navbar navbar-hidden replace">
<div class="navbar-inner">
<div class="left">
<a id="search-settings" href="#" class="link icon-only"><i class="icon icon-settings"></i></a>
</div>
<div class="center">
<form class="searchbar search">
<div class="searchbar-input search">
<input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>
</div>
</form>
<form class="searchbar replace">
<div class="searchbar-input replace">
<input type="search" placeholder="Replace"><a href="#" class="searchbar-clear"></a>
</div>
</form>
</div>
<div class="right">
<% if (phone) { %>
<p class="buttons-row">
<a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
<a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
</p>
<p class="buttons-row replace">
<a href="#" class="link disabled">Replace</a>
</p>
<% } else { %>
<p class="buttons-row">
<a href="#" class="link replace disabled">Replace</a>
<a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
<a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
</p>
<% } %>
</div>
</div>
</div>
</div>
<!--Settings-->
<div id="search-settings-view">
<div class="navbar">
<div class="navbar-inner">
<div class="center sliding">Find and Replace</div>
<div class="right"><% if (phone) { %><a href="#" class="link close-popup"><b>Done</b></a><% } %></div>
</div>
</div>
<div class="page">
<div class="page-content">
<div class="list-block">
<ul>
<li>
<label class="label-radio item-content">
<input type="radio" name="search-type" value="search">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">Find</div>
</div>
</label>
</li>
<li>
<label class="label-radio item-content">
<input type="radio" name="search-type" value="replace">
<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
<div class="item-inner">
<div class="item-title">Find and Replace</div>
</div>
</label>
</li>
</ul>
</div>
<div class="list-block">
<ul>
<li>
<div id="search-case-sensitive" class="item-content">
<div class="item-inner">
<div class="item-title">Case sensitive</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
<li>
<div id="search-highlight-results" class="item-content">
<div class="item-inner">
<div class="item-title">Highlight results</div>
<div class="item-after">
<label class="label-switch">
<input type="checkbox">
<div class="checkbox"></div>
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>

24
apps/documenteditor/mobile/app/template/Settings.template
View file

@ -11,18 +11,18 @@
<div class="page-content">
<div class="list-block">
<ul>
<!--<li>-->
<!--<a id="settings-search" class="item-link no-indicator">-->
<!--<div class="item-content">-->
<!--<div class="item-media">-->
<!--<i class="icon icon-search"></i>-->
<!--</div>-->
<!--<div class="item-inner">-->
<!--<div class="item-title">Search</div>-->
<!--</div>-->
<!--</div>-->
<!--</a>-->
<!--</li>-->
<li>
<a id="settings-search" class="item-link no-indicator">
<div class="item-content">
<div class="item-media">
<i class="icon icon-search"></i>
</div>
<div class="item-inner">
<div class="item-title">Search</div>
</div>
</div>
</a>
</li>
<li>
<a id="settings-edit-document" class="item-link no-indicator">
<div class="item-content">

2
apps/documenteditor/mobile/app/template/Toolbar.template
View file

@ -1,7 +1,7 @@
<div class="navbar" id="editor-navbar">
<div class="navbar-inner">
<div class="left">
<a id="document-back" href="#" class="link" style="display: none;">
<a id="document-back" href="#" class="link" style="min-width: 22px; display: none;">
<i class="icon icon-back"></i>
<% if (backTitle && !phone) { %>
<span class="subtitle"><%= backTitle %></span>

183
apps/documenteditor/mobile/app/view/Search.js Normal file
View file

@ -0,0 +1,183 @@
/*
*
* (c) Copyright Ascensio System Limited 2010-2016
*
* This program is a free software product. You can redistribute it and/or
* modify it under the terms of the GNU Affero General Public License (AGPL)
* version 3 as published by the Free Software Foundation. In accordance with
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
* that Ascensio System SIA expressly excludes the warranty of non-infringement
* of any third-party rights.
*
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
*
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
* EU, LV-1021.
*
* The interactive user interfaces in modified source and object code versions
* of the Program must display Appropriate Legal Notices, as required under
* Section 5 of the GNU AGPL version 3.
*
* Pursuant to Section 7(b) of the License you must retain the original Product
* logo when distributing the program. Pursuant to Section 7(e) we decline to
* grant you any rights under trademark law for use of our trademarks.
*
* All the Product's GUI elements, including illustrations and icon sets, as
* well as technical writing content are licensed under the terms of the
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
*
*/
/**
* Search.js
* Document Editor
*
* Created by Alexander Yuzhin on 11/15/16
* Copyright (c) 2016 Ascensio System SIA. All rights reserved.
*
*/
define([
'text!documenteditor/mobile/app/template/Search.template',
'jquery',
'underscore',
'backbone'
], function (searchTemplate, $, _, Backbone) {
'use strict';
DE.Views.Search = Backbone.View.extend((function() {
// private
var _isEdit = false,
_layout;
return {
el: '.view-main',
// Compile our stats template
template: _.template(searchTemplate),
// Delegated events for creating new items, and clearing completed ones.
events: {},
// Set innerHTML and get the references to the DOM elements
initialize: function () {
this.on('searchbar:show', _.bind(this.initEvents, this));
},
initEvents: function() {
$('#search-settings').single('click', _.bind(this.showSettings, this));
},
// Render layout
render: function () {
_layout = $('<div/>').append(this.template({
android : Common.SharedSettings.get('android'),
phone : Common.SharedSettings.get('phone'),
isEdit : _isEdit
}));
return this;
},
setMode: function (mode) {
_isEdit = (mode === 'edit');
this.render();
},
showSettings: function (e) {
var me = this;
if (Common.SharedSettings.get('phone')) {
me.picker = $$(uiApp.popup([
'<div class="popup">',
'<div class="view search-settings-view navbar-through">',
_layout.find('#search-settings-view').html(),
'</div>',
'</div>'].join('')
))
} else {
me.picker = uiApp.popover([
'<div class="popover settings" style="width: 280px; height: 300px;">',
'<div class="popover-angle"></div>',
'<div class="popover-inner">',
'<div class="content-block">',
'<div class="view popover-view search-settings-view navbar-through" style="height: 300px;">',
_layout.find('#search-settings-view').html(),
'</div>',
'</div>',
'</div>',
'</div>'].join(''),
$$('#search-settings')
);
// Prevent hide overlay. Conflict popover and modals.
var $overlay = $('.modal-overlay');
$$(me.picker).on('opened', function () {
$overlay.on('removeClass', function () {
if (!$overlay.hasClass('modal-overlay-visible')) {
$overlay.addClass('modal-overlay-visible')
}
});
}).on('close', function () {
$overlay.off('removeClass');
$overlay.removeClass('modal-overlay-visible')
});
}
if (Common.SharedSettings.get('android')) {
$$('.view.search-settings-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
$$('.view.search-settings-view .navbar').prependTo('.view.search-settings-view > .pages > .page');
}
},
showSearch: function () {
var me = this,
searchBar = $$('.searchbar.document');
if (searchBar.length < 1) {
$(me.el).find('.pages .page').first().prepend(_layout.find('#search-panel-view').html());
me.fireEvent('searchbar:render', me);
me.fireEvent('searchbar:show', me);
searchBar = $$('.searchbar.document');
_.defer(function() {
uiApp.showNavbar(searchBar);
searchBar.transitionEnd(function () {
if (!searchBar.hasClass('navbar-hidden')) {
$('.searchbar.search input').focus();
}
});
}, 10);
}
},
hideSearch: function () {
var me = this,
searchBar = $$('.searchbar.document');
if (searchBar.length > 0) {
// Animating
if (searchBar.hasClass('.navbar-hidding')) {
return;
}
_.defer(function() {
searchBar.transitionEnd(function () {
me.fireEvent('searchbar:hide', me);
searchBar.remove();
});
uiApp.hideNavbar(searchBar);
}, 10);
}
}
}
})());
});

57
apps/documenteditor/mobile/app/view/Toolbar.js
View file

@ -110,64 +110,11 @@ define([
},
showSearch: function () {
var me = this,
searchBar = $$('.searchbar.document');
if (searchBar.length < 1) {
$(me.el).find('.pages .page').first().prepend(_.template(
'<form class="searchbar document navbar navbar-hidden">' +
'<div class="searchbar-input">' +
'<input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>' +
'</div>' +
'<p class="buttons-row">' +
'<a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>' +
'<a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>' +
'</p>' +
'</form>', {}
));
me.fireEvent('searchbar:render', me);
searchBar = $$('.searchbar.document');
if (Common.SharedSettings.get('android')) {
searchBar.find('.buttons-row').css('margin-left', '10px');
searchBar.find('.buttons-row a').css('min-width', '0px');
} else {
searchBar.find('.buttons-row .next').css('margin-left', '10px');
}
_.defer(function() {
uiApp.showNavbar(searchBar);
searchBar.transitionEnd(function () {
if (!searchBar.hasClass('navbar-hidden')) {
me.fireEvent('searchbar:show', me);
$('.searchbar input').focus();
}
});
}, 10);
}
DE.getController('Search').showSearch();
},
hideSearch: function () {
var me = this,
searchBar = $$('.searchbar.document');
if (searchBar.length > 0) {
// Animating
if (searchBar.hasClass('.navbar-hidding')) {
return;
}
_.defer(function() {
searchBar.transitionEnd(function () {
me.fireEvent('searchbar:hide', me);
searchBar.remove();
});
uiApp.hideNavbar(searchBar);
}, 10);
}
DE.getController('Search').hideSearch();
},
// Editor

121
apps/documenteditor/mobile/resources/css/app-ios.css
View file

@ -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 {
@ -6237,11 +6223,11 @@ html.pixel-ratio-3 .color-palette a {
background-size: auto;
}
}
.tablet .searchbar.document.replace .center .searchbar-input:first-child {
.tablet .searchbar.document.replace .center .searchbar:first-child {
margin-right: 10px;
}
.tablet .searchbar.document.replace .center .replace {
display: block;
display: flex;
}
.tablet .searchbar.document.replace .right .replace {
display: flex;
@ -6250,6 +6236,10 @@ html.pixel-ratio-3 .color-palette a {
.tablet .searchbar.document .center {
width: 100%;
}
.tablet .searchbar.document .center .searchbar {
background: inherit;
padding: 0;
}
.tablet .searchbar.document .center .replace {
display: none;
}
@ -6286,6 +6276,13 @@ html.pixel-ratio-3 .color-palette a {
.phone .searchbar.document .center {
width: 100%;
}
.phone .searchbar.document .center .searchbar {
background: inherit;
padding: 0;
}
.phone .searchbar.document .center .searchbar:after {
content: none;
}
.phone .searchbar.document .center .replace {
display: none;
}

61
apps/documenteditor/mobile/resources/css/app-material.css
View file

@ -5866,6 +5866,67 @@ html.pixel-ratio-3 .color-palette a {
background-image: url('../../../../common/mobile/resources/img/about/onlyoffice@2x.png');
}
}
.tablet .searchbar.document.replace .center > .replace {
display: flex;
}
.tablet .searchbar.document.replace .right .replace {
display: flex;
}
.tablet .searchbar.document .center {
width: 100%;
display: flex;
margin: 0;
overflow: visible;
}
.tablet .searchbar.document .center .searchbar {
overflow: visible;
}
.tablet .searchbar.document .center .searchbar.search {
padding: 0;
}
.tablet .searchbar.document .center > .replace {
display: none;
}
.tablet .searchbar.document .right .replace {
display: none;
}
.phone .searchbar.document.replace {
height: 96px;
}
.phone .searchbar.document.replace .left {
margin-top: -48px;
}
.phone .searchbar.document.replace .center .replace {
display: block;
}
.phone .searchbar.document.replace .right .replace {
display: flex;
}
.phone .searchbar.document .left,
.phone .searchbar.document .center,
.phone .searchbar.document .right {
flex-direction: column;
}
.phone .searchbar.document .center {
width: 100%;
margin: 0;
overflow: visible;
}
.phone .searchbar.document .center .searchbar {
padding: 0;
}
.phone .searchbar.document .center .replace {
display: none;
}
.phone .searchbar.document .right > p {
margin: 0;
}
.phone .searchbar.document .right > p a.link {
height: 48px;
}
.phone .searchbar.document .right .replace {
display: none;
}
i.icon.icon-expand-up {
width: 17px;
height: 17px;

18
apps/documenteditor/mobile/resources/less/ios/_search.less
View file

@ -4,12 +4,12 @@
// Replace mode
.searchbar.document.replace {
.center {
.searchbar-input:first-child {
.searchbar:first-child {
margin-right: 10px;
}
.replace {
display: block;
display: flex;
}
}
@ -26,6 +26,11 @@
.center {
width: 100%;
.searchbar {
background: inherit;
padding: 0;
}
.replace {
display: none;
}
@ -85,6 +90,15 @@
.center {
width: 100%;
.searchbar {
background: inherit;
padding: 0;
&:after {
content: none;
}
}
.replace {
display: none;
}

112
apps/documenteditor/mobile/resources/less/material/_search.less
View file

@ -0,0 +1,112 @@
// Search
.tablet {
// Replace mode
.searchbar.document.replace {
.center {
> .replace {
display: flex;
}
}
.right {
.replace {
display: flex;
}
}
}
// Search mode
.searchbar.document {
.center {
width: 100%;
display: flex;
margin: 0;
overflow: visible;
.searchbar {
overflow: visible;
&.search {
padding: 0;
}
}
> .replace {
display: none;
}
}
.right {
.replace {
display: none;
}
}
}
}
@phoneSearchHeight: 48px;
.phone {
// Replace mode
.searchbar.document.replace {
height: @phoneSearchHeight * 2;
.left {
margin-top: -@phoneSearchHeight;
}
.center {
.replace {
display: block;
}
}
.right {
.replace {
display: flex;
}
}
}
// Search mode
.searchbar.document {
.left,
.center,
.right {
flex-direction: column;
}
.left {
//
}
.center {
width: 100%;
margin: 0;
overflow: visible;
.searchbar {
padding: 0;
}
.replace {
display: none;
}
}
.right {
> p {
margin: 0;
a.link {
height: @phoneSearchHeight;
}
}
.replace {
display: none;
}
}
}
}