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

Change filtered/desaturated checkbox to SVG for performance. 

Due to the fact that getComputedValue is called when using filter and
opacity attributes, it is much more efficient to use an SVG that has a
changing fill color rather than something that may be interpreted by
browsers as a layout change that requires layout recalculation.

This should result in noticeably smoother and more responsive :hover
events for the streams with greyed checkmarks.
This commit is contained in:
Brock Whittaker 2017-01-16 18:26:09 -08:00 committed by Tim Abbott
parent 583f1e503e
commit 431a69a769
2 changed files with 15 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
static/styles/subscriptions.css
View File

@ -550,32 +550,26 @@ form#add_new_subscription {
.stream-row .check {
width: 25px;
height: 35px;
position: relative;
margin-right: 8px;
background-size: 60% auto;
background-repeat: no-repeat;
background-position: center center;
background-image: url(../images/checkbox-green.png);
opacity: 0;
}
.stream-row:hover .check:not(.checked) {
-webkit-filter: saturate(0) brightness(1.1);
-moz-filter: saturate(0) brightness(1.1);
filter: saturate(0) brightness(1.1);
opacity: 1;
.stream-row .check svg {
fill: transparent;
width: 70%;
margin: 0% 15%;
}
.stream-row.active:hover .check:not(.checked) {
-webkit-filter: saturate(0) brightness(0.9);
-moz-filter: saturate(0) brightness(0.9);
filter: saturate(0) brightness(0.9);
opacity: 1;
.stream-row:hover .check:not(.checked) svg,
.stream-row.active:hover .check:not(.checked) svg {
fill: #ddd;
}
.stream-row .checked {
opacity: 1;
background-image: url(../images/checkbox-green.png);
.stream-row .checked svg {
fill: #52c2af;
}
.stream-row .icon {

10
static/templates/subscription.handlebars
View File

@ -1,11 +1,11 @@
{{! Client-side Mustache template for rendering subscriptions.}}
{{#with this}}
<div class="stream-row" data-stream-id="{{stream_id}}" data-stream-name="{{name}}">
{{#if subscribed}}
<div class="check checked sub_unsub_button"></div>
{{else}}
<div class="check sub_unsub_button"></div>
{{/if}}
<div class="check {{#if subscribed }}checked{{/if}} sub_unsub_button">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
</svg>
</div>
{{ partial "subscription_setting_icon" }}
<div class="sub-info-box">
<div class="top-bar">