paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 22:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

message-controls: Use <i> tag for starred message icon.

Browse Source 
Throughout the codebase we use <i> tag for icons.
This commit will add <i> tag inside the starred message
div and fa classes are now used with this <i> tag.

The starred message div is now consistent with other
message_controls divs.

Tweaked by tabbott to use the name star_container for better
readability.
This commit is contained in:
SiddharthVarshney
2020-07-03 21:19:19 +05:30
committed by Tim Abbott
parent ae7ff04fe6
commit d0fd0cae3f
4 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/click_handlers.js
View File

@@ -161,7 +161,7 @@ exports.initialize = function () {
});
}
$("#main_div").on("click", ".star", function (e) {
$("#main_div").on("click", ".star_container", function (e) {
e.stopPropagation();
popovers.hide_all();

7
static/js/ui.js
View File

@@ -95,10 +95,13 @@ exports.update_starred_view = function (message_id, new_value) {
// table in which it is visible.
update_message_in_all_views(message_id, (row) => {
const elt = row.find(".star");
const star_container = row.find(".star_container");
if (starred) {
elt.addClass("fa-star").removeClass("fa-star-o").removeClass("empty-star");
elt.addClass("fa-star").removeClass("fa-star-o");
star_container.removeClass("empty-star");
} else {
elt.removeClass("fa-star").addClass("fa-star-o").addClass("empty-star");
elt.removeClass("fa-star").addClass("fa-star-o");
star_container.addClass("empty-star");
}
const title_state = starred ? i18n.t("Unstar") : i18n.t("Star");
elt.attr("title", i18n.t("__starred_status__ this message", {starred_status: title_state}));

19
static/styles/zulip.scss
View File

@@ -720,16 +720,9 @@ td.pointer {
animation: rotate 1s infinite linear;
}
}
}
.star {
.star_container {
display: inline-block;
font-size: 14px;
&:hover {
cursor: pointer;
color: hsl(153, 80%, 25%);
}
&:not(.empty-star) {
color: hsl(106, 77%, 29%);
@@ -739,6 +732,16 @@ td.pointer {
visibility: visible !important;
}
}
}
.star {
font-size: 14px;
&:hover {
cursor: pointer;
color: hsl(153, 80%, 25%);
}
}
.messagebox {
position: relative;

3
static/templates/message_controls.hbs
View File

@@ -23,7 +23,8 @@
</div>
{{#unless msg/locally_echoed}}
<div class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}} {{#if msg/starred}}{{else}}empty-star{{/if}}" title="{{#tr this.msg}}__starred_status__ this message{{/tr}} (*)">
<div class="star_container {{#if msg/starred}}{{else}}empty-star{{/if}}">
<i class="star fa {{#if msg/starred}}fa-star{{else}}fa-star-o{{/if}}" title="{{#tr this.msg}}__starred_status__ this message{{/tr}} (*)"></i>
</div>
{{/unless}}