monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2024-09-20 23:36:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

hiding the commandline background and words blur when hovering over a command that changes theme

Browse source
This commit is contained in:
Miodec 2022-11-16 12:44:34 +01:00
parent a1479518a2
commit cad3809f53
2 changed files with 39 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/styles/commandline.scss
View file

@ -11,6 +11,7 @@
align-items: start;
padding: 5rem 2rem;
grid-template-columns: 1fr;
transition: background 0.125s;
#commandInput {
max-width: 700px;
@ -43,6 +44,8 @@
width: 100%;
background: var(--bg-color);
border-radius: var(--roundness);
outline: 0.25rem solid transparent;
transition: outline 0.125s;
.searchicon {
color: var(--sub-color);
@ -132,4 +135,11 @@
}
}
}
&.noBackground {
background: none;
#commandLine {
outline: 0.25rem solid var(--sub-alt-color);
}
}
}

29
frontend/src/ts/commandline/index.ts
View file

@ -39,6 +39,20 @@ export function isSingleListCommandLineActive(): boolean {
return $("#commandLine").hasClass("allCommands");
}
function removeCommandlineBackground(): void {
$("#commandLineWrapper").addClass("noBackground");
if (Config.showOutOfFocusWarning) {
$("#words").removeClass("blurred");
}
}
function addCommandlineBackground(): void {
$("#commandLineWrapper").removeClass("noBackground");
if (Config.showOutOfFocusWarning) {
$("#words").addClass("blurred");
}
}
function showFound(): void {
$("#commandLine .suggestions").empty();
let commandsHTML = "";
@ -94,6 +108,11 @@ function showFound(): void {
try {
$.each(list.list, (_index, obj) => {
if (obj.found) {
if (/changeTheme.+/gi.test(obj.id)) {
removeCommandlineBackground();
} else {
addCommandlineBackground();
}
if (
(!/theme/gi.test(obj.id) || obj.id === "toggleCustomTheme") &&
!ThemeController.randomTheme
@ -492,6 +511,11 @@ $("#commandLineWrapper #commandLine .suggestions").on("mouseover", (e) => {
const list = CommandlineLists.current[CommandlineLists.current.length - 1];
$.each(list.list, (_index, obj) => {
if (obj.id == hoverId) {
if (/changeTheme.+/gi.test(obj.id)) {
removeCommandlineBackground();
} else {
addCommandlineBackground();
}
if (
(!/theme/gi.test(obj.id) || obj.id === "toggleCustomTheme") &&
!ThemeController.randomTheme
@ -662,6 +686,11 @@ $(document).on("keydown", (e) => {
CommandlineLists.current[CommandlineLists.current.length - 1];
$.each(list.list, (_index, obj) => {
if (obj.id == hoverId) {
if (/changeTheme.+/gi.test(obj.id)) {
removeCommandlineBackground();
} else {
addCommandlineBackground();
}
if (
(!/theme/gi.test(obj.id) || obj.id === "toggleCustomTheme") &&
!ThemeController.randomTheme