From 7b88d5d21c82a339249362733a21115fac5d98bb Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 24 Feb 2019 03:43:44 +0000
Subject: [PATCH] make ViewSource less awkward
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
res/css/_common.scss | 6 ---
res/css/structures/_ViewSource.scss | 13 ++++++
src/components/structures/ViewSource.js | 40 ++++++++-----------
.../views/context_menus/MessageContextMenu.js | 4 ++
4 files changed, 34 insertions(+), 29 deletions(-)
diff --git a/res/css/_common.scss b/res/css/_common.scss
index fd93c8c967..4e327ab28d 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -249,12 +249,6 @@ textarea {
box-shadow: none;
}
-/* View Source Dialog overide */
-.mx_Dialog_wrapper.mx_Dialog_viewsource .mx_Dialog {
- padding-left: 10px;
- padding-right: 10px;
-}
-
.mx_Dialog {
background-color: $primary-bg-color;
color: $light-fg-color;
diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index a4c7dcf58a..b908861c6f 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -14,6 +14,19 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
+.mx_ViewSource_label_left {
+ float: left;
+}
+
+.mx_ViewSource_label_right {
+ float: right;
+}
+
+.mx_ViewSource_label_bottom {
+ clear: both;
+ border-bottom: 1px solid #e5e5e5;
+}
+
.mx_ViewSource pre {
text-align: left;
font-size: 12px;
diff --git a/src/components/structures/ViewSource.js b/src/components/structures/ViewSource.js
index 4844149f59..fd35fdbeef 100644
--- a/src/components/structures/ViewSource.js
+++ b/src/components/structures/ViewSource.js
@@ -1,5 +1,6 @@
/*
Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
@@ -14,11 +15,11 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-'use strict';
-
import React from 'react';
import PropTypes from 'prop-types';
import SyntaxHighlight from '../views/elements/SyntaxHighlight';
+import {_t} from "../../languageHandler";
+import sdk from "../../index";
module.exports = React.createClass({
@@ -27,31 +28,24 @@ module.exports = React.createClass({
propTypes: {
content: PropTypes.object.isRequired,
onFinished: PropTypes.func.isRequired,
- },
-
- componentDidMount: function() {
- document.addEventListener("keydown", this.onKeyDown);
- },
-
- componentWillUnmount: function() {
- document.removeEventListener("keydown", this.onKeyDown);
- },
-
- onKeyDown: function(ev) {
- if (ev.keyCode == 27) { // escape
- ev.stopPropagation();
- ev.preventDefault();
- this.props.onFinished();
- }
+ roomId: PropTypes.string.isRequired,
+ eventId: PropTypes.string.isRequired,
},
render: function() {
+ const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
return (
- <div className="mx_ViewSource">
- <SyntaxHighlight className="json">
- { JSON.stringify(this.props.content, null, 2) }
- </SyntaxHighlight>
- </div>
+ <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
+ <div className="mx_ViewSource_label_left">Room ID: { this.props.roomId }</div>
+ <div className="mx_ViewSource_label_right">Event ID: { this.props.eventId }</div>
+ <div className="mx_ViewSource_label_bottom" />
+
+ <div className="mx_Dialog_content">
+ <SyntaxHighlight className="json">
+ { JSON.stringify(this.props.content, null, 2) }
+ </SyntaxHighlight>
+ </div>
+ </BaseDialog>
);
},
});
diff --git a/src/components/views/context_menus/MessageContextMenu.js b/src/components/views/context_menus/MessageContextMenu.js
index ffa2a0bf5c..e948c1ad93 100644
--- a/src/components/views/context_menus/MessageContextMenu.js
+++ b/src/components/views/context_menus/MessageContextMenu.js
@@ -98,6 +98,8 @@ module.exports = React.createClass({
onViewSourceClick: function() {
const ViewSource = sdk.getComponent('structures.ViewSource');
Modal.createTrackedDialog('View Event Source', '', ViewSource, {
+ roomId: this.props.mxEvent.getRoomId(),
+ eventId: this.props.mxEvent.getId(),
content: this.props.mxEvent.event,
}, 'mx_Dialog_viewsource');
this.closeMenu();
@@ -106,6 +108,8 @@ module.exports = React.createClass({
onViewClearSourceClick: function() {
const ViewSource = sdk.getComponent('structures.ViewSource');
Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
+ roomId: this.props.mxEvent.getRoomId(),
+ eventId: this.props.mxEvent.getId(),
// FIXME: _clearEvent is private
content: this.props.mxEvent._clearEvent,
}, 'mx_Dialog_viewsource');