test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added help modal with minimize & maximize functionality and added in sidebar

Browse Source
This commit is contained in:
Shariq Ansari 2025-03-08 16:13:05 +05:30
parent c8421d8c08
commit e055c47942
3 changed files with 61 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/components/Icons/HelpIcon.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.25 8C14.25 11.4518 11.4518 14.25 8 14.25C4.54822 14.25 1.75 11.4518 1.75 8C1.75 4.54822 4.54822 1.75 8 1.75C11.4518 1.75 14.25 4.54822 14.25 8ZM15.25 8C15.25 12.0041 12.0041 15.25 8 15.25C3.99594 15.25 0.75 12.0041 0.75 8C0.75 3.99594 3.99594 0.75 8 0.75C12.0041 0.75 15.25 3.99594 15.25 8ZM7.37988 9.37695V9.44531H8.39062V9.37695C8.39062 9.10352 8.41992 8.88542 8.47852 8.72266C8.53711 8.55664 8.62826 8.41504 8.75195 8.29785C8.87891 8.18066 9.04329 8.06185 9.24512 7.94141C9.56087 7.74609 9.8099 7.51009 9.99219 7.2334C10.1745 6.95345 10.2656 6.61328 10.2656 6.21289C10.2656 5.82878 10.1745 5.49186 9.99219 5.20215C9.81315 4.91244 9.56087 4.6862 9.23535 4.52344C8.90983 4.36068 8.52734 4.2793 8.08789 4.2793C7.69401 4.2793 7.33268 4.35579 7.00391 4.50879C6.67513 4.65853 6.41146 4.88151 6.21289 5.17773C6.01432 5.4707 5.90853 5.82878 5.89551 6.25195H6.96973C6.986 6.0013 7.04948 5.79785 7.16016 5.6416C7.27083 5.4821 7.40755 5.36491 7.57031 5.29004C7.73633 5.21517 7.90885 5.17773 8.08789 5.17773C8.28971 5.17773 8.47363 5.22005 8.63965 5.30469C8.80892 5.38932 8.94075 5.50814 9.03516 5.66113C9.13281 5.81413 9.18164 5.99479 9.18164 6.20312C9.18164 6.47005 9.11003 6.69954 8.9668 6.8916C8.82357 7.0804 8.64453 7.23828 8.42969 7.36523C8.21159 7.50195 8.02279 7.64193 7.86328 7.78516C7.70703 7.92513 7.58659 8.11556 7.50195 8.35645C7.42057 8.59408 7.37988 8.93425 7.37988 9.37695ZM7.37988 11.5205C7.51986 11.654 7.69076 11.7207 7.89258 11.7207C8.09766 11.7207 8.26855 11.654 8.40527 11.5205C8.54525 11.3838 8.61523 11.2161 8.61523 11.0176C8.61523 10.8158 8.54525 10.6481 8.40527 10.5146C8.26855 10.3779 8.09766 10.3096 7.89258 10.3096C7.69076 10.3096 7.51986 10.3779 7.37988 10.5146C7.24316 10.6481 7.1748 10.8158 7.1748 11.0176C7.1748 11.2161 7.24316 11.3838 7.37988 11.5205Z"
fill="currentColor"
/>
</svg>
</template>

18
frontend/src/components/Layouts/AppSidebar.vue
View File

@ -74,6 +74,15 @@
<div class="m-2 flex flex-col gap-1">
<SignupBanner :isSidebarCollapsed="isSidebarCollapsed" />
<TrialBanner v-if="isFCSite" />
<SidebarLink
:label="__('Help')"
:isCollapsed="isSidebarCollapsed"
@click="showHelpModal = !showHelpModal"
>
<template #icon>
<HelpIcon class="h-4 w-4" />
</template>
</SidebarLink>
<SidebarLink
:label="isSidebarCollapsed ? __('Expand') : __('Collapse')"
:isCollapsed="isSidebarCollapsed"
@ -81,9 +90,9 @@
class=""
>
<template #icon>
<span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
<span class="grid h-4 w-4 flex-shrink-0 place-items-center">
<CollapseSidebar
class="h-4.5 w-4.5 text-ink-gray-7 duration-300 ease-in-out"
class="h-4 w-4 text-ink-gray-7 duration-300 ease-in-out"
:class="{ '[transform:rotateY(180deg)]': isSidebarCollapsed }"
/>
</span>
@ -92,6 +101,7 @@
</div>
<Notifications />
<Settings />
<HelpModal v-if="showHelpModal" v-model="showHelpModal" />
</div>
</template>
@ -109,10 +119,12 @@ import TaskIcon from '@/components/Icons/TaskIcon.vue'
import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
import CollapseSidebar from '@/components/Icons/CollapseSidebar.vue'
import NotificationsIcon from '@/components/Icons/NotificationsIcon.vue'
import HelpIcon from '@/components/Icons/HelpIcon.vue'
import SidebarLink from '@/components/SidebarLink.vue'
import Notifications from '@/components/Notifications.vue'
import Settings from '@/components/Settings/Settings.vue'
import SignupBanner from '@/components/SignupBanner.vue'
import HelpModal from '@/components/Modals/HelpModal.vue'
import { viewsStore } from '@/stores/views'
import {
unreadNotificationsCount,
@ -233,4 +245,6 @@ function getIcon(routeName, icon) {
return PinIcon
}
}
const showHelpModal = ref(false)
</script>

29
frontend/src/components/Modals/HelpModal.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div
v-show="show"
class="fixed z-20 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col rounded-lg bg-surface-modal shadow-2xl"
:class="[minimize ? 'right-0 top-[calc(100%_-_110px)]' : 'right-0']"
@click.stop
>
<div class="flex justify-between">
<div></div>
<div>
<Button @click="minimize = !minimize" variant="ghost">
<MaximizeIcon v-if="minimize" class="h-3.5 w-3.5" />
<MinimizeIcon v-else class="h-3.5 w-3.5" />
</Button>
<Button variant="ghost" @click="show = false">
<FeatherIcon name="x" class="h-3.5" />
</Button>
</div>
</div>
</div>
</template>
<script setup>
import MinimizeIcon from '@/components/Icons/MinimizeIcon.vue'
import MaximizeIcon from '@/components/Icons/MaximizeIcon.vue'
import { ref } from 'vue'
const show = defineModel()
const minimize = ref(false)
</script>