openstack
/
horizon
Code Issues Proposed changes

Merge "Breakdown CSS: split out the resource browser"

This commit is contained in:
Jenkins 2014-07-20 18:38:09 +00:00 committed by Gerrit Code Review
parent 1f879455f8 245430ba1c
commit 07b36f7e75
3 changed files with 169 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
openstack_dashboard/static/dashboard/scss/_variables.scss
View File

@ -1,3 +1,5 @@
/* Horizon Variables */
$gray-darker: #222222;
$gray-dark: #333333;
$gray: #555555;
@ -25,7 +27,9 @@ $table-border-color: $border-color;
$table-bg-hover: #f5f5f5;
$table-bg-odd: #f9f9f9;
// Workflows
/* Workflows */
$workflow-color-tab-complete-bg: #007acc;
$workflow-color-tab-incomplete-bg: #dddddd;
$workflow-color-tab-trough-bg: #efefef;
@ -37,4 +41,29 @@ $workflow-color-label-error: $brand-danger;
$workflow-size-tab-border: 2px;
$workflow-size-tab-arrow: 20px;
$workflow-size-tab-padding: 15px;
$workflow-size-tab-padding: 15px;
/* Resource Browser */
$rbrowser-data-table-border-width: 1px;
$rbrowser-data-table-border-color: $border-color;
$rbrowser-actions-column-padding: 10px;
$rbrowser-small-button-height: 28px;
$rbrowser-td-height: $rbrowser-small-button-height;
$rbrowser-table-cell-padding: 8px;
$rbrowser-selected-color: #e9f5fa;
$rbrowser-wrapper-width: 100%;
$rbrowser-navigation-table-width: 40%;
$rbrowser-content-table-width: $rbrowser-wrapper-width - $rbrowser-navigation-table-width;
$rbrowser-body-background-color: $body-bg;
$rbrowser-header-background-color: $gray-lighter;
$rbrowser-footer-background-color: #f1f1f1;
// Note: the content-wrapper background colors are determined by
// .table-striped-datatable styles.

135
openstack_dashboard/static/dashboard/scss/components/resource_browser.scss Normal file
View File

@ -0,0 +1,135 @@
/* ResourceBrowser style */
#browser_wrapper {
width: $rbrowser-wrapper-width;
min-width: 1000px;
background-color: $rbrowser-header-background-color;
border: $rbrowser-data-table-border-width solid $rbrowser-data-table-border-color;
@include border-radius(4px);
.tfoot {
clear: both;
padding: 8px;
border-top: 1px solid $rbrowser-data-table-border-color;
background-color: $rbrowser-footer-background-color;
font-size: 11px;
line-height: 14px;
span {
display: inline-block;
&.navigation_table_count {
width: $rbrowser-navigation-table-width;
}
}
}
form,
table{
margin-bottom: 0;
}
.navigation_wrapper, .content_wrapper{
position: relative;
float: left;
}
div.navigation_wrapper {
z-index: 10;
width: $rbrowser-navigation-table-width;
div.table_wrapper,
thead th.table_header {
border-right: 0 none;
border-top-right-radius: 0;
}
td {
&:first-child {
border-left: 0 none;
}
&.breadcrumb_td {
padding-right: 0px;
max-width: 200px;
}
}
tr.current_selected td {
background-color: $rbrowser-selected-color;
}
tfoot td {
border-right: 0 none;
border-bottom-right-radius: 0;
}
ul.breadcrumb {
padding-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right: none;
white-space: nowrap;
}
tbody td {
border-right: $rbrowser-data-table-border-width solid $rbrowser-data-table-border-color;
background-color: $rbrowser-body-background-color;
&.anchor {
word-wrap: break-word;
white-space: normal;
max-width: 145px;
}
}
}
div.content_wrapper {
width: $rbrowser-content-table-width;
div.table_wrapper,
thead th.table_header {
border-left: 0 none;
border-top-left-radius: 0;
}
td{
border-bottom: $rbrowser-data-table-border-width solid $rbrowser-data-table-border-color;
&:last-child {
border-right: 0 none;
}
&.breadcrumb_td {
padding-left: 0px;
}
}
tfoot td {
border-left: 0 none;
border-bottom-left-radius: 0;
}
/* FIXME(Ke Wu): for now there are two breadcrumb tr in both table
* and this one in the content table is hidden. This hack is made to
* fix the alignment of two table, needs a better solution in the
* future.
*/
ul.breadcrumb {
padding-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: none;
li {
visibility: hidden;
}
}
}
table {
border-collapse: collapse;
thead {
tr th {
border-bottom: none;
background-color: $rbrowser-header-background-color;
}
}
tbody {
tr {
&:last-child td {
border-bottom: 1px solid $rbrowser-data-table-border-color;
border-radius: 0;
}
&.empty td {
height: $rbrowser-td-height;
padding: $rbrowser-actions-column-padding;
}
}
td.actions_column {
position: static;
}
}
}
.breadcrumb{
padding: 6px;
margin: 0 0 1px 0;
}
}

150
openstack_dashboard/static/dashboard/scss/horizon.scss
View File

@ -3,6 +3,9 @@
@import "_variables";
@import "_accordion_nav";
// Components
@import "components/resource_browser";
@mixin border-radius($radius...) {
border-radius: $radius;
@ -1840,153 +1843,6 @@ label.log-length {
float: left;
}
//ResourceBrowser
$dataTableBorderWidth: 1px;
$dataTableBorderColor: #ddd;
$actionsColumnPadding: 10px;
$smallButtonHeight: 28px;
$tdHeight: $smallButtonHeight;
$tableCellPadding: 8px;
$browserWrapperWidth: 100%;
$navigationTableWidth: 40%;
$contentTableWidth: $browserWrapperWidth - $navigationTableWidth;
/* ResourceBrowser style */
#browser_wrapper {
width: $browserWrapperWidth;
min-width: 1000px;
background-color: $gray-lighter;
border: $dataTableBorderWidth solid $dataTableBorderColor;
@include border-radius(4px);
.tfoot {
clear: both;
padding: 8px;
border-top: 1px solid $dataTableBorderColor;
background-color: #F1F1F1;
font-size: 11px;
line-height: 14px;
span {
display: inline-block;
&.navigation_table_count {
width: $navigationTableWidth;
}
}
}
form, table{
margin-bottom: 0;
}
.navigation_wrapper, .content_wrapper{
position: relative;
float: left;
}
div.navigation_wrapper {
z-index: 10;
width: $navigationTableWidth;
div.table_wrapper,
thead th.table_header {
border-right: 0 none;
border-top-right-radius: 0;
}
td {
&:first-child {
border-left: 0 none;
}
&.breadcrumb_td {
padding-right: 0px;
max-width: 200px;
}
}
tr.current_selected td {
background-color: #e9f5fa;
}
tfoot td {
border-right: 0 none;
border-bottom-right-radius: 0;
}
ul.breadcrumb {
padding-right: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-right: none;
white-space: nowrap;
}
tbody td {
border-right: $dataTableBorderWidth solid $dataTableBorderColor;
background-color: white;
&.anchor {
word-wrap: break-word;
white-space: normal;
max-width: 145px;
}
}
}
div.content_wrapper {
width: $contentTableWidth;
div.table_wrapper,
thead th.table_header {
border-left: 0 none;
border-top-left-radius: 0;
}
td{
border-bottom: $dataTableBorderWidth solid $dataTableBorderColor;
&:last-child {
border-right: 0 none;
}
&.breadcrumb_td {
padding-left: 0px;
}
}
tfoot td {
border-left: 0 none;
border-bottom-left-radius: 0;
}
/* FIXME(Ke Wu): for now there are two breadcrumb tr in both table
* and this one in the content table is hidden. This hack is made to
* fix the alignment of two table, needs a better solution in the
* future.
*/
ul.breadcrumb {
padding-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
border-left: none;
li {
visibility: hidden;
}
}
}
table {
border-collapse: collapse;
thead {
tr th {
border-bottom: none;
background-color: $gray-lighter;
}
}
tbody {
tr:last-child td {
border-bottom: 1px solid #ddd;
border-radius: 0;
}
tr.empty td {
height: $tdHeight;
padding: $actionsColumnPadding;
}
td.actions_column {
position: static;
}
}
}
.breadcrumb{
padding: 6px;
margin: 0 0 1px 0;
}
}
/* Styling for inline object creation buttons */
.btn-inline {
margin-bottom: 9px;