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

#187 svg icons

Browse Source
This commit is contained in:
viliusle 2020-11-01 19:25:04 +02:00
parent 36a89a3ae6
commit dc9fd09c2f
13 changed files with 108 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/open-edit-save.html
View File

@ -10,7 +10,7 @@
<button onclick="my_save()">Save</button>
<br /><br />
<img style="max-height:100%" id="testImage" alt="" src="../images/logo.png" onclick="open_image(this)" />
<img style="max-height:100%" id="testImage" alt="" src="../images/logo-colors.png" onclick="open_image(this)" />
</div>
<script>

BIN
images/grid.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 B

BIN
images/logo-colors.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.4 KiB

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

8
images/logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
images/sprites-light.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 14 KiB

BIN
images/sprites.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

121
src/css/layout.css
View File

@ -43,18 +43,6 @@
.grey{
color:grey;
}
.external{
padding-right: 15px;
}
.external:after{
position:absolute;
content: "";
width:10px;
height:10px;
margin-left: 5px;
background: var(--sprites-url) no-repeat -700px 0;
opacity: 0.3;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
@ -165,7 +153,9 @@ body .sp-preview{
top: 0;
width: 31px;
height: 30px;
background: var(--sprites-url) -50px -100px no-repeat;
background: url('images/logo.svg') no-repeat center center;
background-size: auto 28px;
filter: var(--mobile-menu-toggle-filter);
}
.logo:hover:after{
left: 2px;
@ -249,48 +239,66 @@ body .sp-preview{
max-height: 100%;
}
.sidebar_left .item{
position: relative;
display:block;
background-color: rgba(255, 255, 255, 0.2);
background-color: var(--area-background-color);
background-image: var(--sprites-url);
background-repeat: no-repeat;
height: 25px;
width: 30px;
margin: 5px 0 0 5px;
overflow: hidden;
cursor: pointer;
}
.sidebar_left .item:after{
position: absolute;
content: '';
left:0;
top:0;
bottom:0;
right:0;
filter: var(--menu-icons-filter);
background-position: center center;
background-repeat: no-repeat;
background-size: 20px 20px;
}
.sidebar_left .item:hover{
background-color: rgba(255, 255, 255, 0.5);
background-color: var(--background-color-hover);
}
.sidebar_left .item.active{
background-color: var(--background-color-active);
background-image: var(--sprites-url-active);
color: var(--text-color-active);
}
.sidebar_left .item.active:after{
filter: var(--menu-icons-filter-active);
}
.sidebar_left .select{ background-position: -342px 2px; }
.sidebar_left .selection{ background-position: -43px -47px; }
.sidebar_left .magic_wand{ background-position: -294px -48px; }
.sidebar_left .brush{ background-position: 5px 3px; }
.sidebar_left .erase{ background-position: -444px 3px; }
.sidebar_left .fill{ background-position: -145px 2px; }
.sidebar_left .pick_color{ background-position: -643px 4px; }
.sidebar_left .pencil{ background-position: -594px 3px; }
.sidebar_left .line{ background-position: -193px -46px; }
.sidebar_left .text{ background-position: -394px 4px; }
.sidebar_left .rectangle{ background-position: -94px -45px; }
.sidebar_left .circle{ background-position: -547px 2px; }
.sidebar_left .blur{ background-position: -41px 2px; }
.sidebar_left .sharpen{ background-position: 6px -47px; }
.sidebar_left .desaturate{ background-position: -195px 3px; }
.sidebar_left .bulge_pinch{ background-position: -93px 5px; }
.sidebar_left .clone{ background-position: -493px 2px; }
.sidebar_left .gradient{ background-position: -243px 5px; }
.sidebar_left .crop{ background-position: -294px 3px; }
.sidebar_left .animation{ background-position: -244px -47px; }
.sidebar_left .media{ background-position: -145px -47px; }
.sidebar_left .select:after{ background-image: url('images/icons/select.svg'); }
.sidebar_left .selection:after{ background-image: url('images/icons/selection.svg'); }
.sidebar_left .brush:after{ background-image: url('images/icons/brush.svg'); }
.sidebar_left .pencil:after{ background-image: url('images/icons/pencil.svg'); }
.sidebar_left .pick_color:after{ background-image: url('images/icons/pick_color.svg'); }
.sidebar_left .erase:after{ background-image: url('images/icons/erase.svg'); }
.sidebar_left .magic_wand:after{ background-image: url('images/icons/magic_wand.svg'); }
.sidebar_left .fill:after{ background-image: url('images/icons/fill.svg'); }
.sidebar_left .line:after{ background-image: url('images/icons/line.svg'); }
.sidebar_left .rectangle:after{ background-image: url('images/icons/rectangle.svg'); }
.sidebar_left .circle:after{ background-image: url('images/icons/circle.svg'); }
.sidebar_left .media:after{ background-image: url('images/icons/media.svg'); }
.sidebar_left .text:after{
background-image: url('../../images/icons/text.svg');
background-size: 16px auto;
}
.sidebar_left .gradient:after{
background-image: url('images/icons/gradient.png');
background-size: 18px 12px;
filter: none;
}
.sidebar_left .clone:after{ background-image: url('images/icons/clone.svg'); }
.sidebar_left .crop:after{ background-image: url('images/icons/crop.svg'); }
.sidebar_left .blur:after{ background-image: url('images/icons/blur.svg'); }
.sidebar_left .sharpen:after{ background-image: url('images/icons/sharpen.svg'); }
.sidebar_left .desaturate:after{ background-image: url('images/icons/desaturate.svg'); }
.sidebar_left .bulge_pinch:after{ background-image: url('images/icons/bulge_pinch.svg'); }
.sidebar_left .animation:after{ background-image: url('images/icons/animation.svg'); }
@media screen and (max-width:550px){
#sidebar_left{
@ -400,15 +408,26 @@ body .sp-preview{
color: var(--text-color-active);
}
.layers_list .visibility{
position: relative;
float:left;
cursor:pointer;
padding:0px 3px 0px 3px;
margin-right: 5px;
width:20px;
height:19px;
background: var(--sprites-url) no-repeat -148px -99px;
opacity:0.1;
}
.layers_list .visibility:after{
position: absolute;
content: '';
left:0;
top:0;
bottom:0;
right:0;
filter: var(--menu-icons-filter);
background: url('images/icons/view.svg') no-repeat center center;
background-size: 18px auto;
}
.layers_list .visible{ opacity:0.4; }
.layers_list .delete{
float:right;
@ -417,7 +436,8 @@ body .sp-preview{
width:12px;
height:19px;
margin-left: 5px;
background: var(--sprites-url) no-repeat -100px -96px;
background: url(images/icons/delete.svg) no-repeat center center;
background-size: 10px 10px;
}
/* filters */
.layers_list .filters{
@ -463,14 +483,23 @@ body .sp-preview{
border: 1px solid #444;
}
.block.details button.reset{
position: relative;
width: 25px;
overflow: hidden;
opacity: 0.5;
background-image: var(--sprites-url);
background-repeat: no-repeat;
background-position: -747px 2px;
color: transparent;
}
.block.details button.reset:after{
position: absolute;
content: '';
left:0;
top:0;
bottom:0;
right:0;
background: url(images/icons/refresh.svg) no-repeat center center;
background-size: auto 14px;
filter: var(--menu-icons-filter);
}
.block.details button.active{
background-color: var(--background-color-active);
color: var(--text-color-active);
@ -526,7 +555,7 @@ body .sp-preview{
height: 100%;
position: absolute;
pointer-events: none;
/*background: url(images/grid.png) repeat top left;*/
/*background: url(images/icons/grid.png) repeat top left;*/
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAQElEQVQ4T2N89+7dfwYigKCgIBGqGBgYRw3EGU6jYYgzaIZAsvn//z9ROeX9+/fE5ZRRA3GG02gY4s4pgz7ZAAAnSWvHPkHXaAAAAABJRU5ErkJggg==') repeat top left;
z-index:1;
/* disable antialiasing */
@ -599,4 +628,4 @@ canvas{
.sidebar_left{
width: 88px;
}
}
}

15
src/css/menu.css
View File

@ -140,7 +140,8 @@
width: 10px;
height: 10px;
margin-left: 5px;
background: var(--sprites-url-active) no-repeat -700px 0;
background: url('images/icons/external.png') no-repeat center center;
background-size: auto 8px;
opacity: 0.3;
}
.main_menu > ul.menu_dropdown > li > a > * {
@ -167,14 +168,24 @@
position: absolute;
width: 50px;
height: 50px;
background: var(--sprites-url) no-repeat 11px -86px;
display: block;
top: 0;
z-index: 200;
border: 0;
outline: 0;
cursor: pointer;
background-color: transparent;
}
.left_mobile_menu:after, .right_mobile_menu:after {
position: absolute;
content: '';
left:0;
top:0;
bottom:0;
right:0;
filter: var(--mobile-menu-toggle-filter);
background: url('images/icons/menu.svg') no-repeat center center;
background-size: auto 26px;
}
.left_mobile_menu { left:0; }
.right_mobile_menu { right:0; }

1
src/css/popup.css
View File

@ -100,4 +100,3 @@
clear:both;
}
}

2
src/css/print.css
View File

@ -31,4 +31,4 @@
.canvas_wrapper canvas{
border:0;
}
}
}

18
src/css/reset.css
View File

@ -28,6 +28,8 @@
--input-border-radius: .4rem;
--input-group-border-color: #323a3c;
--menu-background-color: #222;
--menu-icons-filter: invert(1);
--menu-icons-filter-active: none;
--menu-text-color: #cccccc;
--number-input-arrow-width: 2rem;
--background-color-active: #adecab;
@ -36,9 +38,7 @@
--border-color: #727677;
--scrollbar-track-color: #464d4f;
--scrollbar-thumb-color: #2f3739;
--sprites-url: url(images/sprites-light.png);
--sprites-url-active: url(images/sprites.png);
--mobile-menu-toggle-filter: none;
--mobile-menu-toggle-filter: invert(1);
}
html {
font-size: 10px; /* Base is 10px for easy REM calculation */
@ -67,6 +67,8 @@ body.theme-light{
--input-border-color-active: #59aed8;
--input-group-border-color: #c4c4c4;
--menu-background-color: #eaeaea;
--menu-icons-filter: none;
--menu-icons-filter-active: invert(1);
--menu-text-color: #333333;
--menu-dropdown-hover-background-color: #a3dbf7;
--menu-dropdown-border-color: #15439b;
@ -76,8 +78,6 @@ body.theme-light{
--border-color: #c1c1c1;
--scrollbar-track-color: #f9f9fa;
--scrollbar-thumb-color: #919090;
--sprites-url: url(images/sprites.png);
--sprites-url-active: url(images/sprites.png);
--mobile-menu-toggle-filter: none;
}
body.theme-green{
@ -98,6 +98,8 @@ body.theme-green{
--input-text-color: #0c0c0d;
--input-border-color: #ccc;
--menu-background-color: #1c2e04;
--menu-icons-filter: invert(1);
--menu-icons-filter-active: none;
--menu-text-color: #acc3a9;
--background-color-active: #58960e;
--background-color-hover: #58960e;
@ -105,9 +107,7 @@ body.theme-green{
--border-color: #4d6b1e;
--scrollbar-track-color: #050702;
--scrollbar-thumb-color: #80937d;
--sprites-url: url(images/sprites.png);
--sprites-url-active: url(images/sprites.png);
--mobile-menu-toggle-filter: invert();
--mobile-menu-toggle-filter: invert(1);
}
body{
margin: 0px;
@ -225,4 +225,4 @@ label{
transform: scale(1.5);
margin: 8px;
}
}
}

2
src/js/modules/help/about.js
View File

@ -14,7 +14,7 @@ class Help_about_class {
var settings = {
title: 'About',
params: [
{title: "", html: '<img style="height:64px;" class="about-logo" alt="" src="images/logo-colors.png" />'},
{title: "", html: '<img style="width:64px;" class="about-logo" alt="" src="images/logo-colors.png" />'},
{title: "Name:", html: '<span class="about-name">miniPaint</span>'},
{title: "Version:", value: VERSION},
{title: "Description:", value: "Online image editor."},