diff --git a/apps/common/mobile/lib/view/Search.jsx b/apps/common/mobile/lib/view/Search.jsx index 3da889751..5ab35c29d 100644 --- a/apps/common/mobile/lib/view/Search.jsx +++ b/apps/common/mobile/lib/view/Search.jsx @@ -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 (
-
+ {isIos ?
: null}
@@ -258,13 +260,13 @@ class SearchView extends Component {
{this.changeSearchQuery(e.target.value)}} /> - + {isIos ? : null}
{this.changeReplaceQuery(e.target.value)}} /> - + {isIos ? : null}
diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index d283aad3b..83abb5853 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -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; + } + } + } + } + } } } diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index a1e6a4cf5..0738151ed 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -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(''); + .encoded-svg-background(''); } + .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; + } + } + } + } } diff --git a/apps/common/mobile/resources/less/search.less b/apps/common/mobile/resources/less/search.less index 516d9dbd3..ba83edb0c 100644 --- a/apps/common/mobile/resources/less/search.less +++ b/apps/common/mobile/resources/less/search.less @@ -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; + } + } + } + } + } } diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 8b6dc0e2c..28c70d175 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -57,6 +57,22 @@ height: 24px; .encoded-svg-background(''); } + &.icon-prev { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } + &.icon-next { + width: 20px; + height: 20px; + .encoded-svg-background(''); + &:after { + display: none; + } + } } } i.icon { diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 93e165f05..2072e41db 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -76,7 +76,7 @@ export default class MainPage extends Component { {/* Page content */} - + {/* { Device.phone ? null :