kallithea Changeset - b4c77ea1221f

Changeset - b4c77ea1221f

Parent rev.

Child rev.

[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:

kallithea/public/less/style.less

kallithea/templates/admin/settings/settings_hooks.html

0 comments (0 inline, 0 general)

kallithea/public/less/style.less

➞

Show inline comments

@@ @@ -688,96 +688,98 @@ div.comment-prev-next-links div.next-com @@
   .make-xs-column(1);
   height: 0;
+}
 #graph_content,
 #graph_content_pr,
 #updaterevs-table {
   .make-xs-column-offset(1);
   .make-xs-column(11);
+}
 /* use bootstrap grid columns for centered columns */
 .centered-column {
   .make-sm-column-offset(3);
   .make-sm-column(6);
   .form {
     .form-horizontal;
     .form-group > label {
       .make-sm-column(4);
+    }
     .form-group > div {
       .make-sm-column(8);
+    }
     .form-group > div:first-child { /* in case there is no label */
       .make-sm-column-offset(4);
       .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);
+  }
+}
 #summary-menu-stats {
   .make-sm-column(2);
+}
 /* use columns and form-horizontal for pull request page */
 .pr-box {
   .make-sm-column(9);
   max-width: @container-md;
   #pr-summary {
     .form-horizontal;
     .form-group > label {
       .make-sm-column(3);
+    }
     .form-group > div {
       .make-sm-column(9);
+    }
     .form-group > .buttons {
       .make-sm-column-offset(3);
       .make-sm-column(9);
+    }
+  }
+}

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")}
             </div>
         </div>
 </div>
 ${h.end_form()}
 % endif
 <script type="text/javascript">
 function delete_hook(hook_id, field_id) {
     var sUrl = ${h.js(h.url('admin_settings_hooks_delete'))};
     var success = function (o) {
             $('#' + field_id).remove();
         };
     var failure = function (o) {
             alert(${h.js(_('Failed to remove hook'))});
         };
     var postData = {'hook_id': hook_id};
     ajaxPOST(sUrl, postData, success, failure);
 };
 </script>

0 comments (0 inline, 0 general)