Upstream/bitwarden-desktop
1
0
Fork 0
mirror of https://github.com/bitwarden/desktop.git synced 2024-11-02 08:30:14 +01:00
Code Issues Projects Releases Wiki Activity

active tab styles, bottom border on list to not go full width like iOS

Browse Source
This commit is contained in:
Kyle Spearrin 2016-09-10 23:30:08 -04:00
parent 0a3a7427ba
commit 37865c0531
3 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/popup/app/global/tabs.html
View File

@ -1,9 +1,9 @@
<div ui-view></div> <div ui-view></div>
<div class="tabs" ng-controller="tabsController"> <div class="tabs" ng-controller="tabsController">
<ul> <ul>
<li class="active"><a ui-sref="tabs.current"><i class="fa fa-star fa-2x"></i> Current</a></li> <li ng-class="{active: $state.includes('tabs.current')}"><a ui-sref="tabs.current"><i class="fa fa-star fa-2x"></i> Current</a></li>
<li><a ui-sref="tabs.vault"><i class="fa fa-lock fa-2x"></i> My Vault</a></li> <li ng-class="{active: $state.includes('tabs.vault')}"><a ui-sref="tabs.vault"><i class="fa fa-lock fa-2x"></i> My Vault</a></li>
<li><a ui-sref="tabs.tools"><i class="fa fa-wrench fa-2x"></i> Tools</a></li> <li ng-class="{active: $state.includes('tabs.tools')}"><a ui-sref="tabs.tools"><i class="fa fa-wrench fa-2x"></i> Tools</a></li>
<li><a ui-sref="tabs.settings"><i class="fa fa-cogs fa-2x"></i> Settings</a></li> <li ng-class="{active: $state.includes('tabs.settings')}"><a ui-sref="tabs.settings"><i class="fa fa-cogs fa-2x"></i> Settings</a></li>
</ul> </ul>
</div> </div>

4
src/popup/app/global/tabsController.js
View File

@ -1,6 +1,6 @@
angular angular
.module('bit.global') .module('bit.global')
.controller('tabsController', function ($scope) { .controller('tabsController', function ($scope, $state) {
$scope.$state = $state;
}); });

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

@ -105,7 +105,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
&:hover { &:hover {
background-color: rgba(255, 255, 255, 0.8); background-color: @list-item-hover;
} }
i { i {
@ -171,7 +171,18 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
color: @text-color; color: @text-color;
border-bottom: 1px solid @border-color; position: relative;
z-index: 1;
&:before {
content: "";
position: absolute;
right: 0;
bottom: 0;
height: 1px;
width: 97%;
border-bottom: 1px solid @border-color;
}
&:last-child { &:last-child {
border: none; border: none;