mirror of
https://github.com/piskelapp/piskel.git
synced 2023-08-10 21:12:52 +03:00
Design attempt
This commit is contained in:
parent
42862e188d
commit
75dc1c5944
@ -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;
|
||||
|
@ -149,6 +149,9 @@
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.palette-wrapper {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.palette-color[data-color=TRANSPARENT] {
|
||||
position: relative;
|
||||
|
@ -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);
|
||||
};
|
||||
})();
|
||||
|
||||
|
@ -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);
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user