Changeset - b4c77ea1221f
[Not reviewed]
default
0 2 0
Thomas De Schampheleire - 8 years ago 2018-05-21 14:52:36
thomas.de_schampheleire@nokia.com
admin: hooks: handle overflow of long hook names

Some hook names are quite long and are visually truncated in the admin
section. Use the same principle as on the System Info: hide overflow and add
ellipsis, use a title attribute to let users discover the full name on
hover.
2 files changed with 4 insertions and 2 deletions:
0 comments (0 inline, 0 general)
kallithea/public/less/style.less
Show inline comments
 
@@ -712,48 +712,50 @@ div.comment-prev-next-links div.next-com
 
      .make-sm-column(8);
 
    }
 
  }
 
}
 

	
 
/* use columns and form-horizontal for settings pages ... on wide screens */
 
@media (min-width: @screen-sm-min) {
 
  .settings {
 
    max-width: @container-md;
 
    > ul.nav-stacked {
 
      .make-sm-column(2);
 
      max-width: (@container-md/12)*2;
 
    }
 
    > div {
 
      .make-sm-column(10);
 
      max-width: (@container-md/12)*10;
 
    }
 
    .form {
 
      .form-horizontal;
 
    }
 
    .form-group {
 
      .clearfix;
 
      > label {
 
        .make-xs-column(3);
 
        overflow: hidden;
 
        text-overflow: ellipsis;
 
        input {
 
          width: 100%;
 
        }
 
      }
 
      > div {
 
        .make-xs-column(9);
 
      }
 
      .buttons {
 
        .make-xs-column-offset(3);
 
      }
 
    }
 
  }
 
}
 

	
 
/* use columns and form-horizontal for summary page */
 
#summary {
 
  max-width: @container-md;
 
  .form-horizontal;
 
  .make-sm-column(10);
 
  .form-group > label {
 
    .make-sm-column(2);
 
  }
 
  .form-group > div {
 
    .make-sm-column(10);
kallithea/templates/admin/settings/settings_hooks.html
Show inline comments
 
<div class="form">
 
      <div class="form-group">
 
      <h4>${_('Built-in Mercurial Hooks (Read-Only)')}</h4>
 
      % for hook in c.hooks:
 
        <% input_id = hook.ui_key.replace('.', '_') %>
 
            <label class="control-label" for="${input_id}">${hook.ui_key}</label>
 
            <label class="control-label" for="${input_id}" title="${hook.ui_key}">${hook.ui_key}</label>
 
            <div>
 
              ${h.text(hook.ui_key,hook.ui_value,id=input_id,size=60,readonly="readonly",class_='form-control')}
 
            </div>
 
      % endfor
 
      </div>
 
</div>
 

	
 
% if c.visual.allow_custom_hooks_settings:
 
${h.form(url('admin_settings_hooks'), method='post')}
 
<div class="form">
 
        <h4>${_('Custom Hooks')}</h4>
 
        <span class="help-block">${_('Hooks can be used to trigger actions on certain events such as push / pull. They can trigger Python functions or external applications.')}</span>
 
        %for hook in c.custom_hooks:
 
            <div class="form-group form-inline" id="${'id%s' % hook.ui_id }">
 
                <% input_id = hook.ui_key.replace('.', '_') %>
 
                    <label class="control-label" for="${input_id}">${hook.ui_key}</label>
 
                    <label class="control-label" for="${input_id}" title="${hook.ui_key}">${hook.ui_key}</label>
 
                    <div>
 
                        ${h.hidden('hook_ui_key',hook.ui_key,id='hook_ui_key_'+input_id)}
 
                        ${h.hidden('hook_ui_value',hook.ui_value,id='hook_ui_value_'+input_id)}
 
                        ${h.text('hook_ui_value_new',hook.ui_value,id=input_id,size=60,class_='form-control')}
 
                        <button type="button" class="btn btn-default btn-xs"
 
                            onclick="delete_hook(${hook.ui_id},'${'id%s' % hook.ui_id }')">
 
                            <i class="icon-trashcan"></i>
 
                            ${_('Delete')}
 
                        </button>
 
                    </div>
 
            </div>
 
        %endfor
 

	
 
        <div class="form-group form-inline">
 
            <label>
 
                ${h.text('new_hook_ui_key',size=15,class_='form-control')}
 
            </label>
 
            <div>
 
                ${h.text('new_hook_ui_value',size=60,class_='form-control')}
 
            </div>
 
        </div>
 
        <div class="form-group">
 
            <div class="buttons">
 
                ${h.submit('save',_('Save'),class_="btn btn-default")}
0 comments (0 inline, 0 general)