diff --git a/css/_splash-page.scss b/css/_splash-page.scss index 10ee8dc..c5f398d 100644 --- a/css/_splash-page.scss +++ b/css/_splash-page.scss @@ -3,7 +3,8 @@ #splash { width:100% !important; height:100%!important; - position:absolute; + position:fixed; + margin-top:-20px; background-color: #232125 !important; opacity: 1 !important; diff --git a/css/_tools-menu.scss b/css/_tools-menu.scss index ce70f63..687f98e 100644 --- a/css/_tools-menu.scss +++ b/css/_tools-menu.scss @@ -10,7 +10,7 @@ background-color: $basecolor; box-sizing: border-box; position: fixed; - z-index: 1120; + z-index: 1108; } #tools-menu li { @@ -110,11 +110,35 @@ background: $basehover; } +@keyframes fadeIn { + to { + opacity: 1; + } +} +@keyframes fadeOut { + to { + opacity: 0; + } +} + +.fade-in { + opacity: 0; + animation: fadeIn .1s forwards; +} + +.fade-out { + animation: fadeOut .1s forwards; +} + +.is-paused { + animation-play-state: paused; +} + /* Tool tutorial */ #tool-tutorial { display:inline-block; position:absolute; - z-index:4000; + z-index:1109; margin-left:48px; margin-top:48px; background-color: $basehover; @@ -126,6 +150,11 @@ img { width:100%; } + + h3 { + margin-left:20px; + margin-bottom:-5px; + } } #tool-tutorial:after { diff --git a/images/ToolTutorials/ellipse-tutorial.gif b/images/ToolTutorials/ellipse-tutorial.gif new file mode 100644 index 0000000..a341919 Binary files /dev/null and b/images/ToolTutorials/ellipse-tutorial.gif differ diff --git a/images/ToolTutorials/eraser-tutorial.gif b/images/ToolTutorials/eraser-tutorial.gif new file mode 100644 index 0000000..c2fedc5 Binary files /dev/null and b/images/ToolTutorials/eraser-tutorial.gif differ diff --git a/images/ToolTutorials/line-tutorial.gif b/images/ToolTutorials/line-tutorial.gif new file mode 100644 index 0000000..7275331 Binary files /dev/null and b/images/ToolTutorials/line-tutorial.gif differ diff --git a/images/ToolTutorials/rectangle-tutorial.gif b/images/ToolTutorials/rectangle-tutorial.gif new file mode 100644 index 0000000..bf22dd5 Binary files /dev/null and b/images/ToolTutorials/rectangle-tutorial.gif differ diff --git a/js/Input.js b/js/Input.js index 55395b9..8450ce7 100644 --- a/js/Input.js +++ b/js/Input.js @@ -116,15 +116,22 @@ const Input = (() => { case 77: case 109: Events.emit("tool-shortcut", "rectselect"); break; - // TODO: [ELLIPSE] Decide on a shortcut to use. "s" was chosen without any in-team consultation. + // Lasso tool, q + case 81: case 113: + Events.emit("tool-shortcut", "lassoselect"); + break; // ellipse tool, s case 83: - //Events.emit("tool-shortcut", "ellipse"); + Events.emit("tool-shortcut", "ellipse"); break; // rectangle tool, u case 85: Events.emit("tool-shortcut", "rectangle"); break; + // magic wand tool + case 87: case 119: + Events.emit("tool-shortcut", "magicwand"); + break; // Paste tool case 86: case 118: if (keyboardEvent.ctrlKey) { diff --git a/js/Tool.js b/js/Tool.js index f05f6eb..0558b57 100644 --- a/js/Tool.js +++ b/js/Tool.js @@ -24,7 +24,11 @@ class Tool { biggerButton = undefined; smallerButton = undefined; brushPreview = document.getElementById("brush-preview"); + + // Tool tutorial toolTutorial = document.getElementById("tool-tutorial"); + tutorialTimer = undefined; + tutorialString = ""; constructor (name, options) { this.name = name; @@ -33,22 +37,51 @@ class Tool { this.mainButton = document.getElementById(name + "-button"); this.biggerButton = document.getElementById(name + "-bigger-button"); this.smallerButton = document.getElementById(name + "-smaller-button"); + + if (this.mainButton != undefined) { + // Timer to show the tutorial + Events.on("mouseenter", this.mainButton, function(){ + this.tutorialTimer = setTimeout(this.showTutorial.bind(this), 750) + }.bind(this)); + + // Clear the callback if the user cancels the hovering + Events.on("mouseleave", this.mainButton, function() { + if (this.tutorialTimer != undefined) + clearTimeout(this.tutorialTimer); + this.tutorialTimer = undefined; + this.hideTutorial(); + }.bind(this)) + + this.hideTutorial(); + } + } + + showTutorial() { + this.setTutorial(); + this.toolTutorial.style.top = this.mainButton.getBoundingClientRect().top - 48 + "px"; + this.toolTutorial.className = "fade-in"; + } + hideTutorial() { + this.toolTutorial.className = "fade-out"; } resetTutorial() { - this.toolTutorial.innerHTML = ""; + this.tutorialString = ""; + } + setTutorial() { + this.toolTutorial.innerHTML = this.tutorialString; } addTutorialKey(key, text) { - this.toolTutorial.children[0].append( - '
  • ' + key + ' ' + text + '
    • '); + this.tutorialString += '
  • ' + key + ' ' + text + '
    • '; } addTutorialText(key, text) { - this.toolTutorial.children[0].append( - '
  • ' + key + ': ' + text + '
    • '); + this.tutorialString += '
  • ' + key + ': ' + text + '
    • '; } addTutorialImg(imgPath) { - this.toolTutorial.children[0].append( - ''); + this.tutorialString += ''; + } + addTutorialTitle(text) { + this.tutorialString += "

    " + text + "

    -
    +
    +

    Brush tool