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

Theme: Reworking button styling (#16362)

Browse Source 
* added new variables for height in theme, added height to gui button large, replaced add gicon with regular gicon, replaced + with gicon, changed button display to flex

* set fixed height to large button, removed xlarge button and replaced with large button

* removed button-mini and replaced with button-small, set fixed height to default button and button-small

* fixed padding for default and large button, fixed height for navbar button, fixed snapshots

* fixed padding and margin on navbar buttons

* gave special height to login btn-primary

* readded btn-mini class with same styling as btn-small and a deprecated notice

* fixed add panel widget buttons
This commit is contained in:
Patrick O'Carroll
2019-04-08 09:48:15 +02:00
committed by Torkel Ödegaard
parent 9b39dbc2fb
commit 128fb8fa7e
35 changed files with 130 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
View File

@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
import { CallToActionCard, ExtraLargeLinkButton, ThemeContext } from '@grafana/ui';
import { CallToActionCard, LargeLinkButton, ThemeContext } from '@grafana/ui';
import { css } from 'emotion';
export interface Props {
model: any;
@@ -37,9 +37,9 @@ const EmptyListCTA: React.FunctionComponent<Props> = props => {
: '';
const ctaElement = (
<ExtraLargeLinkButton onClick={onClick} href={buttonLink} icon={buttonIcon} className={ctaElementClassName}>
<LargeLinkButton onClick={onClick} href={buttonLink} icon={buttonIcon} className={ctaElementClassName}>
{buttonTitle}
</ExtraLargeLinkButton>
</LargeLinkButton>
);
return <CallToActionCard message={title} footer={footer} callToActionElement={ctaElement} theme={theme} />;

4
public/app/core/components/org_switcher.ts
View File

@@ -29,10 +29,10 @@ const template = `
<td>{{org.name}}</td>
<td>{{org.role}}</td>
<td class="text-right">
<span class="btn btn-primary btn-mini" ng-show="org.orgId === ctrl.currentOrgId">
<span class="btn btn-primary btn-small" ng-show="org.orgId === ctrl.currentOrgId">
Current
</span>
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== ctrl.currentOrgId">
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-small" ng-show="org.orgId !== ctrl.currentOrgId">
Switch to
</a>
</td>

2
public/app/features/admin/partials/edit_org.html
View File

@@ -35,7 +35,7 @@
</div>
</td>
<td style="width: 1%">
<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-mini">
<a ng-click="removeOrgUser(orgUser)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

2
public/app/features/admin/partials/edit_user.html
View File

@@ -91,7 +91,7 @@
</div>
</td>
<td style="width: 1%">
<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-mini">
<a ng-click="removeOrgUser(org)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

2
public/app/features/alerting/StateHistory.tsx
View File

@@ -72,7 +72,7 @@ class StateHistory extends PureComponent<Props, State> {
{stateHistoryItems.length > 0 && (
<div className="p-b-1">
<span className="muted">Last 50 state changes</span>
<button className="btn btn-mini btn-danger pull-right" onClick={this.clearHistory}>
<button className="btn btn-small btn-danger pull-right" onClick={this.clearHistory}>
<i className="fa fa-trash" /> {` Clear history`}
</button>
</div>

2
public/app/features/alerting/partials/notifications_list.html
View File

@@ -47,7 +47,7 @@
<div ng-if="ctrl.notifications.length === 0">
<empty-list-cta model="{
title: 'There are no notification channels defined yet',
buttonIcon: 'gicon gicon-add-alert-notification-channel',
buttonIcon: 'gicon gicon-alert-notification-channel',
buttonLink: 'alerting/notification/new',
buttonTitle: 'Add channel',
proTip: 'You can include images in your alert notifications.',

6
public/app/features/annotations/partials/editor.html
View File

@@ -36,7 +36,7 @@
<td style="width: 1%"><i ng-click="ctrl.move($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="ctrl.move($index,1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%">
<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
<a ng-click="ctrl.removeAnnotation(annotation)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
<i class="fa fa-remove"></i>
</a>
</td>
@@ -48,8 +48,8 @@
<div ng-if="ctrl.annotations.length === 1" class="p-t-2">
<div class="empty-list-cta">
<div class="empty-list-cta__title">There are no custom annotation queries added yet</div>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-annotation"></i>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-large btn-primary">
<i class="gicon gicon-annotation"></i>
Add Annotation Query
</a>
<div class="grafana-info-box">

2
public/app/features/api-keys/ApiKeysPage.tsx
View File

@@ -113,7 +113,7 @@ export class ApiKeysPage extends PureComponent<Props, any> {
<EmptyListCTA
model={{
title: "You haven't added any API Keys yet.",
buttonIcon: 'fa fa-plus',
buttonIcon: 'gicon gicon-apikeys',
buttonLink: '#',
onClick: this.onToggleAdding,
buttonTitle: ' New API Key',

2
public/app/features/api-keys/__snapshots__/ApiKeysPage.test.tsx.snap
View File

@@ -38,7 +38,7 @@ exports[`Render should render CTA if there are no API keys 1`] = `
<EmptyListCTA
model={
Object {
"buttonIcon": "fa fa-plus",
"buttonIcon": "gicon gicon-apikeys",
"buttonLink": "#",
"buttonTitle": " New API Key",
"onClick": [Function],

4
public/app/features/dashboard/components/AddPanelWidget/_AddPanelWidget.scss
View File

@@ -37,7 +37,9 @@
.add-panel-widget__link {
margin: 0 $space-sm;
width: 154px;
width: 160px;
height: 88px !important;
flex-direction: column !important;
}
.add-panel-widget__icon {

6
public/app/features/dashboard/components/DashLinks/editor.html
View File

@@ -10,8 +10,8 @@
<div class="empty-list-cta__title">
There are no dashboard links added yet
</div>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-link"></i>
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-large btn-primary">
<i class="gicon gicon-link"></i>
Add Dashboard Link
</a>
<div class="grafana-info-box">
@@ -61,7 +61,7 @@
<i ng-click="ctrl.moveLink($index, 1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
</td>
<td style="width: 1%">
<a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-mini" ng-hide="annotation.builtIn">
<a ng-click="ctrl.deleteLink($index)" class="btn btn-danger btn-small" ng-hide="annotation.builtIn">
<i class="fa fa-remove"></i>
</a>
</td>

2
public/app/features/datasources/DataSourcesListItem.tsx
View File

@@ -21,7 +21,7 @@ export class DataSourcesListItem extends PureComponent<Props> {
<div className="card-item-details">
<div className="card-item-name">
{dataSource.name}
{dataSource.isDefault && <span className="btn btn-secondary btn-mini card-item-label">default</span>}
{dataSource.isDefault && <span className="btn btn-secondary btn-small card-item-label">default</span>}
</div>
<div className="card-item-sub-name">{dataSource.url}</div>
</div>

2
public/app/features/datasources/DataSourcesListPage.tsx
View File

@@ -39,7 +39,7 @@ export interface Props {
const emptyListModel = {
title: 'There are no data sources defined yet',
buttonIcon: 'gicon gicon-add-datasources',
buttonIcon: 'gicon gicon-datasources',
buttonLink: 'datasources/new',
buttonTitle: 'Add data source',
proTip: 'You can also define data sources through configuration files.',

6
public/app/features/explore/NoDataSourceCallToAction.tsx
View File

@@ -1,6 +1,6 @@
import React, { useContext } from 'react';
import { css } from 'emotion';
import { ThemeContext, ExtraLargeLinkButton, CallToActionCard } from '@grafana/ui';
import { ThemeContext, LargeLinkButton, CallToActionCard } from '@grafana/ui';
export const NoDataSourceCallToAction = () => {
const theme = useContext(ThemeContext);
@@ -22,9 +22,9 @@ export const NoDataSourceCallToAction = () => {
);
const ctaElement = (
<ExtraLargeLinkButton href="/datasources/new" icon="gicon gicon-add-datasources">
<LargeLinkButton href="/datasources/new" icon="gicon gicon-datasources">
Add data source
</ExtraLargeLinkButton>
</LargeLinkButton>
);
const cardClassName = css`

4
public/app/features/manage-dashboards/partials/snapshot_list.html
View File

@@ -20,13 +20,13 @@
<span class="query-keyword" ng-if="snapshot.external">External</span>
</td>
<td class="text-center">
<a href="{{snapshot.url}}" class="btn btn-inverse btn-mini">
<a href="{{snapshot.url}}" class="btn btn-inverse btn-small">
<i class="fa fa-eye"></i>
View
</a>
</td>
<td class="text-right">
<a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-mini">
<a ng-click="ctrl.removeSnapshot(snapshot)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

10
public/app/features/playlist/partials/playlist.html
View File

@@ -34,13 +34,13 @@
</td>
<td class="selected-playlistitem-settings">
<button class="btn btn-inverse btn-mini" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<button class="btn btn-inverse btn-small" ng-hide="$first" ng-click="ctrl.movePlaylistItemUp(playlistItem)">
<i class="fa fa-arrow-up"></i>
</button>
<button class="btn btn-inverse btn-mini" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
<button class="btn btn-inverse btn-small" ng-hide="$last" ng-click="ctrl.movePlaylistItemDown(playlistItem)">
<i class="fa fa-arrow-down"></i>
</button>
<button class="btn btn-inverse btn-mini" ng-click="ctrl.removePlaylistItem(playlistItem)">
<button class="btn btn-inverse btn-small" ng-click="ctrl.removePlaylistItem(playlistItem)">
<i class="fa fa-remove"></i>
</button>
</td>
@@ -64,7 +64,7 @@
<i class="fa fa-star" ng-show="playlistItem.isStarred"></i>
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addPlaylistItem(playlistItem)">
<i class="fa fa-plus"></i>
Add to playlist
</button>
@@ -82,7 +82,7 @@
</a>
</td>
<td class="add-dashboard">
<button class="btn btn-inverse btn-mini pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
<button class="btn btn-inverse btn-small pull-right" ng-click="ctrl.addTagPlaylistItem(tag)">
<i class="fa fa-plus"></i>
Add to playlist
</button>

4
public/app/features/profile/partials/profile.html
View File

@@ -63,10 +63,10 @@
<td>{{org.name}}</td>
<td>{{org.role}}</td>
<td class="text-right">
<span class="btn btn-primary btn-mini" ng-show="org.orgId === contextSrv.user.orgId">
<span class="btn btn-primary btn-small" ng-show="org.orgId === contextSrv.user.orgId">
Current
</span>
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-mini" ng-show="org.orgId !== contextSrv.user.orgId">
<a ng-click="ctrl.setUsingOrg(org)" class="btn btn-inverse btn-small" ng-show="org.orgId !== contextSrv.user.orgId">
Select
</a>
</td>

6
public/app/features/teams/TeamGroupSync.tsx
View File

@@ -63,7 +63,7 @@ export class TeamGroupSync extends PureComponent<Props, State> {
<tr key={group.groupId}>
<td>{group.groupId}</td>
<td style={{ width: '1%' }}>
<a className="btn btn-danger btn-mini" onClick={() => this.onRemoveGroup(group)}>
<a className="btn btn-danger btn-small" onClick={() => this.onRemoveGroup(group)}>
<i className="fa fa-remove" />
</a>
</td>
@@ -121,8 +121,8 @@ export class TeamGroupSync extends PureComponent<Props, State> {
{groups.length === 0 && !isAdding && (
<div className="empty-list-cta">
<div className="empty-list-cta__title">There are no external groups to sync with</div>
<button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-xlarge btn-primary">
<i className="gicon gicon-add-team" />
<button onClick={this.onToggleAdding} className="empty-list-cta__button btn btn-large btn-primary">
<i className="gicon gicon-team" />
Add Group
</button>
<div className="empty-list-cta__pro-tip">

26
public/app/features/teams/TeamList.tsx
View File

@@ -73,20 +73,18 @@ export class TeamList extends PureComponent<Props, any> {
renderEmptyList() {
return (
<div className="page-container page-body">
<EmptyListCTA
model={{
title: "You haven't created any teams yet.",
buttonIcon: 'fa fa-plus',
buttonLink: 'org/teams/new',
buttonTitle: ' New team',
proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
proTipLink: '',
proTipLinkTitle: '',
proTipTarget: '_blank',
}}
/>
</div>
<EmptyListCTA
model={{
title: "You haven't created any teams yet.",
buttonIcon: 'gicon gicon-team',
buttonLink: 'org/teams/new',
buttonTitle: ' New team',
proTip: 'Assign folder and dashboard permissions to teams instead of users to ease administration.',
proTipLink: '',
proTipLinkTitle: '',
proTipTarget: '_blank',
}}
/>
);
}

10
public/app/features/teams/__snapshots__/TeamGroupSync.test.tsx.snap
View File

@@ -81,11 +81,11 @@ exports[`Render should render component 1`] = `
There are no external groups to sync with
</div>
<button
className="empty-list-cta__button btn btn-xlarge btn-primary"
className="empty-list-cta__button btn btn-large btn-primary"
onClick={[Function]}
>
<i
className="gicon gicon-add-team"
className="gicon gicon-team"
/>
Add Group
</button>
@@ -225,7 +225,7 @@ exports[`Render should render groups table 1`] = `
}
>
<a
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@@ -248,7 +248,7 @@ exports[`Render should render groups table 1`] = `
}
>
<a
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@@ -271,7 +271,7 @@ exports[`Render should render groups table 1`] = `
}
>
<a
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i

4
public/app/features/teams/partials/create_team.html
View File

@@ -18,8 +18,8 @@
<input class="gf-form-input max-width-22" type="email" ng-model="ctrl.email" placeholder="email@test.com">
</div>
<div class="gf-form-button-row">
<button type="submit" class="btn btn-primary width-12">
<i class="fa fa-save"></i> Create
<button type="submit" class="btn btn-primary">
Create
</button>
</div>
</form>

8
public/app/features/templating/partials/editor.html
View File

@@ -11,8 +11,8 @@
<div ng-if="variables.length === 0">
<div class="empty-list-cta">
<div class="empty-list-cta__title">There are no variables added yet</div>
<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-xlarge btn-primary">
<i class="gicon gicon-add-variable"></i>
<a ng-click="setMode('new')" class="empty-list-cta__button btn btn-large btn-primary">
<i class="gicon gicon-variable"></i>
Add variable
</a>
<div class="grafana-info-box">
@@ -58,12 +58,12 @@
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i></td>
<td style="width: 1%"><i ng-click="_.move(variables,$index,$index+1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i></td>
<td style="width: 1%">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-mini">
<a ng-click="duplicate(variable)" class="btn btn-inverse btn-small">
Duplicate
</a>
</td>
<td style="width: 1%">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-mini">
<a ng-click="removeVariable(variable)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>

4
public/app/features/users/InviteeRow.tsx
View File

@@ -27,7 +27,7 @@ class InviteeRow extends PureComponent<Props> {
<td>{invitee.email}</td>
<td>{invitee.name}</td>
<td className="text-right">
<button className="btn btn-inverse btn-mini" onClick={this.copyToClipboard}>
<button className="btn btn-inverse btn-small" onClick={this.copyToClipboard}>
<textarea
readOnly={true}
value={invitee.url}
@@ -39,7 +39,7 @@ class InviteeRow extends PureComponent<Props> {
&nbsp;
</td>
<td>
<button className="btn btn-danger btn-mini" onClick={() => revokeInvite(invitee.code)}>
<button className="btn btn-danger btn-small" onClick={() => revokeInvite(invitee.code)}>
<i className="fa fa-remove" />
</button>
</td>

2
public/app/features/users/UsersTable.tsx
View File

@@ -52,7 +52,7 @@ const UsersTable: FC<Props> = props => {
</div>
</td>
<td>
<div onClick={() => onRemoveUser(user)} className="btn btn-danger btn-mini">
<div onClick={() => onRemoveUser(user)} className="btn btn-danger btn-small">
<i className="fa fa-remove" />
</div>
</td>

12
public/app/features/users/__snapshots__/UsersTable.test.tsx.snap
View File

@@ -115,7 +115,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@@ -178,7 +178,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@@ -241,7 +241,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@@ -304,7 +304,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@@ -367,7 +367,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i
@@ -430,7 +430,7 @@ exports[`Render should render users table 1`] = `
</td>
<td>
<div
className="btn btn-danger btn-mini"
className="btn btn-danger btn-small"
onClick={[Function]}
>
<i

6
public/sass/_variables.generated.scss
View File

@@ -90,6 +90,12 @@ $container-max-widths: (
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
// Component heights
// -------------------------
$height-sm: 24px;
$height-md: 32px;
$height-lg: 48px;
// Typography
// -------------------------

32
public/sass/components/_buttons.scss
View File

@@ -7,7 +7,9 @@
// Core
.btn {
display: inline-block;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: $btn-font-weight;
line-height: $btn-line-height;
font-size: $font-size-base;
@@ -15,8 +17,9 @@
vertical-align: middle;
cursor: pointer;
border: none;
height: $height-md;
@include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $border-radius-sm);
@include button-size($btn-padding-y, $space-md, $font-size-base, $border-radius-sm);
&,
&:active,
@@ -51,29 +54,28 @@
// Button Sizes
// --------------------------------------------------
// XLarge
.btn-xlarge {
@include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-lg, $border-radius-sm);
font-weight: normal;
padding-bottom: $btn-padding-y-xl - 3;
.gicon {
font-size: 31px;
margin-right: $space-md;
}
}
// Large
.btn-large {
@include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $border-radius-sm);
@include button-size($btn-padding-y-lg, $space-lg, $font-size-lg, $border-radius-sm);
font-weight: normal;
height: $height-lg;
.gicon {
//font-size: 31px;
margin-right: $space-sm;
filter: brightness(100);
}
}
.btn-small {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $border-radius-sm);
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
height: $height-sm;
}
// Deprecated, only used by old plugins
.btn-mini {
@include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $border-radius-sm);
@include button-size($btn-padding-y-sm, $space-sm, $font-size-sm, $border-radius-sm);
height: $height-sm;
}
.btn-link {

5
public/sass/components/_navbar.scss
View File

@@ -112,12 +112,11 @@
display: flex;
align-items: center;
font-weight: $btn-font-weight;
padding: 6px 11px;
padding: 6px $space-sm;
line-height: 16px;
height: 30px;
color: $text-muted;
border: 1px solid $navbar-button-border;
margin-left: 3px;
margin-left: $space-xs;
white-space: nowrap;
.gicon {

1
public/sass/pages/_login.scss
View File

@@ -20,6 +20,7 @@ $login-border: #8daac5;
& .btn-primary {
@include buttonBackground(#ff6600, #bc3e06);
height: 40px;
}
}