Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: [AXIMST-23] Course unit - Sidebar with unit info (#117)
* feat: added Sidebar with unit info * feat: added unit location * refactor: added legacy behavior * feat: added live variant * refactor: code refactoring * feat: added tests and translations * feat: added new font size * refactor: after review
- Loading branch information
1 parent
62ae4b5
commit 55a9888
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| %base-font-params { | ||
| font-size: $font-size-sm; | ||
| line-height: $line-height-base; | ||
| } | ||
|
|
||
| .course-unit-sidebar { | ||
| .course-unit-sidebar-header { | ||
| padding: $spacer $spacer map-get($spacers, 3\.5); | ||
|
|
||
| .course-unit-sidebar-header-icon { | ||
| margin-right: map-get($spacers, 1); | ||
| } | ||
|
|
||
| .course-unit-sidebar-header-title { | ||
| font-size: $font-size-base; | ||
| line-height: $line-height-base; | ||
| } | ||
| } | ||
|
|
||
| .course-unit-sidebar-footer { | ||
| padding: 0 $spacer $spacer; | ||
|
|
||
| .course-unit-sidebar-visibility { | ||
| .course-unit-sidebar-visibility-title { | ||
| font-weight: $font-weight-normal; | ||
| color: $gray-700; | ||
|
|
||
| @extend %base-font-params; | ||
| } | ||
|
|
||
| .course-unit-sidebar-location-description { | ||
| font-size: $font-size-xs; | ||
| line-height: $line-height-base; | ||
| } | ||
|
|
||
| .course-unit-sidebar-visibility-copy { | ||
| font-weight: $font-weight-bold; | ||
| color: $gray-700; | ||
|
|
||
| @extend %base-font-params; | ||
| } | ||
|
|
||
| .course-unit-sidebar-visibility-checkbox .pgn__form-label { | ||
| font-size: $font-size-sm; | ||
| line-height: $headings-line-height; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .course-unit-sidebar-date { | ||
| padding: 0 $spacer $spacer; | ||
|
|
||
| @extend %base-font-params; | ||
|
|
||
| .course-unit-sidebar-date-stage { | ||
| font-weight: $font-weight-normal; | ||
|
|
||
| @extend %base-font-params; | ||
| } | ||
|
|
||
| .course-unit-sidebar-date-timestamp { | ||
| color: $gray-700; | ||
|
|
||
| @extend %base-font-params; | ||
| } | ||
| } | ||
|
|
||
| &.is-stuff-only .course-unit-sidebar-date-and-with { | ||
| text-decoration: line-through; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { useSelector } from 'react-redux'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
|
|
||
| import { getCourseUnitData } from '../../data/selectors'; | ||
| import { getReleaseInfo } from '../utils'; | ||
|
|
||
| const ReleaseInfoComponent = () => { | ||
| const intl = useIntl(); | ||
| const { | ||
| releaseDate, | ||
| releaseDateFrom, | ||
| } = useSelector(getCourseUnitData); | ||
| const releaseInfo = getReleaseInfo(intl, releaseDate, releaseDateFrom); | ||
|
|
||
| if (releaseInfo.isScheduled) { | ||
| return ( | ||
| <span className="course-unit-sidebar-date-and-with"> | ||
| <h6 className="course-unit-sidebar-date-timestamp m-0 d-inline"> | ||
| {releaseInfo.releaseDate} | ||
| </h6> | ||
| {releaseInfo.sectionNameMessage} | ||
| </span> | ||
| ); | ||
| } | ||
|
|
||
| return releaseInfo.message; | ||
| }; | ||
|
|
||
| export default ReleaseInfoComponent; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { Card, Stack } from '@openedx/paragon'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
|
|
||
| import { getCourseUnitData } from '../../data/selectors'; | ||
| import { getPublishInfo } from '../utils'; | ||
| import messages from '../messages'; | ||
| import ReleaseInfoComponent from './ReleaseInfoComponent'; | ||
|
|
||
| const SidebarBody = ({ releaseLabel, isDisplayUnitLocation, locationId }) => { | ||
| const intl = useIntl(); | ||
| const { | ||
| editedOn, | ||
| editedBy, | ||
| hasChanges, | ||
| publishedBy, | ||
| publishedOn, | ||
| } = useSelector(getCourseUnitData); | ||
|
|
||
| return ( | ||
| <Card.Body className="course-unit-sidebar-date"> | ||
| <Stack> | ||
| {isDisplayUnitLocation ? ( | ||
| <span> | ||
| <h5 className="course-unit-sidebar-date-stage m-0"> | ||
| {intl.formatMessage(messages.unitLocationTitle)} | ||
| </h5> | ||
| <p className="m-0 font-weight-bold"> | ||
| {locationId} | ||
| </p> | ||
| </span> | ||
| ) : ( | ||
| <> | ||
| <span> | ||
| {getPublishInfo(intl, hasChanges, editedBy, editedOn, publishedBy, publishedOn)} | ||
| </span> | ||
| <span className="mt-3.5"> | ||
| <h5 className="course-unit-sidebar-date-stage m-0"> | ||
| {releaseLabel} | ||
| </h5> | ||
| <ReleaseInfoComponent /> | ||
| </span> | ||
| <p className="mt-3.5 mb-0"> | ||
| {intl.formatMessage(messages.sidebarBodyNote)} | ||
| </p> | ||
| </> | ||
| )} | ||
| </Stack> | ||
| </Card.Body> | ||
| ); | ||
| }; | ||
|
|
||
| SidebarBody.propTypes = { | ||
| releaseLabel: PropTypes.string.isRequired, | ||
| isDisplayUnitLocation: PropTypes.bool, | ||
| locationId: PropTypes.string, | ||
| }; | ||
|
|
||
| SidebarBody.defaultProps = { | ||
| isDisplayUnitLocation: false, | ||
| locationId: null, | ||
| }; | ||
|
|
||
| export default SidebarBody; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { Icon, Stack } from '@openedx/paragon'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
|
|
||
| import { getCourseUnitData } from '../../data/selectors'; | ||
| import { getIconVariant } from '../utils'; | ||
| import messages from '../messages'; | ||
|
|
||
| const SidebarHeader = ({ title, visibilityState, isDisplayUnitLocation }) => { | ||
| const intl = useIntl(); | ||
| const { hasChanges, published } = useSelector(getCourseUnitData); | ||
| const { iconSrc, colorVariant } = getIconVariant(visibilityState, published, hasChanges); | ||
|
|
||
| return ( | ||
| <Stack className="course-unit-sidebar-header" direction="horizontal"> | ||
| {!isDisplayUnitLocation && ( | ||
| <Icon | ||
| className="course-unit-sidebar-header-icon" | ||
| svgAttrs={{ color: colorVariant }} | ||
| src={iconSrc} | ||
| /> | ||
| )} | ||
| <h3 className="course-unit-sidebar-header-title m-0"> | ||
| {isDisplayUnitLocation ? intl.formatMessage(messages.sidebarHeaderUnitLocationTitle) : title} | ||
| </h3> | ||
| </Stack> | ||
| ); | ||
| }; | ||
|
|
||
| SidebarHeader.propTypes = { | ||
| title: PropTypes.string.isRequired, | ||
| visibilityState: PropTypes.string.isRequired, | ||
| isDisplayUnitLocation: PropTypes.bool, | ||
| }; | ||
|
|
||
| SidebarHeader.defaultProps = { | ||
| isDisplayUnitLocation: false, | ||
| }; | ||
|
|
||
| export default SidebarHeader; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| export { default as SidebarHeader } from './SidebarHeader'; | ||
| export { default as SidebarBody } from './SidebarBody'; | ||
| export { default as SidebarFooter } from './sidebar-footer'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| import { useSelector } from 'react-redux'; | ||
| import { Button } from '@openedx/paragon'; | ||
| import { useIntl } from '@edx/frontend-platform/i18n'; | ||
|
|
||
| import { getCourseUnitData } from '../../../data/selectors'; | ||
| import messages from '../../messages'; | ||
|
|
||
| const ActionButtons = () => { | ||
| const intl = useIntl(); | ||
| const { | ||
| published, | ||
| hasChanges, | ||
| enableCopyPasteUnits, | ||
| } = useSelector(getCourseUnitData); | ||
|
|
||
| return ( | ||
| <> | ||
| {(!published || hasChanges) && ( | ||
| <Button | ||
| className="mt-3.5" | ||
| variant="outline-primary" | ||
| size="sm" | ||
| > | ||
| {intl.formatMessage(messages.actionButtonPublishTitle)} | ||
| </Button> | ||
| )} | ||
| {(published && hasChanges) && ( | ||
| <Button | ||
| className="mt-2" | ||
| variant="link" | ||
| size="sm" | ||
| > | ||
| {intl.formatMessage(messages.actionButtonDiscardChangesTitle)} | ||
| </Button> | ||
| )} | ||
| {enableCopyPasteUnits && ( | ||
| <Button | ||
| className="mt-2" | ||
| variant="outline-primary" | ||
| size="sm" | ||
| > | ||
| {intl.formatMessage(messages.actionButtonCopyUnitTitle)} | ||
| </Button> | ||
| )} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| export default ActionButtons; | ||
Oops, something went wrong.