From cbe23ace8541d117fff3a4d7bde9fca4be528ce8 Mon Sep 17 00:00:00 2001 From: Tristan Matthias Date: Thu, 17 Jan 2019 00:30:56 +1100 Subject: [PATCH] fix(admin): app selector now working again --- TODO.md | 1 - .../admin/src/components/ui/AppIcon/index.ts | 10 +- .../components/ui/AppSelector/AppSelector.ts | 35 ++-- .../ui/AppSelector/app-selector-css.ts | 2 +- .../ui/AppSelector/app-selector.scss | 176 +++++++++--------- packages/plugin-setup/public/setup.css | 6 +- 6 files changed, 119 insertions(+), 111 deletions(-) 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` `; } - - // 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); }