anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1881 from bechi/input-icon

Browse source 
New Icons and input style
This commit is contained in:
Matias Alejo Garcia 2014-11-30 22:35:53 -03:00
commit fcb254b39c
17 changed files with 277 additions and 110 deletions
Download patch file Download diff file Expand all files Collapse all files

5
views/create.html
View file

@ -21,7 +21,10 @@
<div class="large-12 columns">
<div class="panel">
<label><span translate>Wallet name</span>
<input type="text" placeholder="{{'Family vacation funds'|translate}}" class="form-control" ng-model="walletName" auto-focus>
<div class="input">
<input type="text" placeholder="{{'Family vacation funds'|translate}}" class="form-control" ng-model="walletName" auto-focus>
<i class="icon-wallet"></i>
</div>
</label>
<div class="row">
<div class="large-6 medium-6 columns">

60
views/createProfile.html
View file

@ -28,27 +28,31 @@
</span>
</div>
<form name="profileForm" ng-submit="createProfile(profileForm)" novalidate>
<div class="row collapse">
<div class="small-12 columns">
<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>
<input type="email" ng-model="email" class="form-control fi-email"
name="email" placeholder="Email" required auto-focus>
</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="icon-email"></i>
</div>
<label class="left" for="insightLivenet">Password</label>
<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: <i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase, numbers and symbols</span>" tooltip-trigger="focus" required tooltip-placement="right">
<div class="pr">
<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="icon-locked"></i>
</div>
<div class="row">
<label class="left" for="insightLivenet">Confirm Password</label>
<span translate class="has-error right size-12" ng-show="profileForm.repeatpassword.$dirty &&
profileForm.repeatpassword.$invalid">
@ -56,12 +60,16 @@
{{'Passwords must match'|translate}}
</span>
<span class="icon-input right" ng-show="profileForm.repeatpassword.$dirty &&
!profileForm.repeatpassword.$invalid"><i class="fi-check"></i></span>
<input type="password" ng-model="repeatpassword"
class="columns form-control" name="repeatpassword"
placeholder="{{'Repeat password'|translate}}"
match="password" required >
!profileForm.repeatpassword.$invalid"><i class="fi-check"></i></span>
</div>
<div class="input">
<input type="password" ng-model="repeatpassword"
class="input form-control" name="repeatpassword"
placeholder="{{'Repeat password'|translate}}"
match="password" required>
<i class="icon-locked"></i>
</div>
<button translate type="submit" class="button primary radius expand m0"
ng-disabled="profileForm.$invalid || loading">
Create
@ -70,13 +78,13 @@
<div class="box-setup-footer">
<div class="left">
<a class="text-gray" href="#!/">
<i class="fi-arrow-left"></i>
<i class="icon-arrow-left4"></i>
<span translate>Back</span>
</a>
</div>
<div class="right">
<a class="right size-12 text-gray" href="#!/settings">
<i class="fi-wrench"></i>
<i class="icon-wrench"></i>
<span translate>Settings</span>
</a>
</div>

17
views/home.html
View file

@ -56,11 +56,16 @@
<i class="fi-x"></i>
{{error|translate}}
</p>
<input type="email" ng-model="email" class="form-control"
name="email" placeholder="Email" required auto-focus>
<div class="input">
<input type="email" ng-model="email" class="form-control"
name="email" placeholder="Email" required auto-focus>
<i class="icon-email"></i>
</div>
<div class="input">
<input type="password" ng-model="password" class="form-control"
name="password" placeholder="Password" required>
<i class="icon-locked"></i>
</div>
<button translate type="submit" class="button primary radius expand m0"
ng-disabled="loginForm.$invalid || loading">
@ -70,19 +75,19 @@
<div class="box-setup-footer">
<div class="left m10r">
<a class="button-setup text-gray" href="#!/createProfile">
<i class="fi-torso"></i>
<i class="icon-person"></i>
<span translate>Create a profile</span>
</a>
</div>
<div class="left">
<a class="button-setup text-gray" href="#!/importProfile">
<i class="fi-upload"></i>
<i class="icon-upload"></i>
<span translate>Import a profile</span>
</a>
</div>
<div class="right m10t">
<a class="text-gray" href="#!/settings">
<i class="fi-wrench"></i>
<i class="icon-wrench"></i>
<span translate>Settings</span>
</a>
</div>

5
views/import.html
View file

@ -52,7 +52,10 @@
<label for="password"><span translate>Password</span> <small translate>Required</small>
</label>
<input type="password" class="form-control" placeholder="{{'Your wallet password'|translate}}" name="password" ng-model="password" required>
<div class="input">
<input type="password" class="form-control" placeholder="{{'Your wallet password'|translate}}" name="password" ng-model="password" required>
<i class="icon-locked"></i>
</div>
<div class="line-dashed-h m10b m20t"></div>

9
views/importProfile.html
View file

@ -44,9 +44,10 @@
ng-model="backupText"
rows="5"></textarea>
</div>
<input type="password" class="form-control"
placeholder="{{'Your wallet password'|translate}}" name="password" ng-model="password" required>
<div class="input">
<input type="password" class="form-control" placeholder="{{'Your wallet password'|translate}}" name="password" ng-model="password" required>
<i class="icon-locked"></i>
</div>
<button translate type="submit"
class="button primary radius expand m0"
@ -56,7 +57,7 @@
</form>
<div class="box-setup-footer">
<a class="text-gray" href="#!/">
<i class="fi-arrow-left"></i>
<i class="icon-arrow-left4"></i>
<span translate>Back</span>
</a>
</div>

24
views/includes/head.html
View file

@ -21,21 +21,21 @@
<img gravatar-src="'{{username}}'" gravatar-size="35">
</div>
<span class="m15t">{{username}} </span>
<i class="icon-arrow-down size-16 vm"></i>
<i class="icon-arrow-down2 size-16 vm"></i>
</a>
<ul ng-show="hoverMenu" ng-class="{'hover': hoverMenu}">
<ul ng-show="hoverMenu" class="size-16 text-gray" ng-class="{'hover': hoverMenu}">
<li>
<a class="text-gray size-16" href="#!/create" title="Create new wallet">
<i class="fi-plus m10r"></i> {{'Create new wallet'|translate}}</a></li>
<li><a class="text-gray size-16" href="#!/join" title="Join shared wallet">
<i class="fi-torsos-all m10r"></i> {{'Join shared wallet'|translate}}</a></li>
<li><a class="text-gray size-16" href="#!/import" title="Import wallet">
<i class="fi-download m10r"></i> {{'Import wallet'|translate}}</a></li>
<a href="#!/create" title="Create new wallet">
<i class="fi-plus size-18 m10r"></i> {{'Create new wallet'|translate}}</a></li>
<li><a href="#!/join" title="Join shared wallet">
<i class="icon-people size-18 m10r"></i> {{'Join shared wallet'|translate}}</a></li>
<li><a href="#!/import" title="Import wallet">
<i class="icon-download size-18 m10r"></i> {{'Import wallet'|translate}}</a></li>
<li class="divider"></li>
<li><a class="text-gray size-16" href="#!/profile" title="Profile">
<i class="fi-torso m10r"></i> {{'Profile'|translate}}</a></li>
<li><a class="text-gray size-16" href="#!/" title="Close" ng-click="signout()">
<i class="fi-power m10r"></i> {{'Close'|translate}}</a></li>
<li><a href="#!/profile" title="Profile">
<i class="icon-person size-18 m10r"></i> {{'Profile'|translate}}</a></li>
<li><a href="#!/" title="Close" ng-click="signout()">
<i class="icon-power size-18 m10r"></i> {{'Close'|translate}}</a></li>
</ul>
</div>

12
views/join.html
View file

@ -33,10 +33,11 @@
</span>
<small class="icon-input right" ng-show="joinForm.connectionId.$valid
&& !joinForm.connectionId.$pristine"><i class="fi-check"></i></small>
</div>
<div class="pr">
<input id="connectionId" type="text" class="columns" placeholder="{{'Paste wallet secret here'|translate}}" name="connectionId" ng-model="connectionId" wallet-secret required>
<div class="input">
<input id="connectionId" type="text" placeholder="{{'Paste wallet secret here'|translate}}" name="connectionId" ng-model="connectionId" wallet-secret required>
<i class="icon-wallet"></i>
<div ng-hide="showScanner || disableScanner">
<a class="postfix button black" ng-click="openScanner()"><i class="fi-camera">&nbsp;</i></a>
</div>
@ -48,9 +49,8 @@
<div id="scanner"
class="row"
ng-if="showScanner"
ng-include="'views/includes/scanner.html'"></div>
</div>
ng-include="'views/includes/scanner.html'">
</div>
<div class="line-dashed-h"></div>

31
views/modals/address-book.html
View file

@ -1,21 +1,28 @@
<h2 translate>Address Book</h2>
<form class="m0" name="addressBookForm" ng-submit="submitAddressBook(addressBookForm)" novalidate>
<label for="newaddress" class="left"><span translate>Address</span>
<small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small>
</label>
<span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</span>
<small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small>
<input type="text" id="newaddress" name="newaddress" ng-disabled="loading"
<div class="row collapse">
<label for="newaddress" class="left"><span translate>Address</span>
<small translate ng-hide="!addressBookForm.newaddress.$pristine || newaddress">Required</small>
</label>
<span translate class="has-error right size-12" ng-show="addressBookForm.newaddress.$invalid && newaddress">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</span>
<small class="icon-input right" ng-show="!addressBookForm.newaddress.$invalid && newaddress"><i class="fi-check"></i></small>
</div>
<div class="input">
<input type="text" id="newaddress" name="newaddress" ng-disabled="loading"
placeholder="{{'Address'|translate}}" ng-model="newaddress" valid-address required>
<i class="fi-address-book"></i>
</div>
<label for="newlabel"><span translate>Label</span>
<small translate ng-hide="!addressBookForm.newlabel.$pristine || newlabel">Required</small>
<input type="text" id="newlabel" name="newlabel" ng-disabled="loading"
placeholder="{{'Label'|translate}}" ng-model="newlabel" required>
<div class="input">
<input type="text" id="newlabel" name="newlabel" ng-disabled="loading"
placeholder="{{'Label'|translate}}" ng-model="newlabel" required>
<i class="icon-pricetag"></i>
</div>
</label>
<a translate class="m0 button warning small default" ng-click="cancel()">Cancel</a>
<input type="submit" class="m0 button small primary right"

69
views/send.html
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="icon-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="icon-usd"></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="icon-compose"></i>
</div>
</div>
</div>

28
views/settings.html
View file

@ -22,19 +22,29 @@
</fieldset>
<fieldset>
<legend translate>Insight API server</legend>
<label class="left" for="insightLivenet">Livenet</label>
<div class="row collapse">
<label class="left" for="insightLivenet">Livenet</label>
<div translate class="has-error right size-12" ng-show="settingsForm.insightLivenet.$invalid">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</div>
<input type="text" ng-model="insightLivenet" class="form-control" name="insightLivenet" valid-url required>
<label class="left" for="insightTestnet">Testnet</label>
<div translate class="has-error right size-12" ng-show="settingsForm.insightTestnet.$invalid">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</div>
<input type="text" ng-model="insightTestnet" class="form-control" name="insightTestnet" valid-url required>
<div class="input">
<input type="text" ng-model="insightLivenet" class="form-control" name="insightLivenet" valid-url required>
<i class="fi-link"></i>
</div>
<div class="row collapse">
<label class="left" for="insightTestnet">Testnet</label>
<div translate class="has-error right size-12" ng-show="settingsForm.insightTestnet.$invalid">
<span class="icon-input"><i class="fi-x"></i></span>
Not valid
</div>
</div>
<div class="input">
<input type="text" ng-model="insightTestnet" class="form-control" name="insightTestnet" valid-url required>
<i class="fi-link"></i>
</div>
<div translate class="small text-gray">
Insight API server is open-source software. You can run your own instances, check <a href="http://insight.is" target="_blank">Insight API Homepage</a>
@ -63,7 +73,7 @@
</form>
<div class="box-setup-footer">
<a class="text-gray" href="#!/">
<i class="fi-arrow-left"></i>
<i class="icon-arrow-left4"></i>
<span translate>Back</span>
</a>
<div class="right m10r">