IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14366 from grafana/14341-wide-picker-no-button

Browse Source 
Pickers with min-width instead of width
This commit is contained in:
Torkel Ödegaard 2018-12-07 09:05:22 +01:00 committed by GitHub
commit 9cc4e05205
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/PermissionList/AddPermission.tsx
View File

@ -84,7 +84,7 @@ class AddPermissions extends Component<Props, NewDashboardAclItem> {
render() { render() {
const { onCancel } = this.props; const { onCancel } = this.props;
const newItem = this.state; const newItem = this.state;
const pickerClassName = 'width-20'; const pickerClassName = 'min-width-20';
const isValid = this.isValid(); const isValid = this.isValid();
return ( return (
<div className="gf-form-inline cta-form"> <div className="gf-form-inline cta-form">

2
public/app/core/components/Picker/UserPicker.tsx
View File

@ -40,7 +40,7 @@ export class UserPicker extends Component<Props, State> {
.then(result => { .then(result => {
return result.map(user => ({ return result.map(user => ({
id: user.userId, id: user.userId,
label: `${user.login} - ${user.email}`, label: user.login === user.email ? user.login : `${user.login} - ${user.email}`,
avatarUrl: user.avatarUrl, avatarUrl: user.avatarUrl,
login: user.login, login: user.login,
})); }));

2
public/app/features/teams/TeamMembers.tsx
View File

@ -115,7 +115,7 @@ export class TeamMembers extends PureComponent<Props, State> {
</button> </button>
<h5>Add Team Member</h5> <h5>Add Team Member</h5>
<div className="gf-form-inline"> <div className="gf-form-inline">
<UserPicker onSelected={this.onUserSelected} className="width-30" /> <UserPicker onSelected={this.onUserSelected} className="min-width-30" />
{this.state.newTeamMember && ( {this.state.newTeamMember && (
<button className="btn btn-success gf-form-btn" type="submit" onClick={this.onAddUserToTeam}> <button className="btn btn-success gf-form-btn" type="submit" onClick={this.onAddUserToTeam}>
Add to team Add to team

6
public/app/features/teams/__snapshots__/TeamMembers.test.tsx.snap
View File

@ -58,7 +58,7 @@ exports[`Render should render component 1`] = `
className="gf-form-inline" className="gf-form-inline"
> >
<UserPicker <UserPicker
className="width-30" className="min-width-30"
onSelected={[Function]} onSelected={[Function]}
/> />
</div> </div>
@ -152,7 +152,7 @@ exports[`Render should render team members 1`] = `
className="gf-form-inline" className="gf-form-inline"
> >
<UserPicker <UserPicker
className="width-30" className="min-width-30"
onSelected={[Function]} onSelected={[Function]}
/> />
</div> </div>
@ -372,7 +372,7 @@ exports[`Render should render team members when sync enabled 1`] = `
className="gf-form-inline" className="gf-form-inline"
> >
<UserPicker <UserPicker
className="width-30" className="min-width-30"
onSelected={[Function]} onSelected={[Function]}
/> />
</div> </div>

6
public/sass/utils/_widths.scss
View File

@ -19,6 +19,12 @@
} }
} }
@for $i from 1 through 30 {
.min-width-#{$i} {
min-width: ($spacer * $i) - $gf-form-margin !important;
}
}
@for $i from 1 through 30 { @for $i from 1 through 30 {
.offset-width-#{$i} { .offset-width-#{$i} {
margin-left: ($spacer * $i) !important; margin-left: ($spacer * $i) !important;