mystiq/hydrogen-web
Archived
4
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #369 from MidhunSureshR/icon-fix

Browse source 
Replace ellipsis character in RoomView header with svg icon
This commit is contained in:
Bruno Windels 2021-05-31 08:05:30 +00:00 committed by GitHub
commit ab6b87987b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/platform/web/ui/css/themes/element/icons/vertical-ellipsis.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.154 16.662C13.154 16.158 12.776 15.836 12.272 15.836C11.754 15.836 11.39 16.158 11.39 16.662C11.39 17.152 11.754 17.488 12.272 17.488C12.776 17.502 13.154 17.152 13.154 16.662ZM13.154 12C13.154 11.496 12.776 11.16 12.272 11.16C11.754 11.174 11.39 11.496 11.39 11.986C11.39 12.476 11.754 12.826 12.272 12.826C12.776 12.84 13.154 12.49 13.154 12ZM13.154 7.338C13.154 6.82 12.776 6.498 12.272 6.498C11.754 6.498 11.39 6.834 11.39 7.324C11.39 7.814 11.754 8.164 12.272 8.164C12.776 8.164 13.154 7.828 13.154 7.338Z" fill="#454545"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 685 B

5
src/platform/web/ui/css/themes/element/theme.css
View file

@ -448,8 +448,7 @@ a {
} }
.RoomHeader .room-options { .RoomHeader .room-options {
font-weight: bold; background-image: url("./icons/vertical-ellipsis.svg");
font-size: 1.5rem;
} }
.RoomView_error { .RoomView_error {
@ -932,4 +931,4 @@ button.link {
.UnknownRoomView button { .UnknownRoomView button {
max-width: 200px; max-width: 200px;
width: 100%; width: 100%;
} }

3
src/platform/web/ui/session/room/RoomView.js
View file

@ -46,8 +46,9 @@ export class RoomView extends TemplateView {
]), ]),
t.button({ t.button({
className: "button-utility room-options", className: "button-utility room-options",
"aria-label":vm.i18n`Room options`,
onClick: evt => this._toggleOptionsMenu(evt) onClick: evt => this._toggleOptionsMenu(evt)
}, "⋮") })
]), ]),
t.div({className: "RoomView_body"}, [ t.div({className: "RoomView_body"}, [
t.div({className: "RoomView_error"}, vm => vm.error), t.div({className: "RoomView_error"}, vm => vm.error),