rewrite prefs with scalatags
Thibault Duplessis
parent
11857f5421
commit
3d0dbef637
|
|
@ -5,8 +5,8 @@ import ornicar.scalalib.Zero
|
|||
|
||||
import play.twirl.api.Html
|
||||
import scalatags.Text.all.{ genericAttr, attr, StringFrag }
|
||||
import scalatags.Text.{ Frag, RawFrag, Attr, AttrValue, Modifier, Cap, Aggregate, Attrs, Styles }
|
||||
import scalatags.text.Builder
|
||||
import scalatags.Text.{ Frag, RawFrag, Attr, AttrValue, Modifier, Cap, Aggregate, Attrs, Styles }
|
||||
|
||||
// collection of lila attrs
|
||||
trait ScalatagsAttrs {
|
||||
|
|
@ -50,7 +50,9 @@ trait ScalatagsBundle extends Cap
|
|||
|
||||
// short prefix
|
||||
trait ScalatagsPrefix {
|
||||
object st extends Cap with Attrs with scalatags.text.Tags
|
||||
object st extends Cap with Attrs with scalatags.text.Tags {
|
||||
lazy val group = tag("group")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,172 @@
|
|||
package views.html
|
||||
package account
|
||||
|
||||
import lila.api.Context
|
||||
import lila.app.templating.Environment._
|
||||
import lila.app.ui.ScalatagsTemplate._
|
||||
import lila.pref.{ Pref, PrefCateg }
|
||||
|
||||
import controllers.routes
|
||||
|
||||
object pref {
|
||||
|
||||
private def categFieldset(categ: lila.pref.PrefCateg, active: lila.pref.PrefCateg)(body: Frag) =
|
||||
div(cls := List("none" -> (categ != active)))(body)
|
||||
|
||||
private def setting(name: Frag, body: Frag) = li(h2(name), body)
|
||||
|
||||
private def radios(field: play.api.data.Field, options: Iterable[(Any, String)], prefix: String = "ir") =
|
||||
st.group(cls := "radio")(
|
||||
options.map { v =>
|
||||
val id = s"${field.id}_${v._1}"
|
||||
val checked = field.value has v._1.toString
|
||||
div(
|
||||
input(
|
||||
st.id := s"$prefix$id",
|
||||
st.checked := checked option true,
|
||||
cls := checked option "active",
|
||||
`type` := "radio",
|
||||
value := v._1.toString,
|
||||
name := field.name
|
||||
),
|
||||
label(`for` := s"$prefix$id")(v._2)
|
||||
)
|
||||
} toList
|
||||
)
|
||||
|
||||
def apply(u: lila.user.User, form: play.api.data.Form[_], categ: lila.pref.PrefCateg)(implicit ctx: Context) = account.layout(
|
||||
title = s"${bits.categName(categ)} - ${u.username} - ${trans.preferences.txt()}",
|
||||
active = categ.slug,
|
||||
evenMoreCss = cssTag("pref.css")
|
||||
) {
|
||||
val booleanChoices = Seq(0 -> trans.no.txt(), 1 -> trans.yes.txt())
|
||||
div(cls := "content_box small_box prefs")(
|
||||
div(cls := "signup_box")(
|
||||
h1(cls := "lichess_title text", dataIcon := "%")(bits.categName(categ)),
|
||||
st.form(cls := "autosubmit", action := routes.Pref.formApply, method := "POST")(
|
||||
categFieldset(PrefCateg.GameDisplay, categ) {
|
||||
ul(
|
||||
setting(
|
||||
trans.pieceAnimation.frag(),
|
||||
radios(form("display.animation"), translatedAnimationChoices)
|
||||
),
|
||||
setting(
|
||||
trans.materialDifference.frag(),
|
||||
radios(form("display.captured"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.boardHighlights.frag(),
|
||||
radios(form("display.highlight"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.pieceDestinations.frag(),
|
||||
radios(form("display.destination"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.boardCoordinates.frag(),
|
||||
radios(form("display.coords"), translatedBoardCoordinateChoices)
|
||||
),
|
||||
setting(
|
||||
trans.moveListWhilePlaying.frag(),
|
||||
radios(form("display.replay"), translatedMoveListWhilePlayingChoices)
|
||||
),
|
||||
setting(
|
||||
trans.pgnPieceNotation.frag(),
|
||||
radios(form("display.pieceNotation"), translatedPieceNotationChoices)
|
||||
),
|
||||
setting(
|
||||
trans.zenMode.frag(),
|
||||
radios(form("display.zen"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.blindfoldChess.frag(),
|
||||
radios(form("display.blindfold"), translatedBlindfoldChoices)
|
||||
)
|
||||
)
|
||||
},
|
||||
categFieldset(PrefCateg.ChessClock, categ) {
|
||||
ul(
|
||||
setting(
|
||||
trans.tenthsOfSeconds.frag(),
|
||||
radios(form("clockTenths"), translatedClockTenthsChoices)
|
||||
),
|
||||
setting(
|
||||
trans.horizontalGreenProgressBars.frag(),
|
||||
radios(form("clockBar"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.soundWhenTimeGetsCritical.frag(),
|
||||
radios(form("clockSound"), booleanChoices)
|
||||
)
|
||||
)
|
||||
},
|
||||
categFieldset(PrefCateg.GameBehavior, categ) {
|
||||
ul(
|
||||
setting(
|
||||
trans.howDoYouMovePieces.frag(),
|
||||
radios(form("behavior.moveEvent"), translatedMoveEventChoices)
|
||||
),
|
||||
setting(
|
||||
trans.premovesPlayingDuringOpponentTurn.frag(),
|
||||
radios(form("behavior.premove"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.takebacksWithOpponentApproval.frag(),
|
||||
radios(form("behavior.takeback"), translatedTakebackChoices)
|
||||
),
|
||||
setting(
|
||||
trans.promoteToQueenAutomatically.frag(),
|
||||
radios(form("behavior.autoQueen"), translatedAutoQueenChoices)
|
||||
),
|
||||
setting(
|
||||
trans.claimDrawOnThreefoldRepetitionAutomatically.frag(),
|
||||
radios(form("behavior.autoThreefold"), translatedAutoThreefoldChoices)
|
||||
),
|
||||
setting(
|
||||
trans.moveConfirmation.frag(),
|
||||
radios(form("behavior.submitMove"), submitMoveChoices)
|
||||
),
|
||||
setting(
|
||||
trans.confirmResignationAndDrawOffers.frag(),
|
||||
radios(form("behavior.confirmResign"), confirmResignChoices)
|
||||
),
|
||||
setting(
|
||||
trans.inputMovesWithTheKeyboard.frag(),
|
||||
radios(form("behavior.keyboardMove"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.castleByMovingTheKingTwoSquaresOrOntoTheRook.frag(),
|
||||
radios(form("behavior.rookCastle"), translatedRookCastleChoices)
|
||||
)
|
||||
)
|
||||
},
|
||||
categFieldset(PrefCateg.Privacy, categ) {
|
||||
ul(
|
||||
setting(
|
||||
trans.letOtherPlayersFollowYou.frag(),
|
||||
radios(form("follow"), booleanChoices)
|
||||
),
|
||||
setting(
|
||||
trans.letOtherPlayersChallengeYou.frag(),
|
||||
radios(form("challenge"), translatedChallengeChoices)
|
||||
),
|
||||
setting(
|
||||
trans.letOtherPlayersMessageYou.frag(),
|
||||
radios(form("message"), translatedMessageChoices)
|
||||
),
|
||||
setting(
|
||||
trans.letOtherPlayersInviteYouToStudy.frag(),
|
||||
radios(form("studyInvite"), translatedStudyInviteChoices)
|
||||
),
|
||||
setting(
|
||||
trans.shareYourInsightsData.frag(),
|
||||
radios(form("insightShare"), translatedInsightSquareChoices)
|
||||
)
|
||||
)
|
||||
},
|
||||
p(cls := "saved text none", dataIcon := "E")(trans.yourPreferencesHaveBeenSaved.frag())
|
||||
)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
@(u: User, form: Form[_], categ: lila.pref.PrefCateg)(implicit ctx: Context)
|
||||
|
||||
@import lila.pref.{Pref,PrefCateg}
|
||||
|
||||
@categFieldset(categ: lila.pref.PrefCateg, active: lila.pref.PrefCateg)(body: Html) = {
|
||||
<div@if(categ != active) { class="none" }>
|
||||
@body
|
||||
</div>
|
||||
}
|
||||
|
||||
@account.layout(
|
||||
title = s"${bits.categName(categ)} - ${u.username} - ${trans.preferences.txt()}",
|
||||
active = categ.slug,
|
||||
evenMoreCss = cssTag("pref.css")) {
|
||||
<div class="content_box small_box prefs">
|
||||
<div class="signup_box">
|
||||
<h1 class="lichess_title text" data-icon="%">@bits.categName(categ)</h1>
|
||||
<form class="autosubmit" action="@routes.Pref.formApply" method="POST">
|
||||
@defining(Seq(0 -> trans.no.txt(), 1 -> trans.yes.txt())) { booleanChoices =>
|
||||
@categFieldset(PrefCateg.GameDisplay, categ) {
|
||||
<ul>
|
||||
<li>
|
||||
<h2>@trans.pieceAnimation()</h2>
|
||||
@base.form.radios(form("display.animation"), translatedAnimationChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.materialDifference()</h2>
|
||||
@base.form.radios(form("display.captured"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.boardHighlights()</h2>
|
||||
@base.form.radios(form("display.highlight"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.pieceDestinations()</h2>
|
||||
@base.form.radios(form("display.destination"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.boardCoordinates()</h2>
|
||||
@base.form.radios(form("display.coords"), translatedBoardCoordinateChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.moveListWhilePlaying()</h2>
|
||||
@base.form.radios(form("display.replay"), translatedMoveListWhilePlayingChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.pgnPieceNotation()</h2>
|
||||
@base.form.radios(form("display.pieceNotation"), translatedPieceNotationChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.zenMode()</h2>
|
||||
@base.form.radios(form("display.zen"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.blindfoldChess()</h2>
|
||||
@base.form.radios(form("display.blindfold"), translatedBlindfoldChoices)
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
@categFieldset(PrefCateg.ChessClock, categ) {
|
||||
<ul>
|
||||
<li>
|
||||
<h2>@trans.tenthsOfSeconds()</h2>
|
||||
@base.form.radios(form("clockTenths"), translatedClockTenthsChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.horizontalGreenProgressBars()</h2>
|
||||
@base.form.radios(form("clockBar"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.soundWhenTimeGetsCritical()</h2>
|
||||
@base.form.radios(form("clockSound"), booleanChoices)
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
@categFieldset(PrefCateg.GameBehavior, categ) {
|
||||
<ul>
|
||||
<li>
|
||||
<h2>@trans.howDoYouMovePieces()</h2>
|
||||
@base.form.radios(form("behavior.moveEvent"), translatedMoveEventChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.premovesPlayingDuringOpponentTurn()</h2>
|
||||
@base.form.radios(form("behavior.premove"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.takebacksWithOpponentApproval()</h2>
|
||||
@base.form.radios(form("behavior.takeback"), translatedTakebackChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.promoteToQueenAutomatically()</h2>
|
||||
@base.form.radios(form("behavior.autoQueen"), translatedAutoQueenChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.claimDrawOnThreefoldRepetitionAutomatically()</h2>
|
||||
@base.form.radios(form("behavior.autoThreefold"), translatedAutoThreefoldChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.moveConfirmation()</h2>
|
||||
@base.form.radios(form("behavior.submitMove"), submitMoveChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.confirmResignationAndDrawOffers()</h2>
|
||||
@base.form.radios(form("behavior.confirmResign"), confirmResignChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.inputMovesWithTheKeyboard()</h2>
|
||||
@base.form.radios(form("behavior.keyboardMove"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.castleByMovingTheKingTwoSquaresOrOntoTheRook()</h2>
|
||||
@base.form.radios(form("behavior.rookCastle"), translatedRookCastleChoices)
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
@categFieldset(PrefCateg.Privacy, categ) {
|
||||
<ul>
|
||||
<li>
|
||||
<h2>@trans.letOtherPlayersFollowYou()</h2>
|
||||
@base.form.radios(form("follow"), booleanChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.letOtherPlayersChallengeYou()</h2>
|
||||
@base.form.radios(form("challenge"), translatedChallengeChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.letOtherPlayersMessageYou()</h2>
|
||||
@base.form.radios(form("message"), translatedMessageChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.letOtherPlayersInviteYouToStudy()</h2>
|
||||
@base.form.radios(form("studyInvite"), translatedStudyInviteChoices)
|
||||
</li>
|
||||
<li>
|
||||
<h2>@trans.shareYourInsightsData()</h2>
|
||||
@base.form.radios(form("insightShare"), translatedInsightSquareChoices)
|
||||
</li>
|
||||
</ul>
|
||||
}
|
||||
<p class="saved text none" data-icon="E">@trans.yourPreferencesHaveBeenSaved()</p>
|
||||
}
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
@(field: play.api.data.Field, options: Iterable[(Any,String)], prefix: String = "ir")
|
||||
|
||||
<group class="radio">
|
||||
@options.map { v =>
|
||||
@defining(s"${field.id}_${v._1}") { id =>
|
||||
<div>
|
||||
<input id="@prefix@id" @if(field.value == Some(v._1.toString)) { checked class="active" } type="radio" value="@v._1" name="@field.name" />
|
||||
<label for="@prefix@id">@v._2</label>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
</group>
|
||||
|
|
@ -53,7 +53,7 @@ private object bits {
|
|||
)
|
||||
|
||||
def renderRadios(field: Field, options: Seq[(String, String, Option[String])]) =
|
||||
groupTag(cls := "radio")(
|
||||
st.group(cls := "radio")(
|
||||
options.map {
|
||||
case (key, name, hint) => div(
|
||||
input(
|
||||
|
|
@ -112,5 +112,4 @@ private object bits {
|
|||
val dataValidateUrl = attr("data-validate-url")
|
||||
val dataResizable = attr("data-resizable")
|
||||
val dataType = attr("data-type")
|
||||
val groupTag = tag("group")
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue