Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fix inconsistent spacing in message actions popover. 

This was implemented by changing the format of the popover from a list
to a table.

Fixes #3010.
This commit is contained in:
Mahim Goyal 2017-01-06 17:16:53 +05:30 committed by Tim Abbott
parent c36932d29e
commit 1f13a991f4
2 changed files with 64 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
static/styles/zulip.css
View File

@ -2438,3 +2438,28 @@ button.topic_edit_cancel {
margin-top: 10px; margin-top: 10px;
} }
} }
.nav-table a {
display: block;
}
.nav-table tr:hover {
text-decoration: none;
background-color: #eeeeee;
color: #0088cc;
}
.nav-table a:hover {
text-decoration: none;
color: #0088cc;
}
.nav-list-table a,
.nav-list .nav-header {
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.ikon-style {
padding: 3px 15px;
}
.message-style {
padding: 3px 15px;
margin-left: -27px;
}

82
static/templates/actions_popover_content.handlebars
View File

@ -1,56 +1,52 @@
{{! Contents of the "message actions" popup }} {{! Contents of the "message actions" popup }}
<ul class="nav nav-list actions_popover pull-right"> <table class="nav nav-list actions_popover pull-right nav-table nav-list-table">
<li> <tr>
<a href="#" class="popover_edit_message" data-msgid="{{message.id}}"> <td align="center"><a href="#" class="ikon-style popover_edit_message" data-msgid="{{message.id}}">{{! Can consider http://fontawesome.io/icon/file-code-o/ when we upgrade to font awesome 4.}}<i class="{{#if use_edit_icon}}icon-vector-pencil{{else}}icon-vector-file-text-alt{{/if}}"></i></a></td>
{{! Can consider http://fontawesome.io/icon/file-code-o/ when we upgrade to font awesome 4.}} <td><a href="#" class="message-style popover_edit_message" data-msgid="{{message.id}}"> {{editability_menu_item}}</a></td>
<i class="{{#if use_edit_icon}}icon-vector-pencil{{else}}icon-vector-file-text-alt{{/if}}"></i> {{editability_menu_item}} </tr>
</a>
</li>
<li> <tr>
<a href="#" class="respond_button"> <td align="center"><a href="#" class="ikon-style respond_button"><i class="icon-vector-share-alt"></i></a></td>
<i class="icon-vector-share-alt"></i> {{t "Reply" }} <td><a href="#" class="respond_button message-style"> {{t "Reply" }}</a></td>
</a> </tr>
</li>
<li> <tr>
<a href="#" class="popover_toggle_collapse" data-msgid="{{message.id}}"> <td align="center"><a href="#" class="ikon-style popover_toggle_collapse" data-msgid="{{message.id}}"><i class="{{#if message.collapsed}}icon-vector-plus{{else}}icon-vector-minus{{/if}}"></i></a></td>
<i class="{{#if message.collapsed}}icon-vector-plus{{else}}icon-vector-minus{{/if}}"></i> <td><a href="#" class="popover_toggle_collapse message-style" data-msgid="{{message.id}}">
{{#if message.collapsed}}{{t "Un-collapse" }}{{else}}{{t "Collapse" }}{{/if}} {{#if message.collapsed}}{{t "Un-collapse" }}{{else}}{{t "Collapse" }}{{/if}}</a></td>
</a> </tr>
</li>
{{#if can_mute_topic}} {{#if can_mute_topic}}
<li> <tr>
<a href="#" class="popover_mute_topic" data-msg-stream="{{message.stream}}" data-msg-topic="{{message.subject}}"> <td align="center"><a href="#" class="ikon-style popover_mute_topic" data-msg-stream="{{message.stream}}" data-msg-topic="{{message.subject}}">
<i class="icon-vector-eye-close"></i> <i class="icon-vector-eye-close"></i></a></td>
{{#tr message}}Mute the topic <b>__subject__</b>{{/tr}} <td><a href="#" class="popover_mute_topic message-style" data-msg-stream="{{message.stream}}" data-msg-topic="{{message.subject}}">
</a> {{#tr message}}Mute the topic <b>__subject__</b>{{/tr}}</a></td>
</li> </tr>
{{/if}} {{/if}}
{{#if can_unmute_topic}} {{#if can_unmute_topic}}
<li> <tr>
<a href="#" class="popover_unmute_topic" data-msg-stream="{{message.stream}}" data-msg-topic="{{message.subject}}"> <td align="center"><a href="#" class="ikon-style popover_unmute_topic" data-msg-stream="{{message.stream}}" data-msg-topic="{{message.subject}}">
<i class="icon-vector-eye-open"></i> <i class="icon-vector-eye-open"></i></a></td>
{{#tr message}}Unmute the topic <b>__subject__</b>{{/tr}} <td><a href="#" class="popover_unmute_topic message-style" data-msg-stream="{{message.stream}}" data-msg-topic="{{message.subject}}">
</a> {{#tr message}}Unmute the topic <b>__subject__</b>{{/tr}}</a></td>
</li> </tr>
{{/if}} {{/if}}
{{#if should_display_add_reaction_option}} {{#if should_display_add_reaction_option}}
<li> <tr>
<a href="#" class="reaction_button" data-msgid="{{message.id}}"> <td align="center"><a href="#" class="ikon-style reaction_button" data-msgid="{{message.id}}">
<i class="icon-vector-smile"></i> <i class="icon-vector-smile"></i></a></td>
{{#tr message}}Add emoji reaction{{/tr}} <td><a href="#" class="reaction_button message-style" data-msgid="{{message.id}}">{{#tr message}}Add emoji reaction{{/tr}}</a></td>
</a> </tr>
</li>
{{/if}} {{/if}}
<li> <tr>
<a href="{{ conversation_time_uri }}" class="popover_narrow_by_conversation_and_time" data-msgid="{{message.id}}"> <td align="center"><a href="{{ conversation_time_uri }}" class="ikon-style popover_narrow_by_conversation_and_time ikon-style" data-msgid="{{message.id}}">
<i class="icon-vector-link"></i> {{t "Link to this conversation" }} <i class="icon-vector-link"></i></a></td>
</a> <td><a href="{{ conversation_time_uri }}" class="popover_narrow_by_conversation_and_time message-style" data-msgid="{{message.id}}">
</li> {{t "Link to this conversation" }}</a></td>
</tr>
</ul> </table>