Improvements of message displaying (internal styles)

This commit is contained in:
RainLoop Team 2015-05-31 21:40:54 +04:00
parent 0bba7146a6
commit 4457cdbc23
46 changed files with 1967 additions and 359 deletions

View file

@ -19,97 +19,102 @@
<span data-bind="text: submitErrorAddidional"></span>
</div>
</div>
<form class="wrapper loginForm thm-login" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError}">
{{INCLUDE/TopControlGroup/PLACE}}
<div class="controls" data-bind="css: {'error': emailError, 'animated': emailErrorAnimation}">
<div class="input-append">
<input type="email" class="i18n input-block-level inputEmail checkAutocomplete"
name="RainLoopEmail" id="RainLoopEmail"
style="padding-right: 35px;"
autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: email, hasFocus: emailFocus" data-i18n="[placeholder]LOGIN/LABEL_EMAIL" />
<span class="add-on">
<i class="icon-mail"></i>
</span>
<div class="wrapper-parent">
<div class="wrapper loginWelcomeForm thm-login-text" data-bind="css: {'welcome-on': welcome}">
<!-- ko template: { name: 'LoginWelcome' } --><!-- /ko -->
</div>
<form class="wrapper loginForm thm-login thm-login-text" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'welcome-off': welcome}">
{{INCLUDE/TopControlGroup/PLACE}}
<div class="controls" data-bind="css: {'error': emailError, 'animated': emailErrorAnimation}">
<div class="input-append">
<input type="email" class="i18n input-block-level inputEmail checkAutocomplete"
name="RainLoopEmail" id="RainLoopEmail"
style="padding-right: 35px;"
autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: email, hasFocus: emailFocus" data-i18n="[placeholder]LOGIN/LABEL_EMAIL" />
<span class="add-on">
<i class="icon-mail"></i>
</span>
</div>
</div>
</div>
<div class="controls" data-bind="css: {'error': passwordError, 'animated': passwordErrorAnimation}">
<div class="input-append">
<input type="password" class="i18n input-block-level inputPassword checkAutocomplete"
name="RainLoopPassword" id="RainLoopPassword"
style="padding-right: 35px;"
autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: password, hasFocus: passwordFocus" data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" />
<span class="add-on">
<i class="icon-key"></i>
</span>
<div class="controls" data-bind="css: {'error': passwordError, 'animated': passwordErrorAnimation}">
<div class="input-append">
<input type="password" class="i18n input-block-level inputPassword checkAutocomplete"
name="RainLoopPassword" id="RainLoopPassword"
style="padding-right: 35px;"
autocorrect="off" autocapitalize="off" spellcheck="false"
data-bind="textInput: password, hasFocus: passwordFocus" data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" />
<span class="add-on">
<i class="icon-key"></i>
</span>
</div>
</div>
</div>
<div class="controls" data-bind="visible: additionalCode.visibility(), css: {'error': additionalCode.error, 'animated': additionalCode.errorAnimation}">
<div class="input-append">
<input type="text" class="i18n input-block-level inputAdditionalCode"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
style="padding-right: 35px;"
data-bind="textInput: additionalCode, hasFocus: additionalCode.focused" data-i18n="[placeholder]LOGIN/LABEL_VERIFICATION_CODE" />
<span class="add-on">
<i class="icon-key"></i>
</span>
<div class="controls" data-bind="visible: additionalCode.visibility(), css: {'error': additionalCode.error, 'animated': additionalCode.errorAnimation}">
<div class="input-append">
<input type="text" class="i18n input-block-level inputAdditionalCode"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
style="padding-right: 35px;"
data-bind="textInput: additionalCode, hasFocus: additionalCode.focused" data-i18n="[placeholder]LOGIN/LABEL_VERIFICATION_CODE" />
<span class="add-on">
<i class="icon-key"></i>
</span>
</div>
</div>
</div>
<div class="controls" data-bind="visible: additionalCode.visibility()">
<div class="additionalCodeSignMeLabel" data-bind="component: {
name: 'CheckboxSimple',
params: {
label: 'LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE',
value: additionalCodeSignMe
}
}"></div>
</div>
{{INCLUDE/BottomControlGroup/PLACE}}
<div class="controls">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand, hasFocus: submitFocus">
<i class="icon-spinner animated" data-bind="visible: submitRequest"></i>
<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN" data-bind="visible: !submitRequest()"></span>
</button>
</div>
<div class="controls clearfix" style="margin-bottom: 20px">
<div class="pull-right social-buttons">
<a href="#" tabindex="-1" class="social-button" data-bind="visible: facebookLoginEnabled, command: facebookCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_FACEBOOK'">
<i class="icon-facebook-alt"></i>
</a>
<a href="#" tabindex="-1" class="social-button" data-bind="visible: googleLoginEnabled, command: googleCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_GOOGLE'">
<i class="icon-google"></i>
</a>
<a href="#" tabindex="-1" class="social-button" data-bind="visible: twitterLoginEnabled, command: twitterCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_TWITTER'">
<i class="icon-twitter"></i>
</a>
<a href="#" tabindex="-1" class="language-button" data-bind="visible: allowLanguagesOnLogin() && !socialLoginEnabled(), click: selectLanguage, tooltip: 'POPUPS_LANGUAGES/TITLE_LANGUAGES'">
<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
</a>
<div class="controls" data-bind="visible: additionalCode.visibility()">
<div class="additionalCodeSignMeLabel" data-bind="component: {
name: 'CheckboxSimple',
params: {
label: 'LOGIN/LABEL_DONT_ASK_VERIFICATION_CODE',
value: additionalCodeSignMe
}
}"></div>
</div>
{{INCLUDE/BottomControlGroup/PLACE}}
<div class="controls">
<button type="submit" class="btn btn-large btn-block buttonLogin" data-bind="command: submitCommand, hasFocus: submitFocus">
<i class="icon-spinner animated" data-bind="visible: submitRequest"></i>
<span class="i18n i18n-animation" data-i18n="LOGIN/BUTTON_SIGN_IN" data-bind="visible: !submitRequest()"></span>
</button>
</div>
<div class="controls clearfix" style="margin-bottom: 20px">
<div class="pull-right social-buttons">
<a href="#" tabindex="-1" class="social-button" data-bind="visible: facebookLoginEnabled, command: facebookCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_FACEBOOK'">
<i class="icon-facebook-alt"></i>
</a>
<a href="#" tabindex="-1" class="social-button" data-bind="visible: googleLoginEnabled, command: googleCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_GOOGLE'">
<i class="icon-google"></i>
</a>
<a href="#" tabindex="-1" class="social-button" data-bind="visible: twitterLoginEnabled, command: twitterCommand, tooltip: 'LOGIN/TITLE_SIGN_IN_TWITTER'">
<i class="icon-twitter"></i>
</a>
<a href="#" tabindex="-1" class="language-button" data-bind="visible: allowLanguagesOnLogin() && !socialLoginEnabled(), click: selectLanguage, tooltip: 'POPUPS_LANGUAGES/TITLE_LANGUAGES'">
<i data-bind="css: langRequest() ? 'icon-spinner animated' : 'icon-world'"></i>
</a>
</div>
<div class="signMeLabel" data-bind="visible: signMeVisibility, component: {
name: 'CheckboxSimple',
params: {
label: 'LOGIN/LABEL_SIGN_ME',
labelAnimated: true,
value: signMe
}
}"></div>
<div class="signMeLabel" data-bind="visible: signMeVisibility, component: {
name: 'CheckboxSimple',
params: {
label: 'LOGIN/LABEL_SIGN_ME',
labelAnimated: true,
value: signMe
}
}"></div>
</div>
<div class="controls clearfix" data-bind="visible: '' !== forgotPasswordLinkUrl || '' !== registrationLinkUrl">
<div class="forgot-link thm-forgot pull-left" data-bind="visible: '' !== forgotPasswordLinkUrl" style="text-align: center">
<a href="#" target="_blank" class="g-ui-link" data-bind="attr: {href: forgotPasswordLinkUrl}, css: {'pull-right': '' !== registrationLinkUrl}"
><span class="i18n" data-i18n="LOGIN/LABEL_FORGOT_PASSWORD"></span></a>
</div>
&nbsp;
<div class="registration-link thm-registration pull-right" data-bind="visible: '' !== registrationLinkUrl" style="text-align: center">
<a href="#" target="_blank" class="g-ui-link" data-bind="attr: {href: registrationLinkUrl}, css: {'pull-left': '' !== forgotPasswordLinkUrl}"
><span class="i18n" data-i18n="LOGIN/LABEL_REGISTRATION"></span></a>
<div class="controls clearfix" data-bind="visible: '' !== forgotPasswordLinkUrl || '' !== registrationLinkUrl">
<div class="forgot-link thm-forgot pull-left" data-bind="visible: '' !== forgotPasswordLinkUrl" style="text-align: center">
<a href="#" target="_blank" class="g-ui-link" data-bind="attr: {href: forgotPasswordLinkUrl}, css: {'pull-right': '' !== registrationLinkUrl}"
><span class="i18n" data-i18n="LOGIN/LABEL_FORGOT_PASSWORD"></span></a>
</div>
&nbsp;
<div class="registration-link thm-registration pull-right" data-bind="visible: '' !== registrationLinkUrl" style="text-align: center">
<a href="#" target="_blank" class="g-ui-link" data-bind="attr: {href: registrationLinkUrl}, css: {'pull-left': '' !== forgotPasswordLinkUrl}"
><span class="i18n" data-i18n="LOGIN/LABEL_REGISTRATION"></span></a>
</div>
</div>
</div>
</form>
</form>
</div>
<div class="e-powered thm-powered" data-bind="visible: logoPowered">
Powered by <a href="http://rainloop.net" target="_blank">RainLoop</a>
</div>