Skip to content

E
edx-platform
Commit 89ad8cc5 by chrisndodge
Options

Merge pull request #1086 from MITx/feature/studio/tom/tabs-cleanup 

Static tabs cleanup
parents 62fa734c 6cfabb76
Showing with 216 additions and 136 deletions
cms/djangoapps/contentstore/views.py
......@@ -496,11 +496,20 @@ def load_preview_module(request, preview_id, descriptor, instance_state, shared_
error_msg=exc_info_to_str(sys.exc_info())
).xmodule_constructor(system)(None, None)
module.get_html = wrap_xmodule(
module.get_html,
module,
"xmodule_display.html",
)
# cdodge: Special case
if module.location.category == 'static_tab':
module.get_html = wrap_xmodule(
module.get_html,
module,
"xmodule_tab_display.html",
)
else:
module.get_html = wrap_xmodule(
module.get_html,
module,
"xmodule_display.html",
)
module.get_html = replace_static_urls(
module.get_html,
module.metadata.get('data_dir', module.location.course),
......
cms/static/sass/_base.scss
......@@ -180,6 +180,11 @@ code {
padding: 20px;
}
.details {
margin-bottom: 30px;
font-size: 14px;
}
h4 {
padding: 6px 14px;
border-bottom: 1px solid #cbd1db;
......@@ -337,4 +342,29 @@ body.show-wip {
content: '';
@extend .spinner-icon;
}
}
.new-button {
@include grey-button;
padding: 20px 0;
text-align: center;
&.big {
display: block;
}
}
.edit-button.standard,
.delete-button.standard {
float: left;
@include white-button;
padding: 3px 10px 4px;
margin-left: 7px;
font-size: 12px;
font-weight: 400;
.edit-icon,
.delete-icon {
margin-right: 4px;
}
}
\ No newline at end of file
cms/static/sass/_cms_mixins.scss
......@@ -48,18 +48,18 @@
}
@mixin white-button {
@include button;
border: 1px solid $darkGrey;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%);
background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #5d6779;
&:hover {
background-color: #f2f6f9;
color: #5d6779;
}
@include button;
border: 1px solid $darkGrey;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #778192;
&:hover {
background-color: #f2f6f9;
color: #778192;
}
}
@mixin orange-button {
......
cms/static/sass/_courseware.scss
......@@ -5,12 +5,7 @@ input.courseware-unit-search-input {
}
.courseware-overview {
.new-courseware-section-button {
@include grey-button;
display: block;
text-align: center;
padding: 12px 0;
}
}
.courseware-section {
......
cms/static/sass/_graphics.scss
......@@ -137,6 +137,10 @@
height: 11px;
margin-right: 8px;
background: url(../img/plus-icon.png) no-repeat;
&.white {
background: url(../img/plus-icon-white.png) no-repeat;
}
}
.plus-icon-small {
......
cms/static/sass/_lms.scss
.components li {
.component {
font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
......
cms/static/sass/_static-pages.scss
......@@ -6,6 +6,72 @@
padding: 12px 0;
}
.unit-body {
padding: 30px 40px;
}
.components > li {
margin: 0;
border-radius: 0;
&.new-component-item {
margin-top: 20px;
}
}
.component {
border: 1px solid $mediumGrey;
border-top: none;
&:first-child {
border-top: 1px solid $mediumGrey;
}
&:hover {
border: 1px solid $mediumGrey;
border-top: none;
&:first-child {
border-top: 1px solid $mediumGrey;
}
.drag-handle {
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
}
}
.drag-handle {
top: 0;
right: 0;
z-index: 11;
width: 35px;
border: none;
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
&:hover {
background: url(../img/drag-handles.png) center no-repeat $lightGrey;
}
}
.component-actions {
top: 26px;
right: 44px;
}
}
.component.editing {
.xmodule_display {
display: none;
}
}
.xmodule_display {
padding: 20px 20px 22px;
font-size: 24px;
font-weight: 300;
background: $lightGrey;
}
.static-page-item {
position: relative;
margin: 10px 0;
......
cms/static/sass/_unit.scss
......@@ -54,94 +54,11 @@
position: relative;
z-index: 10;
margin: 20px 40px;
border: 1px solid #d1ddec;
border-radius: 3px;
background: #fff;
@include transition(none);
&:hover {
border-color: #6696d7;
.drag-handle,
.component-actions a {
background-color: $blue;
}
.drag-handle {
border-color: $blue;
}
}
&.editing {
border-color: #6696d7;
.drag-handle,
.component-actions {
display: none;
}
}
&.component-placeholder {
border-color: #6696d7;
}
.xmodule_display {
padding: 40px 20px 20px;
}
.component-actions {
position: absolute;
top: 4px;
right: 4px;
@include transition(opacity .15s);
}
.edit-button,
.delete-button {
float: left;
padding: 3px 10px 4px;
margin-left: 3px;
border: 1px solid #fff;
border-radius: 3px;
background: #d1ddec;
font-size: 12px;
color: #fff;
@include transition(all .15s);
&:hover {
background-color: $blue;
color: #fff;
}
.edit-icon,
.delete-icon {
margin-right: 4px;
}
}
.drag-handle {
position: absolute;
display: block;
top: -1px;
right: -16px;
z-index: -1;
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid #d1ddec;
background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
cursor: move;
@include transition(all .15s);
}
&.new-component-item {
padding: 0;
border: 1px solid #8891a1;
border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-color: #d1dae3;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .2) inset);
@include transition(background-color .15s, border-color .15s);
border: none;
border-radius: 0;
&.adding {
background-color: $blue;
......@@ -223,8 +140,63 @@
}
}
.component {
border: 1px solid #d1ddec;
border-radius: 3px;
background: #fff;
@include transition(none);
&:hover {
border-color: #6696d7;
.drag-handle {
background-color: $blue;
border-color: $blue;
}
}
&.editing {
border-color: #6696d7;
.drag-handle,
.component-actions {
display: none;
}
}
&.component-placeholder {
border-color: #6696d7;
}
.component-actions {
position: absolute;
top: 7px;
right: 9px;
@include transition(opacity .15s);
a {
color: $darkGrey;
}
}
.drag-handle {
position: absolute;
display: block;
top: -1px;
right: -16px;
z-index: -1;
width: 15px;
height: 100%;
border-radius: 0 3px 3px 0;
border: 1px solid #d1ddec;
background: url(../img/white-drag-handles.png) center no-repeat #d1ddec;
cursor: move;
@include transition(all .15s);
}
}
.xmodule_display {
padding: 10px 20px;
padding: 40px 20px 20px;
}
.component-editor {
......
cms/static/sass/_users.scss
......@@ -2,11 +2,6 @@
.user-overview {
@extend .window;
padding: 30px 40px;
.details {
margin-bottom: 20px;
font-size: 14px;
}
}
.new-user-button {
......
cms/templates/component.html
......@@ -6,8 +6,8 @@
<a href="#" class="cancel-button">Cancel</a>
</div>
<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="edit-button standard"><span class="edit-icon"></span>Edit</a>
<a href="#" class="delete-button standard"><span class="delete-icon"></span>Delete</a>
</div>
<a href="#" class="drag-handle"></a>
${preview}
\ No newline at end of file
cms/templates/edit-tabs.html
......@@ -20,23 +20,24 @@
<div>
<h1>Static Tabs</h1>
</div>
<div class="main-column">
<article class="unit-body window">
<div class="tab-list">
<ol class='components'>
% for id in components:
<li class="component" data-id="${id}"/>
% endfor
<li class="new-component-item">
<a href="#" class="new-component-button new-tab">
<span class="plus-icon"></span>New Tab
</a>
</li>
</ol>
</div>
</article>
</div>
<article class="unit-body window">
<div class="details">
<p>Here you can add and manage additional pages for your course. These pages will be added to the primary navigation menu alongside Courseware, Course Info, Discussion, etc.</p>
</div>
<div class="tab-list">
<ol class='components'>
% for id in components:
<li class="component" data-id="${id}"/>
% endfor
<li class="new-component-item">
<a href="#" class="new-button big new-tab">
<span class="plus-icon"></span>New Tab
</a>
</li>
</ol>
</div>
</article>
</div>
</div>
</%block>
\ No newline at end of file
cms/templates/overview.html
......@@ -75,7 +75,7 @@
<h1>Courseware</h1>
<div class="page-actions"></div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}">
<a href="#" class="new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
<a href="#" class="new-button big new-courseware-section-button"><span class="plus-icon"></span> New Section</a>
% for section in sections:
<section class="courseware-section branch" data-id="${section.location}">
<header>
......
cms/templates/unit.html
......@@ -33,7 +33,7 @@
<li class="component" data-id="${id}"/>
% endfor
<li class="new-component-item">
<a href="#" class="new-component-button">
<a href="#" class="new-component-button new-button big">
<span class="plus-icon"></span>New Component
</a>
<div class="new-component">
......
cms/templates/xmodule_tab_display.html 0 → 100644
<section class="xmodule_display xmodule_${class_}" data-type="${module_name}">
${display_name}
</section>
common/djangoapps/xmodule_modifiers.py
......@@ -21,6 +21,7 @@ def wrap_xmodule(get_html, module, template, context=None):
module: An XModule
template: A template that takes the variables:
content: the results of get_html,
display_name: the display name of the xmodule, if available (None otherwise)
class_: the module class name
module_name: the js_module_name of the module
"""
......@@ -31,6 +32,7 @@ def wrap_xmodule(get_html, module, template, context=None):
def _get_html():
context.update({
'content': get_html(),
'display_name' : module.metadata.get('display_name') if module.metadata is not None else None,
'class_': module.__class__.__name__,
'module_name': module.js_module_name
})
......
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