vendor/uvdesk/core-framework/Resources/views/Templates/header.html.twig line 1

Open in your IDE?
  1. <!-- Navbar -->
  2. <head>
  3.  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  4.   
  5. </head>
  6. <style>
  7.     #darkModeButton {
  8.       background-color: #333;
  9.       color: #fff;
  10.       padding: 10px 20px;
  11.       border: none;
  12.       border-radius: 4px;
  13.       cursor: pointer;
  14.     }
  16.     #darkModeButton:hover {
  17.       background-color: #555;
  18.     }
  19.     .uv-navbar .uv-notification-list li {
  20.         cursor: default;
  21.         font-size: 15px !important;
  22.     }
  23.     .uv-navbar .uv-notification-list li * {
  24.         display: inline-block !important;
  25.     }
  26.     .uv-navbar .uv-notification-list li a {
  27.          color: #2750C4 !important;
  28.     }
  29.     .uv-navbar .uv-notification-list ul {
  30.         max-height: 320px !important;
  31.     }
  32.     .uv-navbar .uv-notification-list .timeago {
  33.         color: #9E9E9E;
  34.         margin-top: 5px;
  35.         font-size: 13px;
  36.     }
  37.     .uv-navbar .uv-dropdown-container.load-more {
  38.         border-top: solid 1px #D3D3D3;
  39.         text-align: center;
  40.     }
  41.     .uv-navbar .uv-dropdown-container.load-more a {
  42.         color: #333;
  43.         text-transform: capitalize;
  44.         font-size: 15px;
  45.         font-weight: 500;
  46.     }
  47.     .uv-navbar .uv-icon-load-more {
  48.         margin-right: 5px;
  49.     }
  50.     .uv-plan-list-item .uv-text-light-color {
  51.         color: #9E9E9E;
  52.     }
  53.     .uv-plan-list-item .uv-plan-badge {
  54.         color: #FFFFFF;
  55.         font-size: 12px;
  56.         padding: 1px 5px;
  57.         border-radius: 3px;
  58.         margin-left: 5px;
  59.         display: inline-block;
  60.         text-transform: uppercase;
  61.     }
  62.     .uv-plan-list-item .uv-plan-badge-color-free {
  63.         background: #4486ee;
  64.     }
  65.     .uv-plan-list-item .uv-plan-badge-color-pro {
  66.         background: #f5d02a;
  67.     }
  68.     .uv-plan-list-item .uv-plan-badge-color-enterprise {
  69.         background: #fd9a9a;
  70.     }
  71.     .uv-plan-list-item .uv-plan-badge-color-customized {
  72.         background: #b77af5;
  73.     }
  74.     .uv-onboard-navigator {
  75.         cursor: pointer;
  76.     }
  77.     .uv-margin-icon-srch {
  78.         margin: 5px 0px 0px 5px;
  79.     }
  81.     .uv-mob-aside{
  82.         position: fixed;
  83.         z-index: 999;
  84.         top: 105px;
  85.         left: 288px;
  86.         transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  87.     }
  89.     .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  90.         left: 320px;
  91.     }
  92.     .uv-mob-aside.uv-mob-aside-collapsed{
  93.         left: 286px;
  94.     }
  95.     .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside.uv-mob-aside-collapsed{
  96.         left: 45px;
  97.     }
  98.     .uv-view.uv-aside-view{
  99.         padding: 25px 0px 25px 25px;
  100.     }
  101.     .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  102.         left: 20px;
  103.     }
  104.     .uv-mob-aside .uv-icon-aside-menu,.uv-mob-aside .uv-icon-aside-menu:hover {
  105.         background-position: 1px -497px;
  106.     }
  107.     .uv-mob-aside-collapsed .uv-icon-aside-menu, .uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
  108.         background-position: 5px -497px;
  109.     }
  110.     .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu,.uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu:hover {
  111.         -ms-transform: rotate(180deg);
  112.         -webkit-transform: rotate(180deg);
  113.         transform: rotate(180deg);
  114.     }
  115.     .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu:hover,.uv-rtl .uv-mob-aside.uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
  116.         box-shadow: 0px -8px 15px 3px rgba(0, 0, 0, 0.15), 0px -2px 3px 0px rgba(0, 0, 0, 0.2);
  117.     }
  118.     .uv-rtl .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu,.uv-rtl .uv-mob-aside:not(.uv-mob-aside-collapsed) .uv-icon-aside-menu:hover {
  119.         -ms-transform: unset;
  120.         -webkit-transform: unset;
  121.         transform: unset;
  122.     }
  123.     .uv-rtl .uv-mob-aside.uv-mob-aside-collapsed .uv-icon-aside-menu,.uv-rtl .uv-mob-aside.uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
  124.         -ms-transform: rotate(180deg)!important;
  125.         -webkit-transform: rotate(180deg)!important;
  126.         transform: rotate(180deg)!important;
  127.     }
  128.     .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  129.         right: 320px;
  130.         left: unset;
  131.     }
  132.     .uv-rtl .uv-mob-aside.uv-mob-aside-collapsed{
  133.         right: 286px;
  134.     }
  135.     .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside.uv-mob-aside-collapsed{
  136.         right: 45px;
  137.     }
  138.     .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  139.         right: 20px;
  140.     }
  141.     .uv-rtl .uv-sidebar:not(.uv-sidebar-active) ~ .uv-paper .uv-mob-aside:not(.uv-mob-aside-collapsed) {
  142.         right: 560px
  143.     }
  144.     .uv-rtl .uv-mob-aside{
  145.         left: unset;
  146.     }
  147.     .uv-menubar.uv-language .uv-dropdown-list {
  148.         z-index: 19999;
  149.     }
  151.     .user-name {
  152.         font-weight: 800;
  153.         margin-top: 2px;
  154.         font-size: medium;
  155.     }
  157.     @media screen and (min-width: 901px) and (max-width: 1400px) {
  158.         .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  159.             left: 290px;
  160.         }
  161.         .uv-mob-aside.uv-mob-aside-collapsed{
  162.             left: 40px;
  163.         }
  164.         .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  165.             right: 290px;
  166.         }
  167.         .uv-rtl  .uv-mob-aside.uv-mob-aside-collapsed{
  168.             right: 52px;
  169.         }
  170.     }
  171.     @media screen and (max-width: 1024px) {
  172.         .uv-mob-aside{
  173.             top: 48px;
  174.             left: 80px!important;
  175.         }
  176.         .uv-mob-aside-collapsed .uv-icon-aside-menu, .uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
  177.             background-position: 1px -497px;
  178.         }
  179.         .uv-sidebar ul.uv-menubar li a {
  180.             max-width: 60px !important;
  181.         }
  182.         .uv-sidebar .uv-soft-top .uv-company-logo {
  183.             width: unset;
  184.         }
  185.         #google_translate_element .goog-te-gadget-simple {
  186.             width: 26px;
  187.             overflow: hidden;
  188.             font-size: 0px;
  189.             padding: 3px 2px 2px 2px;
  190.         }
  191.     }
  192.     @media screen and (max-width: 400px) {
  193.         #google_translate_element {
  194.             display: none;
  195.         }
  196.     }
  197.     .uv-rtl .uv-mob-aside{
  198.         right: 320px;
  199.     }
  200.     .uv-pop-up-body .uv-mob-aside {
  201.         display: none;
  202.         transition: none;
  203.     }
  204.     .uv-rtl .uv-view.uv-aside-view{
  205.         padding: 25px 25px 25px 0px;
  206.     }
  207.     .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  208.         left: 0px;
  209.         right: 20px;
  210.     }
  211.     .uv-filter-view .uv-filter-head .uv-filter-toggle span{
  212.         background-position: -21px -245px;
  213.     }
  214.     .uv-view.uv-aside-view{
  215.         padding: 25px 0px 25px 25px;
  216.     }
  217.     .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  218.         left: 20px;
  219.     }
  220.     .uv-rtl .uv-view.uv-aside-view{
  221.         padding: 25px 25px 25px 0px;
  222.     }
  223.     .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  224.         left: 0px;
  225.         right: 20px;
  226.     }
  227.     .uv-filter-view .uv-filter-head .uv-filter-toggle span{
  228.         background-position: -21px -245px;
  229.     }
  232.     .uv-inner-section .uv-view.uv-aside-view .uv-ticket-fixed-region{
  233.         left: 20px;
  234.     }
  236.     .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-fixed-region {
  237.         left: 0px;
  238.         right: 20px;
  239.     }
  241.     div.mce-edit-area {
  242.         margin-right: 1px!important;
  243.     }
  245.     .uv-whats-newlist li img {
  246.         width: 40px;
  247.     }
  248.     .uv-got-whats-new {
  249.         background-color: #7C70F4;
  250.         border-radius: 50%;
  251.         padding: 4px;
  252.         border: 2px solid white;
  253.         position: absolute;
  254.         top: -3px;
  255.         right: -3px;
  256.     }
  257.     .uv-feature-title {
  258.         vertical-align: top;
  259.         font-size: 18px;
  260.         margin: 5px 0 0 5px;
  261.         word-wrap: break-word;
  262.         display: inline-block;
  263.     }
  264.     .uv-feature-content {
  265.         margin: 2px 0 0 0;
  266.     }
  267.     .uv-dropdown-list ul .uv-feature-link, .uv-dropdown-list ul .uv-feature-link:link, .uv-dropdown-list ul .uv-feature-link:active, .uv-dropdown-list ul .uv-feature-link:visited, .uv-dropdown-list ul .uv-feature-link:focus {
  268.         color: #2750C4;
  269.         font-size: 15px;
  270.         margin-top: 10px;
  271.     }
  272.     .uv-dropdown-list ul.uv-search-list li.uv-whats-li {
  273.         border-top: none;
  274.         padding-top: 5px;
  275.     }
  276.     .uv-whats-newlist + .uv-notification-list {
  277.         margin-left: 15px;
  278.     }
  279.     .uv-search-result-wrapper a:focus > .uv-search-result-row {
  280.         background-color: #f0f0f0;
  281.     }
  282.     .uv-loader-view ~ .uv-notifications-wrapper {
  283.         z-index: 9999;
  284.     }
  285.     .mce-notification-error {
  286.         display: none;
  287.     }
  288.     ul.uv-flag-notice-list {
  289.         color: #333333;
  290.         border-top: solid 1px #D3D3D3;
  291.         border-bottom: solid 1px #D3D3D3;
  292.         padding: 15px 20px;
  293.         background: #FAFAFA;
  294.     }
  295.     .uv-dropdown-list ul.uv-search-list.flags-active li:first-child {
  296.         border-top: unset;
  297.     }
  299.     {# .uv-main-logo {
  300.         position: absolute;
  301.         padding: 10px 0 0px 30px;
  302.     } #}
  304.     .dropdown-divider {
  305.         border-top: 1px solid #e1e4e8;
  306.         display: block;
  307.         height: 0;
  308.         margin: 10px 0 10px -19px;
  309.         width: 195px;
  310.     }
  311. </style>
  313. <!-- Navigation -->
  314. <div class="uv-navbar">
  315.     <!-- Banner -->
  316.     <div class="uv-mob-aside {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-mob-aside-collapsed{% endif %}">
  317.         <span class="uv-icon-aside-menu"></span>
  318.     </div>
  320.     <!-- Search Box -->
  321.     {{ uvdesk_extensibles.getRegisteredComponent('Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\SearchTemplate').render() | raw }}
  323.     <div class="uv-actions">
  324.         <!-- Profile Navigations -->
  325.         <span style="position: relative" class="">
  326.           <button id="darkModeButton"><i class="fas fa-moon"></i> Modo Oscuro</button>
  328.             <div class="uv-profile uv-dropdown-other">
  329.                 {% if currentUserDetails is defined and currentUserDetails.thumbnail is defined and currentUserDetails.thumbnail is not empty %}
  330.                     <img class='uv-avatar' src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ currentUserDetails.thumbnail }}"/>
  331.                 {% else %}
  332.                     <img class='uv-avatar' src="{{ asset('bundles/uvdeskcoreframework/images/uv-avatar-batman.png') }}"/>
  333.                 {% endif %}
  334.             </div>
  336.             <div class="uv-dropdown-list uv-bottom-right uv-text-left">
  337.                 <div class="uv-dropdown-container">
  339.                     <label>Signed in as </label>
  340.                         <p class="user-name">{{ currentUser.firstName }} {{ currentUser.lastName }}</p>
  341.                     <div role="none" class="dropdown-divider"></div>
  343.                     <ul>
  344.                         <li><a href="{{ path('edit_profile') }}" class='profiler'>Your Profile</a></li>
  345.                     </ul>
  347.                     <ul>
  348.                         {% if user_service.isAccessAuthorized('ROLE_AGENT_CREATE_TICKET') %}
  349.                             <li data-action="create" class="uv-open-popup" data-target="create-ticket-modal">Create Ticket</li>
  350.                         {% endif %}
  351.                         {% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_AGENT') %}
  352.                             <li><a href="{{ path('helpdesk_member_create_account') }}">Create Agent</a></li>
  353.                         {% endif %}
  354.             
  355.                         
  356.                         
  358.                         <div role="none" class="dropdown-divider"></div>
  359.                         <li><a class="uv-text-danger" href="{{ path('helpdesk_member_handle_logout') }}">Sign Out</a></li>
  360.                     </ul>
  361.                 </div>
  362.             </div>
  363.         </span>
  364.     </div>
  365. </div>
  367. <script type="text/template" id="notification_flags_temp">
  368.     <% if (typeof undeliveredMessages != 'undefined') { %>
  369.         <li>
  370.             <span class="uv-notification-message">
  371.                 <%= undeliveredMessages %>
  372.             </span>
  373.         </li>
  374.         <span class="timeago">{{ 'Learn more about %deliveryStatus%.'|trans({'%deliveryStatus%': '<a href="https://support.uvdesk.com/en/blog/uvdesk-ticket-delivery-status" target="_blank">' ~ 'ticket delivery status'|trans ~ '</a>'})|raw }}</span>
  375.     <% } %>
  376. </script>
  378. <script type="text/javascript">
  379.     $(function () {
  380.         var FeatureSearch = Backbone.View.extend({
  381.             el: $('.uv-search-wrapper'),
  382.             events: {
  383.                 'keyup .uv-search-bar': 'searchFeature',
  384.                 'click .uv-search-bar': 'openFeatureSearch',
  385.             },
  386.             searchFeature: function(e) {
  387.                 var currentElement = Backbone.$(e.currentTarget);
  388.                 if(currentElement.val().trim() != '') {
  389.                     var flag = 0;
  390.                     $('.uv-search-wrapper').find('.uv-search-result-row').each(function() {
  391.                         if(!$(this).hasClass('uv-no-results')) {
  392.                             var text = $(this).text().trim().toLowerCase();
  393.                             var isTextContained = text.search(currentElement.val().trim().toLowerCase());
  394.                             if(isTextContained < 0) {
  395.                                 $(this).parent().hide();
  396.                                 $(this).parent().attr('tabIndex', -1);
  397.                             } else {
  398.                                 $(this).parent().show();
  399.                                 $(this).parent().removeAttr('tabIndex');
  400.                                 flag = 1;
  401.                             }
  402.                         }
  403.                     });
  404.                     if(flag == 0)
  405.                         $('.uv-search-wrapper').find(".uv-no-results").show();
  406.                     else
  407.                         $('.uv-search-wrapper').find(".uv-no-results").hide();
  409.                     this.$el.find('.uv-search-result-wrapper').addClass('uv-search-result-active').addClass('uv-search-flap-up')
  410.                 } else {
  411.                     this.$el.find('.uv-search-result-wrapper').removeClass('uv-search-result-active').removeClass('uv-search-flap-up')
  412.                 }
  413.             },
  414.             openFeatureSearch: function(e) {
  415.                 var currentElement = Backbone.$(e.currentTarget);
  416.                 if(currentElement.val().trim() != '') {
  417.                     this.$el.find('.uv-search-result-wrapper').addClass('uv-search-result-active').addClass('uv-search-flap-up')
  418.                 }
  419.             }
  420.         });
  422.         var SidePanelUV = Backbone.View.extend({
  423.             el: $('.uv-paper'),
  424.             events: {
  425.                 'click .uv-mob-aside span': 'toggleAsideBar'
  426.             },
  427.             initialize : function() {
  428.                 var ele = $('.uv-paper');
  429.                 if(ele.css('padding-left') == '60px'){
  430.                     $('.uv-mob-aside').removeClass('uv-mob-aside-left');
  431.                 }else{
  432.                     $('.uv-mob-aside').addClass('uv-mob-aside-left');
  433.                 }
  435.                 var asideView = '{{ app.request.cookies.get("uv-asideView") }}';
  436.                 if(asideView == 'true')
  437.                     this.toggleAsideBar();
  438.             },
  439.             toggleAsideBar: function(){
  440.                 var asideView = true;
  441.                 var ele = $('.uv-inner-section .uv-aside');
  442.                 var eleSidePanel = $('.uv-inner-section .uv-view');
  443.                 var eleTicketView = $('.uv-inner-section .uv-view .uv-ticket-scroll-region');
  444.                 var mobAside = $('.uv-mob-aside');
  445.                 if(ele.css('display') == 'none'){
  446.                     asideView = false;
  447.                     ele.css('display', 'block');
  448.                     eleSidePanel.removeClass('uv-aside-view');
  449.                     eleTicketView.removeClass('uv-aside-view-tv');
  450.                     mobAside.removeClass('uv-mob-aside-collapsed')
  451.                 }else{
  452.                     ele.css('display', 'none');
  453.                     eleSidePanel.addClass('uv-aside-view');
  454.                     eleTicketView.addClass('uv-aside-view-tv');
  455.                     mobAside.addClass('uv-mob-aside-collapsed')
  456.                 }
  457.                 if(asideView) {
  458.                     document.cookie = ("uv-asideView=1; expires=Wed, 01 Jan 2020 00:00:00 GMT;path=/");
  459.                 } else {
  460.                     document.cookie = ("uv-asideView=0; expires=Wed, 01 Jan 2020 00:00:00 GMT;path=/");
  461.                 }
  462.             }
  463.         });
  465.         var featureSearch =  new FeatureSearch();
  466.         var sidePanelUV =  new SidePanelUV();
  467.         
  468.         
  470.     });
  471.     
  472.      // Obtener el botón de modo oscuro
  473. const darkModeButton = document.getElementById('darkModeButton');
  475. // Agregar un evento de clic al botón
  476. darkModeButton.addEventListener('click', function() {
  477.   // Obtener el estado actual del modo oscuro del localStorage
  478.   const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
  480.   // Actualizar el estado del modo oscuro
  481.   const newDarkModeState = !darkModeEnabled;
  482.   localStorage.setItem('darkMode', newDarkModeState);
  484.   // Aplicar los estilos según el estado del modo oscuro
  485.   applyDarkModeStyles(newDarkModeState);
  486.   location.reload()
  487. });
  489. // Función para aplicar los estilos del modo oscuro a todos los elementos del HTML
  490. function applyDarkModeStyles(darkModeEnabled) {
  491.   const elements = document.getElementsByTagName('*');
  493.   for (let i = 0; i < elements.length; i++) {
  494.     const element = elements[i];
  495.     if (element.tagName !== 'SCRIPT' && element.tagName !== 'STYLE') {
  496.       if (!darkModeEnabled) {
  497.         // Restaurar los estilos originales
  498.         const originalBackgroundColor = element.dataset.originalBackgroundColor;
  499.         const originalColor = element.dataset.originalColor;
  500.         element.style.backgroundColor = originalBackgroundColor;
  501.         element.style.color = originalColor;
  502.         element.classList.remove('dark-mode');
  503.       } else {
  504.         // Guardar los estilos actuales si no se han guardado previamente
  505.         if (!element.dataset.originalBackgroundColor) {
  506.           element.dataset.originalBackgroundColor = getComputedStyle(element).backgroundColor;
  507.         }
  508.         if (!element.dataset.originalColor) {
  509.           element.dataset.originalColor = getComputedStyle(element).color;
  510.         }
  512.         // Aplicar los estilos del modo oscuro
  513.         element.style.backgroundColor = '#333333';
  514.         element.style.color = '#FFFAF0';
  515.         element.classList.add('dark-mode');
  516.       }
  517.     }
  518.   }
  519. }
  521. // Verificar y aplicar los estilos al cargar la página
  522. document.addEventListener('DOMContentLoaded', function() {
  523.   const darkModeEnabled = localStorage.getItem('darkMode') === 'true';
  525.   // Si el modo oscuro está habilitado, pero no se han guardado los estilos originales,
  526.   // se deben aplicar los estilos del modo oscuro por primera vez y guardar los estilos originales
  527.   if (darkModeEnabled) {
  528.     applyDarkModeStyles(true);
  529.   } else {
  530.     applyDarkModeStyles(false);
  531.   }
  532. });
  535. </script>
  537. {# Ticket Create Popup #}
  538. {% if user_service.isAccessAuthorized('ROLE_AGENT_CREATE_TICKET') %}
  539.     {{ ticket_service.appendTwigSnippet('createMemberTicket')|raw }}
  540.     {# {% include('UVDeskCoreFrameworkBundle:Snippets:createMemberTicketSnippet.html.twig') only %} #}
  541. {% endif %}