From d89992981601d305430adde40ef78c926ec4e2e0 Mon Sep 17 00:00:00 2001 From: Sam Keddy Date: Sat, 7 Mar 2020 22:46:25 +0000 Subject: [PATCH] updates --- _ext/sass/_colors.scss | 26 ++++++++++++-- css/pixel-editor.scss | 32 ++++++++++------- js/_fileMenu.js | 80 ++++++++++++++++++++---------------------- views/pixel-editor.hbs | 32 ++++++++--------- 4 files changed, 97 insertions(+), 73 deletions(-) diff --git a/_ext/sass/_colors.scss b/_ext/sass/_colors.scss index 429ac53..0d14c89 100644 --- a/_ext/sass/_colors.scss +++ b/_ext/sass/_colors.scss @@ -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%), diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index 7552461..010a418 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -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; } } diff --git a/js/_fileMenu.js b/js/_fileMenu.js index 928c408..54f3b32 100644 --- a/js/_fileMenu.js +++ b/js/_fileMenu.js @@ -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]); } -} \ No newline at end of file +} \ No newline at end of file diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs index a2eef85..9fb036d 100644 --- a/views/pixel-editor.hbs +++ b/views/pixel-editor.hbs @@ -5,16 +5,16 @@ {{title}} - + {{{google-analytics}}} {{{favicons}}} - + - +

Warning: a modern, desktop, web browser is required to use this tool.

@@ -23,7 +23,7 @@
- +
@@ -43,7 +43,7 @@
    • -
    • +
  • Exit
  • @@ -86,12 +86,12 @@
      - + {{! -
      • }} - +
    @@ -115,16 +115,16 @@
    {{svg "warning.svg" width="14" height="12" }}
    • - +
    {{svg "adjust.svg" width="20" height="20" }}
    - +

    New Pixel

    - +

    Preset

    @@ -198,11 +198,11 @@

    Settings

    - +
    - +

    Your browsers cookies are disabled, settings will be lost upon closing this page.

    @@ -215,12 +215,12 @@