Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-29 14:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
491f0cd08a
element-web-Github/res/css/views/messages/_ReactionsRowButton.pcss

39 lines
871 B
Plaintext
Raw Normal View History

Display existing reactions below the message This displays the existing reactions a message has from all users below the message. Since we don't currently have an API to actually get these events yet, adds a temporary hook that looks for a specific message to inject some sample data. This helps build out the UI for now and can be removed once it exists. Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 01:05:11 +08:00
/*
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 21:57:16 +08:00
Copyright 2019-2024 New Vector Ltd.
Display existing reactions below the message This displays the existing reactions a message has from all users below the message. Since we don't currently have an API to actually get these events yet, adds a temporary hook that looks for a specific message to inject some sample data. This helps build out the UI for now and can be removed once it exists. Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 01:05:11 +08:00
Change license (#13) * Copyright headers 1 * Licence headers 2 * Copyright Headers 3 * Copyright Headers 4 * Copyright Headers 5 * Copyright Headers 6 * Copyright headers 7 * Add copyright headers for html and config file * Replace license files and update package.json * Update with CLA * lint
2024-09-09 21:57:16 +08:00
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
Please see LICENSE files in the repository root for full details.
Display existing reactions below the message This displays the existing reactions a message has from all users below the message. Since we don't currently have an API to actually get these events yet, adds a temporary hook that looks for a specific message to inject some sample data. This helps build out the UI for now and can be removed once it exists. Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 01:05:11 +08:00
*/
.mx_ReactionsRowButton {
Clamp reaction content width to at most 100px Part of https://github.com/vector-im/riot-web/issues/10256
2019-07-05 23:17:17 +08:00
display: inline-flex;
Tweak alignment of reactions row, move add reaction to right and only show on hover
2021-05-13 20:32:38 +08:00
line-height: $font-20px;
padding: 1px 6px;
Compound color pass (#11079) * Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Pareto color pass on the light theme * bugfixes in the light color pass * Compound color pass dark theme * Compound color pass high contrast * Fix typo * fix tooltip * Fix PR feedback * fix composer button mixin * Normalise some of the auth page colors * Update based on figma feedback * lintfix * regenerate theme index * Fix cypress tests Removed the CSS assertions in the room header as it overlaps with the Percy snapshot * fix more e2e tests * update colors based on feedback * fix color pass * Fix theme overrides * Restore -transparent * fix color mapping * Final colour pass update * Do not consume compound colors directly * rethemedex * Update pass * Final tweaks * a11y pass * scope opacity to checkbox and not label * Add missing customisations var for theming * lintfix * remove unwanted test
2023-07-13 01:46:49 +08:00
border: 1px solid $quinary-content;
Display existing reactions below the message This displays the existing reactions a message has from all users below the message. Since we don't currently have an API to actually get these events yet, adds a temporary hook that looks for a specific message to inject some sample data. This helps build out the UI for now and can be removed once it exists. Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 01:05:11 +08:00
border-radius: 10px;
Compound color pass (#11079) * Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Pareto color pass on the light theme * bugfixes in the light color pass * Compound color pass dark theme * Compound color pass high contrast * Fix typo * fix tooltip * Fix PR feedback * fix composer button mixin * Normalise some of the auth page colors * Update based on figma feedback * lintfix * regenerate theme index * Fix cypress tests Removed the CSS assertions in the room header as it overlaps with the Percy snapshot * fix more e2e tests * update colors based on feedback * fix color pass * Fix theme overrides * Restore -transparent * fix color mapping * Final colour pass update * Do not consume compound colors directly * rethemedex * Update pass * Final tweaks * a11y pass * scope opacity to checkbox and not label * Add missing customisations var for theming * lintfix * remove unwanted test
2023-07-13 01:46:49 +08:00
background-color: $secondary-hairline-color;
Disable select for reaction buttons
2019-05-11 01:09:32 +08:00
user-select: none;
Render custom images in reactions (#11087) * Add support for rendering custom emojis in reactions Signed-off-by: Sumner Evans <sumner@beeper.com> * Include custom reaction short names in tooltips Signed-off-by: Sumner Evans <sumner@beeper.com> * Use custom reaction shortcode for accessibility This uses the shortcode in the following places: * The aria-label of the reaction buttons * The alt text for the reaction image Signed-off-by: Sumner Evans <sumner@beeper.com> * Remove explicit instantiation of `customReactionName` variable and add types Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com> * Put custom reaction images behind a labs flag Signed-off-by: Sumner Evans <sumner@beeper.com> * Use UnstableValue for finding the shortcode Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Signed-off-by: Sumner Evans <sumner@beeper.com> * Move calculation of whether to render custom reaction images up to ReactionRow Signed-off-by: Sumner Evans <sumner@beeper.com> * Make alt text more friendly when custom reaction doesn't have shortcode Signed-off-by: Sumner Evans <sumner@beeper.com> * Add test for ReactionsRowButton Signed-off-by: Sumner Evans <sumner@beeper.com> * Apply suggestions from code review Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com> * Don't use Optional Signed-off-by: Sumner Evans <sumner@beeper.com> * Fix ReactionsRowButton test Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Signed-off-by: Sumner Evans <sumner@beeper.com> --------- Signed-off-by: Sumner Evans <sumner@beeper.com> Co-authored-by: Tulir Asokan <tulir@maunium.net> Co-authored-by: Šimon Brandner <simon.bra.ag@gmail.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2023-09-01 18:16:24 +08:00
align-items: center;
Display existing reactions below the message This displays the existing reactions a message has from all users below the message. Since we don't currently have an API to actually get these events yet, adds a temporary hook that looks for a specific message to inject some sample data. This helps build out the UI for now and can be removed once it exists. Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 01:05:11 +08:00
&:hover {
Compound color pass (#11079) * Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Pareto color pass on the light theme * bugfixes in the light color pass * Compound color pass dark theme * Compound color pass high contrast * Fix typo * fix tooltip * Fix PR feedback * fix composer button mixin * Normalise some of the auth page colors * Update based on figma feedback * lintfix * regenerate theme index * Fix cypress tests Removed the CSS assertions in the room header as it overlaps with the Percy snapshot * fix more e2e tests * update colors based on feedback * fix color pass * Fix theme overrides * Restore -transparent * fix color mapping * Final colour pass update * Do not consume compound colors directly * rethemedex * Update pass * Final tweaks * a11y pass * scope opacity to checkbox and not label * Add missing customisations var for theming * lintfix * remove unwanted test
2023-07-13 01:46:49 +08:00
border-color: $quinary-content;
Display existing reactions below the message This displays the existing reactions a message has from all users below the message. Since we don't currently have an API to actually get these events yet, adds a temporary hook that looks for a specific message to inject some sample data. This helps build out the UI for now and can be removed once it exists. Fixes https://github.com/vector-im/riot-web/issues/9573
2019-05-02 01:05:11 +08:00
}
Increment an existing reaction This allows you to increment an existing reaction below a message by clicking on it. At the moment, this is not linked to the action bar, so they each are using local state. We'll likely want to add some mechanism so that we can local echo to both of these UI areas at the same time, but that can be done separately. Fixes https://github.com/vector-im/riot-web/issues/9486
2019-05-02 18:48:32 +08:00
&.mx_ReactionsRowButton_selected {
Compound color pass (#11079) * Integrate compound design tokens The icons should not be included in this repo, and should live in the compound design token repo, but for simplicity sake at this phase of the integration they will be added here * Pareto color pass on the light theme * bugfixes in the light color pass * Compound color pass dark theme * Compound color pass high contrast * Fix typo * fix tooltip * Fix PR feedback * fix composer button mixin * Normalise some of the auth page colors * Update based on figma feedback * lintfix * regenerate theme index * Fix cypress tests Removed the CSS assertions in the room header as it overlaps with the Percy snapshot * fix more e2e tests * update colors based on feedback * fix color pass * Fix theme overrides * Restore -transparent * fix color mapping * Final colour pass update * Do not consume compound colors directly * rethemedex * Update pass * Final tweaks * a11y pass * scope opacity to checkbox and not label * Add missing customisations var for theming * lintfix * remove unwanted test
2023-07-13 01:46:49 +08:00
background-color: $accent-300;
border-color: $accent-800;
Increment an existing reaction This allows you to increment an existing reaction below a message by clicking on it. At the moment, this is not linked to the action bar, so they each are using local state. We'll likely want to add some mechanism so that we can local echo to both of these UI areas at the same time, but that can be done separately. Fixes https://github.com/vector-im/riot-web/issues/9486
2019-05-02 18:48:32 +08:00
}
Clamp reaction content width to at most 100px Part of https://github.com/vector-im/riot-web/issues/10256
2019-07-05 23:17:17 +08:00
Change cursor to not-allowed
2021-04-30 10:55:58 +08:00
&.mx_AccessibleButton_disabled {
cursor: not-allowed;
}
Fix emoji tooltip flickering because onMouseOut&onMouseOver fired when moving between children Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
2020-04-12 07:12:58 +08:00
.mx_ReactionsRowButton_content {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding-right: 4px;
}
Clamp reaction content width to at most 100px Part of https://github.com/vector-im/riot-web/issues/10256
2019-07-05 23:17:17 +08:00
}
Reference in New Issue Copy Permalink