imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #2780 from jryans/auth-validation

Browse source 
Initial portions of support for Field validation
This commit is contained in:
J. Ryan Stinnett 2019-03-14 10:19:21 +00:00 • committed by GitHub
commit 45063cad4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 262 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/_components.scss
View file

@ -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";

33
res/css/views/elements/_Field.scss
View file

@ -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 {

57
res/css/views/rooms/_RoomTooltip.scss → res/css/views/elements/_Tooltip.scss
View file

@ -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;
}