mirror of
				https://github.com/lingble/chatwoot.git
				synced 2025-10-31 19:17:48 +00:00 
			
		
		
		
	feat: UI to show the SLA threshold in chat screen (#9146)
- UI will show the breach in the conversation list. - UI will show the breach in the conversation header. Fixes: https://linear.app/chatwoot/issue/CW-3146/update-the-ui-to-show-the-breach-in-the-conversation-list Fixes: https://linear.app/chatwoot/issue/CW-3144/ui-update-to-show-the-breachgoing-to-breach
This commit is contained in:
		| @@ -1,14 +1,14 @@ | ||||
| <template> | ||||
|   <div | ||||
|     class="conversations-list-wrap flex-basis-clamp flex-shrink-0 overflow-hidden flex flex-col border-r rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50" | ||||
|     :class="{ | ||||
|       hide: !showConversationList, | ||||
|       'list--full-width': isOnExpandedLayout, | ||||
|     }" | ||||
|     class="flex flex-col flex-shrink-0 overflow-hidden border-r conversations-list-wrap rtl:border-r-0 rtl:border-l border-slate-50 dark:border-slate-800/50" | ||||
|     :class="[ | ||||
|       { hidden: !showConversationList }, | ||||
|       isOnExpandedLayout ? 'basis-full' : 'flex-basis-clamp', | ||||
|     ]" | ||||
|   > | ||||
|     <slot /> | ||||
|     <div | ||||
|       class="flex items-center justify-between py-0 px-4" | ||||
|       class="flex items-center justify-between px-4 py-0" | ||||
|       :class="{ | ||||
|         'pb-3 border-b border-slate-75 dark:border-slate-700': | ||||
|           hasAppliedFiltersOrActiveFolders, | ||||
| @@ -16,7 +16,7 @@ | ||||
|     > | ||||
|       <div class="flex max-w-[85%] justify-center items-center"> | ||||
|         <h1 | ||||
|           class="text-xl break-words overflow-hidden whitespace-nowrap font-medium text-ellipsis text-black-900 dark:text-slate-100 mb-0" | ||||
|           class="text-xl font-medium break-words truncate text-black-900 dark:text-slate-100" | ||||
|           :title="pageTitle" | ||||
|         > | ||||
|           {{ pageTitle }} | ||||
| @@ -107,7 +107,7 @@ | ||||
|  | ||||
|     <p | ||||
|       v-if="!chatListLoading && !conversationList.length" | ||||
|       class="overflow-auto p-4 flex justify-center items-center" | ||||
|       class="flex items-center justify-center p-4 overflow-auto" | ||||
|     > | ||||
|       {{ $t('CHAT_LIST.LIST.404') }} | ||||
|     </p> | ||||
| @@ -127,7 +127,7 @@ | ||||
|     /> | ||||
|     <div | ||||
|       ref="conversationList" | ||||
|       class="conversations-list flex-1" | ||||
|       class="flex-1 conversations-list" | ||||
|       :class="{ 'overflow-hidden': isContextMenuOpen }" | ||||
|     > | ||||
|       <virtual-list | ||||
| @@ -136,16 +136,16 @@ | ||||
|         :data-sources="conversationList" | ||||
|         :data-component="itemComponent" | ||||
|         :extra-props="virtualListExtraProps" | ||||
|         class="w-full overflow-auto h-full" | ||||
|         class="w-full h-full overflow-auto" | ||||
|         footer-tag="div" | ||||
|       > | ||||
|         <template #footer> | ||||
|           <div v-if="chatListLoading" class="text-center"> | ||||
|             <span class="spinner mt-4 mb-4" /> | ||||
|             <span class="mt-4 mb-4 spinner" /> | ||||
|           </div> | ||||
|           <p | ||||
|             v-if="showEndOfListMessage" | ||||
|             class="text-center text-slate-400 dark:text-slate-300 p-4" | ||||
|             class="p-4 text-center text-slate-400 dark:text-slate-300" | ||||
|           > | ||||
|             {{ $t('CHAT_LIST.EOF') }} | ||||
|           </p> | ||||
| @@ -1034,24 +1034,10 @@ export default { | ||||
| </style> | ||||
|  | ||||
| <style scoped lang="scss"> | ||||
| .conversations-list-wrap { | ||||
|   &.hide { | ||||
|     @apply hidden; | ||||
|   } | ||||
|  | ||||
|   &.list--full-width { | ||||
|     @apply basis-full; | ||||
|   } | ||||
| } | ||||
|  | ||||
| .conversations-list { | ||||
|   @apply overflow-hidden hover:overflow-y-auto; | ||||
| } | ||||
|  | ||||
| .load-more--button { | ||||
|   @apply text-center rounded-none; | ||||
| } | ||||
|  | ||||
| .tab--chat-type { | ||||
|   @apply py-0 px-4; | ||||
|  | ||||
|   | ||||
		Reference in New Issue
	
	Block a user
	 Sivin Varghese
					Sivin Varghese