Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-11-22 11:45:59 +01:00
Code Issues Projects Releases Wiki Activity

accessability updates

Browse Source
This commit is contained in:
Kyle Spearrin 2016-09-20 22:20:42 -04:00
parent ee4548a84a
commit aad5dae40d
7 changed files with 109 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/popup/app/accounts/views/accountsLogin.html
View File

@ -26,7 +26,7 @@
</div>
</div>
</div>
<p class="text-center">
<p class="text-center text-accent">
<a ui-sref="hint({animation: 'in-slide-left'})">Get master password hint</a>
</p>
</div>

25
src/popup/app/vault/views/vault.html
View File

@ -1,6 +1,6 @@
<div class="header">
<div class="right">
<a href="" ng-click="addSite()"><i class="fa fa-plus fa-lg"></i></a>
<a href="javascript:void(0)" ng-click="addSite()"><i class="fa fa-plus fa-lg"></i></a>
</div>
<div class="search">
<input type="search" placeholder="Search vault" ng-model="searchText" id="search" />
@ -15,25 +15,28 @@
<div class="list-grouped-header">
<i class="fa fa-folder-open"></i> {{folder.name}}
</div>
<div ng-click="viewSite(site)" class="list-grouped-item condensed" style="cursor: pointer;"
ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id } | filter: searchSites() | orderBy: ['name', 'username'])">
<a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Password" ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, 'Password')" data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">
<a href="javascript:void(0)" ng-click="viewSite(site)" class="list-grouped-item condensed"
ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id }
| filter: searchSites() | orderBy: ['name', 'username'])">
<span class="btn-list" ng-click="$event.stopPropagation()" title="Copy Password" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, 'Password')"
data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">
<i class="fa fa-lg fa-key"></i>
</a>
<a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Username" ngclipboard ngclipboard-error="clipboardError(e)"
ngclipboard-success="clipboardSuccess(e, 'Username')" data-clipboard-text="{{site.username}}" ng-class="{'disabled': !site.username}">
</span>
<span class="btn-list" ng-click="$event.stopPropagation()" title="Copy Username" ngclipboard
ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, 'Username')"
data-clipboard-text="{{site.username}}" ng-class="{'disabled': !site.username}">
<i class="fa fa-lg fa-user"></i>
</a>
</span>
<span class="text">{{site.name}}</span>
<span class="detail">{{site.username}}</span>
</div>
</a>
</div>
</div>
</div>
</div>
<div ng-if="loaded && !vaultSites.length">
<p>No sites to list. <a href="" ng-click="addSite()">Add one</a></p>
<p>No sites to list. <a href="javascript:void(0)" ng-click="addSite()">Add one</a></p>
</div>
<div ng-if="!loaded">
<p><i class="fa fa-lg fa-spinner fa-spin"></i></p>

75
src/popup/less/components.less
View File

@ -19,10 +19,17 @@
text-decoration: none;
background: none;
&:hover {
&:hover, &:focus {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover {
text-decoration: none;
}
&:focus {
text-decoration: underline;
}
}
.title {
@ -133,7 +140,7 @@
overflow: hidden;
text-overflow: ellipsis;
&:hover {
&:hover, &:focus {
background-color: @list-item-hover;
}
@ -234,7 +241,7 @@
}
}
&:hover {
&:hover, &:focus, &.active {
background-color: @list-item-hover;
}
@ -271,6 +278,11 @@
padding: 10px 8px 10px 8px;
background: none;
border: none;
color: @brand-primary;
&:hover, &:focus {
color: darken(@brand-primary, 10%);
}
&.disabled {
color: @text-disabled;
@ -380,59 +392,10 @@
-moz-border-radius: 0;
}
.generate-password-block {
margin: 20px;
font-size: 19px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: @font-family-monospace;
.btn-link {
color: @brand-primary-accent;
}
.about-page {
padding-top: 50px;
text-align: center;
img {
margin: 0 auto 20px;
width: 220px;
display: block;
}
}
.home-page {
padding: 120px 20px 20px;
text-align: center;
position: relative;
height: 100%;
img {
margin: 0 auto 30px;
width: 250px;
display: block;
}
p {
font-size: 18px;
}
.buttons {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
padding: 20px;
}
}
.splash-page {
text-align: center;
padding: 160px 20px 0;
img {
width: 250px;
display: block;
margin: 0 auto;
}
.text-accent {
color: @brand-primary-accent;
}

67
src/popup/less/pages.less Normal file
View File

@ -0,0 +1,67 @@
@import (reference) "variables.less";
@import (reference) "mixins.less";
.generate-password-block {
margin: 20px;
font-size: 19px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: @font-family-monospace;
}
.about-page {
padding-top: 50px;
text-align: center;
img {
margin: 0 auto 20px;
width: 220px;
display: block;
}
}
.home-page {
padding: 100px 20px 20px;
text-align: center;
position: relative;
height: 100%;
img {
margin: 0 auto 30px;
width: 250px;
display: block;
}
p {
font-size: 18px;
}
.buttons {
position: absolute;
bottom: 0;
width: 100%;
left: 0;
padding: 20px;
.btn {
font-size: @font-size-base;
}
.btn-link {
font-weight: 600;
}
}
}
.splash-page {
text-align: center;
padding: 160px 20px 0;
img {
width: 250px;
display: block;
margin: 0 auto;
}
}

1
src/popup/less/popup.less
View File

@ -4,6 +4,7 @@
@import "components.less";
@import "animations.less";
@import "plugins.less";
@import "pages.less";
body {
width: 320px;

1
src/popup/less/variables.less
View File

@ -16,3 +16,4 @@
@brand-success: #00a65a;
@brand-info: #00c0ef;
@brand-warning: #f39c12;
@brand-primary-accent: #286090;

6
src/popup/scripts/popup.js
View File

@ -32,6 +32,12 @@
select.openSelect();
}
});
$('.list-section-item input, .list-section-item select, .list-section-item textarea').focus(function (e) {
$(this).parent().addClass('active');
}).blur(function (e) {
$(this).parent().removeClass('active');
});
}
return self;