modal_access-component.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 -->