-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(admin): added search and search to media grid
- Loading branch information
1 parent
27380fc
commit 4991b8c
Showing
15 changed files
with
200 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
packages/admin/src/components/pages/Admin/Media/page-media-css.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import {css} from 'lit-element'; | ||
| // tslint:disable-next-line no-default-export export-name | ||
| export default css`.card{background:var(--card-bg, var(--color-white, #fff));border:var(--card-border, );border-radius:var(--card-border-radius, var(--border-radius, 0.4rem));padding:var(--card-padding, var(--size-main, 4rem));box-shadow:var(--card-shadow, var(--shadow-main-soft, 0 var(--size-tiny, 1rem) var(--size-main, 4rem) var(--color-main-soft, rgba(105,58,145,0.1))))}:host ui-media-grid{position:absolute;top:0;left:0;width:100%;height:100%}.card.hover{background-color:transparent;box-shadow:none;transition:all var(--transition-time)}.card.hover:hover{background-color:var(--card-bg);box-shadow:var(--card-shadow)}@keyframes fade-slide-up{from{margin-top:var(--size-large);opacity:0}to{margin-top:0;opacity:1}}:host{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;padding:var(--size-small)} | ||
| export default css`.card{background:var(--card-bg, var(--color-white, #fff));border:var(--card-border, );border-radius:var(--card-border-radius, var(--border-radius, 0.4rem));padding:var(--card-padding, var(--size-main, 4rem));box-shadow:var(--card-shadow, var(--shadow-main-soft, 0 var(--size-tiny, 1rem) var(--size-main, 4rem) var(--color-main-soft, rgba(105,58,145,0.1))))}.card.hover{background-color:transparent;box-shadow:none;transition:all var(--transition-time)}.card.hover:hover{background-color:var(--card-bg);box-shadow:var(--card-shadow)}@keyframes fade-slide-up{from{margin-top:var(--size-large);opacity:0}to{margin-top:0;opacity:1}}:host{position:absolute;top:0;left:0;right:0;bottom:0;overflow-y:auto;padding:var(--size-small)} | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,8 +10,4 @@ | |
| bottom: 0; | ||
| overflow-y: auto; | ||
| padding: var(--size-small); | ||
|
|
||
| ui-media-grid { | ||
| @extend %cover; | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| import {css} from 'lit-element'; | ||
| // tslint:disable-next-line no-default-export export-name | ||
| export default css`.card{background:var(--card-bg, var(--color-white, #fff));border:var(--card-border, );border-radius:var(--card-border-radius, var(--border-radius, 0.4rem));padding:var(--card-padding, var(--size-main, 4rem));box-shadow:var(--card-shadow, var(--shadow-main-soft, 0 var(--size-tiny, 1rem) var(--size-main, 4rem) var(--color-main-soft, rgba(105,58,145,0.1))))}:host,:host *{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline}:host .drop-zone,:host .drop-zone:before,:host .drop-zone:after{border-radius:var(--border-radius)}:host ul li .details span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host zen-loading,:host ul li zen-icon.tick,:host ul li ui-upload-progress,:host .drop-zone .center{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}:host ul li:before,:host ul li.active:after,:host ul li .img ui-image,:host .drop-zone:before,:host .drop-zone:after{position:absolute;top:0;left:0;width:100%;height:100%}:host ul li .details ui-avatar{width:var(--size-medium);height:var(--size-medium)}.card.hover{background-color:transparent;box-shadow:none;transition:all var(--transition-time)}.card.hover:hover{background-color:var(--card-bg);box-shadow:var(--card-shadow)}@keyframes fade-slide-up{from{margin-top:var(--size-large);opacity:0}to{margin-top:0;opacity:1}}:host{display:block;--media-grid-columns: 5;--media-grid-gap: var(--size-medium)}:host zen-loading{--loading-size: var(--size-large)}:host ul{--card-padding: 0;display:grid;grid-template-columns:repeat(var(--media-grid-columns), 1fr);grid-gap:var(--media-grid-gap);list-style:none}:host ul li{position:relative;background:var(--color-white);overflow:hidden}:host ul li zen-icon.tick{width:40%;height:40%;transform:translate(-50%, -50%) scale(0);transition:all calc(var(--transition-time) / 2) var(--ease-out-back);z-index:1}:host ul li ui-upload-progress{transform:translate(-50%, -50%) scale(1.1);opacity:0;margin-top:calc(-1 * 5rem / 2);transition:all calc(var(--transition-time) / 2) ease-out}:host ul li:before{content:'';border:2px solid var(--color-active);opacity:0;transition:opacity calc(var(--transition-time) / 2) ease-out;box-sizing:border-box;z-index:1;visibility:hidden}:host ul li:after{content:'';opacity:0;background:var(--color-active);transition:opacity calc(var(--transition-time) / 2) ease-out}:host ul li.active zen-icon.tick{transform:translate(-50%, -50%) scale(1)}:host ul li.active:before{visibility:visible;opacity:1}:host ul li.active:after{opacity:0.5}:host ul li .img{position:relative}:host ul li .img:before{content:'';display:block;padding-bottom:56.25%}:host ul li .img ui-image{transition:all var(--transition-time) ease-out}:host ul li.uploading ui-image{transform:scale(1.2);filter:brightness(0.5)}:host ul li.uploading ui-upload-progress{transform:translate(-50%, -50%) scale(1);opacity:1}:host ul li .details{position:relative;display:flex;align-items:center;padding:var(--size-tiny) var(--size-small);height:5rem;background:var(--color-white)}:host ul li .details span{display:block;flex:1;margin-right:var(--size-tiny);font-size:var(--font-size-small);color:var(--color-grey-300)}:host ul li .details ui-avatar{flex-grow:0}:host .drop-zone{width:0;height:0}:host .drop-zone:before,:host .drop-zone:after{box-sizing:border-box;content:'';visibility:hidden;opacity:0;transition:all calc(var(--transition-time)) var(--ease-out-back)}:host .drop-zone:before{background:var(--color-active)}:host .drop-zone:after{border:2px dashed var(--color-active)}:host .drop-zone .center{visibility:hidden;font-size:var(--font-size-large)}:host .drop-zone .center *{display:block;margin:auto;transform:translateY(var(--size-main));transition:transform var(--transition-time) ease-out;opacity:0}:host .drop-zone .center span{transition-delay:calc(var(--transition-time) / 8)}:host .drop-zone.show:before{visibility:visible;opacity:0.5}:host .drop-zone.show:after{visibility:visible;opacity:1}:host .drop-zone.empty .center{color:var(--color-grey-200)}:host .drop-zone.show .center{color:var(--color-white)}:host .drop-zone.show .center,:host .drop-zone.empty .center{visibility:visible}:host .drop-zone.show .center *,:host .drop-zone.empty .center *{transform:none;opacity:1} | ||
| export default css`.card{background:var(--card-bg, var(--color-white, #fff));border:var(--card-border, );border-radius:var(--card-border-radius, var(--border-radius, 0.4rem));padding:var(--card-padding, var(--size-main, 4rem));box-shadow:var(--card-shadow, var(--shadow-main-soft, 0 var(--size-tiny, 1rem) var(--size-main, 4rem) var(--color-main-soft, rgba(105,58,145,0.1))))}:host,:host *{box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;margin:0;padding:0;border:0;outline:0;font-size:100%;font:inherit;vertical-align:baseline}:host .drop-zone,:host .drop-zone:before,:host .drop-zone:after{border-radius:var(--border-radius)}:host ul li .details span{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host zen-loading,:host ul li zen-icon.tick,:host ul li ui-upload-progress,:host .drop-zone .center{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}:host ul li:before,:host ul li.active:after,:host ul li .img ui-image,:host .drop-zone:before,:host .drop-zone:after{position:absolute;top:0;left:0;width:100%;height:100%}:host ul li .details ui-avatar{width:var(--size-medium);height:var(--size-medium)}.card.hover{background-color:transparent;box-shadow:none;transition:all var(--transition-time)}.card.hover:hover{background-color:var(--card-bg);box-shadow:var(--card-shadow)}@keyframes fade-slide-up{from{margin-top:var(--size-large);opacity:0}to{margin-top:0;opacity:1}}:host{display:block;--media-grid-columns: 5;--media-grid-gap: var(--size-medium)}:host zen-loading{--loading-size: var(--size-large)}:host ui-search{display:block;margin:auto;margin-bottom:var(--size-small);max-width:60rem}:host ul{--card-padding: 0;display:grid;grid-template-columns:repeat(var(--media-grid-columns), 1fr);grid-gap:var(--media-grid-gap);list-style:none}:host ul li{position:relative;background:var(--color-white);overflow:hidden}:host ul li zen-icon.tick{width:40%;height:40%;transform:translate(-50%, -50%) scale(0);transition:all calc(var(--transition-time) / 2) var(--ease-out-back);z-index:1}:host ul li ui-upload-progress{transform:translate(-50%, -50%) scale(1.1);opacity:0;margin-top:calc(-1 * 5rem / 2);transition:all calc(var(--transition-time) / 2) ease-out}:host ul li:before{content:'';border:2px solid var(--color-active);opacity:0;transition:opacity calc(var(--transition-time) / 2) ease-out;box-sizing:border-box;z-index:1;visibility:hidden}:host ul li:after{content:'';opacity:0;background:var(--color-active);transition:opacity calc(var(--transition-time) / 2) ease-out}:host ul li.active zen-icon.tick{transform:translate(-50%, -50%) scale(1)}:host ul li.active:before{visibility:visible;opacity:1}:host ul li.active:after{opacity:0.5}:host ul li .img{position:relative}:host ul li .img:before{content:'';display:block;padding-bottom:56.25%}:host ul li .img ui-image{transition:all var(--transition-time) ease-out}:host ul li.uploading ui-image{transform:scale(1.2);filter:brightness(0.5)}:host ul li.uploading ui-upload-progress{transform:translate(-50%, -50%) scale(1);opacity:1}:host ul li .details{position:relative;display:flex;align-items:center;padding:var(--size-tiny) var(--size-small);height:5rem;background:var(--color-white)}:host ul li .details span{display:block;flex:1;margin-right:var(--size-tiny);font-size:var(--font-size-small);color:var(--color-grey-300)}:host ul li .details ui-avatar{flex-grow:0}:host .drop-zone{width:0;height:0}:host .drop-zone:before,:host .drop-zone:after{box-sizing:border-box;content:'';visibility:hidden;opacity:0;transition:all calc(var(--transition-time)) var(--ease-out-back)}:host .drop-zone:before{background:var(--color-active)}:host .drop-zone:after{border:2px dashed var(--color-active)}:host .drop-zone .center{visibility:hidden;font-size:var(--font-size-large)}:host .drop-zone .center *{display:block;margin:auto;transform:translateY(var(--size-main));transition:transform var(--transition-time) ease-out;opacity:0}:host .drop-zone .center span{transition-delay:calc(var(--transition-time) / 8)}:host .drop-zone.show:before{visibility:visible;opacity:0.5}:host .drop-zone.show:after{visibility:visible;opacity:1}:host .drop-zone.empty .center{color:var(--color-grey-200)}:host .drop-zone.show .center{color:var(--color-white)}:host .drop-zone.show .center,:host .drop-zone.empty .center{visibility:visible}:host .drop-zone.show .center *,:host .drop-zone.empty .center *{transform:none;opacity:1} | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| import { ZenInput } from '@origami/zen'; | ||
| import Fuse from 'fuse.js'; | ||
| import { customElement, html, LitElement, property } from 'lit-element'; | ||
| import CSS from './search-css'; | ||
|
|
||
| export const SEARCH_EVENT_FILTERED = 'filtered'; | ||
|
|
||
| @customElement('ui-search') | ||
| export class Search<FilterItem> extends LitElement { | ||
| public static styles = [CSS]; | ||
|
|
||
|
|
||
| /** | ||
| * The items to filter | ||
| */ | ||
| @property() | ||
| public set items(v) { | ||
| this._items = v; | ||
| } | ||
| public get items() { | ||
| return this._items; | ||
| } | ||
|
|
||
| /** | ||
| * The text entered to filter the items | ||
| */ | ||
| @property() | ||
| get filter() { | ||
| return this._filter; | ||
| } | ||
| set filter(v) { | ||
| this._filter = v; | ||
| if (!this._fuse || !v) this._filtered = []; | ||
| else this._filtered = this._fuse.search(v); | ||
|
|
||
| this.dispatchEvent(new CustomEvent( | ||
| SEARCH_EVENT_FILTERED, | ||
| {detail: this.filter ? this._filtered : this.items} | ||
| )); | ||
| } | ||
|
|
||
|
|
||
| get filtered() { | ||
| if (!this.filter) return this.items; | ||
| return this._filtered; | ||
| } | ||
|
|
||
|
|
||
| @property({type: String}) | ||
| public placeholder: string = 'Search…'; | ||
|
|
||
| /** | ||
| * Keys to pass into Fuse.js to lookup on the items | ||
| */ | ||
| @property({type: Array}) | ||
| public keys: (keyof FilterItem)[] = []; | ||
|
|
||
| @property() | ||
| private _filtered: FilterItem[] = []; | ||
|
|
||
| private _items: FilterItem[] = []; | ||
|
|
||
| @property() | ||
| private _fuse?: Fuse<FilterItem>; | ||
| private _filter: string | null = null; | ||
|
|
||
|
|
||
| public render() { | ||
| return html` | ||
| <zen-input | ||
| icon="search" | ||
| iconColor="red" | ||
| placeholder=${this.placeholder} | ||
| @change=${this._onChange} | ||
| ></zen-input>`; | ||
| } | ||
|
|
||
|
|
||
| public updated(props: Map<keyof Search<FilterItem>, string>) { | ||
| if (props.has('items') || props.has('keys')) { | ||
| this._fuse = new Fuse(this.items, { | ||
| keys: this.keys | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| private _onChange(e: Event) { | ||
| this.filter = (e.target as ZenInput).value; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| declare global { | ||
| interface HTMLElementTagNameMap { | ||
| 'ui-search': Search<any>; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import {css} from 'lit-element'; | ||
| // tslint:disable-next-line no-default-export export-name | ||
| export default css`:host{display:block}:host zen-input{width:100%} | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| :host { | ||
| display: block; | ||
|
|
||
| zen-input { | ||
| width: 100%; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.