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

[DE] Make new search, add left panel

Browse source
This commit is contained in:
JuliaSvinareva 2022-02-12 15:35:16 +03:00
parent d00d8c428d
commit 9336d891d7
8 changed files with 190 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/common/main/lib/template/SearchPanel.template Normal file
View file

@ -0,0 +1,8 @@
<div id="search-box" class="layout-ct vbox">
<div id="search-header">
<label><%= scope.textFind %></label>
<div id="search-btn-close"></div>
</div>
<div id="search-results">
</div>
</div>

12
apps/common/main/lib/view/SearchBar.js
View file

@ -62,6 +62,7 @@ define([
'<div class="tools">',
'<div id="search-bar-back"></div>',
'<div id="search-bar-next"></div>',
'<div id="search-bar-open-panel"></div>',
'<div id="search-bar-close"></div>',
'</div>',
'</div>'
@ -93,6 +94,13 @@ define([
});
this.btnNext.on('click', _.bind(this.onBtnClick, this, 'next'));
this.btnOpenPanel = new Common.UI.Button({
parentEl: $('#search-bar-open-panel'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon more-vertical'
});
this.btnOpenPanel.on('click', _.bind(this.onOpenPanel, this));
this.btnClose = new Common.UI.Button({
parentEl: $('#search-bar-close'),
cls: 'btn-toolbar',
@ -143,6 +151,10 @@ define([
this.fireEvent('search:'+action, [this, opts]);
},
onOpenPanel: function () {
},
textFind: 'Find'
}, Common.UI.SearchBar || {}));

96
apps/common/main/lib/view/SearchPanel.js Normal file
View file

@ -0,0 +1,96 @@
/*
*
* (c) Copyright Ascensio System SIA 2010-2019
*
* 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 20A-12 Ernesta Birznieka-Upisha
* street, Riga, Latvia, EU, LV-1050.
*
* 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
*
*/
/**
* User: Julia.Svinareva
* Date: 11.02.2022
*/
define([
'text!common/main/lib/template/SearchPanel.template',
'common/main/lib/util/utils',
'common/main/lib/component/BaseView',
'common/main/lib/component/Layout'
], function (template) {
'use strict';
Common.Views.SearchPanel = Common.UI.BaseView.extend(_.extend({
el: '#left-panel-search',
template: _.template(template),
initialize: function(options) {
_.extend(this, options);
Common.UI.BaseView.prototype.initialize.call(this, arguments);
},
render: function(el) {
if (!this.rendered) {
el = el || this.el;
$(el).html(this.template({scope: this}));
this.$el = $(el);
this.buttonClose = new Common.UI.Button({
parentEl: $('#search-btn-close', this.$el),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-close',
hint: this.textCloseSearch
});
this.buttonClose.on('click', _.bind(this.onClickClosePanel, this));
}
this.rendered = true;
this.trigger('render:after', this);
return this;
},
show: function () {
Common.UI.BaseView.prototype.show.call(this,arguments);
this.fireEvent('show', this );
},
hide: function () {
Common.UI.BaseView.prototype.hide.call(this,arguments);
this.fireEvent('hide', this );
},
ChangeSettings: function(props) {
},
onClickClosePanel: function() {
Common.NotificationCenter.trigger('leftmenu:change', 'hide');
},
textFind: 'Find',
textCloseSearch: 'Close search'
}, Common.Views.SearchPanel || {}));
});

27
apps/common/main/resources/less/searchdialog.less
View file

@ -95,7 +95,34 @@
align-items: center;
div {
margin-left: 5px;
&:first-of-type {
margin-left: 7px;
}
}
}
}
}
#search-box {
position: relative;
border-collapse: collapse;
#search-header {
position: relative;
height: 45px;
padding: 12px;
overflow: hidden;
border-bottom: @scaled-one-px-value-ie solid @border-toolbar-ie;
border-bottom: @scaled-one-px-value solid @border-toolbar;
label {
font-size: 12px;
.font-weight-bold();
margin-top: 2px;
}
#search-btn-close {
float: right;
}
}
}

5
apps/documenteditor/main/app/controller/LeftMenu.js
View file

@ -192,6 +192,8 @@ define([
},
createDelayedElements: function() {
this.leftMenu.setOptionsPanel('searchbar', this.getApplication().getController('Search').getView('Common.Views.SearchPanel'));
/** coauthoring begin **/
if ( this.mode.canCoAuthoring ) {
this.leftMenu.btnComments[(this.mode.canViewComments && !this.mode.isLightVersion) ? 'show' : 'hide']();
@ -776,6 +778,9 @@ define([
} else if (this.leftMenu.btnThumbnails.isActive()) {
this.leftMenu.btnThumbnails.toggle(false);
this.leftMenu.onBtnMenuClick(this.leftMenu.btnThumbnails);
} else if (this.leftMenu.btnSearchBar.isActive()) {
this.leftMenu.btnSearchBar.toggle(false);
this.leftMenu.onBtnMenuClick(this.leftMenu.btnSearchBar);
}
}
}

14
apps/documenteditor/main/app/controller/Search.js
View file

@ -40,13 +40,18 @@
*/
define([
'core'
'core',
'common/main/lib/view/SearchPanel'
], function () {
'use strict';
DE.Controllers.Search = Backbone.Controller.extend(_.extend({
sdkViewName : '#id_main',
views: [
'Common.Views.SearchPanel'
],
initialize: function () {
console.log('init');
this.addListeners({
@ -58,6 +63,8 @@ define([
},
onLaunch: function () {
this._state = {};
this.view = this.createView('Common.Views.SearchPanel');
},
setApi: function (api) {
@ -67,6 +74,11 @@ define([
return this;
},
getView: function(name) {
return !name && this.view ?
this.view : Backbone.Controller.prototype.getView.call(this, name);
},
onQuerySearch: function (d, w, opts) {
if (opts.textsearch && opts.textsearch.length) {
if (!this.api.asc_findText(opts.textsearch, d != 'back')) {

2
apps/documenteditor/main/app/template/LeftMenu.template
View file

@ -1,6 +1,7 @@
<div id="view-left-menu" class="tool-menu left">
<div class="tool-menu-btns">
<button id="left-btn-search" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
<button id="left-btn-searchbar" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
<!-- /** coauthoring begin **/ -->
<button id="left-btn-comments" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target="left-panel-comments"><i class="icon toolbar__icon btn-menu-comments">&nbsp;</i></button>
<button id="left-btn-chat" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target="left-panel-chat"><i class="icon toolbar__icon btn-menu-chat">&nbsp;</i></button>
@ -12,6 +13,7 @@
<button id="left-btn-about" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
</div>
<div class="left-panel" style="">
<div id="left-panel-search" class="" style="display: none;"></div>
<!-- /** coauthoring begin **/ -->
<div id="left-panel-comments" class="" style="display: none;"></div>
<div id="left-panel-chat" class="" style="display: none;"></div>

28
apps/documenteditor/main/app/view/LeftMenu.js
View file

@ -76,6 +76,7 @@ define([
'click #left-btn-plugins': _.bind(this.onCoauthOptions, this),
'click #left-btn-navigation': _.bind(this.onCoauthOptions, this),
'click #left-btn-thumbnails': _.bind(this.onCoauthOptions, this),
'click #left-btn-searchbar': _.bind(this.onCoauthOptions, this),
'click #left-btn-support': function() {
var config = this.mode.customization;
config && !!config.feedback && !!config.feedback.url ?
@ -101,6 +102,15 @@ define([
enableToggle: true
});
this.btnSearchBar = new Common.UI.Button({
action: 'searchbar',
el: $markup.elementById('#left-btn-searchbar'),
hint: this.tipSearch + Common.Utils.String.platformKey('Ctrl+F'),
disabled: true,
enableToggle: true,
toggleGroup: 'leftMenuGroup'
});
this.btnAbout = new Common.UI.Button({
action: 'about',
el: $markup.elementById('#left-btn-about'),
@ -162,6 +172,7 @@ define([
this.btnNavigation.on('click', this.onBtnMenuClick.bind(this));
this.btnSearch.on('click', this.onBtnMenuClick.bind(this));
this.btnSearchBar.on('click', this.onBtnMenuClick.bind(this));
this.btnAbout.on('toggle', this.onBtnMenuToggle.bind(this));
this.menuFile = new DE.Views.FileMenu();
@ -257,6 +268,13 @@ define([
this.panelThumbnails.hide();
}
}
if (this.panelSearch) {
if (this.btnSearchBar.pressed) {
this.panelSearch.show();
} else {
this.panelSearch.hide();
}
}
/** coauthoring end **/
// if (this.mode.canPlugins && this.panelPlugins) {
// if (this.btnPlugins.pressed) {
@ -285,6 +303,9 @@ define([
if (name == 'thumbnails') {
this.panelThumbnails = panel.render('#left-panel-thumbnails');
}
if (name == 'searchbar') {
this.panelSearch = panel.render('#left-panel-search');
}
},
/** coauthoring begin **/
@ -329,11 +350,15 @@ define([
this.panelNavigation['hide']();
this.btnNavigation.toggle(false, true);
}
if (this.panelSearch) {
this.panelSearch['hide']();
this.btnSearchBar.toggle(false, true);
}
}
},
isOpened: function() {
var isopened = this.btnSearch.pressed;
var isopened = this.btnSearchBar.pressed;
/** coauthoring begin **/
!isopened && (isopened = this.btnComments.pressed || this.btnChat.pressed);
/** coauthoring end **/
@ -342,6 +367,7 @@ define([
disableMenu: function(menu, disable) {
this.btnSearch.setDisabled(false);
this.btnSearchBar.setDisabled(false);
this.btnAbout.setDisabled(false);
this.btnSupport.setDisabled(false);
/** coauthoring begin **/