From 80e33b4ff14f1eb924ef05f1ca06aea830da51d0 Mon Sep 17 00:00:00 2001 From: skeddles Date: Tue, 6 Jul 2021 20:37:47 -0400 Subject: [PATCH] moved mode switcher on splash to below quickstart --- Model.drawio | 1 - css/_splash-page.scss | 41 ++++++++++++++++++++++++----- debug.log | 1 - js/_editorMode.js | 32 +++++++++-------------- js/_variables.js | 2 +- views/pixel-editor-splash-page.hbs | 42 ------------------------------ views/splash-page-popup.hbs | 18 +++++++------ 7 files changed, 58 insertions(+), 79 deletions(-) delete mode 100644 Model.drawio delete mode 100644 debug.log delete mode 100644 views/pixel-editor-splash-page.hbs diff --git a/Model.drawio b/Model.drawio deleted file mode 100644 index 629b961..0000000 --- a/Model.drawio +++ /dev/null @@ -1 +0,0 @@ -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 \ No newline at end of file diff --git a/css/_splash-page.scss b/css/_splash-page.scss index e731c7d..87f5abb 100644 --- a/css/_splash-page.scss +++ b/css/_splash-page.scss @@ -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 */ diff --git a/debug.log b/debug.log deleted file mode 100644 index 3b8e60d..0000000 --- a/debug.log +++ /dev/null @@ -1 +0,0 @@ -[0114/110029.536:ERROR:directory_reader_win.cc(43)] FindFirstFile: The system cannot find the path specified. (0x3) diff --git a/js/_editorMode.js b/js/_editorMode.js index ccb8dcf..9879c5d 100644 --- a/js/_editorMode.js +++ b/js/_editorMode.js @@ -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'; } } diff --git a/js/_variables.js b/js/_variables.js index aadeb48..41bf84b 100644 --- a/js/_variables.js +++ b/js/_variables.js @@ -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"); diff --git a/views/pixel-editor-splash-page.hbs b/views/pixel-editor-splash-page.hbs deleted file mode 100644 index 9732386..0000000 --- a/views/pixel-editor-splash-page.hbs +++ /dev/null @@ -1,42 +0,0 @@ -

{{title}}

- -

-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. -

- -Lospec Pixel Editor Screenshot - -

-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 Palette List by clicking the pencil next to the palette -title. -

- -

-This app currently only works on desktops, and requires a modern browser such as -the latest versions of Firefox or Chrome. -

- -Enter app now  {{svg "angle-right.svg" width="32" height="32"}} - -
- -

This app has been made in collaboration with contributors on GitHub. We welcome anyone to submit bugfixes and new features.

- -
Our Contributors:
- -
- -
- -View on GitHub  {{svg "github"}} - - - - diff --git a/views/splash-page-popup.hbs b/views/splash-page-popup.hbs index 2cecd55..d381df6 100644 --- a/views/splash-page-popup.hbs +++ b/views/splash-page-popup.hbs @@ -22,14 +22,6 @@

New Custom Pixel

- -

Editor mode

-
-
-

Basic

-

Advanced

-
-

Size

@@ -63,6 +55,16 @@

New 256x256

New 512x512

+ +
+ You are using Basic Mode. + You are using Advanced Mode. + + Switch to Advanced Mode. + Switch to using Basic Mode. + ยป + +