[DE mobile] Make Find and Replace for ios and android
This commit is contained in:
SergeyEzhin
parent
d3dfbb3771
commit
f067ea4622
|
|
@ -147,7 +147,7 @@ class SearchView extends Component {
|
||||||
|
|
||||||
if (searchOptions.usereplace) {
|
if (searchOptions.usereplace) {
|
||||||
params.replace = this.$replace.val();
|
params.replace = this.$replace.val();
|
||||||
}
|
}
|
||||||
|
|
||||||
return params;
|
return params;
|
||||||
}
|
}
|
||||||
|
|
@ -240,14 +240,16 @@ class SearchView extends Component {
|
||||||
const hidden = {display: "none"};
|
const hidden = {display: "none"};
|
||||||
const searchQuery = this.state.searchQuery;
|
const searchQuery = this.state.searchQuery;
|
||||||
const replaceQuery = this.state.replaceQuery;
|
const replaceQuery = this.state.replaceQuery;
|
||||||
|
const isIos = Device.ios;
|
||||||
// const _t = this.t('View.Settings', {returnObjects: true});
|
// const _t = this.t('View.Settings', {returnObjects: true});
|
||||||
|
|
||||||
// console.log(searchQuery);
|
if(this.searchbar && this.searchbar.enabled) {
|
||||||
// console.log(replaceQuery)
|
usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form className="searchbar">
|
<form className="searchbar">
|
||||||
<div className="searchbar-bg"></div>
|
{isIos ? <div className="searchbar-bg"></div> : null}
|
||||||
<div className="searchbar-inner">
|
<div className="searchbar-inner">
|
||||||
<div className="buttons-row searchbar-inner__left">
|
<div className="buttons-row searchbar-inner__left">
|
||||||
<a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
|
<a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
|
||||||
|
|
@ -258,13 +260,13 @@ class SearchView extends Component {
|
||||||
<div className="searchbar-input-wrap">
|
<div className="searchbar-input-wrap">
|
||||||
<input placeholder="Search" type="search" value={searchQuery}
|
<input placeholder="Search" type="search" value={searchQuery}
|
||||||
onChange={e => {this.changeSearchQuery(e.target.value)}} />
|
onChange={e => {this.changeSearchQuery(e.target.value)}} />
|
||||||
<i className="searchbar-icon" />
|
{isIos ? <i className="searchbar-icon" /> : null}
|
||||||
<span className="input-clear-button" />
|
<span className="input-clear-button" />
|
||||||
</div>
|
</div>
|
||||||
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
|
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
|
||||||
<input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery}
|
<input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery}
|
||||||
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
|
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
|
||||||
<i className="searchbar-icon" />
|
{isIos ? <i className="searchbar-icon" /> : null}
|
||||||
<span className="input-clear-button" />
|
<span className="input-clear-button" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -393,10 +393,17 @@
|
||||||
|
|
||||||
// Find and Replace
|
// Find and Replace
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
.searchbar-input-wrap {
|
||||||
|
margin-right: 10px;
|
||||||
|
height: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.searchbar input[type=search] {
|
.searchbar input[type=search] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 28px;
|
height: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
border: none;
|
border: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
@ -408,6 +415,39 @@
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
background-color: @white;
|
background-color: @white;
|
||||||
padding: 0 28px;
|
padding: 0 28px;
|
||||||
height: 100%;
|
}
|
||||||
|
|
||||||
|
@media(max-width: 550px)
|
||||||
|
{
|
||||||
|
.searchbar-expandable.searchbar-enabled {
|
||||||
|
top: auto;
|
||||||
|
.searchbar-inner {
|
||||||
|
&__left {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
&__center {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&__right {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.replace {
|
||||||
|
height: 88px;
|
||||||
|
top: 0;
|
||||||
|
.searchbar-inner {
|
||||||
|
height: 100%;
|
||||||
|
&__left {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
&__center {
|
||||||
|
.searchbar-input-wrap {
|
||||||
|
margin: 8px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -287,12 +287,45 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Search and Replace
|
// Find and Replace
|
||||||
|
|
||||||
|
.searchbar-inner {
|
||||||
|
&__center {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttons-row-replace a {
|
||||||
|
color: @white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
.searchbar-input-wrap {
|
||||||
|
height: 32px;
|
||||||
|
margin-right: 10px;
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar .input-clear-button {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
&:after {
|
||||||
|
color: @white;
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbar-icon {
|
||||||
|
&:after {
|
||||||
|
color: @white;
|
||||||
|
font-size: 19px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.searchbar input[type=search] {
|
.searchbar input[type=search] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 32px;
|
|
||||||
display: block;
|
display: block;
|
||||||
border: none;
|
border: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
@ -311,9 +344,46 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background-size: 24px 24px;
|
background-size: 24px 24px;
|
||||||
transition-duration: .3s;
|
transition-duration: .3s;
|
||||||
// .encoded-svg-uncolored-mask('<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbar input[type=search]::placeholder {
|
.searchbar input[type=search]::placeholder {
|
||||||
color: @white;
|
color: @white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.navbar.with-searchbar-expandable-enabled, .navbar.with-searchbar-expandable-enabled {
|
||||||
|
height: 96px;
|
||||||
|
.searchbar-expandable.searchbar-enabled {
|
||||||
|
top: auto;
|
||||||
|
height: 100%;
|
||||||
|
.searchbar-inner {
|
||||||
|
&__center {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
&__right {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.replace {
|
||||||
|
top: 0;
|
||||||
|
.searchbar-inner {
|
||||||
|
height: 100%;
|
||||||
|
&__left {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media(max-width: 550px) {
|
||||||
|
.searchbar-expandable.searchbar-enabled {
|
||||||
|
.searchbar-inner {
|
||||||
|
&__left {
|
||||||
|
margin-right: 33px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -14,16 +14,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.searchbar-input-wrap {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.searchbar-inner {
|
.searchbar-inner {
|
||||||
&__center {
|
&__center {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// flex-wrap: wrap;
|
|
||||||
}
|
}
|
||||||
&__right {
|
&__right {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -44,27 +39,33 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// .searchbar-expandable.replace {
|
@media(max-width: 550px)
|
||||||
// height: 88px;
|
{
|
||||||
// top: 0;
|
.searchbar-expandable.searchbar-enabled {
|
||||||
// }
|
top: auto;
|
||||||
|
.searchbar-inner {
|
||||||
// @media(max-width: 550px)
|
&__left {
|
||||||
// {
|
min-width: 22px;
|
||||||
// .searchbar-inner {
|
max-width: 22px;
|
||||||
// height: 88px;
|
}
|
||||||
// &__left {
|
&__center {
|
||||||
// min-width: 22px;
|
flex-direction: column;
|
||||||
// max-width: 22px;
|
}
|
||||||
// margin-right: 15px;
|
&__right {
|
||||||
// }
|
flex-direction: column-reverse;
|
||||||
// &__center {
|
margin-left: 10px;
|
||||||
// flex-direction: column;
|
}
|
||||||
// }
|
}
|
||||||
// &__right {
|
&.replace {
|
||||||
// flex-direction: column-reverse;
|
height: 88px;
|
||||||
// margin-left: 10px;
|
top: 0;
|
||||||
// }
|
.searchbar-inner {
|
||||||
// }
|
height: 100%;
|
||||||
// }
|
&__left {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -57,6 +57,22 @@
|
||||||
height: 24px;
|
height: 24px;
|
||||||
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM20 15C21.6569 15 23 13.6569 23 12C23 10.3431 21.6569 9 20 9C18.3431 9 17 10.3431 17 12C17 13.6569 18.3431 15 20 15Z" fill="@{navBarIconColor}"/></svg>');
|
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM20 15C21.6569 15 23 13.6569 23 12C23 10.3431 21.6569 9 20 9C18.3431 9 17 10.3431 17 12C17 13.6569 18.3431 15 20 15Z" fill="@{navBarIconColor}"/></svg>');
|
||||||
}
|
}
|
||||||
|
&.icon-prev {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{white}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
|
||||||
|
&:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.icon-next {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
.encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{white}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
|
||||||
|
&:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
i.icon {
|
i.icon {
|
||||||
|
|
|
||||||
|
|
@ -76,7 +76,7 @@ export default class MainPage extends Component {
|
||||||
</Navbar>
|
</Navbar>
|
||||||
{/* Page content */}
|
{/* Page content */}
|
||||||
<View id="editor_sdk">
|
<View id="editor_sdk">
|
||||||
|
|
||||||
</View>
|
</View>
|
||||||
{/* {
|
{/* {
|
||||||
Device.phone ? null : <SearchSettings />
|
Device.phone ? null : <SearchSettings />
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue