add icon on forms

This commit is contained in:
bechi 2014-11-27 18:33:07 -03:00
parent af21fb017c
commit bb7293aff3
4 changed files with 75 additions and 59 deletions

View File

@ -1181,13 +1181,22 @@ button.gray:focus,
width: 38px;
height: 28px;
right: 7px;
top: 28px;
top: 7px;
-moz-box-shadow: none;
box-shadow: none;
line-height: 1.7rem;
border-radius: 2px;
}
.postfix.button i, .prefix.button i {
left: 12px;
top: 0;
border: none;
-moz-box-shadow: none;
box-shadow: none;
color: #fff;
}
label.postfix, span.postfix {
height: 40px;
border: none;
@ -1292,6 +1301,8 @@ a:hover .photo-container {
float: left;
}
.input { position: relative;}
.input i {
position: absolute;
top: 25%;

View File

@ -28,31 +28,29 @@
</span>
</div>
<form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
<div class="row collapse">
<div class="row">
<label class="left" for="insightLivenet">Email</label>
<span translate class="has-error right size-12" ng-show="profileForm.email.$invalid &&
!profileForm.email.$pristine || error">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</span>
<span class="icon-input right" ng-show="!profileForm.email.$invalid &&
!profileForm.email.$pristine || error"><i class="fi-check"></i></span>
</div>
<div class="input pr">
<input type="email" ng-model="email" class="form-control fi-email"
name="email" placeholder="Email" required auto-focus>
<i class="fi-mail"></i>
</div>
<div class="row">
<label class="left" for="insightLivenet">Email</label>
<span translate class="has-error right size-12" ng-show="profileForm.email.$invalid &&
!profileForm.email.$pristine || error">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</span>
<span class="icon-input right" ng-show="!profileForm.email.$invalid &&
!profileForm.email.$pristine || error"><i class="fi-check"></i></span>
</div>
<div class="input">
<input type="email" ng-model="email" class="form-control fi-email"
name="email" placeholder="Email" required auto-focus>
<i class="fi-mail"></i>
</div>
<label for="insightLivenet">Password</label>
<div class="input pr">
<input id="password" type="password" ng-model="$parent.password"
class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength"
tooltip-html-unsafe="Password strength: <b>{{passwordStrength}}</b><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="right">
<i class="fi-lock"></i>
</div>
<label for="insightLivenet">Password</label>
<div class="input">
<input id="password" type="password" ng-model="$parent.password"
class="form-control" name="password" placeholder="{{'Choose a password'|translate}}" check-strength="passwordStrength"
tooltip-html-unsafe="Password strength: <b>{{passwordStrength}}</b><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="right">
<i class="fi-lock"></i>
</div>
<div class="row">
<label class="left" for="insightLivenet">Confirm Password</label>
@ -64,9 +62,9 @@
<span class="icon-input right" ng-show="profileForm.repeatpassword.$dirty &&
!profileForm.repeatpassword.$invalid"><i class="fi-check"></i></span>
</div>
<div class="input pr">
<div class="input">
<input type="password" ng-model="repeatpassword"
class="form-control" name="repeatpassword"
class="input form-control" name="repeatpassword"
placeholder="{{'Repeat password'|translate}}"
match="password" required>
<i class="fi-lock"></i>

View File

@ -56,12 +56,12 @@
<i class="fi-x"></i>
{{error|translate}}
</p>
<div class="input pr">
<div class="input">
<input type="email" ng-model="email" class="form-control"
name="email" placeholder="Email" required auto-focus>
<i class="fi-mail"></i>
</div>
<div class="input pr">
<div class="input">
<input type="password" ng-model="password" class="form-control"
name="password" placeholder="Password" required>
<i class="fi-lock"></i>

View File

@ -48,25 +48,27 @@
Not valid
</span>
<small class="icon-input right" ng-show="!sendForm.address.$invalid && address"><i class="fi-check"></i></small>
<div class="pr">
<input class="columns" type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required>
<div ng-hide="showScanner || disableScanner">
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></a>
</div>
<div ng-show="showScanner">
<a translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></a>
</div>
</div>
<div id="scanner"
class="row"
ng-if="showScanner"
ng-include="'views/includes/scanner.html'"></div>
</div>
<div class="input">
<input type="text" id="address" name="address" ng-disabled="loading || !!$root.merchant"
placeholder="{{'Bitcoin address'|translate}}" ng-model="address" ng-change="onChanged()" valid-address required>
<i class="fi-address-book"></i>
<div ng-hide="showScanner || disableScanner">
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera size-24"></i></a>
</div>
<div ng-show="showScanner">
<a translate class="postfix button warning" ng-click="cancelScanner()"><i class="fi-x size-18"></i></a>
</div>
</div>
<div id="scanner"
class="row"
ng-if="showScanner"
ng-include="'views/includes/scanner.html'">
</div>
<div class="row">
<div class="large-6 medium-6 columns">
<div class="row collapse">
@ -80,20 +82,22 @@
<small class="icon-input right" ng-show="!sendForm.amount.$invalid &&
!sendForm.amount.$pristine"><i class="fi-check"></i></small>
<div class="pr">
<div class="small-9 columns">
<input type="number" id="amount"
ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
min="0.00000001" max="10000000000" valid-amount required
autocomplete="off">
<div class="input">
<input type="number" id="amount"
ng-disabled="loading || ($root.merchant && +$root.merchant.total > 0)"
name="amount" placeholder="{{'Amount'|translate}}" ng-model="amount"
min="0.00000001" max="10000000000" valid-amount required
autocomplete="off">
<i class="fi-bitcoin"></i>
</div>
<a class="small input-note" title="{{'Send all funds'|translate}}"
ng-show="topAmount && (!$root.merchant || +$root.merchant.total === 0)"
ng-click="setTopAmount(sendForm)">
<span translate>Use all funds</span> {{$root.wallet.settings.unitName}}
</a>
</div>
</div>
<div class="small-3 columns">
<span class="postfix">{{$root.wallet.settings.unitName}}</span>
</div>
@ -103,12 +107,12 @@
<div class="row collapse">
<label for="alternative"><span translate>Amount in</span> {{ alternativeName }} </label>
<div class="small-9 columns">
<input type="number" id="alternative_amount"
ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"
required
autocomplete="off"
>
<div class="input">
<input type="number" id="alternative_amount"
ng-disabled="loading || !isRateAvailable || ($root.merchant && +$root.merchant.total > 0)"
name="alternative" placeholder="{{'Amount'|translate}}" ng-model="alternative"requiredautocomplete="off">
<i class="fi-dollar"></i>
</div>
</div>
<div class="small-3 columns">
<span class="postfix">{{alternativeIsoCode}}</span>
@ -158,8 +162,11 @@
<small translate ng-hide="!sendForm.comment.$pristine">optional</small>
<small translate class="has-error" ng-show="sendForm.comment.$invalid && !sendForm.comment.$pristine">too long!</small>
</label>
<textarea id="comment" ng-disabled="loading"
<div class="input">
<textarea id="comment" ng-disabled="loading"
name="comment" placeholder="{{(wallet.isShared() ? 'Leave a private message to your copayers' : 'Add a private comment to identify the transaction') |translate}}" ng-model="commentText" ng-maxlength="100"></textarea>
<i class="fi-page-edit"></i>
</div>
</div>
</div>