artin/miniPaint
1
0
Fork 0
mirror of https://github.com/viliusle/miniPaint.git synced 2026-02-06 13:51:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

RGBA components GUI update

Browse Source
This commit is contained in:
ViliusL 2016-03-07 00:35:24 +02:00
parent 86a98b78eb
commit 78f5d0af81
7 changed files with 22 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@ -12,7 +12,7 @@ var canvas_grid = document.getElementById("canvas_grid").getContext("2d"); //gr
var canvas_preview = document.getElementById("canvas_preview").getContext("2d"); //mini preview
//global settings
var VERSION = '2.4';
var VERSION = '3';
var WIDTH = 800; //default canvas midth
var HEIGHT = 600; //default canvas height
var COLOR = '#0000ff'; //active color

BIN
img/sprites.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

15
index.html
View File

@ -30,10 +30,17 @@
<div class="block">
<input type="text" id="color_hex" value="#000000" /><br />
<div id="main_colour_rgb">
<span class="red">Red</span> <input id="rgb_r" onKeyUp="GUI.set_color_rgb(this, 'r')" onchange="GUI.set_color_rgb(this, 'r')" type="number" value="255" /><br />
<span class="green">Green</span> <input id="rgb_g" onKeyUp="GUI.set_color_rgb(this, 'g')" onchange="GUI.set_color_rgb(this, 'g')" type="number" value="255" /><br />
<span class="blue">Blue</span> <input id="rgb_b" onKeyUp="GUI.set_color_rgb(this, 'b')" onchange="GUI.set_color_rgb(this, 'b')" type="number" value="255" /><br />
<span class="alpha">Alpha</span> <input id="rgb_a" onKeyUp="GUI.set_color_rgb(this, 'a')" onchange="GUI.set_color_rgb(this, 'a')" type="number" value="255" />
<a class="red" href="#" title="Red" onclick="return false;">Red</a>
<input id="rgb_r" onKeyUp="GUI.set_color_rgb(this, 'r')" onchange="GUI.set_color_rgb(this, 'r')" type="number" value="255" />
<br />
<a class="green" href="#" title="Green" onclick="return false;">Green</a>
<input id="rgb_g" onKeyUp="GUI.set_color_rgb(this, 'g')" onchange="GUI.set_color_rgb(this, 'g')" type="number" value="255" />
<br />
<a class="blue" href="#" title="Blue" onclick="return false;">Blue</a>
<input id="rgb_b" onKeyUp="GUI.set_color_rgb(this, 'b')" onchange="GUI.set_color_rgb(this, 'b')" type="number" value="255" />
<br />
<a class="alpha" href="#" title="Alpha" onclick="return false;">Alpha</a>
<input id="rgb_a" onKeyUp="GUI.set_color_rgb(this, 'a')" onchange="GUI.set_color_rgb(this, 'a')" type="number" value="255" />
</div>
</div>
<div class="block" id="info"></div>

5
js/draw_tools.js
View File

@ -1298,15 +1298,14 @@ function DRAW_TOOLS_CLASS() {
layer.clearRect(0, 0, WIDTH, HEIGHT);
layer.putImageData(tmp, 0, 0);
}
//resize
EDIT.save_state();
WIDTH = this.select_data.w;
HEIGHT = this.select_data.h;
LAYER.set_canvas_size();
this.select_data = false;
canvas_front.clearRect(0, 0, WIDTH, HEIGHT);
EDIT.edit_clear();
}
}
};

1
js/edit.js
View File

@ -70,6 +70,7 @@ function EDIT_CLASS() {
this.edit_clear = function () {
DRAW.select_data = false;
canvas_front.clearRect(0, 0, WIDTH, HEIGHT);
DRAW.select_square_action = '';
};
this.copy_to_clipboard = function () {

4
js/events.js
View File

@ -177,9 +177,7 @@ function EVENTS_CLASS() {
DRAW.curve_points = [];
if (DRAW.select_data != false) {
DRAW.select_data = false;
canvas_front.clearRect(0, 0, WIDTH, HEIGHT);
DRAW.select_square_action = '';
EDIT.edit_clear();
}
}
//z - undo

12
styles/styles.css
View File

@ -121,7 +121,7 @@ input[type="button"]{
font-size: 13px;
}
#logo:hover{
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes shake {
10%, 90% {
@ -171,7 +171,7 @@ input[type="button"]{
#main_colour_rgb input{
width:55px;
}
#main_colour_rgb span{
#main_colour_rgb a{
display: inline-block;
width: 14px;
height: 14px;
@ -179,10 +179,10 @@ input[type="button"]{
color: transparent;
margin-right: 5px;
}
#main_colour_rgb span.red{ background-color:#ff0000; }
#main_colour_rgb span.green{ background-color:#00ff00; }
#main_colour_rgb span.blue{ background-color:#0000ff; }
#main_colour_rgb span.alpha{ background-color:#999999; }
#main_colour_rgb a.red{ background-color:#ff0000; }
#main_colour_rgb a.green{ background-color:#00ff00; }
#main_colour_rgb a.blue{ background-color:#0000ff; }
#main_colour_rgb a.alpha{ background: url('../img/sprites.png') no-repeat -550px -50px; }
#preview{
width:150px;
height:150px;