Merge pull request #3692 from vector-im/luke/login-ui

Cosmetics to go with matrix-org/matrix-react-sdk#811
pull/3490/merge
Luke Barnard 2017-04-21 17:40:53 +01:00 committed by GitHub
commit 2afe9e6928
6 changed files with 85 additions and 7 deletions

View File

@ -10,6 +10,7 @@ const COPY_LIST = [
["res/{media,vector-icons}/**", "webapp"],
["src/skins/vector/{fonts,img}/**", "webapp"],
["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
["./config.json", "webapp", {directwatch: 1}],
];

View File

@ -18,6 +18,9 @@ limitations under the License.
var React = require('react');
const i = [1, 2, 3, 4, 5][Math.floor(Math.random() * 5)];
const DEFAULT_LOGO_URI = "img/logos/riot-logo-" + i + ".svg";
module.exports = React.createClass({
displayName: 'VectorLoginHeader',
statics: {
@ -30,7 +33,7 @@ module.exports = React.createClass({
render: function() {
return (
<div className="mx_Login_logo">
<img src={this.props.icon || "img/logo.png"} alt="Riot"/>
<img src={this.props.icon || DEFAULT_LOGO_URI} alt="Riot"/>
</div>
);
}

View File

@ -65,7 +65,7 @@ input[type=text].error, input[type=password].error {
border: 1px solid $warning-color;
}
input[type=text]:focus, textarea:focus {
input[type=text]:focus, input[type=password]:focus, textarea:focus {
border: 1px solid $accent-color;
outline: none;
box-shadow: none;

View File

@ -66,10 +66,6 @@ limitations under the License.
margin-bottom: 14px;
}
.mx_Login_username {
margin-bottom: 0px;
}
.mx_Login_fieldLabel {
margin-top: -10px;
margin-left: 8px;
@ -167,6 +163,66 @@ limitations under the License.
margin-bottom: 12px;
}
.mx_Login_type_container {
display: flex;
margin-bottom: 14px;
}
.mx_Login_type_label {
flex-grow: 1;
line-height: 35px;
}
.mx_Login_type_dropdown {
width: 125px;
align-self: flex-end;
}
.mx_Login_username_group {
display: flex;
}
.mx_Login_username_prefix {
height: 33px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-right: 0px;
border-radius: 3px 0px 0px 3px;
text-align: center;
}
.mx_Login_username_suffix {
height: 33px;
padding: 0px 5px;
line-height: 33px;
background-color: #eee;
border: 1px solid #c7c7c7;
border-left: 0px;
border-radius: 0px 3px 3px 0px;
text-align: center;
flex-grow: 1;
}
.mx_Login_username {
flex-shrink: 1;
min-width: 0px;
border-radius: 3px;
/* The "@" is always prefixed, so no rounded corners */
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
.mx_Login_field_has_suffix {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.mx_Login_phoneSection {
display: table;
}
@ -176,6 +232,20 @@ limitations under the License.
width: 70px;
}
.mx_Login_phoneCountry .mx_Dropdown_option {
/*
To match height of mx_Login_field
33px + 2px border from mx_Dropdown_option = 35px
*/
height: 33px;
line-height: 33px;
}
.mx_Login_phoneCountry .mx_Dropdown_option img {
margin: 4px;
vertical-align: top;
}
.mx_Login_phoneNumberField {
width: 210px;
margin-left: 3px;

View File

@ -27,6 +27,10 @@ limitations under the License.
user-select: none;
}
.mx_Dropdown_input:focus {
border-color: $accent-color;
}
.mx_Dropdown_arrow {
border-color: $primary-fg-color transparent transparent;
border-style: solid;
@ -74,7 +78,7 @@ input.mx_Dropdown_option, input.mx_Dropdown_option:focus {
border: 1px solid $accent-color;
background-color: $primary-bg-color;
max-height: 200px;
overflow-y: scroll;
overflow-y: auto;
}
.mx_Dropdown_menu .mx_Dropdown_option_highlight {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB