IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Polish and incorporating new design for login screen from matt

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-01-22 10:14:24 +01:00
parent 1d8bb45d3a
commit 1a11b400b0
8 changed files with 126 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/controllers/loginCtrl.js
View File

@ -16,7 +16,7 @@ function (angular, config) {
$scope.newUser = {};
$scope.grafana.sidemenu = false;
$scope.mode = 'login';
$scope.loginMode = true;
// build info view model
$scope.buildInfo = {
@ -26,13 +26,29 @@ function (angular, config) {
};
$scope.submit = function() {
if ($scope.mode === 'login') {
if ($scope.loginMode) {
$scope.login();
} else {
$scope.signUp();
}
};
$scope.getSubmitBtnClass = function() {
if ($scope.loginForm.$valid) {
return "btn-primary";
} else {
return "btn-inverse";
}
};
$scope.getSubmitBtnText = function() {
if ($scope.loginMode) {
return "Log in";
} else {
return "Sign up";
}
};
$scope.init = function() {
if ($routeParams.logout) {
$scope.logout();
@ -40,11 +56,6 @@ function (angular, config) {
};
$scope.signUp = function() {
if ($scope.mode === 'login') {
$scope.mode = 'signup';
return;
}
if (!$scope.loginForm.$valid) {
return;
}
@ -63,10 +74,6 @@ function (angular, config) {
};
$scope.login = function() {
if ($scope.mode === 'signup') {
$scope.mode = 'login';
return;
}
delete $scope.loginError;
if (!$scope.loginForm.$valid) {

55
src/app/partials/login.html
View File

@ -7,14 +7,20 @@
</div>
<div class="login-inner-box">
<h1 ng-if="mode === 'login'">Login</h1>
<h1 ng-if="mode === 'signup'">Sign up</h1>
<div class="login-tab-header">
<button class="btn-login-tab" ng-click="loginMode = true;" ng-class="{active: loginMode}">
Log in
</button>
<button class="btn-login-tab" ng-click="loginMode = false;" ng-class="{active: !loginMode}">
Sign up
</button>
</div>
<form name="loginForm" class="login-form">
<div class="tight-form" ng-if="mode === 'login'">
<div class="tight-form" ng-if="loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
User
<strong>User</strong>
</li>
<li>
<input type="text" class="tight-form-input last" ng-model='loginModel.user' placeholder="email or username" style="width: 246px">
@ -22,10 +28,10 @@
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="mode === 'login'">
<div class="tight-form" ng-if="loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Password
<strong>Password</strong>
</li>
<li>
<input type="password" class="tight-form-input last" required ng-model="loginModel.password" id="inputPassword" style="width: 246px" placeholder="password">
@ -34,10 +40,10 @@
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="mode === 'signup'">
<div class="tight-form" ng-if="!loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Email
<strong>Email</strong>
</li>
<li>
<input type="email" class="tight-form-input last" required ng-model='newUser.email' placeholder="email" style="width: 246px">
@ -46,43 +52,24 @@
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="mode === 'signup'">
<div class="tight-form" ng-if="!loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Name
<strong>Password</strong>
</li>
<li>
<input type="text" class="tight-form-input last" ng-model='newUser.name' placeholder="your full name (optional)" style="width: 246px">
<input type="password" class="tight-form-input last" required ng-model='newUser.password' placeholder="password" style="width: 246px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="mode === 'signup'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Password
</li>
<li>
<input type="password" class="tight-form-input last" required ng-model='newUser.password' placeholder="" style="width: 246px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item login-signup-button" ng-class="{'login-signup-button-disable': mode === 'signup'}">
<a ng-click="login()">Log in</a>
</li>
<li class="tight-form-item login-signup-button last" ng-class="{'login-signup-button-disable': mode === 'login'}">
<a ng-click="signUp()">Sign up</a>
</li>
</ul>
<div class="clearfix"></div>
<div class="login-submit-button-row">
<button type="submit" class="btn" ng-class="getSubmitBtnClass()" ng-click="submit();">
{{getSubmitBtnText()}}
</button>
</div>
<button type="submit" ng-click="submit();" class="hidden"></button>
</form>
<div class="clearfix"></div>

2
src/app/partials/sidemenu.html
View File

@ -8,7 +8,7 @@
<span class="gravatar-email small">{{grafana.user.login}}</span>
</a>
<ul class="dropdown-menu">
<li><a href="/login?logout">Logout</a></li>
<li><a href="{{appSubUrl}}/login?logout">Logout</a></li>
</ul>
</li>
<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">

2
src/css/less/bootswatch.dark.less
View File

@ -363,7 +363,7 @@ div.subnav {
background-image: none;
.box-shadow(none);
border: none;
.border-radius(2px);
.border-radius(3px);
text-shadow: none;
&.disabled {

2
src/css/less/bootswatch.light.less
View File

@ -309,7 +309,7 @@ div.subnav {
background-image: none;
.box-shadow(none);
border: none;
.border-radius(0);
.border-radius(3px);
text-shadow: none;
&.disabled {

1
src/css/less/overrides.less
View File

@ -58,7 +58,6 @@
.bgInverse {
background: @btnInverseBackground;
color: rgba(255,255,255,.90);
}
code, pre {

124
src/css/less/p_pro.less
View File

@ -2,6 +2,33 @@
display: none;
}
.pro-sidemenu-open {
.pro-sidemenu {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 2px solid black;
min-height: 100%;
z-index: 101;
}
.dashboard-notice {
margin-left: 200px;
width: auto;
}
.pro-main-view {
padding-left: 200px;
}
.panel-fullscreen {
left: 200px;
}
}
.sidemenu {
list-style: none;
background: @grafanaPanelBackground;
@ -58,54 +85,66 @@
border-bottom: 1px solid black;
}
.pro-sidemenu-open {
.pro-sidemenu {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 2px solid black;
min-height: 100%;
z-index: 101;
.login-form {
width: 50%;
float: left;
margin-left: 25%;
margin-right: 25%;
padding-top: 50px;
}
.dashboard-notice {
margin-left: 200px;
width: auto;
.login-box {
width: 700px;
margin: 100px auto 0 auto;
}
.pro-main-view {
padding-left: 200px;
.login-box-logo {
text-align: center;
padding-bottom: 50px;
}
.panel-fullscreen {
left: 200px;
}
}
.login-inner-box {
background: @grafanaPanelBackground;
h1 {
font-size: 1.15em;
}
.login-tab-header {
background: @grafanaTargetBackground;
text-align: center;
padding: 2px;
}
}
.login-signup-button {
width: 45%;
text-align: center;
.btn-login-tab {
background: transparent;
border: none;
font-size: 15px;
padding: 10px 10px;
&.active {
background: darken(@grafanaTargetBackground, 5%);
color: @white;
}
&:focus {
outline: none;
}
a {
font-weight: bold;
display: inline-block;
width: 170px;
color: @textColor;
}
&.login-signup-button-disable {
a {
color: darken(@linkColor, 35%);
}
.login-submit-button-row {
text-align: center;
margin-top: 40px;
button {
padding: 9px 7px;
font-size: 14px;
font-weight: bold;
width: 150px;
display: inline-block;
border: 1px solid lighten(@btnInverseBackground, 10%);
}
}
@ -123,25 +162,4 @@
}
}
.login-form {
width: 50%;
float: left;
margin-left: 25%;
margin-right: 25%;
padding-top: 30px;
}
.login-box {
width: 700px;
margin: 100px auto 0 auto;
}
.login-box-logo {
text-align: center;
padding-bottom: 50px;
}
.register-box {
margin-top: 100px;
}

12
src/css/less/variables.dark.less
View File

@ -17,7 +17,7 @@
// Accent colors
// -------------------------
@blue: #33B5E5;
@blueDark: #0099CC;
@blueDark: #0086b3;
@green: #669900;
@red: #CC3900;
@yellow: #ECBB13;
@ -111,12 +111,12 @@
// Buttons
// -------------------------
@btnBackground: @grayLight;
@btnBackground: @grayDark;
@btnBackgroundHighlight: darken(@grayLight, 15%);
@btnBorder: #bbb;
@btnPrimaryBackground: lighten(@blue, 5%);
@btnPrimaryBackgroundHighlight: darken(@blue, 5%);
@btnPrimaryBackground: lighten(@blueDark, 5%);
@btnPrimaryBackgroundHighlight: darken(@blueDark, 5%);
@btnInfoBackground: lighten(@purple, 5%);
@btnInfoBackgroundHighlight: darken(@purple, 5%);
@ -130,8 +130,8 @@
@btnDangerBackground: lighten(@red, 5%);
@btnDangerBackgroundHighlight: darken(@red, 5%);
@btnInverseBackground: lighten(@black, 5%);
@btnInverseBackgroundHighlight: darken(@black, 5%);
@btnInverseBackground: @grayDark;
@btnInverseBackgroundHighlight: lighten(@grayDark, 5%);
// Forms