From 2ee5e2b572b8441bec5654adb7d64ccad11d29d3 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Thu, 6 Jan 2022 10:05:45 -0400 Subject: [PATCH 1/3] Standardized the editor's settings dialogs --- .../choose-image-modal.test.js.snap | 24 +++++++-------- .../image-properties-modal.test.js.snap | 16 +++++----- .../choose-image-modal.js | 13 ++++---- .../choose-image-modal.scss | 3 +- .../image-properties-modal.js | 15 +++++----- .../image-properties-modal.scss | 1 + .../youtube-properties-modal.test.js.snap | 30 +++++++++---------- .../youtube-properties-modal.js | 8 ++--- 8 files changed, 55 insertions(+), 55 deletions(-) diff --git a/packages/obonode/obojobo-chunks-figure/__snapshots__/choose-image-modal.test.js.snap b/packages/obonode/obojobo-chunks-figure/__snapshots__/choose-image-modal.test.js.snap index a16a3eb6a1..de9f837e2e 100644 --- a/packages/obonode/obojobo-chunks-figure/__snapshots__/choose-image-modal.test.js.snap +++ b/packages/obonode/obojobo-chunks-figure/__snapshots__/choose-image-modal.test.js.snap @@ -1,25 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Choose Image Modal ChooseImageModal component 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; +exports[`Choose Image Modal ChooseImageModal component 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; -exports[`Choose Image Modal ChooseImageModal component displays error message 1`] = `"

Upload or Choose an Image

Error: File too large

or

Your Recently Uploaded Images
\\"Select
"`; +exports[`Choose Image Modal ChooseImageModal component displays error message 1`] = `"

Upload or Choose an Image

Error: File too large

or

Your Recently Uploaded Images
\\"Select
"`; -exports[`Choose Image Modal ChooseImageModal component focuses on first element 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; +exports[`Choose Image Modal ChooseImageModal component focuses on first element 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; -exports[`Choose Image Modal ImageProperties click on \`Cancel\` 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; +exports[`Choose Image Modal ImageProperties click on \`Cancel\` 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; -exports[`Choose Image Modal ImageProperties click on \`OK\` 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; +exports[`Choose Image Modal ImageProperties click on \`OK\` 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; -exports[`Choose Image Modal ImageProperties click on \`View More...\` 2`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; +exports[`Choose Image Modal ImageProperties click on \`View More...\` 2`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; -exports[`Choose Image Modal ImageProperties click on an image 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; +exports[`Choose Image Modal ImageProperties click on an image 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; -exports[`Choose Image Modal ImageProperties component changes file 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; +exports[`Choose Image Modal ImageProperties component changes file 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select
"`; -exports[`Choose Image Modal ImageProperties handle fetching error 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
"`; +exports[`Choose Image Modal ImageProperties handle fetching error 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
"`; -exports[`Choose Image Modal ImageProperties handle promise rejection 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
"`; +exports[`Choose Image Modal ImageProperties handle promise rejection 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
"`; -exports[`Choose Image Modal ImageProperties onKeyPress \`Enter\` on an image 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; +exports[`Choose Image Modal ImageProperties onKeyPress \`Enter\` on an image 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; -exports[`Choose Image Modal ImageProperties onPress that are not \`Enter\` on an image 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; +exports[`Choose Image Modal ImageProperties onPress that are not \`Enter\` on an image 1`] = `"

Upload or Choose an Image

or

Your Recently Uploaded Images
\\"Select\\"Select
"`; diff --git a/packages/obonode/obojobo-chunks-figure/__snapshots__/image-properties-modal.test.js.snap b/packages/obonode/obojobo-chunks-figure/__snapshots__/image-properties-modal.test.js.snap index 06f5ee2f16..6b0ffdd658 100644 --- a/packages/obonode/obojobo-chunks-figure/__snapshots__/image-properties-modal.test.js.snap +++ b/packages/obonode/obojobo-chunks-figure/__snapshots__/image-properties-modal.test.js.snap @@ -2,22 +2,22 @@ exports[`Image Properties Modal ImageProperties Component handles content.url as expected 1`] = `"
MockChooseImageModal
"`; -exports[`Image Properties Modal ImageProperties component 1`] = `"

Image Properties

MockImage
"`; +exports[`Image Properties Modal ImageProperties component 1`] = `"

Image Properties

MockImage
"`; -exports[`Image Properties Modal ImageProperties component calls onConfirm when click "OK" 1`] = `"

Image Properties

MockImage
"`; +exports[`Image Properties Modal ImageProperties component calls onConfirm when click "OK" 1`] = `"

Image Properties

MockImage
"`; exports[`Image Properties Modal ImageProperties component does not focus if ChooseImageModal is opened 1`] = `"
MockChooseImageModal
"`; -exports[`Image Properties Modal ImageProperties component focuses on first element 1`] = `"

Image Properties

MockImage
"`; +exports[`Image Properties Modal ImageProperties component focuses on first element 1`] = `"

Image Properties

MockImage
"`; -exports[`Image Properties Modal ImageProperties component opens ChooseImageModal component and clicks \`OK\` 1`] = `"

Image Properties

MockImage
"`; +exports[`Image Properties Modal ImageProperties component opens ChooseImageModal component and clicks \`OK\` 1`] = `"

Image Properties

MockImage
"`; exports[`Image Properties Modal ImageProperties component renders when click \`Change Image...\` 1`] = `"
MockChooseImageModal
"`; -exports[`Image Properties Modal ImageProperties component with a url opens ChooseImageModal component and clicks \`Cancel\` 1`] = `"

Image Properties

MockImage
"`; +exports[`Image Properties Modal ImageProperties component with a url opens ChooseImageModal component and clicks \`Cancel\` 1`] = `"

Image Properties

MockImage
"`; -exports[`Image Properties Modal ImageProperties component with allowedUploadTypes 1`] = `"

Image Properties

MockImage
px × px
"`; +exports[`Image Properties Modal ImageProperties component with allowedUploadTypes 1`] = `"

Image Properties

MockImage
px × px
"`; -exports[`Image Properties Modal ImageProperties component with custom size 1`] = `"

Image Properties

MockImage
px × px
"`; +exports[`Image Properties Modal ImageProperties component with custom size 1`] = `"

Image Properties

MockImage
px × px
"`; -exports[`Image Properties Modal ImageProperties component without url opens ChooseImageModal component and clicks \`Cancel\` 1`] = `"

Image Properties

MockImage
"`; +exports[`Image Properties Modal ImageProperties component without url opens ChooseImageModal component and clicks \`Cancel\` 1`] = `"

Image Properties

MockImage
"`; diff --git a/packages/obonode/obojobo-chunks-figure/choose-image-modal.js b/packages/obonode/obojobo-chunks-figure/choose-image-modal.js index f54b1db53d..113a4dd6fa 100644 --- a/packages/obonode/obojobo-chunks-figure/choose-image-modal.js +++ b/packages/obonode/obojobo-chunks-figure/choose-image-modal.js @@ -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 ( - this.props.onCloseChooseImageModal(this.state.url)} onCancel={() => this.props.onCloseChooseImageModal(null)} focusOnFirstElement={this.focusOnFirstElement} >
-
+
-
+
Your Recently Uploaded Images
- + ) } } diff --git a/packages/obonode/obojobo-chunks-figure/choose-image-modal.scss b/packages/obonode/obojobo-chunks-figure/choose-image-modal.scss index acbe2e0359..5f027a2417 100644 --- a/packages/obonode/obojobo-chunks-figure/choose-image-modal.scss +++ b/packages/obonode/obojobo-chunks-figure/choose-image-modal.scss @@ -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; diff --git a/packages/obonode/obojobo-chunks-figure/image-properties-modal.js b/packages/obonode/obojobo-chunks-figure/image-properties-modal.js index f34f1c042b..a811e8d818 100644 --- a/packages/obonode/obojobo-chunks-figure/image-properties-modal.js +++ b/packages/obonode/obojobo-chunks-figure/image-properties-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,7 +120,7 @@ class ImageProperties extends React.Component { this.state.size === 'small' || this.state.size === 'custom' return ( - this.props.onConfirm(this.state)} @@ -127,7 +128,7 @@ class ImageProperties extends React.Component { >
-
+ Change Image... -
+ -
) : null}
-
+
- + ) } } diff --git a/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss b/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss index 8ae2a33c10..4ee7c21803 100644 --- a/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss +++ b/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss @@ -4,6 +4,7 @@ text-align: left; display: flex; width: 22em; + margin: 0 auto; &.is-size-large, &.is-size-medium { diff --git a/packages/obonode/obojobo-chunks-youtube/__snapshots__/youtube-properties-modal.test.js.snap b/packages/obonode/obojobo-chunks-youtube/__snapshots__/youtube-properties-modal.test.js.snap index 8c723c47ce..e3749f6887 100644 --- a/packages/obonode/obojobo-chunks-youtube/__snapshots__/youtube-properties-modal.test.js.snap +++ b/packages/obonode/obojobo-chunks-youtube/__snapshots__/youtube-properties-modal.test.js.snap @@ -1,31 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`YouTubeProperties modal Clicking on the clear times button collapses the UI and clears out times 1`] = `"

YouTube Video

"`; +exports[`YouTubeProperties modal Clicking on the clear times button collapses the UI and clears out times 1`] = `"

YouTube Video

"`; -exports[`YouTubeProperties modal Clicking on the edit times button expands the UI 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal Clicking on the edit times button expands the UI 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; -exports[`YouTubeProperties modal Inputting a URL WITH start/end times (when start/end times are already defined) DOES CLEAR the start/end times 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal Inputting a URL WITH start/end times (when start/end times are already defined) DOES CLEAR the start/end times 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; -exports[`YouTubeProperties modal Inputting a URL and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; +exports[`YouTubeProperties modal Inputting a URL and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; -exports[`YouTubeProperties modal Inputting a URL with end times and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal Inputting a URL with end times and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; -exports[`YouTubeProperties modal Inputting a URL with start and end times and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal Inputting a URL with start and end times and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; -exports[`YouTubeProperties modal Inputting a URL with start times and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal Inputting a URL with start times and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; -exports[`YouTubeProperties modal Inputting a URL without start/end times (when start/end times are already defined) does not clear or modify the start/end times 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal Inputting a URL without start/end times (when start/end times are already defined) does not clear or modify the start/end times 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; -exports[`YouTubeProperties modal Inputting a video ID and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; +exports[`YouTubeProperties modal Inputting a video ID and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; -exports[`YouTubeProperties modal Inputting an embed code and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; +exports[`YouTubeProperties modal Inputting an embed code and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; -exports[`YouTubeProperties modal Inputting times in MM:SS format works fine 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal Inputting times in MM:SS format works fine 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; -exports[`YouTubeProperties modal Pasting a URL and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; +exports[`YouTubeProperties modal Pasting a URL and clicking OK calls onConfirm with expected values 1`] = `"

YouTube Video

"`; -exports[`YouTubeProperties modal YouTubeProperties component focuses on first element 1`] = `"

YouTube Video

"`; +exports[`YouTubeProperties modal YouTubeProperties component focuses on first element 1`] = `"

YouTube Video

"`; -exports[`YouTubeProperties modal YouTubeProperties component renders correctly 1`] = `"

YouTube Video

"`; +exports[`YouTubeProperties modal YouTubeProperties component renders correctly 1`] = `"

YouTube Video

"`; -exports[`YouTubeProperties modal YouTubeProperties component with values renders correctly 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; +exports[`YouTubeProperties modal YouTubeProperties component with values renders correctly 1`] = `"

YouTube Video

Start & End Times

Seconds or MM:SS format (e.g. 135 or 2:15)Seconds or MM:SS format (e.g. 135 or 2:15)
"`; diff --git a/packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js b/packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js index 7b92bb2495..a47421269b 100644 --- a/packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js +++ b/packages/obonode/obojobo-chunks-youtube/youtube-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 ( -
)}
- + ) } } From 54b793e1508f14ecc950cb4654a2e69d8f595178 Mon Sep 17 00:00:00 2001 From: Mauricio Date: Mon, 10 Jan 2022 10:53:30 -0400 Subject: [PATCH 2/3] Vertically aligned custom option on figure node --- .../image-properties-modal.scss | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss b/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss index 4ee7c21803..8ed6837104 100644 --- a/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss +++ b/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss @@ -50,21 +50,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.3em 0; } } From 66821260847d5ef7738c7b62b41fe3841de9672f Mon Sep 17 00:00:00 2001 From: Brandon Stull Date: Fri, 28 Jan 2022 14:08:19 -0500 Subject: [PATCH 3/3] #1775 Minor CSS adjustments to keep the appearance of the new dialogs as close as possible to that of the old dialogs. --- .../scripts/common/components/modal/settings-dialog.scss | 1 - .../obojobo-chunks-figure/image-properties-modal.scss | 6 +++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/app/obojobo-document-engine/src/scripts/common/components/modal/settings-dialog.scss b/packages/app/obojobo-document-engine/src/scripts/common/components/modal/settings-dialog.scss index 04a706e273..eeefae9c47 100644 --- a/packages/app/obojobo-document-engine/src/scripts/common/components/modal/settings-dialog.scss +++ b/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; diff --git a/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss b/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss index 8ed6837104..52530766a9 100644 --- a/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss +++ b/packages/obonode/obojobo-chunks-figure/image-properties-modal.scss @@ -1,5 +1,9 @@ @import '~styles/includes'; +.obojobo-draft--components--modal--settings-dialog .image-properties .row { + margin-bottom: 0; +} + .image-properties { text-align: left; display: flex; @@ -69,7 +73,7 @@ label { padding-left: 0.3em; - margin: 0.3em 0; + margin: 0; } }