Skip to content

E
edx-platform
Commit f16e7b2e by Tom Giannattasio
Options

added asset library widget template

parent d521c850
Showing with 182 additions and 91 deletions
cms/static/js/html-editor.js
......@@ -2,6 +2,7 @@ var $body;
var $htmlPreview;
var $htmlEditor;
var $visualEditor;
var $assetWidget;
var visualEditor;
var htmlEditor;
......@@ -33,6 +34,8 @@ function initHTMLEditor($editor, $prev) {
onclick : function() {
ed.focus();
ed.selection.setContent('This should open the studio asset picker.');
$assetWidget = $($('#asset-library-widget').html());
$body.append($assetWidget);
}
});
}
......
cms/static/sass/_assets.scss
......@@ -13,94 +13,7 @@
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 {
@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
background-color: #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;
}
}
.name-col {
font-size: 14px;
}
.date-col {
font-size: 12px;
}
}
.thumb-col {
width: 100px;
}
.date-col {
width: 220px;
}
.embed-col {
width: 250px;
}
.embeddable-xml-input {
@include box-shadow(none);
width: 100%;
}
.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;
}
}
}
.show-xml {
.show-xml {
@include blue-button;
}
}
......@@ -191,4 +104,99 @@
display: none;
margin-bottom: 100px;
}
}
.asset-library {
@include clearfix;
&.widget {
position: absolute;
width: 900px;
margin-left: -450px;
z-index: 99999;
}
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 {
@include linear-gradient(top, transparent, rgba(0, 0, 0, .1));
background-color: #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;
}
}
.name-col {
font-size: 14px;
}
.date-col {
font-size: 12px;
}
}
.thumb-col {
width: 100px;
}
.date-col {
width: 220px;
}
.embed-col {
width: 250px;
}
.embeddable-xml-input {
@include box-shadow(none);
width: 100%;
}
.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;
}
}
}
\ No newline at end of file
cms/templates/unit.html
......@@ -23,7 +23,7 @@
switch($(this).attr('data-tab')) {
case 'simple':
currentEditor = simpleEditor;
$(simpleEditor.getWrapperElement()).show();
$(simpleEditor.getWrapperElement()).show();
$(xmlEditor.getWrapperElement()).hide();
$(simpleEditor).focus();
break;
......@@ -53,6 +53,85 @@
<script src="/static/js/tiny_mce/tiny_mce.js"></script>
<script src="/static/js/tiny_mce/jquery.tinymce.js"></script>
<script type="text/template" id="asset-library-widget">
<article class="asset-library widget">
<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 id="asset_table_body">
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">asset name</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
date
</td>
<td class="embed-col">
<input type="text" class="embeddable-xml-input" value='<img src="#"/>'>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">asset name</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
date
</td>
<td class="embed-col">
<input type="text" class="embeddable-xml-input" value='<img src="#"/>'>
</td>
</tr>
<tr data-id="id">
<td class="thumb-col">
<div class="thumb">
<img src="/">
</div>
</td>
<td class="name-col">
<a href="#" class="filename">asset name</a>
<div class="embeddable-xml"></div>
</td>
<td class="date-col">
date
</td>
<td class="embed-col">
<input type="text" class="embeddable-xml-input" value='<img src="#"/>'>
</td>
</tr>
</tbody>
</table>
<nav class="pagination wip-box">
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>
</script>
<script type="text/template" id="simple-editor-cheatsheet">
<article class="simple-editor-cheatsheet">
<div class="cheatsheet-wrapper">
......@@ -112,7 +191,7 @@
<script type="text/template" id="component-actions">
<div class="component-actions">
<a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a>
<a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>
<a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a>
</div>
<a href="#" class="drag-handle"></a>
</script>
......@@ -355,7 +434,7 @@
</li>
</ol>
</li>
</ol>
</ol>
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment