Skip to content

Commit

Permalink
Issue #18 Improved navigation and design (#54)
Browse files Browse the repository at this point in the history
  • Loading branch information
LachlanMcKee authored Nov 8, 2020
1 parent fcea6e2 commit efbad98
Show file tree
Hide file tree
Showing 22 changed files with 651 additions and 414 deletions.
1 change: 0 additions & 1 deletion backend/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ dependencies {

implementation(Dependencies.Ktor.serverNetty)
implementation(Dependencies.logbackClassic)
implementation(Dependencies.Ktor.htmlBuilder)
implementation(Dependencies.Ktor.clientCore)
implementation(Dependencies.Ktor.clientCoreJvm)
implementation(Dependencies.Ktor.clientApache)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,30 @@ package net.lachlanmckee.bitrise.presentation

import io.ktor.application.ApplicationCall
import io.ktor.html.respondHtml
import kotlinx.html.*
import net.lachlanmckee.bitrise.core.presentation.*

class HomeScreen {
suspend fun respondHtml(call: ApplicationCall) {
call.respondHtml {
head {
link(rel = "stylesheet", href = "https://fonts.googleapis.com/icon?family=Material+Icons")
link(rel = "stylesheet", href = "https://code.getmdl.io/1.3.0/material.indigo-pink.min.css")
script {
src = "https://code.getmdl.io/1.3.0/material.min.js"
}
link(rel = "stylesheet", href = "/static/styles.css", type = "text/css")
}
body {
h1 { +"Bitrise Test Home" }

div {
a(href = "/test-runner") {
classes = setOf("mdl-button mdl-button--colored", "mdl-js-button", "mdl-js-ripple-effect", "green-button")
+"Test Runner"
}
}
br
div {
a(href = "/test-results") {
classes = setOf("mdl-button mdl-button--colored", "mdl-js-button", "mdl-js-ripple-effect", "green-button")
+"Test Results"
}
}
}
materialHeader()
materialBody(
title = "Bitrise Test Home",
linksFunc = {
materialStandardLink(
text = "Test Runner",
href = "/test-runner",
icon = "directions_run",
newWindow = false
)
materialStandardLink(
text = "Test Results",
href = "/test-results",
icon = "poll",
newWindow = false
)
},
contentFunc = {}
)
}
}
}
8 changes: 5 additions & 3 deletions backend/src/main/resources/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@ fieldset {
form {
font-family: sans-serif;
}
body {
.page-content {
margin: 20px;
background: #fafafa;
position: relative;
}
p {
white-space: pre-wrap;
Expand Down Expand Up @@ -123,3 +121,7 @@ p {
height: 400px;
overflow: auto;
}

.mdl-navigation__link--icon>.material-icons{
margin-right:8px;
}
19 changes: 14 additions & 5 deletions backend/src/test/resources/output/home/expected.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,23 @@
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet">
<link href="https://code.getmdl.io/1.3.0/material.teal-indigo.min.css" rel="stylesheet">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="/static/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>Bitrise Test Home</h1>
<div><a href="/test-runner" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect green-button">Test Runner</a></div>
<br>
<div><a href="/test-results" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect green-button">Test Results</a></div>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row"><span class="mdl-layout-title">Bitrise Test Home</span>
<nav class="mdl-navigation"><a href="/test-runner" target="_self" class="mdl-navigation__link mdl-navigation__link--icon"><i class="material-icons">directions_run</i><span>Test Runner</span></a><a href="/test-results" target="_self" class="mdl-navigation__link mdl-navigation__link--icon"><i class="material-icons">poll</i><span>Test Results</span></a></nav>
</div>
</header>
<div class="mdl-layout__drawer"><span class="mdl-layout-title">Bitrise Test Home</span>
<nav class="mdl-navigation"><a href="/test-runner" target="_self" class="mdl-navigation__link mdl-navigation__link--icon"><i class="material-icons">directions_run</i><span>Test Runner</span></a><a href="/test-results" target="_self" class="mdl-navigation__link mdl-navigation__link--icon"><i class="material-icons">poll</i><span>Test Results</span></a></nav>
</div>
<main class="mdl-layout__content">
<div class="page-content"></div>
</main>
</div>
</body>
</html>
1 change: 0 additions & 1 deletion core-impl/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ plugins {

dependencies {
api(project(":core"))
implementation(Dependencies.Ktor.htmlBuilder)
implementation(Dependencies.Ktor.clientCore)
implementation(Dependencies.Ktor.clientCoreJvm)
implementation(Dependencies.Ktor.clientApache)
Expand Down
1 change: 1 addition & 0 deletions core/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ dependencies {
implementation(Dependencies.Kotlin.stdlib)
api(Dependencies.Ktor.serverCore)
implementation(Dependencies.Ktor.serverCore)
api(Dependencies.Ktor.htmlBuilder)
api(Dependencies.Ktor.gson)
implementation(Dependencies.Ktor.clientJson)
implementation(Dependencies.Ktor.clientGson)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
package net.lachlanmckee.bitrise.results.presentation
package net.lachlanmckee.bitrise.core.presentation

import kotlinx.html.*

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
package net.lachlanmckee.bitrise.core.presentation

import kotlinx.html.*

fun HTML.materialHeader(contentFunc: HEAD.() -> Unit = {}) {
head {
link(rel = "stylesheet", href = "https://fonts.googleapis.com/icon?family=Material+Icons")
link(rel = "stylesheet", href = "https://code.getmdl.io/1.3.0/material.teal-indigo.min.css")
script {
src = "https://code.getmdl.io/1.3.0/material.min.js"
}
link(rel = "stylesheet", href = "/static/styles.css", type = "text/css")

contentFunc(this)
}
}

fun HTML.materialBody(
title: String,
linksFunc: NAV.(MaterialLinkMode) -> Unit = {},
contentFunc: HtmlBlockTag.() -> Unit
) {
body {
div {
classes = setOf("mdl-layout", "mdl-js-layout", "mdl-layout--fixed-header")
header("mdl-layout__header") {
div("mdl-layout__header-row") {
span("mdl-layout-title") { +title }

nav {
classes = setOf("mdl-navigation")
linksFunc(MaterialLinkMode.TOOLBAR)
}
}
}
div("mdl-layout__drawer") {
span("mdl-layout-title") { +title }

nav {
classes = setOf("mdl-navigation")
linksFunc(MaterialLinkMode.DRAWER)
}
}
main("mdl-layout__content") {
div("page-content") {
contentFunc()
}
}
}
}
}

fun NAV.materialStandardLink(text: String, href: String, icon: String, newWindow: Boolean) {
a(href, if (newWindow) "_blank" else "_self") {
classes = setOf("mdl-navigation__link", "mdl-navigation__link--icon")
i {
classes = setOf("material-icons")
text(icon)
}
span {
text(text)
}
}
}

fun NAV.materialJavascriptLink(text: String, onClick: String, icon: String) {
a("#") {
this.onClick = onClick
classes = setOf("mdl-navigation__link", "mdl-navigation__link--icon")
i {
classes = setOf("material-icons")
text(icon)
}
span {
text(text)
}
}
}

enum class MaterialLinkMode {
TOOLBAR, DRAWER
}
2 changes: 0 additions & 2 deletions results/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ plugins {
dependencies {
api(project(":core"))

implementation(Dependencies.Ktor.htmlBuilder)

implementation(Dependencies.Dagger.dagger)
kapt(Dependencies.Dagger.daggerCompiler)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ package net.lachlanmckee.bitrise.results.presentation
import io.ktor.application.*
import io.ktor.html.*
import kotlinx.html.*
import net.lachlanmckee.bitrise.core.presentation.ErrorScreenFactory
import net.lachlanmckee.bitrise.core.presentation.*
import net.lachlanmckee.bitrise.results.domain.entity.TestResultDetailModel
import net.lachlanmckee.bitrise.results.domain.entity.TestResultDetailModel.WithResults.*
import net.lachlanmckee.bitrise.results.domain.interactor.TestResultInteractor
Expand Down Expand Up @@ -71,43 +71,70 @@ internal class TestResultScreen(
private suspend fun renderTemplate(
call: ApplicationCall,
resultDetailModel: TestResultDetailModel,
extraContentFunc: BODY.() -> Unit
extraContentFunc: HtmlBlockTag.() -> Unit
) {
call.respondHtml {
head {
link(rel = "stylesheet", href = "https://fonts.googleapis.com/icon?family=Material+Icons")
link(rel = "stylesheet", href = "https://code.getmdl.io/1.3.0/material.indigo-pink.min.css")
script {
src = "https://code.getmdl.io/1.3.0/material.min.js"
}
link(rel = "stylesheet", href = "/static/styles.css", type = "text/css")
}
body {
h1 { +"Bitrise Test Result" }

div {
linkButton("Bitrise", resultDetailModel.bitriseUrl)
linkButton("Firebase", resultDetailModel.firebaseUrl)

resultDetailModel.yaml?.also { yaml ->
jsButton("YAML", "openDialog('Yaml')")
dialog("dialogYaml", "YAML", yaml.split("\n"))
materialHeader()
materialBody(
title = "Bitrise Test Result",
linksFunc = { mode: MaterialLinkMode ->
if (mode == MaterialLinkMode.DRAWER) {
materialStandardLink(
text = "Home",
href = "/",
icon = "home",
newWindow = false
)
materialStandardLink(
text = "Test Results",
href = "/test-results",
icon = "poll",
newWindow = false
)
materialStandardLink(
text = "Test Runner",
href = "/test-runner",
icon = "directions_run",
newWindow = false
)
}

materialStandardLink(
text = "Bitrise",
href = resultDetailModel.bitriseUrl,
icon = "build",
newWindow = true
)
materialStandardLink(
text = "Firebase",
href = resultDetailModel.firebaseUrl,
icon = "local_fire_department",
newWindow = true
)
materialJavascriptLink(
text = "YAML",
onClick = "openDialog('Yaml')",
icon = "text_snippet"
)
if (resultDetailModel.totalFailures > 0) {
linkButton(
"Rerun ${resultDetailModel.totalFailures} failures",
"/test-rerun?build-slug=${resultDetailModel.buildSlug}"
materialStandardLink(
text = "Rerun ${resultDetailModel.totalFailures} failures",
href = "/test-rerun?build-slug=${resultDetailModel.buildSlug}",
icon = "replay",
newWindow = true
)
}
},
contentFunc = {
resultDetailModel.yaml?.also { yaml ->
dialog("dialogYaml", "YAML", yaml.split("\n"))
}
extraContentFunc()
}
br()
extraContentFunc()
}
)
}
}

private fun BODY.testSuiteElement(testSuite: TestSuiteModel) {
private fun HtmlBlockTag.testSuiteElement(testSuite: TestSuiteModel) {
div {
p {
classes = setOf("heading")
Expand Down Expand Up @@ -144,7 +171,13 @@ internal class TestResultScreen(
}
}
tbody {
testSuite.testCases.forEachIndexed { index, testCase -> this@table.testCaseElement(testSuite, testCase, index) }
testSuite.testCases.forEachIndexed { index, testCase ->
this@table.testCaseElement(
testSuite,
testCase,
index
)
}
}
}
}
Expand Down
Loading

0 comments on commit efbad98

Please sign in to comment.