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_ ...@@ -496,11 +496,20 @@ def load_preview_module(request, preview_id, descriptor, instance_state, shared_
error_msg=exc_info_to_str(sys.exc_info()) error_msg=exc_info_to_str(sys.exc_info())
).xmodule_constructor(system)(None, None) ).xmodule_constructor(system)(None, None)
module.get_html = wrap_xmodule( # cdodge: Special case
module.get_html, if module.location.category == 'static_tab':
module, module.get_html = wrap_xmodule(
"xmodule_display.html", 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 = replace_static_urls(
module.get_html, module.get_html,
module.metadata.get('data_dir', module.location.course), module.metadata.get('data_dir', module.location.course),
......
cms/static/sass/_base.scss
...@@ -180,6 +180,11 @@ code { ...@@ -180,6 +180,11 @@ code {
padding: 20px; padding: 20px;
} }
.details {
margin-bottom: 30px;
font-size: 14px;
}
h4 { h4 {
padding: 6px 14px; padding: 6px 14px;
border-bottom: 1px solid #cbd1db; border-bottom: 1px solid #cbd1db;
...@@ -337,4 +342,29 @@ body.show-wip { ...@@ -337,4 +342,29 @@ body.show-wip {
content: ''; content: '';
@extend .spinner-icon; @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 @@ ...@@ -48,18 +48,18 @@
} }
@mixin white-button { @mixin white-button {
@include button; @include button;
border: 1px solid $darkGrey; border: 1px solid $darkGrey;
border-radius: 3px; border-radius: 3px;
@include linear-gradient(top, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 60%); @include linear-gradient(top, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
background-color: #dfe5eb; background-color: #dfe5eb;
@include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset); @include box-shadow(0 1px 0 rgba(255, 255, 255, .3) inset);
color: #5d6779; color: #778192;
&:hover { &:hover {
background-color: #f2f6f9; background-color: #f2f6f9;
color: #5d6779; color: #778192;
} }
} }
@mixin orange-button { @mixin orange-button {
......
cms/static/sass/_courseware.scss
...@@ -5,12 +5,7 @@ input.courseware-unit-search-input { ...@@ -5,12 +5,7 @@ input.courseware-unit-search-input {
} }
.courseware-overview { .courseware-overview {
.new-courseware-section-button {
@include grey-button;
display: block;
text-align: center;
padding: 12px 0;
}
} }
.courseware-section { .courseware-section {
......
cms/static/sass/_graphics.scss
...@@ -137,6 +137,10 @@ ...@@ -137,6 +137,10 @@
height: 11px; height: 11px;
margin-right: 8px; margin-right: 8px;
background: url(../img/plus-icon.png) no-repeat; background: url(../img/plus-icon.png) no-repeat;
&.white {
background: url(../img/plus-icon-white.png) no-repeat;
}
} }
.plus-icon-small { .plus-icon-small {
......
cms/static/sass/_lms.scss
.components li { .component {
font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif; font-family: 'Open Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 16px; font-size: 16px;
line-height: 1.6; line-height: 1.6;
......
cms/static/sass/_static-pages.scss
...@@ -6,6 +6,72 @@ ...@@ -6,6 +6,72 @@
padding: 12px 0; 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 { .static-page-item {
position: relative; position: relative;
margin: 10px 0; margin: 10px 0;
......
cms/static/sass/_unit.scss
...@@ -54,94 +54,11 @@ ...@@ -54,94 +54,11 @@
position: relative; position: relative;
z-index: 10; z-index: 10;
margin: 20px 40px; 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 { &.new-component-item {
padding: 0; padding: 0;
border: 1px solid #8891a1; border: none;
border-radius: 3px; border-radius: 0;
@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);
&.adding { &.adding {
background-color: $blue; background-color: $blue;
...@@ -223,8 +140,63 @@ ...@@ -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 { .xmodule_display {
padding: 10px 20px; padding: 40px 20px 20px;
} }
.component-editor { .component-editor {
......
cms/static/sass/_users.scss
...@@ -2,11 +2,6 @@ ...@@ -2,11 +2,6 @@
.user-overview { .user-overview {
@extend .window; @extend .window;
padding: 30px 40px; padding: 30px 40px;
.details {
margin-bottom: 20px;
font-size: 14px;
}
} }
.new-user-button { .new-user-button {
......
cms/templates/component.html
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<a href="#" class="cancel-button">Cancel</a> <a href="#" class="cancel-button">Cancel</a>
</div> </div>
<div class="component-actions"> <div class="component-actions">
<a href="#" class="edit-button"><span class="edit-icon white"></span>Edit</a> <a href="#" class="edit-button standard"><span class="edit-icon"></span>Edit</a>
<a href="#" class="delete-button"><span class="delete-icon white"></span>Delete</a> <a href="#" class="delete-button standard"><span class="delete-icon"></span>Delete</a>
</div> </div>
<a href="#" class="drag-handle"></a> <a href="#" class="drag-handle"></a>
${preview} ${preview}
\ No newline at end of file
cms/templates/edit-tabs.html
...@@ -20,23 +20,24 @@ ...@@ -20,23 +20,24 @@
<div> <div>
<h1>Static Tabs</h1> <h1>Static Tabs</h1>
</div> </div>
<div class="main-column"> <article class="unit-body window">
<article class="unit-body window"> <div class="details">
<div class="tab-list"> <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>
<ol class='components'> </div>
% for id in components: <div class="tab-list">
<li class="component" data-id="${id}"/> <ol class='components'>
% endfor % for id in components:
<li class="component" data-id="${id}"/>
<li class="new-component-item"> % endfor
<a href="#" class="new-component-button new-tab">
<span class="plus-icon"></span>New Tab <li class="new-component-item">
</a> <a href="#" class="new-button big new-tab">
</li> <span class="plus-icon"></span>New Tab
</ol> </a>
</div> </li>
</article> </ol>
</div> </div>
</article>
</div> </div>
</div> </div>
</%block> </%block>
\ No newline at end of file
cms/templates/overview.html
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<h1>Courseware</h1> <h1>Courseware</h1>
<div class="page-actions"></div> <div class="page-actions"></div>
<article class="courseware-overview" data-course-id="${context_course.location.url()}"> <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: % for section in sections:
<section class="courseware-section branch" data-id="${section.location}"> <section class="courseware-section branch" data-id="${section.location}">
<header> <header>
......
cms/templates/unit.html
...@@ -33,7 +33,7 @@ ...@@ -33,7 +33,7 @@
<li class="component" data-id="${id}"/> <li class="component" data-id="${id}"/>
% endfor % endfor
<li class="new-component-item"> <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 <span class="plus-icon"></span>New Component
</a> </a>
<div class="new-component"> <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): ...@@ -21,6 +21,7 @@ def wrap_xmodule(get_html, module, template, context=None):
module: An XModule module: An XModule
template: A template that takes the variables: template: A template that takes the variables:
content: the results of get_html, content: the results of get_html,
display_name: the display name of the xmodule, if available (None otherwise)
class_: the module class name class_: the module class name
module_name: the js_module_name of the module module_name: the js_module_name of the module
""" """
...@@ -31,6 +32,7 @@ def wrap_xmodule(get_html, module, template, context=None): ...@@ -31,6 +32,7 @@ def wrap_xmodule(get_html, module, template, context=None):
def _get_html(): def _get_html():
context.update({ context.update({
'content': get_html(), 'content': get_html(),
'display_name' : module.metadata.get('display_name') if module.metadata is not None else None,
'class_': module.__class__.__name__, 'class_': module.__class__.__name__,
'module_name': module.js_module_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