From c148d89004e5aee23472fcda4039f9509f3b41a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 26 Feb 2016 18:25:39 +0100 Subject: [PATCH] feat(plugins): progress on plugins page --- pkg/api/dtos/plugins.go | 1 + pkg/api/plugin_setting.go | 1 + pkg/plugins/frontend_plugin.go | 4 + public/app/features/plugins/edit_ctrl.ts | 2 + .../app/features/plugins/partials/edit.html | 251 +++++++++++------- public/sass/_grafana.scss | 3 +- public/sass/_variables.dark.scss | 6 +- public/sass/_variables.light.scss | 2 + public/sass/_variables.scss | 7 +- public/sass/base/_type.scss | 2 +- public/sass/components/_tabs.scss | 2 +- public/sass/layout/_lists.scss | 14 + public/sass/layout/_page.scss | 52 ++-- .../{components => pages}/_dashboard.scss | 11 + public/sass/pages/_plugins.scss | 27 ++ 15 files changed, 266 insertions(+), 119 deletions(-) create mode 100644 public/sass/layout/_lists.scss rename public/sass/{components => pages}/_dashboard.scss (96%) diff --git a/pkg/api/dtos/plugins.go b/pkg/api/dtos/plugins.go index 6286832e352..af96202222f 100644 --- a/pkg/api/dtos/plugins.go +++ b/pkg/api/dtos/plugins.go @@ -4,6 +4,7 @@ import "github.com/grafana/grafana/pkg/plugins" type PluginSetting struct { Name string `json:"name"` + Type string `json:"type"` PluginId string `json:"pluginId"` Enabled bool `json:"enabled"` Pinned bool `json:"pinned"` diff --git a/pkg/api/plugin_setting.go b/pkg/api/plugin_setting.go index dde75c95729..08fc5296434 100644 --- a/pkg/api/plugin_setting.go +++ b/pkg/api/plugin_setting.go @@ -42,6 +42,7 @@ func GetPluginSettingById(c *middleware.Context) Response { return ApiError(404, "Plugin not found, no installed plugin with that id", nil) } else { dto := &dtos.PluginSetting{ + Type: def.Type, PluginId: def.Id, Name: def.Name, Info: &def.Info, diff --git a/pkg/plugins/frontend_plugin.go b/pkg/plugins/frontend_plugin.go index a1bcd0c68b5..5acb9966495 100644 --- a/pkg/plugins/frontend_plugin.go +++ b/pkg/plugins/frontend_plugin.go @@ -56,6 +56,10 @@ func (fp *FrontendPluginBase) handleModuleDefaults() { } func evalRelativePluginUrlPath(pathStr string, pluginId string) string { + if pathStr == "" { + return "" + } + u, _ := url.Parse(pathStr) if u.IsAbs() { return pathStr diff --git a/public/app/features/plugins/edit_ctrl.ts b/public/app/features/plugins/edit_ctrl.ts index 38ecc04906e..3d1e724e0c4 100644 --- a/public/app/features/plugins/edit_ctrl.ts +++ b/public/app/features/plugins/edit_ctrl.ts @@ -8,11 +8,13 @@ export class PluginEditCtrl { pluginId: any; includedPanels: any; includedDatasources: any; + tabIndex: number; /** @ngInject */ constructor(private backendSrv: any, private $routeParams: any) { this.model = {}; this.pluginId = $routeParams.pluginId; + this.tabIndex = 0; this.backendSrv.get(`/api/org/plugins/${this.pluginId}/settings`).then(result => { this.model = result; diff --git a/public/app/features/plugins/partials/edit.html b/public/app/features/plugins/partials/edit.html index d93d76b1fc9..fb4600aec26 100644 --- a/public/app/features/plugins/partials/edit.html +++ b/public/app/features/plugins/partials/edit.html @@ -1,112 +1,167 @@ - + Apps
-
- -

- {{ctrl.model.name}} -

-
- -
-
- {{ctrl.model.info.description}}
- - Version: {{ctrl.model.info.version}}     Updated: {{ctrl.model.info.updated}} - -
- -
- -       - +
+ +
+

{{ctrl.model.name}}

+
By {{ctrl.model.info.author.name}}
+
+ + {{ctrl.model.type}} + +
-
- + + + +
+
+ README.md +
+ +
+ Details +
+ +
+
+
+ +
+
+ +
+
+
+ +
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 84ea799febc..42956f3c3fa 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -26,6 +26,7 @@ @import "utils/widths"; // LAYOUTS +@import "layout/lists"; @import "layout/page"; // COMPONENTS @@ -44,7 +45,6 @@ @import "components/tagsinput"; @import "components/tables_lists"; @import "components/search"; -@import "components/dashboard"; @import "components/tightform"; @import "components/gf-form"; @import "components/sidemenu"; @@ -69,6 +69,7 @@ // PAGES @import "pages/login"; +@import "pages/dashboard"; @import "pages/playlist"; @import "pages/admin"; @import "pages/alerting"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 7c6c4338b72..cf6fbf5d793 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -50,8 +50,10 @@ $critical: #ed2e18; // ------------------------- $body-bg: rgb(20,20,20); $page-bg: $dark-2; -$body-color: $gray-4; -$text-color: $gray-4; +$body-color: $gray-4; +$text-color: $gray-4; +$text-color-strong: $white; +$text-color-weak: $gray-1; // 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%); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 2995ac44717..af66e2c2389 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -58,6 +58,8 @@ $body-bg: $white; $page-bg: $white; $body-color: $gray-1; $text-color: $gray-1; +$text-color-strong: $white; +$text-color-weak: $gray-1; // 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%); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index fd5857c30a0..91e7865e630 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -93,7 +93,7 @@ $font-size-sm: .875rem !default; $font-size-xs: .75rem !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-h2: 1.75rem !default; @@ -141,6 +141,11 @@ $border-radius-sm: 0.1rem !default; $caret-width: .3em !default; $caret-width-lg: $caret-width !default; +// Page + +$page-sidebar-width: 10rem; +$page-sidebar-margin: 5rem; + // Links // ------------------------- $link-decoration: none !default; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index bf4045daa1d..b26f5493d8e 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -65,7 +65,7 @@ h1, h2, h3, h4, h5, h6, 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; } h3, .h3 { font-size: $font-size-h3; } h4, .h4 { font-size: $font-size-h4; } diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 05988c7c763..0165eec93d6 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -13,7 +13,7 @@ @include border-radius(3px); border: 1px solid $divider-border-color; background-color: transparent; - border-bottom: 1px solid $panel-bg; + border-bottom: 1px solid $page-bg; color: $link-color; } diff --git a/public/sass/layout/_lists.scss b/public/sass/layout/_lists.scss new file mode 100644 index 00000000000..3333e8d937b --- /dev/null +++ b/public/sass/layout/_lists.scss @@ -0,0 +1,14 @@ + +.ui-list { + margin: 0; + padding: 0; + list-style: none; + + > li { + margin-bottom: 0.3125rem; + + &:last-child { + margin-bottom: 0; + } + } +} diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 86fb945ed61..bf323a61dfc 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -3,21 +3,10 @@ height: 100%; } -.dashboard-container { - padding: $dashboard-padding; - width: 100%; -} - .main-view { height: 100%; } -.page-dashboard { - .main-view { - background-image: none; - } -} - .page-container { background-color: $page-bg; padding: ($spacer * 2) ($spacer * 4); @@ -27,12 +16,29 @@ background-image: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%) } -.page-header-logo { - max-width: 7rem; +.page-body { + @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 { padding: $spacer 0 $spacer/2 0; + margin-bottom: 2rem; + display: flex; justify-content: flex-end; align-items: flex-end; @@ -40,13 +46,12 @@ @include brand-bottom-border(); h1 { - font-style: italic; flex-grow: 1; } + button, a { margin-left: $spacer; } - margin-bottom: 2rem; } .page-heading { @@ -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; +} diff --git a/public/sass/components/_dashboard.scss b/public/sass/pages/_dashboard.scss similarity index 96% rename from public/sass/components/_dashboard.scss rename to public/sass/pages/_dashboard.scss index c4fbb994b24..b04a9ffa084 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -1,3 +1,14 @@ +.dashboard-container { + padding: $dashboard-padding; + width: 100%; +} + +.page-dashboard { + .main-view { + background-image: none; + } +} + .template-variable { color: $variable; } diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss index 217327c60f5..299a1ff739a 100644 --- a/public/sass/pages/_plugins.scss +++ b/public/sass/pages/_plugins.scss @@ -1,3 +1,30 @@ +.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 { // padding: 1.2rem;