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

✨[Story devtools] Added functionality to block adding devices if no space #31715

Merged

Conversation

mszylkowski
Copy link
Contributor

The maximum amount of phones that can be added to the screen is 4, but tablets and desktops will take 2 spaces.

Defined a property deviceSpaces on all devices that determines how many spaces a device takes. If the sum of the current device spaces and the device we want to add is larger than 4, then the chip button should be disabled.

The data-spaces attribute on chips store how many spaces are required to display a device, and when the AddDeviceDialog is created, it will only set to enabled the devices that have space to be added, or the devices that are added (which are removed when you click on those chips).

If there are 4 spaces occupied already, disable adding any new devices:
image

If there are 3 spaces occupied, only enable the devices that would occupy 1 space (so desktop is disabled):
image

If there are 2 spaces occupied, enable all the devices to be added:
image

@mszylkowski mszylkowski self-assigned this Dec 22, 2020
@mszylkowski mszylkowski marked this pull request as ready for review December 23, 2020 15:29
@amp-owners-bot
Copy link

Hey @gmajoulet! These files were changed:

extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.css
extensions/amp-story-dev-tools/0.1/amp-story-dev-tools-tab-preview.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants