mirror of
https://github.com/getredash/redash.git
synced 2026-03-22 10:00:17 -04:00
0ac24e38a1
* Vertical navbar * Update vertical menu look and add create menu. * Make query editor work with vertical nav. * Dark mode * Fix create menu & make sidebar fixed. * Update Alert pages layout * Update System status pages * Update Queries and Dashboards list pages * Update Query Source and Query View pages * Use dark theme for mobile navbar * Update Dashboard page: fix Add widget/textbox panel positioning * Dashboard page: fix layout issues when container changes its size (fixes known issues: navbar expand/collapse, scrollbar appears/hides) * Fix dashboard page sticky header (there was a 15px space above it) * Fix embeds * Extract desktop navbar component; move mobile navbar and its styles to ApplicationLayout folder * Remove old app header * Fix tests * Restore version info block * Make Percy capture entire page * Make vertical navbar expand/collapse animation smoother (as it's currently impossible to disable it :-( ) * Fix misc UI issues (show Create label on expanded menu; fix some CSS; don't select items on click) * Allow to override navbars with DynamicComponent * Fix misc UI issues: expand/collapse button animation, menu items styles, menu expand/collapse animation * Hide submenu arrow; show username when menu is expanded * Refine CSS and make it more isolated; adjust colors * Update tests Co-authored-by: Arik Fraimovich <arik@arikfr.com>
182 lines
3.2 KiB
Plaintext
182 lines
3.2 KiB
Plaintext
@backgroundColor: #001529;
|
|
@dividerColor: rgba(255, 255, 255, 0.5);
|
|
@textColor: rgba(255, 255, 255, 0.75);
|
|
|
|
.desktop-navbar {
|
|
background: @backgroundColor;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
|
|
&-spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&-logo.ant-menu {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
text-align: center;
|
|
|
|
img {
|
|
height: 40px;
|
|
transition: all 270ms;
|
|
}
|
|
|
|
&.ant-menu-inline-collapsed {
|
|
img {
|
|
height: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.help-trigger {
|
|
font: inherit;
|
|
}
|
|
|
|
.ant-menu {
|
|
&:not(.ant-menu-inline-collapsed) {
|
|
width: 170px;
|
|
}
|
|
|
|
&.ant-menu-inline-collapsed > .ant-menu-submenu-title span img + span,
|
|
&.ant-menu-inline-collapsed > .ant-menu-item i + span {
|
|
display: inline-block;
|
|
max-width: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.ant-menu-item-divider {
|
|
background: @dividerColor;
|
|
}
|
|
|
|
.ant-menu-item,
|
|
.ant-menu-submenu {
|
|
font-weight: 500;
|
|
color: @textColor;
|
|
|
|
&.ant-menu-submenu-open,
|
|
&.ant-menu-submenu-active,
|
|
&:hover,
|
|
&:active {
|
|
color: #fff;
|
|
}
|
|
|
|
a,
|
|
span,
|
|
.anticon {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.ant-menu-submenu-arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.ant-btn.desktop-navbar-collapse-button {
|
|
background-color: @backgroundColor;
|
|
border: 0;
|
|
border-radius: 0;
|
|
color: @textColor;
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: #fff;
|
|
}
|
|
|
|
&:after {
|
|
animation: 0s !important;
|
|
}
|
|
}
|
|
|
|
.desktop-navbar-profile-menu {
|
|
.desktop-navbar-profile-menu-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
|
|
.profile__image_thumb {
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.profile__image_thumb + span {
|
|
flex: 1 1 auto;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
margin-left: 10px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
|
|
// styles from Antd
|
|
opacity: 1;
|
|
transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
|
|
margin-left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
}
|
|
}
|
|
|
|
&.ant-menu-inline-collapsed {
|
|
.ant-menu-submenu-title {
|
|
padding-left: 16px !important;
|
|
padding-right: 16px !important;
|
|
}
|
|
|
|
.desktop-navbar-profile-menu-title {
|
|
.profile__image_thumb + span {
|
|
opacity: 0;
|
|
max-width: 0;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.desktop-navbar-submenu {
|
|
.ant-menu {
|
|
.ant-menu-item-divider {
|
|
background: @dividerColor;
|
|
}
|
|
|
|
.ant-menu-item {
|
|
font-weight: 500;
|
|
color: @textColor;
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: #fff;
|
|
}
|
|
|
|
a,
|
|
span,
|
|
.anticon {
|
|
color: inherit;
|
|
}
|
|
|
|
.zmdi,
|
|
.fa {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&.version-info {
|
|
height: auto;
|
|
line-height: normal;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
|
|
a {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
|
&:hover,
|
|
&:active {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|