mirror/aliasvault
1
0
Fork 0
mirror of https://github.com/aliasvault/aliasvault.git synced 2026-05-24 16:32:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

Tweak web app credential edit layout (#883)

Browse Source
This commit is contained in:
Leendert de Borst
2025-07-28 12:57:22 +02:00
committed by Leendert de Borst
parent 751f8b6afd
commit ec833cb430
3 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/server/AliasVault.Client/Main/Pages/Credentials/AddEdit.razor
View File

@@ -81,9 +81,6 @@ else
<div class="col-span-1 md:col-span-1 lg:col-span-2">
<div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold dark:text-white">@Localizer["LoginCredentialsSectionHeader"]</h3>
<div class="mb-4">
<Button OnClick="GenerateRandomAlias">@Localizer["GenerateRandomAliasButton"]</Button>
</div>
<div class="grid gap-6">
<div class="col-span-6 sm:col-span-3">
<EditEmailFormRow Id="email" Label="@Localizer["EmailLabel"]" @bind-Value="Obj.Alias.Email"></EditEmailFormRow>
@@ -100,6 +97,19 @@ else
<div class="col-span-1 md:col-span-1 lg:col-span-2">
<div class="p-4 mb-4 bg-white border border-gray-200 rounded-lg shadow-sm 2xl:col-span-2 dark:border-gray-700 sm:p-6 dark:bg-gray-800">
<h3 class="mb-4 text-xl font-semibold dark:text-white">@Localizer["AliasSectionHeader"]</h3>
<div class="mb-4">
<Button OnClick="GenerateRandomAlias" AdditionalClasses="flex items-center justify-center gap-1">
<svg class='w-5 h-5 inline-block' viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
<circle cx="8" cy="8" r="1"/>
<circle cx="16" cy="8" r="1"/>
<circle cx="12" cy="12" r="1"/>
<circle cx="8" cy="16" r="1"/>
<circle cx="16" cy="16" r="1"/>
</svg>
@Localizer["GenerateRandomAliasButton"]
</Button>
</div>
<div class="grid gap-6">
<div class="col-span-6 sm:col-span-3">
<EditFormRow Id="first-name" Label="@Localizer["FirstNameLabel"]" @bind-Value="Obj.Alias.FirstName"></EditFormRow>

18
apps/server/AliasVault.Client/wwwroot/css/tailwind.css
View File

@@ -1247,6 +1247,10 @@ video {
justify-content: space-between;
}
.gap-1 {
gap: 0.25rem;
}
.gap-2 {
gap: 0.5rem;
}
@@ -1263,10 +1267,6 @@ video {
gap: 1.5rem;
}
.gap-1 {
gap: 0.25rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -3092,6 +3092,11 @@ video {
color: rgb(96 165 250 / var(--tw-text-opacity));
}
.dark\:hover\:text-gray-100:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark\:hover\:text-gray-200:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
@@ -3132,11 +3137,6 @@ video {
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:hover\:text-gray-100:hover:is(.dark *) {
--tw-text-opacity: 1;
color: rgb(243 244 246 / var(--tw-text-opacity));
}
.dark\:hover\:file\:bg-primary-800\/60:is(.dark *)::file-selector-button:hover {
background-color: rgb(154 93 38 / 0.6);
}

33
apps/server/AliasVault.Client/wwwroot/js/modules/clickOutsideHandler.js
View File

@@ -8,19 +8,43 @@ export function registerClickOutsideHandler(dotNetHelper, contentIds, methodName
const idArray = Array.isArray(contentIds) ? contentIds : contentIds.split(',').map(id => id.trim());
const mouseHandler = (event) => {
// Check if dotNetHelper is still valid
if (!currentDotNetHelper) {
unregisterClickOutsideHandler();
return;
}
const isOutside = idArray.every(id => {
const content = document.getElementById(id);
return !content?.contains(event.target);
});
if (isOutside) {
currentDotNetHelper.invokeMethodAsync(methodName);
try {
currentDotNetHelper.invokeMethodAsync(methodName);
} catch (error) {
console.warn('Failed to invoke click outside method:', error);
// Clean up if the DotNetObjectReference is disposed
unregisterClickOutsideHandler();
}
}
};
const keyHandler = (event) => {
if (event.key === 'Escape') {
currentDotNetHelper.invokeMethodAsync(methodName);
// Check if dotNetHelper is still valid
if (!currentDotNetHelper) {
unregisterClickOutsideHandler();
return;
}
try {
currentDotNetHelper.invokeMethodAsync(methodName);
} catch (error) {
console.warn('Failed to invoke escape key method:', error);
// Clean up if the DotNetObjectReference is disposed
unregisterClickOutsideHandler();
}
}
};
@@ -35,8 +59,9 @@ export function registerClickOutsideHandler(dotNetHelper, contentIds, methodName
export function unregisterClickOutsideHandler() {
if (currentHandler) {
document.removeEventListener('mousedown', currentHandler);
document.removeEventListener('keydown', currentHandler);
document.removeEventListener('mousedown', currentHandler.mouse);
document.removeEventListener('keydown', currentHandler.key);
currentHandler = null;
currentDotNetHelper = null;
}
}