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

158 lines
3.0 KiB
CSS
Raw Normal View History

Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
.message_reactions {
padding-left: 46px;
emoji reactions: Prevent scroll bar from appearing. Fixes #3188.
2017-01-09 21:33:16 +01:00
overflow: hidden;
css: Fix emoji reactions jolt and padding issues. This fixes two issues: * If you had around 10 distinct emoji reactions on a message (enough to force a line wrap if the add-your-emoji button was visible), Zulip would add that button into a new row on hover, jolting the message feed. This fixes that problem by leaving a blank last line for the add-your-emoji button. * We were incorrectly showing the padding for the emoji reactions region even if there were no emoji reactions, causing messages to have too much padding.
2017-01-07 01:18:45 +01:00
}
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
.message_reactions .message_reaction {
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
float: left;
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
margin: 0.15em;
padding: 0 2px 0 0;
height: 19px;
cursor: pointer;
background-color: #eef7fa;
border: 1px solid #c7dfe6;
border-radius: 4px;
}
.message_reactions .message_reaction .emoji {
display: inline-block;
vertical-align: top;
top: -3px;
margin: 0px;
transform: scale(0.70);
transform-origin: 50% 50%;
-moz-transform: scale(0.70);
-moz-transform-origin: 50% 50%;
}
.message_reactions .message_reaction_count {
position: relative;
top: 4px;
font-size: 0.8em;
display: inline-block;
vertical-align: top;
color: #0088CC;
margin: 0px 1px 0px 0px;
line-height: 1em;
}
.message_reactions .reaction_button .message_reaction_count {
reactions: Fix bottom margin to look good on selected message.
2017-01-10 21:32:23 +01:00
top: 0.5px;
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
}
.message_reactions i {
font-size: 1.3em;
float: left;
color: #555;
}
css: Fix emoji reactions jolt and padding issues. This fixes two issues: * If you had around 10 distinct emoji reactions on a message (enough to force a line wrap if the add-your-emoji button was visible), Zulip would add that button into a new row on hover, jolting the message feed. This fixes that problem by leaving a blank last line for the add-your-emoji button. * We were incorrectly showing the padding for the emoji reactions region even if there were no emoji reactions, causing messages to have too much padding.
2017-01-07 01:18:45 +01:00
.message_reactions .reaction_button:not(:only-child) {
margin-bottom: 5px;
}
.message_reactions:hover .message_reaction + .reaction_button {
visibility: visible;
pointer-events: all;
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
background-color: #fafafa;
color: #bbb;
}
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
.message_reactions .reaction_button i {
font-size: 1em;
margin-right: 3px;
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
}
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
.message_reactions .reaction_button:hover i {
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
color: #0088CC;
}
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
.message_reactions .reaction_button:only-child {
display: none;
}
.message_reactions .message_reaction + .reaction_button {
visibility: hidden;
pointer-events: none;
reactions: Fix bottom margin to look good on selected message.
2017-01-10 21:32:23 +01:00
margin: 2px 0.1em 3px 0.1em;
padding: 3px;
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
height: 14px;
border-radius: 4px;
padding-left: 0.3em;
border: thin solid #bbb;
padding-right: 0.3em;
float: left;
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
}
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
.message_reactions .reaction_button:hover {
border: thin solid #add8e6;
background-color: #eef7fa;
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
cursor: pointer;
opacity: 1.0;
color: #0088CC;
}
Re-order reactions CSS for better understanding. This reorders the structure of the styling for the emoji reactions to better follow the order of the markup.
2017-01-07 08:54:17 +01:00
.message_reactions .reaction_button .message_reaction_count {
font-size: 1.1em;
color: #555;
margin-left: 3px;
}
.message_reactions .reaction_button:hover .message_reaction_count {
color: #0088CC;
}
Add frontend support for emoji reactions. This commit replaces the placeholder "clipboard" button with a reaction button. This is done on any message that can't be edited. Also, on messages sent by the user the actions popover (toggled by the down chevron icon) contains an option to add a reaction. When clicked, a popover with a search bar and a list of emojis is displayed. If the right sidebar is collapsed (the viewport is small), the popover is placed to the left of the button. Focus is set to the search bar. Typing in the search bar filters emojis. Emojis with which the user has reacted to this message are highlighted. Clicking them sends an API request to remove that reaction. Clicking on non-highlighted emojis sends an API request to add a reaction. When the popover loses focus it is closed. The frontend listens for reaction events. When an add-reaction event is received, the emoji is displayed at the bottom of the message with a count initialized to 1. If there was an existing reaction to the message with the same emoji, the count is incremented. Old messages fetched from the server contain reactions. They are displayed (along with title and count) at the bottom of each message. When clicking the emoji reaction at the bottom of the message, if the user has already reacted with that emoji to this message, the reaction is removed and the count is decremented. Otherwise, a reaction is added and the count is incremented. Hovering over the emoji reaction at the bottom of the message displays a list of users who have reacted with this emoji along with the emoji name. Hovering over the emoji reactions at the bottom of the message displays a button to add a reaction. Fixes #541.
2016-12-02 13:23:23 +01:00
.reaction-popover {
display: inline-block;
width: 20em;
margin-right: 0px;
margin-left: -14px;
margin-top: -9px;
margin-bottom: -9px;
}
.reaction-popover-top {
padding: 0.8em;
padding-bottom: 0;
width: 100%;
}
.reaction-popover-top .icon-vector-search {
position: absolute;
right: 2.3em;
top: 1.3em;
color: #bbb;
}
.reaction-popover-filter {
width: 87%;
margin: auto;
padding-left: 3em;
}
.reaction-popover-emoji-map {
margin: 0;
padding: 0.5em;
padding-top: 0;
overflow: hidden;
overflow-y: scroll;
display: inline-block;
height: 16.5em;
width: 100%;
}
.reaction-popover-reaction {
float: left;
margin: 0.1em;
padding: 0.3em;
cursor: pointer;
border: thin solid white;
border-radius: 0.5em;
}
.reaction-popover .reacted {
background-color: #eef7fa;
border-color: #add8e6;
}