mirror of
https://github.com/lospec/pixel-editor.git
synced 2023-08-10 21:12:51 +03:00
moved mode switcher on splash to below quickstart
This commit is contained in:
skeddles
parent
512981be63
commit
80e33b4ff1
@ -1 +0,0 @@
|
||||
<mxfile host="app.diagrams.net" modified="2021-04-25T14:57:23.836Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36 Edg/90.0.818.46" etag="K3S2uQVQjw_jQCK8DyHB" version="14.6.6" type="device"><diagram id="C5RBs43oDa-KdzZeNtuy" name="Page-1">7V1bc+K4Ev41VOU8kPI98BjIZGb3MHuyk9nM7KOCBWhiWxxZBJhfv5ItG2zJxgSMsx5XpSq4Jd/0tVqfultyzxz7m48ELBefsQu9nqG5m5551zMMfWAN2D8u2QqJMxSSOUGukO0Ej+gnFEJNSFfIhWGmIsXYo2iZFU5xEMApzcgAIXidrTbDXvauSzCHkuBxCjxZ+g25dBFLB8bNTv4JovkiuTN7wbjEB0ll8SbhArh4vScyP/TMMcGYxr/8zRh6vPWSdvn22/abN3lxPv7+Z/h/8Nfov1//eOrHF7s/5pT0FQgM6Jsv3X+6tz5PHp5mqz/+fnn83+Oy/xX3LUe8G90mDQZd1n7iEBO6wHMcAO/DTjoieBW4kF9WY0e7OhOMl0yoM+EPSOlWKANYUcxEC+p7opS9Btl+Zwd97VpLBX/zC15rw1RwtxG3iI+2+0cPkCAfUkiEMH4N/uw52A+0magX4hWZilN/vszuPz1ZP74vH+7/XGsfb59/74u21Sggc0hLGnRPM1ifgpg9I9myEwn0AEWv2acDQrfnab0dfuyHgFANZ9lTvgJvJe70lfW18DMMVhLO4Rr5Hgg4oDMc0ARy9vAj4KF5wH5PWdvxFh69QkIR61O3ooByoEfTBfLcCdjiFW+RkILpS3I0WmCCfrLLggRzVkyo0AjDydR45GcKHAkMWZ2HBDY9FU1ASEWdKfY8sAzRc/TAvIrPYEHBCFOK/eRCGSVN+250QAl+Sa2BnmpPVWXhrQE3e0jKcItSJ7GCifU0xfF6Z4p0R8gW+2bI0opVRNzuCzOXIJizRkjvZ5i5+1kV72c42dsBjwEfAApHvBlDSTHTV327rpqSrvbF2BBKusqam+7ppQdntFArwyWYomA+iercWTvJF/G6XITZuTMv0ogFcl0YRBpDAQWxUnE1WWIU0Kg97BH7Y6021q7tns0eaMyO9d0x++PVCR3jgCkXQJEWQaaxa8i1tkwZhVnUlFpY2skPa+E2C+6xSnA2s2RJUEsIeyiyRHuDhNxLD8DvMyCj8Ung/TUajfq6pBOmrBOmAn8PPEPvAYeIIsyvT+K6Ob04BH1doNpGNVAHNWFqKzAdcUyhx+wSH3aukPufHtcpU4+1mxczLpir0LKuXhfeTkVLPigZOKoCrqaKg0apIm//faJ4gCSekQ8qW6MqH9SdC/FB5d1tu1HMctTesP8loJlmo6DdNAHae2l7Y9hk2zuNzIffS9s7dpNtL09eH9AGspZGFBMJlm76mp++SlyiqgYVTl9T11fJ9NVQziTMEtr5r5u+qgd2SVv59NXD83CP8/YjQkwpo6R58ZLpBaRhhiBnKsyQB/MngSnvhveIN1rZebHDJyOmO0dQ9jmAxx5QdYYHtpCoTnERYO+5go/bkEK/+Elipg9dRpUpV8O2Uf1jZvUHOmexQTxmVq/ui5pVk8E2pC4gQdzyaX0NqFY1sWeY16vZpwziLzzNsyoyJ91okjnJ/rV4iOgo08UpUz/lLMe6/NOIaXs5k+wz7Ee9lxN8HnrO8QcU3kZ8p5hhxBSluDzmSxNeS8lN2AigKnydbVTi6QJOXyB5xoC4orxjNEeNfdaxjEYdHDPrYjROx2jOjqpe2XNdE6g3ClB5KAIHkXlhFu9KjlPggLXNXnHLOnp9YA+qgW0aNaE9kND+8MreaLSSo8odH6qfDzk5OmQZFa2BrrWeDg2VdIgpmffM1OHXzoJ4i2kanIVdnCMLQj1HlB3cHbs4FdULpkGoQZX9wAmBuIKvkddzvNepZaIBfUTjmh3LqAp6VUZZlkR3Guqy61M9IewoxiVcLo59kGOk3pWMqW9VlqVaU9VplgHwJW+Le9j9EoufUKwWefkET19g/irTJPhT5KNxCVgzMzUGwStQBMleEVwnZS0zj3XzoSKndEkASdVL6nO36F1iaA24qhwuSmBr40RFuaEUz5khjc0HoluF2yWuERsSRfFq6TJr+bBvFXK1WmYialQS2VGjVJKbuhw1tiWhddHcxGtNy4Yar7Ubo9fs0qOSFNJ3H4TUZed5xIm7xUdNZW+92fV20/7sLTkooIwnciG3Hh886HcpTG8YhQrS34/0ydXHQOVwQcdAT4a16YifLnvWY/4I3Dhwr6CWBPpYpAqoFy6tlh6DlJZU8SEboEeQ9V5l8YyNwmwqfOt5ituLQjG1Vj4fn7OnT98yO1SfKlaMR+pl2TenZUmqF2V3lKgBSjSwsxSlqqHSh613FBpyIKPIURg+isTuNs+862ZGRRtFHMmMrNqSu+UQR8eMTob1pmFmZMjhALFsmw8HKo9bqCIjIeu3qsooJ5SSqmLLUZBvFaaFLbMl9alTZXZTlxfPkF34Xzg/4A3Z0ZyGaI6uDd/Ic8z28xx1Evp0RXiTR5rSNvNTO5U5T1p3bU4eQ/ZMd1TmZFibdvIYRXndKJgS1gCQ92UF03BhaXEIIyNwxY1/x0Sqa0NFJuLURkRkn9/D/tLmjoZcnIbktw/op5sT7WvJQMULjNbzkORR8zwEe7iLQJ2TnBTsJ1NCTlQaWZufxVQlEHfk5ERYVX4WFax1kZNkeZMqAjWOuvhV3NOLAlEllXL1uXIA8pEAF7Emi8/QRdY5/20oOA6DZLSdrHwUcARViVhxlTtAXgIY5pOsdhUeAV0RwHWgsMoY+0scxI/mLxW1fD40YtI5fo7RbwXdUum3btXFt0zZk3if7jzTka2Lk61+nmylC+gO6kj7V9qZqozUbpA9ZISK9kE8kjvVNsiq/Dp8SAngmtsiVZhhCYOCohC8wgeCf6jjE3DDm3ivvBupqilJ4tU7pCSOU5OW2LoE1q+8B6op3GYHs4mtgvHmMtnEpuzd+4RCisWlO3ZxYXZh5iJK1b9k0P5tjUw5iTTaiJEAH3ar1o4eT26OJh1KPajNYaNKLu245Imw2hW7d11c0pLdsSKnJXCxMh1XKeYkUoxTHUk8Av2K0aNkt4fzwy97YQWM9yTKgOw4x+U5h2O/kXO0P1s3ceup1i/dse6v2idRbMOcDy5No2W0XeLLW/ZCO893l+y6qIqlyvbsqMqJsKqC2BelKs181GWD6Pe937E7wxZHO2cGP8gsl/6+fxCfpVvmAS9IMwute5JnpPjbTU05RqxGvg5T9sVOXXPeI5pJqvvhL84UZDZdCM9ho3jqDE4ni6c2OOSjfC+985gNSi/07SatUTS16+FwkOud9rvc1MKuiGbRxPFCn4OSafZd7uMn3cQwObjYxNDOfVVXHepWOqPbn1foqDd8E+sbEu2V9Lab6pXPCWJLcLpXuq4op9NtpVYDrE3vLusUfmV3gddJX77ia7RlVzTrdfBAlamHQ3jreUm1sPNZV9eNqutfnJIhp0A52CHBmO4PDAQsF/wTKbzGPw==</diagram></mxfile>
|
||||
@ -18,6 +18,9 @@
|
||||
left:0;
|
||||
top:0;
|
||||
}
|
||||
.splash-menu {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#editor-logo {
|
||||
font-weight:bold;
|
||||
@ -63,17 +66,19 @@
|
||||
}
|
||||
|
||||
#sp-quickstart-container {
|
||||
height:100%;
|
||||
max-height: 500px;
|
||||
width:70%;
|
||||
float:right;
|
||||
padding:40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
|
||||
-moz-box-sizing: border-box; /* Firefox, other Gecko */
|
||||
box-sizing: border-box; /* Opera/IE 8+ */
|
||||
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: #232125;
|
||||
width: 0.5em;
|
||||
@ -90,13 +95,33 @@
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: #232125;
|
||||
}
|
||||
|
||||
.mode-switcher {
|
||||
margin-top: 2em;
|
||||
font-size: 1.2em;
|
||||
color: $basetext;
|
||||
a {
|
||||
font-weight: bolder;
|
||||
color: white;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
//show the correct info when the .advanced class is added
|
||||
.advanced {display: none};
|
||||
&.advanced-mode {
|
||||
.basic {display: none}
|
||||
.advanced {display: inline}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sp-quickstart {
|
||||
display:flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
height:100%;
|
||||
align-content: flex-start;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
flex: 1 1 0;
|
||||
|
||||
// Fancy scrollbar
|
||||
&::-webkit-scrollbar {
|
||||
@ -126,6 +151,9 @@
|
||||
.sp-template {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 5em;
|
||||
min-width: 5em;
|
||||
|
||||
text-transform: uppercase;
|
||||
width:16%;
|
||||
border-radius:5%;
|
||||
@ -156,11 +184,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
.sp-template:before {
|
||||
content:'';
|
||||
float:left;
|
||||
padding-top:100%;
|
||||
}
|
||||
}*/
|
||||
|
||||
#sp-newpixel {
|
||||
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
|
||||
|
||||
@ -1 +0,0 @@
|
||||
[0114/110029.536:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3)
|
||||
@ -8,29 +8,14 @@ let modes = {
|
||||
}
|
||||
|
||||
let infoBox = document.getElementById('editor-mode-info');
|
||||
let currentSplashButton = document.getElementById("sp-mode-palette").children[0].children[1];
|
||||
|
||||
function splashMode(mouseEvent, mode) {
|
||||
if (currentSplashButton == undefined) {
|
||||
currentSplashButton = mouseEvent.target.parentElement;
|
||||
}
|
||||
|
||||
if (mode !== pixelEditorMode) {
|
||||
// Remove selected class to old button
|
||||
currentSplashButton.classList.remove("sp-interface-selected");
|
||||
// Add selected class to new button
|
||||
mouseEvent.target.parentElement.classList.add("sp-interface-selected");
|
||||
|
||||
// Setting the new mode
|
||||
pixelEditorMode = mode;
|
||||
}
|
||||
|
||||
// Setting the new selected button
|
||||
currentSplashButton = mouseEvent.target.parentElement;
|
||||
}
|
||||
on('click', 'switch-editor-mode-splash', function (e) {
|
||||
console.log('switching mode')
|
||||
switchMode();
|
||||
});
|
||||
|
||||
function switchMode(mustConfirm = true) {
|
||||
|
||||
console.log('switching mode', 'current:',pixelEditorMode)
|
||||
//switch to advanced mode
|
||||
if (pixelEditorMode == 'Basic') {
|
||||
// Switch to advanced ez pez lemon squez
|
||||
@ -41,6 +26,9 @@ function switchMode(mustConfirm = true) {
|
||||
// Hide the palette menu
|
||||
document.getElementById('colors-menu').style.right = '200px'
|
||||
|
||||
//change splash text
|
||||
document.querySelector('#sp-quickstart-container .mode-switcher').classList.add('advanced-mode');
|
||||
|
||||
pixelEditorMode = 'Advanced';
|
||||
}
|
||||
//switch to basic mode
|
||||
@ -71,6 +59,10 @@ function switchMode(mustConfirm = true) {
|
||||
// Move the palette menu
|
||||
document.getElementById('colors-menu').style.right = '0px';
|
||||
|
||||
|
||||
//change splash text
|
||||
document.querySelector('#sp-quickstart-container .mode-switcher').classList.remove('advanced-mode');
|
||||
|
||||
pixelEditorMode = 'Basic';
|
||||
}
|
||||
}
|
||||
|
||||
@ -5,7 +5,7 @@ var dragging = false;
|
||||
var lastMouseClickPos = [0,0];
|
||||
var dialogueOpen = true;
|
||||
var documentCreated = false;
|
||||
var pixelEditorMode = "Advanced";
|
||||
var pixelEditorMode = "Basic";
|
||||
|
||||
//common elements
|
||||
var brushPreview = document.getElementById("brush-preview");
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
<h1>{{title}}</h1>
|
||||
|
||||
<p>
|
||||
The Lospec Pixel editor is a free pixel art program that you can use right here
|
||||
in your web browser. Our goal was to create an easy to use, intuitive and
|
||||
unobtrusive pixel art application that you can use anywhere. Whether you're
|
||||
creating assets for a game or just want to make 8 bit art, this tool is an easy
|
||||
way to pixel fast.
|
||||
</p>
|
||||
|
||||
<img class="pixel-editor-screenshot" src="/pixel-editor/pixel-editor-screenshot.png" alt="Lospec Pixel Editor Screenshot" />
|
||||
|
||||
<p>
|
||||
This application does not have all the features of more advanced desktop editor,
|
||||
but we will add more over time. It currently features a pencil, eraser, fill, pan, eyedropper
|
||||
and zoom tool. You can also easily adjust any colors in your palette. You can
|
||||
use any palette in our <a href="/palette-list">Palette List</a> by clicking the pencil next to the palette
|
||||
title.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
This app currently only works on desktops, and requires a modern browser such as
|
||||
the latest versions of <a target="_blank" href="https://www.mozilla.org/en-US/firefox/new/">Firefox or Chrome</a>.
|
||||
</p>
|
||||
|
||||
<a class="link-button" href="/pixel-editor/app">Enter app now {{svg "angle-right.svg" width="32" height="32"}}</a>
|
||||
|
||||
<hr />
|
||||
|
||||
<p>This app has been made in collaboration with <a {{outbound}} href="https://github.com/lospec/pixel-editor/graphs/contributors">contributors</a> on GitHub. We welcome anyone to submit bugfixes and new features.</p>
|
||||
|
||||
<div><strong>Our Contributors:</strong></div>
|
||||
|
||||
<div class="contributors">
|
||||
|
||||
</div>
|
||||
|
||||
<a class="link-button" {{outbound}} href="https://github.com/lospec/pixel-editor">View on GitHub {{svg "github"}}</a>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -22,14 +22,6 @@
|
||||
<div class="splash-menu">
|
||||
<div id="sp-newpixel">
|
||||
<h1>New Custom Pixel</h1>
|
||||
<!-- Editor mode-->
|
||||
<h2>Editor mode</h2>
|
||||
<div class="sp-np-entry" id="sp-mode-palette">
|
||||
<div class="button-menu">
|
||||
<div class="bm-left" onclick="splashMode(event,'Basic')"><p>Basic</p></div>
|
||||
<div class="sp-interface-selected bm-right" onclick="splashMode(event,'Advanced')"><p>Advanced</p></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Size</h2>
|
||||
<div class="sp-np-entry">
|
||||
@ -63,6 +55,16 @@
|
||||
<div class="sp-template" onclick="newFromTemplate('',256,256)"><p><span>New</span> 256x256</p></div>
|
||||
<div class="sp-template" onclick="newFromTemplate('',512,512)"><p><span>New</span> 512x512</p></div>
|
||||
</div>
|
||||
|
||||
<div class="mode-switcher">
|
||||
<span class="basic">You are using Basic Mode.</span>
|
||||
<span class="advanced">You are using Advanced Mode.</span>
|
||||
<a id="switch-editor-mode-splash" href="#">
|
||||
<span class="basic">Switch to Advanced Mode.</span>
|
||||
<span class="advanced">Switch to using Basic Mode.</span>
|
||||
»
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user