ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(widget): powered toggle persistence, copy buttons, version dates, showLessonsCount, color pickers, and loading spinner

Browse Source
This commit is contained in:
Rotimi Best
2026-06-13 11:24:20 +01:00
parent 094683b551
commit 0975f82c8b
14 changed files with 153 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/lib/features/widget/panels/design-panel.svelte
+59 -27
View File
@@ -45,33 +45,65 @@
</Select.Content>
</Select.Root>
</Field.Field>
<InputField
label={$t('widgets.form.primary_color')}
bind:value={draftConfig.colors.primaryColor}
maxLength={64}
errorMessage={errFor('config.colors.primaryColor')}
/>
<InputField
label={$t('widgets.form.background_color')}
bind:value={draftConfig.colors.backgroundColor}
isDisabled={!canUseCustomColors}
maxLength={64}
errorMessage={errFor('config.colors.backgroundColor')}
/>
<InputField
label={$t('widgets.form.text_color')}
bind:value={draftConfig.colors.textColor}
isDisabled={!canUseCustomColors}
maxLength={64}
errorMessage={errFor('config.colors.textColor')}
/>
<InputField
label={$t('widgets.form.border_color')}
bind:value={draftConfig.colors.borderColor}
isDisabled={!canUseCustomColors}
maxLength={64}
errorMessage={errFor('config.colors.borderColor')}
/>
<Field.Field>
<Field.Label>{$t('widgets.form.primary_color')}</Field.Label>
<div class="ui:flex ui:items-center ui:gap-2">
<input
type="color"
bind:value={draftConfig.colors.primaryColor}
class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5"
/>
<span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.primaryColor}</span>
</div>
{#if errFor('config.colors.primaryColor')}
<Field.Error>{errFor('config.colors.primaryColor')}</Field.Error>
{/if}
</Field.Field>
<Field.Field>
<Field.Label>{$t('widgets.form.background_color')}</Field.Label>
<div class="ui:flex ui:items-center ui:gap-2">
<input
type="color"
bind:value={draftConfig.colors.backgroundColor}
disabled={!canUseCustomColors}
class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5 disabled:ui:cursor-not-allowed disabled:ui:opacity-50"
/>
<span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.backgroundColor}</span>
</div>
{#if errFor('config.colors.backgroundColor')}
<Field.Error>{errFor('config.colors.backgroundColor')}</Field.Error>
{/if}
</Field.Field>
<Field.Field>
<Field.Label>{$t('widgets.form.text_color')}</Field.Label>
<div class="ui:flex ui:items-center ui:gap-2">
<input
type="color"
bind:value={draftConfig.colors.textColor}
disabled={!canUseCustomColors}
class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5 disabled:ui:cursor-not-allowed disabled:ui:opacity-50"
/>
<span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.textColor}</span>
</div>
{#if errFor('config.colors.textColor')}
<Field.Error>{errFor('config.colors.textColor')}</Field.Error>
{/if}
</Field.Field>
<Field.Field>
<Field.Label>{$t('widgets.form.border_color')}</Field.Label>
<div class="ui:flex ui:items-center ui:gap-2">
<input
type="color"
bind:value={draftConfig.colors.borderColor}
disabled={!canUseCustomColors}
class="ui:h-9 ui:w-9 ui:cursor-pointer ui:rounded ui:border ui:bg-transparent ui:p-0.5 disabled:ui:cursor-not-allowed disabled:ui:opacity-50"
/>
<span class="ui:text-muted-foreground ui:font-mono ui:text-sm">{draftConfig.colors.borderColor}</span>
</div>
{#if errFor('config.colors.borderColor')}
<Field.Error>{errFor('config.colors.borderColor')}</Field.Error>
{/if}
</Field.Field>
<InputField
type="number"
label={$t('widgets.form.border_radius')}
apps/dashboard/src/lib/features/widget/panels/embed-panel.svelte
+14 -5
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { Button } from '@cio/ui/base/button';
import { CopyButton } from '@cio/ui/base/copy-button';
import * as Tabs from '@cio/ui/base/tabs';
import { TextareaField } from '@cio/ui/custom/textarea-field';
import { t } from '$lib/utils/functions/translations';
@@ -26,9 +27,9 @@
<Tabs.Content value="html" class="mt-4 space-y-3">
<TextareaField label={$t('widgets.form.embed_code')} value={detail.widget.embedCode} rows={6} readonly />
<div class="flex flex-wrap gap-2">
<Button variant="outline" onclick={() => navigator.clipboard.writeText(detail.widget.embedCode)}>
<CopyButton text={detail.widget.embedCode} variant="outline">
{$t('widgets.actions.copy_embed')}
</Button>
</CopyButton>
</div>
</Tabs.Content>
@@ -36,9 +37,9 @@
<TextareaField label={$t('widgets.embed.url_label')} value={detail.widget.hostedEmbedUrl} rows={2} readonly />
<p class="ui:text-muted-foreground text-xs">{$t('widgets.embed.url_helper')}</p>
<div class="flex flex-wrap gap-2">
<Button variant="outline" onclick={() => navigator.clipboard.writeText(detail.widget.hostedEmbedUrl)}>
<CopyButton text={detail.widget.hostedEmbedUrl} variant="outline">
{$t('widgets.actions.copy_url')}
</Button>
</CopyButton>
</div>
</Tabs.Content>
</Tabs.Root>
@@ -50,7 +51,15 @@
<div class="ui:border-border ui:bg-card/50 flex items-center justify-between rounded-2xl border p-3">
<div>
<div class="font-medium">v{version.version}</div>
<div class="ui:text-muted-foreground text-xs">{version.publishedAt}</div>
<div class="ui:text-muted-foreground text-xs">
{new Date(version.publishedAt).toLocaleString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
hour: 'numeric',
minute: '2-digit'
})}
</div>
</div>
<Button variant="outline" size="sm" onclick={() => onRollback(version.id)}>
{$t('widgets.actions.restore')}