apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-12-14 17:42:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Zone wizard UI: Add labels on traffic type edit area

Browse Source 
For zone wizard physical network step: Adds a text label to the top of
the 'edit' button indicating what type of traffic type (Management,
Storage, Guest, etc.)
This commit is contained in:
Brian Federle 2012-11-30 11:33:45 -08:00
parent 4472eca5b4
commit 28cc7477b0
2 changed files with 48 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ui/css/cloudstack3.css
View File

@ -6498,7 +6498,7 @@ label.error {
.multi-wizard.zone-wizard .select-container.multi .drop-container { .multi-wizard.zone-wizard .select-container.multi .drop-container {
background: #DAE2EC; background: #DAE2EC;
width: 484px; width: 484px;
height: 100px; height: 114px;
clear: both; clear: both;
position: relative; position: relative;
/*+border-radius:4px;*/ /*+border-radius:4px;*/
@ -6538,10 +6538,10 @@ label.error {
text-align: center; text-align: center;
color: #959BA0; color: #959BA0;
font-size: 13px; font-size: 13px;
/*+placement:shift 0px 24px;*/ /*+placement:shift 0px 45px;*/
position: relative; position: relative;
left: 0px; left: 0px;
top: 24px; top: 45px;
} }
/*** Add physical network -- traffic type drag area*/ /*** Add physical network -- traffic type drag area*/
@ -6769,20 +6769,20 @@ label.error {
border-radius: 4px; border-radius: 4px;
border-radius: 4px 4px 4px 4px; border-radius: 4px 4px 4px 4px;
border-top: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF;
/*+placement:shift -15px 61px;*/ /*+placement:shift -16px 70px;*/
position: relative; position: relative;
left: -15px; left: -16px;
top: 61px; top: 70px;
} }
.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover { .multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover {
background-position: 0px -105px; background-position: 0px -105px;
color: #FFFFFF; color: #FFFFFF;
/*+box-shadow:inset 0px 2px 1px #727272;*/ /*+box-shadow:inset 0px -1px 1px #727272;*/
-moz-box-shadow: inset 0px 2px 1px #727272; -moz-box-shadow: inset 0px -1px 1px #727272;
-webkit-box-shadow: inset 0px 2px 1px #727272; -webkit-box-shadow: inset 0px -1px 1px #727272;
-o-box-shadow: inset 0px 2px 1px #727272; -o-box-shadow: inset 0px -1px 1px #727272;
box-shadow: inset 0px 2px 1px #727272; box-shadow: inset 0px -1px 1px #727272;
} }
.multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover span { .multi-wizard.zone-wizard .drop-container .traffic-type-draggable > .edit-traffic-type:hover span {
@ -6795,10 +6795,10 @@ label.error {
} }
.multi-wizard.zone-wizard .drop-container .traffic-type-draggable:hover > .edit-traffic-type { .multi-wizard.zone-wizard .drop-container .traffic-type-draggable:hover > .edit-traffic-type {
/*+placement:shift -7px 67px;*/ /*+placement:shift -7px 76px;*/
position: relative; position: relative;
left: -7px; left: -7px;
top: 67px; top: 76px;
} }
.multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span { .multi-wizard.zone-wizard .drop-container .traffic-type-draggable .edit-traffic-type span {
@ -6819,6 +6819,36 @@ label.error {
padding: 7px 11px 0 7px; padding: 7px 11px 0 7px;
} }
.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type span.name {
float: left;
width: 76px;
font-size: 10px;
padding: 2px;
color: #4E5F6F;
background: #DBE1E9;
/*+border-radius:4px 4px 0 0;*/
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-khtml-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
/*+placement:shift -13px -16px;*/
position: relative;
left: -13px;
top: -16px;
margin-bottom: -13px;
border: 1px solid #C3BCBC;
border-bottom: 1px solid #D1CDCD;
/*+box-shadow:inset 0px 1px 1px #F5F4F4;*/
-moz-box-shadow: inset 0px 1px 1px #F5F4F4;
-webkit-box-shadow: inset 0px 1px 1px #F5F4F4;
-o-box-shadow: inset 0px 1px 1px #F5F4F4;
box-shadow: inset 0px 1px 1px #F5F4F4;
}
.multi-wizard.zone-wizard .traffic-type-draggable .edit-traffic-type:hover span.name {
background: #C4C3C3;
}
/*** Configure guest network -- tabs*/ /*** Configure guest network -- tabs*/
.multi-wizard.zone-wizard .setup-guest-traffic .ui-widget-content { .multi-wizard.zone-wizard .setup-guest-traffic .ui-widget-content {
width: 682px; width: 682px;

4
ui/index.jsp
View File

@ -552,6 +552,7 @@ under the License.
class="traffic-type-draggable management"> class="traffic-type-draggable management">
<!-- Edit buttton --> <!-- Edit buttton -->
<div class="edit-traffic-type"> <div class="edit-traffic-type">
<span class="name"><fmt:message key="label.management"/></span>
<span class="icon">&nbsp;</span> <span class="icon">&nbsp;</span>
<span>Edit</span> <span>Edit</span>
</div> </div>
@ -569,6 +570,7 @@ under the License.
class="traffic-type-draggable public"> class="traffic-type-draggable public">
<!-- Edit buttton --> <!-- Edit buttton -->
<div class="edit-traffic-type"> <div class="edit-traffic-type">
<span class="name"><fmt:message key="label.public"/></span>
<span class="icon">&nbsp;</span> <span class="icon">&nbsp;</span>
<span>Edit</span> <span>Edit</span>
</div> </div>
@ -586,6 +588,7 @@ under the License.
class="traffic-type-draggable guest"> class="traffic-type-draggable guest">
<!-- Edit buttton --> <!-- Edit buttton -->
<div class="edit-traffic-type"> <div class="edit-traffic-type">
<span class="name"><fmt:message key="label.guest"/></span>
<span class="icon">&nbsp;</span> <span class="icon">&nbsp;</span>
<span>Edit</span> <span>Edit</span>
</div> </div>
@ -603,6 +606,7 @@ under the License.
class="traffic-type-draggable storage"> class="traffic-type-draggable storage">
<!-- Edit buttton --> <!-- Edit buttton -->
<div class="edit-traffic-type"> <div class="edit-traffic-type">
<span class="name"><fmt:message key="label.storage"/></span>
<span class="icon">&nbsp;</span> <span class="icon">&nbsp;</span>
<span>Edit</span> <span>Edit</span>
</div> </div>