apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

styling tweaks

Browse Source
pull/14242/head
Torkel Ödegaard 7 years ago
parent f8b1484265
commit c8e42c0216
10 changed files with 62 additions and 12 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      public/app/features/dashboard/dashgrid/GeneralTab.tsx
  2. 6
      public/app/features/dashboard/dashgrid/PanelEditor.tsx
  3. 4
      public/app/features/dashboard/dashgrid/VizTypePicker.tsx
  4. 9
      public/img/panel-tabs/alert-selected.svg
  5. 31
      public/img/panel-tabs/general-selected.svg
  6. 8
      public/img/panel-tabs/general.svg
  7. 4
      public/sass/_variables.dark.scss
  8. 1
      public/sass/components/_gf-form.scss
  9. 8
      public/sass/components/_panel_editor.scss
  10. 1
      public/sass/components/_toolbar.scss

2
public/app/features/dashboard/dashgrid/GeneralTab.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape View File

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

Write Preview
Loading…
Cancel
Save