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

[DE] New search: add settings into search panel

Browse source
This commit is contained in:
JuliaSvinareva 2022-02-16 21:48:45 +03:00
parent e7b1f74f57
commit ab5241d11a
3 changed files with 127 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
apps/common/main/lib/template/SearchPanel.template
View file

@ -1,8 +1,43 @@
<div id="search-box" class="layout-ct vbox">
<div id="search-box" class="layout-ct vbox search-panel">
<div id="search-header">
<label><%= headerText %></label>
<div id="search-btn-close"></div>
</div>
<div id="search-adv-settings">
<table cols="1">
<tbody>
<tr>
<td class="padding-small"><div id="search-adv-text"></div></td>
</tr>
<tr>
<td class="padding-large"><div id="search-adv-replace-text"></div></td>
</tr>
<tr>
<td class="padding-large">
<label id="search-adv-results-number" style="display: inline-block;">
<%= scope.textSearchResults %>
</label>
<div class="search-nav-btns" style="display: inline-block; float: right;">
<div id="search-adv-back" style="display: inline-block; margin-right: 4px;"></div>
<div id="search-adv-next" style="display: inline-block;"></div>
</div>
</td>
</tr>
<tr>
<td class="padding-large">
<button type="button" class="btn btn-text-default" id="search-adv-replace" style="display: inline-block; min-width: 62px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplace %></button>
<button type="button" class="btn btn-text-default" id="search-adv-replace-all" style="display: inline-block; min-width: 78px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textReplaceAll %></button>
</td>
</tr>
<tr>
<td class="padding-small"><div id="search-adv-case-sensitive"></div></td>
</tr>
<tr>
<td class="padding-small"><div id="search-adv-use-regexp"></div></td>
</tr>
</tbody>
</table>
</div>
<div id="search-results">
</div>
</div>

70
apps/common/main/lib/view/SearchPanel.js
View file

@ -63,6 +63,64 @@ define([
}));
this.$el = $(el);
this.inputText = new Common.UI.InputField({
el: $('#search-adv-text'),
placeHolder: this.textFind,
allowBlank: true,
validateOnBlur: false,
style: 'width: 100%;'
});
this.inputReplace = new Common.UI.InputField({
el: $('#search-adv-replace-text'),
placeHolder: this.textReplaceWith,
allowBlank: true,
validateOnBlur: false,
style: 'width: 100%;'
});
this.$reaultsNumber = $('#search-adv-results-number');
this.btnBack = new Common.UI.Button({
parentEl: $('#search-adv-back'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-arrow-up',
dataHint: '1',
dataHintDirection: 'bottom'
});
this.btnNext = new Common.UI.Button({
parentEl: $('#search-adv-next'),
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-arrow-down',
dataHint: '1',
dataHintDirection: 'bottom'
});
this.btnReplace = new Common.UI.Button({
el: $('#search-adv-replace')
});
this.btnReplaceAll = new Common.UI.Button({
el: $('#search-adv-replace-all')
});
this.chCaseSensitive = new Common.UI.CheckBox({
el: $('#search-adv-case-sensitive'),
labelText: this.textCaseSensitive,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chUseRegExp = new Common.UI.CheckBox({
el: $('#search-adv-use-regexp'),
labelText: this.textMatchUsingRegExp,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.buttonClose = new Common.UI.Button({
parentEl: $('#search-btn-close', this.$el),
cls: 'btn-toolbar',
@ -90,13 +148,23 @@ define([
ChangeSettings: function(props) {
},
updateResultsNumber: function (current, count) {
this.$reaultsNumber.text(Common.Utils.String.format(current, count));
},
onClickClosePanel: function() {
Common.NotificationCenter.trigger('leftmenu:change', 'hide');
},
textFind: 'Find',
textFindAndReplace: 'Find and replace',
textCloseSearch: 'Close search'
textCloseSearch: 'Close search',
textReplace: 'Replace',
textReplaceAll: 'Replace All',
textSearchResults: 'Search results: {0}/{1}',
textReplaceWith: 'Replace with',
textCaseSensitive: 'Case sensitive',
textMatchUsingRegExp: 'Match using regular expressions'
}, Common.Views.SearchPanel || {}));
});

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

@ -103,9 +103,10 @@
}
}
#search-box {
.search-panel {
position: relative;
border-collapse: collapse;
line-height: 15px;
#search-header {
position: relative;
@ -125,4 +126,24 @@
float: right;
}
}
#search-adv-settings {
padding: 10px 15px 0 15px;
table {
width: 100%;
}
.padding-small {
padding-bottom: 8px;
}
.padding-large {
padding-bottom: 14px;
}
#search-adv-results-number {
padding-top: 2px;
}
}
}