scenes interface structure

sails/src/assets/scripts/modules/student/views/collections.html

 <!-- Collection tab-->
 <div class="panel panel-default student_tab_panel">
   <div class="panel-body">
-<!--
+    <!--
     <div class="row">
       <div class="col-md-6">
         <a class="btn btn-success btn-sm" role="button" ng-click="open()">
@@ -10,60 +10,147 @@
         </a>
       </div>
     </div>
-  -->
-    <div
-      id="student_collection"
-      class="student-collection"
-      ng-class="{ 'student-collection-loading': loadingPictos }"
-      data-loading="{{ 'loading_pictos' | translate }}">
-      <!-- No categories grid -->
-      <div
-        ng-if="showFreeCategory"
-        class="picto-grid picto-free-grid">
+    -->
+    <div class="col-xs-10"><!-- col-xs-10 -->
+      <div id="student_collection"
+        class="student-collection"
+        ng-class="{ 'student-collection-loading': loadingPictos }"
+        data-loading="{{ 'loading_pictos' | translate }}">
+        <!-- No categories grid -->
         <div
-          ng-repeat="studentPictoRow in freeCategoryPictos"
-          ng-init="rowIndex = $index"
-          class="picto-grid__row">
+          ng-if="showFreeCategory"
+          class="picto-grid picto-free-grid">
           <div
-            class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
-            data-row="{{ rowIndex }}"
-            data-column="{{ colIndex }}"
-            id="student-picto-{{
-              studentPicto.id ||
-              ('empty-' + colIndex + '-' + rowIndex)
-            }}"
-            draggable droppable drop="handleDrop"
-            popover="{{studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
-            popover-trigger="mouseenter"
-            ng-init="colIndex = $index"
-            ng-repeat="studentPicto in studentPictoRow track by $index">
-            <!-- picto-legend -->
+            ng-repeat="studentPictoRow in freeCategoryPictos"
+            ng-init="rowIndex = $index"
+            class="picto-grid__row">
             <div
-              class="picto-legend-normal"
-              ng-if="studentPicto.attributes.legend == 'normal'">
-              {{ studentPicto.attributes.expression }}
-            </div>
-            <div
-              class="picto-legend-full"
-              ng-if="studentPicto.attributes.legend == 'full'">
-              {{ studentPicto.attributes.expression }}
+              class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
+              data-row="{{ rowIndex }}"
+              data-column="{{ colIndex }}"
+              id="student-picto-{{
+                studentPicto.id ||
+                ('empty-' + colIndex + '-' + rowIndex)
+              }}"
+              draggable droppable drop="handleDrop"
+              popover="{{studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
+              popover-trigger="mouseenter"
+              ng-init="colIndex = $index"
+              ng-repeat="studentPicto in studentPictoRow track by $index">
+              <!-- picto-legend -->
+              <div
+                class="picto-legend-normal"
+                ng-if="studentPicto.attributes.legend == 'normal'">
+                {{ studentPicto.attributes.expression }}
+              </div>
+              <div
+                class="picto-legend-full"
+                ng-if="studentPicto.attributes.legend == 'full'">
+                {{ studentPicto.attributes.expression }}
+              </div>
+              <!-- /.picto-legend  -->
+              <img
+                src="/app/img/redcross.png"
+                class="red-cross-visibility disabled"
+                ng-if="studentPicto.attributes.status == 'disabled'"/>
+              <img
+                ng-src="{{studentPicto.picto.uri}}"
+                class="unselectable"
+                ng-class="{
+                  'novisible': studentPicto.attributes.status == 'invisible',
+                  'deactivate': studentPicto.attributes.status == 'disabled'
+                }"
+                ng-style="{
+                  'background-color': studentPicto.attributes.color || '#ffffff'
+                }"/>
+              <div
+                  class="picto_options"
+                  ng-if="studentPicto == emptyStudentPicto">
+                  <a
+                    ng-click="open_add(rowIndex, colIndex)"
+                    class="picto_add"
+                    title="{{ 'add_picto' | translate}}">
+                    <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
+                  </a>
+              </div>
+              <div
+                class="picto_options"
+                ng-if="studentPicto !== emptyStudentPicto">
+                <a
+                  ng-click="deleteFreePicto(studentPicto)"
+                  class="picto_remove"
+                  title="{{ 'delete' | translate}}">
+                  <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
+                </a>
+                <a ng-click="view_picto(studentPicto)" class="picto_ok" >
+                  <i ng-class="{
+                      color_green: studentPicto.attributes.status == 'invisible',
+                      color_black: studentPicto.attributes.status == 'enabled'
+                    }"
+                    class="glyphicon glyphicon-eye-open"
+                    aria-hidden="true"
+                    title="{{ studentPicto.attributes.status | translate}}">
+                  </i>
+                </a>
+                <a
+                  class="picto_tags"
+                  ng-click="open_tags(studentPicto)">
+                  <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
+                </a>
+                <a
+                  class="picto_config"
+                  ng-click="open_config(studentPicto)">
+                  <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                </a>
+              </div>
             </div>
-            <!-- /.picto-legend  -->
-            <img
-              src="/app/img/redcross.png"
-              class="red-cross-visibility disabled"
-              ng-if="studentPicto.attributes.status == 'disabled'"/>
-            <img
-              ng-src="{{studentPicto.picto.uri}}"
-              class="unselectable"
-              ng-class="{
-                'novisible': studentPicto.attributes.status == 'invisible',
-                'deactivate': studentPicto.attributes.status == 'disabled'
-              }"
-              ng-style="{
-                'background-color': studentPicto.attributes.color || '#ffffff'
-              }"/>
+            <div class="clearfix"></div>
+          </div>
+        </div>
+        <!-- / No categories grid -->
+        <!-- Main categories grid -->
+        <div
+          ng-if="!showFreeCategory"
+          class="picto-grid picto-main-grid">
+          <div
+            ng-repeat="studentPictoRow in studentPictos[getCategoryId(emptyStudentPicto)]"
+            ng-init="rowIndex = $index"
+            class="picto-grid__row">
             <div
+              class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
+              ng-repeat="studentPicto in studentPictoRow track by $index"
+              ng-init="colIndex = $index"
+              popover="{{ studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
+              popover-trigger="mouseenter">
+              <!-- picto-legend -->
+              <div
+                class="picto-legend-normal"
+                ng-if="studentPicto.attributes.legend == 'normal'">
+                {{ studentPicto.attributes.expression }}
+
+              </div>
+              <div
+                class="picto-legend-full"
+                ng-if="studentPicto.attributes.legend == 'full'">
+                {{ studentPicto.attributes.expression }}
+              </div>
+              <!-- /.picto-legend  -->
+              <img
+                src="/app/img/redcross.png"
+                class="red-cross-visibility disabled"
+                ng-if="studentPicto.attributes.status == 'disabled'"/>
+              <img
+                ng-src="{{studentPicto.picto.uri}}"
+                class="unselectable"
+                ng-click="show_category(studentPicto)"
+                ng-class="{
+                  'novisible': studentPicto.attributes.status == 'invisible',
+                  'deactivate': studentPicto.attributes.status == 'disabled'
+                }"
+                ng-style="{
+                  'background-color': studentPicto.attributes.color
+                }"/>
+              <div
                 class="picto_options"
                 ng-if="studentPicto == emptyStudentPicto">
                 <a
@@ -72,250 +159,197 @@
                   title="{{ 'add_picto' | translate}}">
                   <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
                 </a>
+              </div>
+              <div
+                class="picto_options"
+                ng-if="studentPicto !== emptyStudentPicto && studentPicto.attributes.coord_y != '0'">
+                <a ng-click="view_picto(studentPicto)" class="picto_ok" >
+                  <i
+                    ng-class="{
+                      color_green: studentPicto.attributes.status == 'invisible',
+                      color_black: studentPicto.attributes.status == 'enabled'
+                    }"
+                    class="glyphicon glyphicon-eye-open"
+                    aria-hidden="true"
+                    title="{{ studentPicto.attributes.status | translate}}"></i>
+                </a>
+                <a
+                  ng-click="change_category(studentPicto)"
+                  ng-if="studentPicto !== emptyStudentPicto && studentPicto.attributes.coord_y != '0'"
+                  class="picto_cat_edit">
+                  <i
+                    class="glyphicon glyphicon-picture" aria-hidden="true"
+                    title="{{ 'change_cat_picto' | translate}}">
+                  </i>
+                </a>
+              </div>
+              <div
+                class="picto_options"
+                ng-if="studentPicto !== emptyStudentPicto && studentPicto.attributes.coord_y == '0'">
+                <a
+                  ng-click="delete_picto(studentPicto)"
+                  class="picto_remove"
+                  title="{{ 'delete' | translate}}">
+                  <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
+                </a>
+                <a ng-click="view_picto(studentPicto)" class="picto_ok" >
+                  <i ng-class="{
+                      color_green: studentPicto.attributes.status == 'invisible',
+                      color_black: studentPicto.attributes.status == 'enabled'
+                    }"
+                    class="glyphicon glyphicon-eye-open"
+                    aria-hidden="true"
+                    title="{{ studentPicto.attributes.status | translate}}">
+                  </i>
+                </a>
+                <a
+                  class="picto_tags"
+                  ng-click="open_tags(studentPicto)">
+                  <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
+                </a>
+                <a
+                  class="picto_config"
+                  ng-click="open_config(studentPicto)">
+                  <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                </a>
+              </div>
             </div>
-            <div
-              class="picto_options"
-              ng-if="studentPicto !== emptyStudentPicto">
-              <a
-                ng-click="deleteFreePicto(studentPicto)"
-                class="picto_remove"
-                title="{{ 'delete' | translate}}">
-                <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
-              </a>
-              <a ng-click="view_picto(studentPicto)" class="picto_ok" >
-                <i ng-class="{
-                    color_green: studentPicto.attributes.status == 'invisible',
-                    color_black: studentPicto.attributes.status == 'enabled'
-                  }"
-                  class="glyphicon glyphicon-eye-open"
-                  aria-hidden="true"
-                  title="{{ studentPicto.attributes.status | translate}}">
-                </i>
-              </a>
-              <a
-                class="picto_tags"
-                ng-click="open_tags(studentPicto)">
-                <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
-              </a>
-              <a
-                class="picto_config"
-                ng-click="open_config(studentPicto)">
-                <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
-              </a>
-            </div>
+            <div class="clearfix"></div>
           </div>
-          <div class="clearfix"></div>
         </div>
-      </div>
-      <!-- / No categories grid -->
-      <!-- Main categories grid -->
-      <div
-        ng-if="!showFreeCategory"
-        class="picto-grid picto-main-grid">
+        <!-- / Main categories grid -->
+        <!-- Category grid -->
+        <a name="picto-category-grid"/>
         <div
-          ng-repeat="studentPictoRow in studentPictos[getCategoryId(emptyStudentPicto)]"
-          ng-init="rowIndex = $index"
-          class="picto-grid__row">
+          id="picto-category-grid"
+          class="picto-grid picto-category-grid"
+          ng-if="selectedCategory !== emptyStudentPicto && !showFreeCategory"
+          ng-style="{ 'background-color': shadeColor(selectedCategory.attributes.color, 0.3) }">
+          <h3 class="picto-category-grid__title">{{ selectedCategory.attributes.expression }}</h3>
           <div
-            class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
-            ng-repeat="studentPicto in studentPictoRow track by $index"
-            ng-init="colIndex = $index"
-            popover="{{ studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : ''}}"
-            popover-trigger="mouseenter">
-            <!-- picto-legend -->
+            ng-repeat="studentPictoRow in studentPictos[getCategoryId(selectedCategory)]"
+            ng-init="rowIndex = $index"
+            class="picto-grid__row">
             <div
-              class="picto-legend-normal"
-              ng-if="studentPicto.attributes.legend == 'normal'">
-              {{ studentPicto.attributes.expression }}
+              class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
+              data-row="{{ rowIndex }}"
+              data-column="{{ colIndex }}"
+              id="student-picto-{{
+                studentPicto.id ||
+                ('empty-' + colIndex + '-' + rowIndex)
+              }}"
+              draggable droppable drop="handleDrop"
+              popover="{{ studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : '' }}"
+              popover-trigger="mouseenter"
+              ng-repeat="studentPicto in studentPictoRow track by $index"
+              ng-init="colIndex = $index">
+              <!-- picto-legend -->
+              <div
+                class="picto-legend-normal"
+                ng-if="studentPicto.attributes.legend == 'normal'">
+                {{ studentPicto.attributes.expression }}
 
+              </div>
+              <div
+                class="picto-legend-full"
+                ng-if="studentPicto.attributes.legend == 'full'">
+                {{ studentPicto.attributes.expression }}
+              </div>
+              <!-- /.picto-legend  -->
+              <img
+                src="/app/img/redcross.png"
+                class="red-cross-visibility disabled"
+                ng-if="studentPicto.attributes.status == 'disabled'"/>
+              <img
+                ng-src="{{studentPicto.picto.uri}}"
+                class="unselectable"
+                ng-class="{
+                  'novisible': studentPicto.attributes.status == 'invisible',
+                  'deactivate': studentPicto.attributes.status == 'disabled'
+                }"
+                ng-style="{
+                  'background-color': studentPicto.attributes.color || '#ffffff'
+                }"
+                />
+              <div
+                class="picto_options"
+                ng-if="studentPicto == emptyStudentPicto">
+                <a
+                  ng-click="open_add(rowIndex, colIndex)"
+                  class="picto_add"
+                  title="{{ 'add_picto' | translate}}">
+                  <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
+                </a>
+              </div>
+              <div
+                class="picto_options"
+                ng-if="studentPicto !== emptyStudentPicto">
+                <a
+                  ng-click="delete_picto(studentPicto)"
+                  class="picto_remove"
+                  title="{{ 'delete' | translate}}">
+                  <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
+                </a>
+                <a ng-click="view_picto(studentPicto)" class="picto_ok" >
+                  <i ng-class="{
+                      color_green: studentPicto.attributes.status == 'invisible',
+                      color_black: studentPicto.attributes.status == 'enabled'
+                    }"
+                    class="glyphicon glyphicon-eye-open"
+                    aria-hidden="true"
+                    title="{{ studentPicto.attributes.status | translate}}">
+                  </i>
+                </a>
+                <a
+                  class="picto_tags"
+                  ng-click="open_tags(studentPicto)">
+                  <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
+                </a>
+                <a
+                  class="picto_config"
+                  ng-click="open_config(studentPicto)">
+                  <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
+                </a>
+              </div>
             </div>
-            <div
-              class="picto-legend-full"
-              ng-if="studentPicto.attributes.legend == 'full'">
-              {{ studentPicto.attributes.expression }}
-            </div>
-            <!-- /.picto-legend  -->
-            <img
-              src="/app/img/redcross.png"
-              class="red-cross-visibility disabled"
-              ng-if="studentPicto.attributes.status == 'disabled'"/>
-            <img
-              ng-src="{{studentPicto.picto.uri}}"
-              class="unselectable"
-              ng-click="show_category(studentPicto)"
-              ng-class="{
-                'novisible': studentPicto.attributes.status == 'invisible',
-                'deactivate': studentPicto.attributes.status == 'disabled'
-              }"
-              ng-style="{
-                'background-color': studentPicto.attributes.color
-              }"/>
-            <div
-              class="picto_options"
-              ng-if="studentPicto == emptyStudentPicto">
-              <a
-                ng-click="open_add(rowIndex, colIndex)"
-                class="picto_add"
-                title="{{ 'add_picto' | translate}}">
-                <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
-              </a>
-            </div>
-            <div
-              class="picto_options"
-              ng-if="studentPicto !== emptyStudentPicto && studentPicto.attributes.coord_y != '0'">
-              <a ng-click="view_picto(studentPicto)" class="picto_ok" >
-                <i
-                  ng-class="{
-                    color_green: studentPicto.attributes.status == 'invisible',
-                    color_black: studentPicto.attributes.status == 'enabled'
-                  }"
-                  class="glyphicon glyphicon-eye-open"
-                  aria-hidden="true"
-                  title="{{ studentPicto.attributes.status | translate}}"></i>
-              </a>
-              <a
-                ng-click="change_category(studentPicto)"
-                ng-if="studentPicto !== emptyStudentPicto && studentPicto.attributes.coord_y != '0'"
-                class="picto_cat_edit">
-                <i
-                  class="glyphicon glyphicon-picture" aria-hidden="true"
-                  title="{{ 'change_cat_picto' | translate}}">
-                </i>
-              </a>
-            </div>
-            <div
-              class="picto_options"
-              ng-if="studentPicto !== emptyStudentPicto && studentPicto.attributes.coord_y == '0'">
-              <a
-                ng-click="delete_picto(studentPicto)"
-                class="picto_remove"
-                title="{{ 'delete' | translate}}">
-                <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
-              </a>
-              <a ng-click="view_picto(studentPicto)" class="picto_ok" >
-                <i ng-class="{
-                    color_green: studentPicto.attributes.status == 'invisible',
-                    color_black: studentPicto.attributes.status == 'enabled'
-                  }"
-                  class="glyphicon glyphicon-eye-open"
-                  aria-hidden="true"
-                  title="{{ studentPicto.attributes.status | translate}}">
-                </i>
-              </a>
-              <a
-                class="picto_tags"
-                ng-click="open_tags(studentPicto)">
-                <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
-              </a>
-              <a
-                class="picto_config"
-                ng-click="open_config(studentPicto)">
-                <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
-              </a>
-            </div>
+            <div class="clearfix"></div>
           </div>
-          <div class="clearfix"></div>
         </div>
+        <!-- / Category grid -->
       </div>
-      <!-- / Main categories grid -->
-      <!-- Category grid -->
-      <a name="picto-category-grid"/>
-      <div
-        id="picto-category-grid"
-        class="picto-grid picto-category-grid"
-        ng-if="selectedCategory !== emptyStudentPicto && !showFreeCategory"
-        ng-style="{ 'background-color': shadeColor(selectedCategory.attributes.color, 0.3) }">
-        <h3 class="picto-category-grid__title">{{ selectedCategory.attributes.expression }}</h3>
-        <div
-          ng-repeat="studentPictoRow in studentPictos[getCategoryId(selectedCategory)]"
-          ng-init="rowIndex = $index"
-          class="picto-grid__row">
-          <div
-            class="picto pull-left ng-class:{'picto-out': studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)};"
-            data-row="{{ rowIndex }}"
-            data-column="{{ colIndex }}"
-            id="student-picto-{{
-              studentPicto.id ||
-              ('empty-' + colIndex + '-' + rowIndex)
-            }}"
-            draggable droppable drop="handleDrop"
-            popover="{{ studentPicto != emptyStudentPicto ? studentPicto.attributes.expression : '' }}"
-            popover-trigger="mouseenter"
-            ng-repeat="studentPicto in studentPictoRow track by $index"
-            ng-init="colIndex = $index">
-            <!-- picto-legend -->
-            <div
-              class="picto-legend-normal"
-              ng-if="studentPicto.attributes.legend == 'normal'">
-              {{ studentPicto.attributes.expression }}
+    </div><!--/. col-xs-10 -->
 
-            </div>
-            <div
-              class="picto-legend-full"
-              ng-if="studentPicto.attributes.legend == 'full'">
-              {{ studentPicto.attributes.expression }}
-            </div>
-            <!-- /.picto-legend  -->
-            <img
-              src="/app/img/redcross.png"
-              class="red-cross-visibility disabled"
-              ng-if="studentPicto.attributes.status == 'disabled'"/>
-            <img
-              ng-src="{{studentPicto.picto.uri}}"
-              class="unselectable"
-              ng-class="{
-                'novisible': studentPicto.attributes.status == 'invisible',
-                'deactivate': studentPicto.attributes.status == 'disabled'
-              }"
-              ng-style="{
-                'background-color': studentPicto.attributes.color || '#ffffff'
-              }"
-              />
-            <div
-              class="picto_options"
-              ng-if="studentPicto == emptyStudentPicto">
-              <a
-                ng-click="open_add(rowIndex, colIndex)"
-                class="picto_add"
-                title="{{ 'add_picto' | translate}}">
-                <i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
-              </a>
-            </div>
-            <div
-              class="picto_options"
-              ng-if="studentPicto !== emptyStudentPicto">
-              <a
-                ng-click="delete_picto(studentPicto)"
-                class="picto_remove"
-                title="{{ 'delete' | translate}}">
-                <i class="color_red glyphicon glyphicon-remove-circle" aria-hidden="true"></i>
-              </a>
-              <a ng-click="view_picto(studentPicto)" class="picto_ok" >
-                <i ng-class="{
-                    color_green: studentPicto.attributes.status == 'invisible',
-                    color_black: studentPicto.attributes.status == 'enabled'
-                  }"
-                  class="glyphicon glyphicon-eye-open"
-                  aria-hidden="true"
-                  title="{{ studentPicto.attributes.status | translate}}">
-                </i>
-              </a>
-              <a
-                class="picto_tags"
-                ng-click="open_tags(studentPicto)">
-                <i class="glyphicon glyphicon-tags" aria-hidden="true"></i>
-              </a>
-              <a
-                class="picto_config"
-                ng-click="open_config(studentPicto)">
-                <i class="glyphicon glyphicon-cog" aria-hidden="true"></i>
-              </a>
-            </div>
-          </div>
-          <div class="clearfix"></div>
+    <div class="col-xs-2">
+      <div class="text-center">
+        <h4>{{ viewingScene.name }}<h4>
+          <a style="text-decoration:none" popover="Escena ya activada" popover-trigger="mouseenter"><span class="label label-success" ng-if="viewingScene.active"><i class="fa fa-star" aria-hidden="true"></i> Escena activa</span></a>
+          <a style="text-decoration:none" popover="Activar escena" popover-trigger="mouseenter"><span class="label label-default" ng-if="!viewingScene.active" ng-click="update_scene(viewingScene)"><i class="fa fa-star-o" aria-hidden="true"></i> Escena inactiva</span></a>
+      </div>
+
+      <hr>
+
+      <div class="list-group">
+        <a class="list-group-item" ng-repeat="scene in scenesList" ng-click="showScene(scene.id)" ng-class="(scene.id == viewingScene.id) ? 'active' : ''">
+          <i class="fa fa-star" aria-hidden="true" ng-if="scene.active"></i> {{ scene.name }}
+        </a>
+      </div>
+
+      <hr>
+
+      <div class="text-center">
+        <div class="btn-group text-left">
+          <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <i class="fa fa-plus" aria-hidden="true"></i>
+          </button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Nueva escena con categorías</a></li>
+            <li><a href="#">Nueva escena sin categorías</a></li>
+          </ul>
         </div>
+        <button type="button" class="btn btn-primary"><i class="fa fa-files-o" aria-hidden="true"></i></button>
+        <button type="button" class="btn btn-danger"><i class="fa fa-trash" aria-hidden="true"></i></button>
       </div>
-      <!-- / Category grid -->
     </div>
+
   </div>
 </div>