Add custom RightPanel support
This commit is contained in:
Eric Eastwood
parent
c0a2a65c2f
commit
82ba92b806
|
|
@ -11,6 +11,7 @@
|
|||
"express": "^4.17.2",
|
||||
"hydrogen-view-sdk": "^0.0.4",
|
||||
"linkedom": "^0.13.2",
|
||||
"matrix-public-archive-shared": "file:./shared/",
|
||||
"node-fetch": "^2.6.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1271,6 +1272,10 @@
|
|||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/matrix-public-archive-shared": {
|
||||
"resolved": "shared",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
|
|
@ -1908,7 +1913,8 @@
|
|||
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
||||
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
|
||||
"dev": true
|
||||
}
|
||||
},
|
||||
"shared": {}
|
||||
},
|
||||
"dependencies": {
|
||||
"@eslint/eslintrc": {
|
||||
|
|
@ -2855,6 +2861,9 @@
|
|||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"matrix-public-archive-shared": {
|
||||
"version": "file:shared"
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
"express": "^4.17.2",
|
||||
"hydrogen-view-sdk": "^0.0.4",
|
||||
"linkedom": "^0.13.2",
|
||||
"node-fetch": "^2.6.7"
|
||||
"node-fetch": "^2.6.7",
|
||||
"matrix-public-archive-shared": "file:./shared/"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,16 @@
|
|||
.room-layout {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.right-panel {
|
||||
width: 20%;
|
||||
background-color: #f2f5f8;
|
||||
/* Based on .SessionView from Hydrogen */
|
||||
.ArchiveView {
|
||||
/* this takes into account whether or not the url bar is hidden on mobile
|
||||
(have tested Firefox Android and Safari on iOS),
|
||||
see https://developers.google.com/web/updates/2016/12/url-bar-resizing */
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template:
|
||||
'status status' auto
|
||||
'middle right' 1fr /
|
||||
1fr 300px;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,8 +21,6 @@ async function fetchRoomData(roomId) {
|
|||
fetchEndpoint(stateAvatarEndpoint),
|
||||
]);
|
||||
|
||||
console.log('stateAvatarResDataOutcome', stateAvatarResDataOutcome);
|
||||
|
||||
let name;
|
||||
if (stateNameResDataOutcome.reason === undefined) {
|
||||
name = stateNameResDataOutcome.value.name;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
const assert = require('assert');
|
||||
const path = require('path');
|
||||
const express = require('express');
|
||||
const asyncHandler = require('./lib/express-async-handler');
|
||||
const urlJoin = require('./lib/url-join');
|
||||
|
|
@ -18,6 +19,11 @@ app.get('/hydrogen-styles.css', async function (req, res) {
|
|||
res.sendFile(require.resolve('hydrogen-view-sdk/style.css'));
|
||||
});
|
||||
|
||||
app.get('/styles.css', async function (req, res) {
|
||||
res.set('Content-Type', 'text/css');
|
||||
res.sendFile(path.join(__dirname, '../public/styles/styles.css'));
|
||||
});
|
||||
|
||||
app.get(
|
||||
'/:roomIdOrAlias/event/:eventId',
|
||||
asyncHandler(async function (req, res) {
|
||||
|
|
@ -97,13 +103,7 @@ app.get(
|
|||
<link href="${stylesUrl}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div class="room-layout">
|
||||
${hydrogenHtmlOutput}
|
||||
|
||||
<aside class="right-panel">
|
||||
|
||||
</aside>
|
||||
</div>
|
||||
${hydrogenHtmlOutput}
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,17 +1,16 @@
|
|||
const {
|
||||
TemplateView,
|
||||
RoomView,
|
||||
RightPanelView
|
||||
} = require('hydrogen-view-sdk');
|
||||
const { TemplateView, RoomView, RightPanelView } = require('hydrogen-view-sdk');
|
||||
|
||||
export class ArchiveView extends TemplateView {
|
||||
class ArchiveView extends TemplateView {
|
||||
render(t, vm) {
|
||||
return t.div({
|
||||
return t.div(
|
||||
{
|
||||
className: {
|
||||
"ArchiveView": true,
|
||||
ArchiveView: true,
|
||||
},
|
||||
}, [
|
||||
|
||||
]
|
||||
},
|
||||
[t.view(new RoomView(vm.roomViewModel)), t.view(new RightPanelView(vm.rightPanelModel))]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ArchiveView;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
const { TemplateView } = require('hydrogen-view-sdk');
|
||||
|
||||
class RightPanelContentView extends TemplateView {
|
||||
render(t, vm) {
|
||||
return t.div(
|
||||
{
|
||||
className: {
|
||||
todo: true,
|
||||
},
|
||||
},
|
||||
[t.div('test')]
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = RightPanelContentView;
|
||||
|
|
@ -15,6 +15,9 @@ const {
|
|||
RoomViewModel,
|
||||
} = require('hydrogen-view-sdk');
|
||||
|
||||
const ArchiveView = require('matrix-public-archive-shared/ArchiveView');
|
||||
const RightPanelContentView = require('matrix-public-archive-shared/RightPanelContentView');
|
||||
|
||||
const roomData = global.INPUT_ROOM_DATA;
|
||||
assert(roomData);
|
||||
const events = global.INPUT_EVENTS;
|
||||
|
|
@ -176,7 +179,17 @@ async function mountHydrogen() {
|
|||
kind: 'none',
|
||||
};
|
||||
|
||||
const view = new RoomView(roomViewModel);
|
||||
const archiveViewModel = {
|
||||
roomViewModel,
|
||||
rightPanelModel: {
|
||||
activeViewModel: {
|
||||
type: 'custom',
|
||||
customView: RightPanelContentView,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const view = new ArchiveView(archiveViewModel);
|
||||
|
||||
//console.log('view.mount()', view.mount());
|
||||
app.appendChild(view.mount());
|
||||
|
|
|
|||
Loading…
Reference in New Issue