diff --git a/packages/Webkul/Admin/src/Resources/assets/js/app.js b/packages/Webkul/Admin/src/Resources/assets/js/app.js index 845a49ee1..88e55633f 100644 --- a/packages/Webkul/Admin/src/Resources/assets/js/app.js +++ b/packages/Webkul/Admin/src/Resources/assets/js/app.js @@ -52,10 +52,10 @@ window.app = createApp({ } const parentElement = event.currentTarget.parentElement; - + if (parentElement.classList.contains('sidebar-collapsed')) { parentElement.classList.remove('sidebar-collapsed'); - + parentElement.classList.add('sidebar-not-collapsed'); } @@ -67,7 +67,7 @@ window.app = createApp({ } const parentElement = event.currentTarget.parentElement; - + if (parentElement.classList.contains('sidebar-not-collapsed')) { parentElement.classList.remove('sidebar-not-collapsed'); @@ -79,7 +79,7 @@ window.app = createApp({ const sidebar = this.$refs.sidebar; if ( - sidebar && + sidebar && !sidebar.contains(event.target) ) { this.isMenuActive = false; @@ -107,6 +107,7 @@ import VeeValidate from "./plugins/vee-validate"; import CreateElement from "./plugins/createElement"; import Draggable from "./plugins/draggable"; import VueCal from "./plugins/vue-cal"; + [ Admin, Axios, @@ -123,9 +124,11 @@ import VueCal from "./plugins/vue-cal"; */ import Debounce from "./directives/debounce"; import DOMPurify from "./directives/dompurify"; +import ToolTip from "./directives/tooltip"; app.directive("debounce", Debounce); app.directive("safe-html", DOMPurify); +app.directive("tooltip", ToolTip); export default app; diff --git a/packages/Webkul/Admin/src/Resources/assets/js/directives/tooltip.js b/packages/Webkul/Admin/src/Resources/assets/js/directives/tooltip.js new file mode 100644 index 000000000..e6bf232ba --- /dev/null +++ b/packages/Webkul/Admin/src/Resources/assets/js/directives/tooltip.js @@ -0,0 +1,143 @@ +export default { + mounted(el, binding) { + initTooltip(el, binding); + }, + updated(el, binding) { + initTooltip(el, binding); + } +}; + +const initTooltip = (el, binding) => { + const defaultOptions = { + placement: 'top', + trigger: 'hover', + html: false, + content: '', + delay: { show: 200, hide: 100 } + }; + + const options = { + ...defaultOptions, + ...(typeof binding.value === 'object' ? binding.value : { content: binding.value }) + }; + + let tooltip = document.getElementById(`tooltip-${el.tooltipId}`); + + if (! tooltip) { + el.tooltipId = Math.random().toString(36).substring(2, 9); + tooltip = document.createElement('div'); + tooltip.id = `tooltip-${el.tooltipId}`; + tooltip.className = 'max-w-[250px] break-words rounded-lg bg-gray-800 px-4 py-3 text-sm leading-snug text-white shadow-lg transition-opacity transition-transform duration-200'; + tooltip.style.display = 'none'; + tooltip.style.position = 'absolute'; + tooltip.style.zIndex = '10000'; + + const inner = document.createElement('div'); + inner.className = 'tooltip-inner'; + + const arrow = document.createElement('div'); + arrow.className = 'absolute h-0 w-0 border-solid'; + + tooltip.appendChild(inner); + tooltip.appendChild(arrow); + document.body.appendChild(tooltip); + + if (options.html) { + inner.innerHTML = options.content; + } else { + inner.textContent = options.content; + } + + el._tooltip = tooltip; + + const showTooltip = () => { + tooltip.style.display = 'block'; + + const rect = el.getBoundingClientRect(); + const tooltipRect = tooltip.getBoundingClientRect(); + + let top, left; + + switch (options.placement) { + case 'top': + top = rect.top - tooltipRect.height - 10; + left = rect.left + (rect.width / 2) - (tooltipRect.width / 2); + arrow.style.top = 'auto'; + arrow.style.bottom = '-5px'; + arrow.style.left = '50%'; + arrow.style.transform = 'translateX(-50%)'; + break; + case 'bottom': + top = rect.bottom + 10; + left = rect.left + (rect.width / 2) - (tooltipRect.width / 2); + arrow.style.bottom = 'auto'; + arrow.style.top = '-5px'; + arrow.style.left = '50%'; + arrow.style.transform = 'translateX(-50%) rotate(180deg)'; + break; + case 'left': + top = rect.top + (rect.height / 2) - (tooltipRect.height / 2); + left = rect.left - tooltipRect.width - 10; + arrow.style.top = '50%'; + arrow.style.left = 'auto'; + arrow.style.right = '-5px'; + arrow.style.transform = 'translateY(-50%) rotate(-90deg)'; + break; + case 'right': + top = rect.top + (rect.height / 2) - (tooltipRect.height / 2); + left = rect.right + 10; + arrow.style.top = '50%'; + arrow.style.right = 'auto'; + arrow.style.left = '-5px'; + arrow.style.transform = 'translateY(-50%) rotate(90deg)'; + break; + } + + if (top < 0) { + top = 0; + } + + if (left < 0) { + left = 0; + } + + if (left + tooltipRect.width > window.innerWidth) { + left = window.innerWidth - tooltipRect.width; + } + + tooltip.style.top = `${top + window.scrollY}px`; + tooltip.style.left = `${left + window.scrollX}px`; + }; + + const hideTooltip = () => { + tooltip.style.display = 'none'; + }; + + if (options.trigger === 'hover') { + el.addEventListener('mouseenter', () => { + el._showTimeout = setTimeout(showTooltip, options.delay.show); + }); + + el.addEventListener('mouseleave', () => { + clearTimeout(el._showTimeout); + el._hideTimeout = setTimeout(hideTooltip, options.delay.hide); + }); + } else if (options.trigger === 'click') { + el.addEventListener('click', showTooltip); + + document.addEventListener('click', (e) => { + if (e.target !== el && !el.contains(e.target)) { + hideTooltip(); + } + }); + } + } else { + const inner = tooltip.querySelector('.tooltip-inner'); + + if (options.html) { + inner.innerHTML = options.content; + } else { + inner.textContent = options.content; + } + } +} diff --git a/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php b/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php index a79acff55..be4603781 100644 --- a/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php +++ b/packages/Webkul/Admin/src/Resources/views/activities/edit.blade.php @@ -146,57 +146,8 @@ class="w-full px-1 py-1 dark:bg-gray-900 dark:text-gray-300" type="text" placeholder="@lang('admin::app.common.start-typing')" /> - - - - - - - - @lang('admin::app.activities.edit.participants') - - - - -
-
    -
  • - -
    • -
- - -
- - - - - - - @lang('admin::app.activities.edit.lead') - - - - - - - - - + + {!! view_render_event('admin.activities.edit.form_controls.after') !!} diff --git a/packages/Webkul/Admin/src/Resources/views/activities/index.blade.php b/packages/Webkul/Admin/src/Resources/views/activities/index.blade.php index bb370e2e6..fc08e77e0 100644 --- a/packages/Webkul/Admin/src/Resources/views/activities/index.blade.php +++ b/packages/Webkul/Admin/src/Resources/views/activities/index.blade.php @@ -11,7 +11,7 @@
- +
@lang('admin::app.activities.index.title')
@@ -19,7 +19,7 @@
- +
@@ -37,7 +37,7 @@ {!! view_render_event('admin.activities.index.activities.after') !!} @pushOnce('scripts') -