ui: update custom logos template to also allow header logo change.

rhodecode/templates/admin/settings/settings_global.mako

@@ -1,318 +1,323 b''
 ${h.secure_form(h.route_path('admin_settings_global_update'), request=request)}
 
 <div class="panel panel-default">
     <div class="panel-heading" id="branding-options">
         <h3 class="panel-title">${_('Branding')} <a class="permalink" href="#branding-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="label">
             <label for="rhodecode_title">${_('Title')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_title',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Set a custom title for your RhodeCode instance (limited to 40 characters).')}
             </span>
         </div>
         <div class="label">
             <label for="rhodecode_realm">${_('HTTP[S] authentication realm')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_realm',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Set a custom text that is shown as authentication message to clients trying to connect.')}
             </span>
         </div>
     </div>
 </div>
 
 
 <div class="panel panel-default">
     <div class="panel-heading" id="personal-group-options">
         <h3 class="panel-title">${_('Personal Repository Group')} <a class="permalink" href="#personal-group-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="checkbox">
             ${h.checkbox('rhodecode_create_personal_repo_group','True')}
             <label for="rhodecode_create_personal_repo_group">${_('Create Personal Repository Group')}</label>
         </div>
         <span class="help-block">
             ${_('Always create Personal Repository Groups for new users.')} <br/>
             ${_('When creating new users from add user form or API you can still turn this off via a checkbox or flag')}
         </span>
 
         <div class="label">
             <label for="rhodecode_personal_repo_group_pattern">${_('Personal Repo Group Pattern')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_personal_repo_group_pattern',size=60, placeholder=c.personal_repo_group_default_pattern)}
         </div>
         <span class="help-block">
             ${_('Pattern used to create Personal Repository Groups. Prefix can be other existing repository group path[s], eg. /u/${username}')} <br/>
             ${_('Available variables are currently ${username} and ${user_id}')}
         </span>
     </div>
 </div>
 
 
 <div class="panel panel-default">
     <div class="panel-heading" id="captcha-options">
         <h3 class="panel-title">${_('Registration Captcha')} <a class="permalink" href="#captcha-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="label">
             <label for="rhodecode_captcha_public_key">${_('Google reCaptcha v2 site key.')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_captcha_public_key',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Site key for reCaptcha v2 system.')}
             </span>
         </div>
 
         <div class="label">
             <label for="rhodecode_captcha_private_key">${_('Google reCaptcha v2 secret key.')}</label>
         </div>
         <div class="field input">
             ${h.text('rhodecode_captcha_private_key',size=60)}
         </div>
         <div class="field">
             <span class="help-block">
                 ${_('Secret key for reCaptcha v2 system. Setting this value will enable captcha on registration and password reset forms.')}
             </span>
         </div>
     </div>
 </div>
 
 <div class="panel panel-default">
     <div class="panel-heading" id="header-code-options">
         <h3 class="panel-title">${_('Custom Header Code')} <a class="permalink" href="#header-code-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="select">
             <select id="pre_template" >
                 <option value="#">${_('Templates...')}</option>
                 <option value="ga">Google Analytics</option>
                 <option value="clicky">Clicky</option>
                 <option value="server_announce">${_('Server Announcement')}</option>
                 <option value="flash_filtering">${_('Flash message filtering')}</option>
-                <option value="custom_logo">${_('Custom log-in logo')}</option>
+                <option value="custom_logo">${_('Custom logos')}</option>
             </select>
         </div>
         <div style="padding: 10px 0px"></div>
         <div class="textarea text-area">
             ${h.textarea('rhodecode_pre_code',cols=23,rows=5,class_="medium")}
             <span class="help-block">${_('Custom js/css code added at the end of the <header/> tag.')}
                          ${_('Use <script/> or <css/> tags to define custom styling or scripting')}</span>
         </div>
     </div>
 </div>
 
 <div class="panel panel-default">
     <div class="panel-heading" id="footer-code-options">
         <h3 class="panel-title">${_('Custom Footer Code')} <a class="permalink" href="#footer-code-options"> ¶</a></h3>
     </div>
     <div class="panel-body">
         <div class="select">
             <select id="post_template" >
                 <option value="#">${_('Templates...')}</option>
                 <option value="ga">Google Analytics</option>
                 <option value="clicky">Clicky</option>
                 <option value="server_announce">${_('Server Announcement')}</option>
             </select>
         </div>
         <div style="padding: 10px 0px"></div>
         <div class="textarea text-area">
             ${h.textarea('rhodecode_post_code',cols=23,rows=5, class_="medium")}
             <span class="help-block">${_('Custom js/css code added at the end of the <body> tag.')}
                         ${_('Use <script> or <css> tags to define custom styling or scripting')}</span>
         </div>
     </div>
 </div>
 
 <div class="buttons">
     ${h.submit('save',_('Save settings'),class_="btn")}
     ${h.reset('reset',_('Reset'),class_="btn")}
 </div>
 ${h.end_form()}
 
 
 
 ## TEMPLATES ##
 ###############
 
 <script id="ga_tmpl" type="text/x-template">
 <%text filter="h">
 <script>
  // Google Analytics
  // Put your Google Analytics code instead of _GACODE_
  var _gaq_code = '_GACODE_';
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', _gaq_code]);
  _gaq.push(['_trackPageview']);
 
  (function() {
   var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
   ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
   var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
  rhodecode_statechange_callback = function(url, data){
   // ANALYTICS callback on html5 history state changed
   // triggered by file browser, url is the new url,
   // data is extra info passed from the State object
   if (typeof window._gaq !== 'undefined') {
     _gaq.push(['_trackPageview', url]);
   }
  };
 </script>
 </%text>
 </script>
 
 
 
 <script id="clicky_tmpl" type="text/x-template">
 <%text filter="h">
 <script src="//static.getclicky.com/js" type="text/javascript"></script>
 <script type="text/javascript">
  // Clicky Analytics - should be used in the footer code section.
  // Put your Clicky code instead of _CLICKYCODE_ here,
  // and below in the <img> tag.
  var _cl_code = _CLICKYCODE_;
  try{clicky.init(_cl_code);}catch(e){}
 
  rhodecode_statechange_callback = function(url, data){
   // ANALYTICS callback on html5 history state changed
   // triggered by file browser, url is the new url,
   // data is extra info passed from the State object
   if (typeof window.clicky !== 'undefined') {
    clicky.log(url);
   }
 }
 </script>
 <noscript>
 // Put your clicky code in the src file.
 <p><img alt="Clicky" width="1" height="1"
         src="//in.getclicky.com/_CLICKYCODE_ns.gif" /></p>
 </noscript>
 </%text>
 </script>
 
 
 
 <script id="server_announce_tmpl" type='text/x-template'>
 <%text filter="h">
 <script>
 // Server announcement displayed on the top of the page.
 // This can be used to send a global maintenance messages or other
 // important messages to all users of the RhodeCode Enterprise system.
 
 $(document).ready(function(e) {
 
  // EDIT - put your message below
  var message = "TYPE YOUR MESSAGE HERE";
 
  // EDIT - choose "info"/"warning"/"error"/"success"/"neutral" as appropriate
  var alert_level = "info";
 
  $("#body").prepend(
   ("<div id='server-announcement' class='"+alert_level+"'>_MSG_"+"</div>").replace("_MSG_", message)
  )
 })
 </script>
 </%text>
 </script>
 
 <script id="flash_filtering_tmpl" type='text/x-template'>
 <%text filter="h">
 <script>
     // This filters out some flash messages before they are presented to user
     // based on their contents. Could be used to filter out warnings/errors
     // of license messages
 
     var filteredMessages = [];
     for(var i =0; i< alertMessagePayloads.length; i++){
         if (typeof alertMessagePayloads[i].message.subdata.subtype !== 'undefined' &&
                 alertMessagePayloads[i].message.subdata.subtype.indexOf('rc_license') !== -1){
             continue
         }
         filteredMessages.push(alertMessagePayloads[i]);
     }
     alertMessagePayloads = filteredMessages;
 </script>
 </%text>
 </script>
 
 
 <script id="custom_logo_tmpl" type='text/x-template'>
 <%text filter="h">
 <script>
-// Set custom logo on login page.
+
 $(document).ready(function(e) {
+    // 1) Set custom logo on login/register pages.
 
-    // external, custom company logo
+    // external URL, custom company logo
     //$('.sign-in-image').attr("src", "http://server.com/logo_path/custom_logo.png");
 
     // Alternative logo from static folder
     $('.sign-in-image').attr("src", "/_static/rhodecode/images/RhodeCode_Logo_Black.png");
+
 	// set width/height
     $('.sign-in-image').css({"width": "300px", "height": "345px"});
 
+    // 2) Header logo on top bar
+    $('.logo-wrapper').find('img').attr('src', 'http://server.com/logo_path/custom_header_logo.png')
+
 });
 </script>
 </%text>
 </script>
 
 
 <script>
 var pre_cm = initCodeMirror('rhodecode_pre_code', '', false);
 var pre_old = pre_cm.getValue();
 
 var post_cm = initCodeMirror('rhodecode_post_code', '', false);
 var post_old = post_cm.getValue();
 
 var get_data = function(type, old) {
     var get_tmpl = function(tmpl_name){
         // unescape some stuff
         return htmlEnDeCode.htmlDecode($('#'+tmpl_name+'_tmpl').html());
     };
     return {
         '#': old,
         'ga': get_tmpl('ga'),
         'clicky': get_tmpl('clicky'),
         'server_announce': get_tmpl('server_announce'),
         'flash_filtering': get_tmpl('flash_filtering'),
         'custom_logo': get_tmpl('custom_logo')
     }[type]
 };
 
 $('#pre_template').select2({
     containerCssClass: 'drop-menu',
     dropdownCssClass: 'drop-menu-dropdown',
     dropdownAutoWidth: true,
     minimumResultsForSearch: -1
 });
 
 $('#post_template').select2({
     containerCssClass: 'drop-menu',
     dropdownCssClass: 'drop-menu-dropdown',
     dropdownAutoWidth: true,
     minimumResultsForSearch: -1
 });
 
 $('#post_template').on('change', function(e){
     var sel = this.value;
     post_cm.setValue(get_data(sel, post_old))
 });
 
 $('#pre_template').on('change', function(e){
     var sel = this.value;
     pre_cm.setValue(get_data(sel, pre_old))
 })
 </script>