ui: changed status icons to <i> elements instead of div.

rhodecode/public/css/comments.less

@@ -227,11 +227,6 b' tr.inline-comments div {'
         }
     }
 
-    .flag_status {
-        display: inline-block;
-        margin: -2px .5em 0 .25em
-    }
-
     .delete-comment {
         display: inline-block;
         color: @rcblue;

rhodecode/public/css/main.less

@@ -983,9 +983,6 b' label {'
 }
 
 #graph {
-    .flag_status {
-        margin: 0;
-    }
 
     .pagination-left {
         float: left;
@@ -1090,23 +1087,6 b' label {'
     }
 }
 
-.flag_status {
-    margin: 2px;
-    &.under_review {
-        .circle(5px, @alert3);
-    }
-    &.approved {
-        .circle(5px, @alert1);
-    }
-    &.rejected,
-    &.forced_closed{
-        .circle(5px, @alert2);
-    }
-    &.not_reviewed {
-        .circle(5px, @grey5);
-    }
-}
-
 .review-status {
     &.under_review {
         color: @alert3;
@@ -1153,9 +1133,6 b' label {'
   border-color: @grey5;
 }
 
-.flag_status_comment_box {
-	margin: 5px 6px 0px 2px;
-}
 .test_pattern_preview {
 	margin: @space 0;
 
@@ -1885,10 +1862,6 b' BIN_FILENODE = 7'
       line-height: 15px;
     }
 
-    .flag_status {
-        margin: 0;
-    }
-
     .compare-radio-button {
       position: relative;
       top: -3px;
@@ -1930,10 +1903,6 b' BIN_FILENODE = 7'
 .table_disp {
 	.status {
 		width: auto;
-
-		.flag_status {
-			float: left;
-		}
 	}
 }
 

rhodecode/public/css/select2.less

@@ -108,10 +108,6 b' select.select2{height:28px;visibility:hi'
 
 .drop-menu-dropdown {
     .drop-menu-core;
-
-    .flag_status {
-        margin-top: 0;
-    }
 }
 
 .drop-menu-base {
@@ -122,10 +118,6 b' select.select2{height:28px;visibility:hi'
     z-index: 2;
     cursor: pointer;
 
-    .flag_status {
-        margin-top: 0;
-    }
-
     a {
         display:block;
         padding: .7em;

rhodecode/public/js/src/rhodecode/codemirror.js

@@ -368,8 +368,9 b' var initCommentBoxCodeMirror = function('
             $(CommentForm.statusChange).select2("val", 'approved').trigger('change');
           },
           render: function(elt, data, completion) {
-            var el = document.createElement('div');
-            el.className = "flag_status flag_status_comment_box approved pull-left";
+            var el = document.createElement('i');
+
+            el.className = "icon-circle review-status-approved";
             elt.appendChild(el);
 
             el = document.createElement('span');
@@ -387,8 +388,8 b' var initCommentBoxCodeMirror = function('
               $(CommentForm.statusChange).select2("val", 'rejected').trigger('change');
           },
           render: function(elt, data, completion) {
-              var el = document.createElement('div');
-              el.className = "flag_status flag_status_comment_box rejected pull-left";
+              var el = document.createElement('i');
+              el.className = "icon-circle review-status-rejected";
               elt.appendChild(el);
 
               el = document.createElement('span');
@@ -708,8 +709,8 b' var fillCodeMirrorOptions = function(tar'
         this.initStatusChangeSelector = function(){
             var formatChangeStatus = function(state, escapeMarkup) {
                 var originalOption = state.element;
-                return '<div class="flag_status ' + $(originalOption).data('status') + ' pull-left"></div>' +
-                       '<span>' + escapeMarkup(state.text) + '</span>';
+                var tmpl = '<i class="icon-circle review-status-{0}"></i><span>{1}</span>'.format($(originalOption).data('status'), escapeMarkup(state.text));
+                return tmpl
             };
             var formatResult = function(result, container, query, escapeMarkup) {
                 return formatChangeStatus(result, escapeMarkup);

rhodecode/public/js/src/rhodecode/comments.js

@@ -218,8 +218,8 b' var _submitAjaxPOST = function(url, post'
         this.initStatusChangeSelector = function(){
             var formatChangeStatus = function(state, escapeMarkup) {
                 var originalOption = state.element;
-                return '<div class="flag_status ' + $(originalOption).data('status') + ' pull-left"></div>' +
-                       '<span>' + escapeMarkup(state.text) + '</span>';
+                var tmpl = '<i class="icon-circle review-status-{0}"></i><span>{1}</span>'.format($(originalOption).data('status'), escapeMarkup(state.text));
+                return tmpl
             };
             var formatResult = function(result, container, query, escapeMarkup) {
                 return formatChangeStatus(result, escapeMarkup);

rhodecode/templates/changeset/changeset_file_comment.mako

@@ -79,7 +79,7 b''
           % endif
 
           % if comment.status_change:
-            <div class="${'flag_status %s' % comment.status_change[0].status}"></div>
+            <i class="icon-circle review-status-${comment.status_change[0].status}"></i>
             <div title="${_('Commit status')}" class="changeset-status-lbl">
                  ${comment.status_change[0].status_lbl}
             </div>

rhodecode/templates/commits/changelog_elements.mako

@@ -33,16 +33,16 b''
       <div class="changeset-status-ico">
         %if c.statuses.get(commit.raw_id)[2]:
           <a class="tooltip" title="${_('Commit status: %s\nClick to open associated pull request #%s') % (h.commit_status_lbl(c.statuses.get(commit.raw_id)[0]), c.statuses.get(commit.raw_id)[2])}" href="${h.route_path('pullrequest_show',repo_name=c.statuses.get(commit.raw_id)[3],pull_request_id=c.statuses.get(commit.raw_id)[2])}">
-            <div class="${'flag_status {}'.format(c.statuses.get(commit.raw_id)[0])}"></div>
+            <i class="icon-circle review-status-${c.statuses.get(commit.raw_id)[0]}"></i>
           </a>
         %else:
           <a class="tooltip" title="${_('Commit status: {}').format(h.commit_status_lbl(c.statuses.get(commit.raw_id)[0]))}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=commit.raw_id,_anchor='comment-%s' % c.comments[commit.raw_id][0].comment_id)}">
-            <div class="${'flag_status {}'.format(c.statuses.get(commit.raw_id)[0])}"></div>
+            <i class="icon-circle review-status-${c.statuses.get(commit.raw_id)[0]}"></i>
           </a>
         %endif
       </div>
     %else:
-        <div class="tooltip flag_status not_reviewed" title="${_('Commit status: Not Reviewed')}"></div>
+        <i class="icon-circle review-status-not_reviewed" title="${_('Commit status: Not Reviewed')}"></i>
     %endif
     </td>
 

rhodecode/templates/data_table/_dt_elements.mako

@@ -348,8 +348,9 b''
       ${h.link_to(repo_name,h.route_path('repo_summary',repo_name=repo_name))}
     </div>
 </%def>
+
 <%def name="pullrequest_status(status)">
-    <div class="${'flag_status %s' % status} pull-left"></div>
+    <i class="icon-circle review-status-${status}"></i>
 </%def>
 
 <%def name="pullrequest_title(title, description)">

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -150,7 +150,7 b''
             </div>
             <div class="input">
               %if c.pull_request_review_status:
-                <div class="${'flag_status %s' % c.pull_request_review_status} tooltip pull-left"></div>
+                <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
                 <span class="changeset-status-lbl tooltip">
                   %if c.pull_request.is_closed():
                       ${_('Closed')},
@@ -213,7 +213,7 b''
                                </td>
                                <td>
                                 <% review_status = c.review_versions[ver_pr].status if ver_pr in c.review_versions else 'not_reviewed' %>
-                                <div class="${'flag_status %s' % review_status} tooltip pull-left" title="${_('Your review status at this version')}">
+                                <i class="tooltip icon-circle review-status-${review_status}" title="${_('Your review status at this version')}"></i>
                                 </div>
                                </td>
                                <td>

rhodecode/templates/summary/summary_commits.mako

@@ -25,16 +25,16 b''
                 <div class="changeset-status-ico shortlog">
                     %if c.statuses.get(cs.raw_id)[2]:
                     <a class="tooltip" title="${_('Commit status: %s\nClick to open associated pull request #%s') % (c.statuses.get(cs.raw_id)[0], c.statuses.get(cs.raw_id)[2])}" href="${h.route_path('pullrequest_show',repo_name=c.statuses.get(cs.raw_id)[3],pull_request_id=c.statuses.get(cs.raw_id)[2])}">
-                        <div class="${'flag_status {}'.format(c.statuses.get(cs.raw_id)[0])}"></div>
+                        <i class="icon-circle review-status-${c.statuses.get(cs.raw_id)[0]}"></i>
                     </a>
                     %else:
                     <a class="tooltip" title="${_('Commit status: {}').format(h.commit_status_lbl(c.statuses.get(cs.raw_id)[0]))}" href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=cs.raw_id,_anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">
-                        <div class="${'flag_status {}'.format(c.statuses.get(cs.raw_id)[0])}"></div>
+                        <i class="icon-circle review-status-${c.statuses.get(cs.raw_id)[0]}"></i>
                     </a>
                     %endif
                 </div>
             %else:
-                <div class="tooltip flag_status not_reviewed" title="${_('Commit status: Not Reviewed')}"></div>
+                <i class="icon-circle review-status-not_reviewed" title="${_('Commit status: Not Reviewed')}"></i>
             %endif
         </td>
         <td class="td-commit">