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
-
-
    -
  • -
    - -
    - For anonymous users: - -
    -
    -
  • -
-
-
-
-
- ); - } - 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 (
+ +