scenes interface structure

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

 <!-- Collection tab-->
 <!-- Collection tab-->
 <div class="panel panel-default student_tab_panel">
 <div class="panel panel-default student_tab_panel">
   <div class="panel-body">
   <div class="panel-body">
-<!--
+    <!--
     <div class="row">
     <div class="row">
       <div class="col-md-6">
       <div class="col-md-6">
         <a class="btn btn-success btn-sm" role="button" ng-click="open()">
         <a class="btn btn-success btn-sm" role="button" ng-click="open()">
@@ -11,8 +11,8 @@
       </div>
       </div>
     </div>
     </div>
     -->
     -->
-    <div
-      id="student_collection"
+    <div class="col-xs-10"><!-- col-xs-10 -->
+      <div id="student_collection"
         class="student-collection"
         class="student-collection"
         ng-class="{ 'student-collection-loading': loadingPictos }"
         ng-class="{ 'student-collection-loading': loadingPictos }"
         data-loading="{{ 'loading_pictos' | translate }}">
         data-loading="{{ 'loading_pictos' | translate }}">
@@ -317,5 +317,39 @@
         </div>
         </div>
         <!-- / Category grid -->
         <!-- / Category grid -->
       </div>
       </div>
+    </div><!--/. col-xs-10 -->
+
+    <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>
+    </div>
+
   </div>
   </div>
 </div>
 </div>