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

button titles, duplicate and raster buttons

Browse Source
This commit is contained in:
viliusle 2022-02-23 00:06:54 +02:00
parent b9ab37497a
commit 35adb236ad
6 changed files with 36 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/css/layout.css
View File

@ -396,6 +396,7 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
.layer_add{
display:inline-block;
padding:1px 8px;
margin-right: 10px;
background-color: #419147;
background-color: var(--background-color-active);
border:1px solid #444;
@ -411,6 +412,8 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
display:block;
padding:1px 5px 3px 5px;
height:19px;
width: calc(100% - 44px);
text-align: left;
overflow:hidden;
background-color:#989898;
background-color: var(--area-background-color);
@ -455,6 +458,9 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
width:20px;
height:19px;
opacity:0.1;
border: none;
background: transparent;
box-shadow: none;
}
.layers_list .visibility:after{
position: absolute;
@ -475,8 +481,10 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
width:12px;
height:19px;
margin-left: 5px;
background: url(images/icons/delete.svg) no-repeat center center;
background: transparent url(images/icons/delete.svg) no-repeat center center;
background-size: 10px 10px;
border: none;
box-shadow: none;
}
/* filters */
.layers_list .filters{

31
src/js/core/gui/gui-layers.js
View File

@ -9,13 +9,16 @@ import Base_layers_class from './../base-layers.js';
import Helper_class from './../../libs/helpers.js';
import Layer_rename_class from './../../modules/layer/rename.js';
import Effects_browser_class from './../../modules/effects/browser.js';
import Layer_duplicate_class from './../../modules/layer/duplicate.js';
import Layer_raster_class from './../../modules/layer/raster.js';
var template = `
<span class="trn">Insert:</span>
<button type="button" class="layer_add" id="insert_layer">+</button>
<button type="button" class="layer_add" id="insert_layer" title="Insert new layer">+</button>
<button type="button" class="layer_duplicate" id="layer_duplicate" title="Duplicate layer">D</button>
<button type="button" class="layer_raster" id="layer_raster" title="Convert layer to raster">R</button>
<button type="button" class="layers_arrow" title="Move down" id="layer_down">&darr;</button>
<button type="button" class="layers_arrow" title="Move up" id="layer_up">&uarr;</button>
<button type="button" class="layers_arrow" title="Move layer down" id="layer_down">&darr;</button>
<button type="button" class="layers_arrow" title="Move layer up" id="layer_up">&uarr;</button>
<div class="layers_list" id="layers"></div>
`;
@ -30,6 +33,8 @@ class GUI_layers_class {
this.Helper = new Helper_class();
this.Layer_rename = new Layer_rename_class();
this.Effects_browser = new Effects_browser_class();
this.Layer_duplicate = new Layer_duplicate_class();
this.Layer_raster = new Layer_raster_class();
}
render_main_layers() {
@ -50,6 +55,14 @@ class GUI_layers_class {
new app.Actions.Insert_layer_action()
);
}
else if (target.id == 'layer_duplicate') {
//duplicate
_this.Layer_duplicate.duplicate();
}
else if (target.id == 'layer_raster') {
//raster
_this.Layer_raster.raster();
}
else if (target.id == 'layer_up') {
//move layer up
app.State.do_action(
@ -134,16 +147,16 @@ class GUI_layers_class {
else
html += '<div class="item">';
if (value.visible == true)
html += ' <span class="visibility visible" id="visibility" data-id="' + value.id + '" title="hide"></span>';
html += ' <button class="visibility visible" id="visibility" data-id="' + value.id + '" title="Hide"></button>';
else
html += ' <span class="visibility" id="visibility" data-id="' + value.id + '" title="show"></span>';
html += ' <span class="delete" id="delete" data-id="' + value.id + '" title="delete"></span>';
html += ' <button class="visibility" id="visibility" data-id="' + value.id + '" title="Show"></button>';
html += ' <button class="delete" id="delete" data-id="' + value.id + '" title="Delete"></button>';
if(value.composition === 'source-atop'){
html += ' <span class="arrow_down" data-id="' + value.id + '" ></span>';
html += ' <button class="arrow_down" data-id="' + value.id + '" ></button>';
}
html += ' <span class="layer_name" id="layer_name" data-id="' + value.id + '">' + value.name + '</span>';
html += ' <button class="layer_name" id="layer_name" data-id="' + value.id + '">' + value.name + '</button>';
html += ' <div class="clear"></div>';
html += '</div>';

2
src/js/core/gui/gui-preview.js
View File

@ -18,7 +18,7 @@ var template = `
<button title="Zoom out" class="layer_add trn" id="zoom_less"">-</button>
<button title="Reset zoom level" class="layer_add trn" id="zoom_100">100%</button>
<button title="Zoom in" class="layer_add trn" id="zoom_more"">+</button>
<button class="layer_add trn" id="zoom_fit">Fit</button>
<button title="Fit window" class="layer_add trn" id="zoom_fit">Fit</button>
</div>
<input id="zoom_range" type="range" value="100" min="50" max="1000" step="50" />
</div>

1
src/js/core/gui/gui-tools.js
View File

@ -200,6 +200,7 @@ class GUI_tools_class {
element.classList.add('ui_icon_button');
element.classList.add('input_height');
element.innerHTML = icon;
element.title = k;
element.innerHTML = '<img style="width:16px;height:16px;" alt="'+title+'" src="images/icons/'+icon+'" />';
} else {
element.classList.add('ui_toggle_button');

2
src/js/libs/popup.js
View File

@ -44,7 +44,7 @@ import Base_gui_class from './../core/base-gui.js';
import Tools_translate_class from './../modules/tools/translate.js';
var template = `
<button type="button" class="close" data-id="popup_close">&times;</button>
<button type="button" class="close" data-id="popup_close" title="Close">&times;</button>
<div data-id="pretitle_area"></div>
<span class="text_muted right" data-id="popup_comment"></span>
<h2 class="trn" data-id="popup_title"></h2>

4
src/js/tools/media.js
View File

@ -61,7 +61,7 @@ class Media_class extends Base_tools_class {
//paging
html_paging += '<div class="media-paging" id="media_paging">';
html_paging += '<button type="button" data-value="1">&lt;</button> ';
html_paging += '<button type="button" data-value="1" title="Previous">&lt;</button> ';
for(var i = 1; i <= Math.min(10, pages); i++) {
var selected = '';
if(this.page == i){
@ -69,7 +69,7 @@ class Media_class extends Base_tools_class {
}
html_paging += '<button type="button" class="'+selected+'" data-value="'+i+'">'+i+'</button> ';
}
html_paging += '<button type="button" data-value="'+Math.min(this.page + 1, pages)+'">&gt;</button> ';
html_paging += '<button type="button" data-value="'+Math.min(this.page + 1, pages)+'" title="Next">&gt;</button> ';
html_paging += '</div>';
}
else{