From b9c5e19f7ab3e807b10e13aa59e2b8f7251f20dd Mon Sep 17 00:00:00 2001 From: Alexandr Shchelov Date: Sun, 22 Jul 2018 00:06:14 +0300 Subject: [PATCH 1/2] add labels to form, make gui more mobile-friendly, add labels to the form, make the GUI more mobile-friendly, nest HTML elements as per Bulma's docs --- .../scala/pravda/node/servers/GuiRoute.scala | 229 +++++++++++------- 1 file changed, 139 insertions(+), 90 deletions(-) diff --git a/node/src/main/scala/pravda/node/servers/GuiRoute.scala b/node/src/main/scala/pravda/node/servers/GuiRoute.scala index 5f3a569d..59bb6e47 100644 --- a/node/src/main/scala/pravda/node/servers/GuiRoute.scala +++ b/node/src/main/scala/pravda/node/servers/GuiRoute.scala @@ -55,7 +55,7 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat import symbolDsl._ private def effectsTable(table: List[Map[String, Node]]): Node = { - 'table ('class /= "table is-striped is-hoverable is-fullwidth", + 'table ('class /= "table is-striped is-hoverable is-fullwidth is-narrow", 'thead ('tr (table.head.keys.map(k => 'td (k)))), 'tbody ( table.map { el => @@ -180,77 +180,83 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat val block = state.currentBlock mainLayout( state, - 'div ( - 'class /= "columns", - 'margin @= "0", - // Block number + 'section ( + 'class /= "section", 'div ( - 'class /= "column is-narrow has-text-centered", - 'div ('class /= "is-size-3", block.height.toString) - ), - // Block content - 'div ( - 'class /= "column", - block.transactions.map { - transaction => - val groupedEffects = groupEffects(transaction.effects) - 'div ( - 'class /= "card", - 'header ( - 'class /= "card-header", - 'p ( - 'class /= "card-header-title", - 'span ('class /= "icon has-text-black", 'i ('class /= "fas fa-stream")), - mono(transaction.id), - event('click) { access => - access.maybeTransition { - case s: BlockExplorer => - s.copy(currentTransactionId = Some(transaction.id), currentEffectsGroup = None) + 'class /= "columns", + // Block number + 'div ( + 'class /= "column is-narrow has-text-centered", + 'div ('class /= "is-size-3", block.height.toString) + ), + // Block content + 'div ( + 'class /= "column", + block.transactions.map { + transaction => + val groupedEffects = groupEffects(transaction.effects) + 'div ( + 'class /= "card", + 'header ( + 'class /= "card-header", + 'p ( + 'class /= "card-header-title", + 'style /= "overflow-x:auto;", + 'span ('class /= "icon has-text-black", 'i ('class /= "fas fa-stream")), + mono(transaction.id), + event('click) { access => + access.maybeTransition { + case s: BlockExplorer => + s.copy(currentTransactionId = Some(transaction.id), currentEffectsGroup = None) + } } - } - ) - ), - if (state.currentTransactionId.contains(transaction.id)) { - 'div ( - 'class /= "card-content", - 'div ('class /= "columns", - 'div ('class /= "column is-2", 'div ('class /= "title is-5", "From")), - 'div ('class /= "column", mono(transaction.from))), + ) + ), + if (state.currentTransactionId.contains(transaction.id)) { 'div ( - 'class /= "columns", - 'div ('class /= "column is-2", 'div ('class /= "title is-5", "Disassembled code")), - 'div ('class /= "column", 'pre ('class /= "code", transaction.disassembledProgram)) - ), - if (groupedEffects.nonEmpty) 'div ('class /= "title is-5", "World state effects") else void, - 'ul ( - 'class /= "columns is-multiline", - groupedEffects.zipWithIndex map { - case ((name, effects), i) => - 'li ( - 'class /= "column is-12", - 'div ( - 'class /= "title is-6", - s"${i + 1}. $name", - 'span ('marginLeft @= 5, 'class /= "tag is-blue", effects.length.toString), - event('click) { access => - access.maybeTransition { - case s: BlockExplorer => - s.copy(currentEffectsGroup = Some(i)) + 'class /= "card-content", + 'div ('class /= "columns", + 'div ('class /= "column is-2", 'div ('class /= "title is-5", "From")), + 'div ('class /= "column", 'style /= "overflow-x:auto;", mono(transaction.from))), + 'div ( + 'class /= "columns", + 'div ('class /= "column is-2", 'div ('class /= "title is-5", "Disassembled code")), + 'div ('class /= "column", 'pre ('class /= "code", transaction.disassembledProgram)) + ), + if (groupedEffects.nonEmpty) 'div ('class /= "title is-5", "World state effects") else void, + 'ul ( + 'class /= "columns is-multiline", + groupedEffects.zipWithIndex map { + case ((name, effects), i) => + 'li ( + 'class /= "column is-12", + 'div ( + 'class /= "title is-6", + s"${i + 1}. $name", + 'span ('marginLeft @= 5, 'class /= "tag is-blue", effects.length.toString), + event('click) { access => + access.maybeTransition { + case s: BlockExplorer => + s.copy(currentEffectsGroup = Some(i)) + } } - } - ), - if (state.currentEffectsGroup.contains(i)) { - effectsTable(effects.map(effectToTableElement)) - } else void - ) - } + ), + 'div ( + 'style /= "overflow-x:auto;", + if (state.currentEffectsGroup.contains(i)) { + effectsTable(effects.map(effectToTableElement)) + } else void + ) + ) + } + ) ) - ) - } else { - void - } - ) - } + } else { + void + } + ) + } + ) ) ) ) @@ -260,29 +266,74 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat mainLayout( state, 'form ( - 'display @= "flex", - 'flexDirection @= "column", - 'textarea ('class /= "textarea", - 'margin @= 10, - 'height @= 400, - codeArea, - 'placeholder /= "Place your pravda-asm code here"), - 'input ('class /= "input", 'margin @= 10, wattLimitField, 'placeholder /= "Watt limit", 'value /= "300"), - 'input ('class /= "input", 'margin @= 10, wattPriceField, 'placeholder /= "Watt price", 'value /= "1"), - 'input ('class /= "input", 'margin @= 10, addressField, 'placeholder /= "Address", 'value /= ""), //byteUtils.byteString2hex(Config.pravdaConfig.validator.address)), - 'input ( - 'class /= "input", - 'margin @= 10, - pkField, - 'placeholder /= "Private key", - 'type /= "password", - 'value /= "" //byteUtils.byteString2hex(Config.pravdaConfig.validator.privateKey) + 'class /= "section", + 'div ( + 'class /= "field", + 'label ('class /= "label", "Pravda-asm code"), + 'div ( + 'class /= "control", + 'textarea ('class /= "textarea", + 'height @= 400, + codeArea, + 'placeholder /= "Place your pravda-asm code here") + ) + ), + 'div ( + 'class /= "field", + 'label ('class /= "label", "Watt limit"), + 'div ( + 'class /= "control", + 'input ( + 'class /= "input", + wattLimitField, + 'placeholder /= "Watt limit", + 'type /= "number", + 'min /= "0", + 'value /= "300" + ) + ) + ), + 'div ( + 'class /= "field", + 'label ('class /= "label", "Watt price"), + 'div ( + 'class /= "control", + 'input ( + 'class /= "input", + wattPriceField, + 'placeholder /= "Watt price", + 'type /= "number", + 'min /= "0", + 'value /= "1" + ) + ) + ), + 'div ( + 'class /= "field", + 'label ('class /= "label", "Address"), + 'div ( + 'class /= "control", + 'input ('class /= "input", addressField, 'placeholder /= "Address", 'value /= "") //byteUtils.byteString2hex(Config.pravdaConfig.validator.address)), + ) + ), + 'div ( + 'class /= "field", + 'label ('class /= "label", "Private key"), + 'div ( + 'class /= "control", + 'input ( + 'class /= "input", + pkField, + 'placeholder /= "Private key", + 'type /= "password", + 'value /= "" //byteUtils.byteString2hex(Config.pravdaConfig.validator.privateKey) + ) + ) ), 'div ( + 'class /= "field buttons", 'button ( 'class /= "button is-link", - 'margin @= 10, - 'width @= 200, "Send transaction", if (inProgress) 'disabled /= "" else void, event('click) { @@ -332,8 +383,6 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat ), 'button ( 'class /= "button is-link is-danger", - 'margin @= 10, - 'width @= 200, "Create program", if (inProgress) 'disabled /= "" else void, event('click) { @@ -414,9 +463,9 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat private def mainLayout(state: GuiState, content: Node*) = { 'body ( 'div ( - 'class /= "column", + 'class /= "container is-fullhd", 'div ( - 'class /= "tabs", + 'class /= "tabs is-medium", 'ul ( 'li ( if (state.isInstanceOf[BlockExplorer]) 'class /= "is-active" else void, From 09585d322c9e576ac2135337c11cb298ab819e50 Mon Sep 17 00:00:00 2001 From: Alexandr Shchelov Date: Sun, 22 Jul 2018 00:24:06 +0300 Subject: [PATCH 2/2] format --- .../scala/pravda/node/servers/GuiRoute.scala | 84 ++++++++++--------- 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/node/src/main/scala/pravda/node/servers/GuiRoute.scala b/node/src/main/scala/pravda/node/servers/GuiRoute.scala index 59bb6e47..88ee52f6 100644 --- a/node/src/main/scala/pravda/node/servers/GuiRoute.scala +++ b/node/src/main/scala/pravda/node/servers/GuiRoute.scala @@ -55,13 +55,15 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat import symbolDsl._ private def effectsTable(table: List[Map[String, Node]]): Node = { - 'table ('class /= "table is-striped is-hoverable is-fullwidth is-narrow", - 'thead ('tr (table.head.keys.map(k => 'td (k)))), - 'tbody ( - table.map { el => - 'tr (el.values.map(k => 'td (k))) - } - )) + 'table ( + 'class /= "table is-striped is-hoverable is-fullwidth is-narrow", + 'thead ('tr (table.head.keys.map(k => 'td (k)))), + 'tbody ( + table.map { el => + 'tr (el.values.map(k => 'td (k))) + } + ) + ) } private def showEffectName(effect: EnvironmentEffect) = effect match { @@ -181,9 +183,9 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat mainLayout( state, 'section ( - 'class /= "section", + 'class /= "section", 'div ( - 'class /= "columns", + 'class /= "columns", // Block number 'div ( 'class /= "column is-narrow has-text-centered", @@ -215,9 +217,11 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat if (state.currentTransactionId.contains(transaction.id)) { 'div ( 'class /= "card-content", - 'div ('class /= "columns", - 'div ('class /= "column is-2", 'div ('class /= "title is-5", "From")), - 'div ('class /= "column", 'style /= "overflow-x:auto;", mono(transaction.from))), + 'div ( + 'class /= "columns", + 'div ('class /= "column is-2", 'div ('class /= "title is-5", "From")), + 'div ('class /= "column", 'style /= "overflow-x:auto;", mono(transaction.from)) + ), 'div ( 'class /= "columns", 'div ('class /= "column is-2", 'div ('class /= "title is-5", "Disassembled code")), @@ -266,12 +270,12 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat mainLayout( state, 'form ( - 'class /= "section", + 'class /= "section", 'div ( - 'class /= "field", - 'label ('class /= "label", "Pravda-asm code"), + 'class /= "field", + 'label ('class /= "label", "Pravda-asm code"), 'div ( - 'class /= "control", + 'class /= "control", 'textarea ('class /= "textarea", 'height @= 400, codeArea, @@ -279,50 +283,50 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat ) ), 'div ( - 'class /= "field", - 'label ('class /= "label", "Watt limit"), + 'class /= "field", + 'label ('class /= "label", "Watt limit"), 'div ( - 'class /= "control", + 'class /= "control", 'input ( - 'class /= "input", + 'class /= "input", wattLimitField, 'placeholder /= "Watt limit", - 'type /= "number", - 'min /= "0", - 'value /= "300" + 'type /= "number", + 'min /= "0", + 'value /= "300" ) ) ), 'div ( - 'class /= "field", - 'label ('class /= "label", "Watt price"), + 'class /= "field", + 'label ('class /= "label", "Watt price"), 'div ( - 'class /= "control", + 'class /= "control", 'input ( - 'class /= "input", + 'class /= "input", wattPriceField, 'placeholder /= "Watt price", - 'type /= "number", - 'min /= "0", - 'value /= "1" + 'type /= "number", + 'min /= "0", + 'value /= "1" ) ) ), 'div ( - 'class /= "field", - 'label ('class /= "label", "Address"), + 'class /= "field", + 'label ('class /= "label", "Address"), 'div ( - 'class /= "control", - 'input ('class /= "input", addressField, 'placeholder /= "Address", 'value /= "") //byteUtils.byteString2hex(Config.pravdaConfig.validator.address)), + 'class /= "control", + 'input ('class /= "input", addressField, 'placeholder /= "Address", 'value /= "") //byteUtils.byteString2hex(Config.pravdaConfig.validator.address)), ) ), 'div ( - 'class /= "field", - 'label ('class /= "label", "Private key"), + 'class /= "field", + 'label ('class /= "label", "Private key"), 'div ( - 'class /= "control", + 'class /= "control", 'input ( - 'class /= "input", + 'class /= "input", pkField, 'placeholder /= "Private key", 'type /= "password", @@ -333,7 +337,7 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat 'div ( 'class /= "field buttons", 'button ( - 'class /= "button is-link", + 'class /= "button is-link", "Send transaction", if (inProgress) 'disabled /= "" else void, event('click) { @@ -382,7 +386,7 @@ class GuiRoute(abciClient: AbciClient, db: DB)(implicit system: ActorSystem, mat } ), 'button ( - 'class /= "button is-link is-danger", + 'class /= "button is-link is-danger", "Create program", if (inProgress) 'disabled /= "" else void, event('click) {