yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Removes the Media "collection-view" folder

Browse Source 
Moves/combines the components to/with
the "media/collections/views" folder/files.
This commit is contained in:
leekelleher
2024-02-21 09:27:07 +00:00
parent 3d25560143
commit 30b3619d17
5 changed files with 0 additions and 402 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/collection-view-media-test.element.ts
View File

@@ -1,19 +0,0 @@
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, LitElement, customElement } from '@umbraco-cms/backoffice/external/lit';
@customElement('umb-collection-view-media-test')
export class UmbCollectionViewMediaTestElement extends LitElement {
render() {
return html`umb-collection-view-media-test`;
}
static styles = [UmbTextStyles, css``];
}
export default UmbCollectionViewMediaTestElement;
declare global {
interface HTMLElementTagNameMap {
'umb-collection-view-media-test': UmbCollectionViewMediaTestElement;
}
}

59
src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/manifests.ts
View File

@@ -1,59 +0,0 @@
import type { ManifestCollectionView } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestCollectionView> = [
{
type: 'collectionView',
alias: 'Umb.CollectionView.MediaGrid',
name: 'Media Grid Collection View',
js: () => import('./media-grid-collection-view.element.js'),
weight: 300,
meta: {
label: 'Grid',
icon: 'icon-grid',
pathName: 'grid',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceEntityType',
match: 'media',
},
],
},
{
type: 'collectionView',
alias: 'Umb.CollectionView.MediaTable',
name: 'Media Table Collection View',
js: () => import('./media-table-collection-view.element.js'),
weight: 200,
meta: {
label: 'Table',
icon: 'icon-box',
pathName: 'table',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceEntityType',
match: 'media',
},
],
},
{
type: 'collectionView',
alias: 'Umb.CollectionView.Test',
name: 'Test',
elementName: 'umb-collection-view-media-test',
js: () => import('./collection-view-media-test.element.js'),
weight: 100,
meta: {
label: 'Test',
icon: 'icon-newspaper',
pathName: 'test',
},
conditions: [
{
alias: 'Umb.Condition.WorkspaceEntityType',
match: 'media',
},
],
},
];

183
src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-grid-collection-view.element.ts
View File

@@ -1,183 +0,0 @@
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbUniqueTreeItemModel } from '@umbraco-cms/backoffice/tree';
@customElement('umb-media-grid-collection-view')
export class UmbMediaGridCollectionViewElement extends UmbLitElement {
@state()
private _mediaItems?: Array<UmbUniqueTreeItemModel>;
@state()
private _selection: Array<string | null> = [];
private _collectionContext?: UmbDefaultCollectionContext<UmbUniqueTreeItemModel, any>;
constructor() {
super();
document.addEventListener('dragenter', this._handleDragEnter.bind(this));
document.addEventListener('dragleave', this._handleDragLeave.bind(this));
document.addEventListener('drop', this._handleDrop.bind(this));
this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
this._collectionContext = instance;
this._observeCollectionContext();
});
}
disconnectedCallback(): void {
super.disconnectedCallback();
document.removeEventListener('dragenter', this._handleDragEnter.bind(this));
document.removeEventListener('dragleave', this._handleDragLeave.bind(this));
document.removeEventListener('drop', this._handleDrop.bind(this));
}
private _handleDragEnter() {
this.toggleAttribute('dragging', true);
}
private _handleDragLeave() {
this.toggleAttribute('dragging', false);
}
private _handleDrop(e: DragEvent) {
e.preventDefault();
this.toggleAttribute('dragging', false);
}
private _observeCollectionContext() {
if (!this._collectionContext) return;
this.observe(this._collectionContext.items, (mediaItems) => {
this._mediaItems = [...mediaItems].sort((a, b) => (a.hasChildren === b.hasChildren ? 0 : a ? -1 : 1));
});
this.observe(this._collectionContext.selection.selection, (selection) => {
this._selection = selection;
});
}
private _handleOpenItem(mediaItem: UmbUniqueTreeItemModel) {
//TODO: Fix when we have dynamic routing
history.pushState(null, '', 'section/media/media/edit/' + mediaItem.unique);
}
private _handleSelect(mediaItem: UmbUniqueTreeItemModel) {
if (mediaItem.unique) {
this._collectionContext?.selection.select(mediaItem.unique);
}
}
private _handleDeselect(mediaItem: UmbUniqueTreeItemModel) {
if (mediaItem.unique) {
this._collectionContext?.selection.deselect(mediaItem.unique);
}
}
private _isSelected(mediaItem: UmbUniqueTreeItemModel) {
if (mediaItem.unique) {
return this._selection.includes(mediaItem.unique);
}
return false;
}
private _renderMediaItem(item: UmbUniqueTreeItemModel) {
const name = item.name || '';
//TODO: fix the file extension when media items have a file extension.
return html`<uui-card-media
selectable
?select-only=${this._selection && this._selection.length > 0}
?selected=${this._isSelected(item)}
@open=${() => this._handleOpenItem(item)}
@selected=${() => this._handleSelect(item)}
@deselected=${() => this._handleDeselect(item)}
class="media-item"
.fileExt=${item.hasChildren ? '' : 'image'}
name=${name}></uui-card-media>`;
}
render() {
return html`
<uui-file-dropzone
id="dropzone"
multiple
@file-change=${(e: any) => console.log(e)}
label="Drop files here"
accept=""></uui-file-dropzone>
<div id="media-files">
${this._mediaItems
? repeat(
this._mediaItems,
(file, index) => (file.unique || '') + index,
(file) => this._renderMediaItem(file),
)
: ''}
</div>
`;
}
static styles = [
UmbTextStyles,
css`
:host {
display: flex;
flex-direction: column;
box-sizing: border-box;
position: relative;
height: 100%;
width: 100%;
padding: var(--uui-size-space-3) var(--uui-size-space-6);
}
:host([dragging]) #dropzone {
opacity: 1;
pointer-events: all;
}
[dropzone] {
opacity: 0;
}
#dropzone {
opacity: 0;
pointer-events: none;
display: block;
position: absolute;
inset: 0px;
z-index: 100;
backdrop-filter: opacity(1); /* Removes the built in blur effect */
border-radius: var(--uui-border-radius);
overflow: clip;
border: 1px solid var(--uui-color-focus);
}
#dropzone:after {
content: '';
display: block;
position: absolute;
inset: 0;
border-radius: var(--uui-border-radius);
background-color: var(--uui-color-focus);
opacity: 0.2;
}
#media-folders {
margin-bottom: var(--uui-size-space-5);
}
#media-folders,
#media-files {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fill, 200px);
gap: var(--uui-size-space-5);
}
.media-item img {
object-fit: contain;
}
`,
];
}
export default UmbMediaGridCollectionViewElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-grid-collection-view': UmbMediaGridCollectionViewElement;
}
}

139
src/Umbraco.Web.UI.Client/src/packages/media/media/collection-view/media-table-collection-view.element.ts
View File

@@ -1,139 +0,0 @@
import type { UmbMediaDetailModel } from '../index.js';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import type {
UmbTableColumn,
UmbTableConfig,
UmbTableDeselectedEvent,
UmbTableElement,
UmbTableItem,
UmbTableOrderedEvent,
UmbTableSelectedEvent,
} from '@umbraco-cms/backoffice/components';
import type { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
import { UMB_DEFAULT_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@customElement('umb-media-table-collection-view')
export class UmbMediaTableCollectionViewElement extends UmbLitElement {
@state()
private _mediaItems?: Array<UmbMediaDetailModel>;
@state()
private _tableConfig: UmbTableConfig = {
allowSelection: true,
};
@state()
private _tableColumns: Array<UmbTableColumn> = [
{
name: 'Name',
alias: 'mediaName',
},
];
@state()
private _tableItems: Array<UmbTableItem> = [];
@state()
private _selection: Array<string | null> = [];
private _collectionContext?: UmbDefaultCollectionContext<UmbMediaDetailModel, any>;
constructor() {
super();
this.consumeContext(UMB_DEFAULT_COLLECTION_CONTEXT, (instance) => {
this._collectionContext = instance;
this._observeCollectionContext();
});
}
private _observeCollectionContext() {
if (!this._collectionContext) return;
this.observe(this._collectionContext.items, (nodes) => {
this._mediaItems = nodes;
this._createTableItems(this._mediaItems);
});
this.observe(this._collectionContext.selection.selection, (selection) => {
this._selection = selection;
});
}
private _createTableItems(mediaItems: Array<any>) {
// TODO: this should use the MediaDetails type, but for now that results in type errors.
// TODO: I guess the type error will go away when we get an entity based MediaDetails model instead of tree based.
this._tableItems = mediaItems.map((item) => {
return {
id: item.id,
data: [
{
columnAlias: 'mediaName',
value: item.name || 'Untitled',
},
],
};
});
}
private _handleSelect(event: UmbTableSelectedEvent) {
event.stopPropagation();
const table = event.target as UmbTableElement;
const selection = table.selection;
this._collectionContext?.selection.setSelection(selection);
}
private _handleDeselect(event: UmbTableDeselectedEvent) {
event.stopPropagation();
const table = event.target as UmbTableElement;
const selection = table.selection;
this._collectionContext?.selection.setSelection(selection);
}
private _handleOrdering(event: UmbTableOrderedEvent) {
const table = event.target as UmbTableElement;
const orderingColumn = table.orderingColumn;
const orderingDesc = table.orderingDesc;
console.log(`fetch media items, order column: ${orderingColumn}, desc: ${orderingDesc}`);
}
render() {
return html`
<umb-table
.config=${this._tableConfig}
.columns=${this._tableColumns}
.items=${this._tableItems}
.selection=${this._selection}
@selected="${this._handleSelect}"
@deselected="${this._handleDeselect}"
@ordered="${this._handleOrdering}"></umb-table>
`;
}
static styles = [
UmbTextStyles,
css`
:host {
display: block;
box-sizing: border-box;
height: 100%;
width: 100%;
padding: var(--uui-size-space-3) var(--uui-size-space-6);
}
/* TODO: Should we have embedded padding in the table component? */
umb-table {
padding: 0; /* To fix the embedded padding in the table component. */
}
`,
];
}
export default UmbMediaTableCollectionViewElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-table-collection-view': UmbMediaTableCollectionViewElement;
}
}

2
src/Umbraco.Web.UI.Client/src/packages/media/media/manifests.ts
View File

@@ -1,4 +1,3 @@
import { manifests as collectionViewManifests } from './collection-view/manifests.js';
import { manifests as collectionManifests } from './collection/manifests.js';
import { manifests as entityActionsManifests } from './entity-actions/manifests.js';
import { manifests as entityBulkActionsManifests } from './entity-bulk-actions/manifests.js';
@@ -10,7 +9,6 @@ import { manifests as userPermissionManifests } from './user-permissions/manifes
import { manifests as workspaceManifests } from './workspace/manifests.js';
export const manifests = [
...collectionViewManifests,
...collectionManifests,
...entityActionsManifests,
...entityBulkActionsManifests,