x/compass-web
Code Issues Proposed changes

Prettify login/wizard/cluster list pages.

Browse Source 
Change-Id: If2a0fb8cd0e3f02d8601faf4f95b2b77de6c2e52
This commit is contained in:
sharonlucong 2014-08-22 17:24:00 -07:00
parent 1c71191841
commit ba4d427356
20 changed files with 286 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored Normal file
View File

@ -0,0 +1,3 @@
*~
*.swp
.DS_Store

217
v2/assets/css/style.css
View File

@ -4,21 +4,35 @@ html {
overflow-x: scroll;
font-size: 14px !important;
height: 100%;
font-family: "Trebuchet MS", san sarif !important;
color:rgba(83, 83, 83, 1) !important;
}
body {
min-width: 1024px;
font-size: 14px !important;
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif !important;
color:rgba(83, 83, 83, 1) !important;
}
.main-container {
position: relative;
}
body, .main-content {
background: #fff;
/*background: #4a4f56;*/
/*background: url("../img/bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);*/
background: #fff;
/* right: 0px;
bottom: 0px;
left: 0px;
background-size: cover;
top: 0px;
background-image: url('../img/body_bg3.jpg');*/
}
.page-content {
background: inherit !important;
background: inherit !important;
}
.table-responsive
{
background-color:white;
}
.notification-msg {
white-space: normal;
@ -37,6 +51,15 @@ body, .main-content {
height: 50px;
}
}
.btn-login {
border-radius:7px;
}
.btn-topdown{
border-radius:7px !important;
}
.btn-dropdown {
border-radius:7px !important;
}
/*
.cssSlideUp {
transition: 1s linear all;
@ -101,6 +124,8 @@ body, .main-content {
}
select {
padding-left: 1px !important;
border-radius: 7px;
height:33px;
}
.opacity-zero {
opacity: 0;
@ -141,6 +166,7 @@ select {
border: 2px dashed #D0D0D0;
border-radius: 10px;
padding: 5px 15px 20px 15px;
margin-bottom: 20px;
}
.no-cluster-panel {
text-align: center;
@ -157,11 +183,13 @@ select {
.widget-body .table {
border-top: 0px !important;
}
.widget-main padding-32t
.navbar .navbar-nav > li {
border-style: none;
}
.ace-nav > li {
border-left: none !important;
height: 60px;
}
.new-servers-result {
overflow-y: scroll;
@ -176,7 +204,8 @@ select {
textarea, input[type="text"], input[type="password"] {
-webkit-appearance: none;
/* Remove inner shadow from inputs on mobile iOS */
background: inherit;
/*background: inherit;*/
border-radius: 7px !important;
}
/*
input[type="text"]:focus, input[type="password"]:focus {
@ -188,6 +217,7 @@ input[type="text"]:focus, input[type="password"]:focus {
input.ace[type="checkbox"] + .lbl:before, input.ace[type="radio"] + .lbl:before {
content: "\00A0";
border-radius:4px !important;
}
.progress {
position: relative;
@ -245,6 +275,7 @@ button[disabled] {
margin-bottom: 10px;
background: rgba(0, 0, 0, 0.07);
border: 2px dotted #ddd;
border-radius: 7px;
}
.infobox:hover {
background: rgba(0, 0, 0, 0.2)
@ -275,6 +306,10 @@ button[disabled] {
font-size: 15px;
line-height: 1.5;
padding: 4px 12px;
border-radius:7px !important;
}
.btn-group > .btn {
border-radius: 7px !important;
}
.btn-xs {
padding: 1px 5px !important;
@ -343,7 +378,7 @@ a:active {
.page-header {
border-bottom: 0px !important;
padding-top: 15px;
padding-bottom: 6px;
padding-bottom: 15px;
}
.label {
border-radius: 0.25em !important;
@ -367,7 +402,7 @@ a:active {
margin-top: 26px !important;
}
.input-icon {
margin-top: 5px !important;
/* margin-top: 5px !important;*/
}
.ng-table th.sortable {
cursor: pointer
@ -481,6 +516,7 @@ td.center-align {
.side-padding-20 {
padding-left: 20px !important;
padding-right: 20px !important;
/*padding-top:7px !important;*/
}
.top-margin-14 {
margin-top: 14px;
@ -500,9 +536,12 @@ div.center-align {
.interface-placeholder-margin {
border: 1px solid rgba(190, 210, 219, .5) !important;
min-height: 60px !important;
border-radius: 4px;
background-color:rgba(221, 221, 221, 0.32);
}
.network-margin-border {
border: 1px solid rgba(190, 210, 219, .5) !important;
border-radius:4px;
}
.network-margin {
margin-left: 10px !important;
@ -514,11 +553,13 @@ div.center-align {
.network-background {
background-image: url();
}
/* adjustments to draggable */
.network-draggable {
position: relative;
width: 132px !important;
border-radius: 7px;
}
.external-event {
float: left !important;
@ -541,3 +582,165 @@ div.center-align {
min-height: 50px;
padding: 10px;
}
.wizard-steps li.complete:before, .wizard-steps li.complete .step {
/* border-color: #93cbf9 !important;*/}
.a.wizard-steps li.active:before, .wizard-steps li.active .step {
border-color: #80afd4 !important;
transform: scale(1.25) !important;
font-weight: bold;
}
li.incomplete:before, li.incomplete .step {
border-color: #d15b47 !important;
font-weight: bold;
}
.modal-body
{
padding-top: 30px;
padding-right-value: 20px;
padding-bottom: 0px;
padding-left-value: 20px;
padding-left-ltr-source: physical;
padding-left-rtl-source: physical;
padding-right-ltr-source: physical;
padding-right-rtl-source: physical;
}
.modal-header
{
/*background-color: #EFF3F8;*/
background-image: url('../img/test1.jpg');
}
.bkg-fullscreen
{
/*background-color:#EFF3F8;*/
background-image:url(../img/datacenter.jpg);
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
top: 0px;
}
.bkg-fullscreen:before
{
content:"";
position: fixed;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(68, 57, 170, 0.3);
background-image:none;
opacity: 0.6;
}
.bar-white
{
background-color:white;
}
.page-header h1
{
font-weight:bold;
font-size: 20px !important;
}
.navbar
{
background-image:url(../img/header.png);
/*position: fixed;*/
right: 0px;
bottom: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
top: 0px;
}
.ace-nav > li > a
{
padding: 8px 8px;
}
.modal-footer
{
background-image: url('../img/test1.jpg');
}
.modal-title
{
color:white;
}
.gritter-error .gritter-close
{
color: rgba(192, 116, 80, 1);
}
.gritter-close:hover
{
color:rgba(219, 101, 68, 1) !important;
}
.gritter-item-wrapper.gritter-error
{
background-image: url('../img/grey.png') !important;
background-size: cover;
border-radius: 7px;
opacity: 0.9;
}
.error-text
{
color:rgba(219, 101, 68, 1);
font-size: 20px;
font-weight: bold;
padding-left: 10px;
}
#side
{
position:absolute;
overflow:hidden;
right:30px;
width: 0px;
height: 30%;
content:"";
background:#fff;
}
#side-content
{
position:absolute;
right:0px;
top:5px;
height:100%;
overflow:hidden;
width:200px;
background:#fff;
font-size: 13px;
}
#side-ctrl
{
position: absolute;
right:5px;
top:0px;
height: 1.5%;
width: 15px;
/*background:yellow;*/
}
.label-lg.arrowed:before
{
left: -11px;
}
.glyphicon
{
top:0px;
}
.widget-main
{
padding-top: 25px;
padding-bottom: 5px;
}
.login-form {
background-color: rgba(221, 221, 221, 0.6);
padding: 20px 15px 10px;
}
>>>>>>> Prettify login/wizard/cluster list pages.

BIN
v2/assets/img/README.md Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
v2/assets/img/datacenter.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
v2/assets/img/header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
v2/assets/img/logo-header.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
v2/assets/img/logo-pure.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
v2/assets/img/logo-text.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
v2/assets/img/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

6
v2/src/app/cluster/cluster-all-grid.tpl.html
View File

@ -1,12 +1,12 @@
<div class="col-sm-12 no-padding">
<!--div class="col-lg-3 col-md-4 col-sm-4 col-xs-6 no-padding" style="margin-top:10px" ng-repeat="cluster in clusters | filter:search"-->
<div ng-repeat="cluster in clusters | filter:search" class="pull-left">
<div class="infobox infobox-dark1 action" ng-mouseover="hoverView=true" ng-mouseleave="hoverView=false" ng-class="{'infobox-green': cluster.state == 'SUCCESSFUL', 'infobox-red': cluster.state == 'ERROR', 'infobox-orange': cluster.state == 'INSTALLING', 'infobox-blue': cluster.state == 'INITIALIZED', 'infobox-grey': cluster.state == 'UNINITIALIZED'}" ng-click="goToCluster(cluster.id, cluster.state)">
<div class="infobox infobox-dark1 action" ng-mouseover="hoverView=true" ng-mouseleave="hoverView=false" ng-class="{'infobox-green': cluster.state == 'SUCCESSFUL', 'infobox-blue': cluster.state == 'INITIALIZED', 'infobox-red': cluster.state == 'ERROR', 'infobox-orange': cluster.state == 'INSTALLING', 'infobox-grey': cluster.state == 'UNINITIALIZED'}" ng-click="goToCluster(cluster.id, cluster.state)">
<div class="infobox-icon pull-left">
<i class="ace-icon fa" ng-class="{'fa-thumbs-up': cluster.state == 'SUCCESSFUL', 'fa-thumbs-down': cluster.state == 'ERROR', 'fa-spinner': cluster.state == 'INSTALLING', 'fa-meh-o': cluster.state == 'INITIALIZED', 'fa-cogs': cluster.state == 'UNINITIALIZED'}"></i>
<i class="ace-icon fa" ng-class="{'fa-check': cluster.state == 'SUCCESSFUL', ' fa-times': cluster.state == 'ERROR', 'fa-spinner': cluster.state == 'INSTALLING', ' fa-circle-o': cluster.state == 'INITIALIZED', 'fa-gear': cluster.state == 'UNINITIALIZED'}"></i>
</div>
<div class="pull-left">
<span style="text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15); font-size: 24px; padding-left: 20px;">{{cluster.name}}</span>
<span style="font-size: 22px; padding-left: 20px; text-transform: uppercase;font-family:Impact,'Arial Black','Open-Sans', sans-serif;">{{cluster.name}}</span>
</div>
<div class="clearfix"></div>

8
v2/src/app/cluster/cluster-all-list.tpl.html
View File

@ -59,19 +59,19 @@
</td>
<td sortable="'state'">
<span ng-if="cluster.state == 'SUCCESSFUL'">
<i class="ace-icon fa fa-thumbs-up bigger-160 green"></i>
<i class="ace-icon fa fa fa-check bigger-160 green"></i>
</span>
<span ng-if="cluster.state == 'ERROR'">
<i class="ace-icon fa fa-thumbs-down bigger-160 red"></i>
<i class="ace-icon fa fa-times bigger-160 red"></i>
</span>
<span ng-if="cluster.state == 'INSTALLING'">
<i class="ace-icon fa fa-spinner fa-spin bigger-160 orange"></i>
</span>
<span ng-if="cluster.state == 'INITIALIZED'">
<i class="ace-icon fa fa-meh-o bigger-160 blue"></i>
<i class="ace-icon fa fa-circle-o bigger-160 blue"></i>
</span>
<span ng-if="cluster.state == 'UNINITIALIZED'">
<i class="ace-icon fa fa-cogs bigger-160 grey"></i>
<i class="ace-icon fa fa-gear bigger-160 grey"></i>
</span>
</td>
<td>

3
v2/src/app/cluster/cluster-all.tpl.html
View File

@ -3,7 +3,8 @@
<div class="row">
<div class="col-md-5 no-padding-left">
<h1 class="blue-header">
My Clusters
<span style="font-family:Impact;">My Clusters</span>
<span class="badge badge-yellow">{{clusters.length}}</span>
<small>
<span class="no-border-search">

4
v2/src/app/cluster/cluster-overview.tpl.html
View File

@ -54,7 +54,7 @@
</div>
<div class="pull-right">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-info no-border dropdown-toggle">
<button type="button" class="btn btn-info dropdown-toggle">
Actions
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
</button>
@ -101,7 +101,7 @@
<div>{{column.title}}</div>
</th>
<th>Progress</th>
<th class="align-right">Actions</th>
<th class="align-right"></th>
</tr>
</thead>
<tbody>

40
v2/src/app/login/login.tpl.html
View File

@ -1,20 +1,11 @@
<div class="row login-page">
<div class="col-xs-12">
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
<h1>
<i class="ace-icon fa fa-compass blue"></i>
<span class="blue">Compass</span>
</h1>
</div>
</div>
<div class="bkg-fullscreen">
<div style="margin:0 auto; top:15%; position:relative; width:400px;">
<div class="center">
<img src="assets/img/logo.png" width="200px" style="margin-left: -50px; margin-bottom: 20px"></img>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
<div class="login-box visible widget-box no-border">
<div class="widget-body">
<div class="widget-main">
<form name="loginForm">
</div>
<form class="login-form" name="loginForm" style="border-radius:7px">
<fieldset>
<label class="block clearfix">
<span class="block input-icon input-icon-right">
@ -23,7 +14,7 @@
</span>
</label>
<label class="block clearfix">
<label class="block clearfix" style="margin-top: 5px">
<span class="block input-icon input-icon-right">
<input type="password" placeholder="Password" ng-model="password" class="form-control" required>
<i class="ace-icon fa fa-lock"></i>
@ -47,17 +38,6 @@
<div class="space-4"></div>
</fieldset>
</form>
<div class="space-6"></div>
</div>
<!-- /.widget-main -->
</div>
<!-- /.widget-body -->
</div>
<!-- /.login-box -->
</div>
</div>
</div>
<!-- /.col -->
</div>
</div>

7
v2/src/app/topnav/topnav.tpl.html
View File

@ -1,10 +1,9 @@
<div id="navbar" class="navbar navbar-default">
<div id="navbar-container" class="navbar-container">
<div class="navbar-header pull-left">
<a class="navbar-brand" ui-sref="clusterList">
<i class="fa fa-compass"></i>
Compass
</a>
<a style="height: 50px; width: 200px;" class="navbar-brand" ui-sref="clusterList">
<img src="assets/img/logo-header.png" height="40px">
</a>
<!-- /.brand -->
</div>
<!-- /.navbar-header -->

83
v2/src/app/wizard/network.tpl.html
View File

@ -1,6 +1,6 @@
<div ng-controller="networkCtrl">
<div class="row">
<div collapse="autoFillPanel.isCollapsed" class="dashed-panel">
<div collapse="autoFillPanel.isCollapsed" class="dashed-panel" style="height: auto; background-color: rgba(224, 226, 227, 0.25);">
<span class="action pull-right" ng-click="autoFillPanel.isCollapsed = true;">
<i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
</span>
@ -118,7 +118,7 @@
</span>
<!-- Column Show / Hide button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle">
<button type="button" class="btn btn-default dropdown-toggle" style="border-radius:7px !important;">
Column Show / Hide
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
</button>
@ -211,51 +211,44 @@
</table>
</div>
<div>
<script type="text/ng-template" id="addSubnetModal.html">
< div class = "modal-header" >
< h3 class = "modal-title" >
Subnetwork < /h3>
</div >
< div class = "modal-body" >
< alert ng - repeat = "alert in alerts"
type = "danger"
close = "closeAlert()" > {
{
alert.message
}
} < /alert>
<script type="text/ng-template" id="addSubnetModal.html">
<div class="modal-header">
<h3 class="modal-title" >Subnetwork </h3>
</div >
<div class = "modal-body" >
<alert ng-repeat = "alert in alerts" type = "danger" close = "closeAlert()" >
{{alert.message}}
</alert>
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Subnet</th >
<th> Actions </th>
</tr >
</thead>
<tbody>
<tr ng-repeat="sub in subnetworks">
<td>
<input type="text" ng-model="sub.subnet" placeholder="Subnet" / >
</td>
<td>
<span class="action" ng-click="addSubnetwork()">
<i class="fa fa-plus-circle bigger-140 blue"></i>
</span>
<table class="table table-hover nowrap">
<thead>
<tr>
<th>Subnet</th >
< th > Actions < /th>
</tr >
< /thead>
<tbody>
<tr ng-repeat="sub in subnetworks">
<td>
<input type="text" ng-model="sub.subnet" placeholder="Subnet" / >
< /td>
<td>
<span class="action" ng-click="addSubnetwork()">
<i class="fa fa-plus-circle bigger-140 blue"></i >
< /span>
<span ng-show="subnetworks.length > 1" class="action" ng-click="removeSubnetwork($index)">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
</td>
</tr>
<span ng-show="subnetworks.length > 1" class="action" ng-click="removeSubnetwork($index)">
<i class="fa fa-minus-circle bigger-140 blue"></i >
< /span>
</td >
< /tr>
</tbody >
< /table>
</div >
< div class = "modal-footer" >
< button class = "btn btn-primary"
ng - click = "ok()" > OK < /button>
<button class="btn btn-grey" ng-click="cancel()">Cancel</button >
< /div>
</tbody>
</table>
</div >
<div class = "modal-footer" >
<button class = "btn btn-primary" ng - click = "ok()" > OK </button>
<button class="btn btn-grey" ng-click="cancel()">Cancel</button>
</div>
</script>
</div>
</div>

4
v2/src/app/wizard/network_mapping.tpl.html
View File

@ -13,7 +13,7 @@
(Promisc)
</span>
<div ui-on-Drop="onDrop($event, interface_key)" drag-hover-class="drag-enter" drop-channel="{{interface_value.dropChannel}}" class="interface-placeholder interface-placeholder-margin">
<div ng-repeat="(network_key, network_value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, network_key, networking)" drag-channel="{{network_value.dragChannel}}" class="external-event label-purple ui-draggable network-draggable margin-right-5" ng-if="network_value.mapping_interface==interface_key">
<div ng-repeat="(network_key, network_value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, network_key, networking)" drag-channel="{{network_value.dragChannel}}" class="external-event ui-draggable network-draggable margin-right-5" ng-class="{'label-pink': network_key == 'management', 'label-success': network_key =='tenant', 'label-purple': network_key == 'public', 'label-warning': network_key == 'storage'}" ng-if="network_value.mapping_interface==interface_key">
<i class="ace-icon fa fa-arrows"></i>
{{network_value.display}}
</div>
@ -35,7 +35,7 @@
<div class="widget-body">
<div class="widget-main network-background">
<div ui-on-Drop="onDrop($event, interface_key)" drag-hover-class="drag-enter" class="network-placeholder network-margin-border" drop-channel="E">
<div ng-repeat="(key, value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, key, networking);" class="external-event label-purple ui-draggable network-draggable network-margin margin-right-20" drag-channel="{{value.dragChannel}}" ng-if="!value.mapping_interface">
<div ng-repeat="(key, value) in networking" ui-draggable="true" on-drop-success="dropSuccessHandler($event, key, networking);" class="external-event ui-draggable network-draggable network-margin margin-right-20" ng-class="{'label-pink': key == 'management', 'label-success': key =='tenant', 'label-purple': key == 'public', 'label-warning': key == 'storage'}" drag-channel="{{value.dragChannel}}" ng-if="!value.mapping_interface">
<i class="ace-icon fa fa-arrows"></i>
{{value.display}}
</div>

12
v2/src/app/wizard/partition.tpl.html
View File

@ -22,9 +22,9 @@
<input ng-model="newPartition.max_size" type="text" placeholder="Max Size" class="input-medium">
</td>
<td>
<button ng-click="addPartition()" class="btn btn-sm btn-info" type="button">
Add
</button>
<span ng-click="addPartition()" class="action" >
<i class="fa fa-plus-circle bigger-140 blue"S></i>
</span>
</td>
</tr>
<tr ng-repeat="(key, data) in partition">
@ -45,9 +45,9 @@
<i class="ace-icon fa fa-pencil bigger-120"></i>
</button>
<!--delete button-->
<button ng-hide="editPartitionMode" ng-click="editPartitionMode = true; deletePartition(key)" class="btn btn-xs btn-black-white btn-trash-hover border-radius-4">
<i class="ace-icon fa fa-trash-o bigger-120"></i>
</button>
<span ng-hide="editPartitionMode" ng-click="editPartitionMode = true; deletePartition(key)" class="action border-radius-4">
<i class="fa fa-minus-circle bigger-140 blue"></i>
</span>
<!--save button-->
<button ng-show="editPartitionMode" ng-click="editPartitionMode = false;" class="btn btn-xs btn-black-white btn-topmargin-8 btn-sumbit-hover border-radius-4">
<i class="ace-icon fa fa-check bigger-120"></i>

2
v2/src/app/wizard/review.tpl.html
View File

@ -1,3 +1,5 @@
<div ng-controller="reviewCtrl">
<div class="row">
<div class="col-sm-12">

2
v2/src/app/wizard/role_assignment.tpl.html
View File

@ -1,6 +1,6 @@
<div ng-controller="roleAssignCtrl">
<div class="row">
<div collapse="autoAssignRoles.isCollapsed" class="dashed-panel">
<div collapse="autoAssignRoles.isCollapsed" class="dashed-panel" style="background-color: rgba(224, 226, 227, 0.25);">
<span class="action pull-right" ng-click="autoAssignRoles.isCollapsed = true;">
<i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
</span>