chore: improve custom scroll areas
This commit is contained in:
3252a8
@@ -26,6 +26,7 @@
|
||||
import { onMount, setContext } from "svelte";
|
||||
import { fade } from "svelte/transition";
|
||||
import { Select } from "$components/ui/primitives.js";
|
||||
import { ScrollArea } from "$components/ui/index.js";
|
||||
import { AdminBadge, AdminButton } from "$components/patterns/admin/index.js";
|
||||
|
||||
import BrandMark from "$lib/webapp/BrandMark.svelte";
|
||||
@@ -760,88 +761,90 @@
|
||||
</header>
|
||||
|
||||
<main class="admin-main">
|
||||
{#key active}
|
||||
<div class="admin-section-stage" in:fade={sectionFade} out:fade={sectionFade}>
|
||||
{#if active === "stats"}
|
||||
<StatsSection {at} {fmtDate} {fmtDateShort} {fmtMoney} {paymentStatusVariant} />
|
||||
{/if}
|
||||
<ScrollArea class="admin-main-scroll" maxHeight="none">
|
||||
{#key active}
|
||||
<div class="admin-section-stage" in:fade={sectionFade} out:fade={sectionFade}>
|
||||
{#if active === "stats"}
|
||||
<StatsSection {at} {fmtDate} {fmtDateShort} {fmtMoney} {paymentStatusVariant} />
|
||||
{/if}
|
||||
|
||||
{#if active === "users"}
|
||||
<UsersSection
|
||||
{at}
|
||||
{fmtDateShort}
|
||||
{panelStatusBadge}
|
||||
{resolvedAvatarUrl}
|
||||
{userDisplayName}
|
||||
{userInitials}
|
||||
{userSecondaryName}
|
||||
/>
|
||||
{/if}
|
||||
{#if active === "users"}
|
||||
<UsersSection
|
||||
{at}
|
||||
{fmtDateShort}
|
||||
{panelStatusBadge}
|
||||
{resolvedAvatarUrl}
|
||||
{userDisplayName}
|
||||
{userInitials}
|
||||
{userSecondaryName}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if active === "payments"}
|
||||
<PaymentsSection
|
||||
{at}
|
||||
{fmtDate}
|
||||
{fmtMoney}
|
||||
{paymentStatusVariant}
|
||||
onOpenUserCard={openPaymentUserCard}
|
||||
/>
|
||||
{/if}
|
||||
{#if active === "payments"}
|
||||
<PaymentsSection
|
||||
{at}
|
||||
{fmtDate}
|
||||
{fmtMoney}
|
||||
{paymentStatusVariant}
|
||||
onOpenUserCard={openPaymentUserCard}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if active === "promos"}
|
||||
<PromosSection {at} {fmtDateShort} />
|
||||
{/if}
|
||||
{#if active === "promos"}
|
||||
<PromosSection {at} {fmtDateShort} />
|
||||
{/if}
|
||||
|
||||
{#if active === "ads"}
|
||||
<AdsSection {at} {fmtMoney} />
|
||||
{/if}
|
||||
{#if active === "ads"}
|
||||
<AdsSection {at} {fmtMoney} />
|
||||
{/if}
|
||||
|
||||
{#if active === "broadcast"}
|
||||
<BroadcastSection {at} />
|
||||
{/if}
|
||||
{#if active === "broadcast"}
|
||||
<BroadcastSection {at} />
|
||||
{/if}
|
||||
|
||||
{#if active === "logs"}
|
||||
<LogsSection {at} {fmtDate} />
|
||||
{/if}
|
||||
{#if active === "logs"}
|
||||
<LogsSection {at} {fmtDate} />
|
||||
{/if}
|
||||
|
||||
{#if active === "support"}
|
||||
<SupportSection
|
||||
{at}
|
||||
{brand}
|
||||
{resolvedAvatarUrl}
|
||||
onOpenUserCard={openUserCard}
|
||||
initialTicketId={readSupportTicketIdFromPath()}
|
||||
/>
|
||||
{/if}
|
||||
{#if active === "support"}
|
||||
<SupportSection
|
||||
{at}
|
||||
{brand}
|
||||
{resolvedAvatarUrl}
|
||||
onOpenUserCard={openUserCard}
|
||||
initialTicketId={readSupportTicketIdFromPath()}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if active === "tariffs"}
|
||||
<TariffsSection {at} {fmtMoney} {onSettingsSaved} />
|
||||
{/if}
|
||||
{#if active === "tariffs"}
|
||||
<TariffsSection {at} {fmtMoney} {onSettingsSaved} />
|
||||
{/if}
|
||||
|
||||
{#if active === "appearance"}
|
||||
<AppearanceSection
|
||||
{at}
|
||||
{currentLang}
|
||||
{onSettingsSaved}
|
||||
{brand}
|
||||
{appFaviconUrl}
|
||||
{appFaviconUseCustom}
|
||||
/>
|
||||
{/if}
|
||||
{#if active === "appearance"}
|
||||
<AppearanceSection
|
||||
{at}
|
||||
{currentLang}
|
||||
{onSettingsSaved}
|
||||
{brand}
|
||||
{appFaviconUrl}
|
||||
{appFaviconUseCustom}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
{#if active === "settings"}
|
||||
<SettingsSection {at} {onSettingsSaved} {currentLang} />
|
||||
{/if}
|
||||
{#if active === "settings"}
|
||||
<SettingsSection {at} {onSettingsSaved} {currentLang} />
|
||||
{/if}
|
||||
|
||||
{#if active === "backups"}
|
||||
<BackupsSection {at} {fmtDate} />
|
||||
{/if}
|
||||
{#if active === "backups"}
|
||||
<BackupsSection {at} {fmtDate} />
|
||||
{/if}
|
||||
|
||||
{#if active === "translations"}
|
||||
<TranslationsSection {at} {onTranslationsSaved} />
|
||||
{/if}
|
||||
</div>
|
||||
{/key}
|
||||
{#if active === "translations"}
|
||||
<TranslationsSection {at} {onTranslationsSaved} />
|
||||
{/if}
|
||||
</div>
|
||||
{/key}
|
||||
</ScrollArea>
|
||||
</main>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script>
|
||||
import { ColorInput, FileInput, Input, Textarea } from "$components/ui/index.js";
|
||||
import { ColorInput, FileInput, Input, ScrollArea, Textarea } from "$components/ui/index.js";
|
||||
import {
|
||||
Check,
|
||||
ChevronRight,
|
||||
@@ -824,21 +824,23 @@
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="admin-icon-picker-grid">
|
||||
{#each filteredIconOptions as iconName}
|
||||
{@const Icon = iconComponent(iconName)}
|
||||
<button
|
||||
class:active={iconPickerField && iconValue(iconPickerField) === iconName}
|
||||
class="admin-icon-picker-option"
|
||||
type="button"
|
||||
onclick={() => selectIcon(iconName)}
|
||||
>
|
||||
{#if Icon}
|
||||
<svelte:component this={Icon} size={18} />
|
||||
{/if}
|
||||
<span>{iconName}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<ScrollArea class="admin-icon-picker-scroll" maxHeight="min(52vh, 460px)">
|
||||
<div class="admin-icon-picker-grid">
|
||||
{#each filteredIconOptions as iconName}
|
||||
{@const Icon = iconComponent(iconName)}
|
||||
<button
|
||||
class:active={iconPickerField && iconValue(iconPickerField) === iconName}
|
||||
class="admin-icon-picker-option"
|
||||
type="button"
|
||||
onclick={() => selectIcon(iconName)}
|
||||
>
|
||||
{#if Icon}
|
||||
<svelte:component this={Icon} size={18} />
|
||||
{/if}
|
||||
<span>{iconName}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
import { fmtTrafficBytes } from "../../lib/admin/format.js";
|
||||
import Badge from "$components/ui/badge.svelte";
|
||||
import { ScrollArea } from "$components/ui/index.js";
|
||||
import * as Card from "$components/ui/card/index.js";
|
||||
import {
|
||||
AdminDashboardGrid,
|
||||
@@ -606,21 +607,23 @@
|
||||
style="width:78%;height:9px;margin-top:6px"
|
||||
></span>
|
||||
</div>
|
||||
<div class="admin-panel-dash-nodes-grid">
|
||||
{#each Array(4) as _, m (m)}
|
||||
<div class="admin-panel-dash-node">
|
||||
<span class="admin-skeleton admin-skeleton-line" style="width:82%"></span>
|
||||
<span
|
||||
class="admin-skeleton admin-skeleton-line admin-skeleton-line-strong"
|
||||
style="width:52%;height:16px;margin-top:6px"
|
||||
></span>
|
||||
<span
|
||||
class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"
|
||||
style="width:44%;margin-top:6px"
|
||||
></span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ScrollArea class="admin-panel-dash-nodes-scroll" maxHeight="240px">
|
||||
<div class="admin-panel-dash-nodes-grid">
|
||||
{#each Array(4) as _, m (m)}
|
||||
<div class="admin-panel-dash-node">
|
||||
<span class="admin-skeleton admin-skeleton-line" style="width:82%"></span>
|
||||
<span
|
||||
class="admin-skeleton admin-skeleton-line admin-skeleton-line-strong"
|
||||
style="width:52%;height:16px;margin-top:6px"
|
||||
></span>
|
||||
<span
|
||||
class="admin-skeleton admin-skeleton-line admin-skeleton-line-tiny"
|
||||
style="width:44%;margin-top:6px"
|
||||
></span>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
</Card.Content>
|
||||
@@ -1018,19 +1021,21 @@
|
||||
{at("stats_panel_inner_nodes_hint", {}, "")}
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin-panel-dash-nodes-grid">
|
||||
{#each panelNodeTraffic.seven.slice(0, PANEL_NODE_TILE_LIMIT) as node}
|
||||
<div class="admin-panel-dash-node">
|
||||
<div class="admin-panel-dash-node-name">{node.label}</div>
|
||||
<div class="admin-panel-dash-node-value">{node.value}</div>
|
||||
{#if node.online != null}
|
||||
<div class="admin-panel-dash-node-meta">
|
||||
{at("stats_panel_node_users_online", { count: node.online }, "")}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<ScrollArea class="admin-panel-dash-nodes-scroll" maxHeight="240px">
|
||||
<div class="admin-panel-dash-nodes-grid">
|
||||
{#each panelNodeTraffic.seven.slice(0, PANEL_NODE_TILE_LIMIT) as node}
|
||||
<div class="admin-panel-dash-node">
|
||||
<div class="admin-panel-dash-node-name">{node.label}</div>
|
||||
<div class="admin-panel-dash-node-value">{node.value}</div>
|
||||
{#if node.online != null}
|
||||
<div class="admin-panel-dash-node-meta">
|
||||
{at("stats_panel_node_users_online", { count: node.online }, "")}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{#if panelNodeTraffic.seven.length > PANEL_NODE_TILE_LIMIT}
|
||||
<p class="admin-panel-dash-nodes-more">
|
||||
{at(
|
||||
|
||||
@@ -269,16 +269,18 @@
|
||||
{:else if !tickets.length}
|
||||
<div class="admin-empty-state">{at("support_empty", {}, "Тикетов пока нет")}</div>
|
||||
{:else}
|
||||
<div class="support-inbox-list">
|
||||
{#each tickets as ticket}
|
||||
<SupportInboxRow
|
||||
{ticket}
|
||||
active={openedTicketId === ticket.ticket_id}
|
||||
{at}
|
||||
onOpen={(item) => supportStore.openTicket(item.ticket_id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<ScrollArea class="support-inbox-list" maxHeight="none">
|
||||
<div class="support-inbox-list-inner">
|
||||
{#each tickets as ticket}
|
||||
<SupportInboxRow
|
||||
{ticket}
|
||||
active={openedTicketId === ticket.ticket_id}
|
||||
{at}
|
||||
onOpen={(item) => supportStore.openTicket(item.ticket_id)}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
{/if}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script>
|
||||
import { Label, Separator, Tabs } from "$components/ui/primitives.js";
|
||||
import { Checkbox, Input, Textarea } from "$components/ui/index.js";
|
||||
import { Checkbox, Input, ScrollArea, Textarea } from "$components/ui/index.js";
|
||||
import Dialog from "$components/ui/dialog.svelte";
|
||||
import {
|
||||
AdminBadge,
|
||||
@@ -552,7 +552,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="admin-user-logs-wrap">
|
||||
<ScrollArea class="admin-user-logs-wrap" maxHeight="min(52vh, 460px)">
|
||||
{#if userLogsLoading}
|
||||
<AdminTableSkeleton
|
||||
headers={[
|
||||
@@ -604,7 +604,7 @@
|
||||
</tbody>
|
||||
</AdminTable>
|
||||
{/if}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{#if userLogsLoaded && userLogsTotal > userLogsPageSize}
|
||||
<AdminPagination
|
||||
@@ -976,7 +976,9 @@
|
||||
onclose={() => usersStore.updateState({ userMessageConfirmOpen: false })}
|
||||
class="admin-dialog"
|
||||
>
|
||||
<div class="admin-confirm-message-preview">{userMessageDraft}</div>
|
||||
<ScrollArea class="admin-confirm-message-preview" maxHeight="min(280px, 45vh)">
|
||||
{userMessageDraft}
|
||||
</ScrollArea>
|
||||
<div class="admin-dialog-actions">
|
||||
<AdminButton onclick={() => usersStore.updateState({ userMessageConfirmOpen: false })}
|
||||
>{at("btn_cancel", {}, "Отмена")}</AdminButton
|
||||
@@ -1230,7 +1232,7 @@
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.admin-user-logs-wrap {
|
||||
:global(.admin-user-logs-wrap) {
|
||||
min-height: 120px;
|
||||
}
|
||||
.admin-user-log-event {
|
||||
|
||||
Reference in New Issue
Block a user