Skip to content

Commit

Permalink
Issue #18 Improved navigation and design (#54)
Browse files Browse the repository at this point in the history
LachlanMcKee authored Nov 8, 2020

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
1 parent fcea6e2 commit efbad98
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
@@ -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)
Original file line number Diff line number Diff line change
@@ -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
@@ -17,10 +17,8 @@ fieldset {
form {
font-family: sans-serif;
}
body {
.page-content {
margin: 20px;
background: #fafafa;
position: relative;
}
p {
white-space: pre-wrap;
@@ -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
@@ -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
@@ -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)
1 change: 1 addition & 0 deletions core/build.gradle.kts
Original file line number Diff line number Diff line change
@@ -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)
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.*

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
@@ -7,8 +7,6 @@ plugins {
dependencies {
api(project(":core"))

implementation(Dependencies.Ktor.htmlBuilder)

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

Original file line number Diff line number Diff line change
@@ -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
@@ -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")
@@ -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
)
}
}
}
}
Loading

0 comments on commit efbad98

Please sign in to comment.