mirrors/vector-im-hydrogen-web
1
0
Fork 0
mirror of https://github.com/vector-im/hydrogen-web.git synced 2024-12-23 11:35:04 +01:00
Code Issues Projects Releases Wiki Activity

Add some basic styling

Browse Source
This commit is contained in:
Danila Fedorin 2021-07-22 14:07:13 -07:00
parent 83f7391af3
commit 650389538d
4 changed files with 42 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/platform/web/ui/css/room.css
View File

@ -50,6 +50,15 @@ limitations under the License.
margin: 0; margin: 0;
} }
.MessageComposer_replyPreview {
display: grid;
grid-template-columns: 1fr auto;
}
.MessageComposer_replyPreview .Timeline_message {
grid-column: 1/-1;
}
.MessageComposer_input { .MessageComposer_input {
display: flex; display: flex;
align-items: center; align-items: center;

28
src/platform/web/ui/css/themes/element/theme.css
View File

@ -462,11 +462,37 @@ a {
color: red; color: red;
} }
.MessageComposer_input { .MessageComposer_replyPreview .Timeline_message {
margin: 0;
margin-top: 5px;
}
.MessageComposer_input, .MessageComposer_replyPreview {
border-top: 1px solid rgba(245, 245, 245, 0.90); border-top: 1px solid rgba(245, 245, 245, 0.90);
padding: 8px 16px; padding: 8px 16px;
} }
.MessageComposer_replyPreview > .replying {
display: inline-flex;
flex-direction: row;
align-items: center;
}
.MessageComposer_replyPreview > button.cancel {
width: 32px;
height: 32px;
display: block;
border: none;
text-indent: 200%;
white-space: nowrap;
overflow: hidden;
background-color: transparent;
background-image: url('icons/clear.svg');
background-repeat: no-repeat;
background-position: center;
background-size: 18px;
}
.MessageComposer_input > :not(:first-child) { .MessageComposer_input > :not(:first-child) {
margin-left: 12px; margin-left: 12px;
} }

2
src/platform/web/ui/css/themes/element/timeline.css
View File

@ -51,7 +51,7 @@ limitations under the License.
} }
} }
.Timeline_message:hover, .Timeline_message.selected, .Timeline_message.menuOpen { .Timeline_message:hover:not(.disabled), .Timeline_message.selected, .Timeline_message.menuOpen {
background-color: rgba(141, 151, 165, 0.1); background-color: rgba(141, 151, 165, 0.1);
border-radius: 4px; border-radius: 4px;
} }

7
src/platform/web/ui/session/room/MessageComposer.js
View File

@ -37,8 +37,11 @@ export class MessageComposer extends TemplateView {
t.div({ t.div({
className: "MessageComposer_replyPreview" className: "MessageComposer_replyPreview"
}, [ }, [
t.span('Replying'), t.span({ className: "replying" }, "Replying"),
t.span({onClick: () => this._clearReplyingTo()}, 'Close'), t.button({
className: "cancel",
onClick: () => this._clearReplyingTo()
}, "Close"),
// TODO need proper view, not just assumed TextMessageView // TODO need proper view, not just assumed TextMessageView
t.view(new TextMessageView(vm.replyViewModel, true, "div")) t.view(new TextMessageView(vm.replyViewModel, true, "div"))
]) ])