127 lines
7.7 KiB
HTML
127 lines
7.7 KiB
HTML
<div class="wrapper wrapper-modal-window wrapper-modal-window-edit-xblock" aria-labelledby="modal-window-title" role="dialog">
|
|
<div class="modal-window-overlay"></div>
|
|
<div class="modal-window confirm modal-med modal-type-html modal-editor" style="top: 50px; left: 400px;" tabindex="-1" aria-labelledby="modal-window-title">
|
|
<div class="edit-xblock-modal">
|
|
<div class="modal-header">
|
|
<h2 id="modal-window-title" class="title modal-window-title">Editing visibility for: [Component Name]</h2>
|
|
</div>
|
|
|
|
<div class="modal-content">
|
|
<div class="xblock-editor" data-locator="i4x://TestU/cohorts001/chapter/748152225449412a846bc24811a5621c" data-course-key="">
|
|
|
|
<div class="xblock xblock-visibility_view">
|
|
|
|
<div class="modal-section visibility-summary">
|
|
<div class="summary-message summary-message-warning visibility-summary-message">
|
|
<i class="icon fa fa-exclamation-triangle" aria-hidden="true"></i>
|
|
<p class="copy"><span class="sr">Warning: </span>This component is contained in a unit that is hidden from students. Component visibility settings are overridden by the unit visibility settings.</p>
|
|
</div>
|
|
|
|
<!-- NOTE: use when no group configuration has been set -->
|
|
<div class="is-not-configured has-actions">
|
|
<h4 class="title">You have not set up any groups</h4>
|
|
|
|
<div class="copy">
|
|
<p>Groups are a way for you to organize content in your course with a particular student experience in mind. They are commonly used to facilitate content and pedagogical experiments as well as to provide different tracks of content.</p>
|
|
</div>
|
|
|
|
<div class="actions">
|
|
<a href="" class="action action-primary action-settings">Manage groups in this course</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form class="visibility-controls-form" method="post" action="">
|
|
|
|
<div class="modal-section visibility-controls">
|
|
<h3 class="modal-section-title">Set visibility to:</h3>
|
|
|
|
<div class="modal-section-content">
|
|
|
|
<section class="visibility-controls-primary">
|
|
<ul class="list-fields list-radio">
|
|
<li class="field field-radio field-visibility-level">
|
|
<input type="radio" id="visibility-level-all" name="visibility-level" value="" class="input input-radio visibility-level-all" />
|
|
<label for="visibility-level-all" class="label">All Students and Staff</label>
|
|
</li>
|
|
|
|
<li class="field field-radio field-visibility-level">
|
|
<input type="radio" id="visibility-level-specific" name="visibility-level" value="" class="input input-radio visibility-level-specific" checked="checked" />
|
|
<label for="visibility-level-specific" class="label">Specific Groups</label>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<!-- NOTE: @andyarmstrong, if you need this wrapper to show and hide, great. If not, please remove it from the DOM -->
|
|
<div class="wrapper-visibility-specific">
|
|
|
|
<section class="visibility-controls-secondary">
|
|
<div class="visibility-controls-group">
|
|
<h4 class="visibility-controls-title modal-subsection-title sr">Content Groups</h4>
|
|
<ul class="list-fields list-checkbox">
|
|
<li class="field field-checkbox field-visibility-content-group">
|
|
<input type="checkbox" id="visibility-content-group-NAME1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME1" />
|
|
<label for="visibility-content-group-NAME1" class="label">Content Group NAME 1</label>
|
|
</li>
|
|
|
|
<li class="field field-checkbox field-visibility-content-group">
|
|
<input type="checkbox" id="visibility-content-group-NAME2" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME2" />
|
|
<label for="visibility-content-group-NAME2" class="label">Content Group NAME 2</label>
|
|
</li>
|
|
|
|
<li class="field field-checkbox field-visibility-content-group">
|
|
<input type="checkbox" id="visibility-content-group-NAME3" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME3" />
|
|
<label for="visibility-content-group-NAME3" class="label">Content Group NAME 3</label>
|
|
</li>
|
|
|
|
<li class="field field-checkbox field-visibility-content-group">
|
|
<input type="checkbox" id="visibility-content-group-NAME4" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-NAME4" />
|
|
<label for="visibility-content-group-NAME4" class="label">Content Group NAME 4</label>
|
|
</li>
|
|
|
|
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
|
|
<li class="field field-checkbox field-visibility-content-group was-removed">
|
|
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
|
|
<label for="visibility-content-group-deleted1" class="label">
|
|
Deleted Content Group
|
|
</label>
|
|
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
|
|
</li>
|
|
|
|
<!-- NOTE: @andyarmstrong, here's an example of how we would treat a group that was deleted/removed - we need a .was removed class and an additional UI element called a .note -->
|
|
<li class="field field-checkbox field-visibility-content-group was-removed">
|
|
<input type="checkbox" id="visibility-content-group-deleted1" name="visibility-content-group" value="" class="input input-checkbox visibility-content-group-deleted" checked="checked" />
|
|
<label for="visibility-content-group-deleted1" class="label">
|
|
Deleted Content Group
|
|
</label>
|
|
<span class="note">The selected group no longer exists. Choose another group or make the component visible to All Students and Staff</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</div><!-- .xblock -->
|
|
</div><!-- .xblock-editor -->
|
|
</div><!-- .modal-content -->
|
|
|
|
<div class="modal-actions">
|
|
<h3 class="sr">Actions</h3>
|
|
<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-cancel">Cancel</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div><!-- .xblock-visibility-modal -->
|
|
</div><!-- .modal-window -->
|
|
</div><!-- .wrapper-modal-window -->
|