Skip to content

Commit

Permalink
Merge branch 'MWPW-163214' of github.com:adobecom/mas into MWPW-163759
Browse files Browse the repository at this point in the history
  • Loading branch information
@yesil
yesil committed Dec 6, 2024
2 parents 33a83f8 + d324e82 commit 604aa36
Show file tree
Hide file tree
Showing 22 changed files with 1,672 additions and 538 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,8 @@
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
669 changes: 383 additions & 286 deletions studio/libs/swc.js
View file

Large diffs are not rendered by default.

13 changes: 12 additions & 1 deletion studio/src/aem/aem-fragments.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,9 +105,20 @@ class AemFragments extends LitElement {
const ignore = window.localStorage.getItem('ignore_folders') || [
'images',
];
return children
const topFolders = children
.map((folder) => folder.name)
.filter((child) => !ignore.includes(child));

// Dispatch a custom event with the top folders
this.dispatchEvent(
new CustomEvent('top-folders-loaded', {
detail: { topFolders },
bubbles: true,
composed: true,
}),
);

return topFolders;
}

async addToCache(fragments) {
Expand Down
87 changes: 43 additions & 44 deletions studio/src/aem/content-navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ class ContentNavigation extends LitElement {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 16px;
gap: 10px;
flex-wrap: wrap;
}
.divider {
Expand All @@ -35,6 +37,17 @@ class ContentNavigation extends LitElement {
sp-action-bar[open] {
display: flex;
}
#toolbar-actions {
display: flex;
gap: 10px;
justify-self: end;
margin: 0 0 0 auto;
& sp-button {
white-space: nowrap;
}
}
`;
}

Expand Down Expand Up @@ -69,11 +82,19 @@ class ContentNavigation extends LitElement {
connectedCallback() {
super.connectedCallback();
this.addEventListener('toggle-filter-panel', this.toggleFilterPanel);
document.addEventListener(
'folder-change',
this.handleFolderChange.bind(this),
);
this.registerToSource();
}

disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener(
'folder-change',
this.handleFolderChange.bind(this),
);
this.unregisterFromSource();
}

Expand Down Expand Up @@ -133,38 +154,18 @@ class ContentNavigation extends LitElement {
});
}

handleTopFolderChange(event) {
this.selectTopFolder(event.target.value);
}

get topFolderPicker() {
return this.shadowRoot.querySelector('sp-picker');
handleFolderChange(event) {
const { value, label } = event.detail;
this.processFolderSelection(value);
}

toggleTopFoldersDisabled(disabled) {
this.topFolderPicker.disabled = disabled;
}

renderTopFolders() {
if (!this.topFolders) return '';
const initialValue =
this.#initialFolder && this.topFolders.includes(this.#initialFolder)
? this.#initialFolder
: 'ccd';
return html`<sp-picker
@change=${this.handleTopFolderChange}
label="TopFolder"
class="topFolder"
size="m"
value="${initialValue}"
>
${this.topFolders.map(
(folder) =>
html`<sp-menu-item value="${folder}">
${folder.toUpperCase()}
</sp-menu-item>`,
)}
</sp-picker>`;
processFolderSelection(folderValue) {
this.selectTopFolder(folderValue);
this.source.path = folderValue;
pushState({
path: this.source.path,
query: this.source.searchText,
});
}

updated(changedProperties) {
Expand All @@ -173,7 +174,7 @@ class ContentNavigation extends LitElement {
sessionStorage.setItem(MAS_RENDER_MODE, this.mode);
}
this.forceUpdate();
this.selectTopFolder(this.topFolderPicker?.value);
this.selectTopFolder(this.folderValue);
}

get currentRenderer() {
Expand All @@ -193,7 +194,6 @@ class ContentNavigation extends LitElement {
if (this.#initFromFragmentId && !this.#initialFolder) return '';
this.#initFromFragmentId = false;
return html`<div id="toolbar">
${this.renderTopFolders()}
<div class="divider"></div>
${this.actions}
</div>
Expand All @@ -212,7 +212,7 @@ class ContentNavigation extends LitElement {
if (!this.inSelection) {
this.source.clearSelection();
}
this.toggleTopFoldersDisabled(this.inSelection);
// this.toggleTopFoldersDisabled(this.inSelection);
this.notify();
}

Expand Down Expand Up @@ -292,35 +292,34 @@ class ContentNavigation extends LitElement {
return html`<mas-filter-toolbar
searchText=${this.source.searchText}
></mas-filter-toolbar>
<sp-action-group emphasized>
<slot name="toolbar-actions"></slot>
<sp-action-button
emphasized
<div id="toolbar-actions">
<sp-button
variant="accent"
style=${inNoSelectionStyle}
disabled
>
<sp-icon-new-item slot="icon"></sp-icon-new-item>
<sp-icon-add slot="icon"></sp-icon-add>
Create New Card
</sp-action-button>
<sp-action-button
</sp-button>
<sp-button
style=${inNoSelectionStyle}
@click=${this.toggleSelectionMode}
>
<sp-icon-selection-checked
slot="icon"
></sp-icon-selection-checked>
Select
</sp-action-button>
</sp-button>
<sp-action-menu
style=${inNoSelectionStyle}
selects="single"
placement="bottom"
value="${this.mode}"
placement="left-end"
@change=${this.handleRenderModeChange}
>
${this.renderActions}
</sp-action-menu>
</sp-action-group>`;
</div>`;
}

handleRenderModeChange(e) {
Expand Down
4 changes: 2 additions & 2 deletions studio/src/aem/fragment.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,8 @@ export class Fragment {
}

get statusVariant() {
if (this.hasChanges) return 'yellow';
return this.status === 'PUBLISHED' ? 'positive' : 'info';
if (this.hasChanges) return 'modified';
return this.status === 'PUBLISHED' ? 'published' : 'draft';
}

refreshFrom(fragmentData) {
Expand Down
80 changes: 68 additions & 12 deletions studio/src/aem/mas-filter-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,24 @@ class MasFilterPanel extends LitElement {
};
static styles = css`
:host {
padding-inline: 16px;
display: flex;
}
#filters-panel {
display: flex;
gap: 10px;
align-items: center;
gap: 16px;
padding: 10px;
align-self: flex-end;
flex-wrap: wrap;
& aem-tag-picker-field,
sp-picker {
width: 150px;
}
}
sp-picker {
width: 150px;
#filters-label {
color: var(--spectrum-gray-600);
}
`;

Expand All @@ -34,17 +44,63 @@ class MasFilterPanel extends LitElement {
}

handeFilterChange(event) {
this.#source.setAttribute('tags', event.target.getAttribute('value'));
const newValue = event.target.getAttribute('value');
if (!newValue) return;
const value = this.#source.getAttribute('tags') || '';
let tags = value.split(',').filter((tag) => Boolean(tag));
if (tags.includes(newValue))
tags = tags.filter((tag) => tag !== newValue);
else tags.push(newValue);
this.#source.setAttribute('tags', tags.join(','));
}

render() {
return html`
<aem-tag-picker-field
label="Select filters"
namespace="/content/cq:tags/mas"
multiple
@change=${this.handeFilterChange}
></aem-tag-picker-field>
<div id="filters-panel">
<span id="filters-label">Filters</span>
<sp-picker label="Product" selected="None">
<sp-menu-item>Adobe Color</sp-menu-item>
<sp-menu-item>Adobe Express</sp-menu-item>
<sp-menu-item>Adobe Firefly</sp-menu-item>
<sp-menu-item>Adobe Fonts</sp-menu-item>
<sp-menu-item>Adobe Fresco</sp-menu-item>
<sp-menu-item>Adobe Stock</sp-menu-item>
</sp-picker>
<sp-picker label="Customer Segment">
<sp-menu-item>Enterprise</sp-menu-item>
<sp-menu-item>Individual</sp-menu-item>
<sp-menu-item>Team</sp-menu-item>
</sp-picker>
<sp-picker label="Offer Type" selected="None">
<sp-menu-item>Base</sp-menu-item>
<sp-menu-item>Promotion</sp-menu-item>
<sp-menu-item>Trial</sp-menu-item>
</sp-picker>
<sp-picker label="Plan Type">
<sp-menu-item>All</sp-menu-item>
<sp-menu-item>ABM</sp-menu-item>
<sp-menu-item>PUF</sp-menu-item>
<sp-menu-item>M2M</sp-menu-item>
<sp-menu-item>P3Y</sp-menu-item>
<sp-menu-item>Perpetual</sp-menu-item>
</sp-picker>
<sp-picker label="Market Segment">
<sp-menu-item>Com</sp-menu-item>
<sp-menu-item>Edu</sp-menu-item>
<sp-menu-item>Gov</sp-menu-item>
</sp-picker>
<sp-picker label="Country">
<sp-menu-item>United States</sp-menu-item>
<sp-menu-item>United Kingdom</sp-menu-item>
<sp-menu-item>Canada</sp-menu-item>
<sp-menu-item>Australia</sp-menu-item>
</sp-picker>
</div>
`;
}
}
Expand Down
Loading

0 comments on commit 604aa36

Please sign in to comment.