folders.html

<header id="folder-header" class="header" v-if="(active_view == 'folders' && active_folder)" v-cloak>
  <div v-cloak class="header-left pull-left">
    <a class="btn btn-dark btn-md btn-round btn-icon" href="/spaces">
      <span class="icon icon-svg icon-sd6"></span>
    </a>
    <button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-dark btn-md btn-round" v-on:click="create_space('space')">[[ __('create_space') ]]</button>
    <button v-if="logged_in && (active_space_role == 'editor' || active_space_role == 'admin')" class="btn btn-stroke-darken btn-md btn-round" v-on:click="create_space('folder')">
      <span>[[  __('create_folder') ]]</span>
    </button>

    <label class="relative compact-hidden" v-if="logged_in">
      <span class="icon icon-sm icon-zoom no-events absolute-top-left" style="margin: 5px;"></span>
      <input id="folder-search"
             type="search" name="search"
             style="padding-left: 40px !important; margin-right: 10px;"
             placeholder="[[  __('search') ]]"
             class="input input-md input-white input-round no-b w-2"
             v-model="folder_spaces_search" v-on:change="search_spaces">
    </label>
    
    <div class="dropdown top light m-r-20 compact-hidden" v-bind:class="{open : active_dropdown=='folder_sorting'}" v-if="logged_in">
      <button class="btn btn-sm btn-nude" v-on:click="activate_dropdown('folder_sorting')">
        <span>[[  __('sort_by') ]]</span>:
        <b v-if="folder_sorting=='updated_at'">[[  __('last_modified') ]]</b>
        <b v-if="folder_sorting=='name'">[[  __('title') ]]</b>
        <b v-if="folder_sorting=='space_type'">[[  __('type') ]]</b>
      </button>
      <div class="dropdown-menu" role="menu">
        <ul class="select-list">
          <li v-bind:class="{checked:folder_sorting=='updated_at'}"
              v-on:click="set_folder_sorting('updated_at',true)">
            <span>[[  __('last_modified') ]]</span>
          </li>

          <li v-bind:class="{checked:folder_sorting=='name'}"
              v-on:click="set_folder_sorting('name',false)">
            <span>[[  __('title') ]]</span>
          </li>

          <li v-bind:class="{checked:folder_sorting=='space_type'}"
              v-on:click="set_folder_sorting('space_type',false)">
            <span>[[  __('type') ]]</span>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="header-right pull-right">
    <div class="dropdown top right light" v-bind:class="{open: active_dropdown=='account'}">
      <button
        class="profile-avatar btn btn-md btn-icon btn-dark btn-round"
         v-if="logged_in"
         v-bind:style="background_image_style([user.avatar_thumb_uri])"
         v-bind:class="{'has-avatar-image':!!user.avatar_thumb_uri}" v-on:click="show_account();">
        <span class="icon icon-user" v-if="logged_in && !user.avatar_thumb_uri"></span></button>

      <div class="dropdown-menu" role="menu">
        <ul class="select-list">
          <li v-if="user.team && is_admin(user)">
            <a href="/team">
              <span class="icon icon-sm  icon-user-group"></span>
              <span>[[  __('edit_team') ]]</span>
            </a>
          </li>

          <li>
            <a href="/account">
              <span class="icon icon-sm  icon-user"></span>
              <span>[[  __('edit_account') ]]</span>
            </a>
          </li>

          <li v-on:click="logout()">
            <span>
              <span class="icon icon-sm  icon-logout"></span>
              <span>[[  __('log_out') ]]</span>
            </span>
          </li>
        </ul>
      </div>

    </div>
  </div>
</header>


<div id="profile" v-cloak v-if="active_view == 'folders' && user">

  <div id="folder-wrapper">

    <div id="folder-breadcrumb">

      <span v-if="logged_in" v-for="item in active_space_path" class="btn btn-sm btn-transparent" v-sd-droppable="handle_folder_drop;item">
        <a href="/{{item.space_type}}s/{{item._id}}">{{item.name}}</a>&nbsp; ▶</span>

      <a v-if="(active_space_role != 'admin')" type="button" class="btn btn-sm btn-transparent">
        <span>{{active_folder.name}}</span>
      </a>

      <div class="dropdown top light" v-bind:class="{open:active_dropdown=='breadcrumb'}" v-if="(active_folder._id != user.home_folder_id) && ((active_space_role == 'admin'))">
        <button type="button" class="btn btn-sm btn-transparent btn-dropdown" data-toggle="dropdown" v-on:click=" activate_dropdown('breadcrumb')">
          <span>{{active_folder.name}}</span>
        </button>
        <div class="dropdown-menu" v-if="active_folder && active_folder._id != user.home_folder_id">
          <ul class="select-list">
            <li><span class="tile-rename" v-on:click="rename_folder(active_folder)">[[__("rename")]]</span></li>
            <li v-if="active_space_role == 'admin'"><span class="tile-share" v-on:click="activate_access()">[[__("share")]]</span></li>
          </ul>
        </div>
      </div>

      <div v-if="active_folder._id == user.home_folder_id">
        <span>[[  __('home') ]]</span>
      </div>

    </div>

    <div id="folder-empty" v-if="(active_profile_spaces.length == 0)">
      <div>
        <p>[[  __('no_spaces_yet') ]]</p>
      </div>
    </div>

    <div id="folder-empty" v-if="folder_spaces_filter">
      <div v-if="active_profile_spaces | empty?">
        <p><b>"{{folder_spaces_filter}}"</b>  <br/>[[  __('search_no_results') ]]</p>
        <button type="button" class="btn btn-md btn-round btn-stroke-darken events" v-on:click=" folder_spaces_filter = ''">[[  __('search_clear') ]]</button>
      </div>
    </div>
    <div id="folder-grid">
      <div
         v-for="item in active_profile_spaces | orderBy folder_sorting folder_reverse"
         v-sd-draggable="item"
         v-sd-droppable="handle_folder_drop;item"
         draggable="true"
         class="item" v-bind:class="item.space_type"
        v-bind:style="{'z-index': (active_profile_spaces.length - $index)}">

        <!-- anonymous editors can go edit spaces in a folder -->
        <a href="/s/{{item.edit_hash}}-{{item.edit_slug}}" v-if="active_space_role=='editor' && !logged_in">
          <span class="item-thumbnail thumbnail-loading" v-if="item.space_type=='space'"></span>
          <span class="item-thumbnail" v-bind:style="space_thumbnail_style(item)"></span>
        </a>
        
        <a v-if="active_space_role=='viewer' || logged_in" href="/{{item.space_type}}s/{{item._id}}">
          <span class="item-thumbnail thumbnail-loading" v-if="item.space_type=='space'"></span>
          <span class="item-thumbnail" v-bind:style="space_thumbnail_style(item)"></span>
        </a>

        <div class="item-meta" >
          <span class="item-title">{{item.name}}</span>
          <div class="pull-right dropdown center light" v-if="active_space_role=='admin'" v-bind:class="{open:(active_dropdown=='space_'+item._id || active_dropdown=='space_share_'+item._id)}">
            <button type="button" class="btn btn-transparent btn-dropdown no-min-w no-p" data-toggle="dropdown" v-on:click="activate_dropdown('space_'+item._id)">
            </button>

            <div class="dropdown-menu" role="menu">
              <ul class="select-list">
                <li v-on:click="rename_space(item)"><span><span class="icon icon-sm icon-tag"></span>[[  __('rename') ]]</span></li>
                <li v-on:click="delete_space(item)"><span><span class="icon icon-sm icon-trash"></span>[[  __('delete') ]]</span></li>
              </ul>
            </div>
          </div>
        </div>
        <span class="item-appendix">
          <span class="pull-right item-date">{{item.updated_at | date 'YYYY-MM-DD'}}</span>

          <span class="item-author">
            <span class="profile-avatar btn btn-xs btn-icon btn-white btn-round m-r-10"
                  v-bind:style="background_image_style([item.creator.avatar_thumb_uri])"
                  v-bind:class="{'has-avatar-image':!!item.creator.avatar_thumb_uri}">
              <span class="icon icon-user" v-if="!item.creator.avatar_thumb_uri"></span>
            </span>
            {{item.creator.nickname}}
          </span>
        </span>

      </div>

    </div>
  </div>
</div>