style updates and tooltips for site listings

This commit is contained in:
Kyle Spearrin 2016-09-22 15:27:39 -04:00
parent 6da2f5d18b
commit f1792c6be6
4 changed files with 17 additions and 15 deletions

View File

@ -8,21 +8,23 @@
<div ng-if="sites.length"> <div ng-if="sites.length">
<div class="list"> <div class="list">
<div class="list-grouped"> <div class="list-grouped">
<div ng-click="fillSite(site)" class="list-grouped-item condensed" style="cursor: pointer;" <a href="javascript:void(0)" ng-click="fillSite(site)" class="list-grouped-item condensed"
ng-repeat="site in theSites = (sites | orderBy: ['name', 'username'])"> title="Auto-fill {{site.name}}" ng-repeat="site in theSites = (sites | orderBy: ['name', 'username'])">
<a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Password" <span class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Password"
ngclipboard ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, 'Password')" ngclipboard ngclipboard-error="clipboardError(e)"
data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}"> ngclipboard-success="clipboardSuccess(e, 'Password')"
data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">
<i class="fa fa-lg fa-key"></i> <i class="fa fa-lg fa-key"></i>
</a> </span>
<a class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Username" <span class="btn-list" href="" ng-click="$event.stopPropagation()" title="Copy Username"
ngclipboard ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, 'Username')" ngclipboard ngclipboard-error="clipboardError(e)"
data-clipboard-text="{{site.username}}" ng-class="{'disabled': !site.username}"> ngclipboard-success="clipboardSuccess(e, 'Username')"
data-clipboard-text="{{site.username}}" ng-class="{'disabled': !site.username}">
<i class="fa fa-lg fa-user"></i> <i class="fa fa-lg fa-user"></i>
</a> </span>
<span class="text">{{site.name}}</span> <span class="text">{{site.name}}</span>
<span class="detail">{{site.username}}</span> <span class="detail">{{site.username}}</span>
</div> </a>
</div> </div>
</div> </div>
</div> </div>

View File

@ -15,7 +15,8 @@
<div class="list-grouped-header"> <div class="list-grouped-header">
<i class="fa fa-folder-open"></i> {{folder.name}} <i class="fa fa-folder-open"></i> {{folder.name}}
</div> </div>
<a href="javascript:void(0)" ng-click="viewSite(site)" class="list-grouped-item condensed" <a href="javascript:void(0)" ng-click="viewSite(site)"
class="list-grouped-item condensed" title="Edit {{site.name}}"
ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id } ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id }
| filter: searchSites() | orderBy: ['name', 'username'])"> | filter: searchSites() | orderBy: ['name', 'username'])">
<span class="btn-list" ng-click="$event.stopPropagation()" title="Copy Password" ngclipboard <span class="btn-list" ng-click="$event.stopPropagation()" title="Copy Password" ngclipboard

View File

@ -286,10 +286,10 @@
} }
&.disabled { &.disabled {
color: @text-disabled; color: @list-icon-color;
&:hover { &:hover {
color: @text-disabled; color: @list-icon-color;
} }
} }

View File

@ -8,7 +8,6 @@
@border-color: #f0f0f0; @border-color: #f0f0f0;
@border-color-dark: #ddd; @border-color-dark: #ddd;
@list-item-hover: #fbfbfb; @list-item-hover: #fbfbfb;
@text-disabled: #d2d6de;
@list-icon-color: #c7c7cd; @list-icon-color: #c7c7cd;
@brand-primary: #3c8dbc; @brand-primary: #3c8dbc;