Design attempt

This commit is contained in:
jdescottes 2013-11-27 23:43:59 +01:00
parent 42862e188d
commit 75dc1c5944
5 changed files with 17 additions and 15 deletions

View File

@ -18,18 +18,11 @@
/* Remove the padding on the input container */
.sp-replacer {
padding: 3px;
height: 50%;
height: 100%;
border-width: 0;
box-sizing: border-box;
background-color: #888;
}
.sp-replacer:first-of-type {
padding-bottom: 0px;
}
.sp-replacer:not(:first-of-type) {
padding-top: 0px;
}
/* Hide the triangle */
.sp-dd {
display: none;

View File

@ -149,6 +149,9 @@
margin-left: 0;
}
.palette-wrapper {
margin-top: 10px;
}
.palette-color[data-color=TRANSPARENT] {
position: relative;

View File

@ -36,10 +36,13 @@
var colorPicker = $('#color-picker');
colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker);
var secondaryColorPicker = $('#secondary-color-picker');
secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg));
secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
};
/**
@ -128,6 +131,12 @@
} else {
colorPicker.spectrum("set", color);
}
this.setTitleOnPicker_(color, colorPicker);
};
ns.PaletteController.prototype.setTitleOnPicker_ = function (title, colorPicker) {
var spectrumInputSelector = '.sp-replacer';
colorPicker.next(spectrumInputSelector).attr('title', title);
};
})();

View File

@ -524,8 +524,8 @@
function onMousedown (e) {
var target = $(e.target);
var parents = target.parents();
var isClickOutsideWidget = !parents.is(container) && !target.is(container);
var parents = target.closest();
var isClickOutsideWidget = !parents.is(container);
if (isClickOutsideWidget) {
hide(e);

View File

@ -5,12 +5,9 @@
<div class="palette-wrapper">
<div class="tool-icon tool-color-picker">
<input id="color-picker" class="color" type="text"/>
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
</div>
<div class="tool-icon tool-palette">
<div>
<span class="tool-icon palette-color" data-color="TRANSPARENT" title="Transparent"></span>
</div>
<div class="tool-icon tool-color-picker">
<input id="secondary-color-picker" class="secondary-color-picker color" type="text" />
</div>
</div>
</div>