mirror/piskel
1
0
Fork 0
mirror of https://github.com/piskelapp/piskel.git synced 2023-08-10 21:12:52 +03:00
Code Issues Projects Releases Wiki Activity

Design attempt

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

9
css/spectrum/spectrum-overrides.css
View File

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

3
css/tools.css
View File

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

9
js/controller/PaletteController.js
View File

@ -36,10 +36,13 @@
var colorPicker = $('#color-picker'); var colorPicker = $('#color-picker');
colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg)); colorPicker.spectrum($.extend({color: Constants.DEFAULT_PEN_COLOR}, spectrumCfg));
colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this)); colorPicker.change({isPrimary : true}, $.proxy(this.onPickerChange_, this));
this.setTitleOnPicker_(Constants.DEFAULT_PEN_COLOR, colorPicker);
var secondaryColorPicker = $('#secondary-color-picker'); var secondaryColorPicker = $('#secondary-color-picker');
secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg)); secondaryColorPicker.spectrum($.extend({color: Constants.TRANSPARENT_COLOR}, spectrumCfg));
secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this)); secondaryColorPicker.change({isPrimary : false}, $.proxy(this.onPickerChange_, this));
this.setTitleOnPicker_(Constants.TRANSPARENT_COLOR, secondaryColorPicker);
}; };
/** /**
@ -128,6 +131,12 @@
} else { } else {
colorPicker.spectrum("set", color); 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);
}; };
})(); })();

4
js/lib/spectrum/spectrum.js
View File

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

7
templates/drawing-tools.html
View File

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