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

Open in your IDE?
  1. <!-- Navbar -->
  2. <style>
  3.     .uv-navbar .uv-notification-list li {
  4.         cursor: default;
  5.         font-size: 15px !important;
  6.     }
  7.     .uv-navbar .uv-notification-list li * {
  8.         display: inline-block !important;
  9.     }
  10.     .uv-navbar .uv-notification-list li a {
  11.          color: #2750C4 !important;
  12.     }
  13.     .uv-navbar .uv-notification-list ul {
  14.         max-height: 320px !important;
  15.     }
  16.     .uv-navbar .uv-notification-list .timeago {
  17.         color: #9E9E9E;
  18.         margin-top: 5px;
  19.         font-size: 13px;
  20.     }
  21.     .uv-navbar .uv-dropdown-container.load-more {
  22.         border-top: solid 1px #D3D3D3;
  23.         text-align: center;
  24.     }
  25.     .uv-navbar .uv-dropdown-container.load-more a {
  26.         color: #333;
  27.         text-transform: capitalize;
  28.         font-size: 15px;
  29.         font-weight: 500;
  30.     }
  31.     .uv-navbar .uv-icon-load-more {
  32.         margin-right: 5px;
  33.     }
  34.     .uv-plan-list-item .uv-text-light-color {
  35.         color: #9E9E9E;
  36.     }
  37.     .uv-plan-list-item .uv-plan-badge {
  38.         color: #FFFFFF;
  39.         font-size: 12px;
  40.         padding: 1px 5px;
  41.         border-radius: 3px;
  42.         margin-left: 5px;
  43.         display: inline-block;
  44.         text-transform: uppercase;
  45.     }
  46.     .uv-plan-list-item .uv-plan-badge-color-free {
  47.         background: #4486ee;
  48.     }
  49.     .uv-plan-list-item .uv-plan-badge-color-pro {
  50.         background: #f5d02a;
  51.     }
  52.     .uv-plan-list-item .uv-plan-badge-color-enterprise {
  53.         background: #fd9a9a;
  54.     }
  55.     .uv-plan-list-item .uv-plan-badge-color-customized {
  56.         background: #b77af5;
  57.     }
  58.     .uv-onboard-navigator {
  59.         cursor: pointer;
  60.     }
  61.     .uv-margin-icon-srch {
  62.         margin: 5px 0px 0px 5px;
  63.     }
  65.     .uv-mob-aside{
  66.         position: fixed;
  67.         z-index: 999;
  68.         top: 105px;
  69.         left: 288px;
  70.         transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  71.     }
  73.     .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  74.         left: 320px;
  75.     }
  76.     .uv-mob-aside.uv-mob-aside-collapsed{
  77.         left: 286px;
  78.     }
  79.     .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside.uv-mob-aside-collapsed{
  80.         left: 45px;
  81.     }
  82.     .uv-view.uv-aside-view{
  83.         padding: 25px 0px 25px 25px;
  84.     }
  85.     .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  86.         left: 20px;
  87.     }
  88.     .uv-mob-aside .uv-icon-aside-menu,.uv-mob-aside .uv-icon-aside-menu:hover {
  89.         background-position: 1px -497px;
  90.     }
  91.     .uv-mob-aside-collapsed .uv-icon-aside-menu, .uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
  92.         background-position: 5px -497px;
  93.     }
  94.     .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 {
  95.         -ms-transform: rotate(180deg);
  96.         -webkit-transform: rotate(180deg);
  97.         transform: rotate(180deg);
  98.     }
  99.     .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 {
  100.         box-shadow: 0px -8px 15px 3px rgba(0, 0, 0, 0.15), 0px -2px 3px 0px rgba(0, 0, 0, 0.2);
  101.     }
  102.     .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 {
  103.         -ms-transform: unset;
  104.         -webkit-transform: unset;
  105.         transform: unset;
  106.     }
  107.     .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 {
  108.         -ms-transform: rotate(180deg)!important;
  109.         -webkit-transform: rotate(180deg)!important;
  110.         transform: rotate(180deg)!important;
  111.     }
  112.     .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  113.         right: 320px;
  114.         left: unset;
  115.     }
  116.     .uv-rtl .uv-mob-aside.uv-mob-aside-collapsed{
  117.         right: 286px;
  118.     }
  119.     .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside.uv-mob-aside-collapsed{
  120.         right: 45px;
  121.     }
  122.     .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  123.         right: 20px;
  124.     }
  125.     .uv-rtl .uv-sidebar:not(.uv-sidebar-active) ~ .uv-paper .uv-mob-aside:not(.uv-mob-aside-collapsed) {
  126.         right: 560px
  127.     }
  128.     .uv-rtl .uv-mob-aside{
  129.         left: unset;
  130.     }
  131.     .uv-menubar.uv-language .uv-dropdown-list {
  132.         z-index: 19999;
  133.     }
  135.     .user-name {
  136.         font-weight: 800;
  137.         margin-top: 2px;
  138.         font-size: medium;
  139.     }
  141.     @media screen and (min-width: 901px) and (max-width: 1400px) {
  142.         .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  143.             left: 290px;
  144.         }
  145.         .uv-mob-aside.uv-mob-aside-collapsed{
  146.             left: 40px;
  147.         }
  148.         .uv-rtl .uv-sidebar.uv-sidebar-active ~ .uv-paper .uv-mob-aside{
  149.             right: 290px;
  150.         }
  151.         .uv-rtl  .uv-mob-aside.uv-mob-aside-collapsed{
  152.             right: 52px;
  153.         }
  154.     }
  155.     @media screen and (max-width: 1024px) {
  156.         .uv-mob-aside{
  157.             top: 48px;
  158.             left: 80px!important;
  159.         }
  160.         .uv-mob-aside-collapsed .uv-icon-aside-menu, .uv-mob-aside-collapsed .uv-icon-aside-menu:hover {
  161.             background-position: 1px -497px;
  162.         }
  163.         .uv-sidebar ul.uv-menubar li a {
  164.             max-width: 60px !important;
  165.         }
  166.         .uv-sidebar .uv-soft-top .uv-company-logo {
  167.             width: unset;
  168.         }
  169.         #google_translate_element .goog-te-gadget-simple {
  170.             width: 26px;
  171.             overflow: hidden;
  172.             font-size: 0px;
  173.             padding: 3px 2px 2px 2px;
  174.         }
  175.     }
  176.     @media screen and (max-width: 400px) {
  177.         #google_translate_element {
  178.             display: none;
  179.         }
  180.     }
  181.     .uv-rtl .uv-mob-aside{
  182.         right: 320px;
  183.     }
  184.     .uv-pop-up-body .uv-mob-aside {
  185.         display: none;
  186.         transition: none;
  187.     }
  188.     .uv-rtl .uv-view.uv-aside-view{
  189.         padding: 25px 25px 25px 0px;
  190.     }
  191.     .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  192.         left: 0px;
  193.         right: 20px;
  194.     }
  195.     .uv-filter-view .uv-filter-head .uv-filter-toggle span{
  196.         background-position: -21px -245px;
  197.     }
  198.     .uv-view.uv-aside-view{
  199.         padding: 25px 0px 25px 25px;
  200.     }
  201.     .uv-inner-section .uv-view.uv-aside-view .uv-ticket-scroll-region.uv-aside-view-tv{
  202.         left: 20px;
  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.     }
  216.     .uv-inner-section .uv-view.uv-aside-view .uv-ticket-fixed-region{
  217.         left: 20px;
  218.     }
  220.     .uv-rtl .uv-inner-section .uv-view.uv-aside-view .uv-ticket-fixed-region {
  221.         left: 0px;
  222.         right: 20px;
  223.     }
  225.     div.mce-edit-area {
  226.         margin-right: 1px!important;
  227.     }
  229.     .uv-whats-newlist li img {
  230.         width: 40px;
  231.     }
  232.     .uv-got-whats-new {
  233.         background-color: #7C70F4;
  234.         border-radius: 50%;
  235.         padding: 4px;
  236.         border: 2px solid white;
  237.         position: absolute;
  238.         top: -3px;
  239.         right: -3px;
  240.     }
  241.     .uv-feature-title {
  242.         vertical-align: top;
  243.         font-size: 18px;
  244.         margin: 5px 0 0 5px;
  245.         word-wrap: break-word;
  246.         display: inline-block;
  247.     }
  248.     .uv-feature-content {
  249.         margin: 2px 0 0 0;
  250.     }
  251.     .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 {
  252.         color: #2750C4;
  253.         font-size: 15px;
  254.         margin-top: 10px;
  255.     }
  256.     .uv-dropdown-list ul.uv-search-list li.uv-whats-li {
  257.         border-top: none;
  258.         padding-top: 5px;
  259.     }
  260.     .uv-whats-newlist + .uv-notification-list {
  261.         margin-left: 15px;
  262.     }
  263.     .uv-search-result-wrapper a:focus > .uv-search-result-row {
  264.         background-color: #f0f0f0;
  265.     }
  266.     .uv-loader-view ~ .uv-notifications-wrapper {
  267.         z-index: 9999;
  268.     }
  269.     .mce-notification-error {
  270.         display: none;
  271.     }
  272.     ul.uv-flag-notice-list {
  273.         color: #333333;
  274.         border-top: solid 1px #D3D3D3;
  275.         border-bottom: solid 1px #D3D3D3;
  276.         padding: 15px 20px;
  277.         background: #FAFAFA;
  278.     }
  279.     .uv-dropdown-list ul.uv-search-list.flags-active li:first-child {
  280.         border-top: unset;
  281.     }
  283.     .dropdown-divider {
  284.         border-top: 1px solid #e1e4e8;
  285.         display: block;
  286.         height: 0;
  287.         margin: 10px 0 10px -19px;
  288.         width: 195px;
  289.     }
  290. </style>
  292. <!-- Navigation -->
  293. <div class="uv-navbar">
  294.     <!-- Banner -->
  295.     <div class="uv-mob-aside {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-mob-aside-collapsed{% endif %}">
  296.         <span class="uv-icon-aside-menu"></span>
  297.     </div>
  299.     <!-- Search Box -->
  300.     {{ uvdesk_extensibles.getRegisteredComponent('Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\SearchTemplate').render() | raw }}
  302.     <div class="uv-actions">
  303.         <!-- Google Translation -->
  304.         <div id="google_translate_element"></div>
  305.             <script type="text/javascript">
  306.                 function googleTranslateElementInit() {
  307.                     new google.translate.TranslateElement({layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
  308.                     $(document).click(function(e) {
  309.                         if($('.goog-te-menu-frame.skiptranslate').is(':visible') ) {
  310.                             $('.skiptranslate.goog-te-gadget').addClass('uv-no-pointer-events');
  311.                         } else {
  312.                             $('.skiptranslate.goog-te-gadget').removeClass('uv-no-pointer-events');
  313.                         }
  314.                     });
  315.                     $($('.goog-te-menu-frame.skiptranslate').contents()[0], window).find('body').bind("focusout", function(e) {
  316.                             $('.skiptranslate.goog-te-gadget').removeClass('uv-no-pointer-events');
  317.                     });
  318.                 }
  319.             </script>
  320.             <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" async="async"></script>
  321.         <!-- Google Translation  -->
  323.         <!-- Profile Navigations -->
  324.         <span style="position: relative" class="">
  325.             <div class="uv-profile uv-dropdown-other">
  326.                 {% if currentUserDetails is defined and currentUserDetails.thumbnail is defined and currentUserDetails.thumbnail is not empty %}
  327.                     <img class='uv-avatar' src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ currentUserDetails.thumbnail }}"/>
  328.                 {% else %}
  329.                     <img class='uv-avatar' src="{{ asset('bundles/uvdeskcoreframework/images/uv-avatar-batman.png') }}"/>
  330.                 {% endif %}
  331.             </div>
  333.             <div class="uv-dropdown-list uv-bottom-right uv-text-left">
  334.                 <div class="uv-dropdown-container">
  336.                     <label>{{ 'Signed in as'|trans }} </label>
  337.                         <p class="user-name">{{ currentUser.firstName }} {{ currentUser.lastName }}</p>
  338.                     <div role="none" class="dropdown-divider"></div>
  340.                     <ul>
  341.                         <li><a href="{{ path('edit_profile') }}" class='profiler'>{{ 'Your Profile'|trans }}</a></li>
  342.                     </ul>
  343.                     
  344.                     <ul>
  345.                         {% if user_service.isAccessAuthorized('ROLE_AGENT_CREATE_TICKET') %}
  346.                             <li data-action="create" class="uv-open-popup" data-target="create-ticket-modal">{{ 'Create Ticket'|trans }}</li>
  347.                         {% endif %}
  348.                         {% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_AGENT') %}
  349.                             <li><a href="{{ path('helpdesk_member_create_account') }}">{{ 'Create Agent'|trans }}</a></li>
  350.                         {% endif %}
  351.                         {% if user_service.isAccessAuthorized('ROLE_AGENT_MANAGE_CUSTOMER') %}
  352.                             <li><a href="{{ path('helpdesk_member_create_customer_account') }}">{{ 'Create Customer'|trans }}</a></li>
  353.                         {% endif %}
  355.                         <div role="none" class="dropdown-divider"></div>
  356.                         <li><a class="uv-text-danger" href="{{ path('helpdesk_member_handle_logout') }}">{{ 'Sign Out'|trans }}</a></li>
  357.                     </ul>
  358.                 </div>
  359.             </div>
  360.         </span>
  361.     </div>
  362. </div>
  364. <script type="text/template" id="notification_flags_temp">
  365.     <% if (typeof undeliveredMessages != 'undefined') { %>
  366.         <li>
  367.             <span class="uv-notification-message">
  368.                 <%= undeliveredMessages %>
  369.             </span>
  370.         </li>
  371.         <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>
  372.     <% } %>
  373. </script>
  375. <script type="text/javascript">
  376.     $(function () {
  377.         var FeatureSearch = Backbone.View.extend({
  378.             el: $('.uv-search-wrapper'),
  379.             events: {
  380.                 'keyup .uv-search-bar': 'searchFeature',
  381.                 'click .uv-search-bar': 'openFeatureSearch',
  382.             },
  383.             searchFeature: function(e) {
  384.                 var currentElement = Backbone.$(e.currentTarget);
  385.                 if(currentElement.val().trim() != '') {
  386.                     var flag = 0;
  387.                     $('.uv-search-wrapper').find('.uv-search-result-row').each(function() {
  388.                         if(!$(this).hasClass('uv-no-results')) {
  389.                             var text = $(this).text().trim().toLowerCase();
  390.                             var isTextContained = text.search(currentElement.val().trim().toLowerCase());
  391.                             if(isTextContained < 0) {
  392.                                 $(this).parent().hide();
  393.                                 $(this).parent().attr('tabIndex', -1);
  394.                             } else {
  395.                                 $(this).parent().show();
  396.                                 $(this).parent().removeAttr('tabIndex');
  397.                                 flag = 1;
  398.                             }
  399.                         }
  400.                     });
  401.                     if(flag == 0)
  402.                         $('.uv-search-wrapper').find(".uv-no-results").show();
  403.                     else
  404.                         $('.uv-search-wrapper').find(".uv-no-results").hide();
  406.                     this.$el.find('.uv-search-result-wrapper').addClass('uv-search-result-active').addClass('uv-search-flap-up')
  407.                 } else {
  408.                     this.$el.find('.uv-search-result-wrapper').removeClass('uv-search-result-active').removeClass('uv-search-flap-up')
  409.                 }
  410.             },
  411.             openFeatureSearch: function(e) {
  412.                 var currentElement = Backbone.$(e.currentTarget);
  413.                 if(currentElement.val().trim() != '') {
  414.                     this.$el.find('.uv-search-result-wrapper').addClass('uv-search-result-active').addClass('uv-search-flap-up')
  415.                 }
  416.             }
  417.         });
  419.         var SidePanelUV = Backbone.View.extend({
  420.             el: $('.uv-paper'),
  421.             events: {
  422.                 'click .uv-mob-aside span': 'toggleAsideBar'
  423.             },
  424.             initialize : function() {
  425.                 var ele = $('.uv-paper');
  426.                 if(ele.css('padding-left') == '60px'){
  427.                     $('.uv-mob-aside').removeClass('uv-mob-aside-left');
  428.                 }else{
  429.                     $('.uv-mob-aside').addClass('uv-mob-aside-left');
  430.                 }
  432.                 var asideView = '{{ app.request.cookies.get("uv-asideView") }}';
  433.                 if(asideView == 'true')
  434.                     this.toggleAsideBar();
  435.             },
  436.             toggleAsideBar: function(){
  437.                 var asideView = true;
  438.                 var ele = $('.uv-inner-section .uv-aside');
  439.                 var eleSidePanel = $('.uv-inner-section .uv-view');
  440.                 var eleTicketView = $('.uv-inner-section .uv-view .uv-ticket-scroll-region');
  441.                 var mobAside = $('.uv-mob-aside');
  442.                 if(ele.css('display') == 'none'){
  443.                     asideView = false;
  444.                     ele.css('display', 'block');
  445.                     eleSidePanel.removeClass('uv-aside-view');
  446.                     eleTicketView.removeClass('uv-aside-view-tv');
  447.                     mobAside.removeClass('uv-mob-aside-collapsed')
  448.                 }else{
  449.                     ele.css('display', 'none');
  450.                     eleSidePanel.addClass('uv-aside-view');
  451.                     eleTicketView.addClass('uv-aside-view-tv');
  452.                     mobAside.addClass('uv-mob-aside-collapsed')
  453.                 }
  454.                 if(asideView) {
  455.                     document.cookie = ("uv-asideView=1; expires=Wed, 01 Jan 2020 00:00:00 GMT;path=/");
  456.                 } else {
  457.                     document.cookie = ("uv-asideView=0; expires=Wed, 01 Jan 2020 00:00:00 GMT;path=/");
  458.                 }
  459.             }
  460.         });
  462.         var featureSearch =  new FeatureSearch();
  463.         var sidePanelUV =  new SidePanelUV();
  464.     });
  465. </script>
  467. {# Ticket Create Popup #}
  468. {% if user_service.isAccessAuthorized('ROLE_AGENT_CREATE_TICKET') %}
  469.     {{ ticket_service.appendTwigSnippet('createMemberTicket')|raw }}
  470.     {# {% include('UVDeskCoreFrameworkBundle:Snippets:createMemberTicketSnippet.html.twig') only %} #}
  471. {% endif %}