Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MWPW-163214: M@S Studio Splash Screen #105

Merged
merged 63 commits into from
Jan 10, 2025
Merged
Changes from 1 commit
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
5315a33
first commit
Axelcureno Dec 3, 2024
3791ca8
design improvements
Axelcureno Dec 3, 2024
3916838
Update style.css
Axelcureno Dec 3, 2024
13ef33a
Merge branch 'main' into MWPW-163214
Axelcureno Dec 3, 2024
a5f153b
Filters and UI changes
st-angelo-adobe Dec 4, 2024
1fe7d39
Update style.css
Axelcureno Dec 4, 2024
f495ed3
Merge branch 'MWPW-163214' of github.com:adobecom/mas into MWPW-163214
Axelcureno Dec 4, 2024
15e759b
Refactor quick action cards and remove unused card component
Axelcureno Dec 4, 2024
20afb8a
Update style.css
Axelcureno Dec 4, 2024
4e4c356
Add MasSurfacePicker component and update side navigation with new icons
Axelcureno Dec 4, 2024
fb7ae82
Enhance MasSurfacePicker with dropdown functionality and update styles
Axelcureno Dec 5, 2024
f2734ed
Refactor MasSurfacePicker to use 'sp-announce-selected' event and str…
Axelcureno Dec 5, 2024
f143b52
Update margin in render-view for improved layout consistency
Axelcureno Dec 5, 2024
24b520c
Add openOst method to MasStudio and update quick action card to open …
Axelcureno Dec 5, 2024
ec8a157
Remove unused closeOfferSelectorTool import from studio.js
Axelcureno Dec 5, 2024
ba5589b
Adjust margin-top for rte-field to eliminate unnecessary space
Axelcureno Dec 5, 2024
73e2bd7
Add border-radius to sp-dialog for improved aesthetics
Axelcureno Dec 5, 2024
46ae022
small UI changes (table view, side-nav and editor z-index)
st-angelo-adobe Dec 5, 2024
167e499
new mas folder picker wc
Axelcureno Dec 6, 2024
167faf7
sidenav home click handling
Axelcureno Dec 6, 2024
4b7dc5d
more improvements
Axelcureno Dec 6, 2024
d324e82
Merch card render status update
st-angelo-adobe Dec 6, 2024
40f440e
recently updated fragments (#110)
yesil Dec 6, 2024
3011993
fix fe cache hit issue (#111)
yesil Dec 9, 2024
ee6bd94
Merge branch 'main' into MWPW-163214
Axelcureno Dec 9, 2024
8785768
get folder from url
Axelcureno Dec 9, 2024
38efa01
folder mapping for demo
Axelcureno Dec 10, 2024
44fbfa9
Update studio.js
Axelcureno Dec 10, 2024
60a66d4
State management pre cleanup
st-angelo-adobe Dec 11, 2024
6d57c4a
fixed selection
st-angelo-adobe Dec 11, 2024
9de8fdc
small cleanup
st-angelo-adobe Dec 12, 2024
cd016cc
editor improvements, some more cleanup
st-angelo-adobe Dec 12, 2024
95de01d
editor enhancements
st-angelo-adobe Dec 12, 2024
0e82d3e
navigation with editor check
st-angelo-adobe Dec 12, 2024
4c21410
mnemonics workaround
st-angelo-adobe Dec 12, 2024
70935a9
variant-picker fix
st-angelo-adobe Dec 12, 2024
49abb51
demo code removal
Axelcureno Dec 12, 2024
290a0e8
Comment resolve and cleanup
st-angelo-adobe Dec 17, 2024
77e23e4
Merge branch 'MWPW-163155' into MWPW-163214
st-angelo-adobe Dec 17, 2024
b6f3fd3
fixed loose equality
st-angelo-adobe Dec 17, 2024
38842ad
Merge branch 'main' into MWPW-163214
st-angelo-adobe Dec 17, 2024
60a5a8b
post merge fixes
st-angelo-adobe Dec 17, 2024
1a5da6e
error enhancements
st-angelo-adobe Dec 17, 2024
0cb6942
small style change
st-angelo-adobe Dec 17, 2024
eaa5a6a
Init tests
st-angelo-adobe Dec 18, 2024
2de7019
cr fixes
st-angelo-adobe Dec 18, 2024
b0f9e8a
error processing
st-angelo-adobe Dec 18, 2024
da390a2
test change
st-angelo-adobe Dec 18, 2024
bc28988
fragment editor base class, reviews addressed
Axelcureno Jan 7, 2025
58bc8b3
Merge branch 'main' into MWPW-163214
Axelcureno Jan 7, 2025
aebd93c
review comment addressed
Axelcureno Jan 8, 2025
32ef83d
Merge branch 'MWPW-163214' of github.com:adobecom/mas into MWPW-163214
Axelcureno Jan 8, 2025
a1d765e
unit tests and other review comments addressed
Axelcureno Jan 8, 2025
ae5994e
removed class inheritance
Axelcureno Jan 8, 2025
d7b210d
Merge branch 'main' into MWPW-163214
Axelcureno Jan 8, 2025
e692f49
ut fixed
Axelcureno Jan 9, 2025
f7da8b9
Merge branch 'MWPW-163214' of github.com:adobecom/mas into MWPW-163214
Axelcureno Jan 9, 2025
81cbb99
IMS user name and slack support link
Axelcureno Jan 10, 2025
00b9f94
support alignment
Axelcureno Jan 10, 2025
4f25acb
css
Axelcureno Jan 10, 2025
4219b65
click only on icon as per reuben
Axelcureno Jan 10, 2025
1d4f241
Update mas-side-nav.js
Axelcureno Jan 10, 2025
8c734be
Merge branch 'main' into MWPW-163214
Axelcureno Jan 10, 2025
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Enhance MasSurfacePicker with dropdown functionality and update styles
  • Loading branch information
Axelcureno committed Dec 5, 2024
commit fb7ae8268c90b432615f652e5c53aef5fca247a2
439 changes: 226 additions & 213 deletions studio/libs/swc.js

Large diffs are not rendered by default.

231 changes: 190 additions & 41 deletions studio/src/mas-surface-picker.js
Original file line number Diff line number Diff line change
@@ -4,82 +4,231 @@ export class MasSurfacePicker extends LitElement {
static properties = {
value: { type: String },
options: { type: Array },
open: { type: Boolean },
label: { type: String },
};

constructor() {
super();
this.value = 'adobedotcom'; // Default selected value
this.options = [
{ value: 'adobedotcom', label: 'Adobe.com' },
{ value: 'ccd', label: 'Creative Cloud Desktop' },
{ value: 'home', label: 'Adobe Home' },
];
this.value = this.options[0].value;
this.label = this.options[0].label;
this.open = false;
}

static styles = css`
:host {
display: block;
position: relative;
width: 200px;
}

sp-picker {
.picker-button {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 4px 12px;
border-radius: 4px;
background-color: transparent;
cursor: pointer;
box-sizing: border-box;
}

.picker-button:hover {
border-color: var(--spectrum-global-color-gray-500, #6e6e6e);
}

.button-content {
display: flex;
align-items: center;
gap: 8px;
flex-grow: 1;
min-width: 0;
}

.button-content span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}

.chevron {
width: 16px;
height: 16px;
color: var(--spectrum-alias-text-color, #000);
flex-shrink: 0;
}

/* Hide icons in the dropdown menu items */
sp-menu::part(options) sp-menu-item::part(icon) {
display: none;
sp-popover {
position: absolute;
z-index: 1;
width: 100%;
margin-top: 4px;
box-sizing: border-box;
background-color: transparent;
border: none;
}

sp-menu {
width: 100%;
max-height: none;
overflow: visible;
background-color: var(--spectrum-white, #fff);
}

sp-menu-item[selected] {
font-weight: bold;
}

sp-menu-item[selected] {
font-weight: bold;
&::after {
display: none;
}
}
`;

handleChange(event) {
this.value = event.target.value;
this.dispatchEvent(
new CustomEvent('picker-change', {
detail: { value: this.value },
bubbles: true,
composed: true,
})
);
firstUpdated() {
const spMenu = this.shadowRoot.querySelector('sp-menu');
if (spMenu) {
spMenu.addEventListener('change', this.handleSelection.bind(this));
}
}

updated(changedProperties) {
if (changedProperties.has('open') && this.open) {
const spMenu = this.shadowRoot.querySelector('sp-menu');
if (spMenu) {
spMenu.addEventListener(
'change',
this.handleSelection.bind(this),
);
}
}
}

toggleDropdown() {
this.open = !this.open;
}

closeDropdown() {
this.open = false;
}

handleSelection(event) {
console.log('handleSelection called', event);
const selectedItem = event.target.selectedItem;
if (selectedItem) {
this.value = selectedItem.value;
const selectedOption = this.options.find(
(option) => option.value === this.value
);
this.label = selectedOption ? selectedOption.label : '';
this.closeDropdown();

this.dispatchEvent(
new CustomEvent('picker-change', {
detail: { value: this.value, label: this.label },
bubbles: true,
composed: true,
})
);
}
}

render() {
return html`
<sp-picker
icons
quiet
@change=${this.handleChange}
value=${this.value}
<div
class="picker-button"
@click=${this.toggleDropdown}
role="button"
aria-haspopup="true"
aria-expanded=${this.open ? 'true' : 'false'}
tabindex="0"
@keydown=${this.handleKeyDown}
>
<!-- Menu items with icons -->
${this.options.map(
(option) => html`
<sp-menu-item value=${option.value}>
<svg
slot="icon"
class="icon"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 30 26"
aria-label="${option.label}"
>
<path
fill="#292929"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
${option.label}
</sp-menu-item>
`
)}
</sp-picker>
<span class="button-content">
<!-- SVG Icon -->
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 30 26"
width="18px"
xml:space="preserve"
role="img"
aria-label="Adobe"
>
<path
fill="#292929"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
<!-- Selected Label -->
<span class="surface-selection">${this.label}</span>
</span>
<!-- Chevron Icon -->
<sp-icon-chevron-down
dir="ltr"
class="chevron"
></sp-icon-chevron-down>
</div>
${this.open
? html`
<sp-popover
@focusout=${this.handleFocusOut}
placement="bottom-start"
open
>
<sp-menu selects="single" role="listbox">
${this.options.map(
(option) => html`
<sp-menu-item .value=${option.value}>
${option.label}
</sp-menu-item>
`,
)}
</sp-menu>
</sp-popover>
`
: ''}
`;
}

handleFocusOut(event) {
if (!this.contains(event.relatedTarget)) {
this.closeDropdown();
}
}

handleKeyDown(event) {
if (event.key === 'Enter' || event.key === ' ') {
event.preventDefault();
this.toggleDropdown();
} else if (event.key === 'ArrowDown') {
event.preventDefault();
this.open = true;
this.updateComplete.then(() => {
const firstMenuItem =
this.renderRoot.querySelector('sp-menu-item');
if (firstMenuItem) {
firstMenuItem.focus();
}
});
}
}
}

customElements.define('mas-surface-picker', MasSurfacePicker);
46 changes: 32 additions & 14 deletions studio/src/mas-top-nav.js
Original file line number Diff line number Diff line change
@@ -38,11 +38,25 @@ class MasTopNav extends LitElement {
#brand {
display: flex;
align-items: end;
width: max-content;
gap: 10px;
color: #eb1000;
text-decoration: none;
}

#logo {
display: flex;
width: 30px;
}

#mas-studio {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: var(--spectrum-global-color-gray-700);
display: flex;
align-self: center;
}

#brand strong {
font-size: 21px;
font-weight: 800;
@@ -64,22 +78,26 @@ class MasTopNav extends LitElement {
<nav>
<a id="brand" href="#">
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
x="0"
y="0"
viewBox="0 0 30 26"
width="24px"
xml:space="preserve"
role="img"
id="logo"
aria-label="Adobe"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#FA0F00"
d="M19 0h11v26zM11.1 0H0v26zM15 9.6L22.1 26h-4.6l-2.1-5.2h-5.2z"
></path>
</svg>
<strong>M@S Studio</strong>
d="M19.7512 0.5H4.24878C1.90225 0.5 0 2.3905 0 4.72256V19.2774C0 21.6095 1.90225 23.5 4.24878 23.5H19.7512C22.0978 23.5 24 21.6095 24 19.2774V4.72256C24 2.3905 22.0978 0.5 19.7512 0.5Z"
fill="#EB1000"
/>
<path
d="M18.5391 17.9277H15.7339C15.4735 17.9277 15.2512 17.78 15.1585 17.5591L12.1298 10.5106C12.075 10.3829 11.9287 10.3818 11.8728 10.5073L9.9749 15.2212C9.93024 15.3266 10.0081 15.4431 10.1232 15.4431H12.2093C12.3385 15.4431 12.4552 15.5199 12.5056 15.6381L13.4022 17.4092C13.5073 17.6557 13.3252 17.9277 13.0571 17.9277H5.46234C5.21992 17.9277 5.05342 17.6879 5.14616 17.448L9.9937 6.01659C10.0875 5.77676 10.3289 5.61133 10.607 5.61133H13.3933C13.6715 5.61133 13.9139 5.77676 14.0067 6.01659L18.8542 17.448C18.9469 17.6879 18.7805 17.9277 18.5391 17.9277L18.5391 17.9277Z"
fill="white"
/>
</svg>


<span id="mas-studio">M@S Studio</span>
</a>
<a>
<sp-badge size="s" variant="${this.envIndicator}"
1 change: 1 addition & 0 deletions studio/src/swc.js
Original file line number Diff line number Diff line change
@@ -59,6 +59,7 @@ import '@spectrum-web-components/icons-workflow/icons/sp-icon-home.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-campaign.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-graph-bar-vertical.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-help.js';
import '@spectrum-web-components/icons-workflow/icons/sp-icon-chevron-down.js';
import '@spectrum-web-components/link/sp-link.js';
import '@spectrum-web-components/menu/sp-menu-divider.js';
import '@spectrum-web-components/menu/sp-menu-item.js';
1 change: 1 addition & 0 deletions studio/style.css
Original file line number Diff line number Diff line change
@@ -55,6 +55,7 @@ side-nav sp-sidenav-heading {
display: flex;
align-items: center;
padding: 8px 16px;
margin-top: 16px;
}

side-nav sp-sidenav-item {
Loading