Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Dashboard and Alert headers with the Query one #4710

Merged
merged 5 commits into from
Mar 6, 2020
Merged

Update Dashboard and Alert headers with the Query one #4710

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aaaa197
Dashboard header adjustments
gabrieldutra Mar 4, 2020
ff6665c
Adjust Query header top margin and cleanup css
gabrieldutra Mar 4, 2020
371c21b
Alert Header adjustments
gabrieldutra Mar 4, 2020
beac8fe
Update Cypress tests
gabrieldutra Mar 4, 2020
f8b905d
Add margin between alert title and controls
gabrieldutra Mar 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 29 additions & 37 deletions client/app/assets/less/inc/alert.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,45 @@
.alert-page h3 {
flex-grow: 1;
input {
margin: -0.2em 0;
width: 100%;
min-width: 170px;
}
flex-grow: 1;

input {
margin: -0.2em 0;
width: 100%;
min-width: 170px;
}
}

.btn-create-alert[disabled] {
display: block;
margin-top: -20px;
display: block;
margin-top: -20px;
}

.alert-state {
border-bottom: 1px solid @input-border;
padding-bottom: 30px;

.alert-state-indicator {
text-transform: uppercase;
font-size: 14px;
padding: 5px 8px;
}

.alert-last-triggered {
color: @headings-color;
}
border-bottom: 1px solid @input-border;
padding-bottom: 30px;

.alert-state-indicator {
text-transform: uppercase;
font-size: 14px;
padding: 5px 8px;
}

.alert-last-triggered {
color: @headings-color;
}
}

.alert-query-selector {
min-width: 250px;
width: auto !important;
min-width: 250px;
width: auto !important;
}

// allow form item labels to gracefully break line
.alert-form-item label {
white-space: initial;
padding-right: 8px;
line-height: 21px;
white-space: initial;
padding-right: 8px;
line-height: 21px;

&::after {
margin-right: 0 !important;
}
&::after {
margin-right: 0 !important;
}
}

.alert-actions {
flex-grow: 1;
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: -15px;
}
Comment on lines -47 to -53
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From this file I just moved this to Title.less, the rest is on Prettier.

26 changes: 0 additions & 26 deletions client/app/assets/less/redash/query.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,23 +122,6 @@ body.fixed-layout {
}
}

.page-header--query {
.page-title {
display: block;
}

.tags-control a {
opacity: 0;
transition: opacity 0.2s ease-in-out;
}

&:hover {
.tags-control a {
opacity: 1;
}
}
}

Comment on lines -125 to -141
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not used anymore.

a.label-tag {
background: fade(@redash-gray, 15%);
color: darken(@redash-gray, 15%);
Expand Down Expand Up @@ -517,12 +500,3 @@ nav .rg-bottom {
padding-right: 0;
}
}

// Responsive fixes
@media (max-width: 767px) {
.query-page-wrapper {
h3 {
font-size: 18px;
}
}
}
Comment on lines -521 to -528
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to QueryPageHeader.less

8 changes: 5 additions & 3 deletions client/app/pages/alert/components/Title.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import { getDefaultName } from "../Alert";

import { Alert as AlertType } from "@/components/proptypes";

import "./Title.less";

export default function Title({ alert, editMode, name, onChange, children }) {
const defaultName = getDefaultName(alert);
return (
<div className="p-b-10 m-l-0 m-r-0 page-header--new">
<div className="d-flex">
<div className="alert-header">
<div className="alert-title">
<h3>
{editMode && alert.query ? (
<Input
Expand All @@ -22,8 +24,8 @@ export default function Title({ alert, editMode, name, onChange, children }) {
name || defaultName
)}
</h3>
<span className="alert-actions">{children}</span>
</div>
<div className="alert-actions">{children}</div>
</div>
);
}
Expand Down
32 changes: 32 additions & 0 deletions client/app/pages/alert/components/Title.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.alert-header {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 5px;

& > div {
padding: 5px 0;
}

.alert-title {
flex: 1 1;

h3 {
margin: 0;

@media (max-width: 767px) {
font-size: 18px;
}
}
}

.alert-actions {
display: flex;
flex-wrap: nowrap;
margin-right: -15px;

@media (max-width: 515px) {
flex-basis: 100%;
}
}
}
Loading