PRJ-114 Replace "reconnection" badge with a full-screen element

gradle.properties

@@ -27,7 +27,9 @@ kotlinVersion=1.4.0
 kotlinReactVersion=16.13.1-pre.112-kotlin-1.4.0
 kotlinStyledComponentsVersion=1.0.0-pre.110-kotlin-1.4.0
 ktorVersion=1.3.2
+radiumVersion=0.26.1
 reactVersion=16.13.1
+reactLoadingIndicatorVersion=1.0.2
 selenideVersion=5.13.1
 serializationVersion=1.0.0-RC
 styledComponentsVersion=~5.1.1

projector-client-web/build.gradle.kts

@@ -32,7 +32,9 @@ val coroutinesVersion: String by project
 val inlineStylePrefixerVersion: String by project
 val kotlinReactVersion: String by project
 val kotlinStyledComponentsVersion: String by project
+val radiumVersion: String by project
 val reactVersion: String by project
+val reactLoadingIndicatorVersion: String by project
 val serializationVersion: String by project
 val styledComponentsVersion: String by project
 
@@ -50,6 +52,8 @@ dependencies {
   implementation("org.jetbrains:kotlin-styled:$kotlinStyledComponentsVersion")
   implementation(npm("styled-components", styledComponentsVersion))
   implementation(npm("inline-style-prefixer", inlineStylePrefixerVersion))
+  implementation(npm("radium", radiumVersion))
+  implementation(npm("react-loading-indicator", reactLoadingIndicatorVersion))
 }
 
 kotlin {

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/externalDeclarartion/npm-radium.kt

@@ -0,0 +1,33 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2019-2020 JetBrains s.r.o.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+@file:JsModule("radium")
+@file:JsNonModule
+
+package org.jetbrains.projector.client.web.externalDeclarartion
+
+import react.RClass
+import react.RProps
+
+@JsName("StyleRoot")
+external val styleRoot: RClass<RProps>

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/externalDeclarartion/npm-react-loading-indicator.kt

@@ -0,0 +1,52 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2019-2020 JetBrains s.r.o.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+@file:JsModule("react-loading-indicator")
+@file:JsNonModule
+
+package org.jetbrains.projector.client.web.externalDeclarartion
+
+import react.RClass
+import react.RProps
+
+@JsName("default")
+external val loadingIndicator: RClass<LoadingIndicatorProps>
+
+external interface LoadingIndicatorProps : RProps {
+
+  var color: Color
+  var segments: Int
+  var segmentWidth: Double
+  var segmentLength: Double
+  var spacing: Double
+  var fadeTo: Double
+  var fadeSteps: Double
+}
+
+external interface Color {
+
+  var red: Int
+  var green: Int
+  var blue: Int
+  var alpha: Double
+}

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/ui/ReconnectionMessage.kt

@@ -24,11 +24,14 @@
 package org.jetbrains.projector.client.web.ui
 
 import kotlinx.css.*
+import org.jetbrains.projector.client.web.externalDeclarartion.loadingIndicator
+import org.jetbrains.projector.client.web.externalDeclarartion.styleRoot
 import react.RBuilder
 import react.RComponent
 import react.RProps
 import react.RState
 import styled.css
+import styled.styledH1
 import styled.styledSpan
 
 external interface ReconnectionMessageProps : RProps {
@@ -43,18 +46,37 @@ class ReconnectionMessage : RComponent<ReconnectionMessageProps, RState>() {
       styledSpan {
         css {
           position = Position.absolute
-          bottom = 80.px
-          right = 5.pct
+          width = 100.pct
+          height = 100.pct
+          top = 0.px
+          left = 0.px
           pointerEvents = PointerEvents.none
 
-          padding(5.px)
-          background = "red"
+          background = "rgba(127, 127, 127, 0.5)"
           display = Display.block
 
+          textAlign = TextAlign.center
+
           classes.add("connection-watcher-warning")
         }
 
-        +message
+        styledH1 {
+          css {
+            put("text-shadow", "-1px 0 #ccc, 0 1px #ccc, 1px 0 #ccc, 0 -1px #ccc")  // border
+          }
+
+          +message
+        }
+
+        styleRoot {
+          loadingIndicator {
+            attrs {
+              segmentLength = 50.0
+              segmentWidth = 10.0
+              spacing = 20.0
+            }
+          }
+        }
       }
     }
   }

projector-client-web/src/main/kotlin/org/jetbrains/projector/client/web/wrapper/npm-react-loading-indicator.kt

@@ -0,0 +1,35 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2019-2020 JetBrains s.r.o.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+package org.jetbrains.projector.client.web.wrapper
+
+import kotlinext.js.jsObject
+import org.jetbrains.projector.client.web.externalDeclarartion.Color
+
+@Suppress("FunctionName")
+fun Color(red: Int, green: Int, blue: Int, alpha: Double) = jsObject<Color> {
+  this.red = red
+  this.green = green
+  this.blue = blue
+  this.alpha = alpha
+}