Commit 130ad963 authored by Pierre Marchand's avatar Pierre Marchand

[clients/sdi] refactored all headers with app select

parent 859268a1
......@@ -33,7 +33,7 @@ export type AppLayout = 'Alias';
const wrappedMain = (name: string, ...elements: React.DOMElement<{}, Element>[]) => (
DIV({ className: 'alias-inner' },
header('alias')(() => DIV({}))(),
header('alias'),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......@@ -57,7 +57,7 @@ const effects =
loadUser(
getApiUrl(`users/${userId}`)));
loadAllAlias();
}
};
const app = loop('alias-app', renderMain, effects);
export default app;
......
......@@ -17,7 +17,7 @@
import * as debug from 'debug';
import { DIV, NodeOrOptional } from 'sdi/components/elements';
import { headerWithString } from 'sdi/components/header';
import header from 'sdi/components/header';
import footer from 'sdi/components/footer';
import { loop, getApiUrl, } from 'sdi/app';
......@@ -30,7 +30,7 @@ import { loadAllRefsDebug } from 'angled-core/events/ref';
import { loadSubscriptions, startNotifications } from 'angled-core/events/sub';
import { loadProjects, loadProfiles, setLayout, loadAlias } from './events/app';
import { loadRoute } from './events/route';
import { getLayout, getAppName } from './queries/app';
import { getLayout } from './queries/app';
import projectslist from './components/projectslist';
import mapSelect from './components/map';
import review from './components/review';
......@@ -48,7 +48,7 @@ const wrappedMain = (name: string, ...elements: NodeOrOptional[]) =>
DIV(
{ className: `project ${getDisplayType()}` },
modal(),
headerWithString(getAppName(), 'angled-project')(notifier)(),
header('angled-project', notifier),
DIV({ className: `main ${name}` }, ...elements),
footer()
);
......
import * as debug from 'debug';
import { DIV } from 'sdi/components/elements';
import { headerWithString } from 'sdi/components/header';
import header from 'sdi/components/header';
import footer from 'sdi/components/footer';
import { loop, getUserId, getApiUrl } from 'sdi/app';
......@@ -10,7 +10,7 @@ import { loadTerms, loadDomains } from 'angled-core/events/universe';
import { DomainList, DomainForm } from './components/domain';
import { TermDetail, TermList, TermForm } from './components/term';
import splash from './components/splash';
import { getLayout, getAppName } from './queries/app';
import { getLayout } from './queries/app';
import { loadRoute } from './events/route';
import tr from 'sdi/locale';
......@@ -20,7 +20,7 @@ const logger = debug('sdi:app');
const wrappedMain = (name: string, ...elements: React.DOMElement<{}, Element>[]) => (
DIV({ className: 'universe-inner' },
headerWithString(getAppName())(() => DIV({}))(),
header('angled-universe'),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......
......@@ -73,12 +73,11 @@ const renderAppListingButton =
};
const renderHeader = header('studio')(renderAppListingButton);
const wrappedMain =
(name: string, ...elements: NodeOrOptional[]) =>
DIV({ className: 'compose-inner' },
renderHeader(),
header('compose', renderAppListingButton),
DIV({ className: `main ${name}` }, ...elements),
footer());
......
import { loop } from 'sdi/app';
import { DIV, NodeOrOptional } from 'sdi/components/elements';
import tr from 'sdi/locale';
import footer from 'sdi/components/footer';
import { headerWithString } from 'sdi/components/header';
import header from 'sdi/components/header';
import { loadRoute } from './events/route';
import { getLayout } from './queries/app';
......@@ -22,7 +21,7 @@ import { loadSelectionOfMaps, loadBaseLayers } from './events/app';
const wrappedMain =
(name: string, ...elements: NodeOrOptional[]) =>
DIV({ className: 'geo-inner' },
headerWithString(tr.geo('appName'))(() => DIV({}))(),
header('geothermie'),
DIV({ className: `main ${name}` }, ...elements),
footer(),
);
......
......@@ -37,7 +37,7 @@ export type AppLayout = 'Login' | 'Logout';
const wrappedMain = (name: string, ...elements: React.DOMElement<{}, Element>[]) => (
DIV({ className: 'login-inner' },
header('login')(() => DIV({}))(),
header('login'),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......@@ -59,11 +59,11 @@ const renderMain =
const effects =
() => {
scopeOption()
.let('uid', getUserId())
.let('next', fromNullable(getNext()))
.let('uid', getUserId())
.let('next', fromNullable(getNext()))
.map(({ next }) => window.location.assign(next));
tr.init_edited();
}
};
......
......@@ -64,12 +64,11 @@ const renderAppListingButton =
};
const renderHeader = header('metadata')(renderAppListingButton);
const wrappedMain = (name: string, ...elements: React.DOMElement<{}, Element>[]) => (
DIV({ className: 'metadata-inner' },
renderHeader(),
header('metadata', renderAppListingButton),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......
/*
* Copyright (C) 2017 Atelier Cartographique <contact@atelier-cartographique.be>
*
......@@ -17,12 +15,14 @@
*/
import * as debug from 'debug';
import { DIV, SPAN, A } from './elements';
import { DIV, A, NodeOrOptional } from './elements';
import langSwitch from './lang-switch';
import { navigateRoot, getUserId, getRoot, getLang } from '../app';
import { tr, MessageKey } from '../locale';
import { getUserId, getRoot, getLang, getAppManifest } from '../app';
import { tr, fromRecord } from '../locale';
import { getPathElements } from '../util';
import { renderAppSelect } from './app-select';
import { appDisplayName } from '../source';
import { none } from 'fp-ts/lib/Option';
const logger = debug('sdi:header');
......@@ -35,32 +35,23 @@ const loginURL =
};
const dashboardButton =
() => DIV({
className: 'navigate dashboard',
onClick: () => navigateRoot(),
}, SPAN({ className: 'label' }, tr.core('dashboard')));
// const dashboardButton =
// () => DIV({
// className: 'navigate dashboard',
// onClick: () => navigateRoot(),
// }, SPAN({ className: 'label' }, tr.core('dashboard')));
const rootButton =
(current?: string) =>
(current: string) =>
getUserId()
.fold(
DIV({ className: 'navigate login' },
A({ href: loginURL() }, tr.core('login'))),
() => current ? renderAppSelect(current) : dashboardButton(),
() => renderAppSelect(current),
);
const makeTitle =
(title: MessageKey, onClick?: () => void) => {
if (onClick) {
return DIV({ className: 'app-title interactive', onClick }, tr.core(title));
}
return DIV({ className: 'app-title' }, tr.core(title));
};
const documentationLink =
() =>
getUserId()
......@@ -71,47 +62,31 @@ const documentationLink =
}, tr.core('documentation'))));
export const header =
(title: MessageKey, onClick?: () => void) =>
(action: () => React.ReactNode) => {
const render =
() => (
DIV({ className: 'header' },
A({
href: getRoot(),
}, DIV({ className: 'brand-logo' },
DIV({ className: 'brand-name' }))),
makeTitle(title, onClick),
DIV({ className: 'app-listwrapper' }, action()),
DIV({ className: 'header-toolbar' },
rootButton(),
documentationLink(),
langSwitch())));
return render;
};
export const headerWithString =
(title: string, current?: string) =>
(action: () => React.ReactNode) => {
const render =
() => (
DIV({ className: 'header' },
A({
href: getRoot(),
}, DIV({ className: 'brand-logo' },
DIV({ className: 'brand-name' }))),
DIV({ className: 'app-title' }, title),
DIV({ className: 'app-listwrapper' }, action()),
DIV({ className: 'header-toolbar' },
rootButton(current),
documentationLink(),
langSwitch())));
return render;
};
const renderTitle = (
appCodename: string,
) => getAppManifest(appCodename)
.chain(appDisplayName)
.map<string>(n => fromRecord(n))
.getOrElse(appCodename);
const appElementDefault = (): NodeOrOptional => none;
export const header = (
appCodename: string,
appElement = appElementDefault,
) => DIV({ className: 'header' },
A({
href: getRoot(),
}, DIV({ className: 'brand-logo' },
DIV({ className: 'brand-name' }))),
DIV({ className: 'app-title' }, renderTitle(appCodename)),
DIV({ className: 'app-listwrapper' }, appElement()),
DIV({ className: 'header-toolbar' },
rootButton(appCodename),
documentationLink(),
langSwitch()));
export default header;
......
......@@ -23,7 +23,7 @@ import { loop, getApiUrl, setActivityToken } from 'sdi/app';
import { getLayout } from './queries/app';
import { navigate, navigateLocate } from './events/route';
import { navigate } from './events/route';
import locate from './components/locate';
import loader from './components/loader';
import preview from './components/preview';
......@@ -40,7 +40,7 @@ export type AppLayout = 'Locate:Geocoder' | 'Locate:Map' | 'Loader' | 'Preview'
const wrappedMain = (name: string, ...elements: React.DOMElement<{}, Element>[]) => (
DIV({ className: `solar-inner screen-${name}` },
header('solarAppName', navigateLocate)(() => DIV({}))(),
header('solar'),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......
......@@ -28,7 +28,7 @@ const wrappedMain =
(name: string, ...elements: React.DOMElement<{}, Element>[]) => (
DIV({ className: 'timeserie-inner' },
modal(),
header('__empty__')(devTool)(),
header('timeserie', devTool),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......
import { loop } from 'sdi/app';
import { DIV } from 'sdi/components/elements';
import { headerWithString } from 'sdi/components/header';
import header from 'sdi/components/header';
import footer from 'sdi/components/footer';
import { loadRoute } from './events/route';
import { getLayout, getAppName } from './queries/app';
import { getLayout } from './queries/app';
import home from './components/home';
import map from './components/map';
......@@ -19,7 +19,7 @@ const wrappedMain =
(name: string, ...elements: React.DOMElement<{}, Element>[]) => (
DIV({ className: 'project' },
modal(),
headerWithString(getAppName())(() => DIV({}))(),
header('tutorial'),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......
......@@ -16,8 +16,9 @@
*/
import * as debug from 'debug';
import { loop, getApiUrl } from 'sdi/app';
import { DIV, SPAN, NODISPLAY, NodeOrOptional } from 'sdi/components/elements';
import { some, none } from 'fp-ts/lib/Option';
import { loop, getApiUrl, } from 'sdi/app';
import { DIV, SPAN, NodeOrOptional } from 'sdi/components/elements';
import header from 'sdi/components/header';
import footer from 'sdi/components/footer';
import tr from 'sdi/locale';
......@@ -50,25 +51,22 @@ const logger = debug('sdi:app');
const renderAppListingButton =
() => {
if (getLayout() !== AppLayout.MapNavigatorFS) {
return (
return some(
DIV({
className: 'navigate app-listview',
onClick: () => navigateHome(),
},
SPAN({ className: 'label' }, tr.view('mapList'))));
}
return NODISPLAY();
return none;
};
const renderHeader = header('atlas')(renderAppListingButton);
const wrappedMain =
(name: string, ...elements: NodeOrOptional[]) => (
DIV({ className: 'view-inner' },
modal(),
renderHeader(),
header('view', renderAppListingButton),
DIV({ className: `main ${name}` }, ...elements),
footer())
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment