diff --git a/frontend/src/app.js b/frontend/src/app.js index 22e2f5aa93..bb6af73c09 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -79,6 +79,10 @@ class App extends Component { }); } + onSearchedClick = () => { + //todos + } + tabItemClick = (param) => { this.setState({ currentTab: param @@ -92,24 +96,31 @@ class App extends Component {
- + - - - + + - - - - - - - + + + + + + +
diff --git a/frontend/src/components/main-panel.js b/frontend/src/components/main-panel.js index c3caa2ef9c..cc2f74afa0 100644 --- a/frontend/src/components/main-panel.js +++ b/frontend/src/components/main-panel.js @@ -1,30 +1,16 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import CommonToolbar from './toolbar/common-toolbar'; const propTypes = { children: PropTypes.object.isRequired, - onShowSidePanel: PropTypes.func.isRequired, }; class MainPanel extends Component { - onSearchedClick = () => { - //todos; - } - render() { return (
-
-
- -
- -
-
- {this.props.children} -
+ {this.props.children}
); } diff --git a/frontend/src/components/toolbar/general-toolbar.js b/frontend/src/components/toolbar/general-toolbar.js new file mode 100644 index 0000000000..cfadfdb682 --- /dev/null +++ b/frontend/src/components/toolbar/general-toolbar.js @@ -0,0 +1,35 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import CommonToolbar from './common-toolbar'; + +const propTypes = { + onShowSidePanel: PropTypes.func.isRequired, + onSearchedClick: PropTypes.func.isRequired, +}; + +class GeneralToolbar extends React.Component { + + render() { + let { onShowSidePanel, onSearchedClick } = this.props; + let placeHolder = this.props.searchPlaceholder || 'Search files in this library'; + return ( + +
+ + +
+ + + ); + } +} + +GeneralToolbar.propTypes = propTypes; + +export default GeneralToolbar; diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css index 0b17b8c769..1adfce6cf8 100644 --- a/frontend/src/css/layout.css +++ b/frontend/src/css/layout.css @@ -120,6 +120,7 @@ [role=group] { display: flex; flex: 1; + flex-direction: column; } .header { @@ -199,3 +200,7 @@ background-color: #f5d2d2; border-color: #f1c1c0; } + +img[src=""],img:not([src]){ /* for first loading img*/ + opacity:0; +} diff --git a/frontend/src/pages/dashboard/files-activities.js b/frontend/src/pages/dashboard/files-activities.js index d049c77338..6b7857fd00 100644 --- a/frontend/src/pages/dashboard/files-activities.js +++ b/frontend/src/pages/dashboard/files-activities.js @@ -1,7 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import PropTypes from 'prop-types'; import { seafileAPI } from '../../utils/seafile-api'; import { gettext, siteRoot } from '../../utils/constants'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; const contentPropTypes = { data: PropTypes.object.isRequired, @@ -244,14 +245,25 @@ class FilesActivities extends Component { render() { return ( -
-
-

{gettext('Activities')}

+ +
+
-
- +
+
+
+

{gettext('Activities')}

+
+
+ +
+
-
+ ); } } diff --git a/frontend/src/pages/drafts/drafts-view.js b/frontend/src/pages/drafts/drafts-view.js index 41297ab210..9344d192ef 100644 --- a/frontend/src/pages/drafts/drafts-view.js +++ b/frontend/src/pages/drafts/drafts-view.js @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import { siteRoot, gettext } from '../../utils/constants'; import { Link } from '@reach/router'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; const propTypes = { currentTab: PropTypes.string.isRequired, @@ -20,23 +21,30 @@ class DraftsView extends React.Component { render() { return ( -
-
-
    -
  • this.tabItemClick('drafts')}> - - {gettext('Drafts')} - -
    • -
  • this.tabItemClick('reviews')}> - - {gettext('Reviews')} - -
    • -
+ +
+
- {this.props.children} -
+
+
+
+
    +
  • this.tabItemClick('drafts')}> + {gettext('Drafts')} +
    • +
  • this.tabItemClick('reviews')}> + {gettext('Reviews')} +
    • +
+
+ {this.props.children} +
+
+ ); } } diff --git a/frontend/src/pages/linked-devices/linked-devices.js b/frontend/src/pages/linked-devices/linked-devices.js index 4573fbc585..e19ae6f6a8 100644 --- a/frontend/src/pages/linked-devices/linked-devices.js +++ b/frontend/src/pages/linked-devices/linked-devices.js @@ -1,10 +1,9 @@ +import React, { Component, Fragment } from 'react'; import moment from 'moment'; -import React, { Component } from 'react'; -import Toast from '../../components/toast'; - import { seafileAPI } from '../../utils/seafile-api'; -import { Utils } from '../../utils/utils'; -import { gettext, siteRoot, loginUrl } from '../../utils/constants'; +import { gettext, loginUrl } from '../../utils/constants'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; +import Toast from '../../components/toast'; class Content extends Component { @@ -196,14 +195,25 @@ class LinkedDevices extends Component { render() { return ( -
-
-

{gettext('Linked Devices')}

+ +
+
-
- +
+
+
+

{gettext('Linked Devices')}

+
+
+ +
+
-
+ ); } } diff --git a/frontend/src/pages/share-admin/folders.js b/frontend/src/pages/share-admin/folders.js index 6c2120cc08..7c27746be0 100644 --- a/frontend/src/pages/share-admin/folders.js +++ b/frontend/src/pages/share-admin/folders.js @@ -1,7 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; class Content extends Component { @@ -281,14 +282,25 @@ class ShareAdminFolders extends Component { render() { return ( -
-
-

{gettext("Folders")}

+ +
+
-
- +
+
+
+

{gettext("Folders")}

+
+
+ +
+
-
+ ); } } diff --git a/frontend/src/pages/share-admin/libraries.js b/frontend/src/pages/share-admin/libraries.js index 7f5ad71d5e..07657235cd 100644 --- a/frontend/src/pages/share-admin/libraries.js +++ b/frontend/src/pages/share-admin/libraries.js @@ -1,7 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; class Content extends Component { @@ -288,14 +289,25 @@ class ShareAdminLibraries extends Component { render() { return ( -
-
-

{gettext("Libraries")}

+ +
+
-
- +
+
+
+

{gettext("Libraries")}

+
+
+ +
+
-
+ ); } } diff --git a/frontend/src/pages/share-admin/share-links.js b/frontend/src/pages/share-admin/share-links.js index 21be43370f..c27cf54614 100644 --- a/frontend/src/pages/share-admin/share-links.js +++ b/frontend/src/pages/share-admin/share-links.js @@ -1,10 +1,11 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { Link } from '@reach/router'; import moment from 'moment'; import { Modal, ModalHeader, ModalBody } from 'reactstrap'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot, loginUrl, isPro, canGenerateUploadLink } from '../../utils/constants'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; class Content extends Component { constructor(props) { @@ -237,21 +238,32 @@ class ShareAdminShareLinks extends Component { render() { return ( -
-
-
    -
  • - {gettext('Share Links')} -
    • - { canGenerateUploadLink ? -
  • {gettext('Upload Links')}
    • - : '' } -
+ +
+
-
- +
+
+
+
    +
  • + {gettext('Share Links')} +
    • + { canGenerateUploadLink ? +
  • {gettext('Upload Links')}
    • + : '' } +
+
+
+ +
+
-
+ ); } } diff --git a/frontend/src/pages/share-admin/upload-links.js b/frontend/src/pages/share-admin/upload-links.js index dbce9e22a7..3d27aa1dce 100644 --- a/frontend/src/pages/share-admin/upload-links.js +++ b/frontend/src/pages/share-admin/upload-links.js @@ -1,10 +1,11 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { Link } from '@reach/router'; import moment from 'moment'; import { Modal, ModalHeader, ModalBody } from 'reactstrap'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot, loginUrl, isPro, canGenerateShareLink } from '../../utils/constants'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; class Content extends Component { constructor(props) { @@ -226,19 +227,30 @@ class ShareAdminUploadLinks extends Component { render() { return ( -
-
-
    - { canGenerateShareLink ? -
  • {gettext('Share Links')}
    • - : '' } -
  • {gettext('Upload Links')}
    • -
+ +
+
-
- +
+
+
+
    + { canGenerateShareLink ? +
  • {gettext('Share Links')}
    • + : '' } +
  • {gettext('Upload Links')}
    • +
+
+
+ +
+
-
+ ); } } diff --git a/frontend/src/pages/shared-libs/shared-libs.js b/frontend/src/pages/shared-libs/shared-libs.js index 8ced58e4a5..a0701e39a5 100644 --- a/frontend/src/pages/shared-libs/shared-libs.js +++ b/frontend/src/pages/shared-libs/shared-libs.js @@ -1,9 +1,10 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import moment from 'moment'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot, loginUrl, isPro } from '../../utils/constants'; import Loading from '../../components/loading'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; class Content extends Component { @@ -251,14 +252,25 @@ class SharedLibraries extends Component { render() { return ( -
-
-

{gettext("Shared with me")}

+ +
+
-
- +
+
+
+

{gettext("Shared with me")}

+
+
+ +
+
-
+ ); } } diff --git a/frontend/src/pages/starred/starred.js b/frontend/src/pages/starred/starred.js index 71ba528b51..96c777836a 100644 --- a/frontend/src/pages/starred/starred.js +++ b/frontend/src/pages/starred/starred.js @@ -1,7 +1,8 @@ -import React, { Component } from 'react'; +import React, { Component, Fragment } from 'react'; import { seafileAPI } from '../../utils/seafile-api'; import { Utils } from '../../utils/utils'; import { gettext, siteRoot, loginUrl } from '../../utils/constants'; +import GeneralToolbar from '../../components/toolbar/general-toolbar'; class Content extends Component { @@ -262,14 +263,25 @@ class Starred extends Component { render() { return ( -
-
-

{gettext('Favorites')}

+ +
+
-
- +
+
+
+

{gettext('Favorites')}

+
+
+ +
+
-
+ ); } }