Commit c148d890 by Torkel Ödegaard

feat(plugins): progress on plugins page

parent b98e5690
...@@ -4,6 +4,7 @@ import "github.com/grafana/grafana/pkg/plugins" ...@@ -4,6 +4,7 @@ import "github.com/grafana/grafana/pkg/plugins"
type PluginSetting struct { type PluginSetting struct {
Name string `json:"name"` Name string `json:"name"`
Type string `json:"type"`
PluginId string `json:"pluginId"` PluginId string `json:"pluginId"`
Enabled bool `json:"enabled"` Enabled bool `json:"enabled"`
Pinned bool `json:"pinned"` Pinned bool `json:"pinned"`
......
...@@ -42,6 +42,7 @@ func GetPluginSettingById(c *middleware.Context) Response { ...@@ -42,6 +42,7 @@ func GetPluginSettingById(c *middleware.Context) Response {
return ApiError(404, "Plugin not found, no installed plugin with that id", nil) return ApiError(404, "Plugin not found, no installed plugin with that id", nil)
} else { } else {
dto := &dtos.PluginSetting{ dto := &dtos.PluginSetting{
Type: def.Type,
PluginId: def.Id, PluginId: def.Id,
Name: def.Name, Name: def.Name,
Info: &def.Info, Info: &def.Info,
......
...@@ -56,6 +56,10 @@ func (fp *FrontendPluginBase) handleModuleDefaults() { ...@@ -56,6 +56,10 @@ func (fp *FrontendPluginBase) handleModuleDefaults() {
} }
func evalRelativePluginUrlPath(pathStr string, pluginId string) string { func evalRelativePluginUrlPath(pathStr string, pluginId string) string {
if pathStr == "" {
return ""
}
u, _ := url.Parse(pathStr) u, _ := url.Parse(pathStr)
if u.IsAbs() { if u.IsAbs() {
return pathStr return pathStr
......
...@@ -8,11 +8,13 @@ export class PluginEditCtrl { ...@@ -8,11 +8,13 @@ export class PluginEditCtrl {
pluginId: any; pluginId: any;
includedPanels: any; includedPanels: any;
includedDatasources: any; includedDatasources: any;
tabIndex: number;
/** @ngInject */ /** @ngInject */
constructor(private backendSrv: any, private $routeParams: any) { constructor(private backendSrv: any, private $routeParams: any) {
this.model = {}; this.model = {};
this.pluginId = $routeParams.pluginId; this.pluginId = $routeParams.pluginId;
this.tabIndex = 0;
this.backendSrv.get(`/api/org/plugins/${this.pluginId}/settings`).then(result => { this.backendSrv.get(`/api/org/plugins/${this.pluginId}/settings`).then(result => {
this.model = result; this.model = result;
......
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
@import "utils/widths"; @import "utils/widths";
// LAYOUTS // LAYOUTS
@import "layout/lists";
@import "layout/page"; @import "layout/page";
// COMPONENTS // COMPONENTS
...@@ -44,7 +45,6 @@ ...@@ -44,7 +45,6 @@
@import "components/tagsinput"; @import "components/tagsinput";
@import "components/tables_lists"; @import "components/tables_lists";
@import "components/search"; @import "components/search";
@import "components/dashboard";
@import "components/tightform"; @import "components/tightform";
@import "components/gf-form"; @import "components/gf-form";
@import "components/sidemenu"; @import "components/sidemenu";
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
// PAGES // PAGES
@import "pages/login"; @import "pages/login";
@import "pages/dashboard";
@import "pages/playlist"; @import "pages/playlist";
@import "pages/admin"; @import "pages/admin";
@import "pages/alerting"; @import "pages/alerting";
......
...@@ -50,8 +50,10 @@ $critical: #ed2e18; ...@@ -50,8 +50,10 @@ $critical: #ed2e18;
// ------------------------- // -------------------------
$body-bg: rgb(20,20,20); $body-bg: rgb(20,20,20);
$page-bg: $dark-2; $page-bg: $dark-2;
$body-color: $gray-4; $body-color: $gray-4;
$text-color: $gray-4; $text-color: $gray-4;
$text-color-strong: $white;
$text-color-weak: $gray-1;
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%); $brand-gradient: linear-gradient(to right, rgba(255,213,0,0.7) 0%, rgba(255,68,0,0.7) 99%, rgba(255,68,0,0.7) 100%);
......
...@@ -58,6 +58,8 @@ $body-bg: $white; ...@@ -58,6 +58,8 @@ $body-bg: $white;
$page-bg: $white; $page-bg: $white;
$body-color: $gray-1; $body-color: $gray-1;
$text-color: $gray-1; $text-color: $gray-1;
$text-color-strong: $white;
$text-color-weak: $gray-1;
// gradients // gradients
$brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%); $brand-gradient: linear-gradient(to right, rgba(255,213,0,1.0) 0%, rgba(255,68,0,1.0) 99%, rgba(255,68,0,1.0) 100%);
......
...@@ -93,7 +93,7 @@ $font-size-sm: .875rem !default; ...@@ -93,7 +93,7 @@ $font-size-sm: .875rem !default;
$font-size-xs: .75rem !default; $font-size-xs: .75rem !default;
$line-height-base: 1.5 !default; $line-height-base: 1.5 !default;
$font-weight-semi-bold: 600; $font-weight-semi-bold: 600;
$font-size-h1: 2.0rem !default; $font-size-h1: 2.0rem !default;
$font-size-h2: 1.75rem !default; $font-size-h2: 1.75rem !default;
...@@ -141,6 +141,11 @@ $border-radius-sm: 0.1rem !default; ...@@ -141,6 +141,11 @@ $border-radius-sm: 0.1rem !default;
$caret-width: .3em !default; $caret-width: .3em !default;
$caret-width-lg: $caret-width !default; $caret-width-lg: $caret-width !default;
// Page
$page-sidebar-width: 10rem;
$page-sidebar-margin: 5rem;
// Links // Links
// ------------------------- // -------------------------
$link-decoration: none !default; $link-decoration: none !default;
......
...@@ -65,7 +65,7 @@ h1, h2, h3, h4, h5, h6, ...@@ -65,7 +65,7 @@ h1, h2, h3, h4, h5, h6,
color: $headings-color; color: $headings-color;
} }
h1, .h1 { font-size: $font-size-h1; } h1, .h1 { font-size: $font-size-h1; font-style: italic; }
h2, .h2 { font-size: $font-size-h2; } h2, .h2 { font-size: $font-size-h2; }
h3, .h3 { font-size: $font-size-h3; } h3, .h3 { font-size: $font-size-h3; }
h4, .h4 { font-size: $font-size-h4; } h4, .h4 { font-size: $font-size-h4; }
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
@include border-radius(3px); @include border-radius(3px);
border: 1px solid $divider-border-color; border: 1px solid $divider-border-color;
background-color: transparent; background-color: transparent;
border-bottom: 1px solid $panel-bg; border-bottom: 1px solid $page-bg;
color: $link-color; color: $link-color;
} }
......
.ui-list {
margin: 0;
padding: 0;
list-style: none;
> li {
margin-bottom: 0.3125rem;
&:last-child {
margin-bottom: 0;
}
}
}
...@@ -3,21 +3,10 @@ ...@@ -3,21 +3,10 @@
height: 100%; height: 100%;
} }
.dashboard-container {
padding: $dashboard-padding;
width: 100%;
}
.main-view { .main-view {
height: 100%; height: 100%;
} }
.page-dashboard {
.main-view {
background-image: none;
}
}
.page-container { .page-container {
background-color: $page-bg; background-color: $page-bg;
padding: ($spacer * 2) ($spacer * 4); padding: ($spacer * 2) ($spacer * 4);
...@@ -27,12 +16,29 @@ ...@@ -27,12 +16,29 @@
background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%) background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%)
} }
.page-header-logo { .page-body {
max-width: 7rem; @include media-breakpoint-up(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
}
.page-content-with-sidebar {
width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
}
.page-sidebar {
@include media-breakpoint-up(md) {
width: $page-sidebar-width;
margin-left: $page-sidebar-margin;
}
} }
.page-header { .page-header {
padding: $spacer 0 $spacer/2 0; padding: $spacer 0 $spacer/2 0;
margin-bottom: 2rem;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
...@@ -40,13 +46,12 @@ ...@@ -40,13 +46,12 @@
@include brand-bottom-border(); @include brand-bottom-border();
h1 { h1 {
font-style: italic;
flex-grow: 1; flex-grow: 1;
} }
button, a { button, a {
margin-left: $spacer; margin-left: $spacer;
} }
margin-bottom: 2rem;
} }
.page-heading { .page-heading {
...@@ -75,3 +80,20 @@ ...@@ -75,3 +80,20 @@
} }
} }
.page-sidebar {
color: $text-color-weak;
h4 {
font-size: $font-size-base;
font-weight: $font-weight-semi-bold;
color: $text-color-strong;
}
h5 {
font-size: $font-size-base;
color: $text-color-weak;
font-weight: $font-weight-semi-bold;
}
}
.page-sidebar-section {
margin-bottom: $spacer*2;
}
.dashboard-container {
padding: $dashboard-padding;
width: 100%;
}
.page-dashboard {
.main-view {
background-image: none;
}
}
.template-variable { .template-variable {
color: $variable; color: $variable;
} }
......
.plugin-header {
@include clearfix();
padding: $spacer 0 $spacer/2 0;
margin-bottom: 2rem;
}
.plugin-header-logo {
float: left;
width: 7rem;
img {
width: 7rem;
}
margin-right: $spacer;
}
.plugin-header-info-block {
padding-top: $spacer;
}
.plugin-header-author {
}
.plugin-header-stamps-type {
color: $link-color-disabled;
text-transform: uppercase;
}
// .app-edit-logo-box { // .app-edit-logo-box {
// padding: 1.2rem; // padding: 1.2rem;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment