self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-02-01 19:14:35 +02:00
Code Issues Releases Activity

Refactor boardPage: Move page frame layout to code

Browse Source
This commit is contained in:
Chen-I Lim 2020-10-12 10:04:06 -07:00
parent b5053c5292
commit e227d384d2
6 changed files with 56 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
html-templates/index.ejs
View File

@ -24,12 +24,6 @@
<a href="boards">All Boards</a> <a href="boards">All Boards</a>
</p> </p>
</main> </main>
<footer id="footer">
</footer>
<div id="overlay">
</div>
</body> </body>
</html> </html>

17
html-templates/page.ejs
View File

@ -11,21 +11,8 @@
<link rel="stylesheet" href="/colors.css"> <link rel="stylesheet" href="/colors.css">
</head> </head>
<body class="container"> <body>
<header id="header"> <div id="octo-tasks-app">
<a href="/">OCTO</a>
</header>
<main id="main">
</main>
<footer id="footer">
</footer>
<div id="overlay">
</div>
<div id="modal">
</div> </div>
</body> </body>

27
src/client/boardPage.tsx
View File

@ -6,6 +6,7 @@ import { CardTree } from "./cardTree"
import { BoardComponent } from "./components/boardComponent" import { BoardComponent } from "./components/boardComponent"
import { CardDialog } from "./components/cardDialog" import { CardDialog } from "./components/cardDialog"
import { FilterComponent } from "./components/filterComponent" import { FilterComponent } from "./components/filterComponent"
import { PageHeader } from "./components/pageHeader"
import { TableComponent } from "./components/tableComponent" import { TableComponent } from "./components/tableComponent"
import { FlashMessage } from "./flashMessage" import { FlashMessage } from "./flashMessage"
import { Mutator } from "./mutator" import { Mutator } from "./mutator"
@ -46,6 +47,8 @@ class BoardPage implements IPageController {
return return
} }
this.layoutPage()
this.boardId = queryString.get("id") this.boardId = queryString.get("id")
this.viewId = queryString.get("v") this.viewId = queryString.get("v")
@ -89,6 +92,23 @@ class BoardPage implements IPageController {
this.render() this.render()
} }
private layoutPage() {
const root = Utils.getElementById("octo-tasks-app")
root.innerText = ""
const header = root.appendChild(document.createElement("div"))
header.id = "header"
const main = root.appendChild(document.createElement("div"))
main.id = "main"
const overlay = root.appendChild(document.createElement("div"))
overlay.id = "overlay"
const modal = root.appendChild(document.createElement("div"))
modal.id = "modal"
}
render() { render() {
const { octo, boardTree } = this const { octo, boardTree } = this
const { board, activeView } = boardTree const { board, activeView } = boardTree
@ -96,11 +116,16 @@ class BoardPage implements IPageController {
const rootElement = Utils.getElementById("main") const rootElement = Utils.getElementById("main")
ReactDOM.render(
<PageHeader />,
Utils.getElementById("header")
)
if (board) { if (board) {
Utils.setFavicon(board.icon) Utils.setFavicon(board.icon)
} else { } else {
ReactDOM.render( ReactDOM.render(
<div>Loading...</div>, <div className="page-loading">Loading...</div>,
rootElement rootElement
) )
return return

8
src/client/boardsPage.ts
View File

@ -16,7 +16,13 @@ class BoardsPage {
constructor() { constructor() {
// This is a placeholder page // This is a placeholder page
const mainPanel = Utils.getElementById("main") const root = Utils.getElementById("octo-tasks-app")
root.innerText = ""
// Header
root.appendChild(Utils.htmlToElement(`<div class="page-header"><a href="/">OCTO</a></div`))
const mainPanel = root.appendChild(document.createElement("div"))
this.boardsPanel = mainPanel.appendChild(document.createElement("div")) this.boardsPanel = mainPanel.appendChild(document.createElement("div"))

16
src/client/components/pageHeader.tsx Normal file
View File

@ -0,0 +1,16 @@
import React from "react"
type Props = {
}
class PageHeader extends React.Component<Props> {
render() {
return (
<div className="page-header">
<a href="/">OCTO</a>
</div>
)
}
}
export { PageHeader }

14
src/static/main.css
View File

@ -36,7 +36,7 @@ hr {
margin-bottom: 8px; margin-bottom: 8px;
} }
header { .page-header {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
background-color: #eeeeee; background-color: #eeeeee;
@ -44,16 +44,12 @@ header {
padding: 10px 20px; padding: 10px 20px;
} }
header a { .page-header a {
color: #505050; color: #505050;
} }
main { .page-loading {
padding: 10px 20px; margin: 50px auto;
}
footer {
padding: 10px 20px;
} }
.title, h1 { .title, h1 {
@ -67,7 +63,7 @@ footer {
/* OCTO */ /* OCTO */
.octo-frame { .octo-frame {
padding: 10px 50px 50px 50px; padding: 10px 95px 50px 95px;
min-width: 1000px; min-width: 1000px;
} }