hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

frontend: perform primary action in most modals by pressing enter

Browse source
This commit is contained in:
hippoz 2022-05-06 03:19:52 +03:00
parent 96975c149b
commit c8604515d6
Signed by: hippoz
GPG key ID: 7C52899193467641
5 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/components/overlays/CreateAccount.svelte
View file

@ -40,6 +40,12 @@ import { maybeFly } from "../../animations";
overlayStore.open("login", {});
}
};
const onKeydown = async (e) => {
if (e.code !== "Enter")
return;
await create();
};
</script>
<style>
@ -52,7 +58,7 @@ import { maybeFly } from "../../animations";
}
</style>
<div class="modal-backdrop modal-backdrop-opaque">
<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
<div class="modal-header">
<span class="h4">Create an Account</span>

8
frontend/src/components/overlays/CreateChannel.svelte
View file

@ -22,6 +22,12 @@ import { maybeFade, maybeFly } from "../../animations";
}
close();
};
const onKeydown = async (e) => {
if (e.code !== "Enter")
return;
await create();
};
</script>
<style>
@ -30,7 +36,7 @@ import { maybeFade, maybeFly } from "../../animations";
}
</style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
<div class="modal-header">
<span class="h4">Create Channel</span>

8
frontend/src/components/overlays/EditChannel.svelte
View file

@ -34,6 +34,12 @@
}
close();
};
const onKeydown = async (e) => {
if (e.code !== "Enter")
return;
await save();
};
</script>
<style>
@ -46,7 +52,7 @@
}
</style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
<div class="modal-header">
<span class="h4">Edit Channel</span>

8
frontend/src/components/overlays/EditMessage.svelte
View file

@ -34,6 +34,12 @@ import { maybeFade, maybeFly } from "../../animations";
}
close();
};
const onKeydown = async (e) => {
if (e.code !== "Enter")
return;
await save();
};
</script>
<style>
@ -46,7 +52,7 @@ import { maybeFade, maybeFly } from "../../animations";
}
</style>
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
<div class="modal-backdrop" transition:maybeFade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
<div class="modal-header">
<span class="h4">Edit Message</span>

8
frontend/src/components/overlays/Login.svelte
View file

@ -44,6 +44,12 @@ import { maybeFly } from "../../animations";
overlayStore.open("createAccount", {});
}
};
const onKeydown = async (e) => {
if (e.code !== "Enter")
return;
await login();
};
</script>
<style>
@ -56,7 +62,7 @@ import { maybeFly } from "../../animations";
}
</style>
<div class="modal-backdrop modal-backdrop-opaque">
<div class="modal-backdrop modal-backdrop-opaque" on:keydown="{ onKeydown }">
<div class="modal" transition:maybeFly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation on:outroend="{ outroEnd }">
<div class="modal-header">
<span class="h4">Welcome back!</span>