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

styling tweaks

Browse Source
This commit is contained in:
Torkel Ödegaard 2018-11-23 07:31:13 +01:00
parent f8b1484265
commit c8e42c0216
10 changed files with 62 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/features/dashboard/dashgrid/GeneralTab.tsx
View File

@ -44,7 +44,7 @@ export class GeneralTab extends PureComponent<Props> {
render() {
return (
<EditorTabBody heading="General" toolbarItems={[]}>
<EditorTabBody heading="Basic Panel Options" toolbarItems={[]}>
<div ref={element => (this.element = element)} />
</EditorTabBody>
);

6
public/app/features/dashboard/dashgrid/PanelEditor.tsx
View File

@ -72,7 +72,11 @@ export class PanelEditor extends PureComponent<PanelEditorProps> {
const { plugin } = this.props;
const activeTab = store.getState().location.query.tab || 'queries';
const tabs = [{ id: 'queries', text: 'Queries' }, { id: 'visualization', text: 'Visualization' }];
const tabs = [
{ id: 'queries', text: 'Queries' },
{ id: 'visualization', text: 'Visualization' },
{ id: 'general', text: 'General' },
];
if (config.alertingEnabled && plugin.id === 'graph') {
tabs.push({

4
public/app/features/dashboard/dashgrid/VizTypePicker.tsx
View File

@ -67,10 +67,6 @@ export class VizTypePicker extends PureComponent<Props, State> {
/>
<i className="gf-form-input-icon fa fa-search" />
</label>
<div className="p-l-1">
<button className="btn toggle-btn gf-form-btn active">Basic Types</button>
<button className="btn toggle-btn gf-form-btn">Master Types</button>
</div>
</>
);
}

9
public/img/panel-tabs/alert-selected.svg Normal file
View File

@ -0,0 +1,9 @@
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
<line x1="12.5925" y1="28.1482" x2="31.4073" y2="28.1482" stroke="#8E8E8E" stroke-width="4" stroke-linecap="round"/>
<ellipse cx="22.0001" cy="20.3704" rx="8.96296" ry="9.77778" fill="#8E8E8E"/>
<circle cx="22.0001" cy="30.1482" r="2.44444" fill="#8E8E8E"/>
<line x1="18.7407" y1="30.463" x2="25.2592" y2="30.463" stroke="#09090B"/>
<rect x="13.0371" y="20.3704" width="17.9259" height="6.51852" fill="#8E8E8E"/>
<ellipse cx="22.0001" cy="11.0001" rx="0.814815" ry="1.22222" fill="#8E8E8E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 677 B

31
public/img/panel-tabs/general-selected.svg Normal file
View File

@ -0,0 +1,31 @@
<svg width="65" height="54" viewBox="0 0 65 54" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="27" cy="27" r="25" fill="#09090B" stroke="url(#paint0_linear)" stroke-width="4"/>
<ellipse cx="27" cy="33" rx="14" ry="6" fill="url(#paint1_linear)"/>
<ellipse cx="27" cy="30" rx="14" ry="6" fill="#09090B"/>
<ellipse cx="27" cy="27" rx="14" ry="6" fill="url(#paint2_linear)"/>
<ellipse cx="27" cy="24" rx="14" ry="6" fill="#09090B"/>
<ellipse cx="27" cy="21" rx="14" ry="6" fill="url(#paint3_linear)"/>
<path d="M52 37L65 26.9999L52 17L52 37Z" fill="url(#paint4_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="27" y1="0" x2="27" y2="54" gradientUnits="userSpaceOnUse">
<stop stop-color="#D44A3A"/>
<stop offset="1" stop-color="#EB7B18"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="27" y1="2.01165e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
<stop stop-color="#D44A3A"/>
<stop offset="1" stop-color="#FEBC11"/>
</linearGradient>
<linearGradient id="paint2_linear" x1="27" y1="1.40816e-06" x2="27" y2="54" gradientUnits="userSpaceOnUse">
<stop stop-color="#D44A3A"/>
<stop offset="1" stop-color="#FEBC11"/>
</linearGradient>
<linearGradient id="paint3_linear" x1="27" y1="-6.03497e-07" x2="27" y2="54" gradientUnits="userSpaceOnUse">
<stop stop-color="#D44A3A"/>
<stop offset="1" stop-color="#FEBC11"/>
</linearGradient>
<linearGradient id="paint4_linear" x1="57" y1="54" x2="57" y2="7.55191e-06" gradientUnits="userSpaceOnUse">
<stop stop-color="#EB7B18"/>
<stop offset="1" stop-color="#D44A3A"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

8
public/img/panel-tabs/general.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="20" fill="#09090B" stroke="#8E8E8E" stroke-width="4"/>
<ellipse cx="21.9999" cy="26.8889" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
<ellipse cx="21.9999" cy="24.4444" rx="11.4074" ry="4.88889" fill="#09090B"/>
<ellipse cx="21.9999" cy="22" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
<ellipse cx="21.9999" cy="19.5555" rx="11.4074" ry="4.88889" fill="#09090B"/>
<ellipse cx="21.9999" cy="17.1111" rx="11.4074" ry="4.88889" fill="#8E8E8E"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 570 B

4
public/sass/_variables.dark.scss
View File

@ -79,7 +79,7 @@ $brand-gradient: linear-gradient(
);
$page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px);
$edit-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 00px, #090909 50%);
$edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 00px, #090909 60%);
// Links
// -------------------------
@ -366,6 +366,6 @@ $switch-slider-shadow: 0 0 3px black;
//Checkbox
// -------------------------
$checkbox-bg: $dark-1;
$checkbox-border: 1px solid $gray-2;
$checkbox-border: 1px solid $gray-1;
$checkbox-checked-bg: linear-gradient(0deg, $orange, $red);
$checkbox-color: $dark-1;

1
public/sass/components/_gf-form.scss
View File

@ -181,6 +181,7 @@ $input-border: 1px solid $input-border-color;
@at-root textarea#{&} {
overflow: auto;
white-space: pre-wrap;
height: auto;
}
// Unstyle the caret on `<select>`s in IE10+.

8
public/sass/components/_panel_editor.scss
View File

@ -37,6 +37,7 @@
margin: 0 62px;
border-left: 2px solid #ac5224;
border-radius: 3px;
box-shadow: $popover-shadow;
}
.panel-editor__scroll {
@ -167,8 +168,8 @@
flex-direction: column;
position: absolute;
top: 79px;
left: 5px;
align-items: center;
left: 9px;
align-items: flex-start;
&::before {
content: '';
@ -176,7 +177,7 @@
position: absolute;
top: 0;
bottom: 0;
left: 25px;
left: 21px;
width: 2px;
background: #8e8e8e;
}
@ -198,7 +199,6 @@
&.active {
position: relative;
left: 4px;
}
img {

1
public/sass/components/_toolbar.scss
View File

@ -8,6 +8,7 @@
flex: 0 0 auto;
background: $toolbar-bg;
border-radius: 3px;
height: 44px;
}
.toolbar__heading {