Skip to content

Adopted the new settings dialog component for obo nodes #1944

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.

Sign up for GitHub

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

Merged
FrenjaminBanklin merged 3 commits into from
Feb 8, 2022
Merged

Adopted the new settings dialog component for obo nodes #1944

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ee5e2b
Standardized the editor's settings dialogs
Jan 6, 2022
54b793e
Vertically aligned custom option on figure node
Jan 10, 2022
6682126
#1775 Minor CSS adjustments to keep the appearance of the new dialogs…
FrenjaminBanklin Jan 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions packages/obonode/obojobo-chunks-figure/__snapshots__/choose-image-modal.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

16 changes: 8 additions & 8 deletions packages/obonode/obojobo-chunks-figure/__snapshots__/image-properties-modal.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 6 additions & 7 deletions packages/obonode/obojobo-chunks-figure/choose-image-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -157,7 +156,7 @@ class ChooseImageModal extends React.Component {
) : null}
</div>
</div>
</SimpleDialog>
</SettingsDialog>
)
}
}
Expand Down
3 changes: 2 additions & 1 deletion packages/obonode/obojobo-chunks-figure/choose-image-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
15 changes: 8 additions & 7 deletions packages/obonode/obojobo-chunks-figure/image-properties-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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={{
Expand All @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -265,10 +266,10 @@ class ImageProperties extends React.Component {
</div>
) : null}
</div>
</div>
</SettingsDialogRow>
</div>
</div>
</SimpleDialog>
</SettingsDialog>
)
}
}
Expand Down
18 changes: 12 additions & 6 deletions packages/obonode/obojobo-chunks-figure/image-properties-modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
text-align: left;
display: flex;
width: 22em;
margin: 0 auto;

&.is-size-large,
&.is-size-medium {
Expand Down Expand Up @@ -49,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;
}
}

Expand Down
30 changes: 15 additions & 15 deletions packages/obonode/obojobo-chunks-youtube/__snapshots__/youtube-properties-modal.test.js.snap
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 3 additions & 5 deletions packages/obonode/obojobo-chunks-youtube/youtube-properties-modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) {
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -232,7 +230,7 @@ class YouTubeProperties extends React.Component {
</Button>
)}
</form>
</SimpleDialog>
</SettingsDialog>
)
}
}
Expand Down