austnv/remnawave-minishop
1
0
Fork 0
Code Issues 1 Pull Requests Activity

fix: fix menus and modal views after payment providers refactor

Browse Source
This commit is contained in:
3252a8
2026-05-18 11:01:32 +03:00
parent 51c9c8b4f0
commit 960754c54e
13 changed files with 482 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/admin/sections/SettingsSection.svelte
+57 -13
View File
@@ -90,6 +90,23 @@
return key ? UiIcons[key] || null : null;
}
function iconValue(field) {
return String(valueFor(field) || field?.placeholder || "").trim();
}
function iconIsDefault(field) {
return !String(valueFor(field) || "").trim();
}
function iconLabel(field) {
const iconName = iconValue(field);
if (!iconName) return at("settings_icon_empty", {}, "Default icon");
if (iconIsDefault(field)) {
return at("settings_icon_default_value", { icon: iconName }, `Default: ${iconName}`);
}
return iconName;
}
function openIconPicker(field) {
iconPickerField = field;
iconPickerSearch = "";
@@ -211,7 +228,7 @@
oninput={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
/>
{:else if field.type === "icon"}
{@const selectedIconName = valueFor(field) || ""}
{@const selectedIconName = iconValue(field)}
{@const SelectedIcon = iconComponent(selectedIconName)}
<AdminButton
class="admin-icon-picker-trigger"
@@ -221,9 +238,9 @@
{#if SelectedIcon}
<svelte:component this={SelectedIcon} size={16} />
{/if}
<span>{selectedIconName || at("settings_icon_empty", {}, "Default icon")}</span>
<span>{iconLabel(field)}</span>
</AdminButton>
{#if selectedIconName}
{#if !iconIsDefault(field)}
<AdminButton
size="sm"
variant="ghost"
@@ -424,20 +441,47 @@
class="admin-icon-picker-dialog"
>
<div class="admin-icon-picker-body">
<label class="admin-icon-picker-search">
<Search size={15} />
<input
bind:value={iconPickerSearch}
class="input"
type="text"
placeholder={at("search", {}, "Search")}
/>
</label>
{#if iconPickerField}
{@const currentIconName = iconValue(iconPickerField)}
{@const CurrentIcon = iconComponent(currentIconName)}
<div class="admin-icon-picker-current">
<span class="admin-icon-picker-current-preview" aria-hidden="true">
{#if CurrentIcon}
<svelte:component this={CurrentIcon} size={24} />
{/if}
</span>
<span class="admin-icon-picker-current-meta">
<small>{at("settings_icon_current", {}, "Current icon")}</small>
<strong>{iconLabel(iconPickerField)}</strong>
</span>
{#if !iconIsDefault(iconPickerField)}
<AdminButton
size="sm"
variant="ghost"
onclick={() => settingsStore.markDirty(iconPickerField.key, "")}
>
<X size={12} />
{at("settings_icon_use_default", {}, "Use default")}
</AdminButton>
{/if}
</div>
{/if}
<div class="admin-icon-picker-toolbar">
<label class="admin-icon-picker-search">
<Search size={15} />
<input
bind:value={iconPickerSearch}
class="input"
type="text"
placeholder={at("search", {}, "Search")}
/>
</label>
</div>
<div class="admin-icon-picker-grid">
{#each filteredIconOptions as iconName}
{@const Icon = iconComponent(iconName)}
<button
class:active={iconPickerField && valueFor(iconPickerField) === iconName}
class:active={iconPickerField && iconValue(iconPickerField) === iconName}
class="admin-icon-picker-option"
type="button"
onclick={() => selectIcon(iconName)}
frontend/src/styles/admin.css
+89 -8
View File
@@ -1892,12 +1892,64 @@
}
.admin-icon-picker-dialog {
width: min(100%, 720px);
width: min(100%, 760px);
}
.admin-icon-picker-body {
display: grid;
gap: 18px;
}
.admin-icon-picker-current {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 14px;
border: 1px solid var(--admin-border);
border-radius: 10px;
background:
linear-gradient(135deg, var(--surface-sheen), transparent),
color-mix(in srgb, var(--admin-surface-2) 86%, transparent);
}
.admin-icon-picker-current-preview {
display: grid;
width: 52px;
height: 52px;
place-items: center;
border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--admin-border));
border-radius: 10px;
background: color-mix(in srgb, var(--accent) 10%, var(--surface-muted));
color: var(--admin-text);
}
.admin-icon-picker-current-meta {
display: grid;
min-width: 0;
gap: 3px;
}
.admin-icon-picker-current-meta small {
color: var(--admin-muted);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.admin-icon-picker-current-meta strong {
overflow: hidden;
color: var(--admin-text);
font-size: 14px;
font-weight: 650;
text-overflow: ellipsis;
white-space: nowrap;
}
.admin-icon-picker-toolbar {
display: grid;
gap: 10px;
}
.admin-icon-picker-search {
@@ -1921,28 +1973,33 @@
.admin-icon-picker-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
gap: 8px;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 10px;
max-height: min(52vh, 460px);
overflow-y: auto;
padding-right: 4px;
padding: 2px 4px 4px 0;
}
.admin-icon-picker-option {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
grid-template-columns: 24px minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 42px;
gap: 10px;
min-height: 48px;
border: 1px solid var(--admin-border);
border-radius: 8px;
background: var(--surface-muted);
color: var(--admin-text);
padding: 9px 10px;
padding: 11px 12px;
text-align: left;
cursor: pointer;
}
.admin-icon-picker-option > svg {
justify-self: center;
color: var(--admin-muted);
}
.admin-icon-picker-option span {
overflow: hidden;
text-overflow: ellipsis;
@@ -1955,6 +2012,30 @@
background: color-mix(in srgb, var(--accent) 12%, var(--surface-muted));
}
.admin-icon-picker-option.active > svg {
color: var(--accent);
}
@media (max-width: 640px) {
.admin-icon-picker-current {
grid-template-columns: 44px minmax(0, 1fr);
}
.admin-icon-picker-current > .admin-btn {
grid-column: 1 / -1;
justify-self: start;
}
.admin-icon-picker-current-preview {
width: 44px;
height: 44px;
}
.admin-icon-picker-grid {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
}
.admin-setting-control .admin-color {
width: 36px;
height: 36px;