Updated iframe properties dialog

[maufcost]

Fixes #1536

[maufcost]

A sneak peak at our new iframe properties modal:

[jpeterson976]

This looks great! I especially love the sizing options, those SVGs look awesome. Great work!

One thing is that in the advanced options, the description text can be overlapped by the toggle button if the window isn't wide enough (shown below).

Also, this may just be a me thing, but I think that the labels in the 'Options' section should be vertically centered with respect to their inputs as well.

This is probably pretty nitpicky, but I think the 'Content type' label should be aligned with the options box - currently it's aligned with the container that contains the description text so it's sitting slightly below where it seems like it should. Similarly I think the 'Sizing' label should be aligned with the middle bullet point, though getting them to properly line up there might be annoying. (If anyone disagrees with this, I'm open to being convinced otherwise)

[zachberry]

Super excited about this, sorry for the delay in the review. I think you have the base of the form working pretty well, but I do have a bit of feedback on changes:

First screen:

• The preview input needs a debounce. If I try to type in a URL as soon as I input one character the iframe attempts to load right away (1)
• If you give the input an invalid URL, it will instead load the editor inside the iframe. Likewise, checking if the input is an iframe embed code could be simplified by trying to put the users' text as innerHTML inside a div and poking into the div to see if the browser created a valid iframe. You can see an example of both of these techniques inside the "parse-youtube-url.js" file, in the parseYouTubeURL function. It might be worthwhile to extract this code and generalize it to be able to be used in both places. (2)
• Add a 1px $color-shadow border to the iframe preview (3)
• The "Does the preview look good?" help-text state expands the dialog to suddenly be very wide. Want to make sure the width doesn't change between these states. (4)

Second screen:

• The Content type and Sizing boxes need cursor:pointer and a hover state. (5)
• The "px" in the Fixed size sizing option as well as the "!" in the warning icon under the Loading select box is using some default-level font. If these are in the SVG you'll want to use Libre Franklin (free to download) and then export the SVG with the fonts rendered as shapes. (6)
• Dialog needs a min-width so that the helper text below the Content type boxes doesn't wrap (7)
• Switching the different Content Type choices should set the options below automatically. By default 'Video or other media' would set Fit to Scale, Reload turned on and the other controls turned off. Embedded webpage should set Fit to Scroll and enable all controls. Additionally Sizing should default to Responsive - text width. (8)
• The text "Load when student sees IFrame" should be changed to "Load when student clicks IFrame" (9)

General:

• Buttons and inputs seem to be using Arial - want to use the standard Selects, Buttons and inputs for these. The Materia dialog uses SettingsDialogForm, that could be of use - It helps build out forms - Ian added it in the Materia branch. (10)
• When displayed in the viewer there seems to be a gray background to iframes - If a page doesn't define a background color it's more noticeable. (11)
• Editing an iframe should jump to the second screen if the iframe has a URL set (12)

[maufcost]

I numbered the issues on Zac's last comment so they are easier to address and talk about.

(1) Done.
(2) Done.
(3) Done.
(4) Done.
(5) Done. I just need some feedback on the purple borders. Any thoughts about keeping the purple borders all the time or only on hover? Right now, I fixed it to be only on hover.
(6) Done.
(7) Done.
(8) Done.
(9) Done.
(10) Done. Applied the mixins and adapted inputs and selects to have the same border color.
(11) I haven't found any background colors set on iframes in the viewer. Could you send me any screenshots? :)
(12) Done.
(13) Proposing this one: I thought about disabling the button to go from the first modal to the second if the src typed is not valid. Any thoughts?

[maufcost]

Finished applying the changes Zac requested. This PR is testable/reviewable again.

The tests that are not passing are some uncovered React functions I had to write in order to control more complicated hover/click actions (Change n#5 above). I'm just waiting to get your feedback on the current hover/click states I implemented before writing new tests to cover those new functions.

[jpeterson976]

LGTM! Did some playing around with changing the settings, everything looks to be working as expected. Great work!

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep our backlog under control, but we thank you for your contributions.

The base branch was changed.

[FrenjaminBanklin]

After merging in changes from dev/31 and updating snapshots, this looks like it's running well.

The base branch was changed.

[FrenjaminBanklin]

Merged in the current dev branch and checked functionality, it looks like all of this is working really well.

I did also contribute to this so it should probably have another person besides me look it over before I finalize it.

[RachelDau]

These iframe options are really cool. I didn't find any issues with anything. I tested on different browsers and played around with the sizing and other settings.