-
Notifications
You must be signed in to change notification settings - Fork 540
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
[Designer] Add theme and container size drop-down menus #7741
Conversation
Hi @anna-dingler. Thanks for helping make the AdaptiveCards JS renderer + tooling better. As additional verification, once the JS build succeeds, please go to the test site to test out your website/designer changes. |
…o anna/consolidateContainers
Hi @anna-dingler. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along. |
…soft/AdaptiveCards into anna/consolidateContainers
Staleness reset by anna-dingler |
Hi @anna-dingler. This pull request has had no recent activity for the past 5 days . Please take the necessary actions (review, address feedback or commit if reviewed already) to move this along. |
Staleness reset by anna-dingler |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you make the new size & theme menu always visible even though the host app doesn't have sizes and theme?
It was hard to notice the change until I used berlin container.
I think putting the two menu options together with host app selection menu option as a group will improve a11y since users don't have to move through all of the other buttons to change size and etc.
source/nodejs/adaptivecards-designer/src/containers/berlin/berlin-container.ts
Show resolved
Hide resolved
@jwoo-msft I can definitely move the drop down menus to be directly after the host container selection menu. In terms of visibility, I was following the behavior of our other menus such as |
source/nodejs/adaptivecards-designer/src/containers/host-container.ts
Outdated
Show resolved
Hide resolved
that's good point, as long as the menus are together, I don't think making them always visible necessary. my main concern is that after host app is chosen, it's hard to noticed that the new menu are added presently. |
I think showing no entries might be more confusing while using other containers. We could show something along the lines of |
either options sounds good. |
I think it can make sense to either show/hide or enable/disable, but I think it depends on the broader experience. Does the theme picker work to switch between what we currently refer to as "Microsoft Teams - Light" and "Microsoft Teams - Dark"? If it does, then it certainly at least makes sense to have the theme dropdown always visible and just disabled for containers that don't have a light/dark theme pair. If the picker doesn't work, should it? If not, we should only be showing the dropdowns while displaying containers to which they apply. |
I believe the plan is to use the theme picker for "Microsoft Teams" in the future (not implemented in this PR), so I'll enable/disable the control. |
source/nodejs/adaptivecards-designer/src/containers/host-container.ts
Outdated
Show resolved
Hide resolved
…soft/AdaptiveCards into anna/consolidateContainers
…o anna/consolidateContainers
…o anna/consolidateContainers
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
some minor comments/optimizations, but looks good :)
Co-authored-by: Paul Campbell <paulcam@microsoft.com>
…soft/AdaptiveCards into anna/consolidateContainers
Confirmed that both of the drop-down menus will not be present when we exclude the berlin container. |
* Consolidate berlin containers into one * Add data binding * Update class list for card host * Update location and wording * Disable/enable choice pickers and make values lowercase * Move size to berlin container * Rename variables * Fix spacing * Update source/nodejs/adaptivecards-designer/src/card-designer.ts Co-authored-by: Paul Campbell <paulcam@microsoft.com> * Add instanceof check Co-authored-by: Paul Campbell <paulcam@microsoft.com>
Related Issue
Progress towards #7540
Description
Add infrastructure for including
ContainerSize
andColorTheme
menus for individual containers.If a container has the feature enabled, there will be two new drop-down menus to select the container size and theme.
When you select a size or theme from the menus, the respective properties are updated in the Host Data Payload Editor. If the host data payload is updated, we reflect the change in the drop-down menus as well.
How Verified
Verified manually on the AdaptiveCards Designer site.
Future Work
View all
, for the container size choice picker.Open question: How will this behave with the designer surface?
Microsoft Teams
andCortana Skills
containersOutstanding discussion
size
andtheme
Microsoft Reviewers: Open in CodeFlow