lino.jorzick/greenlight
1
0
Fork 0
forked from External/greenlight
Code Issues Pull Requests Projects Releases Wiki Activity

GRN2-134: Added Color Input for lighten and darken (#529)

Browse Source 
* Added Color Input for lighten and darken

* rspec
This commit is contained in:
farhatahmad
2019-05-22 13:34:37 -04:00
committed by Jesus Federico
parent 1a5cecc0c5
commit 9638ebcbc5
12 changed files with 192 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
app/assets/javascripts/admins.js
View File

@ -31,32 +31,45 @@ $(document).on('turbolinks:load', function(){
$("#delete-confirm").parent().attr("action", url)
})
$('.colorinput').ColorPicker({
onHide: function (colpkr) {
var colour = $("#user-colour").val();
/* COLOR SELECTORS */
// Update the color in the database and reload the page
$.post($("#coloring-path").val(), {color: colour}).done(function(data) {
location.reload()
});
},
onSubmit: function(hsb, hex, rgb, el) {
$.post($("#coloring-path").val(), {color: '#' + hex}).done(function(data) {
location.reload()
});
},
$('#colorinput-regular').ColorPicker({
onBeforeShow: function () {
var colour = $("#user-colour").val();
var colour = rgb2hex($("#colorinput-regular").css("background-color"))
$(this).ColorPickerSetColor(colour);
},
onSubmit: function(_hsb, hex, _rgb, _el) {
$.post($("#coloring-path-regular").val(), {color: '#' + hex}).done(function(data) {
location.reload()
});
},
});
onChange: function (hsb, hex, rgb) {
$('.colorinput span').css('backgroundColor', '#' + hex);
$("#user-colour").val('#' + hex);
}
$('#colorinput-lighten').ColorPicker({
onBeforeShow: function () {
var colour = rgb2hex($("#colorinput-lighten").css("background-color"))
$(this).ColorPickerSetColor(colour);
},
onSubmit: function(_hsb, hex, _rgb, _el) {
$.post($("#coloring-path-lighten").val(), {color: '#' + hex}).done(function(data) {
location.reload()
});
},
});
$('#colorinput-darken').ColorPicker({
onBeforeShow: function () {
var colour = rgb2hex($("#colorinput-darken").css("background-color"))
$(this).ColorPickerSetColor(colour);
},
onSubmit: function(_hsb, hex, _rgb, _el) {
$.post($("#coloring-path-darken").val(), {color: '#' + hex}).done(function(data) {
location.reload()
});
},
});
}
@ -79,3 +92,11 @@ function changeBrandingImage(path) {
var url = $("#branding-url").val()
$.post(path, {url: url})
}
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

25
app/assets/stylesheets/utilities/_primary_themes.scss
View File

@ -1,3 +1,9 @@
.btn {
&:focus {
box-shadow: 0 0 0 2px $primary-color-lighten;
}
}
.btn-primary,
.btn-primary:visited,
.btn-primary i {
@ -97,6 +103,7 @@ input:focus, select:focus {
.bg-primary {
background-color: $primary-color !important;
color: white !important;
}
.btn-danger {
@ -129,3 +136,21 @@ input:focus, select:focus {
}
}
}
.primary-regular {
background-color: $primary-color !important;
border-color: $primary-color !important;
color: white !important;
}
.primary-lighten {
background-color: $primary-color-lighten !important;
border-color: $primary-color-lighten !important;
color: $primary-color !important;
}
.primary-darken {
background-color: $primary-color-darken !important;
border-color: $primary-color-darken !important;
color: white !important;
}