90 lines
2.6 KiB
Plaintext
90 lines
2.6 KiB
Plaintext
import Component from '@glimmer/component';
|
|
import { service } from '@ember/service';
|
|
import { action } from '@ember/object';
|
|
import { fn } from '@ember/helper';
|
|
import { on } from '@ember/modifier';
|
|
import Icon from '#components/icon';
|
|
import { htmlSafe } from '@ember/template';
|
|
|
|
export default class ListsIndexTemplate extends Component {
|
|
@service storage;
|
|
@service router;
|
|
@service mapUi;
|
|
|
|
styleFor(color) {
|
|
const finalColor =
|
|
color ||
|
|
getComputedStyle(document.documentElement)
|
|
.getPropertyValue('--default-list-color')
|
|
.trim();
|
|
return htmlSafe(`background-color: ${finalColor}`);
|
|
}
|
|
|
|
@action
|
|
selectList(listId) {
|
|
this.router.transitionTo('lists.list', listId);
|
|
}
|
|
|
|
@action
|
|
close() {
|
|
this.router.transitionTo('index');
|
|
}
|
|
|
|
@action
|
|
backToMenu() {
|
|
this.router.transitionTo('menu');
|
|
}
|
|
|
|
<template>
|
|
{{#if this.mapUi.isSidebarVisible}}
|
|
<div class="sidebar">
|
|
<div class="sidebar-header has-back-btn">
|
|
<button type="button" class="back-btn" {{on "click" this.backToMenu}}>
|
|
<Icon @name="arrow-left" @size={{20}} @color="#333" />
|
|
</button>
|
|
<h2 class="sidebar-header-text-centered">
|
|
<span class="sidebar-header-icon-wrapper">
|
|
<Icon @name="bookmark" @size={{20}} @color="#898989" />
|
|
</span>
|
|
Collections
|
|
</h2>
|
|
<button type="button" class="close-btn" {{on "click" this.close}}>
|
|
<Icon @name="x" @size={{20}} @color="#333" />
|
|
</button>
|
|
</div>
|
|
|
|
<div class="sidebar-content">
|
|
<ul class="places-list">
|
|
{{#each this.storage.lists as |list|}}
|
|
<li>
|
|
<button
|
|
type="button"
|
|
class="lists-index-item"
|
|
{{on "click" (fn this.selectList list.id)}}
|
|
>
|
|
<div class="lists-index-item-left">
|
|
{{! template-lint-disable no-inline-styles }}
|
|
<span
|
|
class="list-color-dot"
|
|
style={{this.styleFor list.color}}
|
|
></span>
|
|
<div class="lists-index-name">{{list.title}}</div>
|
|
</div>
|
|
<div class="lists-index-count">
|
|
{{#if list.placeRefs.length}}
|
|
{{list.placeRefs.length}}
|
|
places
|
|
{{else}}
|
|
empty
|
|
{{/if}}
|
|
</div>
|
|
</button>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
</template>
|
|
}
|