Merge pull request #1741 from pateljannat/fui-upgrade
chore: upgraded frappe ui and made relevant changes
This commit is contained in:
Jannat Patel
GitHub
5
frontend/src/components/AppHeader.vue
Normal file
5
frontend/src/components/AppHeader.vue
Normal file
@@ -0,0 +1,5 @@
|
||||
<template>
|
||||
<div class="flex border-b sticky pr-5">
|
||||
<div id="app-header" class="flex-1"></div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -594,6 +594,11 @@ const articles = ref([
|
||||
{ name: 'create-a-live-class', title: __('Create a live class') },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: __('Learning Paths'),
|
||||
opened: false,
|
||||
subArticles: [{ name: 'add-a-program', title: __('Add a program') }],
|
||||
},
|
||||
{
|
||||
title: __('Assessments'),
|
||||
opened: false,
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
</slot>
|
||||
</template>
|
||||
<template #body="{ isOpen }">
|
||||
<div v-show="isOpen">
|
||||
<div v-show="isOpen" class="">
|
||||
<div
|
||||
class="mt-1 rounded-lg bg-surface-white py-1 text-base border-2"
|
||||
>
|
||||
|
||||
@@ -1,19 +1,14 @@
|
||||
<template>
|
||||
<div class="relative flex h-full flex-col">
|
||||
<div class="h-full flex-1">
|
||||
<div class="flex h-screen text-base bg-surface-white">
|
||||
<div
|
||||
class="relative block min-h-0 flex-shrink-0 overflow-hidden hover:overflow-auto"
|
||||
>
|
||||
<AppSidebar />
|
||||
</div>
|
||||
<div class="w-full overflow-auto" id="scrollContainer">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex h-screen w-screen">
|
||||
<div class="h-full border-r bg-surface-menu-bar">
|
||||
<AppSidebar />
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col h-full overflow-auto bg-surface-white">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AppSidebar from './AppSidebar.vue'
|
||||
import AppHeader from './AppHeader.vue'
|
||||
</script>
|
||||
|
||||
25
frontend/src/components/LayoutHeader.vue
Normal file
25
frontend/src/components/LayoutHeader.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<Teleport to="#app-header" v-if="showHeader">
|
||||
<slot>
|
||||
<header
|
||||
class="flex h-10.5 items-center justify-between py-[7px] sm:pl-5 pl-2"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<slot name="left-header" />
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<slot name="right-header" class="flex items-center gap-2" />
|
||||
</div>
|
||||
</header>
|
||||
</slot>
|
||||
</Teleport>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, nextTick } from 'vue'
|
||||
|
||||
const showHeader = ref(false)
|
||||
|
||||
nextTick(() => {
|
||||
showHeader.value = true
|
||||
})
|
||||
</script>
|
||||
@@ -1,60 +1,62 @@
|
||||
<template>
|
||||
<Dropdown class="p-2" :options="userDropdownOptions">
|
||||
<template v-slot="{ open }">
|
||||
<button
|
||||
class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
|
||||
:class="
|
||||
isCollapsed
|
||||
? 'px-0 w-auto'
|
||||
: open
|
||||
? 'bg-surface-white shadow-sm px-2 w-52'
|
||||
: 'hover:bg-surface-gray-3 px-2 w-52'
|
||||
"
|
||||
>
|
||||
<img
|
||||
v-if="branding.data?.banner_image"
|
||||
:src="branding.data?.banner_image.file_url"
|
||||
class="w-8 h-8 rounded flex-shrink-0"
|
||||
/>
|
||||
<LMSLogo v-else class="w-8 h-8 rounded flex-shrink-0" />
|
||||
<div
|
||||
class="flex flex-1 flex-col text-left duration-300 ease-in-out"
|
||||
<div class="p-2">
|
||||
<Dropdown :options="userDropdownOptions">
|
||||
<template v-slot="{ open }">
|
||||
<button
|
||||
class="flex h-12 py-2 items-center rounded-md duration-300 ease-in-out"
|
||||
:class="
|
||||
isCollapsed
|
||||
? 'opacity-0 ml-0 w-0 overflow-hidden'
|
||||
: 'opacity-100 ml-2 w-auto'
|
||||
? 'px-0 w-auto'
|
||||
: open
|
||||
? 'bg-surface-white shadow-sm px-2 w-52'
|
||||
: 'hover:bg-surface-gray-3 px-2 w-52'
|
||||
"
|
||||
>
|
||||
<div class="text-base font-medium text-ink-gray-9 leading-none">
|
||||
<span
|
||||
v-if="
|
||||
branding.data?.app_name && branding.data?.app_name != 'Frappe'
|
||||
"
|
||||
<img
|
||||
v-if="branding.data?.banner_image"
|
||||
:src="branding.data?.banner_image.file_url"
|
||||
class="w-8 h-8 rounded flex-shrink-0"
|
||||
/>
|
||||
<LMSLogo v-else class="w-8 h-8 rounded flex-shrink-0" />
|
||||
<div
|
||||
class="flex flex-1 flex-col text-left duration-300 ease-in-out"
|
||||
:class="
|
||||
isCollapsed
|
||||
? 'opacity-0 ml-0 w-0 overflow-hidden'
|
||||
: 'opacity-100 ml-2 w-auto'
|
||||
"
|
||||
>
|
||||
<div class="text-base font-medium text-ink-gray-9 leading-none">
|
||||
<span
|
||||
v-if="
|
||||
branding.data?.app_name && branding.data?.app_name != 'Frappe'
|
||||
"
|
||||
>
|
||||
{{ branding.data?.app_name }}
|
||||
</span>
|
||||
<span v-else> Learning </span>
|
||||
</div>
|
||||
<div
|
||||
v-if="userResource.data"
|
||||
class="mt-1 text-sm text-ink-gray-7 leading-none"
|
||||
>
|
||||
{{ branding.data?.app_name }}
|
||||
</span>
|
||||
<span v-else> Learning </span>
|
||||
{{ convertToTitleCase(userResource.data?.full_name) }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="userResource.data"
|
||||
class="mt-1 text-sm text-ink-gray-7 leading-none"
|
||||
class="duration-300 ease-in-out"
|
||||
:class="
|
||||
isCollapsed
|
||||
? 'opacity-0 ml-0 w-0 overflow-hidden'
|
||||
: 'opacity-100 ml-2 w-auto'
|
||||
"
|
||||
>
|
||||
{{ convertToTitleCase(userResource.data?.full_name) }}
|
||||
<ChevronDown class="h-4 w-4 text-ink-gray-7" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="duration-300 ease-in-out"
|
||||
:class="
|
||||
isCollapsed
|
||||
? 'opacity-0 ml-0 w-0 overflow-hidden'
|
||||
: 'opacity-100 ml-2 w-auto'
|
||||
"
|
||||
>
|
||||
<ChevronDown class="h-4 w-4 text-ink-gray-7" />
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</div>
|
||||
<SettingsModal
|
||||
v-if="userResource.data?.is_moderator"
|
||||
v-model="showSettingsModal"
|
||||
|
||||
Reference in New Issue
Block a user