Skip to content

yotta / pictogram

Go to a project
Commit 5d1cc9b9 by Sebastián Collado Montañez
Options

working on grid color

parent e83306e8
Inline Side-by-side
Showing with 114 additions and 101 deletions
sails/src/CHANGES.md
...@@ -10,3 +10,6 @@ ALTER TABLE `stu_picto` ADD `id_child_grid` int(11) NULL; ...@@ -10,3 +10,6 @@ ALTER TABLE `stu_picto` ADD `id_child_grid` int(11) NULL;
-- Drop column 'categories' -- Drop column 'categories'
ALTER TABLE `grid` DROP COLUMN `categories`; ALTER TABLE `grid` DROP COLUMN `categories`;
-- Add color to grid column
ALTER TABLE `grid`ADD `color` varchar(7) NULL;
sails/src/api/models/Grid.js
...@@ -37,11 +37,15 @@ module.exports = { ...@@ -37,11 +37,15 @@ module.exports = {
type: "integer", type: "integer",
model: "student" model: "student"
}, },
// Relacion con Stu_picto stuPictos:{ // Relacion con Stu_picto
stuPictos:{
collection: "stupicto", collection: "stupicto",
via: "grid" via: "grid"
} },
color:{
columnName: "color",
required: false,
type: "string"
}
}, },
// //
......
sails/src/assets/scripts/modules/student/controllers/collections.js
...@@ -46,12 +46,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -46,12 +46,12 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$scope.newGridName = ""; $scope.newGridName = "";
// function to make category colores brighter // function to make category colores brighter
/*$scope.shadeColor = function (color, percent) { $scope.shadeColor = function (color, percent) {
if (!color) if (!color)
return; return;
var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF; var f=parseInt(color.slice(1),16),t=percent<0?0:255,p=percent<0?percent*-1:percent,R=f>>16,G=f>>8&0x00FF,B=f&0x0000FF;
return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1); return "#"+(0x1000000+(Math.round((t-R)*p)+R)*0x10000+(Math.round((t-G)*p)+G)*0x100+(Math.round((t-B)*p)+B)).toString(16).slice(1);
};*/ };
/* /*
* Generates the grid of pictos with empty ones * Generates the grid of pictos with empty ones
...@@ -100,7 +100,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -100,7 +100,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
$scope.viewingGrid = activeGrid; $scope.viewingGrid = activeGrid;
activeGrid.pictos.forEach(placePicto); activeGrid.pictos.forEach(placePicto);
$scope.loadingPictos = false; $scope.loadingPictos = false;
$scope.mainGrid.color = activeGrid.color;
//setTimeout(function () { $scope.$apply(); }); //setTimeout(function () { $scope.$apply(); });
console.log("mostrando " , activeGrid);
}) })
.error(function () { .error(function () {
$translate('error_loading_grid').then(function (translation) { $translate('error_loading_grid').then(function (translation) {
...@@ -123,7 +126,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec ...@@ -123,7 +126,10 @@ dashboardControllers.controller('StudentCollectionsCtrl', function StudentCollec
grid.pictos.forEach(placePicto); grid.pictos.forEach(placePicto);
$scope.loadingPictos = false; $scope.loadingPictos = false;
$scope.mainGrid.color = grid.color;
//setTimeout(function () { $scope.$apply(); }); //setTimeout(function () { $scope.$apply(); });
console.log("mostrando " , grid);
}) })
.error(function () { .error(function () {
$translate('error_loading_grid').then(function (translation) { $translate('error_loading_grid').then(function (translation) {
......
sails/src/assets/scripts/modules/student/views/collections.html
...@@ -2,113 +2,109 @@ ...@@ -2,113 +2,109 @@
<div class="panel panel-default student_tab_panel"> <div class="panel panel-default student_tab_panel">
<div class="panel-body"> <div class="panel-body">
<!-- Switch panel body --> <!-- Grid -->
<div class="" ng-switch="slide.state"> <div class="col-xs-10">
<div id="student_collection"
<!-- Slides --> class="student-collection"
<div class="col-xs-10 switch-animation"> ng-style="{ 'background-color': shadeColor(mainGrid.color, 0.3) }"
<div id="student_collection" ng-class="{ 'student-collection-loading': loadingPictos }"
class="student-collection" data-loading="{{ 'loading_pictos' | translate }}">
ng-class="{ 'student-collection-loading': loadingPictos }" <!-- Grid pictos -->
data-loading="{{ 'loading_pictos' | translate }}"> <div
<!-- No categories grid --> class="picto-grid picto-free-grid">
<div <div
class="picto-grid picto-free-grid"> ng-repeat="studentPictoRow in mainGrid"
ng-init="rowIndex = $index"
class="picto-grid__row">
<div <div
ng-repeat="studentPictoRow in freeCategoryPictos" ng-hide="studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)"
ng-init="rowIndex = $index" class="picto pull-left"
class="picto-grid__row"> 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 <div
ng-hide="studentData.attributes.size == 'large' && (rowIndex > 3 || colIndex > 7)" class="picto-legend-full"
class="picto pull-left" ng-if="studentPicto.attributes.legend == 'full'">
data-row="{{ rowIndex }}" {{ studentPicto.attributes.expression }}
data-column="{{ colIndex }}" </div>
id="student-picto-{{ <!-- /.picto-legend -->
studentPicto.id || <img
('empty-' + colIndex + '-' + rowIndex) src="/app/img/redcross.png"
}}" class="red-cross-visibility disabled"
draggable droppable drop="handleDrop" ng-if="studentPicto.attributes.status == 'disabled'"/>
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 <img
ng-click="child_grid(studentPicto.id_child_grid)" ng-click="child_grid(studentPicto.id_child_grid)"
ng-src="{{studentPicto.picto.uri}}" ng-src="{{studentPicto.picto.uri}}"
class="unselectable" class="unselectable"
ng-class="{ ng-class="{
'novisible': studentPicto.attributes.status == 'invisible', 'novisible': studentPicto.attributes.status == 'invisible',
'deactivate': studentPicto.attributes.status == 'disabled' 'deactivate': studentPicto.attributes.status == 'disabled'
}" }"
ng-style="{ ng-style="{
'background-color': studentPicto.attributes.color || '#ffffff' 'background-color': studentPicto.attributes.color || '#ffffff'
}"/> }"/>
<div <div
class="picto_options"
ng-if="studentPicto == emptyStudentPicto">
<a
ng-click="open_add(rowIndex, colIndex, true)"
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" class="picto_options"
ng-if="studentPicto !== emptyStudentPicto"> ng-if="studentPicto == emptyStudentPicto">
<a
ng-click="deletePicto(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 <a
class="picto_config" ng-click="open_add(rowIndex, colIndex, true)"
ng-click="open_config(studentPicto)"> class="picto_add"
<i class="glyphicon glyphicon-cog" aria-hidden="true"></i> title="{{ 'add_picto' | translate}}">
<i class="color_green glyphicon glyphicon-plus-sign" aria-hidden="true"></i>
</a> </a>
</div>
</div> </div>
<div class="clearfix"></div> <div
class="picto_options"
ng-if="studentPicto !== emptyStudentPicto">
<a
ng-click="deletePicto(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>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div><!--/. col-xs-10 --> </div>
</div><!--/. col-xs-10 -->
</div><!--/. Switch panel body -->
<div class="col-xs-2"> <div class="col-xs-2">
<div class="text-center"> <div class="text-center">
......
sails/src/assets/styles/main.css
...@@ -1215,7 +1215,11 @@ input.editable.grid-name { ...@@ -1215,7 +1215,11 @@ input.editable.grid-name {
} }
/* Estilos TPV */ /* Estilos TPV */
.tpv-price { .tpv-price {
font-size: xx-large; font-size: xx-large;
} }
/* Collections */
.student-collection{
border-radius: 5px;
}
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