mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
updates
This commit is contained in:
Sam Keddy
parent
37c758d455
commit
d899929816
@ -1,6 +1,8 @@
|
||||
$base-color: #332f35;
|
||||
$shop: #b63831;
|
||||
$red: #e3474a;
|
||||
$orange: #df7c25;
|
||||
$green: #70a630;
|
||||
|
||||
$palettes: (
|
||||
base: (
|
||||
@ -28,9 +30,13 @@ $palettes: (
|
||||
background: (
|
||||
default: darken($base-color, 3%),
|
||||
hover: darken($base-color, 1.5%),
|
||||
highlight: lighten($base-color, 3%),
|
||||
highlight-hover: lighten($base-color, 5%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 50%),
|
||||
symbol: lighten($base-color, 8%),
|
||||
text: lighten($base-color, 50%),
|
||||
hover: lighten($base-color, 100%),
|
||||
)
|
||||
),
|
||||
@ -48,11 +54,16 @@ $palettes: (
|
||||
background: (
|
||||
default: lighten($base-color, 10%),
|
||||
hover: lighten($base-color, 15%),
|
||||
weak: lighten($base-color, 5%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 80%),
|
||||
default: lighten($base-color, 50%),
|
||||
dropdown: lighten($base-color, 50%),
|
||||
text: lighten($base-color, 100%),
|
||||
text: lighten($base-color, 60%),
|
||||
symbol: lighten($base-color, 50%),
|
||||
indent: lighten($base-color, 5%),
|
||||
weak: lighten($base-color, 25%),
|
||||
hover: lighten($base-color, 75%),
|
||||
)
|
||||
),
|
||||
selectedTool: (
|
||||
@ -81,6 +92,7 @@ $palettes: (
|
||||
),
|
||||
foreground: (
|
||||
default: #fff,
|
||||
text: lighten($base-color, 40%),
|
||||
symbol: lighten($base-color, 5%),
|
||||
symbol-hover: lighten($base-color, 20%),
|
||||
weak: lighten($base-color, 20%),
|
||||
@ -102,9 +114,19 @@ $palettes: (
|
||||
button-hover: lighten($base-color, 70%),
|
||||
)
|
||||
),
|
||||
indent-darker: (
|
||||
background: (
|
||||
default: darken($base-color, 8%),
|
||||
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 15%),
|
||||
)
|
||||
),
|
||||
footer: (
|
||||
background: (
|
||||
default: darken($base-color, 9%),
|
||||
hover: darken($base-color, 2%),
|
||||
),
|
||||
foreground: (
|
||||
default: lighten($base-color, 20%),
|
||||
|
||||
@ -127,7 +127,7 @@ svg {
|
||||
float: left;
|
||||
height: 100%;
|
||||
}
|
||||
li button {
|
||||
li button, li a {
|
||||
color: color(menu, foreground);
|
||||
height: 100%;
|
||||
padding: 17px;
|
||||
@ -156,15 +156,21 @@ svg {
|
||||
padding-bottom: 2px;
|
||||
li {
|
||||
width: 100%;
|
||||
button {
|
||||
button, a {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 32px 8px 16px;
|
||||
font-size: 1em;
|
||||
&:hover {
|
||||
background-color: color(menu, background, hover);
|
||||
color: color(menu, foreground, hover);
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
.disabled {
|
||||
@ -215,7 +221,7 @@ svg {
|
||||
li {
|
||||
width: 48px;
|
||||
flex-basis: 48px;
|
||||
|
||||
|
||||
&:not(.noshrink) {
|
||||
flex-grow: 1;
|
||||
}
|
||||
@ -223,7 +229,7 @@ svg {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//added when the color is a duplicate of another
|
||||
@ -316,7 +322,7 @@ svg {
|
||||
|
||||
#add-color-button {
|
||||
background: color(base);
|
||||
|
||||
|
||||
path {
|
||||
fill: #6f6873;
|
||||
}
|
||||
@ -483,7 +489,7 @@ svg {
|
||||
border-bottom: dotted 1px color(base, foreground, text);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.close-button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
@ -507,7 +513,7 @@ svg {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
button.default {
|
||||
float: right;
|
||||
background: color(button);
|
||||
@ -521,7 +527,7 @@ svg {
|
||||
background: color(button, background, hover);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
input {
|
||||
background: color(indent);
|
||||
border: none;
|
||||
@ -532,7 +538,7 @@ svg {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.dropdown-button {
|
||||
background: color(button) url('/pixel-editor/dropdown-arrow.png') right center no-repeat;
|
||||
border: none;
|
||||
@ -550,7 +556,7 @@ svg {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.dropdown-menu {
|
||||
background: color(button);
|
||||
border: none;
|
||||
@ -566,7 +572,7 @@ svg {
|
||||
&.selected {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
background: color(button);
|
||||
border: none;
|
||||
@ -692,7 +698,7 @@ svg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
div {
|
||||
width: 400px;
|
||||
background-color: color(base);
|
||||
@ -703,7 +709,7 @@ svg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
|
||||
|
||||
margin: -120px 0 0 -220px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,41 +2,41 @@ var mainMenuItems = document.getElementById("main-menu").children;
|
||||
|
||||
//for each button in main menu (starting at 1 to avoid logo)
|
||||
for (var i = 1; i < mainMenuItems.length; i++) {
|
||||
|
||||
|
||||
//get the button that's in the list item
|
||||
var menuItem = mainMenuItems[i];
|
||||
var menuButton = menuItem.children[0];
|
||||
|
||||
|
||||
console.log(mainMenuItems)
|
||||
|
||||
|
||||
//when you click a main menu items button
|
||||
on('click', menuButton, function (e, button) {
|
||||
console.log('parent ', button.parentElement)
|
||||
select(button.parentElement);
|
||||
});
|
||||
|
||||
|
||||
var subMenu = menuItem.children[1];
|
||||
var subMenuItems = subMenu.children;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//when you click an item within a menu button
|
||||
for (var j = 0; j < subMenuItems.length; j++) {
|
||||
|
||||
|
||||
var subMenuItem = subMenuItems[j];
|
||||
var subMenuButton = subMenuItem.children[0];
|
||||
|
||||
subMenuButton.addEventListener("click", function () {
|
||||
|
||||
|
||||
subMenuButton.addEventListener("click", function (e) {
|
||||
|
||||
switch(this.textContent) {
|
||||
|
||||
|
||||
//File Menu
|
||||
case 'New':
|
||||
showDialogue('new-pixel');
|
||||
break;
|
||||
case 'Open':
|
||||
|
||||
|
||||
|
||||
|
||||
//if a document exists
|
||||
if (documentCreated) {
|
||||
//check if the user wants to overwrite
|
||||
@ -47,12 +47,12 @@ for (var i = 1; i < mainMenuItems.length; i++) {
|
||||
else
|
||||
//open file selection dialog
|
||||
document.getElementById("open-image-browse-holder").click();
|
||||
|
||||
|
||||
break;
|
||||
|
||||
|
||||
case 'Save as...':
|
||||
if (documentCreated) {
|
||||
|
||||
|
||||
//create name
|
||||
var selectedPalette = getText('palette-button');
|
||||
if (selectedPalette != 'Choose a palette...'){
|
||||
@ -62,38 +62,34 @@ for (var i = 1; i < mainMenuItems.length; i++) {
|
||||
var fileName = 'pixel-'+canvasSize[0]+'x'+canvasSize[1]+'.png';
|
||||
selectedPalette = 'none';
|
||||
}
|
||||
|
||||
|
||||
//set download link
|
||||
var linkHolder = document.getElementById("save-image-link-holder");
|
||||
linkHolder.href = canvas.toDataURL();
|
||||
linkHolder.download = fileName;
|
||||
|
||||
|
||||
linkHolder.click();
|
||||
|
||||
|
||||
//track google event
|
||||
ga('send', 'event', 'Pixel Editor Save', selectedPalette, canvasSize[0]+'/'+canvasSize[1]); /*global ga*/
|
||||
}
|
||||
|
||||
|
||||
break;
|
||||
|
||||
|
||||
case 'Exit':
|
||||
|
||||
console.log('exit')
|
||||
//if a document exists, make sure they want to delete it
|
||||
if (documentCreated && confirm('Exiting will discard your current pixel. Are you sure you want to do that?')) {
|
||||
|
||||
//skip onbeforeunload prompt
|
||||
window.onbeforeunload = null;
|
||||
|
||||
//go back to main site
|
||||
window.location.href = "https://lospec.com/pixel-editor";
|
||||
if (documentCreated) {
|
||||
|
||||
//ask user if they want to leave
|
||||
if (confirm('Exiting will discard your current pixel. Are you sure you want to do that?'))
|
||||
//skip onbeforeunload prompt
|
||||
window.onbeforeunload = null;
|
||||
else
|
||||
e.preventDefault();
|
||||
}
|
||||
else {
|
||||
|
||||
//skip onbeforeunload prompt
|
||||
window.onbeforeunload = null;
|
||||
|
||||
//go back to main site
|
||||
window.location.href = "https://lospec.com/pixel-editor";
|
||||
}
|
||||
|
||||
break;
|
||||
//Edit Menu
|
||||
case 'Undo':
|
||||
@ -102,17 +98,17 @@ for (var i = 1; i < mainMenuItems.length; i++) {
|
||||
case 'Redo':
|
||||
redo();
|
||||
break;
|
||||
|
||||
|
||||
//Palette Menu
|
||||
case 'Add color':
|
||||
addColor('#eeeeee');
|
||||
break;
|
||||
//Help Menu
|
||||
case 'Settings':
|
||||
|
||||
|
||||
//fill form with current settings values
|
||||
setValue('setting-numberOfHistoryStates', settings.numberOfHistoryStates);
|
||||
|
||||
|
||||
showDialogue('settings');
|
||||
break;
|
||||
//Help Menu
|
||||
@ -126,7 +122,7 @@ for (var i = 1; i < mainMenuItems.length; i++) {
|
||||
showDialogue('changelog');
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
closeMenu();
|
||||
});
|
||||
}
|
||||
@ -137,4 +133,4 @@ function closeMenu () {
|
||||
for (var i = 0; i < mainMenuItems.length; i++) {
|
||||
deselect(mainMenuItems[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,16 +5,16 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>{{title}}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,700,900" rel="stylesheet">
|
||||
<link rel='stylesheet' href='/pixel-editor/pixel-editor.css' />
|
||||
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW">
|
||||
{{{google-analytics}}}
|
||||
{{{favicons}}}
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body oncontextmenu="return false;">
|
||||
|
||||
|
||||
<div id="compatibility-warning">
|
||||
<div><div>
|
||||
<p><strong>Warning: a modern, desktop, web browser is required to use this tool.</strong></p>
|
||||
@ -23,7 +23,7 @@
|
||||
</div></div>
|
||||
</div>
|
||||
<script src="/javascripts/checkCompatibilityPixelEditor.js"></script>
|
||||
|
||||
|
||||
<div class="preload">
|
||||
<img src="/pixel-editor/dropdown-arrow.png" />
|
||||
<img src="/pixel-editor/dropdown-arrow-hover.png" />
|
||||
@ -43,7 +43,7 @@
|
||||
<li><button>New</button></li>
|
||||
<li><button>Open</button></li>
|
||||
<li><button id="save-as-button" class="disabled">Save as...</button></li>
|
||||
<li><button>Exit</button></li>
|
||||
<li><a href="/pixel-editor">Exit</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@ -86,12 +86,12 @@
|
||||
</ul>
|
||||
|
||||
<ul id="colors-menu">
|
||||
|
||||
|
||||
{{!
|
||||
<li class="noshrink"><button id="current-color" class="jscolor {valueElement: 'current-color-value', styleElement: 'current-color-preview', onFineChange:'setColor(this)', width:151, position: 'left', padding:0,
|
||||
<li class="noshrink"><button id="current-color" class="jscolor {valueElement: 'current-color-value', styleElement: 'current-color-preview', onFineChange:'setColor(this)', width:151, position: 'left', padding:0,
|
||||
borderWidth:14, borderColor: '#332f35',backgroundColor: '#332f35', insetColor:'transparent'}"><div id="current-color-preview"></div></button><input id="current-color-value" class="color-value" value="#000000" autocomplete="off" /></li>
|
||||
}}
|
||||
|
||||
|
||||
<li class="noshrink"><button title="Add Current Color To Palette" id="add-color-button">{{svg "./plus.svg" width="30" height="30"}}</button></li>
|
||||
</ul>
|
||||
<div id="eyedropper-preview"></div>
|
||||
@ -115,16 +115,16 @@
|
||||
<div id="duplicate-color-warning" title="Color is a duplicate of another in palette">{{svg "warning.svg" width="14" height="12" }}</div>
|
||||
<button class="delete-color-button">{{svg "trash.svg" width="20" height="20" }}</button>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="color-edit-button">
|
||||
{{svg "adjust.svg" width="20" height="20" }}
|
||||
</div>
|
||||
|
||||
|
||||
<div id="pop-up-container">
|
||||
<div id="new-pixel">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>New Pixel</h1>
|
||||
|
||||
|
||||
<h2>Preset</h2>
|
||||
<button id="preset-button" class="dropdown-button">Choose a preset...</button>
|
||||
<div id="preset-menu" class="dropdown-menu"></div>
|
||||
@ -198,11 +198,11 @@
|
||||
<div id="settings">
|
||||
<button class="close-button">{{svg "x.svg" width="20" height="20"}}</button>
|
||||
<h1>Settings</h1>
|
||||
|
||||
|
||||
<div id="settings-container">
|
||||
<label for="setting-numberOfHistoryStates">Number of History States</label> <input id="setting-numberOfHistoryStates" value="20" autocomplete="off" />
|
||||
</div>
|
||||
|
||||
|
||||
<p id="cookies-disabled-warning">Your browsers cookies are disabled, settings will be lost upon closing this page.</p>
|
||||
|
||||
<div>
|
||||
@ -215,12 +215,12 @@
|
||||
|
||||
<script>
|
||||
palettes = { {{#palettes}}
|
||||
'{{name}}': {
|
||||
'{{title}}': {
|
||||
colors: '{{colors}}'.split(',')
|
||||
},
|
||||
{{/palettes}}
|
||||
{{#specifiedPalette}}
|
||||
'{{name}}': {
|
||||
'{{title}}': {
|
||||
colors: '{{colors}}'.split(','),
|
||||
specified: true
|
||||
}
|
||||
@ -231,7 +231,7 @@
|
||||
{{else}}
|
||||
var specifiedDimentions = false;
|
||||
{{/if}}
|
||||
|
||||
|
||||
{{#specifiedPalette}}
|
||||
var keepUrl = true;
|
||||
{{/specifiedPalette}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user