paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 06:53:25 +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(); e.stopPropagation();
popovers.hide_all(); 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. // table in which it is visible.
update_message_in_all_views(message_id, (row) => { update_message_in_all_views(message_id, (row) => {
const elt = row.find(".star"); const elt = row.find(".star");
const star_container = row.find(".star_container");
if (starred) { 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 { } 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"); const title_state = starred ? i18n.t("Unstar") : i18n.t("Star");
elt.attr("title", i18n.t("__starred_status__ this message", {starred_status: title_state})); 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; animation: rotate 1s infinite linear;
} }
} }
}
.star { .star_container {
display: inline-block; display: inline-block;
font-size: 14px;
&:hover {
cursor: pointer;
color: hsl(153, 80%, 25%);
}
&:not(.empty-star) { &:not(.empty-star) {
color: hsl(106, 77%, 29%); color: hsl(106, 77%, 29%);
@@ -739,6 +732,16 @@ td.pointer {
visibility: visible !important; visibility: visible !important;
} }
} }
}
.star {
font-size: 14px;
&:hover {
cursor: pointer;
color: hsl(153, 80%, 25%);
}
}
.messagebox { .messagebox {
position: relative; position: relative;

3
static/templates/message_controls.hbs
View File

@@ -23,7 +23,8 @@
</div> </div>
{{#unless msg/locally_echoed}} {{#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> </div>
{{/unless}} {{/unless}}