diff --git a/starlingx-dashboard/centos/build_srpm.data b/starlingx-dashboard/centos/build_srpm.data index 4f322859..501f3862 100644 --- a/starlingx-dashboard/centos/build_srpm.data +++ b/starlingx-dashboard/centos/build_srpm.data @@ -1,2 +1,2 @@ SRC_DIR="starlingx-dashboard" -TIS_PATCH_VER=20 +TIS_PATCH_VER=21 diff --git a/starlingx-dashboard/centos/starlingx-dashboard.spec b/starlingx-dashboard/centos/starlingx-dashboard.spec index 7e8edd4c..e4c9ef56 100644 --- a/starlingx-dashboard/centos/starlingx-dashboard.spec +++ b/starlingx-dashboard/centos/starlingx-dashboard.spec @@ -22,6 +22,7 @@ starlingx specific horizon plugins %define py_pkg_name starlingx_dashboard %define enabled_dir %{_datadir}/openstack-dashboard/openstack_dashboard/enabled/ +%define stx_themes_dir %{_datadir}/openstack-dashboard/openstack_dashboard/themes/starlingx/ %define debug_package %{nil} @@ -42,6 +43,10 @@ install -m 644 dist/*.whl $RPM_BUILD_ROOT/wheels/ install -d -m 755 %{buildroot}%{enabled_dir} install -p -D -m 755 %{py_pkg_name}/enabled/* %{buildroot}%{enabled_dir} +install -d -m 755 %{buildroot}%{stx_themes_dir} +cp -R %{py_pkg_name}/themes/starlingx/* %{buildroot}%{stx_themes_dir} +chmod -R 755 %{buildroot}%{stx_themes_dir}/* + %clean rm -rf $RPM_BUILD_ROOT @@ -51,6 +56,7 @@ rm -rf $RPM_BUILD_ROOT %{python2_sitelib}/%{py_pkg_name}-%{version}*.egg-info %{enabled_dir} +%{stx_themes_dir} %package wheels Summary: %{name} wheels diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/_styles.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/_styles.scss new file mode 100755 index 00000000..ab581ffd --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/_styles.scss @@ -0,0 +1,38 @@ +@import "/themes/starlingx/variables"; +@import "/themes/default/styles"; + + +// WRS components +@import "components/badges"; +// (Eddie Ramirez): To be deprecated +// @import "components/sidebar"; +// @import "components/topbar"; +// @import "components/splash"; +@import "components/charts"; +@import "components/tables"; + + +.messages { + width: 500px; + margin-left: -250px; + left: 50%; + right: auto; +} + +.password-icon { + top: 0px; + color: gray; +} + +#main_content { + height: 100%; + width: 100%; + display: table; + + #content_body { + width: 100%; + display: table-cell; + padding-left: 0px; + vertical-align: top; + } +} diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/_variables.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/_variables.scss new file mode 100755 index 00000000..d03767b0 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/_variables.scss @@ -0,0 +1,92 @@ +@import "/themes/default/variables"; + +/* Primary Brand Colors */ +$windriver-white: #ffffff; +$windriver-black: #000000; +$windriver-red: #CC0000; +$windriver-lighter-red: #CC1515; +$windriver-gray: #333333; +$windriver-lighter-gray: #9f9f9f; + +/* Secondary Brand Colors */ +$windriver-slate-green: #336666; +$windriver-slate-blue: #336699; +$windriver-tan: #CC9966; +$windriver-gold: #FFCC33; + +/* Global Styles */ +$text-color: #666; +$link-color: $windriver-slate-blue; + +$gray-light: #cccccc; +$font-size-base: 15px !default; +$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px + +$sidebar-background-color: #666; +$sidebar-active-color: $windriver-red; +$context-delimiter-size: 13px; + +$errorBackground: #f2dede; +$warningBackground: #fcf8e3; + +/* Bootstrap Customizations */ +$linkColor: $link-color; +$textColor: $text-color; + +// Splash Screen Styles +$splash-bg-color: #666; +$splash-login-bg-color: #333; +$splash-border-color: #000; +$splash-text-color: #fff; +$splash-label-color: #eee; + +// Dashboard Styles +$sidebar-width: 220px; + +$brand-bg-color: $windriver-black; +$brand-bg-highlight: #666; +$brand-text-color: $windriver-white; +$brand-width: $sidebar-width; +$brand-height: 30px; + +$nav-tabs-bg-color: $windriver-white; +$nav-tabs-link-color: $windriver-white; +$nav-tabs-active-color: $text-color; +$nav-tabs-hover-color: $windriver-black; + +$main-nav-bg-color: #666; +$main-nav-title-color: $windriver-white; +$main-nav-link-color: #ddd; +$main-nav-width: $sidebar-width; + +$switch-bar-bg-color: $windriver-black; +$switch-bar-bg-hover: $windriver-gray; +$switch-bar-text-color: $windriver-red; + +$topbar-background-color: #4a4a4a; +$topbar-title-color: $windriver-white; +$topbar-text-color: #eee; +$topbar-link-color: $topbar-text-color; +$topbar-hover-color: $windriver-white; + +$badge-color-primary: $windriver-slate-blue; +$badge-color-danger: $windriver-red; +$badge-color-warning: $windriver-gold; +$badge-color: #fff; +$badge-link-hover-color: #fff; +$badge-bg: $gray-light; +$badge-active-color: $linkColor; +$badge-active-bg: #fff; +$badge-font-weight: bold; +$badge-line-height: 1; +$badge-border-radius: 10px; +$badge-font-size: ceil(($font-size-small * 0.85)); // ~12px + +$modal-lg: 1200px; // overide default/bootstrap/_variable.sccs + +//Default theme overrides +$brand-primary: $windriver-slate-blue; +$brand-success: #5cb85c !default; +$brand-info: #5bc0de !default; +$brand-warning: $windriver-gold; +$brand-danger: $windriver-red; diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_badges.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_badges.scss new file mode 100755 index 00000000..b086ce77 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_badges.scss @@ -0,0 +1,76 @@ +// +// Badges +// -------------------------------------------------- + + +// Base classes +.badge { + display: inline-block; + min-width: 10px; + padding: 3px 7px; + font-size: $badge-font-size; + font-weight: $badge-font-weight; + color: $badge-color; + line-height: $badge-line-height; + vertical-align: baseline; + white-space: nowrap; + text-align: center; + background-color: $badge-bg; + border-radius: $badge-border-radius; + + // Empty badges collapse automatically (not available in IE8) + &:empty { + display: none; + } + + // Quick fix for badges in buttons + .btn & { + position: relative; + top: -1px; + } + .btn-xs & { + top: 0; + padding: 1px 5px; + } +} + +.badge-success { + background-color: $badge-color-primary; +} +.badge-danger { + background-color: $badge-color-danger; +} +.badge-warning { + background-color: darken($badge-color-warning, 10%); +} + +.status-success { + color: $brand-success; +} +.status-danger { + color: $badge-color-danger; +} +.status-warning { + color: darken($badge-color-warning, 10%); +} + + +// Hover state, but only for links +a.badge { + &:hover, + &:focus { + color: $badge-link-hover-color; + text-decoration: none; + cursor: pointer; + } +} + +// Account for counters in navs +a.list-group-item.active > .badge, +.nav-pills > .active > a > .badge { + color: $badge-active-color; + background-color: $badge-active-bg; +} +.nav-pills > li > a > .badge { + margin-left: 3px; +} \ No newline at end of file diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_charts.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_charts.scss new file mode 100755 index 00000000..c9060125 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_charts.scss @@ -0,0 +1,19 @@ +// Chart Usage Specifics +.d3_pie_chart_usage { + + // The inner arc + .arc.inner { + fill: #336699; + stroke: none; + + // Specialness if its full + &.FULL { + fill: $windriver-red; + } + + // Specialness if its almost full + &.NEARLY_FULL { + fill: $windriver-gold; + } + } +} diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_sidebar.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_sidebar.scss new file mode 100755 index 00000000..4cc9a0c0 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_sidebar.scss @@ -0,0 +1,134 @@ + +// Indent selected menu items +#sidebar .openstack-panel.active { + margin-left: 15px; +} + +// Squish accordian pills +#sidebar-accordion { + a { + background-color: $main-nav-bg-color; + color: $main-nav-bg-color; + padding: .4em 1.2em; + background: transparent; + } + .panel > a{ + background: transparent; + } +} + +// Coloring of sidebar +#sidebar { + + // Header highlight color + //.openstack-dashboard > a:hover, + .openstack-dashboard > a:focus, + li { + background-color: $sidebar-background-color; + } + + .nav-pills.nav-stacked { + & > li { + & > a { + color: $windriver-white; + background: $main-nav-bg-color; + } + } + } + + // Dashboard headers + #sidebar-accordion > li.panel > a{ + //font-size: 15px; + border-radius: 9px; + background-color: $windriver-lighter-gray; + } + + // Panel group headers + #sidebar-accordion li.openstack-panel-group > a { + //font-size: 15px; + color: $windriver-white; + text-align: left; + + &:hover { + background-color: transparent; + } + } + + // All links + li.openstack-dashboard a.openstack-panel { + color: $windriver-white; + // Link on hover + &:hover { + color: $windriver-lighter-red; + background-color: $sidebar-background-color; + } + } + + // Selected panel + li.openstack-dashboard a.openstack-panel.active { + color: $sidebar-active-color; + background: $windriver-white; + border-left: 2px; + border-left-style: solid; + border-left-color: $sidebar-active-color; + } + +} + +#sidebar { + float: none; + display: table-cell; + + height: 100%; + background-color: $sidebar-background-color; + + .branding { + padding-bottom: 0px; + padding-top: 0px; + padding-left: 0px; + text-align: center; + + /* vertical gradient (excluding IE9 and below - which clips the nav-tabs) */ + background-color: mix($brand-bg-color, $brand-bg-highlight, 60%); // Old Browswers + background-image: -moz-linear-gradient(top, $brand-bg-color, $brand-bg-highlight); // FF 3.6+ + background-image: -ms-linear-gradient(top, $brand-bg-color, $brand-bg-highlight); // IE10 + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($brand-bg-color), to($brand-bg-highlight)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, $brand-bg-color, $brand-bg-highlight); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, $brand-bg-color, $brand-bg-highlight); // Opera 11.10 + background-image: linear-gradient(top, $brand-bg-color, $brand-bg-highlight); // The standard + background-repeat: repeat-x; + + .brand { + background: none; + padding-bottom: 0px; + margin-top: 0px; + + a { + float: none; + color: $brand-text-color; + text-indent: inherit; + text-align: center; + text-decoration: none; + text-shadow: 2px 1px 15px #000; + font-size: 20px; + line-height: 20px; + margin: 20px 0px 0px 0px; + padding-top: 0px; + padding-bottom: 0px; + height: $brand-height; + width: $brand-width; + } + } + + .system { + width: $sidebar-width; + overflow-wrap: break-word; + text-align: center; + color: $brand-text-color; + padding-top: 0px; + padding-bottom: 0px; + margin-bottom: 10px; + font-size: 15px; + } + } +} diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_splash.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_splash.scss new file mode 100755 index 00000000..84273ccb --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_splash.scss @@ -0,0 +1,65 @@ + +#splash { + background: $splash-bg-color; + color: $splash-text-color; + + .panel , .panel-heading, .panel-footer{ + background: $splash-login-bg-color; + border-color: $splash-border-color; + } + + .panel-body { + // Unstretch text fields + margin-right: 40px; + margin-left: 40px; + } + + .panel-heading{ + // White line + border-bottom-color: $splash-label-color; + + /* vertical gradient (excluding IE9 and below - which clips the nav-tabs) */ + background-color: mix($brand-bg-color, $splash-login-bg-color, 60%); // Old Browswers + background-image: -moz-linear-gradient(top, $brand-bg-color, $splash-login-bg-color); // FF 3.6+ + background-image: -ms-linear-gradient(top, $brand-bg-color, $splash-login-bg-color); // IE10 + background-image: -webkit-gradient(linear, 0 0, 0 100%, from($brand-bg-color), to($splash-login-bg-color)); // Safari 4+, Chrome 2+ + background-image: -webkit-linear-gradient(top, $brand-bg-color, $splash-login-bg-color); // Safari 5.1+, Chrome 10+ + background-image: -o-linear-gradient(top, $brand-bg-color, $splash-login-bg-color); // Opera 11.10 + background-image: linear-gradient(top, $brand-bg-color, $splash-login-bg-color); // The standard + background-repeat: repeat-x; + + } + + .panel-footer { + // Hide lower line + border-top: none; + + // Move over button + button { + margin-right: 40px; + } + } + + .red-line { + height: 53px; + width: 43%; + border-bottom: 2px solid $windriver-red; + margin-bottom: -18px; + margin-left: -16px; + } + + h3 { + display: block; + color: $splash-text-color; + text-align: center; + margin-bottom: 30px; + font-size: 32px; + line-height: 39px; + text-shadow: 2px 2px 4px #000000; + } + form label { + color: $splash-label-color; + font-weight: normal; + } + +} \ No newline at end of file diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_tables.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_tables.scss new file mode 100755 index 00000000..73d434c8 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_tables.scss @@ -0,0 +1,39 @@ +// Exact selectors below required to override .table-striped +.table tbody tr, +.table-striped.datatable tbody tr { + &.status_down > td, + &.status_down.odd > td, + &.status_down.even > td { + background-color: $errorBackground; + } + &.warning > td, + &.warning.odd > td, + &.warning.even > td { + background-color: $warningBackground; + } +} + +// Hover states for .table-hover +.table-hover tbody tr, +.table-striped.datatable tbody tr { + &.status_down:hover > td, + &.status_down.odd:hover > td, + &.status_down.even:hover > td { + background-color: darken($errorBackground, 5%); + } + &.status_unknown:hover > td, + &.status_unknown.odd:hover > td, + &.status_unknown.even:hover > td { + background-color: darken($warningBackground, 5%); + } +} + +.table_actions .table_limit { + display: inline-block; + margin-left: 5px; + border: 1px; + + .btn.btn-small .caret { + margin-top: 7px; + } +} \ No newline at end of file diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_topbar.scss b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_topbar.scss new file mode 100755 index 00000000..35c0122e --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/components/_topbar.scss @@ -0,0 +1,45 @@ + +.navbar-fixed-top, .topbar { + padding: 0px 0px; + background-color: $topbar-background-color; + + a.navbar-brand { + padding-left: 0px; + } + + h1.brand a { + background: none; + } + + .navbar-default .navbar-nav { + .dropdown-menu { + background-color: white; + } + & > li > a{ + color: $topbar-text-color; + } + } + + .context_selection{ + float: left; + } + + .user_settings { + float: right; + } + + // Styling for time & alarms + .navbar-center { + color: $topbar-text-color; + padding-top: 0.8em; + + display: table; + margin-left: auto; + margin-right: auto; + float: none; + + .datetime { + padding-right: 13px; + } + } +} diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/favicon.png b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/favicon.png new file mode 100644 index 00000000..0f0c6d45 Binary files /dev/null and b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/favicon.png differ diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/logo-splash.svg b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/logo-splash.svg new file mode 100644 index 00000000..5e1f221c --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/logo-splash.svg @@ -0,0 +1 @@ +StarlingX_Logo_RGB_Stacked_2color \ No newline at end of file diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/logo.png b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/logo.png new file mode 100644 index 00000000..f916b9a0 Binary files /dev/null and b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/static/img/logo.png differ diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/500.html b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/500.html new file mode 100644 index 00000000..89ca9bfe --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/500.html @@ -0,0 +1,90 @@ +{% load branding i18n staticfiles %} +{% load load_config from horizon %} + +{% load_config as CONF %} + + +{% comment %} + + NB: The context for 500 pages is an empty dict. + Don't add any content here that depends on things from + the context. + +{% endcomment %} + + + + + + + + + + {% trans "Server error" %} - {% site_branding %} + {% block css %} + + {% endblock %} + + + {% block page_header %}{% endblock %} + {% block content %} +
+

{% site_branding %}

+
+ {% block text %} +

{% trans "Something went wrong!" %}

+

{% trans "An unexpected error has occurred. Try refreshing the page. If that doesn't help, contact your local administrator." %}

+ {% endblock %} +
+ +
+ {% endblock %} + {% block footer %}{% endblock %} + {% block js %}{% endblock %} + + diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/_stylesheets.html b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/_stylesheets.html new file mode 100644 index 00000000..8cd66216 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/_stylesheets.html @@ -0,0 +1,31 @@ +{% load compress %} +{% load themes %} + +{% compress css %} + + +{% endcompress %} + + +{% current_theme as current_theme %} +{% theme_dir as theme_dir %} + +{% comment %} + The following 'include' is used to allow all scss files to share the same variable namespace + and also have access to ALL styles so that we can allow @extend functionality to persist. + + If you wish to add new scss files, it is recommended that you add them from within the + themes/themes.scss template file. +{% endcomment %} + +{% with THEME=current_theme THEME_DIR=theme_dir %} +{% compress css %} + +{% endcompress %} +{% endwith %} + + + + diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/header/_brand.html b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/header/_brand.html new file mode 100644 index 00000000..99cbb3f1 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/header/_brand.html @@ -0,0 +1,7 @@ +{% load branding %} +{% load themes %} + + + + + diff --git a/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/header/_user_menu.html b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/header/_user_menu.html new file mode 100755 index 00000000..2c96e732 --- /dev/null +++ b/starlingx-dashboard/starlingx-dashboard/starlingx_dashboard/themes/starlingx/templates/header/_user_menu.html @@ -0,0 +1,40 @@ +{% load i18n %} +{% load themes %} + +{% if not_list %} +
+{% else %} +
  • +{% endif %} + + +{% if not_list %} +
    • +{% else %} + +{% endif %} +