Gitlab CSE Unil

Commit 7e4ff01e authored by Julien Furrer's avatar Julien Furrer
Browse files

Fixed bugs in color selectors and color picker

Warning:
pnikolov-bootstrap-colorpicker was modified
I should fork it and do the modifications in 
an other repo...
parent ab1d122d
......@@ -787,26 +787,54 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
}
function setupColorSelector(disabled) {
if (disabled) {
_colorSelector.find('.tinter').attr("disabled","disabled");
updateColorSelector("#999");
} else {
var _tId = null;
_colorSelector.find('.tinter').removeAttr("disabled");
_colorSelector.find(".picker").colorpicker().on({
changeColor: function(event) {
var rgba = event.color.toRGB();
var color = "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
_colorSelector.find(".color-menu .cx .color-overlay").css("background-color", color);
_colorSelector.find(".picker")
.colorpicker()
.on('mouseup', function(evt){
// evt.preventDefault();
var colorpicker = $(this).data('colorpicker'),
pickerEl = colorpicker.picker;
if (pickerEl.hasClass('colorpicker-visible')) {
var rgba = colorpicker.color.toRGB(),
color = "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
updateColorSelector(color);
attributes.setColor(color);
setTimeout(function(){
_colorSelector.find(".picker").colorpicker('hide');
_colorSelector.find(".color-menu").dropdown('toggle');
}, 100);
}
})
.on('changeColor', function(event) {
var rgba = event.color.toRGB();
var color = "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
updateColorSelector(color);
_colorSelector.find(".color-menu .cx").css("background-color", color);
attributes.setColor(color, false);
if (_tId)
clearTimeout(_tId);
_tId = setTimeout(
(function(color){return function(){
attributes.setColor(color, true);
}})(color),
1000
);
});
_colorSelector.find(".color-menu > li > a").click(function(){
var me = $(this);
if (!me.is(".cx")) {
var color = me.css('background-color');
updateColorSelector(color);
attributes.setColor(color);
}
});
......
......@@ -1011,8 +1011,17 @@ canvas {
min-width: 78px;
max-width: 78px;
padding: 0 0 12px 12px;
margin: 0;
margin: -55px 0 0 50px;
background-color: #333330;
border: solid 1px #808080;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) !important;
}
#tool-colorselect .color-menu.right .arrow {
border-right-color: #808080;
}
#tool-colorselect .color-menu.right .arrow:after {
border-right-color: #333330;
left: 2px;
}
#tool-colorselect .color-menu > li {
float: left;
......@@ -1024,13 +1033,12 @@ canvas {
padding: 0;
margin: 12px 12px 0 0;
clear: none;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.66), 0 2px 2px -1px rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px -1px rgba(255, 255, 255, 0.33);
}
#tool-colorselect .color-menu > li > a:hover,
#tool-colorselect .color-menu > li > a:focus {
background-color: #333330;
background-image: none;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.33) inset, 0 0 0 3px rgba(255, 255, 255, 0.9);
border-color: transparent;
}
#tool-colorselect .color-menu > li > a.c1,
......@@ -1076,7 +1084,6 @@ canvas {
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 1px 3px rgba(250, 0, 0, 0.9);
}
#tool-colorselect .color-menu > li > a.cx {
background-image: url(../img/adim/alpha.png);
width: 52px;
overflow: hidden;
}
......
......@@ -760,6 +760,9 @@ canvas {
@c5: rgb(252, 108, 162);
@c6: rgb(250, 0, 0);
@color-menu-bg: #333330;
@color-menu-border: rgba(128, 128, 128, 1);
#tool-colorselect {
// @cb- -> colorBullet
@cB-width: 20px;
......@@ -782,8 +785,19 @@ canvas {
min-width: 2*(@cB-width + @cB-space) + @cB-space + 2px;
max-width: 2*(@cB-width + @cB-space) + @cB-space + 2px;
padding: 0 0 @cB-space @cB-space;
margin: 0;
background-color: #333330;
margin: -55px 0 0 50px;
background-color: @color-menu-bg;
border: solid 1px @color-menu-border;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5) !important;
&.right .arrow{
border-right-color: @color-menu-border;
&:after {
border-right-color: @color-menu-bg;
left: 2px;
}
}
> li {
float: left;
......@@ -798,12 +812,11 @@ canvas {
margin: @cB-space @cB-space 0 0;
clear: none;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.66), 0 2px 2px -1px rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.66) inset, 0 0 2px 0 rgba(255, 255, 255, 0.5), 0 2px 2px -1px rgba(255, 255, 255, 0.33);
&:hover, &:focus {
background-color: #333330;
background-image: none;
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.33) inset, 0 0 0 3px rgba(255, 255, 255, 0.9);
border-color: transparent;
}
......@@ -827,7 +840,7 @@ canvas {
}
&.cx {
background-image: url(../img/adim/alpha.png);
// background-image: url(../img/adim/alpha.png);
width: 2*@cB-width + @cB-space;
overflow: hidden;
}
......
......@@ -224,17 +224,18 @@ if (t === "light") {
<span class="adim-icon-color"></span>
</button>
<ul class="dropdown-menu color-menu">
<ul class="dropdown-menu color-menu popover right"><div class="arrow"></div>
<li role="presentation"><a href="#" class="c1" role="menuitem" tabindex="-1">&nbsp;</a></li>
<li role="presentation"><a href="#" class="c2" role="menuitem" tabindex="-1">&nbsp;</a></li>
<li role="presentation"><a href="#" class="c3" role="menuitem" tabindex="-1">&nbsp;</a></li>
<li role="presentation"><a href="#" class="c4" role="menuitem" tabindex="-1">&nbsp;</a></li>
<li role="presentation"><a href="#" class="c5" role="menuitem" tabindex="-1">&nbsp;</a></li>
<li role="presentation"><a href="#" class="c6" role="menuitem" tabindex="-1">&nbsp;</a></li>
<li role="presentation">
<a href="#" class="cx picker" role="menuitem" tabindex="-1" data-colorpicker-guid="3" data-color="rgba(128, 23, 212,0.66)" data-color-format="rgba" style="background-color: rgba(128, 23, 212,0.66)">
<div class="color-overlay" style="background-color: rgba(128, 23, 212,0.66)" >&nbsp;</div>
<a href="#" class="cx picker" role="menuitem" tabindex="-1"
data-color="rgb(128, 23, 212)" data-color-format="rgb"
style="background-color: rgb(128, 23, 212)">
{# <div class="color-overlay" style="background-color: rgb(128, 23, 212)" >&nbsp;</div>#}
</a>
</li>
</ul>
......
......@@ -24,6 +24,7 @@
</div>
</div>
{# <iframe sandbox="allow-same-origin" src="{% url "shib-login" %}" width="0" height="0"></iframe>#}
{% endblock main_content %}
{% block main_container %}{% endblock %}
......@@ -32,8 +33,9 @@
{{ block.super }}
<script src="{% static "js/libs/jquery.min.js" %}"></script>
<script src="{% static "js/libs/bootstrap.min.js" %}"></script>
<script>
if (document.location.search) {
{% if user.is_anonymous %}<script>
if (document.location.search.match(/next=/)) {
$.get("{% url "shib-display" %}")
.fail(function(){ })
.done(function(){
......@@ -41,6 +43,7 @@
});
}
</script>
{% endif %}
{# <script src="{% static "js/libs/require.min.js" %}" data-main="{% static "js/su_app" %}"></script>#}
{% endblock %}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment