Add mobile action menu to each page

TIBHannover · Jul 30, 2021 · a9a8f5e · a9a8f5e
1 parent 85d5dc9
commit a9a8f5e
Show file tree

Hide file tree

Showing 57 changed files with 1,173 additions and 1,073 deletions.
diff --git a/keepachangelog.hbs b/keepachangelog.hbs
@@ -1,5 +1,3 @@
-# Changelog
-
 All notable changes to the ORKG will be documented in this file. The format is based on [Keep a
 Changelog](https://keepachangelog.com/en/1.0.0/) and we adhere to [Semantic
 Versioning](https://semver.org/spec/v2.0.0.html).

diff --git a/src/assets/scss/ThemeVariables.scss b/src/assets/scss/ThemeVariables.scss
@@ -19,6 +19,7 @@ $border-radius: 6px;
 $theme-colors: (
     primary-darker: $primary-darker,
     secondary-darker: $secondary-darker,
+    light-darker: $light-darker,
     body: $body-color
 );
 

diff --git a/src/components/ListPage/ListPage.js b/src/components/ListPage/ListPage.js
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import { useCallback, useEffect, useState } from 'react';
 import { usePrevious } from 'react-use';
 import { ButtonGroup, Container, ListGroup } from 'reactstrap';
+import TitleBar from 'components/TitleBar/TitleBar';
 
 const ListPage = ({ label, resourceClass, renderListItem, buttons, fetchItems, boxShadow, pageSize = 25 }) => {
     const [results, setResults] = useState([]);
@@ -79,17 +80,20 @@ const ListPage = ({ label, resourceClass, renderListItem, buttons, fetchItems, b
 
     return (
         <>
-            <Container className="d-flex align-items-center">
-                <div className="d-flex flex-grow-1 mt-4 mb-4">
-                    <h1 className="h4 m-0">View {label}</h1>
-                    <div className="text-muted ml-3 mt-1">
+            <TitleBar
+                titleAddition={
+                    <div className="text-muted mt-1">
                         {totalElements === 0 && isLoading ? <Icon icon={faSpinner} spin /> : totalElements} {label}
                     </div>
-                </div>
-                <ButtonGroup>
-                    {buttons} <HeaderSearchButton placeholder={`Search ${label}...`} type={resourceClass} />
-                </ButtonGroup>
-            </Container>
+                }
+                buttonGroup={
+                    <>
+                        {buttons} <HeaderSearchButton placeholder={`Search ${label}...`} type={resourceClass} />
+                    </>
+                }
+            >
+                View {label}
+            </TitleBar>
             <Container className="p-0">
                 {results.length > 0 && (
                     <ListGroup flush className="box rounded" style={{ overflow: 'hidden' }}>

diff --git a/src/components/MainTitle/MainTitle.js b/src/components/MainTitle/MainTitle.js
diff --git a/src/components/ResearchField/ResearchFieldHeader.js b/src/components/ResearchField/ResearchFieldHeader.js
@@ -32,6 +32,7 @@ import CheckSlug from 'components/CheckSlug/CheckSlug';
 import CheckClasses from 'components/CheckClasses/CheckClasses';
 import { reverseWithSlug } from 'utils';
 import { CLASSES } from 'constants/graphSettings';
+import TitleBar from 'components/TitleBar/TitleBar';
 
 const ResearchFieldHeader = ({ id }) => {
     const [menuOpen, setMenuOpen] = useState(false);
@@ -88,46 +89,54 @@ const ResearchFieldHeader = ({ id }) => {
             )}
             {!isLoading && !isFailedLoading && (
                 <>
-                    <Container className="d-flex align-items-center mt-4 mb-4">
-                        <h1 className="h5 flex-shrink-0 mb-0">Research field</h1>
-                        <>
-                            <SubtitleSeparator />
-                            <SubTitle className="h5 mb-0"> {researchFieldData.label}</SubTitle>
-                        </>
-                        {editMode && (
-                            <StatementBrowserDialog
-                                show={editMode}
-                                toggleModal={() => setEditMode(v => !v)}
-                                id={id}
-                                label={researchFieldData.label}
-                                enableEdit={true}
-                                syncBackend={true}
-                            />
-                        )}
-                        <ButtonGroup className="flex-shrink-0" style={{ marginLeft: 'auto' }}>
-                            {isCurationAllowed && (
-                                <RequireAuthentication
-                                    component={Button}
-                                    size="sm"
-                                    color="secondary"
-                                    className="float-right"
-                                    onClick={() => setEditMode(v => !v)}
-                                >
-                                    <Icon icon={faPen} /> Edit
-                                </RequireAuthentication>
-                            )}
-                            <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
-                                <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
-                                    <Icon icon={faEllipsisV} />
-                                </DropdownToggle>
-                                <DropdownMenu right>
-                                    <DropdownItem tag={NavLink} exact to={reverse(ROUTES.RESOURCE, { id })}>
-                                        View resource
-                                    </DropdownItem>
-                                </DropdownMenu>
-                            </ButtonDropdown>
-                        </ButtonGroup>
-                    </Container>
+                    {editMode && (
+                        <StatementBrowserDialog
+                            show={editMode}
+                            toggleModal={() => setEditMode(v => !v)}
+                            id={id}
+                            label={researchFieldData.label}
+                            enableEdit={true}
+                            syncBackend={true}
+                        />
+                    )}
+                    <TitleBar
+                        titleAddition={
+                            <>
+                                <SubtitleSeparator />
+                                <SubTitle>{researchFieldData.label}</SubTitle>
+                            </>
+                        }
+                        buttonGroup={
+                            <>
+                                {isCurationAllowed && (
+                                    <RequireAuthentication
+                                        component={Button}
+                                        size="sm"
+                                        color="secondary"
+                                        className="float-right"
+                                        onClick={() => setEditMode(v => !v)}
+                                        style={{ marginRight: 2 }}
+                                    >
+                                        <Icon icon={faPen} /> Edit
+                                    </RequireAuthentication>
+                                )}
+                                <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
+                                    <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right">
+                                        <Icon icon={faEllipsisV} />
+                                    </DropdownToggle>
+                                    <DropdownMenu right>
+                                        <DropdownItem tag={NavLink} exact to={reverse(ROUTES.RESOURCE, { id })}>
+                                            View resource
+                                        </DropdownItem>
+                                    </DropdownMenu>
+                                </ButtonDropdown>
+                            </>
+                        }
+                        wrap={false}
+                    >
+                        Research field
+                    </TitleBar>
+
                     <Container className="p-0">
                         <Card>
                             {(researchFieldData.description || researchFieldData.sameAs) && (

diff --git a/src/components/ResearchProblem/ResearchProblemHeader.js b/src/components/ResearchProblem/ResearchProblemHeader.js
@@ -38,6 +38,7 @@ import CheckSlug from 'components/CheckSlug/CheckSlug';
 import { reverseWithSlug } from 'utils';
 import CheckClasses from 'components/CheckClasses/CheckClasses';
 import { CLASSES } from 'constants/graphSettings';
+import TitleBar from 'components/TitleBar/TitleBar';
 
 const ResearchProblemHeader = ({ id }) => {
     const [menuOpen, setMenuOpen] = useState(false);
@@ -96,44 +97,51 @@ const ResearchProblemHeader = ({ id }) => {
             <Breadcrumbs researchFieldId={!isLoadingResearchFields && researchFields.length ? researchFields[0].field.id : null} disableLastField />
             {!isLoading && !isFailedLoading && (
                 <>
-                    <Container className="d-flex align-items-center mt-4 mb-4">
-                        <h1 className="h4 flex-shrink-0 mb-0">Research problem</h1>
-                        <>
-                            <SubtitleSeparator />
-                            <SubTitle className="h5 mb-0"> {researchProblemData.label}</SubTitle>
-                        </>
-                        {editMode && (
-                            <StatementBrowserDialog
-                                show={editMode}
-                                toggleModal={() => setEditMode(v => !v)}
-                                id={id}
-                                label={researchProblemData.label}
-                                enableEdit={true}
-                                syncBackend={true}
-                            />
-                        )}
-                        <ButtonGroup className="flex-shrink-0" style={{ marginLeft: 'auto' }}>
-                            <RequireAuthentication
-                                component={Button}
-                                size="sm"
-                                color="secondary"
-                                className="float-right"
-                                onClick={() => setEditMode(v => !v)}
-                            >
-                                <Icon icon={faPen} /> Edit
-                            </RequireAuthentication>
-                            <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
-                                <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right" style={{ marginLeft: 2 }}>
-                                    <Icon icon={faEllipsisV} />
-                                </DropdownToggle>
-                                <DropdownMenu right>
-                                    <DropdownItem tag={NavLink} exact to={reverse(ROUTES.RESOURCE, { id })}>
-                                        View resource
-                                    </DropdownItem>
-                                </DropdownMenu>
-                            </ButtonDropdown>
-                        </ButtonGroup>
-                    </Container>
+                    <TitleBar
+                        titleAddition={
+                            <>
+                                <SubtitleSeparator />
+                                <SubTitle>{researchProblemData.label}</SubTitle>
+                            </>
+                        }
+                        buttonGroup={
+                            <>
+                                <RequireAuthentication
+                                    component={Button}
+                                    size="sm"
+                                    color="secondary"
+                                    className="float-right"
+                                    onClick={() => setEditMode(v => !v)}
+                                    style={{ marginRight: 2 }}
+                                >
+                                    <Icon icon={faPen} /> Edit
+                                </RequireAuthentication>
+                                <ButtonDropdown isOpen={menuOpen} toggle={() => setMenuOpen(v => !v)} nav inNavbar>
+                                    <DropdownToggle size="sm" color="secondary" className="px-3 rounded-right">
+                                        <Icon icon={faEllipsisV} />
+                                    </DropdownToggle>
+                                    <DropdownMenu right>
+                                        <DropdownItem tag={NavLink} exact to={reverse(ROUTES.RESOURCE, { id })}>
+                                            View resource
+                                        </DropdownItem>
+                                    </DropdownMenu>
+                                </ButtonDropdown>
+                            </>
+                        }
+                        wrap={false}
+                    >
+                        Research problem
+                    </TitleBar>
+                    {editMode && (
+                        <StatementBrowserDialog
+                            show={editMode}
+                            toggleModal={() => setEditMode(v => !v)}
+                            id={id}
+                            label={researchProblemData.label}
+                            enableEdit={true}
+                            syncBackend={true}
+                        />
+                    )}
                     <Container className="p-0">
                         <Card>
                             <CardBody>