Prettify login/wizard/cluster list pages.
Change-Id: If2a0fb8cd0e3f02d8601faf4f95b2b77de6c2e52
|
@ -0,0 +1,3 @@
|
||||||
|
*~
|
||||||
|
*.swp
|
||||||
|
.DS_Store
|
|
@ -4,21 +4,35 @@ html {
|
||||||
overflow-x: scroll;
|
overflow-x: scroll;
|
||||||
font-size: 14px !important;
|
font-size: 14px !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
font-family: "Trebuchet MS", san sarif !important;
|
||||||
|
color:rgba(83, 83, 83, 1) !important;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
min-width: 1024px;
|
min-width: 1024px;
|
||||||
font-size: 14px !important;
|
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 {
|
.main-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
body, .main-content {
|
body, .main-content {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
/*background: #4a4f56;*/
|
/* right: 0px;
|
||||||
/*background: url("../img/bg.png") repeat scroll 0 0 rgba(0, 0, 0, 0);*/
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
background-size: cover;
|
||||||
|
top: 0px;
|
||||||
|
background-image: url('../img/body_bg3.jpg');*/
|
||||||
}
|
}
|
||||||
.page-content {
|
.page-content {
|
||||||
background: inherit !important;
|
background: inherit !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-responsive
|
||||||
|
{
|
||||||
|
background-color:white;
|
||||||
}
|
}
|
||||||
.notification-msg {
|
.notification-msg {
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
|
@ -37,6 +51,15 @@ body, .main-content {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.btn-login {
|
||||||
|
border-radius:7px;
|
||||||
|
}
|
||||||
|
.btn-topdown{
|
||||||
|
border-radius:7px !important;
|
||||||
|
}
|
||||||
|
.btn-dropdown {
|
||||||
|
border-radius:7px !important;
|
||||||
|
}
|
||||||
/*
|
/*
|
||||||
.cssSlideUp {
|
.cssSlideUp {
|
||||||
transition: 1s linear all;
|
transition: 1s linear all;
|
||||||
|
@ -101,6 +124,8 @@ body, .main-content {
|
||||||
}
|
}
|
||||||
select {
|
select {
|
||||||
padding-left: 1px !important;
|
padding-left: 1px !important;
|
||||||
|
border-radius: 7px;
|
||||||
|
height:33px;
|
||||||
}
|
}
|
||||||
.opacity-zero {
|
.opacity-zero {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
@ -141,6 +166,7 @@ select {
|
||||||
border: 2px dashed #D0D0D0;
|
border: 2px dashed #D0D0D0;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
padding: 5px 15px 20px 15px;
|
padding: 5px 15px 20px 15px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
.no-cluster-panel {
|
.no-cluster-panel {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -157,11 +183,13 @@ select {
|
||||||
.widget-body .table {
|
.widget-body .table {
|
||||||
border-top: 0px !important;
|
border-top: 0px !important;
|
||||||
}
|
}
|
||||||
|
.widget-main padding-32t
|
||||||
.navbar .navbar-nav > li {
|
.navbar .navbar-nav > li {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
}
|
}
|
||||||
.ace-nav > li {
|
.ace-nav > li {
|
||||||
border-left: none !important;
|
border-left: none !important;
|
||||||
|
height: 60px;
|
||||||
}
|
}
|
||||||
.new-servers-result {
|
.new-servers-result {
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
|
@ -176,7 +204,8 @@ select {
|
||||||
textarea, input[type="text"], input[type="password"] {
|
textarea, input[type="text"], input[type="password"] {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
/* Remove inner shadow from inputs on mobile iOS */
|
/* Remove inner shadow from inputs on mobile iOS */
|
||||||
background: inherit;
|
/*background: inherit;*/
|
||||||
|
border-radius: 7px !important;
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
input[type="text"]:focus, input[type="password"]:focus {
|
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 {
|
input.ace[type="checkbox"] + .lbl:before, input.ace[type="radio"] + .lbl:before {
|
||||||
content: "\00A0";
|
content: "\00A0";
|
||||||
|
border-radius:4px !important;
|
||||||
}
|
}
|
||||||
.progress {
|
.progress {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -245,6 +275,7 @@ button[disabled] {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background: rgba(0, 0, 0, 0.07);
|
background: rgba(0, 0, 0, 0.07);
|
||||||
border: 2px dotted #ddd;
|
border: 2px dotted #ddd;
|
||||||
|
border-radius: 7px;
|
||||||
}
|
}
|
||||||
.infobox:hover {
|
.infobox:hover {
|
||||||
background: rgba(0, 0, 0, 0.2)
|
background: rgba(0, 0, 0, 0.2)
|
||||||
|
@ -275,6 +306,10 @@ button[disabled] {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding: 4px 12px;
|
padding: 4px 12px;
|
||||||
|
border-radius:7px !important;
|
||||||
|
}
|
||||||
|
.btn-group > .btn {
|
||||||
|
border-radius: 7px !important;
|
||||||
}
|
}
|
||||||
.btn-xs {
|
.btn-xs {
|
||||||
padding: 1px 5px !important;
|
padding: 1px 5px !important;
|
||||||
|
@ -343,7 +378,7 @@ a:active {
|
||||||
.page-header {
|
.page-header {
|
||||||
border-bottom: 0px !important;
|
border-bottom: 0px !important;
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
.label {
|
.label {
|
||||||
border-radius: 0.25em !important;
|
border-radius: 0.25em !important;
|
||||||
|
@ -367,7 +402,7 @@ a:active {
|
||||||
margin-top: 26px !important;
|
margin-top: 26px !important;
|
||||||
}
|
}
|
||||||
.input-icon {
|
.input-icon {
|
||||||
margin-top: 5px !important;
|
/* margin-top: 5px !important;*/
|
||||||
}
|
}
|
||||||
.ng-table th.sortable {
|
.ng-table th.sortable {
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
@ -481,6 +516,7 @@ td.center-align {
|
||||||
.side-padding-20 {
|
.side-padding-20 {
|
||||||
padding-left: 20px !important;
|
padding-left: 20px !important;
|
||||||
padding-right: 20px !important;
|
padding-right: 20px !important;
|
||||||
|
/*padding-top:7px !important;*/
|
||||||
}
|
}
|
||||||
.top-margin-14 {
|
.top-margin-14 {
|
||||||
margin-top: 14px;
|
margin-top: 14px;
|
||||||
|
@ -500,9 +536,12 @@ div.center-align {
|
||||||
.interface-placeholder-margin {
|
.interface-placeholder-margin {
|
||||||
border: 1px solid rgba(190, 210, 219, .5) !important;
|
border: 1px solid rgba(190, 210, 219, .5) !important;
|
||||||
min-height: 60px !important;
|
min-height: 60px !important;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color:rgba(221, 221, 221, 0.32);
|
||||||
}
|
}
|
||||||
.network-margin-border {
|
.network-margin-border {
|
||||||
border: 1px solid rgba(190, 210, 219, .5) !important;
|
border: 1px solid rgba(190, 210, 219, .5) !important;
|
||||||
|
border-radius:4px;
|
||||||
}
|
}
|
||||||
.network-margin {
|
.network-margin {
|
||||||
margin-left: 10px !important;
|
margin-left: 10px !important;
|
||||||
|
@ -514,11 +553,13 @@ div.center-align {
|
||||||
.network-background {
|
.network-background {
|
||||||
background-image: url();
|
background-image: url();
|
||||||
}
|
}
|
||||||
|
|
||||||
/* adjustments to draggable */
|
/* adjustments to draggable */
|
||||||
|
|
||||||
.network-draggable {
|
.network-draggable {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 132px !important;
|
width: 132px !important;
|
||||||
|
border-radius: 7px;
|
||||||
}
|
}
|
||||||
.external-event {
|
.external-event {
|
||||||
float: left !important;
|
float: left !important;
|
||||||
|
@ -541,3 +582,165 @@ div.center-align {
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
padding: 10px;
|
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.
|
||||||
|
|
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 1.1 MiB |
After Width: | Height: | Size: 32 KiB |
After Width: | Height: | Size: 31 KiB |
After Width: | Height: | Size: 24 KiB |
After Width: | Height: | Size: 3.0 KiB |
After Width: | Height: | Size: 32 KiB |
|
@ -1,12 +1,12 @@
|
||||||
<div class="col-sm-12 no-padding">
|
<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 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 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">
|
<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>
|
||||||
<div class="pull-left">
|
<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>
|
||||||
<div class="clearfix"></div>
|
<div class="clearfix"></div>
|
||||||
|
|
||||||
|
|
|
@ -59,19 +59,19 @@
|
||||||
</td>
|
</td>
|
||||||
<td sortable="'state'">
|
<td sortable="'state'">
|
||||||
<span ng-if="cluster.state == 'SUCCESSFUL'">
|
<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>
|
||||||
<span ng-if="cluster.state == 'ERROR'">
|
<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>
|
||||||
<span ng-if="cluster.state == 'INSTALLING'">
|
<span ng-if="cluster.state == 'INSTALLING'">
|
||||||
<i class="ace-icon fa fa-spinner fa-spin bigger-160 orange"></i>
|
<i class="ace-icon fa fa-spinner fa-spin bigger-160 orange"></i>
|
||||||
</span>
|
</span>
|
||||||
<span ng-if="cluster.state == 'INITIALIZED'">
|
<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>
|
||||||
<span ng-if="cluster.state == 'UNINITIALIZED'">
|
<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>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-5 no-padding-left">
|
<div class="col-md-5 no-padding-left">
|
||||||
<h1 class="blue-header">
|
<h1 class="blue-header">
|
||||||
My Clusters
|
<span style="font-family:Impact;">My Clusters</span>
|
||||||
|
|
||||||
<span class="badge badge-yellow">{{clusters.length}}</span>
|
<span class="badge badge-yellow">{{clusters.length}}</span>
|
||||||
<small>
|
<small>
|
||||||
<span class="no-border-search">
|
<span class="no-border-search">
|
||||||
|
|
|
@ -54,7 +54,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="pull-right">
|
<div class="pull-right">
|
||||||
<div class="btn-group" dropdown>
|
<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
|
Actions
|
||||||
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -101,7 +101,7 @@
|
||||||
<div>{{column.title}}</div>
|
<div>{{column.title}}</div>
|
||||||
</th>
|
</th>
|
||||||
<th>Progress</th>
|
<th>Progress</th>
|
||||||
<th class="align-right">Actions</th>
|
<th class="align-right"></th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
|
|
|
@ -1,20 +1,11 @@
|
||||||
<div class="row login-page">
|
<div class="bkg-fullscreen">
|
||||||
<div class="col-xs-12">
|
<div style="margin:0 auto; top:15%; position:relative; width:400px;">
|
||||||
<div class="row">
|
<div class="center">
|
||||||
<div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
|
<img src="assets/img/logo.png" width="200px" style="margin-left: -50px; margin-bottom: 20px"></img>
|
||||||
<h1>
|
|
||||||
<i class="ace-icon fa fa-compass blue"></i>
|
|
||||||
<span class="blue">Compass</span>
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row">
|
</div>
|
||||||
<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">
|
<form class="login-form" name="loginForm" style="border-radius:7px">
|
||||||
<div class="widget-body">
|
|
||||||
<div class="widget-main">
|
|
||||||
<form name="loginForm">
|
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<label class="block clearfix">
|
<label class="block clearfix">
|
||||||
<span class="block input-icon input-icon-right">
|
<span class="block input-icon input-icon-right">
|
||||||
|
@ -23,7 +14,7 @@
|
||||||
</span>
|
</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="block clearfix">
|
<label class="block clearfix" style="margin-top: 5px">
|
||||||
<span class="block input-icon input-icon-right">
|
<span class="block input-icon input-icon-right">
|
||||||
<input type="password" placeholder="Password" ng-model="password" class="form-control" required>
|
<input type="password" placeholder="Password" ng-model="password" class="form-control" required>
|
||||||
<i class="ace-icon fa fa-lock"></i>
|
<i class="ace-icon fa fa-lock"></i>
|
||||||
|
@ -47,17 +38,6 @@
|
||||||
<div class="space-4"></div>
|
<div class="space-4"></div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
|
</div>
|
||||||
<div class="space-6"></div>
|
|
||||||
</div>
|
|
||||||
<!-- /.widget-main -->
|
|
||||||
</div>
|
|
||||||
<!-- /.widget-body -->
|
|
||||||
</div>
|
|
||||||
<!-- /.login-box -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- /.col -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,10 +1,9 @@
|
||||||
<div id="navbar" class="navbar navbar-default">
|
<div id="navbar" class="navbar navbar-default">
|
||||||
<div id="navbar-container" class="navbar-container">
|
<div id="navbar-container" class="navbar-container">
|
||||||
<div class="navbar-header pull-left">
|
<div class="navbar-header pull-left">
|
||||||
<a class="navbar-brand" ui-sref="clusterList">
|
<a style="height: 50px; width: 200px;" class="navbar-brand" ui-sref="clusterList">
|
||||||
<i class="fa fa-compass"></i>
|
<img src="assets/img/logo-header.png" height="40px">
|
||||||
Compass
|
</a>
|
||||||
</a>
|
|
||||||
<!-- /.brand -->
|
<!-- /.brand -->
|
||||||
</div>
|
</div>
|
||||||
<!-- /.navbar-header -->
|
<!-- /.navbar-header -->
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div ng-controller="networkCtrl">
|
<div ng-controller="networkCtrl">
|
||||||
<div class="row">
|
<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;">
|
<span class="action pull-right" ng-click="autoFillPanel.isCollapsed = true;">
|
||||||
<i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
|
<i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
|
||||||
</span>
|
</span>
|
||||||
|
@ -118,7 +118,7 @@
|
||||||
</span>
|
</span>
|
||||||
<!-- Column Show / Hide button -->
|
<!-- Column Show / Hide button -->
|
||||||
<div class="btn-group" dropdown>
|
<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
|
Column Show / Hide
|
||||||
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
<span class="ace-icon fa fa-caret-down icon-on-right"></span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -211,51 +211,44 @@
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<script type="text/ng-template" id="addSubnetModal.html">
|
<script type="text/ng-template" id="addSubnetModal.html">
|
||||||
< div class = "modal-header" >
|
<div class="modal-header">
|
||||||
< h3 class = "modal-title" >
|
<h3 class="modal-title" >Subnetwork </h3>
|
||||||
Subnetwork < /h3>
|
</div >
|
||||||
</div >
|
<div class = "modal-body" >
|
||||||
< div class = "modal-body" >
|
<alert ng-repeat = "alert in alerts" type = "danger" close = "closeAlert()" >
|
||||||
< alert ng - repeat = "alert in alerts"
|
{{alert.message}}
|
||||||
type = "danger"
|
</alert>
|
||||||
close = "closeAlert()" > {
|
<table class="table table-hover nowrap">
|
||||||
{
|
<thead>
|
||||||
alert.message
|
<tr>
|
||||||
}
|
<th>Subnet</th >
|
||||||
} < /alert>
|
<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">
|
<span ng-show="subnetworks.length > 1" class="action" ng-click="removeSubnetwork($index)">
|
||||||
<thead>
|
<i class="fa fa-minus-circle bigger-140 blue"></i>
|
||||||
<tr>
|
</span>
|
||||||
<th>Subnet</th >
|
</td>
|
||||||
< th > Actions < /th>
|
</tr>
|
||||||
</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)">
|
</tbody>
|
||||||
<i class="fa fa-minus-circle bigger-140 blue"></i >
|
</table>
|
||||||
< /span>
|
</div >
|
||||||
</td >
|
<div class = "modal-footer" >
|
||||||
< /tr>
|
<button class = "btn btn-primary" ng - click = "ok()" > OK </button>
|
||||||
|
<button class="btn btn-grey" ng-click="cancel()">Cancel</button>
|
||||||
</tbody >
|
</div>
|
||||||
< /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>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
(Promisc)
|
(Promisc)
|
||||||
</span>
|
</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 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>
|
<i class="ace-icon fa fa-arrows"></i>
|
||||||
{{network_value.display}}
|
{{network_value.display}}
|
||||||
</div>
|
</div>
|
||||||
|
@ -35,7 +35,7 @@
|
||||||
<div class="widget-body">
|
<div class="widget-body">
|
||||||
<div class="widget-main network-background">
|
<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 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>
|
<i class="ace-icon fa fa-arrows"></i>
|
||||||
{{value.display}}
|
{{value.display}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -22,9 +22,9 @@
|
||||||
<input ng-model="newPartition.max_size" type="text" placeholder="Max Size" class="input-medium">
|
<input ng-model="newPartition.max_size" type="text" placeholder="Max Size" class="input-medium">
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<button ng-click="addPartition()" class="btn btn-sm btn-info" type="button">
|
<span ng-click="addPartition()" class="action" >
|
||||||
Add
|
<i class="fa fa-plus-circle bigger-140 blue"S></i>
|
||||||
</button>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr ng-repeat="(key, data) in partition">
|
<tr ng-repeat="(key, data) in partition">
|
||||||
|
@ -45,9 +45,9 @@
|
||||||
<i class="ace-icon fa fa-pencil bigger-120"></i>
|
<i class="ace-icon fa fa-pencil bigger-120"></i>
|
||||||
</button>
|
</button>
|
||||||
<!--delete 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">
|
<span ng-hide="editPartitionMode" ng-click="editPartitionMode = true; deletePartition(key)" class="action border-radius-4">
|
||||||
<i class="ace-icon fa fa-trash-o bigger-120"></i>
|
<i class="fa fa-minus-circle bigger-140 blue"></i>
|
||||||
</button>
|
</span>
|
||||||
<!--save button-->
|
<!--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">
|
<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>
|
<i class="ace-icon fa fa-check bigger-120"></i>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
|
||||||
|
|
||||||
<div ng-controller="reviewCtrl">
|
<div ng-controller="reviewCtrl">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div ng-controller="roleAssignCtrl">
|
<div ng-controller="roleAssignCtrl">
|
||||||
<div class="row">
|
<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;">
|
<span class="action pull-right" ng-click="autoAssignRoles.isCollapsed = true;">
|
||||||
<i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
|
<i class="ace-icon fa fa-times-circle bigger-120 light-grey"></i>
|
||||||
</span>
|
</span>
|
||||||
|
|