Fix broken network topology css
Fixes toggle button, puts icon and changes bgcolor. Changes the position of "Add interface" button in balloon. Remove networktopology css from horizon.scss Co-Authored-By: Lin Hua Cheng <os.lcheng@gmail.com> Change-Id: I7c917ed6cd12481fde961320dcfa76e409c51e4c Closes-Bug: 1351395 Partially-Implements: blueprint css-breakdown
This commit is contained in:
Toshi Hayashi
lin-hua-cheng
parent
f4674f3a02
commit
004db117f2
|
|
@ -148,8 +148,10 @@ horizon.network_topology = {
|
|||
}
|
||||
$('.toggleView > .btn').each(function(){
|
||||
var $this = $(this);
|
||||
if($this.hasClass(self.draw_mode)) {
|
||||
if($this.data('value') === self.draw_mode) {
|
||||
$this.addClass('active');
|
||||
} else {
|
||||
$this.removeClass('active');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -22,7 +22,6 @@
|
|||
[[/console_id]]
|
||||
{% endif %}
|
||||
</div>
|
||||
<a class="add-interface btn btn-primary btn-xs ajax-modal [[type]]" href="[[add_interface_url]]">[[add_interface_label]]</a>
|
||||
<div class="cell delete">
|
||||
<button class="delete-device btn btn-danger btn-xs [[type]]" data-type="[[type]]" data-device-id="[[id]]">[[delete_label]]</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,17 @@
|
|||
|
||||
{% block template %}
|
||||
{% jstemplate %}
|
||||
<div class="portTableHeader">
|
||||
<div class="title">[[interfaces_label]]</div>
|
||||
<div class="action">
|
||||
<a class="add-interface btn btn-default btn-xs ajax-modal [[type]]" href="[[add_interface_url]]">
|
||||
<span class="fa fa-plus"></span>
|
||||
[[add_interface_label]]
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<table class="detailInfoTable">
|
||||
<caption>[[interfaces_label]]</caption>
|
||||
<caption></caption>
|
||||
<tbody>
|
||||
[[#port]]
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,18 @@
|
|||
{% include "project/network_topology/client_side/_balloon_port.html" %}
|
||||
|
||||
<div class="topologyNavi">
|
||||
<div class="toggleView btn-group" data-toggle="buttons-radio">
|
||||
<button type="button" class="btn small" data-value="small"><i class="fa fa-th"></i>{% trans "Small" %}</button>
|
||||
<button type="button" class="btn normal" data-value="normal"><i class="fa fa-th-large"></i>{% trans "Normal" %}</button>
|
||||
<div class="toggleView btn-group" data-toggle="buttons">
|
||||
<label class="btn btn-default" data-value="small">
|
||||
<input type="radio" name="options" id="option1" checked>
|
||||
<span class="fa fa-th"></span>
|
||||
{% trans "Small" %}
|
||||
</label>
|
||||
<label class="btn btn-default" data-value="normal">
|
||||
<input type="radio" name="options" id="option2">
|
||||
<span class="fa fa-th-large"></span>
|
||||
{% trans "Normal" %}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="launchButtons">
|
||||
{% if launch_instance_allowed %}
|
||||
<a href="{% url 'horizon:project:network_topology:launchinstance' %}" id="instances__action_launch" class="btn btn-default btn-sm btn-launch ajax-modal {% if instance_quota_exceeded %}disabled{% endif %}"><span class="fa fa-cloud-upload"></span> {% if instance_quota_exceeded %}{% trans "Launch Instance (Quota exceeded)"%}{% else %}{% trans "Launch Instance"%}{% endif %}</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,232 @@
|
|||
#topologyCanvasContainer {
|
||||
@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 25px;
|
||||
padding-left: 50px;
|
||||
background: #efefef;
|
||||
min-height: 400px;
|
||||
div.nodata {
|
||||
font-size: 150%;
|
||||
text-align: center;
|
||||
padding-top: 150px;
|
||||
display: none;
|
||||
}
|
||||
&.noinfo {
|
||||
div.nodata {
|
||||
display: block;
|
||||
}
|
||||
#topology_canvas {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topologyNavi {
|
||||
overflow: hidden;
|
||||
margin: 10px 0;
|
||||
.toggleView {
|
||||
float: left;
|
||||
span.glyphicon {
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
.launchButtons {
|
||||
float: right;
|
||||
text-align: right;
|
||||
a.btn {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topologyBalloon {
|
||||
display: none;
|
||||
background: $body-bg;
|
||||
@include box-shadow(0px 1px 6px #777);
|
||||
position: absolute;
|
||||
left:100px;
|
||||
top:20px;
|
||||
z-index: 600;
|
||||
border-radius: 5px;
|
||||
color:#333;
|
||||
min-width: 200px;
|
||||
&.on {
|
||||
display: block;
|
||||
}
|
||||
line-height: 1.2;
|
||||
.vnc_window {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.closeTopologyBalloon {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
right: 6px;
|
||||
top: 0px;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
color:#aaa;
|
||||
&:hover {
|
||||
color:#777;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.contentBody {
|
||||
padding: 8px 8px 0;
|
||||
}
|
||||
span.active, span.down {
|
||||
&:before {
|
||||
content: "";
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
display: inline-block;
|
||||
background: $brand-success;
|
||||
margin-right: 3px;
|
||||
border-radius: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
span.down {
|
||||
&:before {
|
||||
background: $brand-danger;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background: #efefef;
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 8px;
|
||||
border-radius: 0px 0px 7px 7px;
|
||||
.footerInner {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.cell {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
}
|
||||
.delete {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
.portTableHeader {
|
||||
border-top: 1px solid $gray-lighter;
|
||||
padding-top: 5px;
|
||||
margin: 5px 0;
|
||||
display: table;
|
||||
width: 100%;
|
||||
.title {
|
||||
display: table-cell;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.action {
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
table.detailInfoTable {
|
||||
margin-bottom: 5px;
|
||||
caption {
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
th,td {
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
th {
|
||||
color: $gray-light;
|
||||
padding-right: 8px;
|
||||
width: 80px;
|
||||
span {
|
||||
vertical-align: middle;
|
||||
width:80px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
&.device {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td.delete {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.btn {
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
font-size: 11px;
|
||||
&:before {
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 9px solid $border-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -9px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 8px solid $body-bg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
left: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.leftPosition {
|
||||
&:before {
|
||||
border-right: none;
|
||||
border-left: 9px solid $border-color;
|
||||
right: -9px;
|
||||
top: 30px;
|
||||
left:auto;
|
||||
}
|
||||
&:after {
|
||||
border-right: none;
|
||||
border-left: 8px solid $body-bg;
|
||||
right: -8px;
|
||||
top: 31px;
|
||||
left:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topologyMessages {
|
||||
width:1px;
|
||||
height:1px;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
}
|
||||
|
||||
.quota-heading {
|
||||
font-family: anivers;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
@import "components/inline_edit";
|
||||
@import "components/charts";
|
||||
@import "components/workflow";
|
||||
@import "components/network_topology";
|
||||
|
||||
|
||||
/* new clearfix */
|
||||
|
|
@ -1714,225 +1715,6 @@ label.log-length {
|
|||
|
||||
}
|
||||
|
||||
/**** Network Topology CSS ****/
|
||||
#topologyCanvasContainer {
|
||||
@include box-sizing(border-box);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding: 25px;
|
||||
padding-left: 50px;
|
||||
background: #efefef;
|
||||
min-height: 400px;
|
||||
overflow-x: auto;
|
||||
div.nodata {
|
||||
font-size: 150%;
|
||||
text-align: center;
|
||||
padding-top: 150px;
|
||||
display: none;
|
||||
}
|
||||
&.noinfo {
|
||||
div.nodata {
|
||||
display: block;
|
||||
}
|
||||
#topology_canvas {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topologyNavi {
|
||||
overflow: hidden;
|
||||
i {
|
||||
margin-right: 3px;
|
||||
}
|
||||
margin: 10px 0 20px;
|
||||
.toggleView {
|
||||
float: left;
|
||||
}
|
||||
.launchButtons {
|
||||
float: right;
|
||||
text-align: right;
|
||||
a.btn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topologyBalloon {
|
||||
display: none;
|
||||
background: $body-bg;
|
||||
position: absolute;
|
||||
left:100px;
|
||||
top:20px;
|
||||
z-index: 600;
|
||||
border-radius: 5px;
|
||||
color:#333;
|
||||
min-width: 200px;
|
||||
&.on {
|
||||
display: block;
|
||||
}
|
||||
line-height: 1.2;
|
||||
.vnc_window {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.closeTopologyBalloon {
|
||||
font-size: 16px;
|
||||
line-height: 1;
|
||||
display: block;
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
right: 6px;
|
||||
top: 0px;
|
||||
cursor: pointer;
|
||||
padding: 3px;
|
||||
color:#aaa;
|
||||
&:hover {
|
||||
color:#777;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
.contentBody {
|
||||
padding: 8px 8px 0;
|
||||
}
|
||||
span.active, span.down {
|
||||
&:before {
|
||||
content: "";
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
display: inline-block;
|
||||
background: $brand-success;
|
||||
margin-right: 3px;
|
||||
border-radius: 10px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
span.down {
|
||||
&:before {
|
||||
background: $brand-danger;
|
||||
}
|
||||
}
|
||||
.footer {
|
||||
background: #efefef;
|
||||
border-top: 1px solid $border-color;
|
||||
padding: 8px;
|
||||
border-radius: 0px 0px 7px 7px;
|
||||
.footerInner {
|
||||
display: table;
|
||||
width: 100%;
|
||||
}
|
||||
.cell {
|
||||
display: table-cell;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.link {
|
||||
font-size: 12px;
|
||||
}
|
||||
.delete {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
table.detailInfoTable {
|
||||
margin-bottom: 5px;
|
||||
caption {
|
||||
text-align: left;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
th,td {
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 3px;
|
||||
background: transparent;
|
||||
}
|
||||
th {
|
||||
color: $gray-light;
|
||||
padding-right: 8px;
|
||||
width: 80px;
|
||||
span {
|
||||
vertical-align: middle;
|
||||
width:80px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: inline-block;
|
||||
}
|
||||
&.device {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
td {
|
||||
padding-right: 5px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
td.delete {
|
||||
padding-right: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.btn {
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
font-size: 11px;
|
||||
@include box-shadow(0px 1px 6px #777);
|
||||
&:before {
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
border-right: 9px solid $border-color;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: -9px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&:after {
|
||||
border-top: 6px solid transparent;
|
||||
border-bottom: 6px solid transparent;
|
||||
border-right: 8px solid $body-bg;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 31px;
|
||||
left: -8px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
&.leftPosition {
|
||||
&:before {
|
||||
border-right: none;
|
||||
border-left: 9px solid $border-color;
|
||||
right: -9px;
|
||||
top: 30px;
|
||||
left:auto;
|
||||
}
|
||||
&:after {
|
||||
border-right: none;
|
||||
border-left: 8px solid $body-bg;
|
||||
right: -8px;
|
||||
top: 31px;
|
||||
left:auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#topologyMessages {
|
||||
width:1px;
|
||||
height:1px;
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
}
|
||||
|
||||
.quota-heading {
|
||||
font-family: anivers;
|
||||
font-weight: normal;
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/**** Resource Topology CSS ****/
|
||||
.link {
|
||||
stroke: #999;
|
||||
|
|
|
|||
Loading…
Reference in New Issue