vendor/uvdesk/support-center-bundle/Resources/views/Staff/branding.html.twig line 1

Open in your IDE?
  1. {% extends "@UVDeskCoreFramework//Templates//layout.html.twig" %}
  3. {% block title %}
  4.     {{ 'Branding'|trans }}
  5. {% endblock %}
  7. {% block pageContent %}
  8.     <style>
  9.         .uv-image-upload-brick {
  10.             margin: 10px 0px;
  11.         }
  12.         .uv-color-field {
  13.             color: #fff;
  14.             width: 100px;
  15.             text-transform: uppercase;
  16.         }
  17.         .uv-header-link-wrapper {
  18.             padding-bottom: 20px;
  19.         }
  20.         .uv-footer-link-wrapper {
  21.             border-top: solid 1px #D3D3D3;
  22.             padding-top: 20px;
  23.         }
  24.         .uv-knowledgebase-layout  {
  25.             border-top: solid 1px #D3D3D3;
  26.             padding-top: 20px;
  27.             margin-top: 20px;
  28.         }
  29.         .uv-knowledgebase-layout input[type='radio'] {
  30.             display: none;
  31.         }
  32.         #links .uv-field-block input:first-child {
  33.             width: 200px;
  34.             margin-bottom: 0;
  35.         }
  36.         #links .remove-link {
  37.             margin-left: 10px;
  38.         }
  39.         .grammarly-fix-broadcast {
  40.             max-width: 518px;
  41.         }
  42.         #uv-reset-colors {
  43.             float: right;
  44.             cursor: pointer;
  45.             position: relative;
  46.             z-index:1 ;
  47.         }
  48.     </style>
  49.     <div class="uv-inner-section">        
  50.         {# Append Panel Aside #}
  51.         {% set asideTemplate = 'Webkul\\UVDesk\\CoreFrameworkBundle\\Dashboard\\AsideTemplate' %}
  52.         {% set asideSidebarReference = 'Webkul\\UVDesk\\CoreFrameworkBundle\\UIComponents\\Dashboard\\Panel\\Sidebars\\Branding' %}
  54.         {{ uvdesk_extensibles.getRegisteredComponent(asideTemplate).renderSidebar(asideSidebarReference) | raw }}
  56.         <div class="uv-view {% if app.request.cookies and app.request.cookies.get('uv-asideView') %}uv-aside-view{% endif %}">
  57.             <h1>{{ 'Branding'|trans }}</h1>
  58.             <!--Tabs-->
  59.             <div class="uv-tabs">
  60.                 <ul>
  61.                     <li for="general" {% if type == 'general' or type == '' %}class="uv-tab-active"{% endif %}>{{ 'General'|trans }}</li>
  62.                     <li for="knowledgebase" {% if type == 'knowledgebase' %} class="uv-tab-active"{% endif %}>{{ 'Knowledgebase'|trans }}</li>
  63.                     <li for="time" {% if type == 'time' %}class="uv-tab-active"{% endif %}>{{ 'Time'|trans }}</li>
  64.                     <li for="seo" {% if type == 'seo' %}class="uv-tab-active"{% endif %}>{{ 'SEO'|trans }}</li>
  65.                     <li for="links" {% if type == 'links' %}class="uv-tab-active"{% endif %}>{{ 'Links'|trans }}</li>
  66.                     <li for="advanced" {% if type == 'advanced' %}class="uv-tab-active"{% endif %}>{{ 'Advanced'|trans }}</li>
  67.                     <li for="broadcasting" {% if type == 'broadcasting' %}class="uv-tab-active"{% endif %}>{{ 'Broadcast Message'|trans }}</li>                  
  68.                 </ul>
  69.             </div>
  70.             <!--Tabs-->
  72.             <!--Tab View-->
  73.             <div class="uv-tab-view {% if type == 'general' or type == '' %}uv-tab-view-active{% endif %}" id="general">
  74.                 <!--Form-->
  75.                 <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'general'}) }}" id="generalSettingForm" enctype="multipart/form-data">
  76.                     <!-- Image block -->
  77.                     <div class="uv-image-upload-wrapper uv-no-error-success-icon">
  78.                         <div class="uv-element-block">
  79.                             <label class="uv-field-label">{{ 'Wide Logo'|trans }}</label>
  80.                             <div class="uv-field-block">
  81.                                 {% set isLogo = websiteData.logo ? 1 : 0 %}
  82.                                 <div class="uv-image-upload-brick uv-image-upload-brick-200 {% if isLogo %}uv-on-drop-shadow{% endif %}" {% if isLogo %}style="border-color: transparent;"{% endif %}>
  83.                                     <input type="file" name="website[logo]" id="uv-upload-profile" accept="image/*">
  84.                                     <div class="uv-image-upload-placeholder">
  85.                                         <svg xmlns="http://www.w3.org/2000/svg" width="48" height="32" viewBox="0 0 48 32">
  86.                                             <path fill="#7c74f1" fill-rule="evenodd" d="M26.516,22.252H21.477V17.226h-3.75L24,11.031l6.269,6.195h-3.75v5.026ZM29.973,8.138A9.1,9.1,0,0,0,24,6.005a8.947,8.947,0,0,0-4.863,1.4,9.78,9.78,0,0,0-3.457,3.682A7.494,7.494,0,0,0,9,18.512a7.2,7.2,0,0,0,2.2,5.289,7.234,7.234,0,0,0,5.3,2.192H32.727A6.294,6.294,0,0,0,39,19.739,5.933,5.933,0,0,0,37.3,15.5a6.113,6.113,0,0,0-4.1-1.958A9.112,9.112,0,0,0,29.973,8.138Z"/>
  87.                                         </svg>
  88.                                     </div>
  89.                                     <img id="dynamic-image-upload" {% if isLogo %} src="{{ app.request.scheme ~'://' ~ app.request.httpHost ~ asset('') }}{{ websiteData.logo }}" {% endif %}>
  91.                                 </div>
  92.                                 <div class="uv-image-info-brick">
  93.                                     <span class="uv-field-info">{{ 'Upload an Image (200px x 48px) in</br> PNG or JPG Format'|trans|raw }}</span>
  94.                                 </div>
  95.                             </div>
  96.                             <span class="uv-field-info">{{ 'It will be shown as Logo on Knowledgebase and Helpdesk'|trans }}</span>
  97.                         </div>
  98.                     </div>
  99.                     <!-- //Image block -->
  101.                     <!-- Field -->
  102.                     <div class="uv-element-block">
  103.                           <label class="uv-field-label">{{ 'Website Status'|trans }}</label>
  104.                           <div class="uv-field-block">
  105.                             <div class="uv-checkbox uv-margin-top-5">
  106.                                 <input type="checkbox" name="website[status]" style="cursor:pointer;" {{ configuration.status ? 'checked="checked"' : '' }} >
  107.                                 <span class="uv-checkbox-view"></span>
  108.                             </div>
  109.                             <span class="uv-field-info uv-margin-top-5">{{ 'Enable front end website and knowledgebase for customer(s)'|trans }}</span>
  110.                         </div>
  111.                     </div>
  112.                     <!-- //Field -->
  114.                     <!-- Field -->
  115.                     <div class="uv-element-block">
  116.                         {##564DA8#}
  117.                           <label class="uv-field-label">{{ 'Brand Color'|trans }}</label>
  118.                           <div class="uv-field-block">
  119.                             <input name="website[brandColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.brandColor ? configuration.brandColor : '#7C70F4'}}" style="background:{{ configuration.brandColor ? configuration.brandColor : '#7C70F4'}}" placeholder="#7C70F4">
  120.                           </div>
  121.                     </div>
  122.                     <!-- //Field -->
  123.                     
  124.                     <!-- Field -->
  125.                     <div class="uv-element-block">
  126.                           <label class="uv-field-label">{{ 'Name'|trans }}</label>
  127.                           <div class="uv-field-block">
  128.                             <input name="website[name]" class="uv-field" type="text" value="{{ websiteData.name ? websiteData.name : '' }}">
  129.                           </div>
  130.                     </div>
  131.                     <!-- //Field -->
  133.                     <!--CTA-->
  134.                     <input class="uv-btn general-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
  135.                     <!--//CTA-->
  136.                 </form>
  137.                 <!--//Form-->
  138.             </div>
  139.             <!--//Tab View-->
  141.             <!--Tab View-->
  142.             <div class="uv-tab-view {% if type == 'knowledgebase' %}uv-tab-view-active{% endif %}" id="knowledgebase">
  143.                 <!--Form-->
  144.                 <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'knowledgebase'}) }}" id="knowledgebaseForm">
  145.                     <!-- Field -->
  146.                     <div class="uv-element-block">
  147.                         <span  id="uv-reset-colors" class="uv-icon-history" data-toggle="tooltip" data-placement="right" title="{{ 'Use Default Colors'|trans }}"></span>
  148.                         {##564DA8#}
  149.                           <label class="uv-field-label">{{ 'Page Background Color'|trans }}</label>
  150.                           <div class="uv-field-block">
  151.                             <input name="website[pageBackgroundColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.pageBackgroundColor}}" style="background: {{ configuration.pageBackgroundColor ? configuration.pageBackgroundColor : '#FFFFFF' }}">
  152.                           </div>
  153.                     </div>
  154.                     <!-- //Field -->
  156.                     <!-- Field -->
  157.                     <div class="uv-element-block">
  158.                         {##564DA8#}
  159.                           <label class="uv-field-label">{{ 'Header Background Color'|trans }}</label>
  160.                           <div class="uv-field-block">
  161.                             <input name="website[headerBackgroundColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.headerBackgroundColor ? configuration.headerBackgroundColor : '#FFFFFF' }}" style="background: {{ configuration.pageBackgroundColor ? configuration.headerBackgroundColor : '#FFFFFF' }}">
  162.                           </div>
  163.                     </div>
  164.                     <!-- //Field -->
  166.                     <!-- Field -->
  167.                     <div class="uv-element-block">
  168.                         {##564DA8#}
  169.                           <label class="uv-field-label">{{ 'Banner Background Color'|trans }}</label>
  170.                           <div class="uv-field-block">
  171.                             <input name="website[bannerBackgroundColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.bannerBackgroundColor ? configuration.bannerBackgroundColor : '#70B5F4' }}" style="background: {{ configuration.bannerBackgroundColor ? configuration.bannerBackgroundColor : '#70B5F4' }}">
  172.                           </div>
  173.                     </div>
  174.                     <!-- //Field -->
  176.                     <!-- Field -->
  177.                     <div class="uv-element-block">
  178.                         {##564DA8#}
  179.                           <label class="uv-field-label">{{ 'Page Link Color'|trans }}</label>
  180.                           <div class="uv-field-block">
  181.                             <input name="website[linkColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.linkColor  ? configuration.linkColor : '#C427A1' }}" style="background: {{ configuration.linkColor  ? configuration.linkColor : '#C427A1' }}">
  182.                           </div>
  183.                     </div>
  184.                     <!-- //Field -->
  186.                     <!-- Field -->
  187.                     <div class="uv-element-block">
  188.                         {##564DA8#}
  189.                           <label class="uv-field-label">{{ 'Page Link Hover Color'|trans }}</label>
  190.                           <div class="uv-field-block">
  191.                             <input name="website[linkHoverColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.linkHoverColor  ? configuration.linkHoverColor : '#2750C4' }}" style="background: {{ configuration.linkColor  ? configuration.linkHoverColor : '#2750C4' }}">
  192.                           </div>
  193.                     </div>
  194.                     <!-- //Field -->
  196.                     <!-- Field -->
  197.                     <div class="uv-element-block">
  198.                         {##564DA8#}
  199.                           <label class="uv-field-label">{{ 'Article Text Color'|trans }}</label>
  200.                           <div class="uv-field-block">
  201.                             <input name="website[articleTextColor]" class="uv-field uv-color-field" type="text" value="{{ configuration.articleTextColor  ? configuration.articleTextColor : '#333333' }}" style="background: {{ configuration.linkColor  ? configuration.articleTextColor : '#333333' }}">
  202.                           </div>
  203.                     </div>
  204.                     <!-- //Field -->
  206.                     <!-- Field -->
  207.                     <div class="uv-element-block">
  208.                           <label class="uv-field-label">{{ 'Tag Line'|trans }}</label>
  209.                           <div class="uv-field-block">
  210.                             <input name="website[siteDescription]" class="uv-field" type="text" value="{{ configuration.siteDescription ? configuration.siteDescription : '' }}" placeholder="{{ 'Hi! how can we help?'|trans }} ">
  211.                           </div>
  212.                     </div>
  213.                     <!-- //Field -->
  215.                     <div class="uv-knowledgebase-layout uv-no-error-success-icon">
  216.                         <div class="uv-element-block">
  217.                             <label class="uv-field-label">{{ 'Layout '|trans }}</label>
  218.                             <div class="uv-layout-icon-wrapper">
  219.                                 <label for="homepage-masonry" class="uv-layout-icon uv-layout-grid {% if configuration.homepageContent and configuration.homepageContent == 'masonry' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Masonry'|trans }}"></label>
  220.                                 <input name="website[homepageContent]" type="radio" id="homepage-masonry" value="masonry" {% if configuration.homepageContent and configuration.homepageContent == 'masonry' %}checked{% endif %}/>
  222.                                 <label for="homepage-folder" class="uv-layout-icon uv-layout-folder {% if configuration.homepageContent and configuration.homepageContent == 'folder' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Folder'|trans }}"></label>
  223.                                 <input name="website[homepageContent]" type="radio" id="homepage-folder" value="folder" {% if configuration.homepageContent and configuration.homepageContent == 'folder' %}checked{% endif %}/>
  225.                                 <label for="homepage-category" class="uv-layout-icon uv-layout-category {% if configuration.homepageContent and configuration.homepageContent == 'category' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Category'|trans }}"></label>
  226.                                 <input name="website[homepageContent]" type="radio" id="homepage-category" value="category" {% if configuration.homepageContent and configuration.homepageContent == 'category' %}checked{% endif %}/>
  228.                                 <label for="homepage-article" class="uv-layout-icon uv-layout-article {% if configuration.homepageContent and configuration.homepageContent == 'article' %}uv-layout-icon-active{% endif %}" data-toggle="tooltip" title="{{ 'Popular Article'|trans }}"></label>
  229.                                 <input name="website[homepageContent]" type="radio" id="homepage-article" value="article" {% if configuration.homepageContent and configuration.homepageContent == 'article' %}checked{% endif %}/>
  230.                             </div>
  231.                         </div>
  233.                         <!-- Field -->
  234.                         <div class="uv-element-block" style="margin: 20px 0">
  235.                             <label>
  236.                                 <div class="uv-checkbox">
  237.                                     <input name="website[ticketCreateOption]" type="checkbox" {{ configuration.ticketCreateOption ? 'checked="checked"':""}} />
  238.                                     <span class="uv-checkbox-view"></span>
  239.                                 </div>
  240.                                 <span class="uv-checkbox-label">{{ 'Ticket Create Option'|trans }}</span>
  241.                             </label>
  242.                         </div>
  243.                         <!-- //Field -->
  245.                         <!-- Field -->
  246.                         <div class="uv-element-block" style="margin: 20px 0">
  247.                             <label>
  248.                                 <div class="uv-checkbox">
  249.                                     <input name="website[loginRequiredToCreate]" type="checkbox" {{ configuration.loginRequiredToCreate ? 'checked="checked"':""}}/>
  250.                                     <span class="uv-checkbox-view"></span>
  251.                                 </div>
  252.                                 <span class="uv-checkbox-label">{{ 'Login Required To Create Tickets'|trans }}</span>
  253.                             </label>
  254.                         </div>
  255.                         <!-- //Field -->
  257.                         <!-- Field -->
  258.                         <div class="uv-element-block" style="margin: 20px 0">
  259.                             <label>
  260.                                 <div class="uv-checkbox">
  261.                                     <input name="website[removeCustomerLoginButton]" type="checkbox" value="1" {{ configuration.removeCustomerLoginButton ? 'checked="checked"':""}} />
  262.                                     <span class="uv-checkbox-view"></span>
  263.                                 </div>
  264.                                 <span class="uv-checkbox-label">{{ 'Remove Customer Login/Signin Button'|trans }}</span>
  265.                             </label>
  266.                         </div>
  267.                         <!-- //Field -->
  269.                         <!-- Field -->
  270.                         <div class="uv-element-block" style="margin: 20px 0">
  271.                             <label>
  272.                                 <div class="uv-checkbox">
  273.                                     <input name="website[disableCustomerLogin]" type="checkbox" value="1" {{ configuration.disableCustomerLogin ? 'checked="checked"':""}} />
  274.                                     <span class="uv-checkbox-view"></span>
  275.                                 </div>
  276.                                 <span class="uv-checkbox-label">{{ 'Disable Customer Login'|trans }}</span>
  277.                             </label>
  278.                         </div>
  279.                         <!-- //Field -->
  280.                     </div>
  282.                     <!-- CSRF token Field -->
  283.                     {# <input type="hidden" name="website[_token]" value="{{ uvdesk_service.generateCsrfToken('website') }}"/> #}
  284.                     <!-- //CSRF token Field -->
  286.                     <!--CTA-->
  287.                     <input class="uv-btn knowledgebase-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
  288.                     <!--//CTA-->
  289.                 </form>
  290.             </div>
  291.             <!--//Tab View-->
  293.             <!--Tab View-->
  294.             <div class="uv-tab-view {% if type == 'seo' %}uv-tab-view-active{% endif %}" id="seo">
  295.                 <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'seo'}) }}" id="seoForm">
  297.                     <!-- Field -->
  298.                     <div class="uv-element-block">
  299.                         <label class="uv-field-label">{{ 'Meta Description (Recommended)'|trans }}</label>
  300.                         <div class="uv-field-block">
  301.                             <textarea name="metaDescription" class="uv-field">{{configuration.metaDescription ? configuration.metaDescription : "" }}</textarea>
  302.                         </div>
  303.                     </div>
  304.                     <!-- //Field -->
  306.                     <!-- Field -->
  307.                     <div class="uv-element-block">
  308.                         <label class="uv-field-label">{{ 'Meta Keywords (Recommended)'|trans }}</label>
  309.                         <div class="uv-field-block">
  310.                             <textarea name="metaKeywords" class="uv-field">{{ configuration.metaKeywords ? configuration.metaKeywords : "" }}</textarea>
  311.                         </div>
  312.                     </div>
  313.                     <!-- //Field -->
  315.                     <!-- CSRF token Field -->
  316.                     <input type="hidden" name="_token" value=""/>
  317.                     <!-- //CSRF token Field -->
  319.                     <!--CTA-->
  320.                     <input class="uv-btn seo-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
  321.                     <!--//CTA-->
  322.                 </form>
  323.             </div>
  324.             <!--//Tab View-->
  326.             <!--Tab View-->
  327.             <div class="uv-tab-view {% if type == 'links' %}uv-tab-view-active{% endif %}" id="links">
  328.                 <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'links'}) }}" id="linksForm" class="uv-no-error-success-icon">
  330.                     <div class="uv-header-link-wrapper">
  331.                         <div class="links">
  332.                             {% if configuration.headerLinks|length %}
  333.                                 {% for key, link in configuration.headerLinks %}
  334.                                     <!-- Field -->
  335.                                     <div class="uv-element-block">
  336.                                         <label class="uv-field-label">{{ 'Header Link'|trans }} #{{key}}</label>
  337.                                         <div class="uv-field-block">
  338.                                             <input type="text" class="uv-field" name="headerLinks[{{key}}][label]" value="{{ link.label }}"  placeholder="{{ 'Label'|trans }}"/>
  339.                                             <input type="text" class="uv-field" name="headerLinks[{{key}}][url]" value="{{ link.url }}"  placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
  340.                                             <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
  341.                                         </div>
  342.                                     </div>
  343.                                     <!-- //Field -->
  344.                                 {% endfor %}
  345.                             {% else %}
  346.                                 <!-- Field -->
  347.                                 <div class="uv-element-block">
  348.                                     <label class="uv-field-label">{{ 'Header Link'|trans }} #1</label>
  349.                                     <div class="uv-field-block">
  350.                                         <input type="text" class="uv-field" name="headerLinks[1][label]" placeholder="{{ 'Label'|trans }}" />
  351.                                         <input type="text" class="uv-field" name="headerLinks[1][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
  352.                                         <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
  353.                                     </div>
  354.                                 </div>
  355.                                 <!-- //Field -->
  356.                             {% endif %}
  357.                         </div>
  359.                         <a class="uv-btn-tag btn-add" href="#" data-type="header">
  360.                             <span class="uv-icon-add-dark"></span> {{ 'Add More'|trans }}
  361.                         </a>
  362.                     </div>
  364.                     <div class="uv-footer-link-wrapper">
  365.                         <div class="links">
  366.                             {% if configuration.footerLinks|length %}
  367.                                 {% for key, link in configuration.footerLinks %}
  368.                                     <!-- Field -->
  369.                                     <div class="uv-element-block">
  370.                                         <label class="uv-field-label">{{ 'Footer Link'|trans }} #{{key}}</label>
  371.                                         <div class="uv-field-block">
  372.                                             <input type="text" class="uv-field" name="footerLinks[{{key}}][label]" value="{{ link.label }}"  placeholder="{{ 'Label'|trans }}"/>
  373.                                             <input type="text" class="uv-field" name="footerLinks[{{key}}][url]" value="{{ link.url }}"  placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
  374.                                             <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
  375.                                         </div>
  376.                                     </div>
  377.                                     <!-- //Field -->
  378.                                 {% endfor %}
  379.                             {% else %}
  380.                                 <!-- Field -->
  381.                                 <div class="uv-element-block">
  382.                                     <label class="uv-field-label">{{ 'Footer Link'|trans }} #1</label>
  383.                                     <div class="uv-field-block">
  384.                                         <input type="text" class="uv-field" name="footerLinks[1][label]" placeholder="{{ 'Label'|trans }}" />
  385.                                         <input type="text" class="uv-field" name="footerLinks[1][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
  386.                                         <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
  387.                                     </div>
  388.                                 </div>
  389.                                 <!-- //Field -->
  390.                             {% endif %}
  392.                         </div>
  394.                         <a class="uv-btn-tag btn-add" href="#" data-type="footer">
  395.                             <span class="uv-icon-add-dark"></span> {{ 'Add More'|trans }}
  396.                         </a>
  397.                     </div>
  399.                     <!--CTA-->
  400.                     <input class="uv-btn links-btn" style="margin-top: 15px;" href="#" value="{{ 'Save Changes'|trans }}" type="button">
  401.                     <!--//CTA-->
  402.                 </form>
  403.             </div>
  404.             <!--//Tab View-->
  407.                 <!--Tab View-->
  408.                 <div class="uv-tab-view {% if type == 'advanced' %}uv-tab-view-active{% endif %}" id="advanced">
  409.                     <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'advanced'}) }}" id="advancedForm">
  410.                         <!-- Field -->
  411.                         <div class="uv-element-block">
  412.                             <label class="uv-field-label">{{ 'Custom CSS (Optional)'|trans }}</label>
  413.                             <div class="uv-field-block">
  414.                                 <textarea name="customCSS" class="uv-field">{{ configuration.customCSS }}</textarea>
  415.                             </div>
  416.                             <span class="uv-field-info">{{ 'It will be add to the frontend knowledgebase only'|trans }}</span>
  417.                         </div>
  418.                         <!-- //Field -->
  420.                         <!-- Field -->
  421.                         <div class="uv-element-block">
  422.                             <label class="uv-field-label">{{ 'Custom Javascript (Optional)'|trans }}</label>
  423.                             <div class="uv-field-block">
  424.                                 <textarea name="script" class="uv-field">{{ configuration.script }}</textarea>
  425.                             </div>
  426.                             <span class="uv-field-info">{{ 'It will be add to the frontend knowledgebase only'|trans }}</span>
  427.                         </div>
  428.                         <!-- //Field -->
  430.                         <!-- CSRF token Field -->
  431.                         <input type="hidden" name="form[_token]" value="{{ uvdesk_service.generateCsrfToken('form') }}"/>
  432.                         <!-- //CSRF token Field -->
  434.                         <!--CTA-->
  435.                         <input class="uv-btn advanced-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
  436.                         <!--//CTA-->
  437.                     </form>
  438.                 </div>
  439.                 <!--//Tab View-->
  440.         
  441.             <!--Tab View-->
  442.             <div class="uv-tab-view {% if type == 'broadcasting' %}uv-tab-view-active{% endif %}" id="broadcasting">
  443.                 {# {% set broadcastMessage = website.broadcastMessage|json_decode %} #}
  444.                 <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'broadcasting'}) }}" id="broadcastingForm">
  445.                     <!-- Field -->
  446.                     <div class="uv-element-block">
  447.                         <label class="uv-field-label">{{ 'Broadcast Message'|trans }}</label>
  448.                         <div class="uv-field-block">
  449.                             <textarea name="broadcasting[message]" class="uv-field grammarly-fix-broadcast">{{ broadcast.message is defined ? broadcast.message : '' }}</textarea>
  450.                         </div>
  451.                         <span class="uv-field-info">{{ 'Broadcast message content to show on helpdesk'|trans }}</span>
  452.                     </div>
  453.                     <!-- //Field -->
  455.                     <!-- Field -->
  456.                     <div class="uv-element-block">
  457.                         <label>{{ 'From'|trans }}</label>
  458.                         <div class="uv-field-block date">
  459.                             <input type="text" name="broadcasting[from]" class="uv-field datetime date-from" value="{{ broadcast.from is defined ? broadcast.from : '' }}">
  460.                         </div>
  461.                         <label>{{ 'To'|trans }}</label>
  462.                         <div class="uv-field-block date">
  463.                             <input type="text" name="broadcasting[to]" class="uv-field datetime date-to" value="{{ broadcast.to is defined ? broadcast.to : '' }}">
  464.                         </div>
  465.                         <span class="uv-field-info">{{ 'Time duration between which message will be displayed(if applicable)'|trans }}</span>
  466.                     </div>
  467.                     <!-- //Field -->
  468.                     <div class="uv-element-block">
  469.                         <label class="uv-field-label">{{'Broadcasting Status'|trans}}</label>
  470.                         <div class="uv-element-block">
  471.                             <label>
  472.                                 <div class="uv-checkbox">
  473.                                     <input type="checkbox" name="broadcasting[isActive]" value="{{ broadcast is not empty and broadcast.isActive ? 1 : 0 }}" {{ broadcast is not empty and broadcast.isActive ? 'checked' : '' }}>
  474.                                     <span class="uv-checkbox-view"></span>
  475.                                 </div>
  476.                                 <span class="uv-checkbox-label">{{'Broadcasting is Active'|trans}}</span>
  477.                             </label>
  478.                         </div>
  479.                     </div>
  480.                     <!-- CSRF token Field -->
  481.                     <input type="hidden" name="form[_token]" value=""/>
  482.                     <!-- //CSRF token Field -->
  484.                     <!--CTA-->
  485.                     <input class="uv-btn broadcasting-btn " href="#" value="{{ 'Save Changes'|trans }}" type="button">
  486.                     <!--//CTA-->
  487.                 </form>
  488.             </div>
  489.             <!--//Tab View-->
  491.             <!--Tab View-->
  492.             <div class="uv-tab-view {% if type == 'time' %}uv-tab-view-active{% endif %}" id="time">
  493.                 <!--Form-->
  494.                 
  495.                 <form method="post" action="{{ path('helpdesk_member_knowledgebase_theme', {'type': 'time'}) }}" id="timeSettingForm">
  496.                     <!-- Field -->
  497.                     <div class="uv-element-block">
  498.                         <label class="uv-field-label">{{ 'Timezone'|trans }}</label>
  499.                         <div class="uv-field-block">
  500.                             <select name="form[timezone]" class="uv-select">
  501.                                 {% for timezone in uvdesk_service.getTimezones() %}
  502.                                     <option value="{{ timezone }}" {% if websiteData.timezone == timezone %}selected{% endif %}>{{ timezone }}</option>
  503.                                 {% endfor %}
  504.                             </select>
  505.                         </div>
  506.                         <span class="uv-field-info">{{ "Choose a default company's timezone"|trans }}</span>
  507.                     </div>
  508.                     <!-- //Field -->
  510.                     <!-- Field -->
  511.                     <div class="uv-element-block">
  512.                         <label class="uv-field-label">{{ 'Date Time Format'|trans }}</label>
  513.                         <div class="uv-field-block">
  514.                             <select name="form[timeFormat]" class="uv-select">
  515.                                 {% for key, timeFormat in uvdesk_service.getTimeFormats() %}
  516.                                     <option value="{{ key }}" {% if websiteData.timeFormat == key %}selected{% endif %}>{{ timeFormat }}</option>
  517.                                 {% endfor %}
  518.                             </select>
  519.                         </div>
  520.                         <span class="uv-field-info">{{ 'Choose a format to convert date to specified date time format'|trans }}</span>
  521.                     </div>
  522.                     <!-- //Field -->
  524.                     <!--CTA-->
  525.                     <input class="uv-btn timezone-btn" href="#" value="{{ 'Save Changes'|trans }}" type="button">
  526.                     <!--//CTA-->
  527.                 </form>
  528.                 <!--//Form-->
  529.             </div>
  530.             <!--//Tab View-->
  532.         </div>
  533.     </div>
  534. {% endblock %}
  535. {% block footer %}
  536.     {{ parent() }}
  537.  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/css/bootstrap-colorpicker.min.css">
  538.     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/js/bootstrap-colorpicker.min.js"></script>
  540.     <script>
  541.           $('.datetime').datetimepicker({
  542.             format: 'YYYY-MM-DD H:mm:ss'
  543.         });
  544.     </script>
  545.     <!-- Header Link template -->
  546.     <script id="header_link_tmp" type="text/template">
  547.         <div class="uv-element-block">
  548.             <label class="uv-field-label">{{ 'Header Link'|trans }} #<%= count %></label>
  549.             <div class="uv-field-block">
  550.                 <input type="text" class="uv-field" name="headerLinks[<%= count %>][label]" placeholder="{{ 'Label'|trans }}" />
  551.                 <input type="text" class="uv-field" name="headerLinks[<%= count %>][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
  552.                 <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
  553.             </div>
  554.         </div>
  555.     </script>
  556.     <!-- //Header Link template -->
  558.     <!-- Footer Link template -->
  559.     <script id="footer_link_tmp" type="text/template">
  560.         <div class="uv-element-block">
  561.             <label class="uv-field-label">{{ 'Footer Link'|trans }} #<%= count %></label>
  562.             <div class="uv-field-block">
  563.                 <input type="text" class="uv-field" name="footerLinks[<%= count %>][label]" placeholder="{{ 'Label'|trans }}" />
  564.                 <input type="text" class="uv-field" name="footerLinks[<%= count %>][url]" placeholder="{{ 'URL (with http:// or https://)'|trans }}" />
  565.                 <a class="uv-btn-tag remove-link" href="#"><span class="uv-icon-remove-dark-box"></span></a>
  566.             </div>
  567.         </div>
  568.     </script>
  569.     <!-- //Footer Link template -->
  571.     <script type="text/javascript">
  572.         $(function () {
  573.             $('.uv-color-field').colorpicker({format: "hex"}).on('changeColor', function(ev) {
  574.                 $(this).css('background', $(this).val())
  575.                 textColor = app.appView.getTextColorBasedBackground($(this).val());
  576.                 $(this).css('color', textColor)
  577.             });
  579.             var BrandingModel = Backbone.Model.extend({
  580.                 validation: {
  581.                     'website[name]': {
  582.                           required: true,
  583.                            msg: '{{ "This field is mandatory"|trans }}'
  584.                     },
  585.                                       
  586.                     'website[favicon]': [{
  587.                             notEmptyFile: true,
  588.                             msg: "{{ 'An empty file is not allowed.'|trans }}",
  589.                         }, {
  590.                             sizeLimit: true,
  591.                             msg: "{{ 'File size must not be greater than 200KB !!'|trans }}",
  592.                         }, {
  593.                             imageFile: true,
  594.                             msg: "{{ 'Please upload valid Image file (Only JPEG, JPG, PNG allowed)!!'|trans }}",
  595.                         }
  596.                     ],
  597.                     'website[logo]': [{
  598.                             notEmptyFile: true,
  599.                             msg: "{{ 'An empty file is not allowed.'|trans }}",
  600.                         }, {
  601.                             sizeLimit: true,
  602.                             msg: "{{ 'File size must not be greater than 200KB !!'|trans }}",
  603.                         }, {
  604.                             imageFile: true,
  605.                             msg: "{{ 'Please upload valid Image file (Only JPEG, JPG, PNG allowed)!!'|trans }}",
  606.                         }
  607.                     ],
  608.                 }
  609.             });
  611.             _.extend(Backbone.Validation.validators, {
  612.                 notEmptyFile: function(value, attr) {
  613.                     var field = $('input[name="' + attr + '"]');
  614.                     if(field.length && field[0].files && field[0].files.length ) {
  615.                         var file = field[0].files[0];
  616.                         if(file && 0 == file.size) {
  617.                             return true; //error
  618.                         }
  619.                     }                    
  620.                 },
  621.                 sizeLimit: function(value, attr) {
  622.                     var field = $('input[name="' + attr + '"]');
  623.                     if(field.length && field[0].files && field[0].files.length ) {
  624.                         var file = field[0].files[0];
  625.                         if(file && file.size/1024 > 200) {
  626.                             return true; //error                            
  627.                         }
  628.                     }                    
  629.                 },
  630.                 imageFile: function(value, attr) { 
  631.                     var field = $('input[name="' + attr + '"]');
  632.                     if(field.length && field[0].files && field[0].files.length ) {
  633.                         var file = field[0].files[0];
  634.                         if(file && file.type.indexOf('image/') != 0) {
  635.                             return true; //error                            
  636.                         }
  637.                     }
  638.                 }
  639.             });
  641.             var BrandingForm = Backbone.View.extend({
  642.                 events: {
  643.                     'click .general-btn': 'generalBrandingFormSubmit',
  644.                     'click .pending-response-btn': 'pendingResponseSettingFormSubmit',
  645.                     'click .uv-btn': 'disableButton',
  646.                     'blur input:not[type="file"]': 'formChanegd',
  647.                     'change input[type="file"]': 'formChanegd',
  648.                     'change .convertToSlug': 'convertToSlug',
  649.                     'click .uv-btn-tag.btn-add': 'addMoreLink',
  650.                     'click .remove-link': 'removeLink',
  651.                     "change .uv-knowledgebase-layout input[type='radio']": 'layoutChanged',
  652.                     'click #uv-reset-colors': 'resetDefaultColors',
  653.                 },
  654.                 resetDefaultColors: function(e) {
  655.                     var defaultColorArray = {
  656.                         'pageBackgroundColor': '#FFFFFF',
  657.                         'headerBackgroundColor': '#FFFFFF',
  658.                         'bannerBackgroundColor': '#7C70F4',
  659.                         'linkColor': '#2750C4',
  660.                         'linkHoverColor': '#2750C4',
  661.                         'articleTextColor': '#333333',
  662.                         'brandColor': '#7C70F4',
  663.                     };
  664.                     $(e.target).addClass('uv-icon-history-active');
  665.                     setTimeout(function () { 
  666.                         $(e.target).removeClass('uv-icon-history-active');
  667.                     }, 500);
  668.                     $.each(defaultColorArray, function(index, value) {
  669.                         var selectedField = $('input[name="website['+ index +']"]');
  670.                         selectedField.val(value);
  671.                         selectedField.trigger('changeColor');
  672.                     });
  673.                 },
  674.                 headerLinkTemplate : _.template($("#header_link_tmp").html()),
  675.                 footerLinkTemplate : _.template($("#footer_link_tmp").html()),
  676.                 initialize: function () {
  677.                     $('.uv-color-field').each(function() {
  678.                         textColor = app.appView.getTextColorBasedBackground($(this).val());
  679.                         $(this).css('color', textColor)
  680.                     });
  682.                     Backbone.Validation.bind(this);                  
  683.                 },
  684.                 formChanegd: function(e) {
  685.                     if(!Backbone.$(e.currentTarget).parents('.links').length) {
  686.                         this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
  687.                         this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
  688.                     }
  689.                 },          
  690.                 generalBrandingFormSubmit: function (e) {
  691.                     e.preventDefault();
  692.                     this.model.set($('#generalSettingForm').serializeObject());
  693.                         console.log("form_submited fail");
  694.                     
  695.                     if(this.model.isValid(true)) {
  696.                        $("#generalSettingForm").submit();
  697.                     }
  698.                 },
  699.                 pendingResponseSettingFormSubmit: function (e) {
  700.                     e.preventDefault();
  701.                     this.model.set($('#pendingResponseSettingForm').serializeObject());
  702.                     if(this.model.isValid('website[pendingSince]')) {
  703.                         $('.pending-response-btn').attr('disabled', 'disabled');
  704.                         $("#pendingResponseSettingForm").submit();
  705.                     }
  706.                 },
  707.                 disableButton: function(e) {
  708.                     var form = Backbone.$(e.currentTarget).parents('form');
  709.                     if(form.attr('id') == 'seoForm' || form.attr('id') == 'advancedForm' || form.attr('id') == 'knowledgebaseForm') {
  710.                         Backbone.$(e.currentTarget).attr('disabled', 'disabled');
  711.                         form.submit()
  712.                     }
  713.                 },
  714.                 convertToSlug: function(e) {
  715.                     Backbone.$(e.currentTarget).val(app.appView.convertToSlug(Backbone.$(e.currentTarget).val()));
  716.                 },
  717.                 addMoreLink: function(e) {
  718.                     e.preventDefault();
  720.                     var currentElement = Backbone.$(e.currentTarget);
  721.                     if(currentElement.attr('data-type') == 'header') {
  722.                         count = $('.uv-header-link-wrapper .uv-element-block').length + 1;
  723.                         $('.uv-header-link-wrapper .links').append(this.headerLinkTemplate({'count' : count}))
  724.                     } else {
  725.                         count = $('.uv-footer-link-wrapper .uv-element-block').length + 1;
  726.                         $('.uv-footer-link-wrapper .links').append(this.footerLinkTemplate({'count' : count}))
  727.                     }
  728.                 },
  729.                 removeLink: function(e) {
  730.                     e.preventDefault()
  731.                     Backbone.$(e.currentTarget).parents('.uv-element-block').remove()
  732.                 },
  733.                 layoutChanged: function(e) {
  734.                     var currentElement = Backbone.$(e.currentTarget);
  735.                     $('.uv-layout-icon').removeClass('uv-layout-icon-active');
  737.                     $("label[for='" + currentElement.attr('id') + "']").addClass('uv-layout-icon-active');
  738.                 }
  739.             });
  741.             var brandingForm = new BrandingForm({
  742.                 el: 'form',
  743.                 model: new BrandingModel()
  744.             });
  745.             
  746.             var BroadcastModel = Backbone.Model.extend({
  747.                 validation: {
  748.                     'broadcasting[message]': {
  749.                           required: true,
  750.                            msg: '{{ "This field is mandatory"|trans }}'
  751.                     },
  752.                 }
  753.             });
  755.             var BroadcastForm = Backbone.View.extend({
  756.                 el: '#broadcastingForm',
  757.                 events: {
  758.                     'click .broadcasting-btn': 'broadcastingFormSubmit',
  759.                     'change textarea': 'formChanged',
  760.                 },
  761.                 initialize: function() {
  762.                     Backbone.Validation.bind(this);
  763.                 },
  764.                 formChanged: function(e) {
  765.                     if(!Backbone.$(e.currentTarget).parents('.links').length) {
  766.                         this.model.set(Backbone.$(e.currentTarget).attr('name'), Backbone.$(e.currentTarget).val())
  767.                         this.model.isValid([Backbone.$(e.currentTarget).attr('name')])
  768.                     }
  769.                 },
  770.                 broadcastingFormSubmit: function(e) {
  771.                     var form = Backbone.$(e.currentTarget).closest('form')
  772.                     if(form.attr('id') == 'broadcastingForm') {
  773.                         data = form.serializeObject();
  774.                         this.model.set(data);
  775.                         if(this.model.isValid(true)) {
  776.                             Backbone.$(e.currentTarget).attr('disabled', 'disabled');
  777.                             form.submit()
  778.                         }
  779.                     }
  780.                 }
  781.             });
  783.             var LinksModel = Backbone.Model.extend({
  784.                 validation: {
  785.                 }
  786.             });
  788.             var LinksForm = Backbone.View.extend({
  789.                 el: '#linksForm',
  790.                 initialize: function() {
  791.                     Backbone.Validation.bind(this);
  792.                 },                
  793.                 events: {
  794.                     'click .links-btn': 'validateLinks',
  795.                 },
  796.                 validateLinks: function(e) {
  797.                     e.preventDefault();
  798.                     var data = $('#linksForm').serializeObject();
  799.                     var self = this; var valid = true;
  800.                     $.each(data, function(key, value) {
  801.                         if(key.indexOf('[url]') != -1 && value && !value.match('^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)[a-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$')) {
  802.                             Backbone.Validation.callbacks.invalid(self, key, '{{ "Provide a valid url(with protocol)"|trans }}', 'input');
  803.                             valid = false;
  804.                         } else {
  805.                             Backbone.Validation.callbacks.valid(self, key, '{{ "Provide a valid url(with protocol)"|trans }}', 'input');                            
  806.                         }
  807.                     });
  808.                     if(valid) {
  809.                         $('.links-btn').attr('disabled', 'disabled');
  810.                         $("#linksForm").submit();
  811.                     }
  812.                 },                      
  813.             });
  815.             var TimezoneForm = Backbone.View.extend({
  816.                 el: '#timeSettingForm',
  817.                 events: {
  818.                     'click .timezone-btn': 'timezoneFormSubmit',
  819.                     
  820.                 },
  821.                 timezoneFormSubmit: function(e) {
  822.                     var form = Backbone.$(e.currentTarget).closest('form')
  823.                     if (form.attr('id') == 'timeSettingForm') {
  824.                         data = form.serializeObject();
  825.                         form.submit()
  826.                     }
  827.                 }
  828.             });
  830.             var time = new TimezoneForm();
  832.             var broadcastForm = new BroadcastForm({
  833.                 model: new BroadcastModel()
  834.             });
  836.             var linksForm = new LinksForm({
  837.                 model: new LinksModel()                
  838.             });
  839.         });
  840.     </script>
  842.     {{ include("@UVDeskCoreFramework/Templates/tinyMCE.html.twig") }}
  844.     <script>
  845.         sfTinyMce.init({
  846.             height: '250px',
  847.             selector : '.grammarly-fix-broadcast',
  848.             plugins: 'autolink  link',
  849.             imagetools_cors_hosts: ['picsum.photos'],
  850.             toolbar: 'link anchor',
  851.             toolbar_sticky: true,
  852.             autosave_ask_before_unload: true,
  853.             autosave_interval: '30s',
  854.             autosave_prefix: '{path}{query}-{id}-',
  855.             autosave_restore_when_empty: false,
  856.             autosave_retention: '2m',
  857.             image_advtab: true,
  858.             templates: [
  859.                 { title: 'New Table', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
  860.                 { title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
  861.                 { title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
  862.             ],
  863.             template_cdate_format: '[Date Created (CDATE): %d/%m/%Y : %H:%M:%S]',
  864.             template_mdate_format: '[Date Modified (MDATE): %d/%m/%Y : %H:%M:%S]',
  865.             height: 600,
  866.             image_caption: true,
  867.             quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
  868.             noneditable_noneditable_class: 'mceNonEditable',
  869.             toolbar_mode: 'sliding',
  870.             contextmenu: 'link image imagetools table',
  871.             content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
  872.             setup: function(editor) {
  873.             }
  874.         });
  875.     </script>
  876. {% endblock %}