Skip to content

Commit

Permalink
feat: Redesigned Context Switcher [EP-2920]
Browse files Browse the repository at this point in the history
  • Loading branch information
ancashoria authored Oct 1, 2020
1 parent 21f2331 commit a0e8bba
Show file tree
Hide file tree
Showing 13 changed files with 373 additions and 289 deletions.
83 changes: 0 additions & 83 deletions packages/earth-admin/src/components/org-switcher/OrgSwitcher.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ interface IProps {
}

const SidebarSelect = (props: IProps) => {
const selectRef = React.useRef(null);

const [dropdownState, setDropdownState] = useState('close');
const currentPage = !!props.path ? props.path[0].key : 'Choose a page';

Expand All @@ -46,7 +44,7 @@ const SidebarSelect = (props: IProps) => {
setDropdownState('close');
};

useDomWatcher(selectRef, handleClickOutside, dropdownState === 'close');
const selectRef = useDomWatcher(handleClickOutside, dropdownState === 'close');

return (
<div className="marapp-qa-sidebarselect ng-padding-medium-horizontal ng-form ng-form-dark">
Expand Down
50 changes: 36 additions & 14 deletions packages/earth-admin/src/layouts/Sidebar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,40 +17,62 @@
specific language governing permissions and limitations under the License.
*/

import React from 'react';
import React, { useContext } from 'react';
import { navigate } from 'gatsby';

import { Spinner } from '@marapp/earth-shared';
import { Spinner, AppContextSwitcher } from '@marapp/earth-shared';

import { LinkWithOrg } from '@app/components/link-with-org';
import { OrgSwitcher } from '@app/components/org-switcher';
import { SidebarSelect } from '@app/components/sidebar-select';
import { IAdminPage } from '@app/components/sidebar-select/model';
import { Auth0Context } from '@app/utils/contexts';
import { MAP_PATH } from '@app/config';

import { APP_LOGO, APP_NAME } from '../theme';
import './styles.scss';

const { Option } = AppContextSwitcher;

interface IProps {
isLoading?: boolean;
children?: React.ReactNode;
page?: IAdminPage[];
}

const SidebarLayout = (props: IProps) => {
const { groups, selectedGroup } = useContext(Auth0Context);

const logo = (
<LinkWithOrg to="/" className="ng-border-remove">
<img src={APP_LOGO} alt={APP_NAME} className="ng-margin-remove ng-display-block" />
</LinkWithOrg>
);

return (
<div className="ng-sidebar ng-flex ng-flex-column ng-flex-top ng-shadow-medium">
<div className="ng-shadow-large ng-background-dkgray">
<nav className="ng-padding-medium-top ng-sidebar-header">
<div className="ng-padding-medium-horizontal ng-ep-background-dark ng-margin-bottom ng-flex ng-flex-middle ng-position-relative">
<LinkWithOrg to="/" className="ng-border-remove">
<img src={APP_LOGO} alt={APP_NAME} className="ng-margin-remove ng-display-block" />
</LinkWithOrg>
<span className="ng-margin-small-horizontal ng-color-white">|</span>
<OrgSwitcher />
</div>
</nav>
<div className="ng-sidebar-header ng-shadow-large ng-background-dkgray ng-padding-bottom">
<AppContextSwitcher
logo={logo}
label="Map View"
defaultValue={selectedGroup}
onChange={(selectedValue) => {
if (selectedValue === 'map-view') {
window.location.assign(`${MAP_PATH}/earth`);
} else {
navigate(`/${selectedValue}`);
}
}}
>
<Option value="map-view">Map View</Option>
{!!groups &&
groups.map((g) => (
<Option value={g} key={g}>
{g}
</Option>
))}
</AppContextSwitcher>
<SidebarSelect path={props.page} />
</div>
<div className="ng-position-relative ng-padding-horizontal ng-padding-top ng-background-dkgray" />
{props.isLoading ? (
<div className="ng-position-relative ng-margin-large">
<Spinner />
Expand Down
6 changes: 6 additions & 0 deletions packages/earth-admin/src/layouts/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,8 @@
background: $marapp-gray-9;
min-width: $sidebar-width;
max-width: $sidebar-width;
// Hack to make fixed children be relative to the sidebar
transform: translate3d(0%, 0px, 0px);
position: fixed;
top: 0;
left: 0;
Expand All @@ -33,6 +35,10 @@
}
}

.ng-sidebar-header {
z-index: 1;
}

.ng-admin-logo {
height: 40px;
}
Expand Down
158 changes: 69 additions & 89 deletions packages/earth-map/src/components/header/component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ import Link from 'redux-first-router-link';
import { fetchStats } from 'services/stats';
import { APP_LOGO } from 'theme';

import { checkRole } from '@marapp/earth-shared';
import { checkRole, AppContextSwitcher } from '@marapp/earth-shared';

import './styles.scss';
const { Option } = AppContextSwitcher;

interface IProps {
group?: string[];
Expand Down Expand Up @@ -130,96 +130,76 @@ const Header = (props: IProps) => {
});
};

return (
<div className="marapp-qa-header ng-padding-medium-horizontal ng-ep-background-dark ng-flex ng-flex-middle ng-position-relative ng-padding-bottom ng-padding-small-top">
<Link
className="ng-border-remove"
to={{
type: 'EARTH',
}}
>
<img
src={APP_LOGO}
alt={APP_NAME}
className="ng-margin-remove ng-display-block"
onClick={handleResetLocation}
/>
</Link>
{isAuthenticated && (
<>
<span className="ng-ep-kicker" />

<span className="ng-text-display-s ng-text-weight-regular ng-body-color ng-margin-remove ng-display-block ng-org-name">
map view
</span>

<div
onClick={handleDropdownToggle}
className="marapp-qa-orgtogglebutton ng-padding ng-c-cursor-pointer ng-position-relative"
const logo = (
<Link
className="ng-border-remove"
to={{
type: 'EARTH',
}}
>
<img
src={APP_LOGO}
alt={APP_NAME}
className="ng-margin-remove ng-display-block"
onClick={handleResetLocation}
/>
</Link>
);
const orgCheckBoxes = (
<li className="marapp-qa-orglist ng-form ng-form-dark">
<div className="ng-padding-medium-horizontal ng-padding-top">
{availableGroups.map((g, i) => (
<label
htmlFor={g.name}
className={classNames('ng-padding-bottom ng-flex', {
'ng-c-cursor-pointer': hasMultipleGroups,
})}
key={i}
>
<i
className={classNames({
'ng-body-color': true,
'ng-icon-directionup': dropdownState === 'open',
'ng-icon-directiondown': dropdownState !== 'open',
})}
/>
{selectedGroups.length > 0 && (
<span className="ng-org-badge">{selectedGroups.length}</span>
)}
</div>

<DropdownComponent state={dropdownState}>
<li className="ng-ep-dropdown-category ng-ep-dropdown-selected">
<span className="ng-dropdown-item">MAP VIEW</span>
</li>
<li className="marapp-qa-orglist ng-form ng-form-dark">
<div className="ng-padding-medium-horizontal ng-padding-top">
{availableGroups.map((g, i) => (
<label
htmlFor={g.name}
className={classNames('ng-padding-bottom ng-flex', {
'ng-c-cursor-pointer': hasMultipleGroups,
})}
key={i}
>
{hasMultipleGroups && (
<input
className="ng-checkbox-input ng-flex-item-none ng-margin-top-remove"
type="checkbox"
id={g.name}
value={g.name}
checked={!!selectedGroups.find((x) => x === g.name)}
name={g.name}
onChange={(e) => onOrgChange(e)}
/>
)}
<div>
{g.name}
<span className="ng-display-block ng-color-mdgray">
Places ({g.locations})<strong className="ng-icon-bullet" />
Layers ({g.layers})
</span>
</div>
</label>
))}
</div>
</li>

{Object.keys(roles).map(
(g, i) =>
checkRole(roles[g]) && (
<li className="marapp-qa-adminlink ng-ep-dropdown-category" key={i}>
<a href={`${ADMIN_URL}${g}`} className="ng-c-cursor-pointer ng-dropdown-item">
{g} - ADMIN
</a>
</li>
)
{hasMultipleGroups && (
<input
className="ng-checkbox-input ng-flex-item-none ng-margin-top-remove"
type="checkbox"
id={g.name}
value={g.name}
checked={!!selectedGroups.find((x) => x === g.name)}
name={g.name}
onChange={(e) => onOrgChange(e)}
/>
)}
</DropdownComponent>
</>
<div>
{g.name}
<span className="ng-display-block ng-color-mdgray">
Places ({g.locations})<strong className="ng-icon-bullet" />
Layers ({g.layers})
</span>
</div>
</label>
))}
</div>
</li>
);

return (
<AppContextSwitcher
logo={logo}
label="Map View"
defaultValue="map-view"
checkedCount={selectedGroups.length}
renderDropdown={isAuthenticated}
onChange={(g) => window.location.assign(`${ADMIN_URL}${g}`)}
>
<Option value="map-view">Map View</Option>
{orgCheckBoxes}
{Object.keys(roles).map(
(g, i) =>
checkRole(roles[g]) && (
<Option value={g} key={g}>
{g} - ADMIN
</Option>
)
)}
</div>
</AppContextSwitcher>
);
};

Expand Down
Loading

0 comments on commit a0e8bba

Please sign in to comment.