Merge pull request #1944 from maufcost/issue/1775-settings-dialog

Adopted the new settings dialog component for obo nodes

Author: FrenjaminBanklin

packages/app/obojobo-document-engine/src/scripts/common/components/modal/settings-dialog.scss

@@ -3,7 +3,6 @@
 .obojobo-draft--components--modal--settings-dialog {
 	text-align: left;
 	min-width: 20em;
-	width: 40vw;
 	display: flex;
 	flex-flow: column wrap;
 

packages/obonode/obojobo-chunks-figure/__snapshots__/choose-image-modal.test.js.snap

@@ -3,9 +3,9 @@ import './choose-image-modal.scss'
 import React from 'react'
 
 import API from 'obojobo-document-engine/src/scripts/viewer/util/api'
-import Common from 'obojobo-document-engine/src/scripts/common'
 
-const { SimpleDialog } = Common.components.modal
+import SettingsDialog from 'obojobo-document-engine/src/scripts/common/components/modal/settings-dialog'
+import SettingsDialogRow from 'obojobo-document-engine/src/scripts/common/components/modal/settings-dialog-row'
 import { uploadFileViaImageNode } from './utils'
 const IMAGE_BATCH_SIZE = 11 // load 11 images at a time
 
@@ -78,15 +78,14 @@ class ChooseImageModal extends React.Component {
 			: `${this.state.media.length} Recent Images loaded${this.state.hasMore ? ' with more' : ''}`
 
 		return (
-			<SimpleDialog
-				cancelOk
+			<SettingsDialog
 				title="Upload or Choose an Image"
 				onConfirm={() => this.props.onCloseChooseImageModal(this.state.url)}
 				onCancel={() => this.props.onCloseChooseImageModal(null)}
 				focusOnFirstElement={this.focusOnFirstElement}
 			>
 				<div className="choose-image">
-					<div className="choose-image--image-controls">
+					<SettingsDialogRow className="choose-image--image-controls">
 						<div className="choose-image--image-controls--upload">
 							<input
 								type="file"
@@ -117,7 +116,7 @@ class ChooseImageModal extends React.Component {
 							tabIndex="0"
 							aria-label="Enter image URL"
 						/>
-					</div>
+					</SettingsDialogRow>
 					<div className="choose-image--divider" />
 					<small>Your Recently Uploaded Images</small>
 					<div
@@ -157,7 +156,7 @@ class ChooseImageModal extends React.Component {
 						) : null}
 					</div>
 				</div>
-			</SimpleDialog>
+			</SettingsDialog>
 		)
 	}
 }

packages/obonode/obojobo-chunks-figure/__snapshots__/image-properties-modal.test.js.snap

@@ -4,9 +4,10 @@
 	$color-button-bg: lighten($color-action, 9%);
 
 	text-align: center;
-	width: 27rem;
+	max-width: 27rem;
 	background-color: $color-bg2;
 	padding: 1rem;
+	margin: 0 auto;
 
 	.choose-image--image-controls {
 		display: flex;

packages/obonode/obojobo-chunks-figure/choose-image-modal.js

@@ -8,7 +8,8 @@ import ImageCaptionWidthTypes from './image-caption-width-types'
 import Image from './image'
 import { isUUID } from './utils'
 
-const { SimpleDialog } = Common.components.modal
+import SettingsDialog from 'obojobo-document-engine/src/scripts/common/components/modal/settings-dialog'
+import SettingsDialogRow from 'obojobo-document-engine/src/scripts/common/components/modal/settings-dialog-row'
 const { Button } = Common.components
 
 class ImageProperties extends React.Component {
@@ -119,15 +120,15 @@ class ImageProperties extends React.Component {
 			this.state.size === 'small' || this.state.size === 'custom'
 
 		return (
-			<SimpleDialog
+			<SettingsDialog
 				cancelOk
 				title="Image Properties"
 				onConfirm={() => this.props.onConfirm(this.state)}
 				focusOnFirstElement={this.focusOnFirstElement}
 			>
 				<div className={`image-properties is-size-${size}`}>
 					<div>
-						<div className="flex-container image-container">
+						<SettingsDialogRow className="flex-container image-container">
 							<Image
 								key={this.state.url}
 								chunk={{
@@ -147,7 +148,7 @@ class ImageProperties extends React.Component {
 							>
 								Change Image...
 							</Button>
-						</div>
+						</SettingsDialogRow>
 
 						<label htmlFor="obojobo-draft--chunks--figure--alt">Alt Text:</label>
 						<input
@@ -186,7 +187,7 @@ class ImageProperties extends React.Component {
 						</select>
 
 						<label htmlFor="obojobo-draft--chunks--figure--size">Size:</label>
-						<div
+						<SettingsDialogRow
 							id="obojobo-draft--chunks--figure--size"
 							role="radiogroup"
 							aria-label="Select size for image"
@@ -265,10 +266,10 @@ class ImageProperties extends React.Component {
 									</div>
 								) : null}
 							</div>
-						</div>
+						</SettingsDialogRow>
 					</div>
 				</div>
-			</SimpleDialog>
+			</SettingsDialog>
 		)
 	}
 }

packages/obonode/obojobo-chunks-figure/choose-image-modal.scss

@@ -1,9 +1,14 @@
 @import '~styles/includes';
 
+.obojobo-draft--components--modal--settings-dialog .image-properties .row {
+	margin-bottom: 0;
+}
+
 .image-properties {
 	text-align: left;
 	display: flex;
 	width: 22em;
+	margin: 0 auto;
 
 	&.is-size-large,
 	&.is-size-medium {
@@ -49,21 +54,26 @@
 	}
 
 	.size-input {
-		display: block;
+		display: flex;
+		align-items: center;
 
 		.custom-size-inputs {
-			display: inline;
+			display: flex;
+			align-items: center;
 			padding-left: 0.5em;
 		}
 
-		input[type='radio'] {
-			vertical-align: middle;
+		input {
+			margin-left: 0;
+		}
+
+		span {
+			padding-right: 0.3em;
 		}
 
 		label {
-			display: inline;
-			vertical-align: middle;
 			padding-left: 0.3em;
+			margin: 0;
 		}
 	}
 

packages/obonode/obojobo-chunks-figure/image-properties-modal.js

@@ -1,11 +1,10 @@
 import './youtube-properties-modal.scss'
 
 import React from 'react'
-import Common from 'obojobo-document-engine/src/scripts/common'
 import { parseYouTubeURL, getStandardizedURLFromVideoId } from './parse-youtube-url'
 import Button from 'obojobo-document-engine/src/scripts/common/components/button'
 
-const { SimpleDialog } = Common.components.modal
+import SettingsDialog from 'obojobo-document-engine/src/scripts/common/components/modal/settings-dialog'
 
 class YouTubeProperties extends React.Component {
 	constructor(props) {
@@ -172,12 +171,11 @@ class YouTubeProperties extends React.Component {
 
 	render() {
 		return (
-			<SimpleDialog
+			<SettingsDialog
 				cancelOk
 				title="YouTube Video"
 				focusOnFirstElement={this.focusOnFirstElement}
 				onConfirm={this.onConfirm}
-				width={'30rem'}
 			>
 				<form
 					ref={this.formRef}
@@ -232,7 +230,7 @@ class YouTubeProperties extends React.Component {
 						</Button>
 					)}
 				</form>
-			</SimpleDialog>
+			</SettingsDialog>
 		)
 	}
 }