bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-16 16:23:44 +00:00
Code Issues Releases Wiki Activity

more list styling throughout vault

Browse Source
This commit is contained in:
Kyle Spearrin
2016-09-09 00:46:12 -04:00
parent 50a05b522e
commit ac0ceac647
9 changed files with 362 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,6 @@
<div class="header"> <div class="header">
<div class="title">Current Sites</div> <div class="title">Current Sites</div>
</div> </div>
<div class="content"> <div class="content content-tabs">
Some content for your current sites. Some content for your current sites.
</div> </div>

45
src/popup/app/settings/views/settings.html
View File

@@ -1,25 +1,36 @@
<div class="header"> <div class="header">
<div class="title">Settings</div> <div class="title">Settings</div>
</div> </div>
<div class="content"> <div class="content content-tabs">
<div class="list"> <div class="list">
<div class="list-divider"> <div class="list-section">
Manage <div class="list-section-header">
Manage
</div>
<div class="list-section-items">
<a class="list-section-item" href="#">
Folders
</a>
<a class="list-section-item" href="#" ng-click="sync()">
Sync
</a>
</div>
</div> </div>
<a class="list-item" href="#"> <div class="list-section">
Folders <div class="list-section-header">
</a> Current Session
<a class="list-item" href="#" ng-click="sync()"> </div>
Sync <div class="list-section-items">
</a> <a class="list-section-item" href="#">
<div class="list-divider"> Lock
Current Session </a>
<a class="list-section-item" href="#" ng-click="logOut()">
Log out
</a>
</div>
<div class="list-section-footer">
This is a footer note.
</div>
</div> </div>
<a class="list-item" href="#">
Lock
</a>
<a class="list-item" href="#" ng-click="logOut()">
Log out
</a>
</div> </div>
</div> </div>

2
src/popup/app/tools/views/tools.html
View File

@@ -1,6 +1,6 @@
<div class="header"> <div class="header">
<div class="title">Tools</div> <div class="title">Tools</div>
</div> </div>
<div class="content"> <div class="content content-tabs">
Some content for your tools. Some content for your tools.
</div> </div>

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

@@ -2,13 +2,13 @@
<a class="right" ui-sref="addSite"><i class="fa fa-plus fa-lg"></i></a> <a class="right" ui-sref="addSite"><i class="fa fa-plus fa-lg"></i></a>
<div class="title">My Vault</div> <div class="title">My Vault</div>
</div> </div>
<div class="content"> <div class="content content-tabs">
<div class="list"> <div class="list">
<ng-repeat ng-repeat="folder in folders | orderBy: folderSort" ng-show="folders.length"> <ng-repeat ng-repeat="folder in folders | orderBy: folderSort" ng-show="folders.length">
<div class="list-divider"> <div class="list-item-header">
<i class="fa fa-folder-open"></i> {{folder.name}} <i class="fa fa-folder-open"></i> {{folder.name}}
</div> </div>
<a ui-sref="viewSite({siteId: site.id})" class="list-item" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])"> <a ui-sref="viewSite({siteId: site.id})" class="list-item list-item-condensed" ng-repeat="site in folderSites = (sites | filter: { folderId: folder.id } | orderBy: ['name', 'username'])">
<span class="text">{{site.name}}</span> <span class="text">{{site.name}}</span>
<span class="detail">{{site.username}}</span> <span class="detail">{{site.username}}</span>
<!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>--> <!--<span class="btn btn-link pull-right"><i class="fa fa-ellipsis-h"></i></span>-->

91
src/popup/app/vault/views/vaultAddSite.html
View File

@@ -5,49 +5,58 @@
</div> </div>
<div class="content"> <div class="content">
<div class="list"> <div class="list">
<div class="list-divider"> <div class="list-section">
Site Information <div class="list-section-header">
Site Information
</div>
<div class="list-section-items">
<div class="list-section-item">
<label for="name">Name</label>
<input id="name" type="text" ng-model="site.name">
</div>
<div class="list-section-item">
<label for="uri">URI</label>
<input id="uri" type="text" ng-model="site.uri">
</div>
<div class="list-section-item">
<label for="username">Username</label>
<input id="username" type="text" ng-model="site.username">
</div>
<div class="list-section-item">
<label for="password">Password</label>
<input id="password" type="password" ng-model="site.password">
</div>
<a class="list-section-item" href="#">
Generate Password
<i class="fa fa-chevron-right pull-right"></i>
</a>
</div>
</div> </div>
<div class="list-item"> <div class="list-section">
<label>Name</label> <div class="list-section-items">
<input type="text" ng-model="site.name"> <div class="list-section-item">
<label for="folder">Folder</label>
<select id="folder">
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</div>
<div class="list-section-item list-section-item-checkbox">
<label for="favorite">Favorite</label>
<input id="favorite" type="checkbox" ng-model="site.favorite">
</div>
</div>
</div> </div>
<div class="list-item"> <div class="list-section">
<label>URI</label> <div class="list-section-header">
<input type="text" ng-model="site.uri"> <label for="notes">Notes</label>
</div> </div>
<div class="list-item"> <div class="list-section-items">
<label>Username</label> <div class="list-section-item">
<input type="text" ng-model="site.username"> <textarea id="notes" rows="5" ng-model="site.notes"></textarea>
</div> </div>
<div class="list-item"> </div>
<label>Password</label>
<input type="password" ng-model="site.password">
</div>
<a class="list-item" href="#">
Generate Password
<i class="fa fa-chevron-right"></i>
</a>
<div class="list-divider">
&nbsp;
</div>
<div class="list-item">
<label>Folder</label>
<select>
<option>Blue</option>
<option selected>Green</option>
<option>Red</option>
</select>
</div>
<div class="list-item">
<label>Favorite</label>
<input type="checkbox" ng-model="site.favorite">
</div>
<div class="list-divider">
Notes
</div>
<div class="list-item">
<textarea rows="5" ng-model="site.notes"></textarea>
</div> </div>
</div> </div>
</div> </div>

56
src/popup/app/vault/views/vaultViewSite.html
View File

@@ -4,31 +4,39 @@
<div class="title">View Site</div> <div class="title">View Site</div>
</div> </div>
<div class="content"> <div class="content">
<div class="list"> <div class="list list-no-selection">
<div class="list-divider"> <div class="list-section">
Site Information <div class="list-section-header">
Site Information
</div>
<div class="list-section-items">
<div class="list-section-item">
<span class="item-label">Name</span>
{{site.name}}
</div>
<div class="list-section-item">
<span class="item-label">Website</span>
{{site.uri}}
</div>
<div class="list-section-item">
<span class="item-label">Username</span>
{{site.username}}
</div>
<div class="list-section-item">
<span class="item-label">Password</span>
{{site.password}}
</div>
</div>
</div> </div>
<div class="list-item"> <div class="list-section">
<div>Name</div> <div class="list-section-header">
{{site.name}} Notes
</div> </div>
<div class="list-item"> <div class="list-section-items">
<div>Website</div> <div class="list-section-item">
{{site.uri}} {{site.notes}}
</div> </div>
<div class="list-item"> </div>
<div>Username</div>
{{site.username}}
</div>
<div class="list-item">
<div>Password</div>
{{site.password}}
</div>
<div class="list-divider">
Notes
</div>
<div class="list-item">
{{site.notes}}
</div> </div>
</div> </div>
</div> </div>

228
src/popup/less/components.less Normal file
View File

@@ -0,0 +1,228 @@
@import (reference) "../../../node_modules/bootstrap/less/mixins.less";
@import (reference) "../../../node_modules/bootstrap/less/variables.less";
@import (reference) "variables.less";
.header {
min-height: 44px;
max-height: 44px;
background-color: @brand-primary;
color: white;
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;
}
}
.tabs {
width: 100%;
height: 55px;
background-color: white;
border-top: 1px solid @border-color-dark;
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: @gray-light;
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 {
border-top: 1px solid @border-color;
&:first-child {
border: none;
}
}
.list-item-header {
background-color: transparent;
padding: 10px 10px;
color: @gray-light;
+ .list-item {
border: none;
}
}
.list-section {
padding-bottom: 10px;
&:first-child {
padding-top: 10px;
}
.list-section-header {
background-color: transparent;
padding: 5px 10px;
color: @gray-light;
text-transform: uppercase;
label {
font-weight: normal;
}
}
.list-section-items {
border-top: 1px solid @border-color-dark;
border-bottom: 1px solid @border-color-dark;
.list-section-item {
border-bottom: 1px solid @border-color;
&:last-child {
border: none;
}
}
}
.list-section-footer {
padding: 5px 10px;
font-size: @font-size-small;
color: @gray-light;
}
}
.list-item, .list-section-item {
display: block;
padding: 10px 10px;
background-color: white;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: @text-color;
&:hover {
background-color: @list-item-hover;
}
&.list-item-condensed {
padding: 3px 10px;
}
.text {
display: block;
color: @text-color;
}
.detail {
font-size: @font-size-small;
color: @gray-light;
display: block;
}
label, .item-label {
font-size: @font-size-small;
color: @gray-light;
display: block;
width: 100%;
font-weight: normal;
}
input:not([type="checkbox"]), select, textarea {
border: none;
width: 100%;
background-color: transparent;
&:focus {
outline: none;
}
}
&.list-section-item-checkbox {
label {
font-size: @font-size-base;
color: @text-color;
display: inline;
width: initial;
font-weight: normal;
}
input[type="checkbox"] {
float: right;
}
}
}
&.list-no-selection {
.list-item, .list-section-item {
&:hover {
background-color: white;
}
}
}
}

143
src/popup/less/popup.less
View File

@@ -1,151 +1,26 @@
@import "../../../node_modules/bootstrap/less/bootstrap.less"; @import "../../../node_modules/bootstrap/less/bootstrap.less";
@import "variables.less";
@font-family: "Open Sans", sans-serif; @import "components.less";
@brand-primary: #3c8dbc;
body { body {
font-family: @font-family;
width: 320px; width: 320px;
height: 568px; height: 568px;
} background-color: @background-color;
.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 { .content {
position: absolute; position: absolute;
top: 44px; 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; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
overflow: hidden; overflow: auto;
ul { &.content-tabs {
width: 100%; bottom: 55px;
list-style: none; }
padding: 0;
margin: 0;
li { &.content-no-header {
width: 25%; top: 0;
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;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:last-child {
border: none;
}
.text {
display: block;
}
.detail {
font-size: 12px;
color: #777;
display: block;
}
}
.list-divider {
background-color: #eeeeee;
padding: 10px 10px;
border-bottom: 1px solid #ddd;
} }
} }

10
src/popup/less/variables.less Normal file
View File

@@ -0,0 +1,10 @@
@import (reference) "../../../node_modules/bootstrap/less/mixins.less";
@import (reference) "../../../node_modules/bootstrap/less/variables.less";
@font-family-sans-serif: "Open Sans", sans-serif;
@text-color: #000000;
@brand-primary: #3c8dbc;
@background-color: #efeff4;
@border-color: #f0f0f0;
@border-color-dark: #ddd;
@list-item-hover: #fbfbfb;