openlucius-2.0.0-alpha3/modules/apps/ol_files/templates/files-list.html.twig

{# Yeah..., this needs some chopping up, make it more modular / atomic #}
<!-- Heading -->
<div class="row title">
  <div class="col title">
    <h2>{{ vars.page_title }}</h2>
  </div>
  <div class="col text-right">
    <div class="form-group">
      <button class="btn btn-success" type="button" id="files-add-drop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="lni lni-plus"></i> Add <i class="fa fa-caret-down"></i>
      </button>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="files-add-drop">
        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#addMessageModal"><i class="lni lni-upload"></i> {{ 'Upload Files'|t }}</a>
        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#textDoc"><i class="lni lni-plus"></i> {{ 'Add Text Document'|t }}</a>
        <a class="dropdown-item" href="#" data-toggle="modal" data-target="#addEditFoldereModal"><i class="lni lni-folder"></i> {{ 'Add Folder'|t }}</a>
      </div>
    </div>
  </div>
</div> <!-- / Heading -->

<div class="container">
  <div class="row">
    <!-- Folders -->
    <div class="col-lg-4 folders">
      <div class="list-group">
        {% if vars.current_folder|length == 0  %}
          {% set active = 'active' %}
        {% endif %}
        <a href="{{ vars.path }}" class="list-group-item list-group-item-action flex-column align-items-start {{ active }}">
          <div class="d-flex w-100 justify-content-between ">
            <h7>{{ 'All Files'|t }}</h7>
            <small><span class="badge badge-light badge-pill">{{ vars.total_files }}</span></small>
          </div>
        </a>
      </div>
      <div class="list-group folder-left">
        <ul class="list-group">
          {% for folder in vars.folders %}
            {# Nasty active styling for now :s #}
            {% if vars.current_folder ==  folder.id  %}
              {% set active = 'active' %}
            {% else %}
              {% set active = '' %}
            {% endif %}
              <li class="list-group-item d-flex justify-content-between align-items-center {{ active }}">
                <a href="{{ vars.path }}?folder={{ folder.id }}" class="folder-link {{ active }}">
                  {% if vars.current_folder ==  folder.id %}
                    <i class="fas fa-folder-open"></i>
                  {% else %}
                    <i class="fas fa-folder"></i>
                  {% endif %}
                  {{ folder.name }}
                </a>
                  {% if folder.can_admin %}
                    <button class="btn btn-link dropdown-toggle" type="button" id="ol-drop2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="fa fa-ellipsis-h"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-left" aria-labelledby="ol-drop2">
                        <button class="dropdown-item" data-toggle="modal" data-target="#addEditFoldereModal" data-name="{{ folder.name }}" data-folder_id="{{ folder.id }}">
                          <i class="fas fa-edit"></i> {{ 'Rename Folder'|t }}
                        </button>
                      <button class="dropdown-item" data-toggle="modal" data-target="#removeFolder"
                              data-folder_name="{{ folder.name }}"
                              data-folder_id="{{ folder.id }}"
                      ><i class="fas fa-times"></i> {{ 'Remove Folder'|t }}</button>
                    </div>
                  {% endif %}
                <small><span class="badge badge-light badge-pill">{{ folder.count_files }}</span></small>
              </li>
          {% endfor %}
        </ul>
      </div>
      {% if vars.org_member == true %}
        <div class="manage-folder text-right">
          {% if vars.folders is empty %}
            <button type="button" class="btn btn-light text-muted" data-toggle="modal" data-target="#addFoldereModal"><i class="lni lni-plus"></i> {{ 'Add First Folder'|t }}</button>
          {% else %}
            <button type="button" class="btn btn-light text-muted" data-toggle="modal" data-target="#addFoldereModal"><i class="lni lni-plus"></i> {{ 'Folder'|t }}</button>
            <button type="button" class="btn btn-light text-muted" data-toggle="modal" data-target="#manageFoldersModal"> {{ 'Manage Folders'|t }}</button>
          {% endif %}
        </div>
      {% endif %}
    </div> <!-- / Folders -->

    <!-- Files -->
    <div class="col-lg-8 folders">
      <div class="card ol-card files-list-page">
        <div class="card-header">
          {% if vars.files is not empty %}
            <table class="table table-responsive ">
            {{ vars.files|raw }}
            </table>
          {% else %}
              <i class="text-muted"><i class="fa fa-info-circle"></i> {{ 'No Results'|t }}</i><br />
          {% endif %}
        </div>
      </div>
    </div> <!-- / Files -->

  </div> <!-- / Row -->
</div><!-- / Container -->

<!-- Modal add files -->
<div class="modal fade bd-example-modal-lg" id="addMessageModal" role="dialog" aria-labelledby="addMessageModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><i class="lni lni-plus"></i> {{ 'Add Files'|t }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        {{ vars.file_form }}
    </div>
  </div>
</div>
<!-- / Modal add files -->

<!-- Modal add/edit folder-->
{# Manipulated by ol_files.js #}
<div class="modal fade" id="addEditFoldereModal" tabindex="-1" role="dialog" aria-labelledby="addMessageModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><i class="lni lni-plus"></i> {{ 'Add Folder'|t }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
        {{ vars.folder_form }}
    </div>
  </div>
</div>
<!-- / Modal add folder  -->

<!-- Modal remove file from folder-->
{# Manipulated by ol_files.js #}
<div class="modal fade" id="removeFileFromFolder" tabindex="-1" role="dialog" aria-labelledby="removeFileFromFolder" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><i class="lni lni-plus"></i> {{ 'Remove from folder'|t }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>You are about to remove <b><span class="file_name"></span></b> from folder <b><span class="folder_name"></span></b>. Are you sure?</p>
      </div>
      {{ vars.remove_from_folder }}
    </div>
  </div>
</div>
<!-- / Modal remove file from folder  -->

<!-- Text-doc modal-->
{# Manipulated by xyz.js #}
<div class="modal fade modal-large" id="textDoc" tabindex="-1" role="dialog" aria-labelledby="textDoc" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><i class="lni lni-plus"></i> {{ 'Text Document'|t }}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      {{ vars.text_doc_form }}
    </div>
  </div>
</div>
<!-- / Text-doc modal  -->