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

fix: truncate sidebar item label & transalation refactor

Browse Source
This commit is contained in:
Shariq Ansari 2024-04-29 23:04:23 +05:30
parent ea92af6244
commit 31d535d7c9
2 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
<div class="mb-3 flex flex-col"> <div class="mb-3 flex flex-col">
<SidebarLink <SidebarLink
id="notifications-btn" id="notifications-btn"
:label="__('Notifications')" label="Notifications"
:icon="NotificationsIcon" :icon="NotificationsIcon"
:isCollapsed="isSidebarCollapsed" :isCollapsed="isSidebarCollapsed"
@click="() => toggleNotificationPanel()" @click="() => toggleNotificationPanel()"
@ -67,7 +67,7 @@
<SidebarLink <SidebarLink
v-for="link in view.views" v-for="link in view.views"
:icon="link.icon" :icon="link.icon"
:label="__(link.label)" :label="link.label"
:to="link.to" :to="link.to"
:isCollapsed="isSidebarCollapsed" :isCollapsed="isSidebarCollapsed"
class="mx-2 my-0.5" class="mx-2 my-0.5"
@ -78,13 +78,13 @@
</div> </div>
<div class="m-2 flex flex-col gap-1"> <div class="m-2 flex flex-col gap-1">
<SidebarLink <SidebarLink
:label="__('Docs')" label="Docs"
:isCollapsed="isSidebarCollapsed" :isCollapsed="isSidebarCollapsed"
icon="book-open" icon="book-open"
@click="() => openDocs()" @click="() => openDocs()"
/> />
<SidebarLink <SidebarLink
:label="isSidebarCollapsed ? __('Expand') : __('Collapse')" :label="isSidebarCollapsed ? 'Expand' : 'Collapse'"
:isCollapsed="isSidebarCollapsed" :isCollapsed="isSidebarCollapsed"
@click="isSidebarCollapsed = !isSidebarCollapsed" @click="isSidebarCollapsed = !isSidebarCollapsed"
class="" class=""

26
frontend/src/components/SidebarLink.vue
View File

@ -8,8 +8,8 @@
class="flex w-full items-center justify-between duration-300 ease-in-out" class="flex w-full items-center justify-between duration-300 ease-in-out"
:class="isCollapsed ? 'ml-[3px] p-1' : 'px-2 py-1'" :class="isCollapsed ? 'ml-[3px] p-1' : 'px-2 py-1'"
> >
<div class="flex items-center"> <div class="flex items-center truncate">
<Tooltip :text="label" placement="right" :disabled="!isCollapsed"> <Tooltip :text="__(label)" placement="right" :disabled="!isCollapsed">
<slot name="icon"> <slot name="icon">
<span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center"> <span class="grid h-4.5 w-4.5 flex-shrink-0 place-items-center">
<FeatherIcon <FeatherIcon
@ -21,16 +21,18 @@
</span> </span>
</slot> </slot>
</Tooltip> </Tooltip>
<span <Tooltip :text="__(label)" placement="right" :disabled="isCollapsed" hoverDelay="1.5">
class="flex-1 flex-shrink-0 text-base duration-300 ease-in-out" <span
:class=" class="flex-1 flex-shrink-0 truncate text-base duration-300 ease-in-out"
isCollapsed :class="
? 'ml-0 w-0 overflow-hidden opacity-0' isCollapsed
: 'ml-2 w-auto opacity-100' ? 'ml-0 w-0 overflow-hidden opacity-0'
" : 'ml-2 w-auto opacity-100'
> "
{{ label }} >
</span> {{ __(label) }}
</span>
</Tooltip>
</div> </div>
<slot name="right" /> <slot name="right" />
</div> </div>