Merge pull request #181 from flant/feat_branding

feat: branding

src/img/flant_corner.svg

@@ -0,0 +1,11 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2041 11.5583C17.0332 12.4421 16.8623 13.0405 16.5198 13.7531C16.0923 14.5513 15.7505 15.4629 14.9526 14.8077C14.4106 14.3515 13.898 13.8957 13.499 13.3256C13.0714 12.7267 12.6438 11.9859 12.3299 11.4158C11.8456 10.561 11.9882 10.4466 11.0759 10.2185L10.278 9.99082C10.3638 9.64871 10.3919 9.24972 10.3919 8.82214C10.3919 8.76511 10.3919 8.67963 10.3919 8.59409L12.0736 8.28057C12.0736 8.28057 15.6365 10.418 16.7765 10.3043C17.6602 10.247 17.3463 10.7604 17.2041 11.5583Z" fill="#39585F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8626 2.46586C17.3752 3.52048 18.4013 9.13554 16.5773 9.42047C16.1783 9.50609 15.5513 9.50609 14.8384 9.335C14.3826 9.22094 13.8982 8.90742 13.3848 8.56545C12.5297 8.02389 12.2451 7.82435 11.2473 7.88138L10.3354 7.96686C10.3067 7.71037 10.2495 7.51091 10.1641 7.28279C13.1853 5.57268 13.2424 4.91706 15.2659 2.40883C15.8362 1.66773 16.4918 1.66773 16.8626 2.46586Z" fill="#8ED8F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1881 0.157123C13.2427 0.328212 13.9838 0.527672 14.6108 0.755792C15.5228 1.18337 15.4087 1.21174 14.8672 1.9244C14.3541 2.57988 13.927 3.20699 13.5562 3.91943C13.1 4.77452 13.1286 5.14514 12.2452 5.60109L9.93653 6.74133C9.79388 6.42781 9.59406 6.19976 9.39453 6.0857C10.3923 6.02867 11.162 5.60117 11.162 4.48966C11.162 3.7199 10.763 2.808 10.1929 2.18096C10.3069 1.41127 10.6773 0.784163 11.048 0.413685C11.4183 0.043135 11.7032 0.100165 12.1881 0.157123Z" fill="#2B7E87"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.99831 0.014652C8.36871 0.014652 8.7394 0.014652 9.08151 0.014652C9.33786 0.014652 9.5942 0.014652 9.82225 0.014652C10.7346 0.014652 10.7915 -0.156365 10.4211 0.670135C10.2498 1.06927 10.079 1.49685 9.90808 1.89584C9.65138 1.66772 9.36644 1.49685 9.08151 1.41131C8.76763 1.52529 8.45447 1.72483 8.16918 1.98132C7.99823 1.55395 7.82743 1.1263 7.6279 0.727165C7.31409 -0.0137908 7.17181 0.0430949 7.99831 0.014652Z" fill="#0095DA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.03857 0.641679C3.83685 0.299716 4.63476 0.385188 5.94609 0.128626C6.97212 -0.0994212 7.74145 1.29731 7.91232 2.26631C7.37104 2.89335 7.00071 3.74851 7.00071 4.48961C7.00071 5.54401 7.68463 5.97159 8.62519 6.05728C8.39715 6.19971 8.2262 6.42783 8.05533 6.71276L5.63221 5.51564C5.09093 5.23056 5.09093 5.17368 4.83429 4.63211C4.34954 3.60586 3.80826 2.72233 3.09539 1.81036C2.75357 1.35419 2.49693 0.955199 3.03857 0.641679Z" fill="#484395"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.3571 2.26643C1.6416 1.72479 2.15501 1.83885 2.61118 2.40893C3.72225 3.77707 4.43512 5.57279 6.08819 6.2853C6.65806 6.51342 7.25687 6.941 7.8271 7.25445C7.74127 7.48235 7.71268 7.71047 7.65587 7.96696L5.11941 7.90993C4.09301 8.3661 3.97896 8.99314 3.18104 9.1926C2.41136 9.36369 1.75609 9.44909 1.38532 9.3351C-0.182349 8.79346 0.67281 3.37808 1.3571 2.26643Z" fill="#8ED8F8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.84124 13.9238C1.41373 13.0404 1.10057 12.0713 0.929626 10.9598C0.843865 10.4178 0.786619 10.0191 1.3855 10.0761C2.5256 10.1616 5.23322 8.3374 5.23322 8.3374L7.59916 8.59396C7.59916 8.67951 7.59916 8.73661 7.59916 8.82201C7.59916 9.24959 7.62775 9.64858 7.71279 10.0191L6.97212 10.2185C5.68938 10.5323 5.26188 12.5272 4.54929 13.5818C4.1786 14.1238 3.6942 14.6078 3.09532 14.7222C2.15519 14.9503 2.212 14.7222 1.84124 13.9238Z" fill="#356B5F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.22363 17.9997C10.535 17.344 11.675 15.3206 11.675 13.6389C11.675 12.1282 10.7913 11.5297 9.62262 11.3874C9.82208 11.1879 9.99339 10.9313 10.1074 10.5891L11.7319 11.0167C11.7319 11.0167 12.9005 13.9807 14.5253 15.5487C15.3519 16.318 14.3541 16.6887 13.8697 17.3158C12.8722 18.5413 11.4469 19.2252 10.3354 19.596C9.2808 19.9666 9.19497 20.3943 9.22356 19.3111C9.22363 18.8549 9.22363 18.3704 9.22363 17.9997Z" fill="#74428A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.4546 19.9381C7.45679 19.5677 5.43303 18.5982 3.75137 16.717C2.75392 15.6624 3.29556 15.8904 4.06525 14.9503C4.89175 13.9525 5.57567 12.6698 5.94644 11.8433C6.31677 11.045 6.17449 11.045 6.97247 10.8454L7.88445 10.5892C8.02709 10.9313 8.19797 11.2162 8.3975 11.4157C7.2857 11.587 6.48779 12.1854 6.48779 13.639C6.48779 15.2635 7.54241 17.2018 8.79649 17.9143C8.82493 18.57 8.71087 19.3111 8.4546 19.9381Z" fill="#1B607E"/>
+</svg>

src/module.html

@@ -33,5 +33,6 @@
 		</div>
 		<label class="gf-form-label">Show {{pager.pageStartRow()}} to {{pager.pageEndRow()}} of {{pager.totalRows()}} rows</label>
 	</div>
+  <a class="logo" href="https://flant.com/hey-grafana-user" target="_blank"></a>
 </div>
 <div class="clearfix"></div>

src/module.ts

@@ -421,6 +421,7 @@ class StatusHeatmapCtrl extends MetricsPanelCtrl {
   onInitEditMode() {
     this.addEditorTab('Options', optionsEditorCtrl, 2);
     this.addEditorTab('Tooltip', tooltipEditorCtrl, 3);
+    this.addEditorTab('About', 'public/plugins/flant-statusmap-panel/partials/about_editor.html', 4);
     this.unitFormats = kbn.getUnitFormats();
   }
 

src/partials/about_editor.html

@@ -0,0 +1,12 @@
+<div class="editor-row statusmap-about">
+  <div class="section gf-form-group">
+    <div class="header-logo"></div>
+
+    <div class="gf-form">
+      Statusmap panel plugin is made by&nbsp;<a href="https://flant.com" target="_blank">Flant</a>.
+    </div>
+    <div class="gf-form">
+      Your issues, PRs, and GitHub stars are&nbsp;<a href="https://github.com/flant/grafana-statusmap" target="_blank">welcome</a>!
+    </div>
+  </div>
+</div>

src/styles/_statusmap.scss

@@ -14,6 +14,25 @@
   }
 }
 
+.status-heatmap-wrapper {
+  position: relative;
+  a.logo {
+    display: block;
+    background: $branding-logo no-repeat;
+    background-size: contain;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    opacity: 0.15;
+
+    :hover > & {
+      opacity: 1;
+    }
+  }
+}
+
 .statusmap-panel {
   position: relative;
 
@@ -154,3 +173,16 @@
     }
   }
 }
+
+.statusmap-about {
+  .header-logo {
+    height: 145px;
+    width: 330px;
+    background: $about-header-logo no-repeat;
+    background-size: contain;
+    margin-bottom: 7px;
+  }
+  a {
+    text-decoration: underline;
+  }
+}

src/styles/_variables.scss

@@ -1,3 +1,5 @@
 $font-size-sm: 12px !default;
 $font-size-tick: 11px;
 
+$about-header-logo: url('../img/statusmap_icon.svg');
+$branding-logo: url('../img/flant_corner.svg');