diff --git a/TODO.md b/TODO.md
index c4280a6..36474fc 100644
--- a/TODO.md
+++ b/TODO.md
@@ -8,7 +8,6 @@
| [packages/core-lib/src/Renderer/index.ts](packages/core-lib/src/Renderer/index.ts#L83) | 83 | Remove dependency
| [packages/cli/src/commands/new/index.ts](packages/cli/src/commands/new/index.ts#L57) | 57 | Init database
| [packages/core-server/src/lib/App/App.ts](packages/core-server/src/lib/App/App.ts#L187) | 187 | convert to gzip serve
-| [packages/admin/src/components/ui/AppSelector/AppSelector.ts](packages/admin/src/components/ui/AppSelector/AppSelector.ts#L99) | 99 | Add click event listener to the list item and not the list
| [packages/admin/src/components/ui/ResourcePage/ResourcePage.ts](packages/admin/src/components/ui/ResourcePage/ResourcePage.ts#L130) | 130 | Repair list columns on ResourceTable
| [packages/plugin-core-api/src/v1/controllers/themes/installed.ts](packages/plugin-core-api/src/v1/controllers/themes/installed.ts#L11) | 11 | Move to db call
| [packages/core-server/src/middleware/format/lib/__tests__/Formatter.test.ts](packages/core-server/src/middleware/format/lib/__tests__/Formatter.test.ts#L242) | 242 | core-server.Formatter.sendHTML
diff --git a/packages/admin/src/components/ui/AppIcon/index.ts b/packages/admin/src/components/ui/AppIcon/index.ts
index 281743d..664ede2 100644
--- a/packages/admin/src/components/ui/AppIcon/index.ts
+++ b/packages/admin/src/components/ui/AppIcon/index.ts
@@ -2,7 +2,11 @@ import { customElement, html, LitElement, property } from 'lit-element/lit-eleme
import CSS from './app-icon-css';
-export type Icon = string | { type: string; color: string; background: string };
+export type Icon = string | {
+ type: string;
+ color: string;
+ background: string;
+};
// @ts-ignore
@customElement('ui-app-icon')
@@ -17,11 +21,11 @@ export class AppIcon extends LitElement {
if (!this.icon) return html``;
const icon = typeof this.icon === 'string'
- ? html`
`
+ ? html``
: html`
`;
diff --git a/packages/admin/src/components/ui/AppSelector/AppSelector.ts b/packages/admin/src/components/ui/AppSelector/AppSelector.ts
index 14e47e2..bcafeb0 100644
--- a/packages/admin/src/components/ui/AppSelector/AppSelector.ts
+++ b/packages/admin/src/components/ui/AppSelector/AppSelector.ts
@@ -1,7 +1,7 @@
import { bindAttributes } from '@origami/zen-lib/decorators';
import Fuse from 'fuse.js';
import { customElement, html, LitElement, property } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { repeat } from 'lit-html/directives/repeat';
// @ts-ignore
import { connect } from 'pwa-helpers/connect-mixin';
import { getSidebarItems, toggleAppSelector } from '../../../actions/App';
@@ -81,23 +81,23 @@ export class AppSelector extends connect(store)(LitElement) {
contents = html`
- ${_apps.map((a, i) => {
- return unsafeHTML(`
- -
-
-
- ${a.name}
-
-
- `);
- })}
+ ${repeat(
+ _apps,
+ (i) => i.path,
+ (a, i) => html`
+ -
+
+
+ ${a.name}
+
+
+ `)
+ }
`;
}
-
- // TODO: Add click event listener to the list item and not the list
- return html`
+ return html`
${CSS}
Applications
@@ -121,7 +121,12 @@ export class AppSelector extends connect(store)(LitElement) {
private _stateChanged(state: State) {
- this.apps = state.App.sidebar.items;
+ const _apps = Object.entries(state.Apps.apps).map(([name, a]) => ({
+ icon: a.icon,
+ path: a.uriBase,
+ name: a.name
+ }));
+ this.apps = [..._apps, ...state.App.sidebar.items];
this.open = state.App.appSelector.open;
this._fuse = new Fuse(this.apps, {
keys: ['name']
diff --git a/packages/admin/src/components/ui/AppSelector/app-selector-css.ts b/packages/admin/src/components/ui/AppSelector/app-selector-css.ts
index 533f6df..201b8eb 100644
--- a/packages/admin/src/components/ui/AppSelector/app-selector-css.ts
+++ b/packages/admin/src/components/ui/AppSelector/app-selector-css.ts
@@ -1,3 +1,3 @@
import {html} from 'lit-element';
-export default html``;
diff --git a/packages/admin/src/components/ui/AppSelector/app-selector.scss b/packages/admin/src/components/ui/AppSelector/app-selector.scss
index 1c5dd55..a904806 100644
--- a/packages/admin/src/components/ui/AppSelector/app-selector.scss
+++ b/packages/admin/src/components/ui/AppSelector/app-selector.scss
@@ -1,105 +1,105 @@
@import 'zen-css/import';
-@import 'zen-css/classes/gradients';
@keyframes fade-up {
- from {
- opacity: 0;
- transform: translateY(2rem);
- }
- to {
- opacity: 1;
- transform: none;
- }
+ from {
+ opacity: 0;
+ transform: translateY(2rem);
+ }
+
+ to {
+ opacity: 1;
+ transform: none;
+ }
}
:host {
- @extend %cover;
- position: fixed;
- background-color: var(--color-white);
- text-align: center;
- transition: all 0.35s;
-
- // Closed
- z-index: -1;
+ @extend %cover;
+ position: fixed;
+ background-color: var(--color-white);
+ text-align: center;
+ transition: all 0.35s;
+
+ // Closed
+ z-index: -1;
+ opacity: 0;
+ transform: translateY(1rem);
+
+ zen-icon[type="cross"] {
+ position: absolute;
+ right: var(--size-small);
+ top: var(--size-small);
+ animation-delay: 0.1s;
+ cursor: pointer;
+ }
+
+ h1 {
+ display: inline-block;
+ margin-top: calc(2.5 * var(--size-tiny));
+ }
+
+ h1,
+ zen-icon[type="cross"],
+ zen-input,
+ ul.apps li,
+ span.not-found {
opacity: 0;
- transform: translateY(1rem);
-
- zen-icon[type="cross"] {
- position: absolute;
- right: var(--size-small);
- top: var(--size-small);
- animation-delay: 0.1s;
- }
-
- h1 {
- display: inline-block;
- margin-top: calc(2.5 * var(--size-tiny));
+ animation-name: fade-up;
+ animation-fill-mode: forwards;
+ animation-duration: 0.35s;
+ animation-timing-function: ease-out;
+ }
+
+ span.not-found {
+ display: inline-block;
+ animation-duration: 0.2s;
+ color: var(--color-grey-500);
+ }
+
+ .wrapper {
+ max-width: 60rem;
+ margin: auto;
+
+ zen-input {
+ margin-top: var(--size-small);
+ margin-bottom: var(--size-main);
+ animation-delay: 0.12s;
}
- h1, zen-icon[type="cross"], zen-input, ul.apps li, span.not-found {
- opacity: 0;
- animation-name: fade-up;
- animation-fill-mode: forwards;
- animation-duration: 0.35s;
- animation-timing-function: ease-out;
- }
-
- span.not-found {
- display: inline-block;
- animation-duration: 0.2s;
- color: var(--color-grey-500);
- }
-
- .wrapper {
- max-width: 60rem;
- margin: auto;
-
- zen-input {
- margin-top: var(--size-small);
- margin-bottom: var(--size-main);
- animation-delay: 0.12s;
+ ul.apps {
+ display: grid;
+ grid-template-columns: repeat(6, 1fr);
+ grid-gap: var(--size-small);
+ list-style: none;
+ padding: 0;
+
+ li {
+ overflow: hidden;
+ }
+
+ a {
+ display: block;
+ text-decoration: none;
+ @extend %padding-v-tiny;
+
+ ui-app-icon {
+ @extend %size-main;
+ transition: all calc(var(--transition-time) / 2);
}
- ul.apps {
- display: grid;
- grid-template-columns: repeat(6, 1fr);
- grid-gap: var(--size-small);
- list-style: none;
- padding: 0;
-
- a {
- width: 100%;
- display: block;
- }
- .app {
- display: block;
- position: relative;
- @extend %rounded;
-
- &:before {
- display: block;
- content: '';
- padding-bottom: 100%;
- }
-
- zen-icon {
- @extend %center;
- width: 60%;
- height: 60%;
- transition: all calc(var(--transition-time) / 2);
- }
-
- &:hover zen-icon {
- transform: translate(-50%, -50%) scale(1.2);
- }
- }
+ &:hover ui-app-icon {
+ transform: scale(1.1);
}
+ small {
+ display: block;
+ @extend %ellipsis;
+ }
+ }
}
-
+ }
}
:host-context([open]) {
- z-index: 999;
- opacity: 1;
- transform: none;
+ z-index: 999;
+ opacity: 1;
+ transform: none;
}
diff --git a/packages/plugin-setup/public/setup.css b/packages/plugin-setup/public/setup.css
index 4b5755c..f403e73 100644
--- a/packages/plugin-setup/public/setup.css
+++ b/packages/plugin-setup/public/setup.css
@@ -1,9 +1,9 @@
.create-user.card .form, .create-user.card .success, .create-user.card .fail {
position: absolute;
- width: 100%;
- height: 100%;
top: 0;
- left: 0; }
+ left: 0;
+ width: 100%;
+ height: 100%; }
body {
--input-height: var(--size-main); }