IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-15 10:03:33 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: Update ui of login buttons via third parties and add link to sign up page (#9879)

Browse Source
This commit is contained in:
Johannes Schill 2017-12-12 15:00:04 +01:00
parent 097596a336
commit 01e9053625
4 changed files with 83 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/partials/login.html
View File

@ -1,7 +1,7 @@
<div class="login container">
<div class="login-content">
<div class="login-branding">
<img class="logo-icon" src="public/img/grafana_icon.svg"></img>
<img class="logo-icon" src="public/img/grafana_icon.svg" alt="Grafana" />
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div>
<div class="login-inner-box">
@ -42,16 +42,20 @@
</div>
<div class="clearfix"></div>
<div class="login-oauth text-center" ng-show="oauthEnabled">
<a class="btn btn-medium btn-google login-btn" href="login/google" target="_self" ng-if="oauth.google">
<a class="btn btn-medium btn-service btn-service--google login-btn" href="login/google" target="_self" ng-if="oauth.google">
<i class="btn-service-icon fa fa-google"></i>
Sign in with Google
</a>
<a class="btn btn-medium btn-github login-btn" href="login/github" target="_self" ng-if="oauth.github">
<a class="btn btn-medium btn-service btn-service--github login-btn" href="login/github" target="_self" ng-if="oauth.github">
<i class="btn-service-icon fa fa-github"></i>
Sign in with GitHub
</a>
<a class="btn btn-medium btn-grafana-com login-btn" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
<a class="btn btn-medium btn-inverse btn-service btn-service--grafanacom login-btn" href="login/grafana_com" target="_self" ng-if="oauth.grafana_com">
<i class="btn-service-icon"></i>
Sign in with Grafana.com
</a>
<a class="btn btn-medium btn-generic-oauth login-btn" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
<a class="btn btn-medium btn-inverse btn-service btn-service--oauth login-btn" href="login/generic_oauth" target="_self" ng-if="oauth.generic_oauth">
<i class="btn-service-icon fa fa-sign-in"></i>
Sign in with {{oauth.generic_oauth.name}}
</a>
</div>
@ -59,7 +63,7 @@
<div class="login-signup-title p-r-1">
New to Grafana?
</div>
<a class="btn btn-medium btn-signup btn-p-x-2">
<a href="/signup" class="btn btn-medium btn-signup btn-p-x-2">
Sign Up
</a>
</div>

22
public/sass/_variables.scss
View File

@ -237,3 +237,25 @@ $panel-padding: 0px 10px 5px 10px;
// tabs
$tabs-padding: 10px 15px 9px;
$external-services: (
github: (
bgColor: #464646,
borderColor: #393939,
icon: ''
),
google: (
bgColor: #e84d3c,
borderColor: #b83e31,
icon: ''
),
grafanacom: (
bgColor: inherit,
borderColor: #393939,
icon: ''
),
oauth: (
bgColor: inherit,
borderColor: #393939,
icon: ''
)
) !default;

50
public/sass/components/_buttons.scss
View File

@ -143,7 +143,57 @@
}
}
// Extra padding
.btn-p-x-2 {
padding-left: 20px;
padding-right: 20px;
}
// External services
// Usage:
// <div class="btn btn-service btn-service--facebook">Button text</div>
$btn-service-icon-width: 35px;
.btn-service {
position: relative;
}
@each $service, $data in $external-services {
$serviceBgColor: map-get($data, bgColor);
$serviceBorderColor: map-get($data, borderColor);
.btn-service--#{$service} {
background-color: $serviceBgColor;
border: 1px solid $serviceBorderColor;
.btn-service-icon {
font-size: 24px; // Override
border-right: 1px solid $serviceBorderColor;
}
}
}
.btn-service-icon {
position: absolute;
left: 0;
height: 100%;
top: 0;
padding-left: .5rem;
padding-right: .5rem;
width: $btn-service-icon-width;
text-align: center;
&::before {
position: relative;
top: 4px;
}
}
.btn-service--grafanacom {
.btn-service-icon {
background-image: url(/public/img/grafana_mask_icon_white.svg);
background-repeat: no-repeat;
background-position: 50%;
background-size: 60%;
}
}

25
public/sass/pages/_login.scss
View File

@ -105,6 +105,7 @@ select:-webkit-autofill:focus {
align-items: center;
justify-content: center;
flex-grow: 1;
max-width: 415px;
}
.login-tab-header {
@ -173,30 +174,6 @@ select:-webkit-autofill:focus {
.login-oauth {
width: 100%;
.btn {
margin: 0 0 1rem;
}
.btn-google {
background: #dd4b39;
color: white;
}
.btn-github {
background: #555;
color: white;
}
.btn-grafana-com {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
box-shadow: $card-shadow;
img {
width: 19px;
vertical-align: sub;
}
}
}
.password-recovery {