luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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>
</p>
</main>
<footer id="footer">
</footer>
<div id="overlay">
</div>
</body>
</html>

17
html-templates/page.ejs
View file

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

27
src/client/boardPage.tsx
View file

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

8
src/client/boardsPage.ts
View file

@ -16,7 +16,13 @@ class BoardsPage {
constructor() {
// 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"))

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