diff --git a/src/components/adminpanel/adminpanel.jsx b/src/components/adminpanel/adminpanel.jsx
index 4d9ac9e79..e22fa59a7 100644
--- a/src/components/adminpanel/adminpanel.jsx
+++ b/src/components/adminpanel/adminpanel.jsx
@@ -1,10 +1,9 @@
const bindAll = require('lodash.bindall');
+const classNames = require('classnames');
const connect = require('react-redux').connect;
const PropTypes = require('prop-types');
const React = require('react');
-const Button = require('../forms/button.jsx');
-
require('./adminpanel.scss');
class AdminPanel extends React.Component {
@@ -23,64 +22,37 @@ class AdminPanel extends React.Component {
}
render () {
if (!this.props.isAdmin) return false;
-
- if (this.state.showPanel) {
- return (
-
+ return (
+
+ {this.state.showPanel ? (
+
+
+ x
+
+
+
Admin Panel
+
+
+ {this.props.children}
+
+
+ ) : (
- x
+ >
-
-
Admin Panel
-
-
-
- {this.props.children}
- - Page Cache
- -
-
-
-
-
-
- );
- }
- return (
-
-
- >
-
+ )}
);
}
@@ -88,6 +60,7 @@ class AdminPanel extends React.Component {
AdminPanel.propTypes = {
children: PropTypes.node,
+ className: PropTypes.string,
isAdmin: PropTypes.bool
};
diff --git a/src/components/adminpanel/adminpanel.scss b/src/components/adminpanel/adminpanel.scss
index 6b8c36907..6ca7361bb 100644
--- a/src/components/adminpanel/adminpanel.scss
+++ b/src/components/adminpanel/adminpanel.scss
@@ -1,6 +1,6 @@
@import "../../colors";
-#admin-panel {
+.admin-panel {
position: fixed;
top: 0;
left: 0;
@@ -9,16 +9,11 @@
box-shadow: 0 2px 5px $box-shadow-gray;
background-color: $ui-gray;
padding: 1rem;
+ width: 230px;
height: 100%;
overflow: scroll;
text-shadow: none;
- &.visible {
- width: 20%;
- min-width: 180px;
- max-width: 230px;
- }
-
&.hidden {
width: 10px;
}
@@ -28,33 +23,6 @@
cursor: pointer;
}
- .admin-content {
- dl {
- list-style: none;
-
- dt {
- margin: 2rem 0 1rem 0;
- border-bottom: 1px solid $ui-dark-gray;
- font-size: large;
- font-weight: 700;
- }
-
- dd {
- margin-left: 0;
- }
- }
-
- ul {
- padding: 0;
-
- li {
- margin: 0;
- list-style: none;
-
- }
- }
- }
-
.button-row {
display: flex;
font-size: small;
diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx
index 3accc66fd..1e8862d73 100644
--- a/src/views/preview/presentation.jsx
+++ b/src/views/preview/presentation.jsx
@@ -11,6 +11,7 @@ const classNames = require('classnames');
const GUI = require('scratch-gui').default;
const IntlGUI = injectIntl(GUI);
+const AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
const decorateText = require('../../lib/decorate-text.jsx');
const FlexRow = require('../../components/flex-row/flex-row.jsx');
const Button = require('../../components/forms/button.jsx');
@@ -45,6 +46,7 @@ const onKeyPress = e => {
const PreviewPresentation = ({
addToStudioOpen,
+ adminModalOpen,
assetHost,
backpackHost,
canAddToStudio,
@@ -160,6 +162,18 @@ const PreviewPresentation = ({
return (
+
+
+
{ projectInfo && projectInfo.author && projectInfo.author.id && (
{banner}
@@ -530,6 +544,7 @@ const PreviewPresentation = ({
PreviewPresentation.propTypes = {
addToStudioOpen: PropTypes.bool,
+ adminModalOpen: PropTypes.bool,
assetHost: PropTypes.string,
backpackHost: PropTypes.string,
canAddToStudio: PropTypes.bool,
diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss
index d31fe246c..0cd34f0a8 100644
--- a/src/views/preview/preview.scss
+++ b/src/views/preview/preview.scss
@@ -35,6 +35,21 @@ $stage-width: 480px;
}
}
+ .admin-iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 100;
+ width: 252px;
+ height: 100%;
+ }
+
+ .admin-iframe.modal-open,
+ .project-admin-panel.modal-open {
+ background-color: transparent;
+ width: 100%;
+ }
+
.project-title {
font-size: 1.75rem;
font-weight: 500;
diff --git a/src/views/preview/project-view.jsx b/src/views/preview/project-view.jsx
index 3d752fc43..b694a71e8 100644
--- a/src/views/preview/project-view.jsx
+++ b/src/views/preview/project-view.jsx
@@ -45,6 +45,7 @@ class Preview extends React.Component {
'handleFavoriteToggle',
'handleLoadMore',
'handleLoveToggle',
+ 'handleMessage',
'handlePopState',
'handleReportClick',
'handleReportClose',
@@ -79,6 +80,7 @@ class Preview extends React.Component {
this.state = {
addToStudioOpen: false,
+ adminModalOpen: false,
extensions: [],
favoriteCount: 0,
invalidProject: parts.length === 1,
@@ -92,10 +94,12 @@ class Preview extends React.Component {
reportOpen: false,
singleCommentId: singleCommentId
};
- this.addEventListeners();
/* In the beginning, if user is on mobile and landscape, go to fullscreen */
this.setScreenFromOrientation();
}
+ componentDidMount () {
+ this.addEventListeners();
+ }
componentDidUpdate (prevProps, prevState) {
if (this.state.projectId > 0 &&
((this.props.sessionStatus !== prevProps.sessionStatus &&
@@ -139,10 +143,12 @@ class Preview extends React.Component {
addEventListeners () {
window.addEventListener('popstate', this.handlePopState);
window.addEventListener('orientationchange', this.setScreenFromOrientation);
+ window.addEventListener('message', this.handleMessage);
}
removeEventListeners () {
window.removeEventListener('popstate', this.handlePopState);
window.removeEventListener('orientationchange', this.setScreenFromOrientation);
+ window.removeEventListener('message', this.handleMessage);
}
fetchCommunityData () {
if (this.props.userPresent) {
@@ -258,6 +264,18 @@ class Preview extends React.Component {
handleDeleteComment (id, topLevelCommentId) {
this.props.handleDeleteComment(this.state.projectId, id, topLevelCommentId, this.props.user.token);
}
+ handleMessage (messageEvent) {
+ if (messageEvent.data === 'showDialog') {
+ this.setState({
+ adminModalOpen: true
+ });
+ }
+ if (messageEvent.data === 'hideDialog') {
+ this.setState({
+ adminModalOpen: false
+ });
+ }
+ }
handleReportComment (id, topLevelCommentId) {
this.props.handleReportComment(this.state.projectId, id, topLevelCommentId, this.props.user.token);
}
@@ -464,6 +482,7 @@ class Preview extends React.Component {
{featured}
- {this.props.isAdmin ? [
-
- Tools
-
-
-
- Homepage Cache
-
-
- -
-
-
Refresh row data:
-
-
-
-
-
+
+
+ For anonymous users:
+
+
+
+
+
+
+
- ] : []}
+ )}
);
diff --git a/src/views/splash/splash.scss b/src/views/splash/splash.scss
index cf6ab16e3..ffa865546 100644
--- a/src/views/splash/splash.scss
+++ b/src/views/splash/splash.scss
@@ -47,6 +47,33 @@
}
}
+.splash-admin-panel {
+ dl {
+ list-style: none;
+
+ dt {
+ margin: 2rem 0 1rem 0;
+ border-bottom: 1px solid $ui-dark-gray;
+ font-size: large;
+ font-weight: 700;
+ }
+
+ dd {
+ margin-left: 0;
+ }
+ }
+
+ ul {
+ padding: 0;
+
+ li {
+ margin: 0;
+ list-style: none;
+
+ }
+ }
+}
+
.modal-content.mod-confirmation {
width: 31.25rem;
}