[DE mobile] extended Search view

apps/common/mobile/resources/less/common-ios.less

@@ -52,6 +52,12 @@
                 ul {
                     border-radius: 0;
                 }
+
+                li:first-child, li:last-child {
+                    > label {
+                        border-radius: 0;
+                    }
+                }
             }
         }
 

apps/documenteditor/mobile/src/controller/Search.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import SearchView, {SearchSettingsView} from '../view/Search'
+
+const SearchController = props => {
+    return <SearchView />
+};
+
+export {SearchController as Search, SearchSettingsView as SearchSettings};

apps/documenteditor/mobile/src/pages/home.jsx

@@ -4,8 +4,9 @@ import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-re
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../view/settings/Settings';
-import SearchView from '../view/search';
 import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
+import { Device } from '../../../../common/mobile/utils/device'
+import { Search, SearchSettings } from '../controller/Search';
 
 export default class Home extends Component {
     constructor(props) {
@@ -59,16 +60,19 @@ export default class Home extends Component {
                   <NavRight>
                       <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
                       <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
-                      <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>
+                      { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
                       <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                       <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                   </NavRight>
-                  <SearchView />
+                  { Device.phone ? null : <Search /> }
               </Navbar>
               {/* Page content */}
               <View id="editor_sdk">
 
               </View>
+              {
+                  Device.phone ? null : <SearchSettings />
+              }
               {
                   !this.state.editOptionsVisible ? null :
                       <EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />

apps/documenteditor/mobile/src/view/Search.jsx

@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react';
+import { f7ready, f7 } from 'framework7-react';
+import { Device } from '../../../../common/mobile/utils/device';
+
+const popoverStyle = {
+    height: '300px'
+};
+
+class SearchSettingsView extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            useReplace: false,
+            caseSensitive: false,
+            markResults: false
+        };
+    }
+
+    onFindReplaceClick(action) {
+        this.setState({
+            useReplace: action == 'replace'
+        });
+    }
+
+    render() {
+        const show_popover = true;
+        const navbar =
+            <Navbar title="Find and replace">
+                {!show_popover &&
+                    <NavRight>
+                        <Link popupClose=".search-settings-popup">Done</Link>
+                    </NavRight>}
+            </Navbar>;
+        const content =
+            <View style={popoverStyle}>
+                <Page>
+                    {navbar}
+                    <List>
+                        <ListItem radio title="Find" name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')}></ListItem>
+                        <ListItem radio title="Find and replace" name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')}></ListItem>
+                    </List>
+                </Page>
+            </View>;
+        return (
+            show_popover ?
+                <Popover id="idx-search-settings" className="popover__titled">{content}</Popover> :
+                <Popup id="idx-search-settings">{content}</Popup>
+        )
+    }
+}
+
+class SearchView extends Component {
+    constructor(props) {
+        super(props);
+
+        $$(document).on('page:init', (e, page) => {
+            if ( page.name == 'home' ) {
+                this.$f7.searchbar.create({
+                    el: '.searchbar',
+                    customSearch: true,
+                    expandable: true,
+                    backdrop: false,
+                    on: {
+                        search: (bar, curval, prevval) => {
+                            console.log('on search results ' + curval);
+                        }
+                    }
+                });
+            }
+        });
+
+        this.onSettingsClick = this.onSettingsClick.bind(this);
+    }
+
+    componentDidMount(){
+    }
+
+    onSettingsClick(e) {
+        if ( Device.phone ) {
+            // f7.popup.open('.settings-popup');
+        } else this.$f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
+    }
+
+    render() {
+        return (
+            <form className="searchbar">
+                <div className="searchbar-bg"></div>
+                <div className="searchbar-inner">
+                    <div className="buttons-row">
+                        <a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
+                            <i className="icon icon-settings" />
+                        </a>
+                    </div>
+                    <div className="searchbar-input-wrap">
+                        <input placeholder="Search" type="search" />
+                        <i className="searchbar-icon" />
+                        <span className="input-clear-button" />
+                    </div>
+                    <div className="buttons-row">
+                        <a className="link icon-only prev disabled">
+                            <i className="icon icon-prev" />
+                        </a>
+                        <a className="link icon-only next disabled">
+                            <i className="icon icon-next" />
+                        </a>
+                    </div>
+                    <span className="searchbar-disable-button">Cancel</span>
+                </div>
+            </form>
+        )
+    }
+}
+
+export {SearchView as default, SearchSettingsView};

apps/documenteditor/mobile/src/view/search.jsx

@@ -1,14 +1,63 @@
 import React, { Component } from 'react';
-import { Searchbar, Link } from 'framework7-react';
+import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react';
 import { f7ready, f7 } from 'framework7-react';
+import { Device } from '../../../../common/mobile/utils/device';
 
-export default class SearchView extends Component {
+const popoverStyle = {
+    height: '300px'
+};
+
+class SearchSettingsView extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            useReplace: false,
+            caseSensitive: false,
+            markResults: false
+        };
+    }
+
+    onFindReplaceClick(action) {
+        this.setState({
+            useReplace: action == 'replace'
+        });
+    }
+
+    render() {
+        const show_popover = true;
+        const navbar =
+            <Navbar title="Find and replace">
+                {!show_popover &&
+                    <NavRight>
+                        <Link popupClose=".search-settings-popup">Done</Link>
+                    </NavRight>}
+            </Navbar>;
+        const content =
+            <View style={popoverStyle}>
+                <Page>
+                    {navbar}
+                    <List>
+                        <ListItem radio title="Find" name="find-replace-checkbox" checked={!this.state.useReplace} onClick={e => this.onFindReplaceClick('find')}></ListItem>
+                        <ListItem radio title="Find and replace" name="find-replace-checkbox" checked={this.state.useReplace} onClick={e => this.onFindReplaceClick('replace')}></ListItem>
+                    </List>
+                </Page>
+            </View>;
+        return (
+            show_popover ?
+                <Popover id="idx-search-settings" className="popover__titled">{content}</Popover> :
+                <Popup id="idx-search-settings">{content}</Popup>
+        )
+    }
+}
+
+class SearchView extends Component {
     constructor(props) {
         super(props);
 
         $$(document).on('page:init', (e, page) => {
             if ( page.name == 'home' ) {
-                f7.searchbar.create({
+                this.$f7.searchbar.create({
                     el: '.searchbar',
                     customSearch: true,
                     expandable: true,
@@ -21,18 +70,26 @@ export default class SearchView extends Component {
                 });
             }
         });
+
+        this.onSettingsClick = this.onSettingsClick.bind(this);
     }
 
     componentDidMount(){
     }
 
+    onSettingsClick(e) {
+        if ( Device.phone ) {
+            // f7.popup.open('.settings-popup');
+        } else this.$f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
+    }
+
     render() {
         return (
             <form className="searchbar">
                 <div className="searchbar-bg"></div>
                 <div className="searchbar-inner">
                     <div className="buttons-row">
-                        <a id="search-settings" className="link icon-only" onClick={e => console.log('search settings click')}>
+                        <a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
                             <i className="icon icon-settings" />
                         </a>
                     </div>
@@ -55,3 +112,5 @@ export default class SearchView extends Component {
         )
     }
 }
+
+export {SearchView as default, SearchSettingsView};