Skip to content

Commit 6313b05

Browse files
vladyslav-tkvladyslav-tk
authored
Merge pull request #1314 from swisstopo/GSNGM-1174_move_btns
GSNGM-1174 + GSNGM-1171 Move buttons, modify navigtion rail
2 parents f13fbf1 + f1cc160 commit 6313b05

File tree

9 files changed

+159
-126
lines changed

9 files changed

+159
-126
lines changed

‎ui/src/elements/dashboard/ngm-dashboard.ts

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
getCameraView,
1111
getPermalink,
1212
removeProject,
13-
removeTopic,
1413
setPermalink,
1514
syncStoredView,
1615
syncTargetParam
@@ -22,7 +21,6 @@ import type {Viewer} from 'cesium';
2221
import {CustomDataSource} from 'cesium';
2322
import {showBannerWarning, showSnackbarError} from '../../notifications';
2423
import {DEFAULT_LAYER_OPACITY, DEFAULT_PROJECT_COLOR, PROJECT_ASSET_URL} from '../../constants';
25-
import {fromGeoJSON} from '../../toolbox/helpers';
2624
import type {NgmGeometry} from '../../toolbox/interfaces';
2725
import {apiClient} from '../../api-client';
2826
import AuthStore from '../../store/auth';
@@ -102,7 +100,7 @@ export class NgmDashboard extends LitElementI18n {
102100
@state()
103101
accessor projects: Project[] = [];
104102
@state()
105-
accessor activeTab: TabTypes = 'topics';
103+
accessor activeTab: TabTypes = 'overview';
106104
@state()
107105
accessor selectedTopicOrProject: Topic | Project | undefined;
108106
@state()
@@ -135,32 +133,37 @@ export class NgmDashboard extends LitElementI18n {
135133
this.viewer = viewer;
136134
this.viewer?.dataSources.add(this.tempKmlDataSource);
137135
});
138-
fetch('./src/sampleData/topics.json').then(topicsResponse =>
139-
topicsResponse.json().then(topics => {
140-
this.topics = topics.map(topic => {
141-
if (topic.geometries) {
142-
topic.geometries = this.getGeometries(topic.geometries);
143-
}
144-
return topic;
145-
}).sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime());
146-
DashboardStore.topicOrProjectParam.subscribe(async value => {
147-
if (!value) return;
148-
if (value.kind === 'topic') {
149-
removeTopic();
150-
const topic = this.topics?.find(p => p.id === value.param.topicId);
151-
this.selectTopicOrProject(topic);
152-
} else if (value.kind === 'project') {
153-
removeProject();
154-
const project = await apiClient.getProject(value.param.projectId);
155-
this.selectTopicOrProject(project);
156-
} else return;
157-
if (value.param.viewId) {
158-
const viewIndex = this.selectedTopicOrProject?.views.findIndex(v => v.id === value.param.viewId);
159-
if (viewIndex !== -1) DashboardStore.setViewIndex(viewIndex);
160-
}
161-
this.hidden = false;
162-
});
163-
}));
136+
// topics hidden for now, see https://camptocamp.atlassian.net/browse/GSNGM-1171
137+
// fetch('./src/sampleData/topics.json').then(topicsResponse =>
138+
// topicsResponse.json().then(topics => {
139+
// this.topics = topics.map(topic => {
140+
// if (topic.geometries) {
141+
// topic.geometries = this.getGeometries(topic.geometries);
142+
// }
143+
// return topic;
144+
// }).sort((a, b) => new Date(b.modified).getTime() - new Date(a.modified).getTime());
145+
// // todo move DashboardStore.topicOrProjectParam.subscribe here
146+
// }));
147+
148+
DashboardStore.topicOrProjectParam.subscribe(async value => {
149+
if (!value) return;
150+
// topics hidden for now, see https://camptocamp.atlassian.net/browse/GSNGM-1171
151+
// if (value.kind === 'topic') {
152+
// removeTopic();
153+
// const topic = this.topics?.find(p => p.id === value.param.topicId);
154+
// this.selectTopicOrProject(topic);
155+
// } else
156+
if (value.kind === 'project') {
157+
removeProject();
158+
const project = await apiClient.getProject(value.param.projectId);
159+
this.selectTopicOrProject(project);
160+
} else return;
161+
if (value.param.viewId) {
162+
const viewIndex = this.selectedTopicOrProject?.views.findIndex(v => v.id === value.param.viewId);
163+
if (viewIndex !== -1) DashboardStore.setViewIndex(viewIndex);
164+
}
165+
this.hidden = false;
166+
});
164167
const recentlyViewed = localStorage.getItem('dashboard_recently_viewed');
165168
if (recentlyViewed) {
166169
this.recentlyViewedIds = JSON.parse(recentlyViewed);
@@ -219,14 +222,15 @@ export class NgmDashboard extends LitElementI18n {
219222
}
220223
}
221224

222-
getGeometries(features: Array<GeoJSON.Feature>) {
223-
return features.map(feature => {
224-
return Object.assign(fromGeoJSON(feature), {
225-
editable: false,
226-
copyable: false,
227-
});
228-
});
229-
}
225+
// topics hidden for now, see https://camptocamp.atlassian.net/browse/GSNGM-1171
226+
// getGeometries(features: Array<GeoJSON.Feature>) {
227+
// return features.map(feature => {
228+
// return Object.assign(fromGeoJSON(feature), {
229+
// editable: false,
230+
// copyable: false,
231+
// });
232+
// });
233+
// }
230234

231235
async fetchAssets(assets: Asset[]): Promise<LayerConfig[]> {
232236
const assetsData: LayerConfig[] = [];
@@ -503,6 +507,7 @@ export class NgmDashboard extends LitElementI18n {
503507
return html`
504508
<div class="ngm-panel-header">
505509
<div class="ngm-dashboard-tabs">
510+
<!-- topics hidden for now, see https://camptocamp.atlassian.net/browse/GSNGM-1171
506511
<div class=${classMap({active: this.activeTab === 'topics'})}
507512
@click=${() => {
508513
this.runIfNotEditCreate(() => {
@@ -512,6 +517,7 @@ export class NgmDashboard extends LitElementI18n {
512517
}}>
513518
${i18next.t('dashboard_topics')}
514519
</div>
520+
-->
515521
<div class=${classMap({active: this.activeTab === 'overview'})}
516522
@click=${() => {
517523
this.runIfNotEditCreate(() => {

‎ui/src/elements/ngm-side-bar.ts

Lines changed: 1 addition & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import '../layers/ngm-layers-sort';
66
import '../layers/ngm-catalog';
77
import './dashboard/ngm-dashboard';
88
import LayersActions from '../layers/LayersActions';
9-
import {COGNITO_VARIABLES, DEFAULT_LAYER_OPACITY, LayerType, SUPPORTED_LANGUAGES} from '../constants';
9+
import {DEFAULT_LAYER_OPACITY, LayerType} from '../constants';
1010
import defaultLayerTree, {LayerConfig} from '../layertree';
1111
import {
1212
addAssetId,
@@ -180,25 +180,12 @@ export class SideBar extends LitElementI18n {
180180
<div class="ngm-share ${classMap({'ngm-active-section': this.activePanel === 'share'})}"
181181
@click=${() => this.togglePanel('share')}>
182182
<div class="ngm-share-icon"></div>
183-
${i18next.t('lsb_share')}
184-
</div>`;
185-
const helpBtn = html`
186-
<div class="ngm-help" @click=${() => (<HTMLInputElement> this.querySelector('.ngm-help-link')).click()}>
187-
<div class="ngm-help-icon"></div>
188-
${i18next.t('lsb_help')}
189-
<a href="/manuals/manual_en.html" target="_blank" .hidden=${true} class="ngm-help-link"></a>
190183
</div>`;
191184
const settingsBtn = html`
192185
<div class="ngm-settings ${classMap({'ngm-active-section': this.activePanel === 'settings'})}"
193186
@click=${() => this.togglePanel('settings')}>
194187
<div class="ngm-settings-icon"></div>
195-
${i18next.t('lsb_settings')}
196188
</div>`;
197-
const authBtn = html`
198-
<ngm-auth class="ngm-user"
199-
endpoint='https://ngm-${COGNITO_VARIABLES.env}.auth.eu-west-1.amazoncognito.com/oauth2/authorize'
200-
clientId=${COGNITO_VARIABLES.clientId}
201-
></ngm-auth>`;
202189
const dataMobileHeader = html`
203190
<div @click=${() => this.hideDataDisplayed = true}
204191
class="ngm-data-catalog-label ${classMap({active: this.hideDataDisplayed})}">
@@ -212,7 +199,6 @@ export class SideBar extends LitElementI18n {
212199
return html`
213200
<div .hidden=${!this.mobileView || !this.mobileShowAll} class="ngm-menu-mobile">
214201
${shareBtn}
215-
${helpBtn}
216202
${settingsBtn}
217203
<!-- required for correct positioning -->
218204
<div></div>
@@ -223,19 +209,15 @@ export class SideBar extends LitElementI18n {
223209
<div class="ngm-dashboard ${classMap({'ngm-active-section': this.activePanel === 'dashboard'})}"
224210
@click=${() => this.togglePanel('dashboard')}>
225211
<div class="ngm-dashboard-icon"></div>
226-
${i18next.t('lsb_dashboard')}
227212
</div>
228213
<div class="ngm-data ${classMap({'ngm-active-section': this.activePanel === 'data'})}"
229214
@click=${() => this.togglePanel('data')}>
230215
<div class="ngm-data-icon"></div>
231-
${i18next.t('lsb_data')}
232216
</div>
233217
<div class="ngm-tools ${classMap({'ngm-active-section': this.activePanel === 'tools'})}"
234218
@click=${() => this.togglePanel('tools', false)}>
235219
<div class="ngm-tools-icon"></div>
236-
${i18next.t('lsb_tools')}
237220
</div>
238-
${this.mobileView ? authBtn : ''}
239221
${!this.mobileView ? shareBtn : ''}
240222
<div .hidden=${!this.mobileView}
241223
class="ngm-mob-menu-toggle"
@@ -244,18 +226,10 @@ export class SideBar extends LitElementI18n {
244226
'ngm-view-all-icon': !this.mobileShowAll,
245227
'ngm-view-less-icon': this.mobileShowAll
246228
})}"></div>
247-
${this.mobileShowAll ? i18next.t('lsb_close') : i18next.t('lsb_view_all')}
248229
</div>
249230
</div>
250231
<div .hidden=${this.mobileView} class="ngm-menu-2">
251-
${authBtn}
252-
${helpBtn}
253232
${settingsBtn}
254-
<div class="ngm-nav-close ${classMap({'ngm-disabled': !this.activePanel})}"
255-
@click=${() => this.togglePanel('')}>
256-
<div class="ngm-nav-close-icon"></div>
257-
${i18next.t('lsb_close')}
258-
</div>
259233
</div>
260234
</div>
261235
<ngm-dashboard class="ngm-side-bar-panel ngm-large-panel"
@@ -293,14 +267,6 @@ export class SideBar extends LitElementI18n {
293267
<div class="ngm-panel-header">${i18next.t('lsb_settings')}
294268
<div class="ngm-close-icon" @click=${() => this.activePanel = ''}></div>
295269
</div>
296-
<div class="language-settings">
297-
<label>${i18next.t('lsb_langs')}</label>
298-
<div id="langs" class="ui horizontal selection list">
299-
${SUPPORTED_LANGUAGES.map(lang => html`
300-
<div class="item lang-${lang}" @click="${() => i18next.changeLanguage(lang)}">${lang.toUpperCase()}</div>
301-
`)}
302-
</div>
303-
</div>
304270
<div class="toolbar-settings">
305271
<label>${i18next.t('lsb_debug_tools')}</label>
306272
<div class="ngm-checkbox ngm-debug-tools-toggle ${classMap({active: this.debugToolsActive})}"

‎ui/src/ngm-app.ts

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,11 @@ import './elements/project-selector';
2121
import './elements/ngm-coordinate-popup';
2222
import './elements/ngm-ion-modal';
2323
import './elements/ngm-wmts-date-picker';
24+
import 'fomantic-ui-css/components/dropdown.js';
2425

2526
import '@geoblocks/cesium-view-cube';
2627

27-
import {DEFAULT_VIEW} from './constants';
28+
import {COGNITO_VARIABLES, DEFAULT_VIEW, SUPPORTED_LANGUAGES} from './constants';
2829

2930
import {setupSearch} from './search.js';
3031
import {addMantelEllipsoid, setupBaseLayers, setupViewer} from './viewer';
@@ -57,6 +58,7 @@ import LocalStorageController from './LocalStorageController';
5758
import DashboardStore from './store/dashboard';
5859
import type {SideBar} from './elements/ngm-side-bar';
5960
import {LayerConfig} from './layertree';
61+
import $ from './jquery';
6062

6163
const SKIP_STEP2_TIMEOUT = 5000;
6264

@@ -347,8 +349,8 @@ export class NgmApp extends LitElementI18n {
347349
(<HTMLElement>document.querySelector('.ngm-cam-lock-info'))?.parentElement?.remove();
348350
});
349351
}
350-
351352
}
353+
352354
if (changedProperties.has('showCesiumToolbar')) {
353355
if (!this.showCesiumToolbar && !this.resolutionScaleRemoveCallback) {
354356
this.setResolutionScale();
@@ -357,6 +359,10 @@ export class NgmApp extends LitElementI18n {
357359
this.resolutionScaleRemoveCallback = undefined;
358360
}
359361
}
362+
363+
this.querySelectorAll('.ui.dropdown').forEach(elem => $(elem).dropdown({
364+
direction: 'downward'
365+
}));
360366
super.updated(changedProperties);
361367
}
362368

@@ -426,6 +432,21 @@ export class NgmApp extends LitElementI18n {
426432
class="ngm-search-icon-mobile ngm-search-icon visible-mobile ${classMap({'active': this.showMobileSearch})}"
427433
@click="${() => this.showMobileSearch = !this.showMobileSearch}"></div>
428434
<ngm-cursor-information class="hidden-mobile" .viewer="${this.viewer}"></ngm-cursor-information>
435+
<div class="ui dropdown ngm-lang-dropdown">
436+
<div class="ngm-lang-title">
437+
${i18next.language?.toUpperCase()}
438+
<div class="ngm-dropdown-icon"></div>
439+
</div>
440+
<div class="menu">
441+
${SUPPORTED_LANGUAGES.map(lang => html`
442+
<div class="item lang-${lang}" @click="${() => i18next.changeLanguage(lang)}">${lang.toUpperCase()}</div>
443+
`)}
444+
</div>
445+
</div>
446+
<ngm-auth class="ngm-user"
447+
endpoint='https://ngm-${COGNITO_VARIABLES.env}.auth.eu-west-1.amazoncognito.com/oauth2/authorize'
448+
clientId=${COGNITO_VARIABLES.clientId}
449+
></ngm-auth>
429450
</header>
430451
<main>
431452
<div class="ui dimmer ngm-main-load-dimmer ${classMap({active: this.loading})}">

‎ui/src/style/header.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ header.mobile-search-active {
5252
margin: 0 10px;
5353
}
5454

55-
@media (max-width: 710px) {
55+
@media (max-width: 760px) {
5656
header > a {
5757
margin-right: 30px;
5858
}

‎ui/src/style/icons.css

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -49,27 +49,13 @@
4949
-webkit-mask: url('./images/i_user.svg') no-repeat center;
5050
}
5151

52-
.ngm-help-icon {
53-
width: 22px;
54-
height: 20px;
55-
mask: url('./images/i_help.svg') no-repeat center;
56-
-webkit-mask: url('./images/i_help.svg') no-repeat center;
57-
}
58-
5952
.ngm-settings-icon {
6053
width: 20px;
6154
height: 20px;
6255
mask: url('./images/i_config.svg') no-repeat center;
6356
-webkit-mask: url('./images/i_config.svg') no-repeat center;
6457
}
6558

66-
.ngm-nav-close-icon {
67-
width: 24px;
68-
height: 24px;
69-
mask: url('./images/i_navigation_closed.svg') no-repeat center;
70-
-webkit-mask: url('./images/i_navigation_closed.svg') no-repeat center;
71-
}
72-
7359
.ngm-zoom-p-icon {
7460
width: 24px;
7561
height: 24px;

0 commit comments

Comments
 (0)