Changeset - 80ae9f5e9b32
[Not reviewed]
default
0 5 0
Mads Kiilerich - 8 years ago 2017-06-18 01:09:18
mads@kiilerich.com
notifications: remove custom 'container' class to avoid conflict with Bootstrap ... and rewrite things to use plain Bootstrap

Most of the markup and styling turned out to be easy to replace with plain
Bootstrap markup.
5 files changed with 18 insertions and 67 deletions:
0 comments (0 inline, 0 general)
kallithea/public/css/style.css
Show inline comments
 
@@ -2935,88 +2935,48 @@ form.comment-inline-form {
 

	
 
.inline-comments .comment .text {
 
    background-color: #FAFAFA;
 
    margin: 6px;
 
}
 

	
 
.inline-comments .comments-number {
 
    padding: 0px 0px 10px 0px;
 
    color: #666;
 
}
 

	
 
input.status_change_checkbox,
 
input.status_change_radio {
 
    margin: 0 0 5px 15px;
 
}
 

	
 
.badge {
 
    padding: 4px 4px !important;
 
    text-align: center;
 
    color: #888 !important;
 
    background-color: #DEDEDE !important;
 
    border-radius: 4px !important;
 
}
 

	
 
.notification-header {
 
    padding-top: 6px;
 
}
 
.notification-header .desc {
 
    font-size: 16px;
 
    height: 24px;
 
    float: left
 
}
 
.notification-list .container.unread {
 
    background: none repeat scroll 0 0 rgba(255, 255, 180, 0.6);
 
}
 
.notification-header .gravatar {
 
    background: none repeat scroll 0 0 transparent;
 
    padding: 0px 0px 0px 8px;
 
}
 
.notification-list .container .notification-header .desc {
 
    font-weight: bold;
 
    font-size: 17px;
 
}
 
.notification-header .delete-notifications {
 
    float: right;
 
    padding-top: 8px;
 
    cursor: pointer;
 
}
 
.notification-header .read-notifications {
 
    float: right;
 
    padding-top: 8px;
 
    cursor: pointer;
 
}
 
.notification-subject {
 
    clear: both;
 
    border-bottom: 1px solid #eee;
 
    padding: 5px 0px;
 
}
 

	
 
.notification-body {
 
    clear: both;
 
    margin: 34px 2px 2px 8px
 
}
 

	
 
/****
 
PULL REQUESTS
 
*****/
 
.pullrequests_section_head {
 
    padding: 10px 10px 10px 0px;
 
    margin: 0 15px;
 
    font-size: 16px;
 
    font-weight: bold;
 
}
 

	
 
div.pr-details-title.closed {
 
    color: #555;
 
    background: #eee;
 
}
 

	
 
div.pr {
 
    margin: 0px 15px;
 
    padding: 4px 4px;
 
}
 
div.pr-desc {
 
    margin: 0px 15px;
 
}
 
tr.pr-closed td {
 
    background-color: #eee !important;
kallithea/public/js/base.js
Show inline comments
 
@@ -950,49 +950,49 @@ var getSelectionLink = function(e) {
 
            $hl_div.show();
 
        }
 
        else{
 
            $hl_div.hide();
 
        }
 
    }
 
};
 

	
 
var deleteNotification = function(url, notification_id, callbacks){
 
    var success = function(o){
 
            $("#notification_"+notification_id).remove();
 
            _run_callbacks(callbacks);
 
        };
 
    var failure = function(o){
 
            alert("deleteNotification failure");
 
        };
 
    var postData = {};
 
    var sUrl = url.replace('__NOTIFICATION_ID__',notification_id);
 
    ajaxPOST(sUrl, postData, success, failure);
 
};
 

	
 
var readNotification = function(url, notification_id, callbacks){
 
    var success = function(o){
 
            var $obj = $("#notification_"+notification_id);
 
            $obj.removeClass('unread');
 
            $obj.removeClass('list-group-item-warning');
 
            $obj.find('.read-notification').remove();
 
            _run_callbacks(callbacks);
 
        };
 
    var failure = function(o){
 
            alert("readNotification failure");
 
        };
 
    var postData = {};
 
    var sUrl = url.replace('__NOTIFICATION_ID__',notification_id);
 
    ajaxPOST(sUrl, postData, success, failure);
 
};
 

	
 
/**
 
 * Autocomplete functionality
 
 */
 

	
 
// Custom search function for the DataSource of users
 
var autocompleteMatchUsers = function (sQuery, myUsers) {
 
    // Case insensitive matching
 
    var query = sQuery.toLowerCase();
 
    var i = 0;
 
    var l = myUsers.length;
 
    var matches = [];
 

	
 
    // Match against each name of each contact
kallithea/templates/admin/notifications/notifications.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="/base/base.html"/>
 

	
 
<%block name="title">
 
    ${_('My Notifications')} ${request.authuser.username}
 
</%block>
 

	
 
<%def name="breadcrumbs_links()">
 
    ${_('My Notifications')}
 
</%def>
 

	
 
<%block name="header_menu">
 
    ${self.menu('admin')}
 
</%block>
 

	
 
<%def name="main()">
 
<div class="panel panel-primary">
 
    <div class="panel-heading clearfix">
 
        ${self.breadcrumbs()}
 
    </div>
 

	
 
    <div class="panel-body">
 
      <div class="pull-left">
 
            <span id='all' class="btn btn-default btn-sm"><a href="${h.url.current()}">${_('All')}</a></span>
 
            <span id='comment' class="btn btn-default btn-sm"><a href="${h.url.current(type=c.comment_type)}">${_('Comments')}</a></span>
 
            <span id='pull_request' class="btn btn-default btn-sm"><a href="${h.url.current(type=c.pull_request_type)}">${_('Pull Requests')}</a></span>
 
            <a class="btn btn-default btn-sm" href="${h.url.current()}">${_('All')}</a>
 
            <a class="btn btn-default btn-sm" href="${h.url.current(type=c.comment_type)}">${_('Comments')}</a>
 
            <a class="btn btn-default btn-sm" href="${h.url.current(type=c.pull_request_type)}">${_('Pull Requests')}</a>
 
      </div>
 
      %if c.notifications:
 
        <span id='mark_all_read' class="btn btn-default btn-sm pull-right">${_('Mark All Read')}</span>
 
      %endif
 
    </div>
 
    <div id="notification_data" class="panel-body">
 
        <%include file='notifications_data.html'/>
 
    </div>
 
</div>
 
<script type="text/javascript">
 
var url_delete = ${h.js(url('notification_delete', notification_id='__NOTIFICATION_ID__'))};
 
var url_read = ${h.js(url('notification_update', notification_id='__NOTIFICATION_ID__'))};
 
var run = function(){
 
  $('.delete-notification').click(function(e){
 
    var notification_id = e.currentTarget.id;
 
    deleteNotification(url_delete,notification_id);
 
  });
 
  $('.read-notification').click(function(e){
 
    var notification_id = e.currentTarget.id;
 
    readNotification(url_read,notification_id);
 
  });
 
}
 
run();
 
$('#mark_all_read').click(function(){
kallithea/templates/admin/notifications/notifications_data.html
Show inline comments
 

	
 
%if c.notifications:
 
<%
 
unread = lambda n:{False:'unread'}.get(n)
 
%>
 

	
 
<div class="notification-list notification-table list-group">
 
<div class="list-group">
 
%for notification in c.notifications:
 
  <div id="notification_${notification.notification.notification_id}" class="list-group-item ${unread(notification.read)}">
 
    <div>
 
  <div id="notification_${notification.notification.notification_id}" class="list-group-item ${'' if notification.read else 'list-group-item-warning'} clearfix">
 
      ${h.gravatar_div(notification.notification.created_by_user.email, size=24)}
 
      <span class="desc ${unread(notification.read)}">
 
      <span class="pull-left">
 
        <a href="${url('notification', notification_id=notification.notification.notification_id)}">${notification.notification.description}</a>
 
      </span>
 
      <span class="delete-notifications" title="${_('Delete')}">
 
        <span id="${notification.notification.notification_id}" class="delete-notification"><i class="btn icon-minus-circled"></i></span>
 
      </span>
 
      <span class="pull-right">
 
      %if not notification.read:
 
      <span class="read-notifications" title="${_('Mark as read')}">
 
        <span id="${notification.notification.notification_id}" class="read-notification"><i class="btn icon-ok"></i></span>
 
          <span id="${notification.notification.notification_id}" class="btn btn-default btn-xs read-notification"><i class="icon-ok"></i>${_('Mark as read')}</span>
 
        %endif
 
        <span id="${notification.notification.notification_id}" class="btn btn-default btn-xs delete-notification"><i class="icon-minus-circled"></i>${_('Delete')}</span>
 
      </span>
 
      %endif
 
    </div>
 
    <div class="notification-subject"></div>
 
  </div>
 
%endfor
 
</div>
 

	
 
<ul class="pagination">
 
    ${c.notifications.pager(controller='admin/notifications', **request.GET.mixed())}
 
</ul>
 

	
 
%else:
 
    <div>${_('No notifications here yet')}</div>
 
%endif
kallithea/templates/admin/notifications/show_notification.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="/base/base.html"/>
 

	
 
<%block name="title">
 
    ${_('Show Notification')} ${request.authuser.username}
 
</%block>
 

	
 
<%def name="breadcrumbs_links()">
 
    ${h.link_to(_('Notifications'),h.url('notifications'))}
 
    &raquo;
 
    ${_('Show Notification')}
 
</%def>
 

	
 
<%block name="header_menu">
 
    ${self.menu('admin')}
 
</%block>
 

	
 
<%def name="main()">
 
<div class="panel panel-primary">
 
    <div class="panel-heading clearfix">
 
        ${self.breadcrumbs()}
 
    </div>
 
    <div class="panel-body">
 
      <div id="notification_${c.notification.notification_id}">
 
        <div class="notification-header">
 
        <div class="clearfix">
 
          ${h.gravatar_div(c.notification.created_by_user.email, size=24)}
 
          <span class="desc">
 
          <span class="pull-left">
 
              ${c.notification.description}
 
          </span>
 
          <span class="delete-notifications">
 
            <span id="${c.notification.notification_id}" class="delete-notification action"><i class="btn icon-minus-circled"></i></span>
 
          </span>
 
          <span id="${c.notification.notification_id}" class="delete-notification btn btn-default pull-right"><i class="icon-minus-circled"></i>${_('Delete')}</span>
 
        </div>
 
        <div class="notification-body">
 
            <div class="notification-subject">${h.literal(c.notification.subject)}</div>
 
        <div>
 
            %if c.notification.subject:
 
                <div class="h4">${h.literal(c.notification.subject)}</div>
 
            %endif
 
            <div class="well">
 
            %if c.notification.body:
 
                ${h.render_w_mentions(c.notification.body)}
 
            %endif
 
            </div>
 
        </div>
 
      </div>
 
    </div>
 
</div>
 
<script type="text/javascript">
 
var url = ${h.js(url('notification_delete', notification_id='__NOTIFICATION_ID__'))};
 
var main = ${h.js(url('notifications'))};
 
   $('.delete-notification').click(function(e){
 
       var notification_id = e.currentTarget.id;
 
       deleteNotification(url,notification_id,[function(){window.location=main}]);
 
   });
 
</script>
 
</%def>
0 comments (0 inline, 0 general)