Merge pull request #817 from MITx/feature/tomg/cms-library
Feature/tomg/cms library
This commit is contained in:
Calen Pennington
@@ -616,3 +616,9 @@ def remove_user(request, org, course, name):
|
||||
remove_user_from_course_group(request.user, user, location, EDITOR_ROLE_NAME)
|
||||
|
||||
return create_json_response()
|
||||
|
||||
@login_required
|
||||
@ensure_csrf_cookie
|
||||
def asset_index(request, location):
|
||||
return render_to_response('asset_index.html',{})
|
||||
|
||||
|
||||
BIN
cms/static/img/close-icon.png
Normal file
BIN
cms/static/img/close-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
@@ -13,15 +13,62 @@ $(document).ready(function() {
|
||||
$newComponentTypePicker = $('.new-component');
|
||||
$newComponentTemplatePickers = $('.new-component-templates');
|
||||
$newComponentButton = $('.new-component-button');
|
||||
$body.bind('keyup', onKeyUp);
|
||||
|
||||
$('.expand-collapse-icon').bind('click', toggleSubmodules);
|
||||
$('.visibility-options').bind('change', setVisibility);
|
||||
|
||||
$('.unit-history ol a').bind('click', showHistoryModal);
|
||||
$modal.bind('click', hideHistoryModal);
|
||||
$modal.bind('click', hideModal);
|
||||
$modalCover.bind('click', hideHistoryModal);
|
||||
|
||||
$('.assets .upload-button').bind('click', showUploadModal);
|
||||
$('.upload-modal .close-button').bind('click', hideModal);
|
||||
});
|
||||
|
||||
function showUploadModal(e) {
|
||||
e.preventDefault();
|
||||
$('.upload-modal').show();
|
||||
$('.file-input').bind('change', startUpload);
|
||||
$('.upload-modal .choose-file-button').bind('click', showFileSelectionMenu);
|
||||
$modalCover.show();
|
||||
}
|
||||
|
||||
function showFileSelectionMenu(e) {
|
||||
e.preventDefault();
|
||||
$('.file-input').click();
|
||||
}
|
||||
|
||||
function startUpload(e) {
|
||||
$('.upload-modal h1').html('Uploading…');
|
||||
$('.upload-modal .file-name').html($('.file-input').val());
|
||||
$('.upload-modal .choose-file-button').hide();
|
||||
$('.upload-modal .progress-bar').removeClass('loaded').show();
|
||||
$('.upload-modal .progress-fill').html('').css('width', '0').animate({
|
||||
'width': '100%'
|
||||
}, 1500);
|
||||
setTimeout(markAsLoaded, 1500);
|
||||
}
|
||||
|
||||
function markAsLoaded() {
|
||||
$('.upload-modal .copy-button').css('display', 'inline-block');
|
||||
$('.upload-modal .progress-bar').addClass('loaded');
|
||||
$('.upload-modal .progress-fill').html('loaded successfully');
|
||||
$('.upload-modal .choose-file-button').html('Load Another File').show();
|
||||
}
|
||||
|
||||
function hideModal(e) {
|
||||
e.preventDefault();
|
||||
$('.modal').hide();
|
||||
$modalCover.hide();
|
||||
}
|
||||
|
||||
function onKeyUp(e) {
|
||||
if(e.which == 87) {
|
||||
$body.toggleClass('show-wip');
|
||||
}
|
||||
}
|
||||
|
||||
function toggleSubmodules(e) {
|
||||
e.preventDefault();
|
||||
$(this).toggleClass('expand').toggleClass('collapse');
|
||||
|
||||
160
cms/static/sass/_assets.scss
Normal file
160
cms/static/sass/_assets.scss
Normal file
@@ -0,0 +1,160 @@
|
||||
.assets {
|
||||
input.asset-search-input {
|
||||
float: left;
|
||||
width: 260px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
@include blue-button;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.asset-library {
|
||||
@include clearfix;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid #c5cad4;
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 10px 20px;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
thead th {
|
||||
background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .1)) #ced2db;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
|
||||
}
|
||||
|
||||
tbody {
|
||||
background: #fff;
|
||||
|
||||
tr {
|
||||
border-top: 1px solid #c5cad4;
|
||||
|
||||
&:first-child {
|
||||
border-top: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thumb-col {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.date-col {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.embed-col {
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
width: 100px;
|
||||
max-height: 80px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pagination {
|
||||
float: right;
|
||||
margin: 15px 10px;
|
||||
|
||||
ol, li {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
height: 25px;
|
||||
padding: 0 4px;
|
||||
text-align: center;
|
||||
line-height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.upload-modal {
|
||||
display: none;
|
||||
width: 640px !important;
|
||||
margin-left: -320px !important;
|
||||
|
||||
.modal-body {
|
||||
height: auto !important;
|
||||
overflow-y: auto !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.file-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.choose-file-button {
|
||||
@include blue-button;
|
||||
padding: 10px 82px 12px;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
display: none;
|
||||
width: 350px;
|
||||
height: 50px;
|
||||
margin: 30px auto 10px;
|
||||
border: 1px solid $blue;
|
||||
|
||||
&.loaded {
|
||||
border-color: #66b93d;
|
||||
|
||||
.progress-fill {
|
||||
background: #66b93d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
width: 0%;
|
||||
height: 50px;
|
||||
background: $blue;
|
||||
color: #fff;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
float: none;
|
||||
margin: 40px 0 30px;
|
||||
font-size: 34px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
@include white-button;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 15px;
|
||||
width: 29px;
|
||||
height: 29px;
|
||||
padding: 0 !important;
|
||||
border-radius: 17px !important;
|
||||
line-height: 29px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.copy-button {
|
||||
@include white-button;
|
||||
display: none;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
}
|
||||
@@ -24,10 +24,16 @@ a {
|
||||
}
|
||||
|
||||
h1 {
|
||||
float: left;
|
||||
font-size: 28px;
|
||||
margin: 36px 6px;
|
||||
}
|
||||
|
||||
.page-actions {
|
||||
float: right;
|
||||
margin-top: 42px;
|
||||
}
|
||||
|
||||
.main-wrapper {
|
||||
position: relative;
|
||||
margin: 0 40px;
|
||||
@@ -37,6 +43,10 @@ h1 {
|
||||
position: relative;
|
||||
max-width: 1280px;
|
||||
margin: auto;
|
||||
|
||||
> article {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
.window {
|
||||
@@ -189,20 +199,21 @@ label {
|
||||
}
|
||||
}
|
||||
|
||||
.wip {
|
||||
outline: 1px solid #f00 !important;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wip-box {
|
||||
@extend .wip;
|
||||
&:after {
|
||||
content: "WIP";
|
||||
font-size: 8px;
|
||||
padding: 2px;
|
||||
background: #f00;
|
||||
color: #fff;
|
||||
@include position(absolute, 0px 0px 0 0);
|
||||
body.show-wip {
|
||||
.wip {
|
||||
outline: 1px solid #f00 !important;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.wip-box {
|
||||
@extend .wip;
|
||||
&:after {
|
||||
content: "WIP";
|
||||
font-size: 8px;
|
||||
padding: 2px;
|
||||
background: #f00;
|
||||
color: #fff;
|
||||
@include position(absolute, 0px 0px 0 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
&:hover {
|
||||
background-color: #d9e3ee;
|
||||
color: #6d788b;
|
||||
color: #6d788b;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -41,6 +41,13 @@
|
||||
background: url(../img/list-icon.png) no-repeat;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
display: inline-block;
|
||||
width: 13px;
|
||||
height: 12px;
|
||||
background: url(../img/close-icon.png) no-repeat;
|
||||
}
|
||||
|
||||
.home-icon {
|
||||
display: inline-block;
|
||||
width: 19px;
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
background: rgba(0, 0, 0, .8);
|
||||
}
|
||||
|
||||
.history-modal {
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 60px;
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
@import "courseware";
|
||||
@import "subsection";
|
||||
@import "unit";
|
||||
@import "assets";
|
||||
@import "course-info";
|
||||
@import "graphics";
|
||||
@import "modal";
|
||||
|
||||
200
cms/templates/asset_index.html
Normal file
200
cms/templates/asset_index.html
Normal file
@@ -0,0 +1,200 @@
|
||||
<%inherit file="base.html" />
|
||||
<%! from django.core.urlresolvers import reverse %>
|
||||
<%block name="bodyclass">assets</%block>
|
||||
<%block name="title">CMS Courseware Overview</%block>
|
||||
|
||||
<%block name="content">
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<h1>Asset Library</h1>
|
||||
<div class="page-actions">
|
||||
<a href="#" class="upload-button">Upload New File</a><input type="text" class="asset-search-input search wip-box" placeholder="search assets" />
|
||||
</div>
|
||||
<article class="asset-library">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="thumb-col"></th>
|
||||
<th class="name-col">Name</th>
|
||||
<th class="date-col">Date Added</th>
|
||||
<th class="embed-col">Embed</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/3185/screenshots/149571/picture_39.png"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-1.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/4573/screenshots/157708/final.png"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-2.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/15101/screenshots/228625/star_wars_lightsbaer_2.jpg"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-2.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/3185/screenshots/149571/picture_39.png"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-1.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/4573/screenshots/157708/final.png"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-2.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/15101/screenshots/228625/star_wars_lightsbaer_2.jpg"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-2.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/3185/screenshots/149571/picture_39.png"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-1.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/4573/screenshots/157708/final.png"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-2.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/15101/screenshots/228625/star_wars_lightsbaer_2.jpg"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-2.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="thumb-col">
|
||||
<div class="thumb"><img src="http://dribbble.s3.amazonaws.com/users/3185/screenshots/149571/picture_39.png"></div>
|
||||
</td>
|
||||
<td class="name-col">
|
||||
<a href="#" class="filename">raygun-1.jpg</a>
|
||||
</td>
|
||||
<td class="date-col">
|
||||
10/2/2012
|
||||
</td>
|
||||
<td class="embed-col">
|
||||
<a href="#">copy</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<nav class="pagination">
|
||||
Page:
|
||||
<ol class="pages">
|
||||
<li>1</li>
|
||||
<li><a href="#">2</a></li>
|
||||
<li><a href="#">3</a></li>
|
||||
<li><a href="#">4</a></li>
|
||||
<li><a href="#">5</a></li>
|
||||
</ol>
|
||||
<a href="#" class="next">»</a>
|
||||
</nav>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-modal modal">
|
||||
<a href="#" class="close-button"><span class="close-icon"></span></a>
|
||||
<div class="modal-body">
|
||||
<h1>Upload New File</h1>
|
||||
<p class="file-name"></a>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill"></div>
|
||||
</div>
|
||||
<a href="#" class="copy-button">Copy Embed Link</a>
|
||||
<div class="file-chooser">
|
||||
<a href="#" class="choose-file-button">Choose File</a>
|
||||
<input type="file" class="file-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-cover"></div>
|
||||
|
||||
</%block>
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
<div class="main-wrapper">
|
||||
<div class="inner-wrapper">
|
||||
<h1>My Courses</h1>
|
||||
<h1>My Courses</h1>
|
||||
<article class="my-classes">
|
||||
<a href="#" class="new-course-button wip-box"><span class="plus-icon"></span> New Course</a>
|
||||
<ul class="class-list">
|
||||
|
||||
@@ -28,7 +28,9 @@ urlpatterns = ('',
|
||||
url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/course/(?P<name>[^/]+)/add_user$',
|
||||
'contentstore.views.add_user', name='add_user'),
|
||||
url(r'^(?P<org>[^/]+)/(?P<course>[^/]+)/course/(?P<name>[^/]+)/remove_user$',
|
||||
'contentstore.views.remove_user', name='remove_user')
|
||||
'contentstore.views.remove_user', name='remove_user'),
|
||||
url(r'^assets/(?P<location>.*?)$', 'contentstore.views.asset_index', name='asset_index')
|
||||
|
||||
|
||||
)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user