mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-02-17 00:21:20 -05:00
Merge pull request #71 from mewtaylor/feature/splash-admin-panel
Add `AdminPanel` component
This commit is contained in:
Matthew Taylor
commit
44aac35660
3 changed files with 184 additions and 0 deletions
79
src/components/adminpanel/adminpanel.jsx
Normal file
79
src/components/adminpanel/adminpanel.jsx
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
var React = require('react');
|
||||||
|
|
||||||
|
var Button = require('../../components/forms/button.jsx');
|
||||||
|
var Session = require('../../mixins/session.jsx');
|
||||||
|
|
||||||
|
require('./adminpanel.scss');
|
||||||
|
|
||||||
|
var AdminPanel = React.createClass({
|
||||||
|
type: 'AdminPanel',
|
||||||
|
mixins: [
|
||||||
|
Session
|
||||||
|
],
|
||||||
|
getInitialState: function () {
|
||||||
|
return {showPanel: true};
|
||||||
|
},
|
||||||
|
handleToggleVisibility: function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
this.setState({showPanel: !this.state.showPanel});
|
||||||
|
},
|
||||||
|
render: function () {
|
||||||
|
// make sure user is present before checking if they're an admin. Don't show anything if user not an admin.
|
||||||
|
var showAdmin = false;
|
||||||
|
if (this.state.session.user) {
|
||||||
|
showAdmin = this.state.session.permissions.admin;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!showAdmin) return false;
|
||||||
|
|
||||||
|
if (this.state.showPanel) {
|
||||||
|
return (
|
||||||
|
<div id="admin-panel" className="visible">
|
||||||
|
<span
|
||||||
|
className="toggle"
|
||||||
|
onClick={this.handleToggleVisibility}>
|
||||||
|
|
||||||
|
x
|
||||||
|
</span>
|
||||||
|
<div className="admin-header">
|
||||||
|
<h3>Admin Panel</h3>
|
||||||
|
</div>
|
||||||
|
<div className="admin-content">
|
||||||
|
<dl>
|
||||||
|
{this.props.children}
|
||||||
|
<dt>Page Cache</dt>
|
||||||
|
<dd>
|
||||||
|
<ul className="cache-list">
|
||||||
|
<li>
|
||||||
|
<form method="post" action="/scratch_admin/page/clear-anon-cache/">
|
||||||
|
<input type="hidden" name="path" value="/" />
|
||||||
|
<div className="button-row">
|
||||||
|
<span>For anonymous users:</span>
|
||||||
|
<Button type="submit">
|
||||||
|
<span>Clear</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div id="admin-panel" className="hidden">
|
||||||
|
<span
|
||||||
|
className="toggle"
|
||||||
|
onClick={this.handleToggleVisibility}>
|
||||||
|
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
module.exports = AdminPanel;
|
||||||
68
src/components/adminpanel/adminpanel.scss
Normal file
68
src/components/adminpanel/adminpanel.scss
Normal file
|
|
@ -0,0 +1,68 @@
|
||||||
|
@import "../../colors";
|
||||||
|
|
||||||
|
#admin-panel {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 99;
|
||||||
|
border: 1px solid $ui-gray;
|
||||||
|
box-shadow: 0 2px 5px $box-shadow-gray;
|
||||||
|
background-color: $ui-gray;
|
||||||
|
padding: 1rem;
|
||||||
|
height: 100%;
|
||||||
|
overflow: scroll;
|
||||||
|
text-shadow: none;
|
||||||
|
|
||||||
|
&.visible {
|
||||||
|
width: 20%;
|
||||||
|
min-width: 180px;
|
||||||
|
max-width: 230px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
float: right;
|
||||||
|
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;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.button {
|
||||||
|
background-color: $ui-dark-gray;
|
||||||
|
padding: .5rem 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -5,7 +5,9 @@ var Api = require('../../mixins/api.jsx');
|
||||||
var Session = require('../../mixins/session.jsx');
|
var Session = require('../../mixins/session.jsx');
|
||||||
|
|
||||||
var Activity = require('../../components/activity/activity.jsx');
|
var Activity = require('../../components/activity/activity.jsx');
|
||||||
|
var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
|
||||||
var Box = require('../../components/box/box.jsx');
|
var Box = require('../../components/box/box.jsx');
|
||||||
|
var Button = require('../../components/forms/button.jsx');
|
||||||
var Carousel = require('../../components/carousel/carousel.jsx');
|
var Carousel = require('../../components/carousel/carousel.jsx');
|
||||||
var Intro = require('../../components/intro/intro.jsx');
|
var Intro = require('../../components/intro/intro.jsx');
|
||||||
var News = require('../../components/news/news.jsx');
|
var News = require('../../components/news/news.jsx');
|
||||||
|
|
@ -68,6 +70,41 @@ var Splash = React.createClass({
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
<AdminPanel>
|
||||||
|
<dt>Tools</dt>
|
||||||
|
<dd>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="/scratch_admin/tickets">Ticket Queue</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/scratch_admin/ip-search/">IP Search</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="/scratch_admin/email-search/">Email Search</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
<dt>Homepage Cache</dt>
|
||||||
|
<dd>
|
||||||
|
<ul className="cache-list">
|
||||||
|
<li>
|
||||||
|
<form
|
||||||
|
id="homepage-refresh-form"
|
||||||
|
method="post"
|
||||||
|
action="/scratch_admin/homepage/clear-cache/">
|
||||||
|
|
||||||
|
<div className="button-row">
|
||||||
|
<span>Refresh row data:</span>
|
||||||
|
<Button type="submit">
|
||||||
|
<span>Refresh</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</dd>
|
||||||
|
</AdminPanel>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue