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

CLASSROOMIO-T-127: Theming configuration

Browse Source 
CLASSROOMIO-T-127: Add 4 themes configurations into the app

Clean up


Co-authored-by: Rotimi Best <[email protected]>


Merge-request: CLASSROOMIO-MR-51
Merged-by: Best Admin <[email protected]>
This commit is contained in:
Rotimi Best
2023-08-20 19:08:48 +00:00
committed by Space Cloud
co-authored by Rotimi Best
parent 910d9c50a9
commit f39a0cee4b
75 changed files with 709 additions and 379 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Org/Settings/OrgSettings.svelte
+84 -30
View File
@@ -13,29 +13,50 @@
let avatar;
let loading = false;
const themes = {
rose: 'theme-rose',
green: 'theme-green',
orange: 'theme-orange',
violet: 'theme-violet',
default: ''
};
function handleChangeTheme(t = '') {
return async () => {
document.body.className = document.body.className
.split(' ')
.filter((c) => !c.includes('theme'))
.join(' ')
.concat(!!t ? ' ' : '', t);
$currentOrg.theme = t;
const res = await supabase
.from('organization')
.update({ theme: t })
.match({ id: $currentOrg.id });
console.log('Update theme', res);
};
}
async function handleUpdate() {
try {
loading = true;
const updates = {
name: $currentOrg.name,
name: $currentOrg.name
};
if (avatar) {
const filename = `user/${$currentOrg.name + Date.now()}.webp`;
const { data } = await supabase.storage
.from('avatars')
.upload(filename, avatar, {
cacheControl: '3600',
upsert: false,
});
const { data } = await supabase.storage.from('avatars').upload(filename, avatar, {
cacheControl: '3600',
upsert: false
});
if (data && data.Key) {
const { publicURL } = supabase.storage
.from('avatars')
.getPublicUrl(filename);
const { publicURL } = supabase.storage.from('avatars').getPublicUrl(filename);
updates.avatar_url = publicURL;
$currentOrg.avatar_url = publicURL;
@@ -50,7 +71,7 @@
currentOrg.update((_currentOrg) => ({
..._currentOrg,
...updates,
...updates
}));
$snackbarStore.open = true;
$snackbarStore.message = 'Update successful';
@@ -78,15 +99,9 @@
<Grid class="border-c rounded border-gray-200 w-full mt-5">
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
><SectionTitle>Organization Profile</SectionTitle></Column
>
<Column sm={2} md={2} lg={4}><SectionTitle>Organization Profile</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<TextField
label="Organization Name"
bind:value={$currentOrg.name}
className="w-60 mb-5"
/>
<TextField label="Organization Name" bind:value={$currentOrg.name} className="w-60 mb-5" />
<UploadImage
bind:avatar
src={$currentOrg.avatar_url}
@@ -102,24 +117,64 @@
/>
</Column>
</Row>
<!-- <Row class="py-7 border-bottom-c">
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}><SectionTitle>Theme</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white">Set your brand</h4>
<h4 class="dark:text-white mt-0">Set your brand color</h4>
<div class="flex gap-2">
<button
class="rounded-full border-2 {$currentOrg.theme === themes.default &&
'border-[#1d4ee2]'} mr-3"
on:click={handleChangeTheme(themes.default)}
>
<div class="w-6 h-6 bg-[#1d4ee2] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.rose &&
'border-[#be1241]'} mr-3"
on:click={handleChangeTheme(themes.rose)}
>
<div class="w-6 h-6 bg-[#be1241] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.green &&
'border-[#0c891b]'} mr-3"
on:click={handleChangeTheme(themes.green)}
>
<div class="w-6 h-6 bg-[#0c891b] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.orange &&
'border-[#cc4902]'} mr-3"
on:click={handleChangeTheme(themes.orange)}
>
<div class="w-6 h-6 bg-[#cc4902] rounded-full m-1" />
</button>
<button
class="rounded-full border-2 {$currentOrg.theme === themes.violet &&
'border-[#cf00ce]'} mr-3"
on:click={handleChangeTheme(themes.violet)}
>
<div class="w-6 h-6 bg-[#cf00ce] rounded-full m-1" />
</button>
</div>
</Column>
</Row> -->
</Row>
<Row class="py-7 border-bottom-c">
<Column sm={2} md={2} lg={4}
><SectionTitle>Custom Domain</SectionTitle></Column
>
<Column sm={2} md={2} lg={4}><SectionTitle>Custom Domain</SectionTitle></Column>
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white">Customise your Domain</h4>
<h4 class="dark:text-white mt-0">Customise your Domain</h4>
<p class="text-sm text-gray-500 dark:text-white">
Create a custom URL so your audience can get to your organization easily
</p>
<PrimaryButton
label="Edit domain"
className="my-7 py-5 px-10 text-blue-700"
className="my-7 py-5 px-10 text-primary-700"
variant={VARIANTS.OUTLINED}
onClick={() => gotoSetting('/domains')}
/>
@@ -130,12 +185,11 @@
<Column sm={2} md={6} lg={8}>
<h4 class="dark:text-white">Set up your website</h4>
<p class="text-sm text-gray-500 dark:text-white">
Add team mates to your organization so you can both collaborate on
projects.
Add team mates to your organization so you can both collaborate on projects.
</p>
<PrimaryButton
label="Manage Team"
className="my-7 py-5 px-10 text-blue-700"
className="my-7 py-5 px-10 text-primary-700"
variant={VARIANTS.OUTLINED}
onClick={() => gotoSetting('/teams')}
/>
src/lib/components/Org/Settings/Profile.svelte
+1 -1
View File
@@ -99,6 +99,6 @@
isDisabled={loading}
onClick={handleUpdate}
/>
<PrimaryButton variant={VARIANTS.CONTAINED_DANGER} label="Log out" onClick={logout} />
<PrimaryButton variant={VARIANTS.OUTLINED} label="Log out" onClick={logout} />
</Row>
</Grid>