devol
/
bitwarden-estensione-browser
mirror of https://github.com/bitwarden/browser
1
0
Fork 0
Code Issues 1 Releases Wiki Activity

new layout for tabs and header

This commit is contained in:
Kyle Spearrin 2016-09-07 23:07:07 -04:00
parent 5d55b28ba9
commit 583c6fcad6
7 changed files with 178 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/popup/app/current/views/current.html
View File

@ -1,7 +1,8 @@
<ion-view view-title="Current Sites">
<ion-content class="padding">
<p>
Some content for your current sites.
</p>
</ion-content>
</ion-view>
<div class="header">
<a href="#" class="left"><i class="fa fa-chevron-left"></i> Back</a>
<a href="#" class="right">Save</a>
<div class="title">Current Sites</div>
</div>
<div class="content">
Some content for your current sites.
</div>

2
src/popup/app/global/globalModule.js Normal file
View File

@ -0,0 +1,2 @@
angular
.module('bit.global', []);

10
src/popup/app/global/mainController.js Normal file
View File

@ -0,0 +1,10 @@
angular
.module('bit.global')
.controller('mainController', function ($scope, $state) {
$scope.currentYear = new Date().getFullYear();
$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
});
});

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

@ -1,14 +1,9 @@
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Current Sites" icon="ion-arrow-swap" ui-sref="tabs.current">
<ion-nav-view name="current-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="My Vault" icon="ion-android-lock" ui-sref="tabs.vault">
<ion-nav-view name="vault-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Tools" icon="ion-settings" ui-sref="tabs.tools">
<ion-nav-view name="tools-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="Settings" icon="ion-gear-a" ui-sref="tabs.settings">
<ion-nav-view name="settings-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
<div ui-view></div>
<div class="tabs" ng-controller="tabsController">
<ul>
<li class="active"><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><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>
</ul>
</div>

6
src/popup/app/global/tabsController.js Normal file
View File

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

22
src/popup/index.html
View File

@ -1,4 +1,5 @@
<html ng-app="bit">
<!DOCTYPE html>
<html ng-app="bit">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
@ -29,6 +30,10 @@
<script src="app/services/loginService.js"></script>
<script src="app/services/cipherService.js"></script>
<script src="app/global/globalModule.js"></script>
<script src="app/global/mainController.js"></script>
<script src="app/global/tabsController.js"></script>
<script src="app/accounts/accountsModule.js"></script>
<script src="app/accounts/accountsLoginController.js"></script>
@ -46,19 +51,8 @@
<script src="app/tools/toolsModule.js"></script>
<script src="app/tools/toolsController.js"></script>
<style>
body {
width: 320px;
height: 568px;
}
</style>
</head>
<body>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
<body ng-controller="mainController as main">
<div ui-view></div>
</body>
</html>

136
src/popup/less/popup.less
View File

@ -1,3 +1,137 @@
body {
@import "../../../node_modules/bootstrap/less/bootstrap.less";
@font-family: "Open Sans", sans-serif;
@brand-primary: #3c8dbc;
body {
font-family: @font-family;
width: 320px;
height: 568px;
}
.header {
min-height: 44px;
max-height: 44px;
background-color: @brand-primary;
color: white;
font-family: @font-family;
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
a {
color: white !important;
text-decoration: none;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
.title {
font-weight: bold;
display: block;
padding: 12px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.left {
float: left;
display: block;
padding: 12px 10px;
}
.right {
float: right;
display: block;
padding: 12px 10px;
}
}
.content {
position: absolute;
top: 44px;
bottom: 55px;
left: 0;
right: 0;
overflow: auto;
}
.tabs {
width: 100%;
height: 55px;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
li {
width: 25%;
float: left;
display: inline-block;
padding: 0;
margin: 0;
a {
text-align: center;
display: block;
padding: 7px 0;
text-decoration: none;
color: #777;
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:hover {
background-color: rgba(255, 255, 255, 0.8);
}
i {
display: block;
margin-bottom: 2px;
}
}
&.active {
a {
color: @brand-primary;
}
}
}
}
}
.list {
.list-item {
display: block;
padding: 10px 10px;
background-color: white;
border-bottom: 1px solid #ddd;
color: #333;
text-decoration: none;
&:last-child {
border: none;
}
.text {
display: block;
}
.detail {
font-size: 12px;
color: #777;
display: block;
}
}
}