[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) {
|
||||
params.replace = this.$replace.val();
|
||||
}
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
|
@ -240,14 +240,16 @@ class SearchView extends Component {
|
|||
const hidden = {display: "none"};
|
||||
const searchQuery = this.state.searchQuery;
|
||||
const replaceQuery = this.state.replaceQuery;
|
||||
const isIos = Device.ios;
|
||||
// const _t = this.t('View.Settings', {returnObjects: true});
|
||||
|
||||
// console.log(searchQuery);
|
||||
// console.log(replaceQuery)
|
||||
if(this.searchbar && this.searchbar.enabled) {
|
||||
usereplace ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
|
||||
}
|
||||
|
||||
return (
|
||||
<form className="searchbar">
|
||||
<div className="searchbar-bg"></div>
|
||||
{isIos ? <div className="searchbar-bg"></div> : null}
|
||||
<div className="searchbar-inner">
|
||||
<div className="buttons-row searchbar-inner__left">
|
||||
<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">
|
||||
<input placeholder="Search" type="search" value={searchQuery}
|
||||
onChange={e => {this.changeSearchQuery(e.target.value)}} />
|
||||
<i className="searchbar-icon" />
|
||||
{isIos ? <i className="searchbar-icon" /> : null}
|
||||
<span className="input-clear-button" />
|
||||
</div>
|
||||
<div className="searchbar-input-wrap" style={!usereplace ? hidden: null}>
|
||||
<input placeholder="Replace" type="search" id="idx-replace-val" value={replaceQuery}
|
||||
onChange={e => {this.changeReplaceQuery(e.target.value)}} />
|
||||
<i className="searchbar-icon" />
|
||||
{isIos ? <i className="searchbar-icon" /> : null}
|
||||
<span className="input-clear-button" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -393,10 +393,17 @@
|
|||
|
||||
// Find and Replace
|
||||
|
||||
.navbar {
|
||||
.searchbar-input-wrap {
|
||||
margin-right: 10px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar input[type=search] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
height: 100%;
|
||||
display: block;
|
||||
border: none;
|
||||
appearance: none;
|
||||
|
|
@ -408,6 +415,39 @@
|
|||
padding: 0 8px;
|
||||
background-color: @white;
|
||||
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] {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
display: block;
|
||||
border: none;
|
||||
appearance: none;
|
||||
|
|
@ -311,9 +344,46 @@
|
|||
opacity: 1;
|
||||
background-size: 24px 24px;
|
||||
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 {
|
||||
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 {
|
||||
&__center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
// flex-wrap: wrap;
|
||||
}
|
||||
&__right {
|
||||
display: flex;
|
||||
|
|
@ -44,27 +39,33 @@
|
|||
}
|
||||
}
|
||||
|
||||
// .searchbar-expandable.replace {
|
||||
// height: 88px;
|
||||
// top: 0;
|
||||
// }
|
||||
|
||||
// @media(max-width: 550px)
|
||||
// {
|
||||
// .searchbar-inner {
|
||||
// height: 88px;
|
||||
// &__left {
|
||||
// min-width: 22px;
|
||||
// max-width: 22px;
|
||||
// margin-right: 15px;
|
||||
// }
|
||||
// &__center {
|
||||
// flex-direction: column;
|
||||
// }
|
||||
// &__right {
|
||||
// flex-direction: column-reverse;
|
||||
// margin-left: 10px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@media(max-width: 550px)
|
||||
{
|
||||
.searchbar-expandable.searchbar-enabled {
|
||||
top: auto;
|
||||
.searchbar-inner {
|
||||
&__left {
|
||||
min-width: 22px;
|
||||
max-width: 22px;
|
||||
}
|
||||
&__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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,22 @@
|
|||
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>');
|
||||
}
|
||||
&.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 {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ export default class MainPage extends Component {
|
|||
</Navbar>
|
||||
{/* Page content */}
|
||||
<View id="editor_sdk">
|
||||
|
||||
|
||||
</View>
|
||||
{/* {
|
||||
Device.phone ? null : <SearchSettings />
|
||||
|
|
|
|||
Loading…
Reference in a new issue