From f53f95ed82d62adc2d79108ce207f1065168cb59 Mon Sep 17 00:00:00 2001 From: jlamoreaux Date: Wed, 29 May 2024 17:22:39 -0400 Subject: [PATCH 1/3] add shortcut legend --- index.html | 17 +++++++++++++++++ main.css | 13 +++++++++++++ 2 files changed, 30 insertions(+) diff --git a/index.html b/index.html index 8b09b5a..c29c631 100644 --- a/index.html +++ b/index.html @@ -73,6 +73,23 @@
+
+ + + + + + + + + + + + + + +
CommandHotkey
PencilP
BucketB
EraserE
Color PickerV
SelectionS
Copy SelectionAlt + Click Drag
Delete SelectionDel or Backspace
Remove SelectionEsc
Toggle GridG
UndoZ
RedoX
Color SwapC
+
diff --git a/main.css b/main.css index 661d769..ddfc197 100644 --- a/main.css +++ b/main.css @@ -382,3 +382,16 @@ body { input[type="radio"] { margin: 0; } + +#info-section{ + display: flex; + flex-direction: row; + justify-content: center; + + margin-top: 10px; +} + +#keyboard-shortcuts{ + border: 1px solid; + width: 350px; +} \ No newline at end of file From 6dd452f7b382b542fd946ffd71e7e9d52543bb7a Mon Sep 17 00:00:00 2001 From: jlamoreaux Date: Thu, 3 Oct 2024 16:15:46 -0400 Subject: [PATCH 2/3] switch to popup --- index.html | 11 +---------- js/utils.js | 12 ++++++++++++ main.css | 25 ++++++++++++++++++------- 3 files changed, 31 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index c29c631..5fb5a84 100644 --- a/index.html +++ b/index.html @@ -72,22 +72,13 @@ How to Copy Selection: hold down alt and drag the selected area.
+
Shortcuts
- - - - - - - - - -
CommandHotkey
PencilP
BucketB
EraserE
Color PickerV
SelectionS
Copy SelectionAlt + Click Drag
Delete SelectionDel or Backspace
Remove SelectionEsc
Toggle GridG
UndoZ
RedoX
Color SwapC
diff --git a/js/utils.js b/js/utils.js index 553a89c..82b9265 100644 --- a/js/utils.js +++ b/js/utils.js @@ -166,3 +166,15 @@ function Get_Canvas_Pixels() }) return canvasPixels; } + +function Display_Keyboard_Shortcuts() +{ + document.getElementById("info-section").style.opacity = "1"; + document.getElementById("info-section").style.backgroundColor = "#2a2a2a"; +} + +function Hide_Keyboard_Shortcuts() +{ + document.getElementById("info-section").style.opacity = "0"; + document.getElementById("info-section").style.backgroundColor = "none"; +} diff --git a/main.css b/main.css index ddfc197..fae04d7 100644 --- a/main.css +++ b/main.css @@ -383,15 +383,26 @@ input[type="radio"] { margin: 0; } -#info-section{ - display: flex; - flex-direction: row; - justify-content: center; +#info-section { + position: fixed; + top: 80%; + right: 1%; + z-index: 1000; + opacity: 0; + background-color: none; + transition: background-color .2s ease; +} - margin-top: 10px; +#keyboard-shortcut-hover { + position: fixed; + right: 0%; + top: 99%; + padding-right: 20px; } -#keyboard-shortcuts{ +#keyboard-shortcuts { border: 1px solid; width: 350px; -} \ No newline at end of file + transition: opacity .2s ease; +} + \ No newline at end of file From 87bee36cf3bab7cad331d5a983194ddd6f8ca22c Mon Sep 17 00:00:00 2001 From: Jachin Date: Mon, 7 Oct 2024 12:02:39 -0400 Subject: [PATCH 3/3] style shortcut hover --- main.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/main.css b/main.css index fae04d7..9d66d65 100644 --- a/main.css +++ b/main.css @@ -397,7 +397,12 @@ input[type="radio"] { position: fixed; right: 0%; top: 99%; - padding-right: 20px; + + background-color: #e9e9a2; + padding: 0 4px; + border-radius: 2px 0 0 0; + color: #0d0c09; + user-select: none; } #keyboard-shortcuts { @@ -405,4 +410,4 @@ input[type="radio"] { width: 350px; transition: opacity .2s ease; } - \ No newline at end of file +