Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Style mentions as pills in rich text editor #10448

Merged
merged 4 commits into from
Apr 3, 2023
Merged

Style mentions as pills in rich text editor #10448

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6739882
apply _Editor CSS changes
Mar 31, 2023
74f0d0d
Merge branch 'develop' into alunturner/style-mentions-as-pills
artcodespace Mar 31, 2023
da73013
use padding shorthand
artcodespace Apr 3, 2023
ca4b1cb
Merge branch 'develop' into alunturner/style-mentions-as-pills
artcodespace Apr 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 30 additions & 2 deletions res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,9 +101,37 @@ limitations under the License.
}
}

/* this selector represents what will become a pill */
/* this selector represents what will become a pill
nb despite there being mx_UserPill and mx_RoomPill classes appended to these pills
in the current composer, there don't appear to be any styles associated with those classes
in this repo */
a[data-mention-type] {
cursor: text;
/* these entries duplicate mx_Pill from _Pill.pcss */
padding: $font-1px 0.4em $font-1px 0.4em;
artcodespace marked this conversation as resolved.
Show resolved Hide resolved
line-height: $font-17px;
border-radius: $font-16px;
vertical-align: text-top;
/* TODO turning this on hides the cursor from the composer for some
reason, so comment out for now and assess if it's needed when we add
the Avatars
display: inline-flex;
align-items: center; not required with the above turned off

Potential fix is using display: inline, width: fit-content
*/
Comment on lines +114 to +121
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Leaving commented out CSS in for the moment - it's not immediately apparent to me whether or not this will be required for Avatars

box-sizing: border-box;
max-width: 100%;
overflow: hidden;

color: $accent-fg-color;
background-color: $pill-bg-color;

/* combining the overrides from _BasicMessageComposer.pcss */
user-select: all;
position: relative;
cursor: unset; /* We don't want indicate clickability */
text-overflow: ellipsis;
white-space: nowrap;
}
}

Expand Down