Skip to content

yotta / pictogram

Go to a project
Commit 77cf2f21 by Sebastián Collado Montañez
Options

breadcrumbs

parent 5d1cc9b9
Inline Side-by-side
Showing with 87 additions and 53 deletions
sails/src/assets/scripts/modules/student/controllers/collections.js
......@@ -44,6 +44,7 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$scope.viewingGrid = null;
$scope.gridsList = null;
$scope.newGridName = "";
$scope.breadcrumbs = [];
// function to make category colores brighter
$scope.shadeColor = function (color, percent) {
......@@ -97,13 +98,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$http.get(config.backend + '/stu/' + $scope.studentData.id + '/activeGrid')
.success(function (activeGrid) {
activeGrid.name = $translate.instant(activeGrid.name);
$scope.viewingGrid = activeGrid;
activeGrid.pictos.forEach(placePicto);
$scope.viewingGrid = activeGrid;
$scope.loadingPictos = false;
$scope.mainGrid.color = activeGrid.color;
//setTimeout(function () { $scope.$apply(); });
console.log("mostrando " , activeGrid);
$scope.breadcrumbs = []; //clean breadcrumbs
})
.error(function () {
$translate('error_loading_grid').then(function (translation) {
......@@ -114,22 +114,61 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
/**
* Get a grid and show it
* @param {[type]} idGrid ID from clicked grid
* @param {Boolean} isChild True if clicked for grid child
* @return {[type]} Show clicked grid
*/
$scope.showGrid = function (idGrid) {
$scope.showGrid = function (idGrid, isChild) {
// Check if idGrid not null
if(idGrid == null) return;
// Save last grid
var objLastGrid = {id:$scope.viewingGrid.id,name:$scope.viewingGrid.name};
$scope.loadingPictos = true;
$scope.mainGrid = generateGrid();
$http.get(config.backend + '/grid/' + idGrid)
.success(function (grid) {
grid.name = $translate.instant(grid.name);
$scope.viewingGrid = grid;
grid.pictos.forEach(placePicto);
$scope.viewingGrid = grid;
$scope.loadingPictos = false;
$scope.mainGrid.color = grid.color;
//setTimeout(function () { $scope.$apply(); });
console.log("mostrando " , grid);
// If clicked for child, add to breadcrumbs
if(isChild){
$scope.breadcrumbs.push(objLastGrid);
}else{
$scope.breadcrumbs = []; //clean breadcrumbs
}
})
.error(function () {
$translate('error_loading_grid').then(function (translation) {
ngToast.danger({ content: translation });
});
});
};
$scope.showLastGrid = function (){
var objGrid = $scope.breadcrumbs.pop();
var idGrid = objGrid.id;
// Check if idGrid not null
if(idGrid == null) return;
$scope.loadingPictos = true;
$scope.mainGrid = generateGrid();
$http.get(config.backend + '/grid/' + idGrid)
.success(function (grid) {
grid.name = $translate.instant(grid.name);
grid.pictos.forEach(placePicto);
$scope.viewingGrid = grid;
$scope.loadingPictos = false;
})
.error(function () {
$translate('error_loading_grid').then(function (translation) {
......@@ -460,37 +499,9 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
};
/**
* Climb to child grid clicking on a picto
*/
$scope.child_grid = function(id_child_grid){
// Check if picto have child grid
if(id_child_grid == null) return;
// Show child grid
//$scope.showGrid(id_child_grid);
$scope.loadingPictos = true;
$scope.mainGrid = generateGrid();
$http.get(config.backend + '/grid/' + id_child_grid)
.success(function (grid) {
grid.name = $translate.instant(grid.name);
$scope.viewingGrid = grid;
grid.pictos.forEach(placePicto);
$scope.loadingPictos = false;
})
.error(function () {
$scope.showActiveGrid();
console.log("La escena no existe");
});
};
/**
* Modal window to open picto config
*/
$scope.open_config = function (studentPicto) {
console.log(studentPicto);
var modalInstance = $modal.open({
animation: true,
templateUrl: 'modules/student/views/pictoconfig.html',
......
sails/src/assets/scripts/modules/student/views/collections.html
......@@ -2,16 +2,30 @@
<div class="panel panel-default student_tab_panel">
<div class="panel-body">
<!-- Grid header -->
<div class="container-fluid">
<div class="col-xs-8" style="margin-bottom:1em;">
<i class="fa fa-pencil-square-o fa-2x text-muted" aria-hidden="true"style="margin-right:0.25em;"></i>
<input type="text" class="grid-header-name" ng-model="viewingGrid.name" ng-blur="update_grid(viewingGrid)">
</div>
<!-- Grid header -->
<div class="col-xs-2 text-center" style="margin-bottom:1em;">
<button type="button" class="btn btn-danger btn-grid-back" ng-if="breadcrumbs.length != 0" ng-click="showLastGrid()">
<i class="fa fa-arrow-circle-left" aria-hidden="true"></i> Volver atrás
</button>
</div>
</div>
<!-- Grid -->
<div class="col-xs-10">
<div id="student_collection"
class="student-collection"
ng-style="{ 'background-color': shadeColor(mainGrid.color, 0.3) }"
ng-class="{ 'student-collection-loading': loadingPictos }"
data-loading="{{ 'loading_pictos' | translate }}">
<!-- Grid pictos -->
<div
class="picto-grid picto-free-grid">
class="picto-grid"
ng-style="{ 'background-color': shadeColor(viewingGrid.color, 0.3) }">
<div
ng-repeat="studentPictoRow in mainGrid"
ng-init="rowIndex = $index"
......@@ -48,7 +62,7 @@
ng-if="studentPicto.attributes.status == 'disabled'"/>
<img
ng-click="child_grid(studentPicto.id_child_grid)"
ng-click="showGrid(studentPicto.id_child_grid,true)"
ng-src="{{studentPicto.picto.uri}}"
class="unselectable"
ng-class="{
......@@ -107,27 +121,26 @@
</div><!--/. col-xs-10 -->
<div class="col-xs-2">
<label>Opciones</label>
<div class="text-center">
<input type="text" class="editable grid-name text-center" ng-model="viewingGrid.name" ng-blur="update_grid(viewingGrid)">
<a style="text-decoration:none" popover="{{ 'grid_already_activated' | translate}}" popover-trigger="mouseenter" ng-if="viewingGrid.active"><span class="label label-success"><i class="fa fa-star" aria-hidden="true"></i> {{ 'grid_active' | translate }}</span></a>
<a style="text-decoration:none" popover="{{ 'grid_activate' | translate}}" popover-trigger="mouseenter" ng-if="!viewingGrid.active" ng-click="viewingGrid.active=true;activate_grid(viewingGrid)"><span class="label label-default"><i class="fa fa-star-o" aria-hidden="true"></i> {{ 'grid_inactive' | translate }}</span></a>
<button type="button" ng-if="!viewingGrid.active" class="btn btn-primary" ng-click="viewingGrid.active=true;activate_grid(viewingGrid)" style="margin-bottom:1em;">Activar tablero</button>
<button type="button" ng-if="viewingGrid.active" class="btn btn-success" disabled style="margin-bottom:1em;">Tablero activado</button>
<button type="button" class="btn btn-success" ng-click="open_new_grid()" aria-expanded="false"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary" ng-click="copy_grid()" title="{{ 'duplicate' | translate}}"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger" ng-click="delete_grid(viewingGrid)" title="{{ 'delete' | translate}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
</div>
<hr>
<label>Tableros</label>
<div class="list-group">
<a class="list-group-item" ng-repeat="grid in gridsList track by $index" ng-click="showGrid(grid.id)" ng-class="(grid.id == viewingGrid.id) ? 'active' : ''">
<a class="list-group-item" ng-repeat="grid in gridsList track by $index" ng-click="showGrid(grid.id,false)" ng-class="(grid.id == viewingGrid.id) ? 'active' : ''">
<i class="fa fa-star" aria-hidden="true" ng-if="grid.active"></i> {{ grid.name }}
</a>
</div>
<hr>
<div class="text-center">
<button type="button" class="btn btn-success" ng-click="open_new_grid()" aria-expanded="false"><i class="fa fa-plus" aria-hidden="true"></i></button>
<button type="button" class="btn btn-primary" ng-click="copy_grid()" title="{{ 'duplicate' | translate}}"><i class="fa fa-files-o" aria-hidden="true"></i></button>
<button type="button" class="btn btn-danger" ng-click="delete_grid(viewingGrid)" title="{{ 'delete' | translate}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
</div>
</div>
</div>
......
sails/src/assets/styles/main.css
......@@ -1128,6 +1128,12 @@ input.editable.grid-name {
float: left;
}
.grid-header-name{
font-size: 30px;
font-weight: 600;
border: none;
}
/* Cambiar tamaño imagen */
.img-200 {
margin-top: 25px;
......@@ -1220,6 +1226,10 @@ input.editable.grid-name {
}
/* Collections */
.student-collection{
.picto-grid{
padding: 4px 0px 4px 4px;
border-radius: 5px;
}
.btn-grid-back{
margin-top:0.5em;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment