scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #71 from mewtaylor/feature/splash-admin-panel

Browse source 
Add `AdminPanel` component
This commit is contained in:
Matthew Taylor 2015-10-19 18:45:33 -04:00
commit 44aac35660
3 changed files with 184 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
src/components/adminpanel/adminpanel.jsx Normal file
View 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}>
&gt;
</span>
</div>
);
}
}
});
module.exports = AdminPanel;

68
src/components/adminpanel/adminpanel.scss Normal file
View 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;
}
}
}
}
}
}

37
src/views/splash/splash.jsx
View file

@ -5,7 +5,9 @@ var Api = require('../../mixins/api.jsx');
var Session = require('../../mixins/session.jsx');
var Activity = require('../../components/activity/activity.jsx');
var AdminPanel = require('../../components/adminpanel/adminpanel.jsx');
var Box = require('../../components/box/box.jsx');
var Button = require('../../components/forms/button.jsx');
var Carousel = require('../../components/carousel/carousel.jsx');
var Intro = require('../../components/intro/intro.jsx');
var News = require('../../components/news/news.jsx');
@ -68,6 +70,41 @@ var Splash = React.createClass({
</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>
);
}