diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss index adb461e..4b14446 100644 --- a/css/pixel-editor.scss +++ b/css/pixel-editor.scss @@ -1468,13 +1468,13 @@ div#palette-block { div#palette-container { display:inline-block; - background-color:black; + background-color: #232125; position:absolute; scrollbar-color: #332f35 #232125; scroll-behavior: smooth; left:300px; width:300px; - height:280px; + height:320px; overflow-y: scroll; &::-webkit-scrollbar { @@ -1518,17 +1518,22 @@ ul#palette-list { div#pb-options { position:relative; - left:300px; - height:100px; + left:280px; + height:30px; width:300px; - top:280px; + top:300px; button { + border-radius:none; position:relative; + float:left; width:50%; height:100%; text-align:center; cursor: pointer; + font-size:16px; + background-color:$baseicon; + border:none; } button:hover { diff --git a/js/_dialogue.js b/js/_dialogue.js index 8820fd8..f336a5e 100644 --- a/js/_dialogue.js +++ b/js/_dialogue.js @@ -15,8 +15,10 @@ function showDialogue (dialogueName, trackEvent) { document.getElementById(dialogueName).style.display = 'block'; // If I'm opening the palette window, I initialize the colour picker - if (dialogueName == 'palette-block') + if (dialogueName == 'palette-block' && documentCreated) { cpInit(); + pbInit(); + } //track google event if (trackEvent) @@ -32,6 +34,10 @@ function closeDialogue () { var popups = popUpContainer.children; for (var i = 0; i < popups.length; i++) { popups[i].style.display = 'none'; + + if (popups[i].id == "palette-block") { + pbAddToSimplePalette(); + } } dialogueOpen = false; @@ -49,6 +55,6 @@ popUpContainer.addEventListener('click', function (e) { var cancelButtons = popUpContainer.getElementsByClassName('close-button'); for (var i = 0; i < cancelButtons.length; i++) { cancelButtons[i].addEventListener('click', function () { - closeDialogue(); + closeDialogue(); }); } diff --git a/js/_paletteBlock.js b/js/_paletteBlock.js index be75ba1..f6341f5 100644 --- a/js/_paletteBlock.js +++ b/js/_paletteBlock.js @@ -4,7 +4,7 @@ let rampMenu = document.getElementById("pb-ramp-options"); let pbRampDialogue = document.getElementById("pb-ramp-dialogue"); let currentSquareSize = coloursList.children[0].clientWidth; -let blockData = {blockWidth: 500, blockHeight: 200, squareSize: 50}; +let blockData = {blockWidth: 300, blockHeight: 320, squareSize: 40}; let isRampSelecting = false; let ramps = []; let currentSelection = {startIndex:0, endIndex:0, startCoords:[], endCoords: [], name: "", colour: "", label: null}; @@ -18,6 +18,24 @@ new Sortable(document.getElementById("palette-list"), { // Listening for the palette block resize new ResizeObserver(updateSizeData).observe(coloursList.parentElement); +// Initializes the palette block +function pbInit() { + let simplePalette = document.getElementById("colors-menu"); + + currentSquareSize = coloursList.children[0].clientWidth; + coloursList = document.getElementById("palette-list"); + + // Remove all the colours + for (let i=0; i endIndex) { let tmp = startIndex; startIndex = endIndex; @@ -145,7 +163,7 @@ function updateRampSelection(mouseEvent) { for (let i=startIndex; i<=endIndex; i++) { let currentSquare = coloursList.children[i]; let currentCoords = getColourCoordinates(i); - let borderStyle = "4px solid white"; + let borderStyle = "3px solid white"; let bordersToSet = []; // Deciding which borders to use to make the outline @@ -163,7 +181,6 @@ function updateRampSelection(mouseEvent) { bordersToSet.push("border-right"); } if (bordersToSet != []) { - console.log("qui"); currentSquare.style["box-sizing"] = "border-box"; for (let i=0; i - + - + -
+
    -
  • -
-
+