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

Merge pull request #298 from kmanaseryan/feature/indicate-layer-c-masked

Browse Source 
Issue #297 - Indicate when the layer has clipping mask applied
This commit is contained in:
Vilius 2022-02-22 22:44:25 +02:00 committed by GitHub
commit 170124f041
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
images/icons/arrow-down.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="124" height="150" viewBox="0 0 124 150" xmlns="http://www.w3.org/2000/svg">
<rect x="55" y="14" width="14" height="63"/>
<rect x="116" width="14" height="61" transform="rotate(90 116 0)"/>
<path d="M62 150L8.30643 75L115.694 75L62 150Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

19
src/css/layout.css
View File

@ -427,6 +427,25 @@ IMPORTANT: any new icon should also must be added on /service-worker.js + its ve
background-color: var(--background-color-active);
color: var(--text-color-active);
}
.layers_list .arrow_down{
position: relative;
float:left;
margin-right: 5px;
width:10px;
height:19px;
opacity: 0.4;
}
.layers_list .arrow_down:after{
position: absolute;
content: '';
left:0;
top:0;
bottom:0;
right:0;
filter: var(--menu-icons-filter);
background: url('images/icons/arrow-down.svg') no-repeat center center;
background-size: 12px auto;
}
.layers_list .visibility{
position: relative;
float:left;

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

@ -138,6 +138,11 @@ class GUI_layers_class {
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>';
if(value.composition === 'source-atop'){
html += ' <span class="arrow_down" data-id="' + value.id + '" ></span>';
}
html += ' <span class="layer_name" id="layer_name" data-id="' + value.id + '">' + value.name + '</span>';
html += ' <div class="clear"></div>';
html += '</div>';