Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2981 from edx/andya/container-editing

Browse Source 
Add "Edit" button to each leaf xblock on the container page
This commit is contained in:
Andy Armstrong
2014-04-10 09:29:32 -04:00
parent 8c8367b055 df0973e771
commit 8059547ed8
110 changed files with 2650 additions and 943 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
common/lib/xmodule/xmodule/css/problem/edit.scss
View File

@@ -3,7 +3,6 @@
.editor-tabs {
.advanced-toggle {
@include white-button;
height: auto;
margin-top: -4px;
padding: 3px 9px;
@@ -19,6 +18,7 @@
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
background-color: $white;
}
}
}

78
common/lib/xmodule/xmodule/js/fixtures/tabs-edit.html
View File

@@ -1,35 +1,53 @@
<div class="component-editor">
<div class="base_wrapper">
<section class="editor-with-tabs">
<div class="wrapper-comp-editor" id="editor-tab-id" data-html_id='test_id'>
<div class="edit-header">
<ul class="editor-tabs">
<li class="inner_tab_wrap"><a href="#tab-0" class="tab">Tab 0 Editor</a></li>
<li class="inner_tab_wrap"><a href="#tab-1" class="tab">Tab 1 Transcripts</a></li>
<li class="inner_tab_wrap" id="settings"><a href="#tab-2" class="tab">Tab 2 Settings</a></li>
</ul>
</div>
<div class="tabs-wrapper">
<div class="component-tab" id="tab-0">
<textarea name="" class="edit-box">XML Editor Text</textarea>
<div class="wrapper wrapper-modal-window wrapper-modal-window-mock">
<div class="modal-window confirm modal-editor modal-lg modal-type-<%= xblockInfo.get('category') %>">
<div class="edit-xblock-modal" action="#">
<div class="modal-header">
<h2 class="title modal-window-title">Mock Modal Title</h2>
</div>
<div class="modal-content">
<div class="xblock-editor">
<div class="xblock xblock-studio_view xmodule_edit">
<section class="editor-with-tabs">
<div class="wrapper-comp-editor" id="editor-tab-id" data-html_id='test_id'>
<div class="edit-header">
<ul class="editor-tabs">
<li class="inner_tab_wrap"><a href="#tab-0" class="tab">Tab 0 Editor</a></li>
<li class="inner_tab_wrap"><a href="#tab-1" class="tab">Tab 1 Transcripts</a></li>
<li class="inner_tab_wrap" id="settings"><a href="#tab-2" class="tab">Tab 2 Settings</a></li>
</ul>
</div>
<div class="tabs-wrapper">
<div class="component-tab" id="tab-0">
<textarea name="" class="edit-box">XML Editor Text</textarea>
</div>
<div class="component-tab" id="tab-1">
Transcripts
</div>
<div class="component-tab" id="tab-2">
Subtitles
</div>
</div>
<div class="wrapper-comp-settings">
<ul>
<li id="editor-mode"><a>Editor</a></li>
<li id="settings-mode"><a>Settings</a></li>
</ul>
</div>
</div>
</section>
</div>
<div class="component-tab" id="tab-1">
Transcripts
</div>
<div class="component-tab" id="tab-2">
Subtitles
</div>
</div>
<div class="wrapper-comp-settings">
<ul>
<li id="editor-mode"><a>Editor</a></li>
<li id="settings-mode"><a>Settings</a></li>
</ul>
</div>
</div>
</section>
<div class="component-edit-header" style="display: block"/>
<div class="modal-actions">
<ul>
<li class="action-item">
<a href="#" class="button action-primary action-save">Save</a>
</li>
<li class="action-item">
<a href="#" class="button action-secondary action-cancel">Cancel</a>
</li>
</ul>
</div>
</div>
</div>
</div>

9
common/lib/xmodule/xmodule/js/spec/tabs/edit.coffee
View File

@@ -3,7 +3,7 @@ describe "TabsEditingDescriptor", ->
@isInactiveClass = "is-inactive"
@isCurrent = "current"
loadFixtures 'tabs-edit.html'
@descriptor = new TabsEditingDescriptor($('.base_wrapper'))
@descriptor = new TabsEditingDescriptor($('.xblock'))
@html_id = 'test_id'
@tab_0_switch = jasmine.createSpy('tab_0_switch');
@tab_0_modelUpdate = jasmine.createSpy('tab_0_modelUpdate');
@@ -63,16 +63,12 @@ describe "TabsEditingDescriptor", ->
@descriptor.onSwitchEditor
)
describe "editor/settings header", ->
it "is hidden", ->
expect(@descriptor.element.closest(".component-editor").find(".component-edit-header")).toBeHidden()
describe "TabsEditingDescriptor special save cases", ->
beforeEach ->
@isInactiveClass = "is-inactive"
@isCurrent = "current"
loadFixtures 'tabs-edit.html'
@descriptor = new window.TabsEditingDescriptor($('.base_wrapper'))
@descriptor = new window.TabsEditingDescriptor($('.xblock'))
@html_id = 'test_id'
describe "save", ->
@@ -92,4 +88,3 @@ describe "TabsEditingDescriptor special save cases", ->
expect(@tab_0_modelUpdate).toHaveBeenCalled()
data = @descriptor.save().data
expect(data).toEqual(1)

5
common/lib/xmodule/xmodule/js/src/tabs/tabs-aggregator.coffee
View File

@@ -8,9 +8,6 @@ class @TabsEditingDescriptor
(Like many CodeMirrors).
###
# hide editor/settings bar
@element.closest('.component-editor').find('.component-edit-header').hide()
@$tabs = $(".tab", @element)
@$content = $(".component-tab", @element)
@@ -25,7 +22,7 @@ class @TabsEditingDescriptor
currentTab.trigger("click", [true, @html_id])
onSwitchEditor: (e, firstTime, html_id) =>
e.preventDefault();
e.preventDefault()
isInactiveClass = TabsEditingDescriptor.isInactiveClass
$currentTarget = $(e.currentTarget)

5
common/static/sass/_mixins.scss
View File

@@ -268,6 +268,7 @@
.ui-loading {
@include animation(fadeIn $tmg-f2 linear 1);
@extend %ui-well;
@extend %t-copy-base;
opacity: .6;
background-color: $white;
padding: ($baseline*1.5) $baseline;
@@ -283,6 +284,10 @@
}
}
.is-hidden {
display: none;
}
// ====================
// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases

0
common/templates/js/imageModal.underscore → common/templates/js/image-modal.underscore
View File

9
common/test/acceptance/pages/studio/unit.py
View File

@@ -105,18 +105,15 @@ class Component(PageObject):
def edit(self):
self.q(css=self._bounded_selector('.edit-button')).first.click()
EmptyPromise(
lambda: all(
self.q(css=self._bounded_selector('.component-editor'))
.map(lambda el: el.is_displayed())
.results),
"Verify that the editor for component {} has been expanded".format(self.locator)
lambda: self.q(css='.xblock-studio_view').present,
'Wait for the Studio editor to be present'
).fulfill()
return self
@property
def editor_selector(self):
return self._bounded_selector('.xblock-studio_view')
return '.xblock-studio_view'
def go_to_container(self):
"""