Updated Carousel and ImageSet spec #8220
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jwoo-msft
requested review from
almedina-ms,
anna-dingler,
beervoley,
JeanRoca,
KesemZ and
paulcam206
beervoley
reviewed
Jan 9, 2023
| ## Timer Property | ||
| * `"timer" : number` | ||
| * when set, the number sets the duration before a Carousel page transitions to the next Carousel page. | ||
| * while hovering, mouse click, and touch events, this auto transition is canceled. |
There was a problem hiding this comment.
Will the timer start again after the manual transition has been completed?
beervoley
reviewed
Jan 9, 2023
|
|
||
| This will enable them to show a chat as a group chat in a messenger app. | ||
| #### Key Features | ||
| * Stack a maximum of 2 images. The green status indicator would not be displayed. |
There was a problem hiding this comment.
Is there a reason for displaying only 2 images?
3 and more could be displayed in a slightly different fashion (similar to Teams?)
There was a problem hiding this comment.
No, this is client specific feature. we are going to share this spec with Team to expand the spec further.
almedina-ms
reviewed
Jan 9, 2023
| So here we have a sample carousel card. You'll probably notice the ominously-named `TBD` property right away -- we haven't come up with a name for it yet. At any rate, this property is an object containing a `type` property describing what type of card this is. Other properties in this object can be provided to configure behaviors of this type of card (in this example, the timer to use for automatically flipping through the items in a carousel). | ||
|
|
||
| You'll probably also notice the new `CarouselPage` element. It acts pretty similarly to a `Container`, but with some differences: | ||
| So here we have a sample carousel card. You'll probably notice the new `CarouselPage` element. It acts pretty similarly to a `Container`, but with some differences: |
almedina-ms
reviewed
Jan 9, 2023
| * No `style` (or at least, we don't have a reason to have `style` here yet) | ||
| * No `bleed` | ||
| * We don't allow every element type within a `CarouselPage`, only the subset we decide on (see following sections for more details) | ||
|
|
||
| Having this new element also has the advantage of allowing us to reuse it later should we decide to promote the idea of `Carousel` as a regular page element (a `Carousel` would be a collection of `CarouselPage`s in this regime, though we'd need to decide how to reconcile `TBD` against per-`Carousel` settings). | ||
| Having this new element also has the advantage of allowing us to reuse it later should we decide to promote the idea of `Carousel` as a regular page element (a `Carousel` would be a collection of `CarouselPage`s in this regime. |
almedina-ms
reviewed
Jan 9, 2023
| * No `style` (or at least, we don't have a reason to have `style` here yet) | ||
| * No `bleed` | ||
| * We don't allow every element type within a `CarouselPage`, only the subset we decide on (see following sections for more details) | ||
|
|
||
| Having this new element also has the advantage of allowing us to reuse it later should we decide to promote the idea of `Carousel` as a regular page element (a `Carousel` would be a collection of `CarouselPage`s in this regime, though we'd need to decide how to reconcile `TBD` against per-`Carousel` settings). | ||
| Having this new element also has the advantage of allowing us to reuse it later should we decide to promote the idea of `Carousel` as a regular page element (a `Carousel` would be a collection of `CarouselPage`s in this regime. |
almedina-ms
reviewed
Jan 9, 2023
|
|
||
| This will enable them to show a chat as a group chat in a messenger app. | ||
| #### Key Features | ||
| * Stack a maximum of 2 images. The green status indicator would not be displayed. |
almedina-ms
reviewed
Jan 9, 2023
| * `style`: "stacked" | ||
| * indicates that images are displayed in a stack | ||
| * `offset`: a number | ||
| * indicates the magnitude of offset in pixels. This is how far apart diagonally the images are at. Images are at tangent at 0. In other word, there will be no space between the images except the border. Negative values moves images closer up to the image's diameter. Positive values move images farther and there is no limitation imposed by the spec, but will result in bad UI with extreme value. |
There was a problem hiding this comment.
is there some way to specify size of the stacked on top of the other image or is the stacked image always a certain size?
almedina-ms
reviewed
Jan 9, 2023
| |Capability|Priority| | ||
| |---|---| | ||
| |Allow users to stack at least 2 images |p0 | ||
| |The stacked image sets support "style": "person" so they are rounded|p0 |
There was a problem hiding this comment.
sorry, I don't see the extra tab.
almedina-ms
reviewed
Jan 9, 2023
| |---|---| | ||
| |Allow users to stack at least 2 images |p0 | ||
| |The stacked image sets support "style": "person" so they are rounded|p0 | ||
| |The stacked images stack diagonally with the front image on the left |p0 |
ghost
added
the
|
Hi @jwoo-msft. 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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related Issue
N/A
Description
Updated Carousel and ImageSet design discussion docs for v-team spec review.
Sample Card
N/A
How Verified
N/A
Microsoft Reviewers: Open in CodeFlow