Skip to content

Commit

Permalink
Filters and UI changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@st-angelo-adobe
st-angelo-adobe committed Dec 4, 2024
1 parent 13ef33a commit a5f153b
Show file tree
Hide file tree
Showing 9 changed files with 622 additions and 483 deletions.
133 changes: 25 additions & 108 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"@spectrum-web-components/breadcrumbs": "^0.47.2",
"@spectrum-web-components/button": "^0.47.2",
"@spectrum-web-components/button-group": "^0.47.2",
"@spectrum-web-components/card": "^1.0.1",
"@spectrum-web-components/card": "^0.47.2",
"@spectrum-web-components/checkbox": "^0.47.2",
"@spectrum-web-components/dialog": "^0.47.2",
"@spectrum-web-components/divider": "^0.47.2",
Expand Down
650 changes: 394 additions & 256 deletions studio/libs/swc.js
View file

Large diffs are not rendered by default.

33 changes: 22 additions & 11 deletions studio/src/aem/content-navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +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 @@ -36,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 @@ -293,35 +305,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
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 a5f153b

Please sign in to comment.