Merge pull request #2780 from jryans/auth-validation

Initial portions of support for Field validation

res/css/_components.scss

@@ -95,6 +95,7 @@
 @import "./views/elements/_SyntaxHighlight.scss";
 @import "./views/elements/_ToggleSwitch.scss";
 @import "./views/elements/_ToolTipButton.scss";
+@import "./views/elements/_Tooltip.scss";
 @import "./views/globals/_MatrixToolbar.scss";
 @import "./views/groups/_GroupPublicityToggle.scss";
 @import "./views/groups/_GroupRoomList.scss";
@@ -137,7 +138,6 @@
 @import "./views/rooms/_RoomPreviewBar.scss";
 @import "./views/rooms/_RoomRecoveryReminder.scss";
 @import "./views/rooms/_RoomTile.scss";
-@import "./views/rooms/_RoomTooltip.scss";
 @import "./views/rooms/_RoomUpgradeWarningBar.scss";
 @import "./views/rooms/_SearchBar.scss";
 @import "./views/rooms/_SearchableEntityList.scss";

res/css/views/elements/_Field.scss

@@ -141,6 +141,39 @@ limitations under the License.
     color: $greyed-fg-color;
 }
 
+.mx_Field_valid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $input-valid-border-color;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $input-valid-border-color;
+    }
+}
+
+.mx_Field_invalid {
+    &.mx_Field,
+    &.mx_Field:focus-within {
+        border-color: $input-invalid-border-color;
+    }
+
+    &.mx_Field label,
+    &.mx_Field:focus-within label {
+        color: $input-invalid-border-color;
+    }
+}
+
+.mx_Field_tooltip {
+    margin-top: -12px;
+    margin-left: 4px;
+}
+
+.mx_Field_tooltip.mx_Field_valid {
+    animation: mx_fadeout 1s 2s forwards;
+}
+
 // Customise other components when placed inside a Field
 
 .mx_Field .mx_Dropdown_input {

res/css/views/elements/_Tooltip.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,41 +15,55 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomTooltip_chevron {
-    position: absolute;
-    left: -8px;
-    top: 4px;
-    width: 0;
-    height: 0;
-    border-top: 8px solid transparent;
-    border-right: 8px solid $menu-bg-color;
-    border-bottom: 8px solid transparent;
+@keyframes mx_fadein {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
-.mx_RoomTooltip_chevron:after {
-    content:'';
+@keyframes mx_fadeout {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+.mx_Tooltip_chevron {
+    position: absolute;
+    left: -7px;
+    top: 10px;
     width: 0;
     height: 0;
     border-top: 7px solid transparent;
-    border-right: 7px solid $primary-bg-color;
+    border-right: 7px solid $menu-border-color;
     border-bottom: 7px solid transparent;
-    position:absolute;
-    top: -7px;
+}
+
+.mx_Tooltip_chevron:after {
+    content:'';
+    width: 0;
+    height: 0;
+    border-top: 6px solid transparent;
+    border-right: 6px solid $menu-bg-color;
+    border-bottom: 6px solid transparent;
+    position: absolute;
+    top: -6px;
     left: 1px;
 }
 
-.mx_RoomTooltip {
+.mx_Tooltip {
     display: none;
+    animation: mx_fadein 0.2s;
     position: fixed;
-    border-radius: 5px;
-    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.21);
-    background-color: $primary-bg-color;
+    border: 1px solid $menu-border-color;
+    border-radius: 4px;
+    box-shadow: 4px 4px 12px 0 rgba(118, 131, 156, 0.6);
+    background-color: $menu-bg-color;
     z-index: 2000;
-    padding: 5px;
+    padding: 10px;
     pointer-events: none;
     line-height: 14px;
-    font-size: 13px;
+    font-size: 12px;
+    font-weight: 600;
     color: $primary-fg-color;
-    max-width: 600px;
+    max-width: 200px;
+    word-break: break-word;
     margin-right: 50px;
 }

res/themes/dark/css/_dark.scss

@@ -53,6 +53,7 @@ $input-lighter-bg-color: #f2f5f8;
 $input-lighter-fg-color: $input-darker-fg-color;
 $input-focused-border-color: #238cf5;
 $input-valid-border-color: $accent-color;
+$input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: $bg-color;
 

res/themes/light/css/_light.scss

@@ -79,6 +79,7 @@ $input-lighter-bg-color: #f2f5f8;
 $input-lighter-fg-color: $input-darker-fg-color;
 $input-focused-border-color: #238cf5;
 $input-valid-border-color: $accent-color;
+$input-invalid-border-color: $warning-color;
 
 $field-focused-label-bg-color: #ffffff;
 
@@ -95,7 +96,7 @@ $input-fg-color: rgba(74, 74, 74, 0.9);
 $scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
 $scrollbar-track-color: transparent;
 // context menus
-$menu-border-color: #ebedf8;
+$menu-border-color: #e7e7e7;
 $menu-bg-color: #fff;
 $menu-box-shadow-color: rgba(118, 131, 156, 0.6);
 $menu-selected-color: #f5f8fa;