Gitlab CSE Unil

Skip to content
GitLab
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
Hide whitespace changes
Inline Side-by-side
adim_app/static/_src/adim/ui.js
View file @ 7e4ff01e
...@@ -787,26 +787,54 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM ...@@ -787,26 +787,54 @@ function($, Signal, paper, config, view, io, tools, attributes, exporter, AnObjM
} }
function setupColorSelector(disabled) { function setupColorSelector(disabled) {
if (disabled) { if (disabled) {
_colorSelector.find('.tinter').attr("disabled","disabled"); _colorSelector.find('.tinter').attr("disabled","disabled");
updateColorSelector("#999"); updateColorSelector("#999");
} else { } else {
var _tId = null;
_colorSelector.find('.tinter').removeAttr("disabled"); _colorSelector.find('.tinter').removeAttr("disabled");
_colorSelector.find(".picker").colorpicker().on({ _colorSelector.find(".picker")
changeColor: function(event) { .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 rgba = event.color.toRGB();
var color = "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")"; var color = "rgba(" + rgba.r + ", " + rgba.g + ", " + rgba.b + ", " + rgba.a + ")";
_colorSelector.find(".color-menu .cx .color-overlay").css("background-color", color); updateColorSelector(color);
attributes.setColor(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(){ _colorSelector.find(".color-menu > li > a").click(function(){
var me = $(this); var me = $(this);
if (!me.is(".cx")) { if (!me.is(".cx")) {
var color = me.css('background-color'); var color = me.css('background-color');
updateColorSelector(color);
attributes.setColor(color); attributes.setColor(color);
} }
}); });
......
adim_app/static/_src/less/adim.css
View file @ 7e4ff01e
...@@ -1011,8 +1011,17 @@ canvas { ...@@ -1011,8 +1011,17 @@ canvas {
min-width: 78px; min-width: 78px;
max-width: 78px; max-width: 78px;
padding: 0 0 12px 12px; padding: 0 0 12px 12px;
margin: 0; margin: -55px 0 0 50px;
background-color: #333330; 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 { #tool-colorselect .color-menu > li {
float: left; float: left;
...@@ -1024,13 +1033,12 @@ canvas { ...@@ -1024,13 +1033,12 @@ canvas {
padding: 0; padding: 0;
margin: 12px 12px 0 0; margin: 12px 12px 0 0;
clear: none; 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:hover,
#tool-colorselect .color-menu > li > a:focus { #tool-colorselect .color-menu > li > a:focus {
background-color: #333330; background-color: #333330;
background-image: none; 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; border-color: transparent;
} }
#tool-colorselect .color-menu > li > a.c1, #tool-colorselect .color-menu > li > a.c1,
...@@ -1076,7 +1084,6 @@ canvas { ...@@ -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); 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 { #tool-colorselect .color-menu > li > a.cx {
background-image: url(../img/adim/alpha.png);
width: 52px; width: 52px;
overflow: hidden; overflow: hidden;
} }
......
adim_app/static/_src/less/adim.less
View file @ 7e4ff01e
...@@ -760,6 +760,9 @@ canvas { ...@@ -760,6 +760,9 @@ canvas {
@c5: rgb(252, 108, 162); @c5: rgb(252, 108, 162);
@c6: rgb(250, 0, 0); @c6: rgb(250, 0, 0);
@color-menu-bg: #333330;
@color-menu-border: rgba(128, 128, 128, 1);
#tool-colorselect { #tool-colorselect {
// @cb- -> colorBullet // @cb- -> colorBullet
@cB-width: 20px; @cB-width: 20px;
...@@ -782,8 +785,19 @@ canvas { ...@@ -782,8 +785,19 @@ canvas {
min-width: 2*(@cB-width + @cB-space) + @cB-space + 2px; min-width: 2*(@cB-width + @cB-space) + @cB-space + 2px;
max-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; padding: 0 0 @cB-space @cB-space;
margin: 0; margin: -55px 0 0 50px;
background-color: #333330;
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 { > li {
float: left; float: left;
...@@ -798,12 +812,11 @@ canvas { ...@@ -798,12 +812,11 @@ canvas {
margin: @cB-space @cB-space 0 0; margin: @cB-space @cB-space 0 0;
clear: none; 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 { &:hover, &:focus {
background-color: #333330; background-color: #333330;
background-image: none; 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; border-color: transparent;
} }
...@@ -827,7 +840,7 @@ canvas { ...@@ -827,7 +840,7 @@ canvas {
} }
&.cx { &.cx {
background-image: url(../img/adim/alpha.png); // background-image: url(../img/adim/alpha.png);
width: 2*@cB-width + @cB-space; width: 2*@cB-width + @cB-space;
overflow: hidden; overflow: hidden;
} }
......
adim_app/templates/adim_app/base_annotation.html
View file @ 7e4ff01e
...@@ -224,17 +224,18 @@ if (t === "light") { ...@@ -224,17 +224,18 @@ if (t === "light") {
<span class="adim-icon-color"></span> <span class="adim-icon-color"></span>
</button> </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="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="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="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="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="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="c6" role="menuitem" tabindex="-1">&nbsp;</a></li>
<li role="presentation"> <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)"> <a href="#" class="cx picker" role="menuitem" tabindex="-1"
<div class="color-overlay" style="background-color: rgba(128, 23, 212,0.66)" >&nbsp;</div> 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> </a>
</li> </li>
</ul> </ul>
......
adim_app/templates/adim_app/home.html
View file @ 7e4ff01e
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
</div> </div>
</div> </div>
{# <iframe sandbox="allow-same-origin" src="{% url "shib-login" %}" width="0" height="0"></iframe>#}
{% endblock main_content %} {% endblock main_content %}
{% block main_container %}{% endblock %} {% block main_container %}{% endblock %}
...@@ -32,8 +33,9 @@ ...@@ -32,8 +33,9 @@
{{ block.super }} {{ block.super }}
<script src="{% static "js/libs/jquery.min.js" %}"></script> <script src="{% static "js/libs/jquery.min.js" %}"></script>
<script src="{% static "js/libs/bootstrap.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" %}") $.get("{% url "shib-display" %}")
.fail(function(){ }) .fail(function(){ })
.done(function(){ .done(function(){
...@@ -41,6 +43,7 @@ ...@@ -41,6 +43,7 @@
}); });
} }
</script> </script>
{% endif %}
{# <script src="{% static "js/libs/require.min.js" %}" data-main="{% static "js/su_app" %}"></script>#} {# <script src="{% static "js/libs/require.min.js" %}" data-main="{% static "js/su_app" %}"></script>#}
{% endblock %} {% 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