Skip to content
This repository has been archived by the owner on Feb 26, 2024. It is now read-only.

New: Added code viewer for the page (fixes #14) #15

Merged
merged 6 commits into from
Sep 24, 2019
Merged

Conversation

swatikode
Copy link
Contributor

What is the purpose of this pull request? (put an "X" next to item)

[] Documentation update
[] Bug fix
[x] New functionality
[] Changes an existing functionality
[] Other, please explain:

What changes did you make? (Give an overview)
Added a code viewer on the page
Fixes issue #14

Add any screenshots
image

image

On carbon-graphs - It will appear much better after issue https://github.com/cerner/carbon-graphs/issues/50 is fixed
image

The accordian will only exist if a the page comes with a source code.
image

@swatikode
Copy link
Contributor Author

I should also probably update the readme. Will do that.

@abhijit945 abhijit945 added the enhancement New feature or request label Sep 24, 2019
package.json Show resolved Hide resolved
dev/index.js Show resolved Hide resolved
src/components/Drawer/ResponsiveDrawer.js Outdated Show resolved Hide resolved
src/components/Drawer/ResponsiveDrawer.js Outdated Show resolved Hide resolved
src/components/Drawer/ResponsiveDrawer.js Show resolved Hide resolved
src/components/Drawer/ResponsiveDrawer.js Outdated Show resolved Hide resolved
src/components/Drawer/ResponsiveDrawer.js Show resolved Hide resolved
src/components/Drawer/ResponsiveDrawer.js Outdated Show resolved Hide resolved
src/components/Drawer/ResponsiveDrawer.js Outdated Show resolved Hide resolved
const codeViewer = getPageSource(pages, currentPage.pathname) ?
(
<ExpansionPanel className={classes.expansionPanel}>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon/>}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<Paper className={classes.expansionPanel}>
    <ExpansionPanel>
        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
            <Typography variant="button" color="secondary">
                Source
            </Typography>
        </ExpansionPanelSummary>
        <ExpansionPanelDetails>
            <AceEditor
                className={classes.aceEditor}
                value={getPageSource(pages, currentPage.pathname)}
                name="APP_CONTENT_CODE"
                mode="javascript"
                theme="twilight"
                setOptions={{
                    showLineNumbers: true,
                    showGutter: true
                }}
                readOnly
            />
        </ExpansionPanelDetails>
    </ExpansionPanel>
</Paper>

Rounded expand more icon
Rounded the paper for editor
Copy link
Contributor

@abhijit945 abhijit945 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can amend the commit to New: Added code viewer for the page (fixes #14) to auto close the issue along with this.

code: PropTypes.string.isRequired
};

export default withStyles(styles, { withTheme: true })(SourceCodeViewer);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: Newline

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added

return (
<Paper className={classes.expansionPanelContainer}>
<ExpansionPanel
classes={{
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is rounded by default isnt it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh yes it is, I removed it

});

function SourceCodeViewer(props) {
const { classes, code } = props;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can use useStyles hook for this. It will save you a prop.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good tip, I updated to useStyles

@abhijit945 abhijit945 changed the title New: Added code viewer for the page New: Added code viewer for the page (fixes #14) Sep 24, 2019
@swatikode swatikode merged commit 6749212 into master Sep 24, 2019
@swatikode swatikode deleted the CodeViewerReview branch September 24, 2019 19:20
abhijit945 pushed a commit that referenced this pull request Sep 24, 2019
# [1.5.0](v1.4.2...v1.5.0) (2019-09-24)

### New

* Added code viewer for the page (fixes #14) (#15) ([6749212](6749212)), closes [#14](#14) [#15](#15) [#14](#14)
@abhijit945
Copy link
Contributor

🎉 This PR is included in version 1.5.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants