Improve selection box (scalacenter#1049)

rochala · web-flow · commit fa65e47ca40e · 2024-02-14T16:51:17.000+01:00
diff --git a/api/src/main/scala/com.olegych.scastie.api/ScalaVersions.scala b/api/src/main/scala/com.olegych.scastie.api/ScalaVersions.scala
@@ -16,10 +16,10 @@ object ScalaVersions {
     val versions = tpe match {
       case ScalaTargetType.Scala3 =>
         List(
-          BuildInfo.stableLTS,
-          // BuildInfo.stableNext,
-          BuildInfo.latestLTS,
           BuildInfo.latestNext,
+          BuildInfo.stableNext,
+          BuildInfo.latestLTS,
+          BuildInfo.stableLTS,
           "3.3.0",
           "3.2.2",
           "3.2.1",
diff --git a/client/src/main/resources/sass/build-settings-theme.scss b/client/src/main/resources/sass/build-settings-theme.scss
@@ -56,6 +56,10 @@
         }
       }
 
+      .selected-option {
+        outline: 2px solid $selected-radio-color;
+      }
+
       .search .search-input {
         background-color: $input-background-color;
         .close {
diff --git a/client/src/main/scala/com.olegych.scastie.client/components/VersionSelector.scala b/client/src/main/scala/com.olegych.scastie.client/components/VersionSelector.scala
@@ -44,25 +44,32 @@ object VersionSelector {
                   onChange --> props.onChange(versionSelectors(suggestedVersion)),
                   checked := props.scalaTarget.scalaVersion == suggestedVersion
                 ),
-                label(`for` := s"scala-$suggestedVersion", cls := "radio", role := "button", renderRecommended3Versions(suggestedVersion))
+                label(`for` := s"scala-$suggestedVersion", className := "radio", role := "button", renderRecommended3Versions(suggestedVersion))
               )
             }
             .toTagMod,
           li(
             label(
-              div(cls := "select-wrapper")(
+              div(cls := "select-wrapper"){
+                val isRecommended = ScalaVersions
+                    .suggestedScalaVersions(props.scalaTarget.targetType)
+                    .contains(props.scalaTarget.scalaVersion)
+
                 select(
                   name := "scalaVersion",
                   onChange ==> { (e: ReactEventFromInput) =>
                     props.onChange(versionSelectors(e.target.value))
                   },
+                  value := {if (isRecommended) "Other" else props.scalaTarget.scalaVersion},
+                  TagMod.when(!isRecommended)(className := "selected-option")
                 )(
                   ScalaVersions
                     .allVersions(props.scalaTarget.targetType)
                     .map(version => option(version))
+                    .prepended(option("Other")(hidden := true, disabled := true))
                     .toTagMod
                 )
-              )
+              }
             )
           )
         )

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,10 @@`
`56`	`56`	`}`
`57`	`57`	`}`
`58`	`58`
	`59`	`+ .selected-option {`
	`60`	`+ outline: 2px solid $selected-radio-color;`
	`61`	`+ }`
	`62`	`+`
`59`	`63`	`.search .search-input {`
`60`	`64`	`background-color: $input-background-color;`
`61`	`65`	`.close {`