x/compass-web
Code Issues Proposed changes

Fix multiple responsive css

Browse Source 
Update ace css

Change-Id: I0deecd369bcdbb093b33d2a1ef8df351ba3dfde0
This commit is contained in:
jiahuay 2014-08-05 10:44:32 -07:00
parent aa466d9e79
commit ef07cb53bb
13 changed files with 4167 additions and 4113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8065
v2/assets/css/ace.min.css vendored
View File

File diff suppressed because it is too large Load Diff

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

@ -1,6 +1,7 @@
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
min-width: 768px;
}
.notification-msg {
white-space: normal;
@ -8,6 +9,14 @@ html {
.nav-list > li.open .submenu {
display: block;
}
.table > tbody > tr > td {
vertical-align: middle;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.table > tbody > tr {
height: 50px;
}
}
/*
.cssSlideUp {
transition: 1s linear all;
@ -57,7 +66,7 @@ html {
vertical-align: baseline;
white-space: nowrap;
}
.cluster-search {
.no-border-search {
padding-left: 10px;
margin-left: 10px;
border-left: 1px solid rgb(216, 216, 216);
@ -118,6 +127,9 @@ select {
.navbar .navbar-nav > li {
border-style: none;
}
.ace-nav > li {
border-left: none !important;
}
.new-servers-result {
overflow-y: scroll;
max-height:400px
@ -128,6 +140,18 @@ select {
.border-radius-4 {
border-radius: 4px !important;
}
/* Remove inner shadow from inputs on mobile iOS */
textarea, input[type="text"], input[type="password"] {
-webkit-appearance: none;
}
/* Fix ace checkbox/radio css */
input.ace[type="checkbox"] + .lbl:before, input.ace[type="radio"] + .lbl:before {
content: "\00A0";
}
.progress {
position: relative;
}
.btn-black-white {
border: none !important;
background-color: inherit!important;
@ -185,8 +209,9 @@ a:active {
color: #0000FF;
}
.page-header {
padding-left: 15px;
padding-right: 15px;
border-bottom: 0px !important;
padding-top: 15px;
padding-bottom: 6px;
}
.label {
border-radius: 0.25em !important;

2
v2/index.html
View File

@ -4,7 +4,7 @@
<head>
<title>Compass</title>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0" name="viewport">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="vendor/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="vendor/rickshaw/rickshaw.min.css" />

1
v2/src/app/appDev.js
View File

@ -755,6 +755,7 @@ compassAppDev.run(function($httpBackend, settings, $http) {
for (var i = 1; i <= num; i++) {
var host = {
"id": i,
"host_id": i,
"machine_id": i * 2 + 10,
"hostname": "host-" + i,
"mac": "28.e5.ee.47.14." + (i < 10 ? "a" : "") + i,

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

@ -4,7 +4,7 @@
<h1 class="blue-header">
My Clusters
<small>
<span class="cluster-search">
<span class="no-border-search">
<span class="input-icon">
<input class="no-border" type="text" placeholder="Search" ng-model="search.$">
<i class="ace-icon fa fa-search" style="top:-2px"></i>
@ -21,11 +21,6 @@
Create New Cluster
</button>
</span>
<!--span id="nav-search" class="nav-search">
<form class="form-search">
</form>
</span-->
</div>
</div>
<div class="space-10"></div>
@ -99,7 +94,12 @@
</span>
</td>
<td>
{{cluster.progress}}
<span ng-if="cluster.progress">
Total: {{cluster.progress.total_hosts}} <br>
Installing: {{cluster.progress.installing_hosts}} <br>
Completed: {{cluster.progress.completed_hosts}} <br>
Failed: {{cluster.progress.failed_hosts}}
</span>
</td>
<td sortable="'distributed_system_name'">
{{cluster.distributed_system_name}}

130
v2/src/app/cluster/cluster-nav.tpl.html
View File

@ -1,67 +1,67 @@
<div class="sidebar responsive">
<ul class="nav nav-list">
<li ng-class="{active:state.includes('cluster.overview')}">
<a ui-sref="cluster.overview">
<i class="menu-icon fa fa-tachometer"></i>
Overview
</a>
</li>
<li ng-class="{'active open':state.includes('cluster.monitoring')}">
<a href ng-click="isMonitoringNavOpen = !isMonitoringNavOpen">
<i class="menu-icon fa fa-bar-chart-o"></i>
Monitoring
<b class="arrow fa fa-angle-down"></b>
</a>
<ul class="submenu cssFade" ng-hide="isMonitoringNavOpen">
<li ng-repeat="nav in monitoringNav" ng-class="{active:state.includes('{{nav.name}}')}">
<a ui-sref="{{nav.name}}">
<i class="menu-icon fa fa-caret-right"></i>
{{nav.display}}
</a>
</li>
</ul>
</li>
<li ng-class="{'active open':state.includes('cluster.config')}">
<a href ng-click="isConfigNavOpen = !isConfigNavOpen">
<i class="menu-icon fa fa-cog"></i>
<span class="menu-text">configurations</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<ul class="submenu cssFade" ng-hide="isConfigNavOpen">
<li ng-class="{active:state.includes('cluster.config.security')}">
<a ui-sref="cluster.config.security">
<i class="menu-icon fa fa-caret-right"></i>
Security
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.network')}">
<a ui-sref="cluster.config.network">
<i class="menu-icon fa fa-caret-right"></i>
Network
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.partition')}">
<a ui-sref="cluster.config.partition">
<i class="menu-icon fa fa-caret-right"></i>
Partition
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.roles')}">
<a ui-sref="cluster.config.roles">
<i class="menu-icon fa fa-caret-right"></i>
Roles
</a>
</li>
</ul>
</li>
<li ng-class="{active:state.includes('cluster.log')}">
<a ui-sref="cluster.log">
<i class="menu-icon fa fa-list-alt"></i>
Log
</a>
</li>
<ul class="nav nav-list">
<li ng-class="{active:state.includes('cluster.overview')}">
<a ui-sref="cluster.overview">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text">Overview</span>
</a>
</li>
<li ng-class="{'active open':state.includes('cluster.monitoring')}">
<a href ng-click="isMonitoringNavOpen = !isMonitoringNavOpen">
<i class="menu-icon fa fa-bar-chart-o"></i>
<span class="menu-text">Monitoring</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<ul class="submenu" ng-show="isMonitoringNavOpen" style="display: block">
<li ng-repeat="nav in monitoringNav" ng-class="{active:state.includes('{{nav.name}}')}">
<a ui-sref="{{nav.name}}">
<i class="menu-icon fa fa-caret-right"></i>
{{nav.display}}
</a>
</li>
</ul>
</li>
<li ng-class="{'active open':state.includes('cluster.config')}">
<a href ng-click="isConfigNavOpen = !isConfigNavOpen">
<i class="menu-icon fa fa-cog"></i>
<span class="menu-text">configurations</span>
<b class="arrow fa fa-angle-down"></b>
</a>
<ul class="submenu" ng-show="isConfigNavOpen" style="display: block">
<li ng-class="{active:state.includes('cluster.config.security')}">
<a ui-sref="cluster.config.security">
<i class="menu-icon fa fa-caret-right"></i>
Security
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.network')}">
<a ui-sref="cluster.config.network">
<i class="menu-icon fa fa-caret-right"></i>
Network
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.partition')}">
<a ui-sref="cluster.config.partition">
<i class="menu-icon fa fa-caret-right"></i>
Partition
</a>
</li>
<li ng-class="{active:state.includes('cluster.config.roles')}">
<a ui-sref="cluster.config.roles">
<i class="menu-icon fa fa-caret-right"></i>
Roles
</a>
</li>
</ul>
</li>
<li ng-class="{active:state.includes('cluster.log')}">
<a ui-sref="cluster.log">
<i class="menu-icon fa fa-list-alt"></i>
<span class="menu-text">Log</span>
</a>
</li>
</ul>
<!-- /.nav-list -->
</ul>
</div>
<div class="sidebar-toggle sidebar-collapse" ng-click="sidebarCollapse = !sidebarCollapse">
<i class="ace-icon fa fa-angle-double-left" ng-class="{'fa-angle-double-right': sidebarCollapse}"></i>
</div>

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

@ -31,7 +31,7 @@
<div class="col-xs-12">
<div>
<div class="pull-left">
<span class="input-icon">{{search}}
<span class="input-icon">
<input type="text" placeholder="Search" ng-model="search">
<i class="ace-icon fa fa-search blue"></i>
</span>
@ -127,7 +127,7 @@
</span>
</td>
<td>
<hostprogressbar hostid="host.id" clusterid="clusterId" clusterstate="clusterProgress.state" progressdata="">
<hostprogressbar hostid="host.host_id" clusterid="clusterId" clusterstate="clusterProgress.state" progressdata="">
</hostprogressbar>
</td>
<td class="align-right">

2
v2/src/app/cluster/cluster.tpl.html
View File

@ -1,4 +1,4 @@
<div clusternav></div>
<div clusternav class="sidebar responsive" ng-class="{'menu-min': sidebarCollapse}"></div>
<div class="main-content">
<div class="page-content">
<div ui-view></div>

3
v2/src/app/cluster/clusterlist.js
View File

@ -21,7 +21,8 @@ var app = angular.module('compass.clusterlist', [
clusters = data;
angular.forEach(clusters, function(cluster) {
dataService.getClusterProgress(cluster.id).success(function(data) {
cluster.progress = "Total: " + data.status.total_hosts + " |" + " Installing: " + data.status.installing_hosts + " |" + " Completed: " + data.status.completed_hosts + " |" + " Failed: " + data.status.failed_hosts;
cluster.progress = data.status;
//cluster.progress = "Total: " + data.status.total_hosts + " |" + " Installing: " + data.status.installing_hosts + " |" + " Completed: " + data.status.completed_hosts + " |" + " Failed: " + data.status.failed_hosts;
cluster.state = data.state;
});

15
v2/src/app/server/server-list.tpl.html
View File

@ -3,6 +3,16 @@
<h1 class="blue-header">
Discovered Servers&nbsp;
<span class="badge">{{allservers.length}}</span>
<small>
<span class="no-border-search">
<span class="input-icon">
<input class="no-border" type="text" placeholder="Search" ng-model="search.$">
<i class="ace-icon fa fa-search" style="top:-2px"></i>
</span>
</span>
</small>
</h1>
</div>
<div class="row">
@ -16,11 +26,6 @@
</div>
<div class="row">
<div class="pull-left top-margin-14 center-align">
<!--Search Input-->
<span class="input-icon margin-right-5">
<input type="text" placeholder="Search" ng-model="search.$">
<i class="ace-icon fa fa-search blue"></i>
</span>
<!-- Column Show / Hide button -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-white btn-default dropdown-toggle">

2
v2/src/app/services.js
View File

@ -367,7 +367,7 @@ angular.module('compass.services', [])
.service('authService', ['$http', 'dataService',
function($http, dataService) {
this.isAuthenticated = true;
this.isAuthenticated = false;
this.setLogin = function(isLogin) {
this.isAuthenticated = isLogin;

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

@ -8,9 +8,9 @@
</div>
<!-- /.navbar-header -->
<nav class="navbar-menu pull-left collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li class="">
<nav class="navbar-header pull-left" role="navigation">
<ul class="nav ace-nav">
<li class="transparent">
<a data-toggle="dropdown" class="dropdown-toggle" href="">
Clusters&nbsp;
<small>
@ -41,7 +41,7 @@
</ul>
</li>
<li>
<li class="transparent">
<a ui-sref="serverList">
Discovered Servers
</a>

3
v2/src/app/wizard/wizard.tpl.html
View File

@ -11,7 +11,7 @@
<span class="title">{{step.title}}</span>
</li>
</ul>
<div class="space-10"></div>
<div class="widget-box">
<div class="widget-header widget-header-flat widget-header-small">
@ -28,6 +28,7 @@
</div>
</div>
</div>
<div class="space-10"></div>
<div class="wizard-actions">
<div class="inline" ng-class="{'first-prev' : currentStep == 1}">