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

52 lines
1.8 KiB
SCSS
Raw Normal View History

refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_green,
.user_circle_orange,
.user_circle_empty,
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
.user_circle_empty_line,
css: Use user_circle_fraction for group PM circles. We rename this CSS class to something super concrete, since all the associated CSS is very specifically about drawing circles.
2019-02-17 00:55:01 +01:00
.user_circle_fraction {
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
border-radius: 50%;
border: 1px solid;
float: left;
position: relative;
top: 5px;
}
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_green {
css: Avoid unused background for group PMs. The background color for group PMs is driven by specific styles in the HTML, so the CSS definition here was inaccurate.
2019-02-17 00:49:02 +01:00
background-color: hsl(106, 74%, 44%);
}
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_green,
css: Use user_circle_fraction for group PM circles. We rename this CSS class to something super concrete, since all the associated CSS is very specifically about drawing circles.
2019-02-17 00:55:01 +01:00
.user_circle_fraction {
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
border-color: hsl(106, 74%, 44%);
}
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_orange {
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
border-color: hsl(29, 84%, 51%);
background-color: hsl(29, 84%, 51%);
background: -moz-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, hsla(0, 0%, 100%, 0.0)), color-stop(50%, hsla(29, 84%, 51%, 1.0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* IE10+ */
background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.0) 50%, hsla(29, 84%, 51%, 1.0) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ec7e18', GradientType=0 ); /* IE6-9; filters only work with hex colors */
}
refactor: Simplify logic for circles. We now have a function get_user_circle_class that returns one of these values: "user_circle_green" "user_circle_orange" "user_circle_empty" And we put that in the templates. And then CSS renders the circle of the appropriate color. The unit tests now explicitly capture whether we are rendering the correct kind of circle.
2019-02-17 02:10:42 +01:00
.user_circle_empty {
css: Split out user_circles.scss. This is a pure code move. We want to use user circles in the left sidebar, so this code will no longer belong in right-sidebar.scss. This code is just related to drawing the circles. We can still position in size in other CSS files (with more context-specific selectors).
2019-02-17 00:29:16 +01:00
background-color: none;
border-color: hsl(0, 0%, 50%);
}
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
.user_circle_empty_line {
user status: Make "unavailable" status circle grey. After discussion, we decided that the red color is too distinct and does not convey the idea of "almost offline". This changes the new "unavailable" status circle's color from dark red to grey, the same color used by the "offline" status circle.
2019-03-01 21:51:07 +01:00
border-color: hsl(0, 0%, 50%);
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
&::after {
content: '';
user status: Make "unavailable" status circle grey. After discussion, we decided that the red color is too distinct and does not convey the idea of "almost offline". This changes the new "unavailable" status circle's color from dark red to grey, the same color used by the "offline" status circle.
2019-03-01 21:51:07 +01:00
background: hsl(0, 0%, 50%);
user status: Add icon for "unavailable". Fixes #11589. Adds SCSS style for the "unavailable" user status and enables its usage in `buddy_data.js`. The style is a red circle with a horizontal line. The values might look a bit 'magic' but they were considered carefully ` height` of 1px was too thin, 2px was too thick, thus 1.5px was chosen.
2019-03-01 17:31:59 +01:00
height: 1.5px; // 1px is too thin, 2px is too thick
width: 6px;
display: block;
margin: 3.25px auto 0 auto; // (total height - line height) / 2 = 3.25px
}
}