Skip to content

N
nexpie-grafana-theme
Commit cae975cb by Torkel Ödegaard
Options

ux(): fixed login, signup, signup step2 and invite views

parent 2f232600
Showing with 161 additions and 187 deletions
public/app/features/org/partials/orgUsers.html
...@@ -77,6 +77,7 @@ ...@@ -77,6 +77,7 @@
</table> </table>
</tab> </tab>
</tabset> </tabset>
</div> </div>
</div> </div>
public/app/partials/login.html
...@@ -17,47 +17,23 @@ ...@@ -17,47 +17,23 @@
</button> </button>
</div> </div>
<form name="loginForm" class="login-form" style="margin-top: 25px;"> <form name="loginForm" class="login-form gf-form-group">
<div class="tight-form-container"> <div class="gf-form" ng-if="loginMode">
<div class="tight-form" ng-if="loginMode"> <span class="gf-form-label gf-size-sm">User</span>
<ul class="tight-form-list"> <input type="text" name="username" class="gf-form-input gf-size-max-xl" required ng-model='formModel.user' placeholder={{loginHint}}>
<li class="tight-form-item" style="width: 78px"> </div>
<strong>User</strong> <div class="gf-form" ng-if="loginMode">
</li> <span class="gf-form-label gf-size-sm">Password</span>
<li> <input type="password" name="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.user' placeholder={{loginHint}} style="width: 253px"> </div>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 78px">
<strong>Password</strong>
</li>
<li>
<input type="password" name="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="!loginMode">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 79px">
<strong>Email</strong>
</li>
<li>
<input type="email" class="tight-form-input last" required ng-model='formModel.email' placeholder="email" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-form" ng-if="!loginMode">
<span class="gf-form-label gf-size-sm">Email</span>
<input type="email" class="gf-form-input gf-size-max-xl" required ng-model='formModel.email' placeholder="email">
</div> </div>
<div class="login-submit-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}"> <button type="submit" class="btn btn-large" ng-click="submit();" ng-class="{'btn-inverse': !loginForm.$valid, 'btn-primary': loginForm.$valid}">
{{submitBtnText}} {{submitBtnText}}
</button> </button>
</div> </div>
...@@ -65,9 +41,9 @@ ...@@ -65,9 +41,9 @@
<div class="text-center login-divider" ng-if="oauthEnabled"> <div class="text-center login-divider" ng-if="oauthEnabled">
<div class="login-divider-line"> <div class="login-divider-line">
<span class="login-divider-text"> <span class="login-divider-text">
Or login with Or login with
</span> </span>
</div> </div>
</div> </div>
...@@ -95,15 +71,14 @@ ...@@ -95,15 +71,14 @@
</div> </div>
</div> </div>
<div class="row" style="margin-top: 50px"> <div class="row" style="margin-top: 50px">
<div class="version-footer text-center small"> <div class="version-footer text-center small">
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}}, Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }} build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
</div> </div>
</div> </div>
</div> </div>
</div>
public/app/partials/signup_invited.html
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
<div class="login-box"> <div class="login-box">
<div class="login-box-logo"> <div class="login-box-logo">
<img src="img/logo_transparent_200x75.png"> <img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div> </div>
<div class="invite-box"> <div class="invite-box">
...@@ -14,82 +15,40 @@ ...@@ -14,82 +15,40 @@
Hello {{greeting}}. Hello {{greeting}}.
</h3> </h3>
<div class="modal-tagline"> <div class="modal-tagline p-b-2">
<em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue: <em>{{invitedBy}}</em> has invited you to join Grafana and the organization <span class="highlight-word">{{contextSrv.user.orgName}}</span></br>Please complete the following to accept your invitation and continue:
</div> </div>
<form name="inviteForm" class="login-form"> <form name="inviteForm" class="login-form gf-form-group">
<div class="tight-form-container"> <div class="gf-form">
<div class="tight-form"> <span class="gf-form-label gf-size-sm">Email</span>
<ul class="tight-form-list"> <input type="email" name="email" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.email' placeholder="Email">
<li class="tight-form-item" style="width: 128px"> </div>
Email <div class="gf-form">
</li> <span class="gf-form-label gf-size-sm">Name</span>
<li> <input type="text" name="name" class="gf-form-input gf-size-max-xxl" ng-model='formModel.name' placeholder="Name (optional)">
<input type="email" name="email" class="tight-form-input last" required ng-model='formModel.email' placeholder="Email" style="width: 253px"> </div>
</li> <div class="gf-form">
</ul> <span class="gf-form-label gf-size-sm">Username</span>
<div class="clearfix"></div> <input type="text" name="username" class="gf-form-input gf-size-max-xxl" required ng-model='formModel.username' placeholder="Username">
</div> </div>
<div class="tight-form"> <div class="gf-form">
<ul class="tight-form-list"> <span class="gf-form-label gf-size-sm">Password</span>
<li class="tight-form-item" style="width: 128px"> <input type="password" name="password" class="gf-form-input gf-size-max-xxl" required ng-model="formModel.password" id="inputPassword" placeholder="password">
Name
</li>
<li>
<input type="text" name="name" class="tight-form-input last" ng-model='formModel.name' placeholder="Name (optional)" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Username
</li>
<li>
<input type="text" name="username" class="tight-form-input last" required ng-model='formModel.username' placeholder="Username" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Password
</li>
<li>
<input type="password" name="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password">
</li>
</ul>
<div class="clearfix"></div>
</div>
</div> </div>
<div style="margin-left: 147px; width: 254px;"> <div style="margin-left: 7.5rem; width: 254px;">
<password-strength password="formModel.password"></password-strength> <password-strength password="formModel.password"></password-strength>
</div> </div>
<div class="login-submit-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn" ng-click="submit();" ng-class="{'btn-inverse': !inviteForm.$valid, 'btn-primary': inviteForm.$valid}"> <button type="submit" class="btn btn-inverse" ng-click="submit();" ng-class="{'btn-inverse': !inviteForm.$valid, 'btn-primary': inviteForm.$valid}">
Continue Continue
</button> </button>
</div> </div>
</form> </form>
<div class="clearfix"></div>
</div> </div>
<div class="row" style="margin-top: 50px">
<div class="version-footer text-center small">
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
</div>
</div>
</div> </div>
</div>
public/app/partials/signup_step2.html
...@@ -6,7 +6,8 @@ ...@@ -6,7 +6,8 @@
<div class="login-box"> <div class="login-box">
<div class="login-box-logo"> <div class="login-box-logo">
<img src="public/img/logo_transparent_200x75.png"> <img class="logo-icon" src="public/img/grafana_icon.svg"></img><br>
<i class="icon-gf icon-gf-grafana_wordmark"></i>
</div> </div>
<div class="invite-box"> <div class="invite-box">
...@@ -24,90 +25,50 @@ ...@@ -24,90 +25,50 @@
<span class="large">{{formModel.email}}</span> <span class="large">{{formModel.email}}</span>
</div> </div>
</div> </div>
<br>
<br> <br>
<form name="signUpForm" class="login-form"> <form name="signUpForm" class="login-form gf-form-group">
<div style="display: inline-block; margin-bottom: 25px; width: 300px" ng-if="verifyEmailEnabled"> <div class="gf-form" ng-if="verifyEmailEnabled">
<div class="editor-option"> <span class="gf-form-label gf-size-md">
<label class="small">Email verification code: (sent to your email)</label> Email code<tip>Email verification code (sent to your email)</tip>
<input type="text" class="input input-xlarge text-center" ng-model="formModel.code" required></input> </span>
</div> <input type="text" class="gf-form-input gf-size-max-xl" ng-model="formModel.code" required></input>
</div> </div>
<div class="tight-form-container"> <div class="gf-form" ng-if="!autoAssignOrg">
<div class="tight-form" ng-if="!autoAssignOrg"> <span class="gf-form-label gf-size-md">Org. name</span>
<ul class="tight-form-list"> <input type="text" name="orgName" class="gf-form-input gf-size-max-xl" ng-model='formModel.orgName' placeholder="Name your organization">
<li class="tight-form-item" style="width: 128px"> </div>
Organization name
</li>
<li>
<input type="text" name="orgName" class="tight-form-input last" ng-model='formModel.orgName' placeholder="Name your organization" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Your name
</li>
<li>
<input type="text" name="name" class="tight-form-input last" ng-model='formModel.name' placeholder="(optional)" style="width: 253px">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 128px">
Username
</li>
<li>
<input type="text" class="tight-form-input last" required ng-model='formModel.username' placeholder="Username" style="width: 253px" autocomplete="off">
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form"> <div class="gf-form">
<ul class="tight-form-list"> <span class="gf-form-label gf-size-md">Your name</span>
<li class="tight-form-item" style="width: 128px"> <input type="text" name="name" class="gf-form-input gf-size-max-xl" ng-model='formModel.name' placeholder="(optional)">
Password </div>
</li> <div class="gf-form">
<li> <span class="gf-form-label gf-size-md">Username</span>
<input type="password" class="tight-form-input last" required ng-model="formModel.password" id="inputPassword" style="width: 253px" placeholder="password" autocomplete="off"> <input type="text" class="gf-form-input gf-size-max-xl" required ng-model='formModel.username' placeholder="Username" autocomplete="off">
</li> </div>
</ul> <div class="gf-form">
<div class="clearfix"></div> <span class="gf-form-label gf-size-md">Password</span>
</div> <input type="password" class="gf-form-input gf-size-max-xl" required ng-model="formModel.password" id="inputPassword" placeholder="password" autocomplete="off">
</div> </div>
<div style="margin-left: 147px; width: 254px;"> <div style="margin-left: 7.5rem; width: 254px;">
<password-strength password="formModel.password"></password-strength> <password-strength password="formModel.password"></password-strength>
</div> </div>
<div class="login-submit-button-row"> <div class="gf-form-button-row">
<button type="submit" class="btn" ng-click="ctrl.submit();" ng-class="{'btn-inverse': !signUpForm.$valid, 'btn-primary': signUpForm.$valid}"> <button type="submit" class="btn" ng-click="ctrl.submit();" ng-class="{'btn-inverse': !signUpForm.$valid, 'btn-primary': signUpForm.$valid}">
Continue Continue
</button> </button>
</div> </div>
</form> </form>
<div class="clearfix"></div>
</div> </div>
<div class="row" style="margin-top: 50px">
<div class="version-footer text-center small">
Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}},
build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
</div>
</div>
</div> </div>
</div> </div>
public/sass/_variables.dark.scss
...@@ -141,7 +141,6 @@ $input-bg-disabled: #555; ...@@ -141,7 +141,6 @@ $input-bg-disabled: #555;
$input-color: $gray-light; $input-color: $gray-light;
$input-border-color: lighten($gray-dark,5%); $input-border-color: lighten($gray-dark,5%);
$input-btn-border-width: 1px;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: $input-border-color !default; $input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
......
public/sass/_variables.light.scss
...@@ -158,12 +158,11 @@ $input-bg-disabled: $gray-lighter; ...@@ -158,12 +158,11 @@ $input-bg-disabled: $gray-lighter;
$input-color: #020202; $input-color: #020202;
$input-border-color: $gray-lighter; $input-border-color: $gray-lighter;
$input-btn-border-width: 1px;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: #66afe9 !default; $input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default; $input-color-placeholder: #999 !default;
$input-label-bg: #f8f8f8; $input-label-bg: #f8f8f8;
// Sidemenu // Sidemenu
// ------------------------- // -------------------------
......
public/sass/_variables.scss
...@@ -169,6 +169,7 @@ $input-padding-x: .75rem !default; ...@@ -169,6 +169,7 @@ $input-padding-x: .75rem !default;
$input-padding-y: .6rem !default; $input-padding-y: .6rem !default;
$input-line-height: 1.35rem !default; $input-line-height: 1.35rem !default;
$input-btn-border-width: 1px;
$input-border-radius: $border-radius !default; $input-border-radius: $border-radius !default;
$input-border-radius-lg: $border-radius-lg !default; $input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default; $input-border-radius-sm: $border-radius-sm !default;
......
public/sass/components/_buttons.scss
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
cursor: pointer; cursor: pointer;
border: none; border: $input-btn-border-width solid transparent;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius);
...@@ -92,6 +92,25 @@ ...@@ -92,6 +92,25 @@
border: 1px solid $tight-form-func-highlight-bg; border: 1px solid $tight-form-func-highlight-bg;
} }
.btn-outline-primary {
@include button-outline-variant($btnPrimaryBackground);
}
.btn-outline-secondary {
@include button-outline-variant($btnInverseBackground);
}
.btn-outline-info {
@include button-outline-variant($btnInfoBackground);
}
.btn-outline-success {
@include button-outline-variant($btnSuccessBackground);
}
.btn-outline-warning {
@include button-outline-variant($btnWarningBackground);
}
.btn-outline-danger {
@include button-outline-variant($btnDangerBackground);
}
.btn-text { .btn-text {
color: $btnText; color: $btnText;
margin: 0; margin: 0;
......
public/sass/components/_gf-form.scss
...@@ -6,6 +6,7 @@ $gf-form-margin: 0.4rem; ...@@ -6,6 +6,7 @@ $gf-form-margin: 0.4rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
text-align: left;
.checkbox-label { .checkbox-label {
display: inline; display: inline;
......
public/sass/mixins/_buttons.scss
...@@ -22,3 +22,50 @@ ...@@ -22,3 +22,50 @@
font-size: $font-size; font-size: $font-size;
@include border-radius($border-radius); @include border-radius($border-radius);
} }
@mixin button-outline-variant($color) {
color: $color;
background-image: none;
background-color: transparent;
border-color: $color;
@include hover {
color: #fff;
background-color: $color;
border-color: $color;
}
&:focus,
&.focus {
color: #fff;
background-color: $color;
border-color: $color;
}
&:active,
&.active,
.open > &.dropdown-toggle {
color: #fff;
background-color: $color;
border-color: $color;
&:hover,
&:focus,
&.focus {
color: #fff;
background-color: darken($color, 17%);
border-color: darken($color, 25%);
}
}
&.disabled,
&:disabled {
&:focus,
&.focus {
border-color: lighten($color, 20%);
}
@include hover {
border-color: lighten($color, 20%);
}
}
}
public/sass/pages/_login.scss
.login-form { .login-form {
width: 50%; display: inline-block;
float: left; max-width: 24rem;
margin-left: 25%;
margin-right: 25%;
padding-top: 25px;
} }
.login-box { .login-box {
width: 700px; max-width: 700px;
margin: 70px auto 0 auto; margin: $spacer * 2 auto 0 auto;
} }
.login-box-logo { .login-box-logo {
text-align: center; text-align: center;
img { img {
width: 125px; width: 6rem;
} }
.icon-gf-grafana_wordmark { .icon-gf-grafana_wordmark {
color: $link-color; color: $link-color;
position: relative; position: relative;
top: -90px; top: -4.5rem;
font-size: 3rem; font-size: 2.5rem;
text-shadow: 3px 3px 5px black; text-shadow: 3px 3px 5px black;
} }
} }
.login-inner-box { .login-inner-box {
background: $panel-bg; background: $panel-bg;
text-align: center;
} }
.login-tab-header { .login-tab-header {
background: $tight-form-bg; background: $tight-form-bg;
text-align: center; text-align: center;
margin-bottom: 3rem;
} }
.btn-login-tab { .btn-login-tab {
...@@ -145,7 +144,7 @@ ...@@ -145,7 +144,7 @@
text-align: center; text-align: center;
border: 1px solid $tight-form-func-bg; border: 1px solid $tight-form-func-bg;
background-color: $panel-bg; background-color: $panel-bg;
width: 800px; max-width: 800px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
...@@ -167,3 +166,16 @@ ...@@ -167,3 +166,16 @@
font-size: 16px; font-size: 16px;
} }
} }
@include media-breakpoint-up(md) {
.login-box-logo {
img {
width: 125px;
}
.icon-gf-grafana_wordmark {
top: -90px;
font-size: 3rem;
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment