kallithea Changeset - 19f40a5088d4

Changeset - 19f40a5088d4

Parent rev.

Child rev.

[Not reviewed]

default

0 6 0

domruf - 9 years ago 2017-06-27 21:49:33
dominikruf@gmail.com

templates: don't abuse elements as links or buttons

Bootstrap recommends using <button>, so most of the time we should use that.

Except if we don't want the additional padding of a button (like for the expand
'button' on the changelog page).

6 files changed with 10 insertions and 11 deletions:

kallithea/public/css/style.css

kallithea/templates/admin/repo_groups/repo_group_edit_perms.html

kallithea/templates/admin/repos/repo_edit_permissions.html

kallithea/templates/admin/user_groups/user_group_edit_perms.html

kallithea/templates/changeset/diff_block.html

kallithea/templates/pullrequests/pullrequest_data.html

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -2134,96 +2134,101 @@ div.gravatar img { @@
+}
 .panel-body.settings > ul.nav-stacked li:hover > a {
     text-decoration: none;
     background-color: #eee;
+}
 .panel-body.settings > div,
 .panel-body.settings > form {
     float: left;
     width: 750px;
     margin: 0;
+}
 .panel-body.no-padding {
     padding: 0;
+}
 .panel-body ~ .panel-body {
     padding-top: 0;
+}
 .panel-body.no-padding ~ .panel-body {
     padding-top: 15px;
+}
 .panel-body > :last-child {
     margin-bottom: 0;
+}
 .panel-body.settings .text-muted {
     margin: 5px 0;
+}
 /* No white Bootstrap buttons */
 body .btn.btn-default {
     background-color: #DADADA;
     background-repeat: repeat-x;
     background-image: linear-gradient(to bottom, #F4F4F4, #DADADA);
     border-top: 1px solid #DDD;
     border-left: 1px solid #c6c6c6;
     border-right: 1px solid #DDD;
     border-bottom: 1px solid #c6c6c6;
+}
 body .btn.btn-default:hover {
     background-image: none;
+}
 /* use our link color for btn-link */
 .btn-link {
     color: #577632;
+}
 ins, div.options a:hover {
     text-decoration: none;
+}
 img,
 nav.navbar #quick li a:hover span.normal,
 #clone_url,
 #clone_url_id
+{
     border: none;
+}
 img.icon, .right .merge img {
     vertical-align: bottom;
+}
 nav.navbar ul#logged-user,
 #content div.panel div.panel-heading ul.links,
 #content div.panel div.message div.dismiss,
 #content div.panel div.traffic div.legend ul {
     float: right;
     margin: 0;
     padding: 0;
+}
 nav.navbar #home,
 #content div.panel ul.left,
 #content div.panel ol.left,
 div#commit_history,
 div#legend_data, div#legend_container, div#legend_choices {
     float: left;
+}
 div#commit_history {
     width: 450px;
     height: 300px
+}
 div#overview {
     clear: both;
     width: 450px;
     height: 100px;
+}
 #content #left #menu ul.closed,
 #content #left #menu li ul.collapsed,
 .yui-tt-shadow {
     display: none;
@@ @@ -2933,102 +2938,96 @@ span.pr-closed-tag { @@
     white-space: nowrap;
     border-radius: 3px;
+}
 #perms .perm_tag.admin {
     background-color: #B94A48;
     color: #ffffff;
+}
 #perms .perm_tag.write {
     background-color: #DB7525;
     color: #ffffff;
+}
 #perms .perm_tag.read {
     background-color: #468847;
     color: #ffffff;
+}
 #perms .perm_tag.none {
     background-color: #bfbfbf;
     color: #ffffff;
+}
 input.perm_filter {
     position: relative;
     top: 2px;
+}
 .perm-gravatar {
     vertical-align: middle;
     padding: 2px;
+}
 .perm-gravatar-ac {
     vertical-align: middle;
     padding: 2px;
     width: 14px;
     height: 14px;
+}
 /*****************************************************************************
                                   DIFFS CSS
 ******************************************************************************/
 .diff-collapse {
     text-align: center;
     margin-bottom: 15px;
+}
 .diff-collapse-button {
     cursor: pointer;
     color: #666;
     font-size: 16px;
+}
 table.code-difftable {
     border-collapse: collapse;
     border-radius: 0px !important;
     width: 100%;
+}
 table.code-difftable td {
     padding: 0 !important;
     background: none !important;
     border: 0 !important;
     vertical-align: baseline !important
+}
 table.code-difftable .context {
     background: none repeat scroll 0 0 #DDE7EF;
     color: #999;
+}
 table.code-difftable .add {
     background: none repeat scroll 0 0 #DDFFDD;
+}
 table.code-difftable .add ins {
     background: none repeat scroll 0 0 #AAFFAA;
     text-decoration: none;
+}
 table.code-difftable .del {
     background: none repeat scroll 0 0 #FFDDDD;
+}
 table.code-difftable .del del {
     background: none repeat scroll 0 0 #FFAAAA;
     text-decoration: none;
+}
 table.code-highlighttable div.code-highlight pre u:before,
 table.code-difftable td.code pre u:before {
     content: "\21a6";
     display: inline-block;
     width: 0;
+}
 table.code-highlighttable div.code-highlight pre u.cr:before,
 table.code-difftable td.code pre u.cr:before {
     content: "\21a4";
     display: inline-block;
     color: rgba(0,0,0,0.5);
+}
 table.code-highlighttable div.code-highlight pre u,
 table.code-difftable td.code pre u {
     color: rgba(0,0,0,0.15);
+}
 table.code-highlighttable div.code-highlight pre i,
 table.code-difftable td.code pre i {

kallithea/templates/admin/repo_groups/repo_group_edit_perms.html

➞

Show inline comments

@@ @@ -32,92 +32,92 @@ ${h.form(url('edit_repo_group_perms', gr @@
                           %if r2p.user.username !='default':
                             <button type="button" class="btn btn-default btn-xs" onclick="ajaxActionRevoke(${r2p.user.user_id}, 'user', '${'id%s'%id(r2p.user.username)}', '${r2p.user.username}')">
                              <i class="icon-minus-circled"></i> ${_('Revoke')}
                             </button>
                           %endif
                         </td>
                       %else:
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'group.none', disabled="disabled")}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'group.read', disabled="disabled")}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'group.write', disabled="disabled")}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'group.admin', disabled="disabled")}</td>
                         <td>
                             ${h.gravatar(r2p.user.email, cls="perm-gravatar", size=14)}
                             ${r2p.user.username if r2p.user.username != 'default' else _('Default')}
                         </td>
                         <td><i class="icon-user"></i> ${_('Admin')}</td>
                       %endif
                     </tr>
                 %endfor
                 ## USER GROUPS
                 %for g2p in c.repo_group.users_group_to_perm:
                     <tr id="id${id(g2p.users_group.users_group_name)}">
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'group.none')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'group.read')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'group.write')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'group.admin')}</td>
                         <td>
                             <i class="icon-users"></i>
                             %if h.HasPermissionAny('hg.admin')():
                              <a href="${h.url('edit_users_group',id=g2p.users_group.users_group_id)}">
                                  ${g2p.users_group.users_group_name}
                              </a>
                             %else:
                              ${g2p.users_group.users_group_name}
                             %endif
                         </td>
                         <td>
                             <button type="button" class="btn btn-default btn-xs" onclick="ajaxActionRevoke(${g2p.users_group.users_group_id}, 'user_group', '${'id%s'%id(g2p.users_group.users_group_name)}', '${g2p.users_group.users_group_name}')">
                             <i class="icon-minus-circled"></i> ${_('Revoke')}
                             </button>
                         </td>
                     </tr>
                 %endfor
                 ## New entries added by addPermAction here.
                 <tr class="new_members last_new_member" id="add_perm_input"><td colspan="6"></td></tr>
                 <tr>
                     <td colspan="6">
-                        <button type="button" id="add_perm" class="btn btn-default btn-xs">
+                        <button type="button" id="add_perm" class="btn btn-link btn-xs">
                             <i class="icon-plus"></i> ${_('Add new')}
                         </button>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="6">
                        ${_('Apply to children')}:
                        ${h.radio('recursive', 'none', label=_('None'), checked="checked")}
                        ${h.radio('recursive', 'groups', label=_('Repository Groups'))}
                        ${h.radio('recursive', 'repos', label=_('Repositories'))}
                        ${h.radio('recursive', 'all', label=_('Both'))}
                        <span class="help-block">${_('Set or revoke permission to all children of that group, including non-private repositories and other groups if selected.')}</span>
                     </td>
                 </tr>
             </table>
         </div>
         <div class="buttons">
             ${h.submit('save',_('Save'),class_="btn btn-default")}
             ${h.reset('reset',_('Reset'),class_="btn btn-default")}
         </div>
     </div>
 </div>
 ${h.end_form()}
 <script type="text/javascript">
     function ajaxActionRevoke(obj_id, obj_type, field_id, obj_name) {
         url = ${h.jshtml(h.url('edit_repo_group_perms_delete', group_name=c.repo_group.group_name))};
         var revoke_msg = _TM['Confirm to revoke permission for {0}: {1} ?'].format(obj_type.replace('_', ' '), obj_name);
         if (confirm(revoke_msg)){
             var recursive = $('input[name=recursive]:checked').val();
             ajaxActionRevokePermission(url, obj_id, obj_type, field_id, {recursive:recursive});
+        }
     };
     $(document).ready(function () {
         if (!$('#perm_new_member_name').hasClass('error')) {
             $('#add_perm_input').hide();
+        }
         $('#add_perm').click(function () {
             addPermAction('group', ${h.js(c.users_array)}, ${h.js(c.user_groups_array)});
         });
     });
 </script>

kallithea/templates/admin/repos/repo_edit_permissions.html

➞

Show inline comments

@@ @@ -28,80 +28,80 @@ ${h.form(url('edit_repo_perms_update', r @@
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'repository.read')}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'repository.write')}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'repository.admin')}</td>
                         <td>
                             ${h.gravatar(r2p.user.email, size=14)}
                             %if h.HasPermissionAny('hg.admin')() and r2p.user.username != 'default':
                              <a href="${h.url('edit_user',id=r2p.user.user_id)}">${r2p.user.username}</a>
                             %else:
                              ${r2p.user.username if r2p.user.username != 'default' else _('Default')}
                             %endif
                         </td>
                         <td>
                           %if r2p.user.username !='default':
                             <button type="button" class="btn btn-default btn-xs" onclick="ajaxActionRevoke(${r2p.user.user_id}, 'user', '${'id%s'%id(r2p.user.username)}', '${r2p.user.username}')">
                             <i class="icon-minus-circled"></i> ${_('Revoke')}
                             </button>
                           %endif
                         </td>
                     </tr>
                     %endif
                 %endfor
                 ## USER GROUPS
                 %for g2p in sorted(c.repo_info.users_group_to_perm, key=lambda x:x.users_group.users_group_name):
                     <tr id="id${id(g2p.users_group.users_group_name)}">
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'repository.none')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'repository.read')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'repository.write')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.users_group.users_group_name,'repository.admin')}</td>
                         <td>
                             <i class="icon-users"></i>
                             %if h.HasPermissionAny('hg.admin')():
                              <a href="${h.url('edit_users_group',id=g2p.users_group.users_group_id)}">${g2p.users_group.users_group_name}</a>
                             %else:
                              ${g2p.users_group.users_group_name}
                             %endif
                         </td>
                         <td>
                             <button type="button" class="btn btn-default btn-xs" onclick="ajaxActionRevoke(${g2p.users_group.users_group_id}, 'user_group', '${'id%s'%id(g2p.users_group.users_group_name)}', '${g2p.users_group.users_group_name}')">
                             <i class="icon-minus-circled"></i> ${_('Revoke')}
                             </button>
                         </td>
                     </tr>
                 %endfor
                 ## New entries added by addPermAction here.
                 <tr class="new_members last_new_member" id="add_perm_input"><td colspan="6"></td></tr>
                 <tr>
                     <td colspan="6">
-                        <button type="button" id="add_perm" class="btn btn-default btn-xs">
+                        <button type="button" id="add_perm" class="btn btn-link btn-xs">
                             <i class="icon-plus"></i> ${_('Add new')}
                         </button>
                     </td>
                 </tr>
             </table>
         </div>
         <div class="form-group">
             ${h.submit('save',_('Save'),class_="btn btn-default")}
             ${h.reset('reset',_('Reset'),class_="btn btn-default")}
         </div>
 </div>
 ${h.end_form()}
 <script type="text/javascript">
     function ajaxActionRevoke(obj_id, obj_type, field_id, obj_name) {
         url = ${h.js(h.url('edit_repo_perms_revoke',repo_name=c.repo_name))};
         var revoke_msg = _TM['Confirm to revoke permission for {0}: {1} ?'].format(obj_type.replace('_', ' '), obj_name);
         if (confirm(revoke_msg)){
             ajaxActionRevokePermission(url, obj_id, obj_type, field_id);
+        }
     };
     $(document).ready(function () {
         if (!$('#perm_new_member_name').hasClass('error')) {
             $('#add_perm_input').hide();
+        }
         $('#add_perm').click(function () {
             addPermAction('repository', ${h.js(c.users_array)}, ${h.js(c.user_groups_array)});
         });
     });
 </script>

kallithea/templates/admin/user_groups/user_group_edit_perms.html

➞

Show inline comments

@@ @@ -32,81 +32,81 @@ ${h.form(url('edit_user_group_perms_upda @@
                           %if r2p.user.username !='default':
                             <button type="button" class="btn btn-default btn-xs" onclick="ajaxActionRevoke(${r2p.user.user_id}, 'user', '${'id%s'%id(r2p.user.username)}', '${r2p.user.username}')">
                              <i class="icon-minus-circled"></i> ${_('Revoke')}
                             </button>
                           %endif
                         </td>
                       %else:
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'usergroup.none', disabled="disabled")}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'usergroup.read', disabled="disabled")}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'usergroup.write', disabled="disabled")}</td>
                         <td>${h.radio('u_perm_%s' % r2p.user.username,'usergroup.admin', disabled="disabled")}</td>
                         <td>
                             ${h.gravatar(r2p.user.email, cls="perm-gravatar", size=14)}
                             ${r2p.user.username if r2p.user.username != 'default' else _('Default')}
                         </td>
                         <td><i class="icon-user"></i> ${_('Admin')}</td>
                       %endif
                     </tr>
                 %endfor
                 ## USER GROUPS
                 %for g2p in c.user_group.user_group_user_group_to_perm:
                     <tr id="id${id(g2p.user_group.users_group_name)}">
                         <td>${h.radio('g_perm_%s' % g2p.user_group.users_group_name,'usergroup.none')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.user_group.users_group_name,'usergroup.read')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.user_group.users_group_name,'usergroup.write')}</td>
                         <td>${h.radio('g_perm_%s' % g2p.user_group.users_group_name,'usergroup.admin')}</td>
                         <td>
                             <i class="icon-users"></i>
                             %if h.HasPermissionAny('hg.admin')():
                              <a href="${h.url('edit_users_group',id=g2p.user_group.users_group_id)}">
                                  ${g2p.user_group.users_group_name}
                              </a>
                             %else:
                              ${g2p.user_group.users_group_name}
                             %endif
                         </td>
                         <td>
                             <button class="btn btn-default btn-xs" onclick="ajaxActionRevoke(${g2p.user_group.users_group_id}, 'user_group', '${'id%s'%id(g2p.user_group.users_group_name)}', '${g2p.user_group.users_group_name}')">
                             <i class="icon-minus-circled"></i> ${_('Revoke')}
                             </button>
                         </td>
                     </tr>
                 %endfor
                 ## New entries added by addPermAction here.
                 <tr class="new_members last_new_member" id="add_perm_input"><td colspan="6"></td></tr>
                 <tr>
                     <td colspan="6">
-                        <button id="add_perm" class="btn btn-default btn-xs">
+                        <button id="add_perm" class="btn btn-link btn-xs">
                             <i class="icon-plus"></i> ${_('Add new')}
                         </button>
                     </td>
                 </tr>
             </table>
         </div>
         <div class="buttons">
             ${h.submit('save',_('Save'),class_="btn btn-default")}
             ${h.reset('reset',_('Reset'),class_="btn btn-default")}
         </div>
    </div>
 </div>
 ${h.end_form()}
 <script type="text/javascript">
     function ajaxActionRevoke(obj_id, obj_type, field_id, obj_name) {
         url = ${h.js(h.url('edit_user_group_perms_delete', id=c.user_group.users_group_id))};
         var revoke_msg = _TM['Confirm to revoke permission for {0}: {1} ?'].format(obj_type.replace('_', ' '), obj_name);
         if (confirm(revoke_msg)){
             ajaxActionRevokePermission(url, obj_id, obj_type, field_id);
+        }
     };
     $(document).ready(function () {
         if (!$('#perm_new_member_name').hasClass('error')) {
             $('#add_perm_input').hide();
+        }
         $('#add_perm').click(function () {
             addPermAction('usergroup', ${h.js(c.users_array)}, ${h.js(c.user_groups_array)});
         });
     });
 </script>

kallithea/templates/changeset/diff_block.html

➞

Show inline comments

 ## -*- coding: utf-8 -*-
 <%def name="diff_block(a_repo_name, a_ref_type, a_ref_name, a_rev,
                        cs_repo_name, cs_ref_name, cs_ref_type, cs_rev,
                        file_diff_data)">
 <div class="diff-collapse">
-    <span data-target="${'diff-container-%s' % (id(file_diff_data))}" class="diff-collapse-button">&uarr; ${_('Collapse Diff')} &uarr;</span>
+    <button data-target="${'diff-container-%s' % (id(file_diff_data))}" class="diff-collapse-button btn btn-link btn-sm">&uarr; ${_('Collapse Diff')} &uarr;</button>
 </div>
 %for id_fid, url_fid, op, a_filename, cs_filename, diff, stats in file_diff_data:
     ${diff_block_diffblock(id_fid, url_fid, op, diff,
         a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,
         cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename,
         'diff-container-%s' % id(file_diff_data))}
 %endfor
 </%def>
 <%def name="diff_block_diffblock(id_fid, url_fid, op, diff,
     a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename,
     cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename, cls)"
+>
     <div id="${id_fid}_target"></div>
     <div id="${id_fid}" class="panel panel-default ${cls}">
         <div class="panel-heading clearfix">
                 <div class="pull-left">
                     ${h.safe_unicode(cs_filename)}
                 </div>
                 <div class="pull-left diff-actions">
                   <span>
                     %if op == 'A':
                       <span class="no-file" data-toggle="tooltip" title="${_('No file before')}">
                         <i class="icon-minus-circled"></i></span>
                     %else:
                       <a href="${h.url('files_home', repo_name=a_repo_name, f_path=a_filename, revision=a_rev)}" data-toggle="tooltip" title="${_('File before')}">
                         <i class="icon-doc"></i></a>
                     %endif
                     %if op == 'A':
                       <span class="arrow" data-toggle="tooltip" title="${_('Added')}">&#10142;</span>
                     %elif op == 'M':
                       <span class="arrow" data-toggle="tooltip" title="${_('Modified')}">&#10142;</span>
                     %elif op == 'D':
                       <span class="arrow" data-toggle="tooltip" title="${_('Deleted')}">&#10142;</span>
                     %elif op == 'R':
                       <span class="arrow" data-toggle="tooltip" title="${_('Renamed')}">&#10142;</span>
                     %elif op is None:
                       <span class="arrow" data-toggle="tooltip" title="${_('No change')}">&#10142;</span>
                     %else:
                       <span class="arrow" data-toggle="tooltip" title="${_('Unknown operation: %r') % op}">&#10142;</span>
                     %endif
                     %if op == 'D':
                       <span class="no-file" data-toggle="tooltip" title="${_('No file after')}">
                         <i class="icon-minus-circled"></i></span>
                     %else:
                       <a href="${h.url('files_home', repo_name=cs_repo_name, f_path=cs_filename, revision=cs_rev)}" data-toggle="tooltip" title="${_('File after')}">

kallithea/templates/pullrequests/pullrequest_data.html

➞

Show inline comments

@@ @@ -16,71 +16,71 @@ @@
         <th>${_('Owner')}</th>
         <th>${_('Age')}</th>
         <th>${_('From')}</th>
         <th>${_('To')}</th>
         <th>${_('Delete')}</th>
       </tr>
     </thead>
 % for pr in pullrequests:
     <tr class="${'pr-closed' if pr.is_closed() else ''}">
       <td>
         <% status = pr.user_review_status(request.authuser.user_id) %>
         %if status:
           <i class="icon-circle changeset-status-${status}" title="${_('You voted: %s') % h.changeset_status_lbl(status)}"></i>
         %else:
           <i class="icon-circle changeset-status-not_reviewed" title="${_('You didn\'t vote')}"></i>
         %endif
       </td>
       <td>
         <a href="${pr.url()}">
         ${pr.title or _("(no title)")}
         %if pr.is_closed():
           <span class="pr-closed-tag">${_('Closed')}</span>
         %endif
         </a>
       </td>
       <td>
         ${pr.owner.full_name_and_username}
       </td>
       <td>
         <span data-toggle="tooltip" title="${h.fmt_date(pr.created_on)}">
           ${h.age(pr.created_on)}
         </span>
       </td>
       <td>
         <% org_ref_name=pr.org_ref.rsplit(':', 2)[-2] %>
         <a href="${h.url('summary_home', repo_name=pr.org_repo.repo_name, anchor=org_ref_name)}">
           ${pr.org_repo.repo_name}#${org_ref_name}
         </a>
       </td>
       <td>
         <% other_ref_name=pr.other_ref.rsplit(':', 2)[-2] %>
         <a href="${h.url('summary_home', repo_name=pr.other_repo.repo_name, anchor=other_ref_name)}">
           ${pr.other_repo.repo_name}#${other_ref_name}
         </a>
       </td>
       <td>
         %if pr.owner_id == request.authuser.user_id:
           ${h.form(url('pullrequest_delete', repo_name=pr.other_repo.repo_name, pull_request_id=pr.pull_request_id))}
-          <button type="button" class="btn btn-default btn-xs"
+          <button type="button" class="btn btn-link btn-xs"
                   id="remove_${pr.pull_request_id}"
                   name="remove_${pr.pull_request_id}"
                   title="${_('Delete Pull Request')}"
                   onclick="return confirm('${_('Confirm to delete this pull request')}')
                       && ((${len(pr.comments)} == 0) ||
                           confirm('${_('Confirm again to delete this pull request with %s comments') % len(pr.comments)}'))
                       ">
             <i class="icon-minus-circled text-danger"></i>
           </button>
           ${h.end_form()}
         %endif
       </td>
     </tr>
 % endfor
   </table>
 </div>
 %if hasattr(pullrequests, 'pager'):
     ${pullrequests.pager(**request.GET.mixed())}
 %endif
 </%def>

0 comments (0 inline, 0 general)