Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New colors set and css fixes #503

Merged
merged 2 commits into from
May 12, 2016
Merged

New colors set and css fixes #503

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
eea2721
New color generator
skjnldsv May 5, 2016
63ccc7b
New colours variations and random colour generator
May 11, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 11 additions & 4 deletions css/calendarlist.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,18 +183,25 @@
height: 30px;
}
.colorpicker .colorpicker-list {
display: block;
display: flex;
width: 100%;
height: 100%;
text-align: center;
justify-content: center;
align-items: center;
}
.colorpicker .colorpicker-list li {
height: 100%;
width: 29px !important;
float: left;
height: 24px;
width: 24px !important;
}
.colorpicker .colorpicker-list li.selected {
border: 1px solid #333;
}
.colorpicker .colorpicker-list li.randomcolour {
background-image: url('../img/random.svg');
background-repeat: no-repeat;
background-position: center center;
}

/*scroll issues */
#scrollable {
Expand Down
1 change: 1 addition & 0 deletions img/random.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
165 changes: 132 additions & 33 deletions js/app/directives/colorpickerDirective.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
* @author Georg Ehrke
* @copyright 2016 Raghu Nayyar <[email protected]>
* @copyright 2016 Georg Ehrke <[email protected]>
* @copyright 2016 John Molakvoæ <[email protected]>
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU AFFERO GENERAL PUBLIC LICENSE
Expand All @@ -13,48 +14,146 @@
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU AFFERO GENERAL PUBLIC LICENSE for more details.
*
* You should have received a copy of the GNU Affero General Public
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
* License along with this library. If not, see <http://www.gnu.org/licenses/>.
*
*/

/* https://github.com/kayellpeee/hsl_rgb_converter
* expected hue range: [0, 360)
* expected saturation range: [0, 1]
* expected lightness range: [0, 1]
*/
var hslToRgb = function(hue, saturation, lightness) {
'use strict';
// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
if(Array.isArray(hue)) {
[hue, saturation, lightness] = hue;
}
if (hue === undefined) {
return [0, 0, 0];
}
saturation /= 100;
lightness /= 100;

var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
var huePrime = hue / 60;
var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));

huePrime = Math.floor(huePrime);
var red;
var green;
var blue;

if (huePrime === 0) {
red = chroma;
green = secondComponent;
blue = 0;
} else if (huePrime === 1) {
red = secondComponent;
green = chroma;
blue = 0;
} else if (huePrime === 2) {
red = 0;
green = chroma;
blue = secondComponent;
} else if (huePrime === 3) {
red = 0;
green = secondComponent;
blue = chroma;
} else if (huePrime === 4) {
red = secondComponent;
green = 0;
blue = chroma;
} else if (huePrime === 5) {
red = chroma;
green = 0;
blue = secondComponent;
}

var lightnessAdjustment = lightness - (chroma / 2);
red += lightnessAdjustment;
green += lightnessAdjustment;
blue += lightnessAdjustment;

return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];

};

/*
* Convert rgb array to hex string
*/
var rgbToHex = function(r, g, b) {
'use strict';
if(Array.isArray(r)) {
[r, g, b] = r;
}
return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16);
};


/*
* Generate a random colour with the core generator
*/
var randColour = function() {
'use strict';
return rgbToHex(hslToRgb(Math.random().toString().toHsl()));
};

/**
* Directive: Colorpicker
* Description: Colorpicker for the Calendar app.
*/
* Directive: Colorpicker
* Description: Colorpicker for the Calendar app.
*/


app.directive('colorpicker', function() {
'use strict';
var listofcolours = [
'#31CC7C',
'#317CCC',
'#FF7A66',
'#F1DB50',
'#7C31CC',
'#CC317C',
'#3A3B3D',
'#CACBCD'
];
return {
scope: {
selected: '=',
customizedColors: '=colors'
},
restrict: 'AE',
templateUrl: OC.filePath('calendar','templates', 'colorpicker.html'),
link: function (scope, element, attr) {
scope.colors = scope.customizedColors || listofcolours;
scope.selected = scope.selected || scope.colors[0];

scope.pick = function (color) {
scope.selected = color;
};

}
};
'use strict';
var listofcolours = [
'#31CC7C',
'#317CCC',
'#FF7A66',
'#F1DB50',
'#7C31CC',
'#CC317C',
'#3A3B3D',
'#CACBCD'
];
if (typeof String.prototype.toHsl === 'function') {
var hsl = "";
var hslcolour = "";
// 0 40 80 120 160 200 240 280 320
listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"];
listofcolours.forEach(function(hash, index) {
hsl = hash.toHsl();
hslcolour = hslToRgb(hsl);
listofcolours[index] = rgbToHex(hslcolour);
});
}
return {
scope: {
selected: '=',
customizedColors: '=colors'
},
restrict: 'AE',
templateUrl: OC.filePath('calendar', 'templates', 'colorpicker.html'),
link: function(scope, element, attr) {
scope.colors = scope.customizedColors || listofcolours;
scope.selected = scope.selected || scope.colors[0];
scope.random = "#000000";

scope.randomizeColour = function() {
scope.random = randColour();
scope.pick(scope.random);
};

scope.pick = function(color) {
scope.selected = color;
};

}
};

});
160 changes: 129 additions & 31 deletions js/public/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1557,41 +1557,139 @@ app.controller('VAlarmController', ["$scope", function($scope) {
};
}]);

/* https://github.com/kayellpeee/hsl_rgb_converter
* expected hue range: [0, 360)
* expected saturation range: [0, 1]
* expected lightness range: [0, 1]
*/
var hslToRgb = function(hue, saturation, lightness) {
'use strict';
// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
if(Array.isArray(hue)) {
[hue, saturation, lightness] = hue;
}
if (hue === undefined) {
return [0, 0, 0];
}
saturation /= 100;
lightness /= 100;

var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
var huePrime = hue / 60;
var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));

huePrime = Math.floor(huePrime);
var red;
var green;
var blue;

if (huePrime === 0) {
red = chroma;
green = secondComponent;
blue = 0;
} else if (huePrime === 1) {
red = secondComponent;
green = chroma;
blue = 0;
} else if (huePrime === 2) {
red = 0;
green = chroma;
blue = secondComponent;
} else if (huePrime === 3) {
red = 0;
green = secondComponent;
blue = chroma;
} else if (huePrime === 4) {
red = secondComponent;
green = 0;
blue = chroma;
} else if (huePrime === 5) {
red = chroma;
green = 0;
blue = secondComponent;
}

var lightnessAdjustment = lightness - (chroma / 2);
red += lightnessAdjustment;
green += lightnessAdjustment;
blue += lightnessAdjustment;

return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];

};

/*
* Convert rgb array to hex string
*/
var rgbToHex = function(r, g, b) {
'use strict';
if(Array.isArray(r)) {
[r, g, b] = r;
}
return '#' + parseInt(r, 10).toString(16) + parseInt(g, 10).toString(16) + parseInt(b, 10).toString(16);
};


/*
* Generate a random colour with the core generator
*/
var randColour = function() {
'use strict';
return rgbToHex(hslToRgb(Math.random().toString().toHsl()));
};

/**
* Directive: Colorpicker
* Description: Colorpicker for the Calendar app.
*/
* Directive: Colorpicker
* Description: Colorpicker for the Calendar app.
*/


app.directive('colorpicker', function() {
'use strict';
var listofcolours = [
'#31CC7C',
'#317CCC',
'#FF7A66',
'#F1DB50',
'#7C31CC',
'#CC317C',
'#3A3B3D',
'#CACBCD'
];
return {
scope: {
selected: '=',
customizedColors: '=colors'
},
restrict: 'AE',
templateUrl: OC.filePath('calendar','templates', 'colorpicker.html'),
link: function (scope, element, attr) {
scope.colors = scope.customizedColors || listofcolours;
scope.selected = scope.selected || scope.colors[0];

scope.pick = function (color) {
scope.selected = color;
};

}
};
'use strict';
var listofcolours = [
'#31CC7C',
'#317CCC',
'#FF7A66',
'#F1DB50',
'#7C31CC',
'#CC317C',
'#3A3B3D',
'#CACBCD'
];
if (typeof String.prototype.toHsl === 'function') {
var hsl = "";
var hslcolour = "";
// 0 40 80 120 160 200 240 280 320
listofcolours = ["15", "9", "4", "b", "6", "11", "74", "f", "57"];
listofcolours.forEach(function(hash, index) {
hsl = hash.toHsl();
hslcolour = hslToRgb(hsl);
listofcolours[index] = rgbToHex(hslcolour);
});
}
return {
scope: {
selected: '=',
customizedColors: '=colors'
},
restrict: 'AE',
templateUrl: OC.filePath('calendar', 'templates', 'colorpicker.html'),
link: function(scope, element, attr) {
scope.colors = scope.customizedColors || listofcolours;
scope.selected = scope.selected || scope.colors[0];
scope.random = "#000000";

scope.randomizeColour = function() {
scope.random = randColour();
scope.pick(scope.random);
};

scope.pick = function(color) {
scope.selected = color;
};

}
};

});

Expand Down
Loading