moparisthebest
/
mail
mirror of https://github.com/moparisthebest/mail
1
0
Fork 0
Code Issues Releases Wiki Activity

style login elements and text input with nicos redesign

This commit is contained in:
Tankred Hase 2013-12-06 16:02:19 +01:00
parent 7032a4f8c6
commit 65075792c3
12 changed files with 84 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/sass/_variables.scss
View File

@ -18,6 +18,7 @@ $color-blue: #00c6ff;
$color-black: #000;
$color-white: #fff;
$color-grey: #666;
$color-grey-input: #949494;
$color-grey-dark: #333;
$color-grey-medium: #aaa;
$color-grey-light: #ccc;

1
src/sass/all.scss
View File

@ -18,6 +18,7 @@
@import "components/mail-list";
@import "components/layout";
@import "components/popover";
@import "components/input";
// Views
@import "views/shared";

11
src/sass/components/_buttons.scss
View File

@ -17,11 +17,9 @@
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
background-color: $btn-back-color;
color: $btn-color;
box-shadow: 1px 1px 0px $btn-shadow-color;
transition: background-color 0.3s;
text-decoration: none;
font-weight: normal;
-webkit-font-smoothing: auto;
&:hover,
&:focus {
@ -59,6 +57,15 @@
}
}
.btn-alt {
background-color: $color-grey-input;
&:hover,
&:focus {
background-color: lighten($color-grey-input, 10%);
}
}
// Icon Buttons
// -------------------------------------------

10
src/sass/components/_input.scss Normal file
View File

@ -0,0 +1,10 @@
.input-text {
background-color: white;
border-width: 1px;
border-style: solid;
border-color: $color-grey-lighter;
color: $color-grey;
font-size: $font-size-base;
padding: 8px 10px;
outline: none;
}

1
src/sass/components/_popover.scss
View File

@ -125,7 +125,6 @@
.popover-info {
color: $color-blue;
margin-left: 5px;
&:hover {
cursor: pointer;

63
src/sass/views/_login.scss
View File

@ -6,40 +6,64 @@
color: $color-grey-dark;
.logo-wrapper {
width: 320px;
max-width: 700px;
height: 58px;
margin: 125px auto 80px;
}
margin: 145px auto 75px auto;
.logo {
background-image:url('../img/whiteout_logo.svg');
background-repeat: no-repeat;
background-size: 320px 58px;
width: 320px;
height: 58px;
.logo {
background-image:url('../img/whiteout_logo.svg');
background-repeat: no-repeat;
background-size: 320px 58px;
width: 320px;
height: 58px;
}
}
.content {
max-width: 500px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
p {
line-height: 150%
line-height: 150%;
b {
color: $color-blue;
}
}
div {
margin: 25px 0;
margin: 20px 0;
}
input {
margin-right: 5px;
border-radius: 5px;
margin-right: 10px;
}
input[type=file] {
background-color: white;
border-width: 1px;
border-style: solid;
border-color: $color-grey-light;
padding: 5px;
border-color: $color-grey-lighter;
color: $color-grey-input;
font-size: 1em;
padding: 4px 4px;
outline: none;
&::-webkit-file-upload-button {
background-color: $color-grey-input;
border-width: 0px;
border-style: solid;
color: white;
padding: 4px 10px;
font-family: inherit;
font-size: inherit;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
outline: none;
cursor: pointer;
}
}
.error {
@ -49,7 +73,10 @@
}
.view-login-existing {
.content {
max-width: 400px;
}
.view-login-initial {
button {
margin-right: 10px;
}
}

7
src/sass/views/_mail-list.scss
View File

@ -29,10 +29,13 @@
}
.search {
width: 100%;
padding: 0 $padding-horizontal $padding-vertical $padding-horizontal;
margin: 0 auto;
width: 100%;
input {
width: 100%;
width: 93%;
-webkit-appearance: searchfield;
}
}

6
src/tpl/login-existing.html
View File

@ -4,13 +4,11 @@
</div><!--/logo-->
<div class="content">
<h1>Unlock mailbox</h1>
<p>Please enter your passphrase to unlock the mailbox.</p>
<p><b>Unlock mailbox.</b> Please enter your passphrase to unlock the mailbox.</p>
<form>
<div>
<input type="password" ng-model="passphrase" ng-change="change()" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="1" focus-me="true">
<input class="input-text" type="password" ng-model="passphrase" ng-change="change()" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="1" focus-me="true">
<span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
</div>
<div>

17
src/tpl/login-initial.html
View File

@ -1,4 +1,4 @@
<div class="view-login" ng-class="{'waiting-cursor': state.ui === 2}">
<div class="view-login view-login-initial" ng-class="{'waiting-cursor': state.ui === 2}">
<div class="logo-wrapper">
<div class="logo"></div>
</div><!--/logo-->
@ -6,12 +6,11 @@
<div class="content" ng-switch on="state.ui">
<div ng-switch-when="1">
<h1>Set passphrase</h1>
<p>The passphrase protects your keypair. If you forget your passphrase you will not be able to recover your messages.</p>
<p><b>Set passphrase.</b> The passphrase protects your keypair. If you forget your passphrase you will not be able to recover your messages.</p>
<form>
<div>
<input type="password" ng-model="state.passphrase" placeholder="Enter passphrase" tabindex="1" focus-me="true">
<input type="password" ng-model="state.confirmation" ng-class="{error: state.confirmation !== state.passphrase}" placeholder="Confirm passphrase" tabindex="2">
<input class="input-text" type="password" ng-model="state.passphrase" placeholder="Enter passphrase" tabindex="1" focus-me="true">
<input class="input-text" type="password" ng-model="state.confirmation" ng-class="{error: state.confirmation !== state.passphrase}" placeholder="Confirm passphrase" tabindex="2">
<span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
</div>
<div>
@ -21,15 +20,13 @@
</div>
<div ng-switch-when="2">
<h1>Generating keypair</h1>
<p>Please stand by. This can take a while...</p>
<p><b>Generating keypair.</b> Please stand by. This can take a while...</p>
</div>
<div ng-switch-when="4">
<h1>Keypair generated</h1>
<p>Your personal keypair has been generated. You can export it (e.g. to a USB flash drive) to setup Whiteout Mail on another computer or as a backup.</p>
<p><b>Keypair generated.</b> Your personal keypair has been generated. You can export it (e.g. to a USB flash drive) to setup Whiteout Mail on another computer or as a backup.</p>
<button ng-click="exportKeypair()" class="btn" tabindex="4">Export now</button>
<button ng-click="proceed()" class="btn" tabindex="5">Do it later</button>
<button ng-click="proceed()" class="btn btn-alt" tabindex="5">Do it later</button>
</div>
</div><!--/content-->

6
src/tpl/login-new-device.html
View File

@ -4,9 +4,7 @@
</div><!--/logo-->
<div class="content">
<h1>Import keyfile</h1>
<p>You are already registered on another device. To access your emails on this device, please import your key file.</p>
<p><b>Import keyfile.</b> You are already registered on another device. To access your emails on this device, please import your key file.</p>
<form>
<div>
@ -14,7 +12,7 @@
<span class="popover-info" data-icon-append="&#xe010;" popover="#keyfile-info"></span>
</div>
<div>
<input type="password" ng-model="passphrase" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="2" focus-me="true">
<input class="input-text" type="password" ng-model="passphrase" ng-class="{error:incorrect}" placeholder="Passphrase" tabindex="2" focus-me="true">
<span class="popover-info" data-icon-append="&#xe010;" popover="#passphrase-info"></span>
</div>
<div><button type="submit" ng-click="confirmPassphrase()" class="btn" ng-disabled="!key" tabindex="3">Import</button>

3
src/tpl/login.html
View File

@ -5,8 +5,7 @@
</div><!--/logo-->
<div class="content">
<h1>Login</h1>
<p>Authenticating with the mail server...</p>
<p><b>Login.</b> Authenticating with the mail server...</p>
</div><!--/content-->
</div>

2
src/tpl/mail-list.html
View File

@ -5,7 +5,7 @@
</header>
<div class="search">
<input ng-model="searchText" placeholder="Find">
<input class="input-text" type="search" results="5" ng-model="searchText" placeholder=" Filter...">
</div>
<div class="list-wrapper" ng-iscroll="state.nav.currentFolder.messages.length">