From 952e4dab3e463a4c0c32b509032b9371f96a7038 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Tue, 2 Feb 2016 22:59:22 -0800 Subject: [PATCH 001/444] Arranged http_api docs in a better way --- docs/sources/http_api/admin.md | 274 +++++ docs/sources/http_api/dashboards.md | 261 +++++ docs/sources/http_api/data_sources.md | 190 +++ docs/sources/http_api/first_steps.md | 43 + docs/sources/http_api/general.md | 71 ++ docs/sources/http_api/orgs.md | 343 ++++++ docs/sources/http_api/snapshots.md | 137 +++ docs/sources/http_api/users.md | 254 ++++ docs/sources/reference/http_api.md | 1534 ------------------------- 9 files changed, 1573 insertions(+), 1534 deletions(-) create mode 100644 docs/sources/http_api/admin.md create mode 100644 docs/sources/http_api/dashboards.md create mode 100644 docs/sources/http_api/data_sources.md create mode 100644 docs/sources/http_api/first_steps.md create mode 100644 docs/sources/http_api/general.md create mode 100644 docs/sources/http_api/orgs.md create mode 100644 docs/sources/http_api/snapshots.md create mode 100644 docs/sources/http_api/users.md delete mode 100644 docs/sources/reference/http_api.md diff --git a/docs/sources/http_api/admin.md b/docs/sources/http_api/admin.md new file mode 100644 index 00000000000..4688b4f5d9f --- /dev/null +++ b/docs/sources/http_api/admin.md @@ -0,0 +1,274 @@ +---- +page_title: Admin APIs +page_description: Grafana Admin API Reference +page_keywords: grafana, admin, http, api, documentation +--- + +## Admin API + +### Settings + +`GET /api/admin/settings` + +**Example Request**: + + GET /api/admin/settings + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "DEFAULT": + { + "app_mode":"production"}, + "analytics": + { + "google_analytics_ua_id":"", + "reporting_enabled":"false" + }, + "auth.anonymous":{ + "enabled":"true", + "org_name":"Main Org.", + "org_role":"Viewer" + }, + "auth.basic":{ + "enabled":"false" + }, + "auth.github":{ + "allow_sign_up":"false", + "allowed_domains":"", + "allowed_organizations":"", + "api_url":"https://api.github.com/user", + "auth_url":"https://github.com/login/oauth/authorize", + "client_id":"some_id", + "client_secret":"************", + "enabled":"false", + "scopes":"user:email", + "team_ids":"", + "token_url":"https://github.com/login/oauth/access_token" + }, + "auth.google":{ + "allow_sign_up":"false","allowed_domains":"", + "api_url":"https://www.googleapis.com/oauth2/v1/userinfo", + "auth_url":"https://accounts.google.com/o/oauth2/auth", + "client_id":"some_client_id", + "client_secret":"************", + "enabled":"false", + "scopes":"https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email", + "token_url":"https://accounts.google.com/o/oauth2/token" + }, + "auth.ldap":{ + "config_file":"/etc/grafana/ldap.toml", + "enabled":"false" + }, + "auth.proxy":{ + "auto_sign_up":"true", + "enabled":"false", + "header_name":"X-WEBAUTH-USER", + "header_property":"username" + }, + "dashboards.json":{ + "enabled":"false", + "path":"/var/lib/grafana/dashboards" + }, + "database":{ + "host":"127.0.0.1:0000", + "name":"grafana", + "password":"************", + "path":"grafana.db", + "ssl_mode":"disable", + "type":"sqlite3", + "user":"root" + }, + "emails":{ + "templates_pattern":"emails/*.html", + "welcome_email_on_sign_up":"false" + }, + "event_publisher":{ + "enabled":"false", + "exchange":"grafana_events", + "rabbitmq_url":"amqp://localhost/" + }, + "log":{ + "buffer_len":"10000", + "level":"Info", + "mode":"file" + }, + "log.console":{ + "level":"" + }, + "log.file":{ + "daily_rotate":"true", + "file_name":"", + "level":"", + "log_rotate":"true", + "max_days":"7", + "max_lines":"1000000", + "max_lines_shift":"28", + "max_size_shift":"" + }, + "paths":{ + "data":"/tsdb/grafana", + "logs":"/logs/apps/grafana"}, + "security":{ + "admin_password":"************", + "admin_user":"admin", + "cookie_remember_name":"grafana_remember", + "cookie_username":"grafana_user", + "disable_gravatar":"false", + "login_remember_days":"7", + "secret_key":"************" + }, + "server":{ + "cert_file":"", + "cert_key":"", + "domain":"mygraf.com", + "enable_gzip":"false", + "enforce_domain":"false", + "http_addr":"127.0.0.1", + "http_port":"0000", + "protocol":"http", + "root_url":"%(protocol)s://%(domain)s:%(http_port)s/", + "router_logging":"true", + "static_root_path":"public" + }, + "session":{ + "cookie_name":"grafana_sess", + "cookie_secure":"false", + "gc_interval_time":"", + "provider":"file", + "provider_config":"sessions", + "session_life_time":"86400" + }, + "smtp":{ + "cert_file":"", + "enabled":"false", + "from_address":"admin@grafana.localhost", + "host":"localhost:25", + "key_file":"", + "password":"************", + "skip_verify":"false", + "user":""}, + "users":{ + "allow_org_create":"true", + "allow_sign_up":"false", + "auto_assign_org":"true", + "auto_assign_org_role":"Viewer" + } + } + +### Grafana Stats + +`GET /api/admin/stats` + +**Example Request**: + + GET /api/admin/stats + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "user_count":2, + "org_count":1, + "dashboard_count":4, + "db_snapshot_count":2, + "db_tag_count":6, + "data_source_count":1, + "playlist_count":1, + "starred_db_count":2, + "grafana_admin_count":2 + } + +### Global Users + +`POST /api/admin/users` + +Create new user + +**Example Request**: + + POST /api/admin/users HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "name":"User", + "email":"user@graf.com", + "login":"user", + "password":"userpassword" + } + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"id":5,"message":"User created"} + +### Password for User + +`PUT /api/admin/users/:id/password` + +Change password for specific user + +**Example Request**: + + PUT /api/admin/users/2/password HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"password":"userpassword"} + +### Permissions + +`PUT /api/admin/users/:id/permissions` + +**Example Request**: + + PUT /api/admin/users/2/permissions HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {message: "User permissions updated"} + +### Delete global User + +`DELETE /api/admin/users/:id` + +**Example Request**: + + DELETE /api/admin/users/2 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {message: "User deleted"} \ No newline at end of file diff --git a/docs/sources/http_api/dashboards.md b/docs/sources/http_api/dashboards.md new file mode 100644 index 00000000000..e1cbf6e436f --- /dev/null +++ b/docs/sources/http_api/dashboards.md @@ -0,0 +1,261 @@ +---- +page_title: Dashboards API +page_description: Grafana Dashboards API Reference +page_keywords: grafana, admin, http, api, documentation, dashboards +--- + +## Dashboards API + +### Create / Update dashboard + +`POST /api/dashboards/db` + +Creates a new dashboard or updates an existing dashboard. + +**Example Request for new dashboard**: + + POST /api/dashboards/db HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "dashboard": { + "id": null, + "title": "Production Overview", + "tags": [ "templated" ], + "timezone": "browser", + "rows": [ + { + } + ], + "schemaVersion": 6, + "version": 0 + }, + "overwrite": false + } + +JSON Body schema: + +- **dashboard** – The complete dashboard model, id = null to create a new dashboard +- **overwrite** – Set to true if you want to overwrite existing dashboard with newer version or with same dashboard title. + +**Example Response**: + + HTTP/1.1 200 OK + Content-Type: application/json; charset=UTF-8 + Content-Length: 78 + + { + "slug": "production-overview", + "status": "success", + "version": 1 + } + +Status Codes: + +- **200** – Created +- **400** – Errors (invalid json, missing or invalid fields, etc) +- **401** – Unauthorized +- **412** – Precondition failed + +The **412** status code is used when a newer dashboard already exists (newer, its version is greater than the version that was sent). The +same status code is also used if another dashboard exists with the same title. The response body will look like this: + + HTTP/1.1 412 Precondition Failed + Content-Type: application/json; charset=UTF-8 + Content-Length: 97 + + { + "message": "The dashboard has been changed by someone else", + "status": "version-mismatch" + } + +In in case of title already exists the `status` property will be `name-exists`. + +### Get dashboard + +`GET /api/dashboards/db/:slug` + +Will return the dashboard given the dashboard slug. Slug is the url friendly version of the dashboard title. + +**Example Request**: + + GET /api/dashboards/db/production-overview HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "meta": { + "isStarred": false, + "slug": "production-overview" + }, + "model": { + "id": null, + "title": "Production Overview", + "tags": [ "templated" ], + "timezone": "browser", + "rows": [ + { + } + ], + "schemaVersion": 6, + "version": 0 + } + } + +### Delete dashboard + +`DELETE /api/dashboards/db/:slug` + +The above will delete the dashboard with the specified slug. The slug is the url friendly (unique) version of the dashboard title. + +**Example Request**: + + DELETE /api/dashboards/db/test HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"title": "Test"} + +### Gets the home dashboard + +`GET /api/dashboards/home` + +Will return the home dashboard. + +**Example Request**: + + GET /api/dashboards/home HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "meta": { + "isHome":true, + "canSave":false, + "canEdit":false, + "canStar":false, + "slug":"", + "expires":"0001-01-01T00:00:00Z", + "created":"0001-01-01T00:00:00Z" + }, + "dashboard": { + "editable":false, + "hideControls":true, + "nav":[ + { + "enable":false, + "type":"timepicker" + } + ], + "rows": [ + { + + } + ], + "style":"dark", + "tags":[], + "templating":{ + "list":[ + ] + }, + "time":{ + }, + "timezone":"browser", + "title":"Home", + "version":5 + } + } + +### Tags for Dashboard + + +`GET /api/dashboards/tags` + +Get all tabs of dashboards + +**Example Request**: + + GET /api/dashboards/home HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "term":"tag1", + "count":1 + }, + { + "term":"tag2", + "count":4 + } + ] + +### Dashboard from JSON file + +`GET /file/:file` + +### Search Dashboards + +`GET /api/search/` + +Status Codes: + +- **query** – Search Query +- **tags** – Tags to use +- **starred** – Flag indicating if only starred Dashboards should be returned +- **tagcloud** - Flag indicating if a tagcloud should be returned + +**Example Request**: + + GET /api/search?query=MyDashboard&starred=true&tag=prod HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "id":1, + "title":"Production Overview", + "uri":"db/production-overview", + "type":"dash-db", + "tags":[], + "isStarred":false + } + ] + + "email":"admin@mygraf.com", + "login":"admin", + "role":"Admin" + } + ] diff --git a/docs/sources/http_api/data_sources.md b/docs/sources/http_api/data_sources.md new file mode 100644 index 00000000000..8e2bc4e88de --- /dev/null +++ b/docs/sources/http_api/data_sources.md @@ -0,0 +1,190 @@ +---- +page_title: Data sources API +page_description: Grafana Data sources API Reference +page_keywords: grafana, admin, http, api, documentation, datasources +--- + +## Data sources API + +### Get all datasources + +`GET /api/datasources` + +**Example Request**: + + GET /api/datasources HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "id":1, + "orgId":1, + "name":"datasource_elastic", + "type":"elasticsearch", + "access":"proxy", + "url":"http://mydatasource.com", + "password":"", + "user":"", + "database":"grafana-dash", + "basicAuth":false, + "basicAuthUser":"", + "basicAuthPassword":"", + "isDefault":false, + "jsonData":null + } + ] + +### Get a single data sources by Id + +`GET /api/datasources/:datasourceId` + +**Example Request**: + + GET /api/datasources/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "id":1, + "orgId":1, + "name":"test_datasource", + "type":"graphite", + "access":"proxy", + "url":"http://mydatasource.com", + "password":"", + "user":"", + "database":"", + "basicAuth":false, + "basicAuthUser":"", + "basicAuthPassword":"", + "isDefault":false, + "jsonData":null + } + +### Create data source + +`POST /api/datasources` + +**Example Request**: + + POST /api/datasources HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "name":"test_datasource", + "type":"graphite", + "url":"http://mydatasource.com", + "access":"proxy", + "basicAuth":false + } + + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"id":1,"message":"Datasource added"} + +### Update an existing data source + +`PUT /api/datasources/:datasourceId` + +**Example Request**: + + PUT /api/datasources/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "id":1, + "orgId":1, + "name":"test_datasource", + "type":"graphite", + "access":"proxy", + "url":"http://mydatasource.com", + "password":"", + "user":"", + "database":"", + "basicAuth":true, + "basicAuthUser":"basicuser", + "basicAuthPassword":"basicuser", + "isDefault":false, + "jsonData":null + } + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Datasource updated"} + +### Delete an existing data source + +`DELETE /api/datasources/:datasourceId` + +**Example Request**: + + DELETE /api/datasources/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Data source deleted"} + +### Available data source types + +`GET /api/datasources/plugins` + +**Example Request**: + + GET /api/datasources/plugins HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "grafana":{ + "metrics":true,"module":"plugins/datasource/grafana/datasource", + "name":"Grafana (for testing)", + "partials":{ + "query":"app/plugins/datasource/grafana/partials/query.editor.html" + }, + "pluginType":"datasource", + "serviceName":"GrafanaDatasource", + "type":"grafana" + } + } + +## Data source proxy calls + +`GET /api/datasources/proxy/:datasourceId/*` + +Proxies all calls to the actual datasource. diff --git a/docs/sources/http_api/first_steps.md b/docs/sources/http_api/first_steps.md new file mode 100644 index 00000000000..0fbdf348327 --- /dev/null +++ b/docs/sources/http_api/first_steps.md @@ -0,0 +1,43 @@ +---- +page_title: HTTP API +page_description: Grafana HTTP API Reference +page_keywords: grafana, admin, http, api, documentation +--- + +# HTTP API Reference + +The Grafana backend exposes an HTTP API, the same API is used by the frontend to do everything from saving +dashboards, creating users and updating data sources. + +## Authorization + +### Tokens + +Currently you can authenticate via an `API Token` or via a `Session cookie` (acquired using regular login or oauth). + +### Basic Auth + +If basic auth is enabled (it is enabled by default) you can authenticate your HTTP request via +standard basic auth. + +curl example: +``` +?curl http://admin:admin@localhost:3000/api/org +{"id":1,"name":"Main Org."} +``` + +### Create API Token + +Open the sidemenu and click the organization dropdown and select the `API Keys` option. + +![](/img/v2/orgdropdown_api_keys.png) + +You use the token in all requests in the `Authorization` header, like this: + +**Example**: + + GET http://your.grafana.com/api/dashboards/db/mydash HTTP/1.1 + Accept: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +The `Authorization` header value should be `Bearer `. \ No newline at end of file diff --git a/docs/sources/http_api/general.md b/docs/sources/http_api/general.md new file mode 100644 index 00000000000..d110851d9dc --- /dev/null +++ b/docs/sources/http_api/general.md @@ -0,0 +1,71 @@ +---- +page_title: General APIs +page_description: Grafana General API Reference +page_keywords: grafana, admin, http, api, documentation, dashboards +--- + +## Frontend Settings API + +### Get Settings + +`GET /api/frontend/settings` + +**Example Request**: + + GET /api/frontend/settings HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "allowOrgCreate":true, + "appSubUrl":"", + "buildInfo":{ + "buildstamp":xxxxxx, + "commit":"vyyyy", + "version":"zzzzz" + }, + "datasources":{ + "datasourcename":{ + "index":"grafana-dash", + "meta":{ + "annotations":true, + "module":"plugins/datasource/grafana/datasource", + "name":"Grafana", + "partials":{ + "annotations":"app/plugins/datasource/grafana/partials/annotations.editor.html", + "config":"app/plugins/datasource/grafana/partials/config.html" + }, + "pluginType":"datasource", + "serviceName":"Grafana", + "type":"grafanasearch" + } + } + }, + "defaultDatasource": "Grafana" + } + +## Login API + +### Renew session based on remember cookie + +`GET /api/login/ping` + +**Example Request**: + + GET /api/login/ping HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message": "Logged in"} \ No newline at end of file diff --git a/docs/sources/http_api/orgs.md b/docs/sources/http_api/orgs.md new file mode 100644 index 00000000000..9c378aaa06a --- /dev/null +++ b/docs/sources/http_api/orgs.md @@ -0,0 +1,343 @@ +---- +page_title: Organisations API +page_description: Grafana Organisations API Reference +page_keywords: grafana, admin, http, api, documentation, orgs, organisations +--- + +## Organisation API + +### Get current Organisation + +`GET /api/org` + +**Example Request**: + + GET /api/org HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "id":1, + "name":"Main Org." + } + +### Get Organisation by Id + +`GET /api/orgs/:orgId` + +**Example Request**: + + GET /api/orgs/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "id":1, + "name":"Main Org.", + "address":{ + "address1":"", + "address2":"", + "city":"", + "zipCode":"", + "state":"", + "country":"" + } + } + +### Get Organisation by Name + +`GET /api/orgs/name/:orgName` + +**Example Request**: + + GET /api/orgs/name/Main%20Org%2E HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "id":1, + "name":"Main Org.", + "address":{ + "address1":"", + "address2":"", + "city":"", + "zipCode":"", + "state":"", + "country":"" + } + } + +### Update current Organisation + +`PUT /api/org` + +**Example Request**: + + PUT /api/org HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "name":"Main Org." + } + + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Organization updated"} + + +### Get all users within the actual organisation + +`GET /api/org/users` + +**Example Request**: + + GET /api/org/users HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "orgId":1, + "userId":1, + "email":"admin@mygraf.com", + "login":"admin", + "role":"Admin" + } + ] + +### Add a new user to the actual organisation + +`POST /api/org/users` + +Adds a global user to the actual organisation. + +**Example Request**: + + POST /api/org/users HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "role": "Admin", + "loginOrEmail": "admin" + } + + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"User added to organization"} + +### Updates the given user + +`PATCH /api/org/users/:userId` + +**Example Request**: + + PATCH /api/org/users/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "role": "Viewer", + } + + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Organization user updated"} + + +### Delete user in actual organisation + +`DELETE /api/org/users/:userId` + +**Example Request**: + + DELETE /api/org/users/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"User removed from organization"} + + +## Organisations + +### Search all Organisations + +`GET /api/orgs` + +**Example Request**: + + GET /api/orgs HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "id":1, + "name":"Main Org." + } + ] + +### Update Organisation + +`PUT /api/orgs/:orgId` + +Update Organisation, fields *Adress 1*, *Adress 2*, *City* are not implemented yet. + +**Example Request**: + + PUT /api/orgs/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "name":"Main Org 2." + } + + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Organization updated"} + +### Get Users in Organisation + +`GET /api/orgs/:orgId/users` + +**Example Request**: + + GET /api/orgs/1/users HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + [ + { + "orgId":1, + "userId":1, + "email":"admin@mygraf.com", + "login":"admin", + "role":"Admin" + } + ] + +### Add User in Organisation + +`POST /api/orgs/:orgId/users` + +**Example Request**: + + POST /api/orgs/1/users HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "loginOrEmail":"user", + "role":"Viewer" + } + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"User added to organization"} + +### Update Users in Organisation + +`PATCH /api/orgs/:orgId/users/:userId` + +**Example Request**: + + PATCH /api/orgs/1/users/2 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "role":"Admin" + } + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Organization user updated"} + +### Delete User in Organisation + +`DELETE /api/orgs/:orgId/users/:userId` + +**Example Request**: + + DELETE /api/orgs/1/users/2 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"User removed from organization"} diff --git a/docs/sources/http_api/snapshots.md b/docs/sources/http_api/snapshots.md new file mode 100644 index 00000000000..cbfc28cd71b --- /dev/null +++ b/docs/sources/http_api/snapshots.md @@ -0,0 +1,137 @@ +---- +page_title: Snapshots API +page_description: Grafana Snapshots API Reference +page_keywords: grafana, admin, http, api, documentation, snapshots, dashboards +--- + +## Snapshots API + +### Create new snapshot + +`POST /api/snapshots` + +**Example Request**: + + POST /api/snapshots HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "dashboard": { + "editable":false, + "hideControls":true, + "nav":[ + { + "enable":false, + "type":"timepicker" + } + ], + "rows": [ + { + + } + ], + "style":"dark", + "tags":[], + "templating":{ + "list":[ + ] + }, + "time":{ + }, + "timezone":"browser", + "title":"Home", + "version":5 + }, + "expires": 3600 + } + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + { + "deleteKey":"XXXXXXX", + "deleteUrl":"myurl/dashboard/snapshot/XXXXXXX", + "key":"YYYYYYY", + "url":"myurl/dashboard/snapshot/YYYYYYY" + } + +Keys: + +- **deleteKey** – Key generated to delete the snapshot +- **key** – Key generated to share the dashboard + +### Get Snapshot by Id + +`GET /api/snapshots/:key` + +**Example Request**: + + GET /api/snapshots/YYYYYYY HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "meta":{ + "isSnapshot":true, + "type":"snapshot", + "canSave":false, + "canEdit":false, + "canStar":false, + "slug":"", + "expires":"2200-13-32T25:23:23+02:00", + "created":"2200-13-32T28:24:23+02:00" + }, + "dashboard": { + "editable":false, + "hideControls":true, + "nav":[ + { + "enable":false, + "type":"timepicker" + } + ], + "rows": [ + { + + } + ], + "style":"dark", + "tags":[], + "templating":{ + "list":[ + ] + }, + "time":{ + }, + "timezone":"browser", + "title":"Home", + "version":5 + } + } + +### Delete Snapshot by Id + +`GET /api/snapshots-delete/:key` + +**Example Request**: + + GET /api/snapshots/YYYYYYY HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Snapshot deleted. It might take an hour before it's cleared from a CDN cache."} \ No newline at end of file diff --git a/docs/sources/http_api/users.md b/docs/sources/http_api/users.md new file mode 100644 index 00000000000..6b6015d3018 --- /dev/null +++ b/docs/sources/http_api/users.md @@ -0,0 +1,254 @@ +---- +page_title: Users API +page_description: Grafana Users API Reference +page_keywords: grafana, admin, http, api, documentation, users +--- + +## Users API + +### Search Users + +`GET /api/users` + +**Example Request**: + + GET /api/users HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "id": 1, + "name": "Admin", + "login": "admin", + "email": "admin@mygraf.com", + "isAdmin": true + }, + { + "id": 2, + "name": "User", + "login": "user", + "email": "user@mygraf.com", + "isAdmin": false + } + ] + +### Get single user by Id + +`GET /api/users/:id` + +**Example Request**: + + GET /api/users/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "email": "user@mygraf.com" + "name": "admin", + "login": "admin", + "theme": "light", + "orgId": 1, + "isGrafanaAdmin": true + } + +### User Update + +`PUT /api/users/:id` + +**Example Request**: + + PUT /api/users/2 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "email":"user@mygraf.com", + "name":"User2", + "login":"user", + "theme":"light" + } + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"User updated"} + + +### Get Organisations for user + +`GET /api/users/:id/orgs` + +**Example Request**: + + GET /api/users/1/orgs HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "orgId":1, + "name":"Main Org.", + "role":"Admin" + } + ] + +## User + +### Actual User + +`GET /api/user` + +**Example Request**: + + GET /api/user HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + { + "email":"admin@mygraf.com", + "name":"Admin", + "login":"admin", + "theme":"light", + "orgId":1, + "isGrafanaAdmin":true + } + +### Change Password + +`PUT /api/user/password` + +Changes the password for the user + +**Example Request**: + + PUT /api/user/password HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + + { + "oldPassword": "old_password", + "newPassword": "new_password", + "confirmNew": "confirm_new_password" + } + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"User password changed"} + +### Switch user context + +`POST /api/user/using/:organisationId` + +Switch user context to the given organisation. + +**Example Request**: + + POST /api/user/using/2 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Active organization changed"} + +### Organisations of the actual User + +`GET /api/user/orgs` + +Return a list of all organisations of the current user. + +**Example Request**: + + GET /api/user/orgs HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + [ + { + "orgId":1, + "name":"Main Org.", + "role":"Admin" + } + ] + +### Star a dashboard + +`POST /api/user/stars/dashboard/:dashboardId` + +Stars the given Dashboard for the actual user. + +**Example Request**: + + POST /api/user/stars/dashboard/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Dashboard starred!"} + +### Unstar a dashboard + +`DELETE /api/user/stars/dashboard/:dashboardId` + +Deletes the starring of the given Dashboard for the actual user. + +**Example Request**: + + DELETE /api/user/stars/dashboard/1 HTTP/1.1 + Accept: application/json + Content-Type: application/json + Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +**Example Response**: + + HTTP/1.1 200 + Content-Type: application/json + + {"message":"Dashboard unstarred"} \ No newline at end of file diff --git a/docs/sources/reference/http_api.md b/docs/sources/reference/http_api.md deleted file mode 100644 index 4b0dff6c4b6..00000000000 --- a/docs/sources/reference/http_api.md +++ /dev/null @@ -1,1534 +0,0 @@ ----- -page_title: HTTP API -page_description: Grafana HTTP API Reference -page_keywords: grafana, admin, http, api, documentation ---- - -# HTTP API Reference - -The Grafana backend exposes an HTTP API, the same API is used by the frontend to do everything from saving -dashboards, creating users and updating data sources. - -## Authorization - -### Tokens - -Currently you can authenticate via an `API Token` or via a `Session cookie` (acquired using regular login or oauth). - -### Basic Auth - -If basic auth is enabled (it is enabled by default) you can authenticate your HTTP request via -standard basic auth. - -curl example: -``` -?curl http://admin:admin@localhost:3000/api/org -{"id":1,"name":"Main Org."} -``` - -### Create API Token - -Open the sidemenu and click the organization dropdown and select the `API Keys` option. - -![](/img/v2/orgdropdown_api_keys.png) - -You use the token in all requests in the `Authorization` header, like this: - -**Example**: - - GET http://your.grafana.com/api/dashboards/db/mydash HTTP/1.1 - Accept: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -The `Authorization` header value should be `Bearer `. - -## Dashboards - -### Create / Update dashboard - -`POST /api/dashboards/db` - -Creates a new dashboard or updates an existing dashboard. - -**Example Request for new dashboard**: - - POST /api/dashboards/db HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "dashboard": { - "id": null, - "title": "Production Overview", - "tags": [ "templated" ], - "timezone": "browser", - "rows": [ - { - } - ], - "schemaVersion": 6, - "version": 0 - }, - "overwrite": false - } - -JSON Body schema: - -- **dashboard** – The complete dashboard model, id = null to create a new dashboard -- **overwrite** – Set to true if you want to overwrite existing dashboard with newer version or with same dashboard title. - -**Example Response**: - - HTTP/1.1 200 OK - Content-Type: application/json; charset=UTF-8 - Content-Length: 78 - - { - "slug": "production-overview", - "status": "success", - "version": 1 - } - -Status Codes: - -- **200** – Created -- **400** – Errors (invalid json, missing or invalid fields, etc) -- **401** – Unauthorized -- **412** – Precondition failed - -The **412** status code is used when a newer dashboard already exists (newer, its version is greater than the version that was sent). The -same status code is also used if another dashboard exists with the same title. The response body will look like this: - - HTTP/1.1 412 Precondition Failed - Content-Type: application/json; charset=UTF-8 - Content-Length: 97 - - { - "message": "The dashboard has been changed by someone else", - "status": "version-mismatch" - } - -In in case of title already exists the `status` property will be `name-exists`. - -### Get dashboard - -`GET /api/dashboards/db/:slug` - -Will return the dashboard given the dashboard slug. Slug is the url friendly version of the dashboard title. - -**Example Request**: - - GET /api/dashboards/db/production-overview HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "meta": { - "isStarred": false, - "slug": "production-overview" - }, - "model": { - "id": null, - "title": "Production Overview", - "tags": [ "templated" ], - "timezone": "browser", - "rows": [ - { - } - ], - "schemaVersion": 6, - "version": 0 - } - } - -### Delete dashboard - -`DELETE /api/dashboards/db/:slug` - -The above will delete the dashboard with the specified slug. The slug is the url friendly (unique) version of the dashboard title. - -**Example Request**: - - DELETE /api/dashboards/db/test HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"title": "Test"} - -### Gets the home dashboard - -`GET /api/dashboards/home` - -Will return the home dashboard. - -**Example Request**: - - GET /api/dashboards/home HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "meta": { - "isHome":true, - "canSave":false, - "canEdit":false, - "canStar":false, - "slug":"", - "expires":"0001-01-01T00:00:00Z", - "created":"0001-01-01T00:00:00Z" - }, - "dashboard": { - "editable":false, - "hideControls":true, - "nav":[ - { - "enable":false, - "type":"timepicker" - } - ], - "rows": [ - { - - } - ], - "style":"dark", - "tags":[], - "templating":{ - "list":[ - ] - }, - "time":{ - }, - "timezone":"browser", - "title":"Home", - "version":5 - } - } - -### Tags for Dashboard - - -`GET /api/dashboards/tags` - -Get all tabs of dashboards - -**Example Request**: - - GET /api/dashboards/home HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "term":"tag1", - "count":1 - }, - { - "term":"tag2", - "count":4 - } - ] - -### Dashboard from JSON file - -`GET /file/:file` - -### Search Dashboards - -`GET /api/search/` - -Status Codes: - -- **query** – Search Query -- **tags** – Tags to use -- **starred** – Flag indicating if only starred Dashboards should be returned -- **tagcloud** - Flag indicating if a tagcloud should be returned - -**Example Request**: - - GET /api/search?query=MyDashboard&starred=true&tag=prod HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id":1, - "title":"Production Overview", - "uri":"db/production-overview", - "type":"dash-db", - "tags":[], - "isStarred":false - } - ] - -## Data sources - -### Get all datasources - -`GET /api/datasources` - -**Example Request**: - - GET /api/datasources HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id":1, - "orgId":1, - "name":"datasource_elastic", - "type":"elasticsearch", - "access":"proxy", - "url":"http://mydatasource.com", - "password":"", - "user":"", - "database":"grafana-dash", - "basicAuth":false, - "basicAuthUser":"", - "basicAuthPassword":"", - "isDefault":false, - "jsonData":null - } - ] - -### Get a single data sources by Id - -`GET /api/datasources/:datasourceId` - -**Example Request**: - - GET /api/datasources/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "orgId":1, - "name":"test_datasource", - "type":"graphite", - "access":"proxy", - "url":"http://mydatasource.com", - "password":"", - "user":"", - "database":"", - "basicAuth":false, - "basicAuthUser":"", - "basicAuthPassword":"", - "isDefault":false, - "jsonData":null - } - -### Create data source - -`POST /api/datasources` - -**Example Request**: - - POST /api/datasources HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"test_datasource", - "type":"graphite", - "url":"http://mydatasource.com", - "access":"proxy", - "basicAuth":false - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"id":1,"message":"Datasource added"} - -### Update an existing data source - -`PUT /api/datasources/:datasourceId` - -**Example Request**: - - PUT /api/datasources/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "id":1, - "orgId":1, - "name":"test_datasource", - "type":"graphite", - "access":"proxy", - "url":"http://mydatasource.com", - "password":"", - "user":"", - "database":"", - "basicAuth":true, - "basicAuthUser":"basicuser", - "basicAuthPassword":"basicuser", - "isDefault":false, - "jsonData":null - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Datasource updated"} - -### Delete an existing data source - -`DELETE /api/datasources/:datasourceId` - -**Example Request**: - - DELETE /api/datasources/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Data source deleted"} - -### Available data source types - -`GET /api/datasources/plugins` - -**Example Request**: - - GET /api/datasources/plugins HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "grafana":{ - "metrics":true,"module":"plugins/datasource/grafana/datasource", - "name":"Grafana (for testing)", - "partials":{ - "query":"app/plugins/datasource/grafana/partials/query.editor.html" - }, - "pluginType":"datasource", - "serviceName":"GrafanaDatasource", - "type":"grafana" - } - } - -## Data source proxy calls - -`GET /api/datasources/proxy/:datasourceId/*` - -Proxies all calls to the actual datasource. - -## Organisation - -### Get current Organisation - -`GET /api/org` - -**Example Request**: - - GET /api/org HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "name":"Main Org." - } - -### Get Organisation by Id - -`GET /api/orgs/:orgId` - -**Example Request**: - - GET /api/orgs/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "name":"Main Org.", - "address":{ - "address1":"", - "address2":"", - "city":"", - "zipCode":"", - "state":"", - "country":"" - } - } - -### Get Organisation by Name - -`GET /api/orgs/name/:orgName` - -**Example Request**: - - GET /api/orgs/name/Main%20Org%2E HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "name":"Main Org.", - "address":{ - "address1":"", - "address2":"", - "city":"", - "zipCode":"", - "state":"", - "country":"" - } - } - -### Update current Organisation - -`PUT /api/org` - -**Example Request**: - - PUT /api/org HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"Main Org." - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization updated"} - - -### Get all users within the actual organisation - -`GET /api/org/users` - -**Example Request**: - - GET /api/org/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "orgId":1, - "userId":1, - "email":"admin@mygraf.com", - "login":"admin", - "role":"Admin" - } - ] - -### Add a new user to the actual organisation - -`POST /api/org/users` - -Adds a global user to the actual organisation. - -**Example Request**: - - POST /api/org/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "role": "Admin", - "loginOrEmail": "admin" - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User added to organization"} - -### Updates the given user - -`PATCH /api/org/users/:userId` - -**Example Request**: - - PATCH /api/org/users/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "role": "Viewer", - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization user updated"} - - -### Delete user in actual organisation - -`DELETE /api/org/users/:userId` - -**Example Request**: - - DELETE /api/org/users/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User removed from organization"} - - -## Organisations - -### Search all Organisations - -`GET /api/orgs` - -**Example Request**: - - GET /api/orgs HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id":1, - "name":"Main Org." - } - ] - -### Update Organisation - -`PUT /api/orgs/:orgId` - -Update Organisation, fields *Adress 1*, *Adress 2*, *City* are not implemented yet. - -**Example Request**: - - PUT /api/orgs/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"Main Org 2." - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization updated"} - -### Get Users in Organisation - -`GET /api/orgs/:orgId/users` - -**Example Request**: - - GET /api/orgs/1/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - [ - { - "orgId":1, - "userId":1, - "email":"admin@mygraf.com", - "login":"admin", - "role":"Admin" - } - ] - -### Add User in Organisation - -`POST /api/orgs/:orgId/users` - -**Example Request**: - - POST /api/orgs/1/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "loginOrEmail":"user", - "role":"Viewer" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User added to organization"} - -### Update Users in Organisation - -`PATCH /api/orgs/:orgId/users/:userId` - -**Example Request**: - - PATCH /api/orgs/1/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "role":"Admin" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization user updated"} - -### Delete User in Organisation - -`DELETE /api/orgs/:orgId/users/:userId` - -**Example Request**: - - DELETE /api/orgs/1/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User removed from organization"} - -## Users - -### Search Users - -`GET /api/users` - -**Example Request**: - - GET /api/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id": 1, - "name": "Admin", - "login": "admin", - "email": "admin@mygraf.com", - "isAdmin": true - }, - { - "id": 2, - "name": "User", - "login": "user", - "email": "user@mygraf.com", - "isAdmin": false - } - ] - -### Get single user by Id - -`GET /api/users/:id` - -**Example Request**: - - GET /api/users/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "email": "user@mygraf.com" - "name": "admin", - "login": "admin", - "theme": "light", - "orgId": 1, - "isGrafanaAdmin": true - } - -### User Update - -`PUT /api/users/:id` - -**Example Request**: - - PUT /api/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "email":"user@mygraf.com", - "name":"User2", - "login":"user", - "theme":"light" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User updated"} - - -### Get Organisations for user - -`GET /api/users/:id/orgs` - -**Example Request**: - - GET /api/users/1/orgs HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "orgId":1, - "name":"Main Org.", - "role":"Admin" - } - ] - -## User - -### Actual User - -`GET /api/user` - -**Example Request**: - - GET /api/user HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "email":"admin@mygraf.com", - "name":"Admin", - "login":"admin", - "theme":"light", - "orgId":1, - "isGrafanaAdmin":true - } - -### Change Password - -`PUT /api/user/password` - -Changes the password for the user - -**Example Request**: - - PUT /api/user/password HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "oldPassword": "old_password", - "newPassword": "new_password", - "confirmNew": "confirm_new_password" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User password changed"} - -### Switch user context - -`POST /api/user/using/:organisationId` - -Switch user context to the given organisation. - -**Example Request**: - - POST /api/user/using/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Active organization changed"} - -### Organisations of the actual User - -`GET /api/user/orgs` - -Return a list of all organisations of the current user. - -**Example Request**: - - GET /api/user/orgs HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "orgId":1, - "name":"Main Org.", - "role":"Admin" - } - ] - -### Star a dashboard - -`POST /api/user/stars/dashboard/:dashboardId` - -Stars the given Dashboard for the actual user. - -**Example Request**: - - POST /api/user/stars/dashboard/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Dashboard starred!"} - -### Unstar a dashboard - -`DELETE /api/user/stars/dashboard/:dashboardId` - -Deletes the starring of the given Dashboard for the actual user. - -**Example Request**: - - DELETE /api/user/stars/dashboard/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Dashboard unstarred"} - - -## Snapshots - -### Create new snapshot - -`POST /api/snapshots` - -**Example Request**: - - POST /api/snapshots HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "dashboard": { - "editable":false, - "hideControls":true, - "nav":[ - { - "enable":false, - "type":"timepicker" - } - ], - "rows": [ - { - - } - ], - "style":"dark", - "tags":[], - "templating":{ - "list":[ - ] - }, - "time":{ - }, - "timezone":"browser", - "title":"Home", - "version":5 - }, - "expires": 3600 - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - { - "deleteKey":"XXXXXXX", - "deleteUrl":"myurl/dashboard/snapshot/XXXXXXX", - "key":"YYYYYYY", - "url":"myurl/dashboard/snapshot/YYYYYYY" - } - -Keys: - -- **deleteKey** – Key generated to delete the snapshot -- **key** – Key generated to share the dashboard - -### Get Snapshot by Id - -`GET /api/snapshots/:key` - -**Example Request**: - - GET /api/snapshots/YYYYYYY HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "meta":{ - "isSnapshot":true, - "type":"snapshot", - "canSave":false, - "canEdit":false, - "canStar":false, - "slug":"", - "expires":"2200-13-32T25:23:23+02:00", - "created":"2200-13-32T28:24:23+02:00" - }, - "dashboard": { - "editable":false, - "hideControls":true, - "nav":[ - { - "enable":false, - "type":"timepicker" - } - ], - "rows": [ - { - - } - ], - "style":"dark", - "tags":[], - "templating":{ - "list":[ - ] - }, - "time":{ - }, - "timezone":"browser", - "title":"Home", - "version":5 - } - } - -### Delete Snapshot by Id - -`GET /api/snapshots-delete/:key` - -**Example Request**: - - GET /api/snapshots/YYYYYYY HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Snapshot deleted. It might take an hour before it's cleared from a CDN cache."} - - -## Frontend Settings - -### Get Settings - -`GET /api/frontend/settings` - -**Example Request**: - - GET /api/frontend/settings HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "allowOrgCreate":true, - "appSubUrl":"", - "buildInfo":{ - "buildstamp":xxxxxx, - "commit":"vyyyy", - "version":"zzzzz" - }, - "datasources":{ - "datasourcename":{ - "index":"grafana-dash", - "meta":{ - "annotations":true, - "module":"plugins/datasource/grafana/datasource", - "name":"Grafana", - "partials":{ - "annotations":"app/plugins/datasource/grafana/partials/annotations.editor.html", - "config":"app/plugins/datasource/grafana/partials/config.html" - }, - "pluginType":"datasource", - "serviceName":"Grafana", - "type":"grafanasearch" - } - } - }, - "defaultDatasource": "Grafana" - } - -## Login - -### Renew session based on remember cookie - -`GET /api/login/ping` - -**Example Request**: - - GET /api/login/ping HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message": "Logged in"} - -## Admin - -### Settings - -`GET /api/admin/settings` - -**Example Request**: - - GET /api/admin/settings - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "DEFAULT": - { - "app_mode":"production"}, - "analytics": - { - "google_analytics_ua_id":"", - "reporting_enabled":"false" - }, - "auth.anonymous":{ - "enabled":"true", - "org_name":"Main Org.", - "org_role":"Viewer" - }, - "auth.basic":{ - "enabled":"false" - }, - "auth.github":{ - "allow_sign_up":"false", - "allowed_domains":"", - "allowed_organizations":"", - "api_url":"https://api.github.com/user", - "auth_url":"https://github.com/login/oauth/authorize", - "client_id":"some_id", - "client_secret":"************", - "enabled":"false", - "scopes":"user:email", - "team_ids":"", - "token_url":"https://github.com/login/oauth/access_token" - }, - "auth.google":{ - "allow_sign_up":"false","allowed_domains":"", - "api_url":"https://www.googleapis.com/oauth2/v1/userinfo", - "auth_url":"https://accounts.google.com/o/oauth2/auth", - "client_id":"some_client_id", - "client_secret":"************", - "enabled":"false", - "scopes":"https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email", - "token_url":"https://accounts.google.com/o/oauth2/token" - }, - "auth.ldap":{ - "config_file":"/etc/grafana/ldap.toml", - "enabled":"false" - }, - "auth.proxy":{ - "auto_sign_up":"true", - "enabled":"false", - "header_name":"X-WEBAUTH-USER", - "header_property":"username" - }, - "dashboards.json":{ - "enabled":"false", - "path":"/var/lib/grafana/dashboards" - }, - "database":{ - "host":"127.0.0.1:0000", - "name":"grafana", - "password":"************", - "path":"grafana.db", - "ssl_mode":"disable", - "type":"sqlite3", - "user":"root" - }, - "emails":{ - "templates_pattern":"emails/*.html", - "welcome_email_on_sign_up":"false" - }, - "event_publisher":{ - "enabled":"false", - "exchange":"grafana_events", - "rabbitmq_url":"amqp://localhost/" - }, - "log":{ - "buffer_len":"10000", - "level":"Info", - "mode":"file" - }, - "log.console":{ - "level":"" - }, - "log.file":{ - "daily_rotate":"true", - "file_name":"", - "level":"", - "log_rotate":"true", - "max_days":"7", - "max_lines":"1000000", - "max_lines_shift":"28", - "max_size_shift":"" - }, - "paths":{ - "data":"/tsdb/grafana", - "logs":"/logs/apps/grafana"}, - "security":{ - "admin_password":"************", - "admin_user":"admin", - "cookie_remember_name":"grafana_remember", - "cookie_username":"grafana_user", - "disable_gravatar":"false", - "login_remember_days":"7", - "secret_key":"************" - }, - "server":{ - "cert_file":"", - "cert_key":"", - "domain":"mygraf.com", - "enable_gzip":"false", - "enforce_domain":"false", - "http_addr":"127.0.0.1", - "http_port":"0000", - "protocol":"http", - "root_url":"%(protocol)s://%(domain)s:%(http_port)s/", - "router_logging":"true", - "static_root_path":"public" - }, - "session":{ - "cookie_name":"grafana_sess", - "cookie_secure":"false", - "gc_interval_time":"", - "provider":"file", - "provider_config":"sessions", - "session_life_time":"86400" - }, - "smtp":{ - "cert_file":"", - "enabled":"false", - "from_address":"admin@grafana.localhost", - "host":"localhost:25", - "key_file":"", - "password":"************", - "skip_verify":"false", - "user":""}, - "users":{ - "allow_org_create":"true", - "allow_sign_up":"false", - "auto_assign_org":"true", - "auto_assign_org_role":"Viewer" - } - } - -### Grafana Stats - -`GET /api/admin/stats` - -**Example Request**: - - GET /api/admin/stats - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "user_count":2, - "org_count":1, - "dashboard_count":4, - "db_snapshot_count":2, - "db_tag_count":6, - "data_source_count":1, - "playlist_count":1, - "starred_db_count":2, - "grafana_admin_count":2 - } - -### Global Users - -`POST /api/admin/users` - -Create new user - -**Example Request**: - - POST /api/admin/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"User", - "email":"user@graf.com", - "login":"user", - "password":"userpassword" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"id":5,"message":"User created"} - -### Password for User - -`PUT /api/admin/users/:id/password` - -Change password for specific user - -**Example Request**: - - PUT /api/admin/users/2/password HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"password":"userpassword"} - -### Permissions - -`PUT /api/admin/users/:id/permissions` - -**Example Request**: - - PUT /api/admin/users/2/permissions HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {message: "User permissions updated"} - -### Delete global User - -`DELETE /api/admin/users/:id` - -**Example Request**: - - DELETE /api/admin/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {message: "User deleted"} From 10016d9d38ab511e371208c7a96b609fcc7a0cb8 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Mon, 4 Jan 2016 16:56:18 +0900 Subject: [PATCH 002/444] add CloudWatch DescribeAlarms API support --- pkg/api/cloudwatch/cloudwatch.go | 52 +++++++++++++++++++ .../datasource/cloudwatch/datasource.js | 8 +++ 2 files changed, 60 insertions(+) diff --git a/pkg/api/cloudwatch/cloudwatch.go b/pkg/api/cloudwatch/cloudwatch.go index babcf9fddb0..bf281864da5 100644 --- a/pkg/api/cloudwatch/cloudwatch.go +++ b/pkg/api/cloudwatch/cloudwatch.go @@ -33,6 +33,7 @@ func init() { actionHandlers = map[string]actionHandler{ "GetMetricStatistics": handleGetMetricStatistics, "ListMetrics": handleListMetrics, + "DescribeAlarms": handleDescribeAlarms, "DescribeAlarmsForMetric": handleDescribeAlarmsForMetric, "DescribeAlarmHistory": handleDescribeAlarmHistory, "DescribeInstances": handleDescribeInstances, @@ -142,6 +143,57 @@ func handleListMetrics(req *cwRequest, c *middleware.Context) { c.JSON(200, resp) } +func handleDescribeAlarms(req *cwRequest, c *middleware.Context) { + sess := session.New() + creds := credentials.NewChainCredentials( + []credentials.Provider{ + &credentials.EnvProvider{}, + &credentials.SharedCredentialsProvider{Filename: "", Profile: req.DataSource.Database}, + &ec2rolecreds.EC2RoleProvider{Client: ec2metadata.New(sess), ExpiryWindow: 5 * time.Minute}, + }) + + cfg := &aws.Config{ + Region: aws.String(req.Region), + Credentials: creds, + } + + svc := cloudwatch.New(session.New(cfg), cfg) + + reqParam := &struct { + Parameters struct { + ActionPrefix string `json:"actionPrefix"` + AlarmNamePrefix string `json:"alarmNamePrefix"` + AlarmNames []*string `json:"alarmNames"` + StateValue string `json:"stateValue"` + } `json:"parameters"` + }{} + json.Unmarshal(req.Body, reqParam) + + params := &cloudwatch.DescribeAlarmsInput{ + MaxRecords: aws.Int64(100), + } + if reqParam.Parameters.ActionPrefix != "" { + params.ActionPrefix = aws.String(reqParam.Parameters.ActionPrefix) + } + if reqParam.Parameters.AlarmNamePrefix != "" { + params.AlarmNamePrefix = aws.String(reqParam.Parameters.AlarmNamePrefix) + } + if len(reqParam.Parameters.AlarmNames) != 0 { + params.AlarmNames = reqParam.Parameters.AlarmNames + } + if reqParam.Parameters.StateValue != "" { + params.StateValue = aws.String(reqParam.Parameters.StateValue) + } + + resp, err := svc.DescribeAlarms(params) + if err != nil { + c.JsonApiErr(500, "Unable to call AWS API", err) + return + } + + c.JSON(200, resp) +} + func handleDescribeAlarmsForMetric(req *cwRequest, c *middleware.Context) { cfg := &aws.Config{ Region: aws.String(req.Region), diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index 119c4a83167..ab97e4eedd5 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -204,6 +204,14 @@ function (angular, _, moment, dateMath) { return $q.when([]); }; + this.performDescribeAlarms = function(region, actionPrefix, alarmNamePrefix, alarmNames, stateValue) { + return this.awsRequest({ + region: region, + action: 'DescribeAlarms', + parameters: { actionPrefix: actionPrefix, alarmNamePrefix: alarmNamePrefix, alarmNames: alarmNames, stateValue: stateValue } + }); + }; + this.performDescribeAlarmsForMetric = function(region, namespace, metricName, dimensions, statistic, period) { return this.awsRequest({ region: region, From defb15bea1625bb0d2df93a09bce744b5003d747 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Mon, 4 Jan 2016 18:53:18 +0900 Subject: [PATCH 003/444] CloudWatch multiple alarm annotation support --- .../datasource/cloudwatch/datasource.js | 48 ++++++++++++++++--- .../partials/annotations.editor.html | 18 +++++++ 2 files changed, 60 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index ab97e4eedd5..881d4e48c3d 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -230,21 +230,57 @@ function (angular, _, moment, dateMath) { this.annotationQuery = function(options) { var annotation = options.annotation; + var usePrefixMatch = annotation.prefixMatching; var region = templateSrv.replace(annotation.region); var namespace = templateSrv.replace(annotation.namespace); var metricName = templateSrv.replace(annotation.metricName); var dimensions = convertDimensionFormat(annotation.dimensions); var statistics = _.map(annotation.statistics, function(s) { return templateSrv.replace(s); }); - var period = annotation.period || '300'; + var defaultPeriod = usePrefixMatch ? '' : '300'; + var period = annotation.period || defaultPeriod; period = parseInt(period, 10); - - if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return $q.when([]); } + var actionPrefix = annotation.actionPrefix || ''; + var alarmNamePrefix = annotation.alarmNamePrefix || ''; var d = $q.defer(); var self = this; - var allQueryPromise = _.map(statistics, function(statistic) { - return self.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); - }); + var allQueryPromise; + if (usePrefixMatch) { + allQueryPromise = [ + this.performDescribeAlarms(region, actionPrefix, alarmNamePrefix, [], '').then(function(alarms) { + alarms.MetricAlarms = _.filter(alarms.MetricAlarms, function(alarm) { + if (!_.isEmpty(namespace) && alarm.Namespace !== namespace) { + return false; + } + if (!_.isEmpty(metricName) && alarm.MetricName !== metricName) { + return false; + } + var sd = function(d) { + return d.Name; + }; + var isSameDimensions = JSON.stringify(_.sortBy(alarm.Dimensions, sd)) === JSON.stringify(_.sortBy(dimensions, sd)); + if (!_.isEmpty(dimensions) && !isSameDimensions) { + return false; + } + if (!_.isEmpty(statistics) && !_.contains(statistics, alarm.Statistic)) { + return false; + } + if (!_.isNaN(period) && alarm.Period !== period) { + return false; + } + return true; + }); + + return alarms; + }) + ]; + } else { + if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return $q.when([]); } + + allQueryPromise = _.map(statistics, function(statistic) { + return self.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); + }); + } $q.all(allQueryPromise).then(function(alarms) { var eventList = []; diff --git a/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html b/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html index 050698f3ff2..a82f82edf96 100644 --- a/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html +++ b/public/app/plugins/datasource/cloudwatch/partials/annotations.editor.html @@ -1 +1,19 @@ +
+
+
Prefix matching
+
+ +
+ +
+ + +
+ +
+ + +
+
+
From e96d72d66926fb2726bb01c8995f3a3507893b55 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Sat, 9 Jan 2016 09:50:10 +0900 Subject: [PATCH 004/444] reuse credentials --- pkg/api/cloudwatch/cloudwatch.go | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/pkg/api/cloudwatch/cloudwatch.go b/pkg/api/cloudwatch/cloudwatch.go index bf281864da5..88d22800d65 100644 --- a/pkg/api/cloudwatch/cloudwatch.go +++ b/pkg/api/cloudwatch/cloudwatch.go @@ -144,17 +144,9 @@ func handleListMetrics(req *cwRequest, c *middleware.Context) { } func handleDescribeAlarms(req *cwRequest, c *middleware.Context) { - sess := session.New() - creds := credentials.NewChainCredentials( - []credentials.Provider{ - &credentials.EnvProvider{}, - &credentials.SharedCredentialsProvider{Filename: "", Profile: req.DataSource.Database}, - &ec2rolecreds.EC2RoleProvider{Client: ec2metadata.New(sess), ExpiryWindow: 5 * time.Minute}, - }) - cfg := &aws.Config{ Region: aws.String(req.Region), - Credentials: creds, + Credentials: getCredentials(req.DataSource.Database), } svc := cloudwatch.New(session.New(cfg), cfg) From a20443b5772ce78f58d22aed59d5d8b7cdaaec4b Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 15 Jan 2016 21:34:34 +0900 Subject: [PATCH 005/444] (cloudwatch) refactor annotation query --- .../cloudwatch/annotation_query.d.ts | 2 + .../datasource/cloudwatch/annotation_query.js | 105 +++++++++++++++++ .../datasource/cloudwatch/datasource.js | 107 +++--------------- .../specs/annotation_query_specs.ts | 81 +++++++++++++ .../cloudwatch/specs/datasource_specs.ts | 55 --------- 5 files changed, 201 insertions(+), 149 deletions(-) create mode 100644 public/app/plugins/datasource/cloudwatch/annotation_query.d.ts create mode 100644 public/app/plugins/datasource/cloudwatch/annotation_query.js create mode 100644 public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts diff --git a/public/app/plugins/datasource/cloudwatch/annotation_query.d.ts b/public/app/plugins/datasource/cloudwatch/annotation_query.d.ts new file mode 100644 index 00000000000..c3318b8e133 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/annotation_query.d.ts @@ -0,0 +1,2 @@ +declare var test: any; +export default test; diff --git a/public/app/plugins/datasource/cloudwatch/annotation_query.js b/public/app/plugins/datasource/cloudwatch/annotation_query.js new file mode 100644 index 00000000000..46fbd3a87a9 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/annotation_query.js @@ -0,0 +1,105 @@ +define([ + 'lodash', +], +function (_) { + 'use strict'; + + function CloudWatchAnnotationQuery(datasource, annotation, $q, templateSrv) { + this.datasource = datasource; + this.annotation = annotation; + this.$q = $q; + this.templateSrv = templateSrv; + } + + CloudWatchAnnotationQuery.prototype.process = function(from, to) { + var self = this; + var usePrefixMatch = this.annotation.prefixMatching; + var region = this.templateSrv.replace(this.annotation.region); + var namespace = this.templateSrv.replace(this.annotation.namespace); + var metricName = this.templateSrv.replace(this.annotation.metricName); + var dimensions = this.datasource.convertDimensionFormat(this.annotation.dimensions); + var statistics = _.map(this.annotation.statistics, function(s) { return self.templateSrv.replace(s); }); + var defaultPeriod = usePrefixMatch ? '' : '300'; + var period = this.annotation.period || defaultPeriod; + period = parseInt(period, 10); + var actionPrefix = this.annotation.actionPrefix || ''; + var alarmNamePrefix = this.annotation.alarmNamePrefix || ''; + + var d = this.$q.defer(); + var allQueryPromise; + if (usePrefixMatch) { + allQueryPromise = [ + this.datasource.performDescribeAlarms(region, actionPrefix, alarmNamePrefix, [], '').then(function(alarms) { + alarms.MetricAlarms = self.filterAlarms(alarms, namespace, metricName, dimensions, statistics, period); + return alarms; + }) + ]; + } else { + if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return this.$q.when([]); } + + allQueryPromise = _.map(statistics, function(statistic) { + return self.datasource.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); + }); + } + this.$q.all(allQueryPromise).then(function(alarms) { + var eventList = []; + + var start = self.datasource.convertToCloudWatchTime(from, false); + var end = self.datasource.convertToCloudWatchTime(to, true); + _.chain(alarms) + .pluck('MetricAlarms') + .flatten() + .each(function(alarm) { + if (!alarm) { + d.resolve(eventList); + return; + } + + self.datasource.performDescribeAlarmHistory(region, alarm.AlarmName, start, end).then(function(history) { + _.each(history.AlarmHistoryItems, function(h) { + var event = { + annotation: self.annotation, + time: Date.parse(h.Timestamp), + title: h.AlarmName, + tags: [h.HistoryItemType], + text: h.HistorySummary + }; + + eventList.push(event); + }); + + d.resolve(eventList); + }); + }); + }); + + return d.promise; + }; + + CloudWatchAnnotationQuery.prototype.filterAlarms = function(alarms, namespace, metricName, dimensions, statistics, period) { + return _.filter(alarms.MetricAlarms, function(alarm) { + if (!_.isEmpty(namespace) && alarm.Namespace !== namespace) { + return false; + } + if (!_.isEmpty(metricName) && alarm.MetricName !== metricName) { + return false; + } + var sd = function(d) { + return d.Name; + }; + var isSameDimensions = JSON.stringify(_.sortBy(alarm.Dimensions, sd)) === JSON.stringify(_.sortBy(dimensions, sd)); + if (!_.isEmpty(dimensions) && !isSameDimensions) { + return false; + } + if (!_.isEmpty(statistics) && !_.contains(statistics, alarm.Statistic)) { + return false; + } + if (!_.isNaN(period) && alarm.Period !== period) { + return false; + } + return true; + }); + }; + + return CloudWatchAnnotationQuery; +}); diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index 881d4e48c3d..153ca28b54f 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -3,8 +3,9 @@ define([ 'lodash', 'moment', 'app/core/utils/datemath', + './annotation_query', ], -function (angular, _, moment, dateMath) { +function (angular, _, moment, dateMath, CloudWatchAnnotationQuery) { 'use strict'; /** @ngInject */ @@ -15,9 +16,10 @@ function (angular, _, moment, dateMath) { this.proxyUrl = instanceSettings.url; this.defaultRegion = instanceSettings.jsonData.defaultRegion; + var self = this; this.query = function(options) { - var start = convertToCloudWatchTime(options.range.from, false); - var end = convertToCloudWatchTime(options.range.to, true); + var start = self.convertToCloudWatchTime(options.range.from, false); + var end = self.convertToCloudWatchTime(options.range.to, true); var queries = []; options = angular.copy(options); @@ -30,7 +32,7 @@ function (angular, _, moment, dateMath) { query.region = templateSrv.replace(target.region, options.scopedVars); query.namespace = templateSrv.replace(target.namespace, options.scopedVars); query.metricName = templateSrv.replace(target.metricName, options.scopedVars); - query.dimensions = convertDimensionFormat(target.dimensions, options.scopedVars); + query.dimensions = self.convertDimensionFormat(target.dimensions, options.scopedVars); query.statistics = target.statistics; var range = end - start; @@ -115,7 +117,7 @@ function (angular, _, moment, dateMath) { parameters: { namespace: templateSrv.replace(namespace), metricName: templateSrv.replace(metricName), - dimensions: convertDimensionFormat(filterDimensions, {}), + dimensions: this.convertDimensionFormat(filterDimensions, {}), } }; @@ -229,91 +231,8 @@ function (angular, _, moment, dateMath) { }; this.annotationQuery = function(options) { - var annotation = options.annotation; - var usePrefixMatch = annotation.prefixMatching; - var region = templateSrv.replace(annotation.region); - var namespace = templateSrv.replace(annotation.namespace); - var metricName = templateSrv.replace(annotation.metricName); - var dimensions = convertDimensionFormat(annotation.dimensions); - var statistics = _.map(annotation.statistics, function(s) { return templateSrv.replace(s); }); - var defaultPeriod = usePrefixMatch ? '' : '300'; - var period = annotation.period || defaultPeriod; - period = parseInt(period, 10); - var actionPrefix = annotation.actionPrefix || ''; - var alarmNamePrefix = annotation.alarmNamePrefix || ''; - - var d = $q.defer(); - var self = this; - var allQueryPromise; - if (usePrefixMatch) { - allQueryPromise = [ - this.performDescribeAlarms(region, actionPrefix, alarmNamePrefix, [], '').then(function(alarms) { - alarms.MetricAlarms = _.filter(alarms.MetricAlarms, function(alarm) { - if (!_.isEmpty(namespace) && alarm.Namespace !== namespace) { - return false; - } - if (!_.isEmpty(metricName) && alarm.MetricName !== metricName) { - return false; - } - var sd = function(d) { - return d.Name; - }; - var isSameDimensions = JSON.stringify(_.sortBy(alarm.Dimensions, sd)) === JSON.stringify(_.sortBy(dimensions, sd)); - if (!_.isEmpty(dimensions) && !isSameDimensions) { - return false; - } - if (!_.isEmpty(statistics) && !_.contains(statistics, alarm.Statistic)) { - return false; - } - if (!_.isNaN(period) && alarm.Period !== period) { - return false; - } - return true; - }); - - return alarms; - }) - ]; - } else { - if (!region || !namespace || !metricName || _.isEmpty(statistics)) { return $q.when([]); } - - allQueryPromise = _.map(statistics, function(statistic) { - return self.performDescribeAlarmsForMetric(region, namespace, metricName, dimensions, statistic, period); - }); - } - $q.all(allQueryPromise).then(function(alarms) { - var eventList = []; - - var start = convertToCloudWatchTime(options.range.from, false); - var end = convertToCloudWatchTime(options.range.to, true); - _.chain(alarms) - .pluck('MetricAlarms') - .flatten() - .each(function(alarm) { - if (!alarm) { - d.resolve(eventList); - return; - } - - self.performDescribeAlarmHistory(region, alarm.AlarmName, start, end).then(function(history) { - _.each(history.AlarmHistoryItems, function(h) { - var event = { - annotation: annotation, - time: Date.parse(h.Timestamp), - title: h.AlarmName, - tags: [h.HistoryItemType], - text: h.HistorySummary - }; - - eventList.push(event); - }); - - d.resolve(eventList); - }); - }); - }); - - return d.promise; + var annotationQuery = new CloudWatchAnnotationQuery(this, options.annotation, $q, templateSrv); + return annotationQuery.process(options.range.from, options.range.to); }; this.testDatasource = function() { @@ -383,21 +302,21 @@ function (angular, _, moment, dateMath) { }); } - function convertToCloudWatchTime(date, roundUp) { + this.convertToCloudWatchTime = function(date, roundUp) { if (_.isString(date)) { date = dateMath.parse(date, roundUp); } return Math.round(date.valueOf() / 1000); - } + }; - function convertDimensionFormat(dimensions, scopedVars) { + this.convertDimensionFormat = function(dimensions, scopedVars) { return _.map(dimensions, function(value, key) { return { Name: templateSrv.replace(key, scopedVars), Value: templateSrv.replace(value, scopedVars) }; }); - } + }; } diff --git a/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts new file mode 100644 index 00000000000..dbdbc8d1fd6 --- /dev/null +++ b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts @@ -0,0 +1,81 @@ +import "../datasource"; +import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; +import moment from 'moment'; +import helpers from 'test/specs/helpers'; +import Datasource from "../datasource"; +import CloudWatchAnnotationQuery from '../annotation_query'; + +describe('CloudWatchAnnotationQuery', function() { + var ctx = new helpers.ServiceTestContext(); + var instanceSettings = { + jsonData: {defaultRegion: 'us-east-1', access: 'proxy'}, + }; + + beforeEach(angularMocks.module('grafana.core')); + beforeEach(angularMocks.module('grafana.services')); + beforeEach(angularMocks.module('grafana.controllers')); + beforeEach(ctx.providePhase(['templateSrv', 'backendSrv'])); + + beforeEach(angularMocks.inject(function($q, $rootScope, $httpBackend, $injector) { + ctx.$q = $q; + ctx.$httpBackend = $httpBackend; + ctx.$rootScope = $rootScope; + ctx.ds = $injector.instantiate(Datasource, {instanceSettings: instanceSettings}); + })); + + describe('When performing annotationQuery', function() { + var parameter = { + annotation: { + region: 'us-east-1', + namespace: 'AWS/EC2', + metricName: 'CPUUtilization', + dimensions: { + InstanceId: 'i-12345678' + }, + statistics: ['Average'], + period: 300 + }, + range: { + from: moment(1443438674760), + to: moment(1443460274760) + } + }; + var alarmResponse = { + MetricAlarms: [ + { + AlarmName: 'test_alarm_name' + } + ] + }; + var historyResponse = { + AlarmHistoryItems: [ + { + Timestamp: '2015-01-01T00:00:00.000Z', + HistoryItemType: 'StateUpdate', + AlarmName: 'test_alarm_name', + HistoryData: '{}', + HistorySummary: 'test_history_summary' + } + ] + }; + beforeEach(function() { + ctx.backendSrv.datasourceRequest = function(params) { + switch (params.data.action) { + case 'DescribeAlarmsForMetric': + return ctx.$q.when({data: alarmResponse}); + case 'DescribeAlarmHistory': + return ctx.$q.when({data: historyResponse}); + } + }; + }); + it('should return annotation list', function(done) { + var annotationQuery = new CloudWatchAnnotationQuery(ctx.ds, parameter.annotation, ctx.$q, ctx.templateSrv); + annotationQuery.process(parameter.range.from, parameter.range.to).then(function(result) { + expect(result[0].title).to.be('test_alarm_name'); + expect(result[0].text).to.be('test_history_summary'); + done(); + }); + ctx.$rootScope.$apply(); + }); + }); +}); diff --git a/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts b/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts index cec32420aea..c03e5085cc2 100644 --- a/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts +++ b/public/app/plugins/datasource/cloudwatch/specs/datasource_specs.ts @@ -187,59 +187,4 @@ describe('CloudWatchDatasource', function() { expect(scenario.request.data.action).to.be('ListMetrics'); }); }); - - describe('When performing annotationQuery', function() { - var parameter = { - annotation: { - region: 'us-east-1', - namespace: 'AWS/EC2', - metricName: 'CPUUtilization', - dimensions: { - InstanceId: 'i-12345678' - }, - statistics: ['Average'], - period: 300 - }, - range: { - from: moment(1443438674760), - to: moment(1443460274760) - } - }; - var alarmResponse = { - MetricAlarms: [ - { - AlarmName: 'test_alarm_name' - } - ] - }; - var historyResponse = { - AlarmHistoryItems: [ - { - Timestamp: '2015-01-01T00:00:00.000Z', - HistoryItemType: 'StateUpdate', - AlarmName: 'test_alarm_name', - HistoryData: '{}', - HistorySummary: 'test_history_summary' - } - ] - }; - beforeEach(function() { - ctx.backendSrv.datasourceRequest = function(params) { - switch (params.data.action) { - case 'DescribeAlarmsForMetric': - return ctx.$q.when({data: alarmResponse}); - case 'DescribeAlarmHistory': - return ctx.$q.when({data: historyResponse}); - } - }; - }); - it('should return annotation list', function(done) { - ctx.ds.annotationQuery(parameter).then(function(result) { - expect(result[0].title).to.be('test_alarm_name'); - expect(result[0].text).to.be('test_history_summary'); - done(); - }); - ctx.$rootScope.$apply(); - }); - }); }); From a4e5b7ea379e9f8a92ea0432158e9071a7a89ccc Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Thu, 4 Feb 2016 13:21:29 +0900 Subject: [PATCH 006/444] fix cloudwatch test error --- .../datasource/cloudwatch/specs/annotation_query_specs.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts index dbdbc8d1fd6..e3a8fc3f9cb 100644 --- a/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts +++ b/public/app/plugins/datasource/cloudwatch/specs/annotation_query_specs.ts @@ -2,7 +2,7 @@ import "../datasource"; import {describe, beforeEach, it, sinon, expect, angularMocks} from 'test/lib/common'; import moment from 'moment'; import helpers from 'test/specs/helpers'; -import Datasource from "../datasource"; +import {CloudWatchDatasource} from "../datasource"; import CloudWatchAnnotationQuery from '../annotation_query'; describe('CloudWatchAnnotationQuery', function() { @@ -20,7 +20,7 @@ describe('CloudWatchAnnotationQuery', function() { ctx.$q = $q; ctx.$httpBackend = $httpBackend; ctx.$rootScope = $rootScope; - ctx.ds = $injector.instantiate(Datasource, {instanceSettings: instanceSettings}); + ctx.ds = $injector.instantiate(CloudWatchDatasource, {instanceSettings: instanceSettings}); })); describe('When performing annotationQuery', function() { From 616a6bec385e8306bce924a778ed379e990ee884 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Fri, 5 Feb 2016 01:15:09 -0800 Subject: [PATCH 007/444] Added api heading in the main menu --- docs/mkdocs.yml | 10 +++++++++- docs/sources/http_api/first_steps.md | 14 ++++++-------- docs/sources/installation/migrating_to2.md | 2 +- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index e4c3dd91b79..843ba61a2f6 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -65,7 +65,6 @@ pages: - ['reference/plugins.md', 'Reference', 'Plugins'] - ['reference/export_import.md', 'Reference', 'Import & Export'] - ['reference/admin.md', 'Reference', 'Administration'] -- ['reference/http_api.md', 'Reference', 'HTTP API'] - ['reference/keyboard_shortcuts.md', 'Reference', 'Keyboard Shortcuts'] - ['datasources/overview.md', 'Data Sources', 'Overview'] @@ -77,6 +76,15 @@ pages: - ['datasources/kairosdb.md', 'Data Sources', 'KairosDB'] - ['datasources/prometheus.md', 'Data Sources', 'Prometheus'] +- ['http_api/first_steps.md', 'HTTP API', 'Authentication API'] +- ['http_api/dashboards.md', 'HTTP API', 'Dashboards API'] +- ['http_api/data_sources.md', 'HTTP API', 'Data Sources API'] +- ['http_api/orgs.md', 'HTTP API', 'Organisations API'] +- ['http_api/users.md', 'HTTP API', 'Users API'] +- ['http_api/admin.md', 'HTTP API', 'Admin API'] +- ['http_api/snapshots.md', 'HTTP API', 'Snapshots API'] +- ['http_api/general.md', 'HTTP API', 'Other API'] + - ['tutorials/index.md', 'Tutorials', 'Tutorials'] - ['tutorials/hubot_howto.md', 'Tutorials', 'How To integrate Hubot and Grafana'] diff --git a/docs/sources/http_api/first_steps.md b/docs/sources/http_api/first_steps.md index 0fbdf348327..2c63077a8f1 100644 --- a/docs/sources/http_api/first_steps.md +++ b/docs/sources/http_api/first_steps.md @@ -1,21 +1,19 @@ ---- -page_title: HTTP API +page_title: Authentication API page_description: Grafana HTTP API Reference page_keywords: grafana, admin, http, api, documentation --- -# HTTP API Reference +# Authentication API The Grafana backend exposes an HTTP API, the same API is used by the frontend to do everything from saving dashboards, creating users and updating data sources. -## Authorization - -### Tokens +## Tokens Currently you can authenticate via an `API Token` or via a `Session cookie` (acquired using regular login or oauth). -### Basic Auth +## Basic Auth If basic auth is enabled (it is enabled by default) you can authenticate your HTTP request via standard basic auth. @@ -26,7 +24,7 @@ curl example: {"id":1,"name":"Main Org."} ``` -### Create API Token +## Create API Token Open the sidemenu and click the organization dropdown and select the `API Keys` option. @@ -40,4 +38,4 @@ You use the token in all requests in the `Authorization` header, like this: Accept: application/json Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk -The `Authorization` header value should be `Bearer `. \ No newline at end of file +The `Authorization` header value should be `Bearer `. diff --git a/docs/sources/installation/migrating_to2.md b/docs/sources/installation/migrating_to2.md index 497b53e77e2..aebe4a83788 100644 --- a/docs/sources/installation/migrating_to2.md +++ b/docs/sources/installation/migrating_to2.md @@ -20,7 +20,7 @@ migrate to Grafana 2.0. ## Adding Data sources The `config.js` file has been deprecated. Data sources are now managed via -the UI or [HTTP API](../reference/http_api.md). Manage your +the UI or [HTTP API](../http_api/first_steps.md). Manage your organizations data sources by clicking on the `Data Sources` menu on the side menu (which can be toggled via the Grafana icon in the upper left of your browser). From 4ff6748eb448c6cf70c3e3d2fb5100a230dc0a96 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Fri, 5 Feb 2016 01:47:34 -0800 Subject: [PATCH 008/444] Linked docs from main nav --- docs/mkdocs.yml | 17 +++++---- docs/sources/http_api/admin.md | 16 ++++---- .../http_api/{first_steps.md => auth.md} | 3 -- .../http_api/{dashboards.md => dashboard.md} | 22 +++++------ .../{data_sources.md => data_source.md} | 20 +++++----- docs/sources/http_api/{orgs.md => org.md} | 38 +++++++++---------- .../sources/http_api/{general.md => other.md} | 14 +++---- docs/sources/http_api/overview.md | 21 ++++++++++ .../http_api/{snapshots.md => snapshot.md} | 16 ++++---- docs/sources/http_api/{users.md => user.md} | 30 +++++++-------- docs/sources/installation/migrating_to2.md | 2 +- 11 files changed, 109 insertions(+), 90 deletions(-) rename docs/sources/http_api/{first_steps.md => auth.md} (86%) rename docs/sources/http_api/{dashboards.md => dashboard.md} (95%) rename docs/sources/http_api/{data_sources.md => data_source.md} (92%) rename docs/sources/http_api/{orgs.md => org.md} (90%) rename docs/sources/http_api/{general.md => other.md} (87%) create mode 100644 docs/sources/http_api/overview.md rename docs/sources/http_api/{snapshots.md => snapshot.md} (92%) rename docs/sources/http_api/{users.md => user.md} (91%) diff --git a/docs/mkdocs.yml b/docs/mkdocs.yml index 843ba61a2f6..7dc5922951b 100644 --- a/docs/mkdocs.yml +++ b/docs/mkdocs.yml @@ -76,14 +76,15 @@ pages: - ['datasources/kairosdb.md', 'Data Sources', 'KairosDB'] - ['datasources/prometheus.md', 'Data Sources', 'Prometheus'] -- ['http_api/first_steps.md', 'HTTP API', 'Authentication API'] -- ['http_api/dashboards.md', 'HTTP API', 'Dashboards API'] -- ['http_api/data_sources.md', 'HTTP API', 'Data Sources API'] -- ['http_api/orgs.md', 'HTTP API', 'Organisations API'] -- ['http_api/users.md', 'HTTP API', 'Users API'] -- ['http_api/admin.md', 'HTTP API', 'Admin API'] -- ['http_api/snapshots.md', 'HTTP API', 'Snapshots API'] -- ['http_api/general.md', 'HTTP API', 'Other API'] +- ['http_api/overview.md', 'API', 'Overview'] +- ['http_api/auth.md', 'API', 'Authentication API'] +- ['http_api/dashboard.md', 'API', 'Dashboard API'] +- ['http_api/data_source.md', 'API', 'Data Source API'] +- ['http_api/org.md', 'API', 'Organisation API'] +- ['http_api/user.md', 'API', 'User API'] +- ['http_api/admin.md', 'API', 'Admin API'] +- ['http_api/snapshot.md', 'API', 'Snapshot API'] +- ['http_api/other.md', 'API', 'Other API'] - ['tutorials/index.md', 'Tutorials', 'Tutorials'] - ['tutorials/hubot_howto.md', 'Tutorials', 'How To integrate Hubot and Grafana'] diff --git a/docs/sources/http_api/admin.md b/docs/sources/http_api/admin.md index 4688b4f5d9f..ba1a0923861 100644 --- a/docs/sources/http_api/admin.md +++ b/docs/sources/http_api/admin.md @@ -4,9 +4,9 @@ page_description: Grafana Admin API Reference page_keywords: grafana, admin, http, api, documentation --- -## Admin API +# Admin API -### Settings +## Settings `GET /api/admin/settings` @@ -162,7 +162,7 @@ page_keywords: grafana, admin, http, api, documentation } } -### Grafana Stats +## Grafana Stats `GET /api/admin/stats` @@ -190,7 +190,7 @@ page_keywords: grafana, admin, http, api, documentation "grafana_admin_count":2 } -### Global Users +## Global Users `POST /api/admin/users` @@ -217,7 +217,7 @@ Create new user {"id":5,"message":"User created"} -### Password for User +## Password for User `PUT /api/admin/users/:id/password` @@ -237,7 +237,7 @@ Change password for specific user {"password":"userpassword"} -### Permissions +## Permissions `PUT /api/admin/users/:id/permissions` @@ -255,7 +255,7 @@ Change password for specific user {message: "User permissions updated"} -### Delete global User +## Delete global User `DELETE /api/admin/users/:id` @@ -271,4 +271,4 @@ Change password for specific user HTTP/1.1 200 Content-Type: application/json - {message: "User deleted"} \ No newline at end of file + {message: "User deleted"} diff --git a/docs/sources/http_api/first_steps.md b/docs/sources/http_api/auth.md similarity index 86% rename from docs/sources/http_api/first_steps.md rename to docs/sources/http_api/auth.md index 2c63077a8f1..df874d1653e 100644 --- a/docs/sources/http_api/first_steps.md +++ b/docs/sources/http_api/auth.md @@ -6,9 +6,6 @@ page_keywords: grafana, admin, http, api, documentation # Authentication API -The Grafana backend exposes an HTTP API, the same API is used by the frontend to do everything from saving -dashboards, creating users and updating data sources. - ## Tokens Currently you can authenticate via an `API Token` or via a `Session cookie` (acquired using regular login or oauth). diff --git a/docs/sources/http_api/dashboards.md b/docs/sources/http_api/dashboard.md similarity index 95% rename from docs/sources/http_api/dashboards.md rename to docs/sources/http_api/dashboard.md index e1cbf6e436f..68f6ab022cc 100644 --- a/docs/sources/http_api/dashboards.md +++ b/docs/sources/http_api/dashboard.md @@ -1,12 +1,12 @@ ---- -page_title: Dashboards API -page_description: Grafana Dashboards API Reference -page_keywords: grafana, admin, http, api, documentation, dashboards +page_title: Dashboard API +page_description: Grafana Dashboard API Reference +page_keywords: grafana, admin, http, api, documentation, dashboard --- -## Dashboards API +# Dashboard API -### Create / Update dashboard +## Create / Update dashboard `POST /api/dashboards/db` @@ -73,7 +73,7 @@ same status code is also used if another dashboard exists with the same title. T In in case of title already exists the `status` property will be `name-exists`. -### Get dashboard +## Get dashboard `GET /api/dashboards/db/:slug` @@ -110,7 +110,7 @@ Will return the dashboard given the dashboard slug. Slug is the url friendly ver } } -### Delete dashboard +## Delete dashboard `DELETE /api/dashboards/db/:slug` @@ -130,7 +130,7 @@ The above will delete the dashboard with the specified slug. The slug is the url {"title": "Test"} -### Gets the home dashboard +## Gets the home dashboard `GET /api/dashboards/home` @@ -186,7 +186,7 @@ Will return the home dashboard. } } -### Tags for Dashboard +## Tags for Dashboard `GET /api/dashboards/tags` @@ -216,11 +216,11 @@ Get all tabs of dashboards } ] -### Dashboard from JSON file +## Dashboard from JSON file `GET /file/:file` -### Search Dashboards +## Search Dashboards `GET /api/search/` diff --git a/docs/sources/http_api/data_sources.md b/docs/sources/http_api/data_source.md similarity index 92% rename from docs/sources/http_api/data_sources.md rename to docs/sources/http_api/data_source.md index 8e2bc4e88de..57352161d31 100644 --- a/docs/sources/http_api/data_sources.md +++ b/docs/sources/http_api/data_source.md @@ -1,12 +1,12 @@ ---- -page_title: Data sources API -page_description: Grafana Data sources API Reference -page_keywords: grafana, admin, http, api, documentation, datasources +page_title: Data source API +page_description: Grafana Data source API Reference +page_keywords: grafana, admin, http, api, documentation, datasource --- -## Data sources API +# Data source API -### Get all datasources +## Get all datasources `GET /api/datasources` @@ -41,7 +41,7 @@ page_keywords: grafana, admin, http, api, documentation, datasources } ] -### Get a single data sources by Id +## Get a single data sources by Id `GET /api/datasources/:datasourceId` @@ -74,7 +74,7 @@ page_keywords: grafana, admin, http, api, documentation, datasources "jsonData":null } -### Create data source +## Create data source `POST /api/datasources` @@ -101,7 +101,7 @@ page_keywords: grafana, admin, http, api, documentation, datasources {"id":1,"message":"Datasource added"} -### Update an existing data source +## Update an existing data source `PUT /api/datasources/:datasourceId` @@ -136,7 +136,7 @@ page_keywords: grafana, admin, http, api, documentation, datasources {"message":"Datasource updated"} -### Delete an existing data source +## Delete an existing data source `DELETE /api/datasources/:datasourceId` @@ -154,7 +154,7 @@ page_keywords: grafana, admin, http, api, documentation, datasources {"message":"Data source deleted"} -### Available data source types +## Available data source types `GET /api/datasources/plugins` diff --git a/docs/sources/http_api/orgs.md b/docs/sources/http_api/org.md similarity index 90% rename from docs/sources/http_api/orgs.md rename to docs/sources/http_api/org.md index 9c378aaa06a..adb5d5cd31e 100644 --- a/docs/sources/http_api/orgs.md +++ b/docs/sources/http_api/org.md @@ -1,12 +1,12 @@ ---- -page_title: Organisations API -page_description: Grafana Organisations API Reference -page_keywords: grafana, admin, http, api, documentation, orgs, organisations +page_title: Organisation API +page_description: Grafana Organisation API Reference +page_keywords: grafana, admin, http, api, documentation, orgs, organisation --- -## Organisation API +# Organisation API -### Get current Organisation +## Get current Organisation `GET /api/org` @@ -27,7 +27,7 @@ page_keywords: grafana, admin, http, api, documentation, orgs, organisations "name":"Main Org." } -### Get Organisation by Id +## Get Organisation by Id `GET /api/orgs/:orgId` @@ -56,7 +56,7 @@ page_keywords: grafana, admin, http, api, documentation, orgs, organisations } } -### Get Organisation by Name +## Get Organisation by Name `GET /api/orgs/name/:orgName` @@ -85,7 +85,7 @@ page_keywords: grafana, admin, http, api, documentation, orgs, organisations } } -### Update current Organisation +## Update current Organisation `PUT /api/org` @@ -109,7 +109,7 @@ page_keywords: grafana, admin, http, api, documentation, orgs, organisations {"message":"Organization updated"} -### Get all users within the actual organisation +## Get all users within the actual organisation `GET /api/org/users` @@ -135,7 +135,7 @@ page_keywords: grafana, admin, http, api, documentation, orgs, organisations } ] -### Add a new user to the actual organisation +## Add a new user to the actual organisation `POST /api/org/users` @@ -161,7 +161,7 @@ Adds a global user to the actual organisation. {"message":"User added to organization"} -### Updates the given user +## Updates the given user `PATCH /api/org/users/:userId` @@ -185,7 +185,7 @@ Adds a global user to the actual organisation. {"message":"Organization user updated"} -### Delete user in actual organisation +## Delete user in actual organisation `DELETE /api/org/users/:userId` @@ -204,9 +204,9 @@ Adds a global user to the actual organisation. {"message":"User removed from organization"} -## Organisations +# Organisations -### Search all Organisations +## Search all Organisations `GET /api/orgs` @@ -229,7 +229,7 @@ Adds a global user to the actual organisation. } ] -### Update Organisation +## Update Organisation `PUT /api/orgs/:orgId` @@ -254,7 +254,7 @@ Update Organisation, fields *Adress 1*, *Adress 2*, *City* are not implemented y {"message":"Organization updated"} -### Get Users in Organisation +## Get Users in Organisation `GET /api/orgs/:orgId/users` @@ -279,7 +279,7 @@ Update Organisation, fields *Adress 1*, *Adress 2*, *City* are not implemented y } ] -### Add User in Organisation +## Add User in Organisation `POST /api/orgs/:orgId/users` @@ -302,7 +302,7 @@ Update Organisation, fields *Adress 1*, *Adress 2*, *City* are not implemented y {"message":"User added to organization"} -### Update Users in Organisation +## Update Users in Organisation `PATCH /api/orgs/:orgId/users/:userId` @@ -324,7 +324,7 @@ Update Organisation, fields *Adress 1*, *Adress 2*, *City* are not implemented y {"message":"Organization user updated"} -### Delete User in Organisation +## Delete User in Organisation `DELETE /api/orgs/:orgId/users/:userId` diff --git a/docs/sources/http_api/general.md b/docs/sources/http_api/other.md similarity index 87% rename from docs/sources/http_api/general.md rename to docs/sources/http_api/other.md index d110851d9dc..8852b6ccb38 100644 --- a/docs/sources/http_api/general.md +++ b/docs/sources/http_api/other.md @@ -1,12 +1,12 @@ ---- -page_title: General APIs -page_description: Grafana General API Reference +page_title: Other APIs +page_description: Grafana Other API Reference page_keywords: grafana, admin, http, api, documentation, dashboards --- -## Frontend Settings API +# Frontend Settings API -### Get Settings +## Get Settings `GET /api/frontend/settings` @@ -50,9 +50,9 @@ page_keywords: grafana, admin, http, api, documentation, dashboards "defaultDatasource": "Grafana" } -## Login API +# Login API -### Renew session based on remember cookie +## Renew session based on remember cookie `GET /api/login/ping` @@ -68,4 +68,4 @@ page_keywords: grafana, admin, http, api, documentation, dashboards HTTP/1.1 200 Content-Type: application/json - {"message": "Logged in"} \ No newline at end of file + {"message": "Logged in"} diff --git a/docs/sources/http_api/overview.md b/docs/sources/http_api/overview.md new file mode 100644 index 00000000000..8e7e2d60ad3 --- /dev/null +++ b/docs/sources/http_api/overview.md @@ -0,0 +1,21 @@ +---- +page_title: HTTP API +page_description: Grafana HTTP API Reference +page_keywords: grafana, admin, http, api, documentation +--- + +# HTTP API Reference + +The Grafana backend exposes an HTTP API, the same API is used by the frontend to do everything from saving +dashboards, creating users and updating data sources. + +###Supported HTTP APIs: + +* [Authentication API](/http_api/auth/) +* [Dashboard API](/http_api/dashboard/) +* [Data Source API](/http_api/data_source/) +* [Organisation API](/http_api/org/) +* [User API](/http_api/user/) +* [Admin API](/http_api/admin/) +* [Snapshot API](/http_api/snapshot/) +* [Other API](/http_api/other/) diff --git a/docs/sources/http_api/snapshots.md b/docs/sources/http_api/snapshot.md similarity index 92% rename from docs/sources/http_api/snapshots.md rename to docs/sources/http_api/snapshot.md index cbfc28cd71b..8f18c6ed81f 100644 --- a/docs/sources/http_api/snapshots.md +++ b/docs/sources/http_api/snapshot.md @@ -1,12 +1,12 @@ ---- -page_title: Snapshots API -page_description: Grafana Snapshots API Reference -page_keywords: grafana, admin, http, api, documentation, snapshots, dashboards +page_title: Snapshot API +page_description: Grafana Snapshot API Reference +page_keywords: grafana, admin, http, api, documentation, snapshot, dashboard --- -## Snapshots API +# Snapshot API -### Create new snapshot +## Create new snapshot `POST /api/snapshots` @@ -63,7 +63,7 @@ Keys: - **deleteKey** – Key generated to delete the snapshot - **key** – Key generated to share the dashboard -### Get Snapshot by Id +## Get Snapshot by Id `GET /api/snapshots/:key` @@ -118,7 +118,7 @@ Keys: } } -### Delete Snapshot by Id +## Delete Snapshot by Id `GET /api/snapshots-delete/:key` @@ -134,4 +134,4 @@ Keys: HTTP/1.1 200 Content-Type: application/json - {"message":"Snapshot deleted. It might take an hour before it's cleared from a CDN cache."} \ No newline at end of file + {"message":"Snapshot deleted. It might take an hour before it's cleared from a CDN cache."} diff --git a/docs/sources/http_api/users.md b/docs/sources/http_api/user.md similarity index 91% rename from docs/sources/http_api/users.md rename to docs/sources/http_api/user.md index 6b6015d3018..aa870031ca2 100644 --- a/docs/sources/http_api/users.md +++ b/docs/sources/http_api/user.md @@ -1,12 +1,12 @@ ---- -page_title: Users API -page_description: Grafana Users API Reference -page_keywords: grafana, admin, http, api, documentation, users +page_title: User API +page_description: Grafana User API Reference +page_keywords: grafana, admin, http, api, documentation, user --- -## Users API +# User API -### Search Users +## Search Users `GET /api/users` @@ -39,7 +39,7 @@ page_keywords: grafana, admin, http, api, documentation, users } ] -### Get single user by Id +## Get single user by Id `GET /api/users/:id` @@ -64,7 +64,7 @@ page_keywords: grafana, admin, http, api, documentation, users "isGrafanaAdmin": true } -### User Update +## User Update `PUT /api/users/:id` @@ -90,7 +90,7 @@ page_keywords: grafana, admin, http, api, documentation, users {"message":"User updated"} -### Get Organisations for user +## Get Organisations for user `GET /api/users/:id/orgs` @@ -116,7 +116,7 @@ page_keywords: grafana, admin, http, api, documentation, users ## User -### Actual User +## Actual User `GET /api/user` @@ -141,7 +141,7 @@ page_keywords: grafana, admin, http, api, documentation, users "isGrafanaAdmin":true } -### Change Password +## Change Password `PUT /api/user/password` @@ -167,7 +167,7 @@ Changes the password for the user {"message":"User password changed"} -### Switch user context +## Switch user context `POST /api/user/using/:organisationId` @@ -187,7 +187,7 @@ Switch user context to the given organisation. {"message":"Active organization changed"} -### Organisations of the actual User +## Organisations of the actual User `GET /api/user/orgs` @@ -213,7 +213,7 @@ Return a list of all organisations of the current user. } ] -### Star a dashboard +## Star a dashboard `POST /api/user/stars/dashboard/:dashboardId` @@ -233,7 +233,7 @@ Stars the given Dashboard for the actual user. {"message":"Dashboard starred!"} -### Unstar a dashboard +## Unstar a dashboard `DELETE /api/user/stars/dashboard/:dashboardId` @@ -251,4 +251,4 @@ Deletes the starring of the given Dashboard for the actual user. HTTP/1.1 200 Content-Type: application/json - {"message":"Dashboard unstarred"} \ No newline at end of file + {"message":"Dashboard unstarred"} diff --git a/docs/sources/installation/migrating_to2.md b/docs/sources/installation/migrating_to2.md index aebe4a83788..32e9c3371f3 100644 --- a/docs/sources/installation/migrating_to2.md +++ b/docs/sources/installation/migrating_to2.md @@ -20,7 +20,7 @@ migrate to Grafana 2.0. ## Adding Data sources The `config.js` file has been deprecated. Data sources are now managed via -the UI or [HTTP API](../http_api/first_steps.md). Manage your +the UI or [HTTP API](../http_api/overview.md). Manage your organizations data sources by clicking on the `Data Sources` menu on the side menu (which can be toggled via the Grafana icon in the upper left of your browser). From 21b0945d08d5c5ba1c1a3096443199db517c061b Mon Sep 17 00:00:00 2001 From: Matthew Toback Date: Sat, 6 Feb 2016 17:37:33 -0500 Subject: [PATCH 009/444] Beginnings of form restyling, nowhere near merge yet --- .bra.toml | 2 +- package.json | 1 + .../features/datasources/partials/edit.html | 18 ++++----- .../datasources/partials/http_settings.html | 38 +++++++++---------- public/less/bootswatch.dark.less | 2 +- public/less/filter-table.less | 4 +- public/less/grafana.less | 3 +- public/less/variables.dark.less | 3 ++ public/less/variables.light.less | 9 +++-- 9 files changed, 44 insertions(+), 36 deletions(-) diff --git a/.bra.toml b/.bra.toml index ef1a925158d..5ff554bfc75 100644 --- a/.bra.toml +++ b/.bra.toml @@ -3,7 +3,7 @@ init_cmds = [ ["go", "build", "-o", "./bin/grafana-server"], ["./bin/grafana-server"] ] -watch_all = true +watch_all = false watch_dirs = [ "$WORKDIR/pkg", "$WORKDIR/public/views", diff --git a/package.json b/package.json index 7a358ce3e04..22a517747b2 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "grunt-git-describe": "~2.3.2", "grunt-karma": "~0.12.1", "grunt-ng-annotate": "^1.0.1", + "grunt-notify": "^0.4.3", "grunt-string-replace": "~1.2.1", "grunt-systemjs-builder": "^0.2.5", "grunt-tslint": "^3.0.1", diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 00706cb4de5..f59178184c5 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -11,17 +11,17 @@

Edit data source

-
-
    -
  • +
    +
      +
    • Name
    • - +
      • -
    • +
    • Default  @@ -29,13 +29,13 @@
    -
    -
      -
    • +
      +
        +
      • Type
      • - +
      diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index d0d4206c579..dd651f85f81 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -1,53 +1,53 @@

      Http settings

      -
      -
      -
        -
      • +
        +
        +
          +
        • Url
        • - +
          • -
        • +
        • Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request
        • - +
        -
        -
          -
        • +
          +
            +
          • Http Auth
            • -
          • +
            • -
          • +
          -
          -
            -
          • +
            +
              +
              • -
            • +
            • User
            • - +
              • -
            • +
            • Password
            • - +
            diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 5f871b4f837..f084ee6c40c 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -33,7 +33,7 @@ body { height: 100%; //#gradient > .vertical (@bodyBackground, #252A30); //background: @bodyBackground; - background: @bodyBackground; + background: @nonDashBodyBackground; // url('../img/cubes.png') repeat right top; } diff --git a/public/less/filter-table.less b/public/less/filter-table.less index 6729b425e51..6bb4377189f 100644 --- a/public/less/filter-table.less +++ b/public/less/filter-table.less @@ -18,8 +18,8 @@ } .filter-table tr { - background: @grafanaPanelBackground; - border-bottom: 2px solid @bodyBackground; + background: @grafanaListBackground; + border-bottom: 2px solid @nonDashBodyBackground; } .filter-table th { diff --git a/public/less/grafana.less b/public/less/grafana.less index d33db98376b..6f5abd7c375 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -12,6 +12,7 @@ @import "panel.less"; @import "forms.less"; @import "tightform.less"; +@import "normform.less"; @import "sidemenu.less"; @import "navbar.less"; @import "gfbox.less"; @@ -405,6 +406,6 @@ border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); border-image-slice: 1; border-bottom: 2px solid transparent; - padding: 1.2rem 3rem 0.8rem 3rem; + padding: 1.2rem .2rem .4rem .2rem; } } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 4a989af8c2e..9a1315eb83b 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -53,6 +53,7 @@ // Scaffolding // ------------------------- @bodyBackground: rgb(22,22,22); +@nonDashBodyBackground: @grayDarker; @textColor: @grayLighter; // Links @@ -156,6 +157,8 @@ @inputDisabledBackground: #555; @formActionsBackground: transparent; @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +@labelBackground: @grayDark; + // Sidemenu // ------------------------- diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 22b661c6adf..6b5403333e3 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -33,9 +33,9 @@ // Status colors // ------------------------- -@online: #10a345; -@warn: #ffc03c; -@critical: #ed2e18; +@online: #01A64F; +@warn: #F79520; +@critical: #EC2128; // grafana Variables // ------------------------- @@ -66,6 +66,7 @@ // Scaffolding // ------------------------- @bodyBackground: #EFEFEF; +@nonDashBodyBackground: @grayLighter; @textColor: @gray; // Links @@ -170,6 +171,8 @@ @formActionsBackground: #f5f5f5; @inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border @inputText: #020202; +@labelBackground: #f8f8f8; + // Sidemenu // ------------------------- From 1bd58bc1c09c8be9a0990d761647b9033813a22c Mon Sep 17 00:00:00 2001 From: Matthew Toback Date: Sat, 6 Feb 2016 17:38:36 -0500 Subject: [PATCH 010/444] Added new file and removed change to .bra.toml --- .bra.toml | 2 +- public/less/normform.less | 242 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 243 insertions(+), 1 deletion(-) create mode 100644 public/less/normform.less diff --git a/.bra.toml b/.bra.toml index 5ff554bfc75..ef1a925158d 100644 --- a/.bra.toml +++ b/.bra.toml @@ -3,7 +3,7 @@ init_cmds = [ ["go", "build", "-o", "./bin/grafana-server"], ["./bin/grafana-server"] ] -watch_all = false +watch_all = true watch_dirs = [ "$WORKDIR/pkg", "$WORKDIR/public/views", diff --git a/public/less/normform.less b/public/less/normform.less new file mode 100644 index 00000000000..7a579c47534 --- /dev/null +++ b/public/less/normform.less @@ -0,0 +1,242 @@ +.norm-form { + border-top: 3px solid @nonDashBodyBackground; + border-left: 3px solid @nonDashBodyBackground; + border-right: 3px solid @nonDashBodyBackground; + background: transparent; + + &.last { + border-bottom: 1px solid @nonDashBodyBackground; + } + + &.borderless { + background: transparent; + border: none; + } + + .checkbox-label { + display: inline; + padding-right: 4px; + margin-bottom: 0; + } +} + +.norm-form-container-no-item-borders { + border: 1px solid @nonDashBodyBackground; + border-bottom: none; + + .norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input { + border: none; + } +} + + +.spaced-form { + .norm-form { + margin: 7px 0; + } +} + +.borderless { + .norm-form-item, + .norm-form-input { + border: none; + } +} + +.norm-form-container { + border-bottom: 1px solid @nonDashBodyBackground; +} + +.norm-form-btn { + padding: 7px 12px; +} + +.norm-form-list { + list-style: none; + margin: 0; + >li { + float: left; + background: @labelBackground; + } +} + +.norm-form-flex-wrapper { + display: flex; + flex-direction: row; + float: none !important; +} + +.grafana-metric-options { + margin-top: 25px; +} + +.norm-form-item { + padding: 8px 7px; + display: inline-block; + font-weight: normal; + border-right: 3px solid @nonDashBodyBackground; + color: @grayLighter; + display: inline-block; + .small; + + .has-open-function & { + padding-top: 25px; + } + + .norm-form-disabled & { + color: @grafanaTargetColorHide; + } + + &:hover, &:focus { + text-decoration: none; + } + + &a:hover { + background: @grafanaTargetFuncBackground; + } + + &.last { + border-right: none; + } +} + + +.norm-form-item-icon { + i { + width: 15px; + text-align: center; + display: inline-block; + } +} + +.norm-form-func { + background: @grafanaTargetFuncBackground; + > a { + color: @grafanaTargetColor; + } + > a:hover { + color: @linkColor; + } + + &.show-function-controls { + padding-top: 5px; + min-width: 100px; + text-align: center; + } +} + +input[type=text].norm-form-func-param { + background: transparent; + border: none; + margin: 0; + padding: 0; +} + +input[type=text].norm-form-clear-input { + padding: 8px 7px; + border: none; + margin: 0px; + background: transparent; + color: @grafanaTargetColor; + border-radius: 0; + border-right: 2px solid @nonDashBodyBackground; +} + +[type=text], +[type=email], +[type=number], +[type=password] { + &.norm-form-input { + border: none; + border-right: 2px solid @nonDashBodyBackground; + margin: 0px; + border-radius: 0; + padding: 8px 6px; + height: 100%; + box-sizing: border-box; + &.last { + border-right: none; + } + } +} + +input[type=checkbox].norm-form-checkbox { + margin: 0; +} + +.norm-form-textarea { + height: 200px; + margin: 0; + box-sizing: border-box; +} + +select.norm-form-input { + border: none; + border-right: 1px solid @grafanaTargetSegmentBorder; + margin: 0px; + border-radius: 0; + height: 36px; + padding: 9px 3px; + &.last { + border-right: none; + } +} + +.norm-form-func-controls { + display: none; + text-align: center; + + .fa-arrow-left { + float: left; + position: relative; + top: 2px; + } + .fa-arrow-right { + float: right; + position: relative; + top: 2px; + } + .fa-remove { + margin-left: 10px; + } +} + +.norm-form-radio { + input[type=radio] { + margin: 0; + } + label { + display: inline; + } +} + +.norm-form-section { + margin-bottom: 20px; + margin-right: 40px; + vertical-align: top; + display: inline-block; + .norm-form { + margin-left: 20px; + } +} + +.norm-form-align { + padding-left: 66px; +} + +.norm-form-item-large { width: 115px; } +.norm-form-item-xlarge { width: 150px; } +.norm-form-item-xxlarge { width: 200px; } + +.norm-form-input.norm-form-item-xxlarge { + width: 215px; +} + +.norm-form-auto { + width: auto; +} + +.norm-form-inner-box { + margin: 20px 0 20px 148px; + display: inline-block; +} From 50920b1423a6aa994b09bd78a09e04cbac3da325 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 7 Feb 2016 20:05:49 +0100 Subject: [PATCH 011/444] ux(forms): minor upgrade to new form design --- public/less/bootswatch.dark.less | 5 +-- public/less/filter-table.less | 2 +- public/less/gfbox.less | 1 + public/less/normform.less | 54 ++++++-------------------------- public/less/variables.dark.less | 8 ++--- public/less/variables.light.less | 10 +++--- 6 files changed, 20 insertions(+), 60 deletions(-) diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index f084ee6c40c..a7e33c95eb4 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -31,10 +31,7 @@ html { body { height: 100%; - //#gradient > .vertical (@bodyBackground, #252A30); - //background: @bodyBackground; - background: @nonDashBodyBackground; - // url('../img/cubes.png') repeat right top; + background: @bodyBackground; } .page-header { diff --git a/public/less/filter-table.less b/public/less/filter-table.less index 6bb4377189f..5db53f1f46b 100644 --- a/public/less/filter-table.less +++ b/public/less/filter-table.less @@ -19,7 +19,7 @@ .filter-table tr { background: @grafanaListBackground; - border-bottom: 2px solid @nonDashBodyBackground; + border-bottom: 2px solid @pageBackground; } .filter-table th { diff --git a/public/less/gfbox.less b/public/less/gfbox.less index 16651705a0e..8e957d50351 100644 --- a/public/less/gfbox.less +++ b/public/less/gfbox.less @@ -69,6 +69,7 @@ } .page-container { + background-color: @pageBackground; position: relative; padding: 20px 20px 60px 81px; } diff --git a/public/less/normform.less b/public/less/normform.less index 7a579c47534..c4fad4c648e 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -1,11 +1,11 @@ .norm-form { - border-top: 3px solid @nonDashBodyBackground; - border-left: 3px solid @nonDashBodyBackground; - border-right: 3px solid @nonDashBodyBackground; + border-top: 3px solid @pageBackground; + border-left: 3px solid @pageBackground; + border-right: 3px solid @pageBackground; background: transparent; &.last { - border-bottom: 1px solid @nonDashBodyBackground; + border-bottom: 1px solid @pageBackground; } &.borderless { @@ -21,7 +21,7 @@ } .norm-form-container-no-item-borders { - border: 1px solid @nonDashBodyBackground; + border: 1px solid @pageBackground; border-bottom: none; .norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input { @@ -44,7 +44,7 @@ } .norm-form-container { - border-bottom: 1px solid @nonDashBodyBackground; + border-bottom: 1px solid @pageBackground; } .norm-form-btn { @@ -74,7 +74,7 @@ padding: 8px 7px; display: inline-block; font-weight: normal; - border-right: 3px solid @nonDashBodyBackground; + border-right: 3px solid @pageBackground; color: @grayLighter; display: inline-block; .small; @@ -139,7 +139,7 @@ input[type=text].norm-form-clear-input { background: transparent; color: @grafanaTargetColor; border-radius: 0; - border-right: 2px solid @nonDashBodyBackground; + border-right: 2px solid @pageBackground; } [type=text], @@ -148,7 +148,7 @@ input[type=text].norm-form-clear-input { [type=password] { &.norm-form-input { border: none; - border-right: 2px solid @nonDashBodyBackground; + border-right: 3px solid @pageBackground; margin: 0px; border-radius: 0; padding: 8px 6px; @@ -172,7 +172,7 @@ input[type=checkbox].norm-form-checkbox { select.norm-form-input { border: none; - border-right: 1px solid @grafanaTargetSegmentBorder; + border-right: 3px solid @pageBackground; margin: 0px; border-radius: 0; height: 36px; @@ -182,25 +182,6 @@ select.norm-form-input { } } -.norm-form-func-controls { - display: none; - text-align: center; - - .fa-arrow-left { - float: left; - position: relative; - top: 2px; - } - .fa-arrow-right { - float: right; - position: relative; - top: 2px; - } - .fa-remove { - margin-left: 10px; - } -} - .norm-form-radio { input[type=radio] { margin: 0; @@ -209,21 +190,6 @@ select.norm-form-input { display: inline; } } - -.norm-form-section { - margin-bottom: 20px; - margin-right: 40px; - vertical-align: top; - display: inline-block; - .norm-form { - margin-left: 20px; - } -} - -.norm-form-align { - padding-left: 66px; -} - .norm-form-item-large { width: 115px; } .norm-form-item-xlarge { width: 150px; } .norm-form-item-xxlarge { width: 200px; } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 9a1315eb83b..0420540675e 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -52,9 +52,9 @@ // Scaffolding // ------------------------- -@bodyBackground: rgb(22,22,22); -@nonDashBodyBackground: @grayDarker; -@textColor: @grayLighter; +@bodyBackground: rgb(20,20,20); +@pageBackground: @grayDarker; +@textColor: @grayLighter; // Links // ------------------------- @@ -105,8 +105,6 @@ @grafanaListHighlight: #333; @grafanaListMainLinkColor: @textColor; -@pageContainerBorderColor: @grayDark; - // Scrollbars @scrollbarBackground: #3a3a3a; @scrollbarBackground2: #3a3a3a; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 6b5403333e3..1a0c5957d04 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -10,7 +10,7 @@ // Grays // ------------------------- @black: #000; -@grayDarker: lighten(#000, 13.5%); // #222 +@grayDarker: lighten(#000, 11.5%); // #222 @grayDark: lighten(#000, 20%); // #333 @gray: lighten(#000, 33.5%); // #555 @grayLight: lighten(#000, 60%); // #999 @@ -65,9 +65,9 @@ // Scaffolding // ------------------------- -@bodyBackground: #EFEFEF; -@nonDashBodyBackground: @grayLighter; -@textColor: @gray; +@bodyBackground: #EFEFEF; +@pageBackground: @grayDarker; +@textColor: @gray; // Links // ------------------------- @@ -117,8 +117,6 @@ @grafanaListHighlightContrast: #ddd; @grafanaListMainLinkColor: @textColor; -@pageContainerBorderColor: darken(@grafanaTargetBackground, 5%); - // Tables // ------------------------- From 0fa0b3b256c78bfc9758a45a5a33890d70604b69 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 10 Feb 2016 18:14:26 -0500 Subject: [PATCH 012/444] style changes to forms, icons updates and new buttons --- .../core/components/sidemenu/sidemenu.html | 2 +- public/app/features/apps/partials/edit.html | 2 +- public/app/features/apps/partials/list.html | 2 +- .../features/dashboard/dashnav/dashnav.html | 2 +- .../features/datasources/partials/edit.html | 32 ++++++++++++------- .../datasources/partials/http_settings.html | 29 ++++++++++------- .../features/datasources/partials/list.html | 16 +++++++--- public/less/bootswatch.dark.less | 9 +++--- public/less/gfbox.less | 13 +++++++- public/less/grafana.less | 2 ++ public/less/navbar.less | 5 +-- public/less/normform.less | 9 ++++-- public/less/sidemenu.less | 2 +- public/less/type.less | 1 + public/less/variables.dark.less | 17 +++++++--- public/less/variables.light.less | 16 +++++++--- public/vendor/bootstrap/less/buttons.less | 9 ++++-- public/vendor/bootstrap/less/mixins.less | 1 + 18 files changed, 116 insertions(+), 53 deletions(-) diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index a651c87aa7c..4a886dc34eb 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -28,7 +28,7 @@
          • - +
            Grafana Admin
            v {{ctrl.grafanaVersion}}
            diff --git a/public/app/features/apps/partials/edit.html b/public/app/features/apps/partials/edit.html index efc5f93c738..dd30bbb28ba 100644 --- a/public/app/features/apps/partials/edit.html +++ b/public/app/features/apps/partials/edit.html @@ -1,4 +1,4 @@ - + diff --git a/public/app/features/apps/partials/list.html b/public/app/features/apps/partials/list.html index 6d2d8cc24df..6eaf010c95c 100644 --- a/public/app/features/apps/partials/list.html +++ b/public/app/features/apps/partials/list.html @@ -1,4 +1,4 @@ - +
            diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 67c98520bd3..971bb39a09c 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -2,7 +2,7 @@
            - + {{dashboard.title}} diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index f59178184c5..3dd3e8fdc0b 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -1,14 +1,22 @@ - -
              + +
              + + + Data Sources + + +
              +

              Add data source

              Edit data source

              +

              This text will only appear on Add Data Source

              @@ -18,13 +26,13 @@
            • - +
              • -
            • - Default  +
            • + Default
            @@ -35,7 +43,7 @@ Type
          • - +
          @@ -55,13 +63,13 @@
        -
        - - - + + - Cancel + Cancel

        diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index dd651f85f81..9d78b3273a4 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -9,7 +9,12 @@
        • -
      • +
      +
      +
      +
      +
        +
      • Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request
      • @@ -23,31 +28,33 @@
      • Http Auth
        • -
      • +
        • -
      • - +
      • + Tip for with credentials
        -
      • - -
        • -
      • +
      • User
      • - +
        • -
      • +
      +
      +
      +
      +
        +
      • Password
      • - +
      diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html index ec660ef79d4..34e05954c5e 100644 --- a/public/app/features/datasources/partials/list.html +++ b/public/app/features/datasources/partials/list.html @@ -1,15 +1,23 @@ - + +
      + + + Data Sources + + +
      - - +
      +

      Data sources

      +       Add data source -

      Data sources

      +

      diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index a7e33c95eb4..1a403e8767c 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -355,11 +355,11 @@ div.subnav { // BUTTONS // ----------------------------------------------------- .btn { - padding: 5px 12px; + padding: 7px 12px 5px 12px; background-image: none; - .box-shadow(0px 0px 8px @bodyBackground); + // .box-shadow(0px 0px 8px @bodyBackground); border: none; - .border-radius(3px); + .border-radius(0px); text-shadow: none; &.disabled { @@ -369,10 +369,11 @@ div.subnav { .btn-inverse { border: 1px solid #444; + box-shadow: none; } .btn-large { - padding: 14px 23px; + padding: 6px 20px; } .btn-small { diff --git a/public/less/gfbox.less b/public/less/gfbox.less index 8e957d50351..94b90d462c0 100644 --- a/public/less/gfbox.less +++ b/public/less/gfbox.less @@ -71,13 +71,24 @@ .page-container { background-color: @pageBackground; position: relative; - padding: 20px 20px 60px 81px; + padding: 25px 60px 60px 88px; } + .page { max-width: 653px; } +.page-header-align { + display: flex; + justify-content: space-between; + align-items: center; + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + flex-wrap: wrap-reverse; +} .page-wide { max-width: 1000px; } diff --git a/public/less/grafana.less b/public/less/grafana.less index 1f516020c0f..11bba793b43 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -28,6 +28,8 @@ @import "filter-list.less"; @import "filter-table.less"; @import "simple-box.less"; +@import "dropdown.less"; +@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|PT+Sans+Caption:400,700); .row-control-inner { padding:0px; diff --git a/public/less/navbar.less b/public/less/navbar.less index f4a405ad25c..a429adea224 100644 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -34,6 +34,7 @@ position: absolute; right: 8px; top: 23px; + margin-right: 2px; } a { @@ -90,8 +91,8 @@ .icon-gf { position: relative; - top: 5px; - font-size: 27px; + top: 2px; + font-size: 20px; line-height: 8px; } } diff --git a/public/less/normform.less b/public/less/normform.less index c4fad4c648e..30a687df555 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -58,6 +58,9 @@ float: left; background: @labelBackground; } + & .trans { + background: transparent; + } } .norm-form-flex-wrapper { @@ -145,7 +148,7 @@ input[type=text].norm-form-clear-input { [type=text], [type=email], [type=number], -[type=password] { +[type=password], { &.norm-form-input { border: none; border-right: 3px solid @pageBackground; @@ -154,6 +157,7 @@ input[type=text].norm-form-clear-input { padding: 8px 6px; height: 100%; box-sizing: border-box; + font-size: 16px; &.last { border-right: none; } @@ -176,7 +180,8 @@ select.norm-form-input { margin: 0px; border-radius: 0; height: 36px; - padding: 9px 3px; + padding: 9px 3px; + font-size: 16px; &.last { border-right: none; } diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index d58f5a654cc..56352528f7b 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -35,7 +35,7 @@ padding-left: 210px; } .page-container { - margin-left: 210px; + margin-left: 190px; padding-left: 55px; } .top-nav-menu-btn { diff --git a/public/less/type.less b/public/less/type.less index 1e958c4b097..8d27a195e82 100644 --- a/public/less/type.less +++ b/public/less/type.less @@ -63,6 +63,7 @@ h1, h2, h3, h4, h5, h6 { line-height: @baseLineHeight; color: @headingsColor; text-rendering: optimizelegibility; // Fix the character spacing for headings + font-style: @headingsFontStyle; small { font-weight: normal; line-height: 1; diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 0420540675e..4e8ba2c28d7 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -47,13 +47,16 @@ @grafanaTargetFuncBackground: #333; @grafanaTargetFuncHightlight: #444; +@grafanaSelectBackground: @grafanaTargetFuncBackground; + @modalBackground: @black; @codeTagBackground: #444; // Scaffolding // ------------------------- -@bodyBackground: rgb(20,20,20); +// @bodyBackground: rgb(20,20,20); @pageBackground: @grayDarker; +@bodyBackground: @pageBackground; @textColor: @grayLighter; // Links @@ -65,18 +68,19 @@ // Typography // ------------------------- -@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @baseFontSize: 14px; -@baseFontWeight: 400; +@baseFontWeight: 400; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: normal; // instead of browser default, bold +@headingsFontWeight: 200; // instead of browser default, bold +@headingsFontStyle: italic; @headingsColor: darken(@white,11%); // empty to use BS default, @textColor @inputText: @black; @@ -98,7 +102,7 @@ @borderRadiusSmall: 2px; // Lists -@grafanaListBackground: #262626; +@grafanaListBackground: @grayDark; @grafanaListAccent: lighten(@grayDarker, 2%); @grafanaListBorderTop: @grayDark; @grafanaListBorderBottom: @black; @@ -121,6 +125,7 @@ // ------------------------- @btnBackground: @grayDark; @btnBackgroundHighlight: darken(@grayLight, 15%); +@btnBackgroundShadow: darken(@grayLight, 15%); @btnBorder: #bbb; @btnPrimaryBackground: @blueDark; @@ -141,6 +146,8 @@ @btnInverseBackground: @grayDark; @btnInverseBackgroundHighlight: lighten(@grayDark, 5%); +@btnText: @gray; + @iconContainerBackground: @black; @iconContainerBackgroundHighlight: lighten(@black, 5%); @iconContainerBorder: 1px solid transparent; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 1a0c5957d04..0c4f09db1dd 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -60,13 +60,16 @@ @grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%); @grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%); +@grafanaSelectBackground: @grafanaTargetFuncBackground; + @modalBackground: @bodyBackground; @codeTagBackground: #ddd; // Scaffolding // ------------------------- -@bodyBackground: #EFEFEF; +// @bodyBackground: #EFEFEF; @pageBackground: @grayDarker; +@bodyBackground: @pageBackground; @textColor: @gray; // Links @@ -77,18 +80,19 @@ // Typography // ------------------------- -@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; @baseFontSize: 14px; -@baseFontWeight: 400; +@baseFontWeight: 400; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; -@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: bold; // instead of browser default, bold +@headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily +@headingsFontWeight: normal; // instead of browser default, bold +@headingsFontStyle: italic; @headingsColor: @textColor; // empty to use BS default, @textColor @@ -154,6 +158,8 @@ @btnInverseBackground: @white; @btnInverseBackgroundHighlight: darken(@grayLight, 15%); +@btnText: @grayLighter; + @iconContainerBackground: @white; @iconContainerBackgroundHighlight: lighten(@white, 5%); @iconContainerBorder: 1px solid rgba(0,0,0, 0.05); diff --git a/public/vendor/bootstrap/less/buttons.less b/public/vendor/bootstrap/less/buttons.less index 4cd4d862b38..94922100e0c 100644 --- a/public/vendor/bootstrap/less/buttons.less +++ b/public/vendor/bootstrap/less/buttons.less @@ -17,8 +17,8 @@ text-align: center; vertical-align: middle; cursor: pointer; - .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); - border: 1px solid @btnBorder; + .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); + border: none; *border: 0; // Remove the border to prevent IE7's black border on input:focus border-bottom-color: darken(@btnBorder, 10%); .border-radius(@baseBorderRadius); @@ -226,3 +226,8 @@ input[type="submit"].btn { color: @grayDark; text-decoration: none; } + +.btnText { + color: @btnText; + margin: 0 10px; +} \ No newline at end of file diff --git a/public/vendor/bootstrap/less/mixins.less b/public/vendor/bootstrap/less/mixins.less index 857561e9a08..e0aef540dd4 100644 --- a/public/vendor/bootstrap/less/mixins.less +++ b/public/vendor/bootstrap/less/mixins.less @@ -514,6 +514,7 @@ // gradientBar will set the background to a pleasing blend of these, to support IE<=9 .gradientBar(@startColor, @endColor, @textColor, @textShadow); *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ + box-shadow: inset 0 -3px rgba(0,0,0,0.3); .reset-filter(); // in these cases the gradient won't cover the background, so we override From 581fb8ebfd0641345da31cff4f350c7e81d1ee24 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 10 Feb 2016 18:14:52 -0500 Subject: [PATCH 013/444] dropdown.less added --- public/less/dropdown.less | 90 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 public/less/dropdown.less diff --git a/public/less/dropdown.less b/public/less/dropdown.less new file mode 100644 index 00000000000..40d8b53fa86 --- /dev/null +++ b/public/less/dropdown.less @@ -0,0 +1,90 @@ +// ========================================================================== +// DROPDOWN +// +// dropdown.scss +// ========================================================================== + + + +.select-input { + display: inline-block; + position: relative; + width: auto; + max-width: 100%; + margin: 0 5px; + padding: 0 12px 0 6px; + border: @grafanaPanelBorder; + background-color: @grafanaSelectBackground; + overflow: hidden; + vertical-align: top; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; +} + +.select-input > select { + width: 115%; + min-width: 110%; + max-width: 115%; + height: 24px; + margin: 0; + padding: 0 20px 0 0; + border: 0; + outline: none; + background: transparent; + color: @linkColor; + font-size: 16px; + font-weight: 400; + line-height: 24px; + text-indent: .01px; + text-overflow: ''; + -webkit-appearance: none; + -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux. + appearance: none; +} + +// This hides native dropdown button arrow in IE +.select-input > select::-ms-expand { + display: none; +} + +.select-input:after { + position: absolute; + top: 50%; + right: 10px; + height: 12px; + margin-top: -6px; + padding: 0; + background-color: transparent; + color: @linkColor; + font: normal normal normal 14px/1 FontAwesome; + text-align: center; + content: '\f0d7'; + pointer-events: none; +} + +.select-input > select:focus { + outline: none; +} + +// This hides focus around selected option in FF +.select-input > select:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #adafae; +} + +.rt-form .select-input { + margin: 0; + background: @grafanaSelectBackground; +} + +.rt-form .select-interior { + margin: 0; + background-color: @inputBackground; + border: 1px solid @inputBorder; +} + +.rt-form .select-input > select { + height: 34px; + line-height: 34px; +} \ No newline at end of file From fac51d92c5f5d90d1fd23569bdefb54aaa30135a Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Thu, 11 Feb 2016 00:06:04 -0800 Subject: [PATCH 014/444] Added DS deletion confirmation modal --- public/app/core/routes/routes.ts | 1 + public/app/features/datasources/list_ctrl.js | 36 ------------- public/app/features/datasources/list_ctrl.ts | 53 +++++++++++++++++++ .../features/datasources/partials/list.html | 8 +-- 4 files changed, 58 insertions(+), 40 deletions(-) delete mode 100644 public/app/features/datasources/list_ctrl.js create mode 100644 public/app/features/datasources/list_ctrl.ts diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 8963228210b..82da84fbc56 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -45,6 +45,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/datasources', { templateUrl: 'public/app/features/datasources/partials/list.html', controller : 'DataSourcesCtrl', + controllerAs: 'ctrl', resolve: loadOrgBundle, }) .when('/datasources/edit/:id', { diff --git a/public/app/features/datasources/list_ctrl.js b/public/app/features/datasources/list_ctrl.js deleted file mode 100644 index da77df252e1..00000000000 --- a/public/app/features/datasources/list_ctrl.js +++ /dev/null @@ -1,36 +0,0 @@ -define([ - 'angular', - 'lodash', -], -function (angular) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('DataSourcesCtrl', function($scope, $http, backendSrv, datasourceSrv) { - - $scope.init = function() { - $scope.datasources = []; - $scope.getDatasources(); - }; - - $scope.getDatasources = function() { - backendSrv.get('/api/datasources').then(function(results) { - $scope.datasources = results; - }); - }; - - $scope.remove = function(ds) { - backendSrv.delete('/api/datasources/' + ds.id).then(function() { - $scope.getDatasources(); - - backendSrv.get('/api/frontend/settings').then(function(settings) { - datasourceSrv.init(settings.datasources); - }); - }); - }; - - $scope.init(); - - }); -}); diff --git a/public/app/features/datasources/list_ctrl.ts b/public/app/features/datasources/list_ctrl.ts new file mode 100644 index 00000000000..20d480bb96a --- /dev/null +++ b/public/app/features/datasources/list_ctrl.ts @@ -0,0 +1,53 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; +import coreModule from '../../core/core_module'; + +export class DataSourcesCtrl { + datasources: any; + + /** @ngInject */ + constructor(private $scope, private $location, private $http, private backendSrv, private datasourceSrv) { + backendSrv.get('/api/datasources') + .then((result) => { + this.datasources = result; + }); + } + + removeDataSourceConfirmed(ds) { + ///_.remove(this.playlistsd, { id: playlist.id }); + + this.backendSrv.delete('/api/datasources/' + ds.id) + .then(() => { + this.$scope.appEvent('alert-success', ['Datasource deleted', '']); + }, () => { + this.$scope.appEvent('alert-error', ['Unable to delete datasource', '']); + }).then(() => { + this.backendSrv.get('/api/datasources') + .then((result) => { + this.datasources = result; + }); + this.backendSrv.get('/api/frontend/settings') + .then((settings) => { + this.datasourceSrv.init(settings.datasources); + }); + }); + } + + removeDataSource(ds) { + + this.$scope.appEvent('confirm-modal', { + title: 'Confirm delete datasource', + text: 'Are you sure you want to delete datasource ' + ds.name + '?', + yesText: "Delete", + icon: "fa-warning", + onConfirm: () => { + this.removeDataSourceConfirmed(ds); + } + }); + } + +} + +coreModule.controller('DataSourcesCtrl', DataSourcesCtrl); diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html index ec660ef79d4..bdd6fe363a0 100644 --- a/public/app/features/datasources/partials/list.html +++ b/public/app/features/datasources/partials/list.html @@ -12,11 +12,11 @@

      Data sources


      -
      +
      No data sources defined
      - +
      @@ -27,7 +27,7 @@ - + From ff913333a204b5064cb817089493a9f6ea923e26 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 11 Feb 2016 09:53:48 -0500 Subject: [PATCH 015/444] update sidebar --- .bra.toml | 2 +- pkg/api/index.go | 20 ++++---------------- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/.bra.toml b/.bra.toml index ef1a925158d..5ff554bfc75 100644 --- a/.bra.toml +++ b/.bra.toml @@ -3,7 +3,7 @@ init_cmds = [ ["go", "build", "-o", "./bin/grafana-server"], ["./bin/grafana-server"] ] -watch_all = true +watch_all = false watch_dirs = [ "$WORKDIR/pkg", "$WORKDIR/public/views", diff --git a/pkg/api/index.go b/pkg/api/index.go index 342de21c670..a6a3c1175be 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -50,32 +50,20 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ Text: "Dashboards", - Icon: "fa fa-fw fa-th-large", + Icon: "icon-gf icon-gf-dashboard", Url: "/", }) - data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ - Text: "Playlists", - Icon: "fa fa-fw fa-list", - Url: "/playlists", - }) - - data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ - Text: "Snapshots", - Icon: "fa-fw icon-gf icon-gf-snapshot", - Url: "/dashboard/snapshots", - }) - if c.OrgRole == m.ROLE_ADMIN { data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ Text: "Data Sources", - Icon: "fa fa-fw fa-database", + Icon: "icon-gf icon-gf-datasources", Url: "/datasources", }) data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ - Text: "Apps", - Icon: "fa fa-fw fa-cubes", + Text: "Plugins", + Icon: "icon-gf icon-gf-apps", Url: "/apps", }) } From c051ff3eacc97d7de01321eb98fa04c25d2584b0 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Thu, 11 Feb 2016 07:01:45 -0800 Subject: [PATCH 016/444] Removed unused commented code --- public/app/features/datasources/list_ctrl.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/public/app/features/datasources/list_ctrl.ts b/public/app/features/datasources/list_ctrl.ts index 20d480bb96a..b1f93f1a158 100644 --- a/public/app/features/datasources/list_ctrl.ts +++ b/public/app/features/datasources/list_ctrl.ts @@ -16,7 +16,6 @@ export class DataSourcesCtrl { } removeDataSourceConfirmed(ds) { - ///_.remove(this.playlistsd, { id: playlist.id }); this.backendSrv.delete('/api/datasources/' + ds.id) .then(() => { From 81ad4695339bda5bd2319896132694b958f0f421 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Fri, 12 Feb 2016 00:26:48 +0900 Subject: [PATCH 017/444] (cloudwatch) custom metrics namespace support --- pkg/api/cloudwatch/metrics.go | 5 +++++ .../datasource/cloudwatch/partials/config.html | 11 +++++++++++ 2 files changed, 16 insertions(+) diff --git a/pkg/api/cloudwatch/metrics.go b/pkg/api/cloudwatch/metrics.go index 7a98386347c..b4321791926 100644 --- a/pkg/api/cloudwatch/metrics.go +++ b/pkg/api/cloudwatch/metrics.go @@ -126,6 +126,11 @@ func handleGetNamespaces(req *cwRequest, c *middleware.Context) { for key := range metricsMap { keys = append(keys, key) } + if customMetricsNamespaces, ok := req.DataSource.JsonData["customMetricsNamespaces"].(string); ok { + for _, key := range strings.Split(customMetricsNamespaces, ",") { + keys = append(keys, key) + } + } sort.Sort(sort.StringSlice(keys)) result := []interface{}{} diff --git a/public/app/plugins/datasource/cloudwatch/partials/config.html b/public/app/plugins/datasource/cloudwatch/partials/config.html index 92a963da7c6..69ec729a160 100644 --- a/public/app/plugins/datasource/cloudwatch/partials/config.html +++ b/public/app/plugins/datasource/cloudwatch/partials/config.html @@ -29,5 +29,16 @@
      +
      +
        +
      • + Custom Metrics namespaceNamespaces of Custom Metrics +
        • +
      • + +
        • +
      +
      +
      From cd40362d478d7a073370002da6c148dc958038e2 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 11 Feb 2016 12:02:12 -0500 Subject: [PATCH 018/444] sidenav tweaks, creating a content channel for the main content on non-dashboard pages --- public/app/features/datasources/partials/edit.html | 6 +++--- public/less/gfbox.less | 7 +++++-- public/less/grafana.less | 3 ++- public/less/navbar.less | 2 +- public/less/normform.less | 4 ++-- public/less/sidemenu.less | 14 +++++++------- public/less/variables.dark.less | 11 +++++------ 7 files changed, 25 insertions(+), 22 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 3dd3e8fdc0b..f442d3e7f35 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -64,9 +64,9 @@
      - - - + + Cancel diff --git a/public/less/gfbox.less b/public/less/gfbox.less index 94b90d462c0..16660f18a54 100644 --- a/public/less/gfbox.less +++ b/public/less/gfbox.less @@ -71,7 +71,10 @@ .page-container { background-color: @pageBackground; position: relative; - padding: 25px 60px 60px 88px; + padding: 25px 56px; + min-height: 900px; + max-width: 1060px; + margin-left: 0; } @@ -90,7 +93,7 @@ flex-wrap: wrap-reverse; } .page-wide { - max-width: 1000px; + max-width: 1060px; } .page-wide-margined { diff --git a/public/less/grafana.less b/public/less/grafana.less index 11bba793b43..561027ca75c 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -29,7 +29,8 @@ @import "filter-table.less"; @import "simple-box.less"; @import "dropdown.less"; -@import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|PT+Sans+Caption:400,700); +// @import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|PT+Sans+Caption:400,700); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700); .row-control-inner { padding:0px; diff --git a/public/less/navbar.less b/public/less/navbar.less index a429adea224..25b450910b6 100644 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -81,7 +81,7 @@ overflow: hidden; white-space: nowrap; display: block; - padding: 16px 17px 15px 13px; + padding: 16px 17px 16px 13px; } .fa-th-large { diff --git a/public/less/normform.less b/public/less/normform.less index 30a687df555..7ceab67fa48 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -157,7 +157,7 @@ input[type=text].norm-form-clear-input { padding: 8px 6px; height: 100%; box-sizing: border-box; - font-size: 16px; + font-size: 15px; &.last { border-right: none; } @@ -181,7 +181,7 @@ select.norm-form-input { border-radius: 0; height: 36px; padding: 9px 3px; - font-size: 16px; + font-size: 15px; &.last { border-right: none; } diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index 56352528f7b..9a71946b517 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -6,13 +6,13 @@ position: absolute; top: 52px; left: 0; - width: 200px; - background-color: @sideMenuBackground; + width: 220px; + background-color: @bodyBackground; border: @sideMenuBorder; z-index: 101; transform: translate3d(0, -100%, 0); visibility: hidden; - box-shadow: @sideMenuShadow; + // box-shadow: @sideMenuShadow; a:focus { text-decoration: none; @@ -35,13 +35,13 @@ padding-left: 210px; } .page-container { - margin-left: 190px; - padding-left: 55px; + margin-left: 195px; + padding-left: 77px; } .top-nav-menu-btn { a { background-color: @sideMenuBackground; - padding-right: 46px; + padding-right: 67px; padding-left: 24px; } .icon-gf-grafana_wordmark { @@ -207,7 +207,7 @@ .sidemenu-org .fa-caret-right { position: absolute; top: 50%; - right: 4px; + right: 25px; font-size: 80%; color: @linkColor; } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 4e8ba2c28d7..715aa4f2660 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -34,7 +34,7 @@ // grafana Variables // ------------------------- @grafanaPanelBackground: @grayDarker; -@grafanaPanelBorder: solid 1px @grayDark; +@grafanaPanelBorder: solid 1px @grayDark; @grafanaTriggerBorder: solid 1px #555; // Graphite Target Editor @@ -54,9 +54,8 @@ // Scaffolding // ------------------------- -// @bodyBackground: rgb(20,20,20); +@bodyBackground: rgb(20,20,20); @pageBackground: @grayDarker; -@bodyBackground: @pageBackground; @textColor: @grayLighter; // Links @@ -68,11 +67,11 @@ // Typography // ------------------------- -@sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; -@baseFontSize: 14px; +@baseFontSize: 13px; @baseFontWeight: 400; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @@ -80,7 +79,7 @@ @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontWeight: 200; // instead of browser default, bold -@headingsFontStyle: italic; +@headingsFontStyle: normal; @headingsColor: darken(@white,11%); // empty to use BS default, @textColor @inputText: @black; From c186d8b2beb60cf43ced8f08fd7b62477d33794a Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 11 Feb 2016 12:27:32 -0500 Subject: [PATCH 019/444] button text position to center text vertically --- public/less/bootswatch.dark.less | 2 +- public/less/simple-box.less | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 1a403e8767c..ca3cb8a268f 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -355,7 +355,7 @@ div.subnav { // BUTTONS // ----------------------------------------------------- .btn { - padding: 7px 12px 5px 12px; + padding: 6px 12px; background-image: none; // .box-shadow(0px 0px 8px @bodyBackground); border: none; diff --git a/public/less/simple-box.less b/public/less/simple-box.less index 9bc52eb1375..07062c864d5 100644 --- a/public/less/simple-box.less +++ b/public/less/simple-box.less @@ -14,7 +14,7 @@ color: @textColor; margin: 0; padding-left: 1rem; - border-bottom: @simpleBoxBorderWidth solid @bodyBackground; + // border-bottom: @simpleBoxBorderWidth solid @bodyBackground; } .simple-box-column { From daf8db71a8d6a61d33c51b66764b6e92ee8d6fed Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 11 Feb 2016 13:00:36 -0500 Subject: [PATCH 020/444] button spacing tweak. Dropdown hover color tweak, sexy pattern added --- public/less/bootswatch.dark.less | 1 + public/less/overrides.less | 5 +++++ public/less/sidemenu.less | 2 +- public/vendor/bootstrap/less/dropdowns.less | 4 ++-- 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index ca3cb8a268f..f884a5ef06f 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -356,6 +356,7 @@ div.subnav { // ----------------------------------------------------- .btn { padding: 6px 12px; + margin-right:10px; background-image: none; // .box-shadow(0px 0px 8px @bodyBackground); border: none; diff --git a/public/less/overrides.less b/public/less/overrides.less index 291a9a765f4..eda136fc04d 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -22,6 +22,11 @@ // Backgrounds // --------------------- +.main-view { + background: url(/img/grafana_pattern.png); + background-position: 100% -550px; + background-repeat: no-repeat; +} .bgNav { background: @navbarBackground; diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index 9a71946b517..1ab191d62c3 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -40,7 +40,7 @@ } .top-nav-menu-btn { a { - background-color: @sideMenuBackground; + background-color: @pageBackground; padding-right: 67px; padding-left: 24px; } diff --git a/public/vendor/bootstrap/less/dropdowns.less b/public/vendor/bootstrap/less/dropdowns.less index 9e47b47151f..436b888e6b2 100644 --- a/public/vendor/bootstrap/less/dropdowns.less +++ b/public/vendor/bootstrap/less/dropdowns.less @@ -91,7 +91,7 @@ .dropdown-submenu:focus > a { text-decoration: none; color: @dropdownLinkColorHover; - #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%)); + background-color: @grafanaListHighlight; } // Active state @@ -102,7 +102,7 @@ color: @dropdownLinkColorActive; text-decoration: none; outline: 0; - #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); + background-color: @grafanaListHighlight; } // Disabled state From 6189208fa5305b5759d45d1d9a8b1a5179d0b6d8 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 11 Feb 2016 14:18:55 -0500 Subject: [PATCH 021/444] org and user form tweaks --- .../features/datasources/partials/edit.html | 6 +- .../datasources/partials/http_settings.html | 2 +- .../features/datasources/partials/list.html | 2 +- public/app/features/org/partials/invite.html | 2 +- .../app/features/org/partials/orgDetails.html | 64 ++++++++++--------- .../app/features/org/partials/orgUsers.html | 14 ++-- .../features/profile/partials/password.html | 40 ++++++------ .../features/profile/partials/profile.html | 53 ++++++++------- public/less/bootswatch.dark.less | 2 + public/less/gfbox.less | 1 + public/less/overrides.less | 2 +- public/less/tabs.less | 4 +- public/vendor/bootstrap/less/buttons.less | 2 +- 13 files changed, 107 insertions(+), 87 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index f442d3e7f35..6113ebed18b 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -14,8 +14,8 @@
      -

      Add data source

      -

      Edit data source

      +

      Add data source

      +

      Edit data source

      This text will only appear on Add Data Source

      @@ -69,7 +69,7 @@ - Cancel + Cancel

      diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 9d78b3273a4..24c4ceb51f5 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -1,5 +1,5 @@
      -

      Http settings

      +

      Http settings

        diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html index 34e05954c5e..fe1c7176b99 100644 --- a/public/app/features/datasources/partials/list.html +++ b/public/app/features/datasources/partials/list.html @@ -11,7 +11,7 @@
        -

        Data sources

        +

        Data Sources

        Add data source diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index ae5d3a7ea61..3e7ac6291a4 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -59,8 +59,8 @@
        diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 9175ff35b91..d6e40952915 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -1,7 +1,11 @@ - - + +
        + + + Organization Preferences + + +
        @@ -10,86 +14,86 @@

        Organization

        -

        Preferences

        +

        Preferences

        -
        -
          -
        • +
          +
            +
          • Name
          • - +

          - +
          -

          Address

          +

          Address

          -
          -
            -
          • +
            +
              +
            • Address 1
            • - +
              • -
            • +
            • Address 2
            • - +
            -
            -
              -
            • +
              +
                +
              • City
              • - +
                • -
              • +
              • Postal code
              • - +
              -
              -
                -
              • +
                +
                  +
                • State
                • - +
                  • -
                • +
                • Country
                • - +

                - +
              diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index c029dff2955..8e391d3a467 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,13 +1,17 @@ - - + +
              + + + Organization Users + + +
              - diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index df940dd14a5..17647503f58 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -1,7 +1,11 @@ - - + +
              + + + Change Password + + +
              @@ -11,35 +15,35 @@
              -
              -
                -
              • +
                +
                  +
                • Old Password
                • - +
                -
                -
                  -
                • +
                  +
                    +
                  • New Password
                  • - +
                  -
                  -
                    -
                  • +
                    +
                      +
                    • Confirm New
                    • - +
                    @@ -47,10 +51,10 @@

                    -
                    +
                      - Cancel + Cancel
                    diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 4e8c15044c2..a684e1f36b8 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -1,4 +1,11 @@ - + +
                    + + + Profile + + +
                    @@ -7,68 +14,66 @@

                    Profile

                    -

                    Preferences

                    +

                    Preferences

                    -
                    -
                      -
                    • +
                      +
                        +
                      • Name
                      • - +
                      -
                      -
                        -
                      • +
                        +
                          +
                        • Email
                        • - +
                        -
                        -
                          -
                        • +
                          +
                            +
                          • Username
                          • - +
                          -
                          -
      Name
        {{ds.name}} @@ -48,7 +48,7 @@ - +
      diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index f884a5ef06f..95ffaaa3824 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -383,6 +383,8 @@ div.subnav { .btn-mini { padding: 2px 6px; + margin-right: 0; + margin-right: 0; } .btn-group { diff --git a/public/less/gfbox.less b/public/less/gfbox.less index 16660f18a54..4cdace27acf 100644 --- a/public/less/gfbox.less +++ b/public/less/gfbox.less @@ -72,6 +72,7 @@ background-color: @pageBackground; position: relative; padding: 25px 56px; + padding: 25px 56px; min-height: 900px; max-width: 1060px; margin-left: 0; diff --git a/public/less/overrides.less b/public/less/overrides.less index eda136fc04d..2b574f829e3 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -23,7 +23,7 @@ // Backgrounds // --------------------- .main-view { - background: url(/img/grafana_pattern.png); + // background: url(/img/grafana_pattern.png); background-position: 100% -550px; background-repeat: no-repeat; } diff --git a/public/less/tabs.less b/public/less/tabs.less index 13ad593ef80..8301eef15bb 100644 --- a/public/less/tabs.less +++ b/public/less/tabs.less @@ -2,7 +2,7 @@ .nav-tabs-alt { border-bottom: @grafanaTriggerBorder; padding-left: 10px; - margin: 0; + margin: 0 0 10px 0; & > li > a { color: darken(@linkColor, 20%); @@ -16,7 +16,7 @@ li.active > a:focus, li.active > a:hover { .border-radius(3px); - border: @grafanaTriggerBorder; + border: @grafanaTriggerBorder; background-color: transparent; border-bottom: 1px solid @grafanaPanelBackground; color: @linkColor; diff --git a/public/vendor/bootstrap/less/buttons.less b/public/vendor/bootstrap/less/buttons.less index 94922100e0c..f59bf696f89 100644 --- a/public/vendor/bootstrap/less/buttons.less +++ b/public/vendor/bootstrap/less/buttons.less @@ -227,7 +227,7 @@ input[type="submit"].btn { text-decoration: none; } -.btnText { +.btn-text { color: @btnText; margin: 0 10px; } \ No newline at end of file From d8b43a3d769ebdd3f4a09f5783f562ba03a4f2e1 Mon Sep 17 00:00:00 2001 From: Trent White Date: Thu, 11 Feb 2016 14:41:21 -0500 Subject: [PATCH 022/444] button size tweaks, user form tweaks --- public/app/features/org/partials/invite.html | 28 +++++++++---------- .../app/features/org/partials/orgApiKeys.html | 20 ++++++------- public/less/bootswatch.dark.less | 2 +- public/less/normform.less | 4 +-- public/vendor/bootstrap/less/buttons.less | 3 +- 5 files changed, 29 insertions(+), 28 deletions(-) diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 3e7ac6291a4..51ba5505b8c 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -4,9 +4,9 @@ -

      +

      Invite Users -

      +
      Send invite or add existing Grafana users to the organization @@ -18,30 +18,30 @@
      -
      -
      -
        -
      • +
        +
        +
          +
        • Email or Username
        • - +
          • -
        • +
        • Name
        • - +
          • -
        • +
        • Role
        • -
          • -
        • +
        • @@ -51,8 +51,8 @@
        -
        - + Invite another +
        + + Invite another
        diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 602a2fd27ea..9a837b30381 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -10,25 +10,25 @@ API Keys - -
          -
        • + +
            +
          • Add a key
          • - +
            • -
          • +
          • Role
          • - -
            • -
          • - +
            • +
          + +
          -
        +
      diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 95ffaaa3824..f2cbc607c2a 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -355,7 +355,7 @@ div.subnav { // BUTTONS // ----------------------------------------------------- .btn { - padding: 6px 12px; + padding: 8px 12px; margin-right:10px; background-image: none; // .box-shadow(0px 0px 8px @bodyBackground); diff --git a/public/less/normform.less b/public/less/normform.less index 7ceab67fa48..496679fd5b0 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -1,7 +1,7 @@ .norm-form { border-top: 3px solid @pageBackground; - border-left: 3px solid @pageBackground; - border-right: 3px solid @pageBackground; + // border-left: 3px solid @pageBackground; + // border-right: 3px solid @pageBackground; background: transparent; &.last { diff --git a/public/vendor/bootstrap/less/buttons.less b/public/vendor/bootstrap/less/buttons.less index f59bf696f89..358b2120e6a 100644 --- a/public/vendor/bootstrap/less/buttons.less +++ b/public/vendor/bootstrap/less/buttons.less @@ -229,5 +229,6 @@ input[type="submit"].btn { .btn-text { color: @btnText; - margin: 0 10px; + margin: 0; + vertical-align: middle; } \ No newline at end of file From a6061ce555196ff989148c5f2e3dbc1f9da5453b Mon Sep 17 00:00:00 2001 From: Matt Toback Date: Thu, 11 Feb 2016 15:29:57 -0500 Subject: [PATCH 023/444] Checkboxes working --- .../app/features/datasources/partials/edit.html | 5 ++--- public/img/checkbox_white.png | Bin 960 -> 465 bytes public/less/dropdown.less | 3 ++- public/less/forms.less | 9 ++++----- public/less/normform.less | 1 + public/less/variables.dark.less | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 6113ebed18b..7ae595a30b6 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -31,8 +31,7 @@
    • - - Default +
      • @@ -43,7 +42,7 @@ Type
    • - +
      • diff --git a/public/img/checkbox_white.png b/public/img/checkbox_white.png index dbff6d5ab64c0583e46c7f27b3259d48358cbf7e..877f6ddcc2cff8770c674291f7d4be717e8ac460 100644 GIT binary patch delta 452 zcmV;#0XzP{2hjtN7k?-S1^@s69PPoP0000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+ zQe|Oed2z{QJOBUzb4f%&RCwBAWB`JhGiUY#sR9P_!G!em^g>3cK@LD12o!igswqJI z3P5T-5N~9Hx`-@;Kme*Q5Qy_ZCjV!k0sxuA#6U$bYS^e@qko1`*Dz=?LP;hE>Hh#S zYyzk}BG*8q@@yg_RGrOdfvw&G6vcFBF48hJaj!Gdm$CT984=u7IaT zpesU8KV~@e<}2|@1EdK(EIA^mXfABDB&#tmb8Tc0R{kT#+^q3Ek;cM0000eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{00SsVL_t(Y$L*FuY!p=(fWP;@X@47b35f^0ZA{qRHrQHR zHO7laJ&DF+J&LEM8zO~G7D^U8G&CjJ7>zLvoX|AouqW?wffF$iLIqN^cDJcr7Q}9= zCC={5dmM(=-RU@-}Sd+<&=Gdm}yRSTqWv5Tqr@V8B>%`8(tA}vq~ zFv%ej5M7o&shcwZ}!PJSRvnL4VP$!YJFc{I=>8^r?eIx+7R) zF<3+!u&U)-fyMY1Yb=rONbN8aiNu3kK94azp6_FPgWseX-vl|vCzsE!CK8Fonm0Rn zdg}ejQztH7pZ|$s@lIP49f|btO5$ZQ6H^CjR>$!0utV3LH&Ofr%CuJp>tQM2Zj`dw ztmVImr++f7Z@ur*N00tcZQ3)vk)GpEYT6&KUM1Aq%j)fgZ}7aCR4R4F*&PaxY?)Sc zAfi^^nV|S3x5R}Tw-|cw1MaQ;dGL*Ut4vQ%Uz0ydrRSb@ z9rOCze80AF5T`3CjZE9@sJLa0&0ZijmLXTz1b?6~f0GYidlm2R&GXX8w8rkNw(Gj2 zXXk1_<>f_^&V5$%OQYlC<0Wa-sUm{wy6u6M^P{Q5htKX%P}wb$o}J^{=l7DHox^qA zmZ0Lw3R|F>4aM_4j?A28-^nw~FP4anWk`QH3D6KU5Q|b=S!ujGX{{N3_W(0juG6`< zpMP9olh{}WU46pxd1?o(b~+=kSHhWh&HaGb}RR(EKI`ub~t^&s7$ zo0>rWF|7r=6Ic&=V$*6Z494RmmzDq+jK|Shu*SADt-5h*Ve{wP3!z2}ee3C}>RRM*T((+XXC`cQO(>TFMgwv6R2?#8d#Y<7F{ Z9s;J(u!2VmmCyhH002ovPDHLkV1f+t#MS@+ diff --git a/public/less/dropdown.less b/public/less/dropdown.less index 40d8b53fa86..1497c255432 100644 --- a/public/less/dropdown.less +++ b/public/less/dropdown.less @@ -15,6 +15,7 @@ padding: 0 12px 0 6px; border: @grafanaPanelBorder; background-color: @grafanaSelectBackground; + background-color: red; overflow: hidden; vertical-align: top; -webkit-border-radius: 3px; @@ -39,7 +40,7 @@ text-indent: .01px; text-overflow: ''; -webkit-appearance: none; - -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux. + -moz-appearance: menulist-text; // was set to "window" and caused odd display on windows and linux. appearance: none; } diff --git a/public/less/forms.less b/public/less/forms.less index 3afe3e02ab5..61693f63ece 100644 --- a/public/less/forms.less +++ b/public/less/forms.less @@ -18,20 +18,19 @@ input[type="checkbox"].cr1 { label.cr1 { display: inline-block; - height: 18px; + height: 19px; position: relative; - top: -2px; clear: none; text-indent: 2px; margin: 0 0 0px 0; - padding: 0 0 0 23px; - vertical-align:middle; + padding: 0 0 0 20px; + vertical-align: top; background: url(@checkboxImageUrl) left top no-repeat; cursor:pointer; } input[type="checkbox"]:checked+label { - background: url(@checkboxImageUrl) 0px -18px no-repeat; + background: url(@checkboxImageUrl) 0px -21px no-repeat; } .gf-form { diff --git a/public/less/normform.less b/public/less/normform.less index 496679fd5b0..2aba22c9e7f 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -17,6 +17,7 @@ display: inline; padding-right: 4px; margin-bottom: 0; + margin-left: 5px; } } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 715aa4f2660..e1a81829870 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -307,7 +307,7 @@ @popoverArrowOuterColor: rgba(0,0,0,.25); // images -@checkboxImageUrl: '../img/checkbox.png'; +@checkboxImageUrl: '../img/checkbox_white.png'; // GRID // -------------------------------------------------- From 692878b0c0943d581e522c8af903fd3fa60b2465 Mon Sep 17 00:00:00 2001 From: Matt Toback Date: Thu, 11 Feb 2016 15:46:37 -0500 Subject: [PATCH 024/444] Checkbox fixes for light and dark themes, ready to hand over to trent for new images --- .../features/datasources/partials/edit.html | 2 +- public/img/checkbox.png | Bin 1461 -> 465 bytes public/img/checkbox_white.png | Bin 465 -> 960 bytes public/less/variables.dark.less | 2 +- 4 files changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 7ae595a30b6..27476f684c8 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -42,7 +42,7 @@ Type
    • - +
      • diff --git a/public/img/checkbox.png b/public/img/checkbox.png index a1256ec8b95ec93a31883140e5afafb09f4458d6..877f6ddcc2cff8770c674291f7d4be717e8ac460 100644 GIT binary patch delta 452 zcmV;#0XzP+3(*6R7k?-S1^@s69PPoP0000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+ zQe|Oed2z{QJOBUzb4f%&RCwBAWB`JhGiUY#sR9P_!G!em^g>3cK@LD12o!igswqJI z3P5T-5N~9Hx`-@;Kme*Q5Qy_ZCjV!k0sxuA#6U$bYS^e@qko1`*Dz=?LP;hE>Hh#S zYyzk}BG*8q@@yg_RGrOdfvw&G6vcFBF48hJaj!Gdm$CT984=u7IaT zpesU8KV~@e<}2|@1EdK(EIA^mXfABDB&#tmb8Tc0R{kT#+^q3Ek;cM0000eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{00kXML_t(o!|j(lY#db-K+pTmdVie|e_$OuF&IGv4nZJL zA_{~AAs}dIXh0N{>7o>XP!I(v5}-r~=%9cC(eRNdXb>IZC-KY23Rpl$Koc<>pX+kmMD#lzq$N1)9MRjJ15N8_{5W-wr?zMavtG5nv2i#PmQZGZIJNcFQ-p` z)ot42)_>UNHf!2uv&l6#?_&P+$#)3hjj5@rFHLD=`}@xOK5HG;8jP_RZFo0e?96!_Qp!_#?7r{q3Hn4I!)omCK8i z_8(XVN`E`U%(26?DvJlFr>7Tmubb-LQ!X!V2$WUJ2d7S+d~210DwPVQ{Rep9gHI^! zKR~&>xGpGED=dLJ)&NLbDTDj&VdBscemJwh#Gxadhx7uukP&(*2*6p#%r{>nUw)6j z{(mN>&s96Xm7szM+Bq7H#u}wgDf$%596L<<+nEkzC8($sNs?UIv`JE+sP!`7a*!rT z3Tv8HFE?!@NfL@$b$}~Zv}w~i>nJpv%p5xmKtTj&Jt2h6nRY30wbAsoD~!^bR@U0Q zX;qsh>y)Z>O*^{d22x$D~fWodfI^2J$hPg4BDE@rUgXl%P^5n@2O%WifS7< zu5mW4L-_)_P=L0!rM;RMWBywKTA{2)dr$0PV=E%~efOhh&(l9Vz_z`635^En!UA^d zR{X#q>B0gr%P5ZRAhuG{`FX5Xe1CWR=n9{S;O@Q`J9-0RHDTmBaGqGM5WJ_AB(!RE zVhGfWeS|EK*6NHl&oeYR$&*KqsrR0ET=G3D^q~s^Jf;b0R1}2ZJ(s}NQM92bZ)*>yJd(;4H!C6om<#e|O za;tXb+`2uj^Bx3ZjN}J=MNg{~AYDnjj%kgyh{~l0VO3AteG;zN({9-|P`flYQ*_=F zqeiK)3bN^*cH!b2F{T}prYVg^zS&pP(=J&;t^2+BFZ8tkk?|LnZwbTVIbLx90000< KMNUMnLSTZ7eSad^gZEa<4bO1wgWnpw> zWFU8GbZ8()Nlj2!fese{00SsVL_t(Y$L*FuY!p=(fWP;@X@47b35f^0ZA{qRHrQHR zHO7laJ&DF+J&LEM8zO~G7D^U8G&CjJ7>zLvoX|AouqW?wffF$iLIqN^cDJcr7Q}9= zCC={5dmM(=-RU@-}Sd+<&=Gdm}yRSTqWv5Tqr@V8B>%`8(tA}vq~ zFv%ej5M7o&shcwZ}!PJSRvnL4VP$!YJFc{I=>8^r?eIx+7R) zF<3+!u&U)-fyMY1Yb=rONbN8aiNu3kK94azp6_FPgWseX-vl|vCzsE!CK8Fonm0Rn zdg}ejQztH7pZ|$s@lIP49f|btO5$ZQ6H^CjR>$!0utV3LH&Ofr%CuJp>tQM2Zj`dw ztmVImr++f7Z@ur*N00tcZQ3)vk)GpEYT6&KUM1Aq%j)fgZ}7aCR4R4F*&PaxY?)Sc zAfi^^nV|S3x5R}Tw-|cw1MaQ;dGL*Ut4vQ%Uz0ydrRSb@ z9rOCze80AF5T`3CjZE9@sJLa0&0ZijmLXTz1b?6~f0GYidlm2R&GXX8w8rkNw(Gj2 zXXk1_<>f_^&V5$%OQYlC<0Wa-sUm{wy6u6M^P{Q5htKX%P}wb$o}J^{=l7DHox^qA zmZ0Lw3R|F>4aM_4j?A28-^nw~FP4anWk`QH3D6KU5Q|b=S!ujGX{{N3_W(0juG6`< zpMP9olh{}WU46pxd1?o(b~+=kSHhWh&HaGb}RR(EKI`ub~t^&s7$ zo0>rWF|7r=6Ic&=V$*6Z494RmmzDq+jK|Shu*SADt-5h*Ve{wP3!z2}ee3C}>RRM*T((+XXC`cQO(>TFMgwv6R2?#8d#Y<7F{ Z9s;J(u!2VmmCyhH002ovPDHLkV1f+t#MS@+ delta 452 zcmV;#0XzP{2hjtN7k?-S1^@s69PPoP0000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+ zQe|Oed2z{QJOBUzb4f%&RCwBAWB`JhGiUY#sR9P_!G!em^g>3cK@LD12o!igswqJI z3P5T-5N~9Hx`-@;Kme*Q5Qy_ZCjV!k0sxuA#6U$bYS^e@qko1`*Dz=?LP;hE>Hh#S zYyzk}BG*8q@@yg_RGrOdfvw&G6vcFBF48hJaj!Gdm$CT984=u7IaT zpesU8KV~@e<}2|@1EdK(EIA^mXfABDB&#tmb8Tc0R{kT#+^q3Ek;cM0000 Date: Fri, 12 Feb 2016 09:52:45 +0100 Subject: [PATCH 025/444] fix(google tag manager): fixed link to google tag manager, fixes #4005 --- public/views/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/views/index.html b/public/views/index.html index 7c492c01480..e24d4ec6e7d 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -81,7 +81,7 @@ }]; - + From f797b19825bdb99570e6b2a98d48ff439bf8731a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 12 Feb 2016 09:58:00 +0100 Subject: [PATCH 026/444] fix(build): changed from postinstall script to regular grunt task for the copying of npm dependencies into public dir, fixes #4003 --- package.json | 3 +-- tasks/build_task.js | 1 + tasks/default_task.js | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 4b67aeefacb..2331bf0fe20 100644 --- a/package.json +++ b/package.json @@ -59,8 +59,7 @@ }, "scripts": { "test": "grunt test", - "coveralls": "grunt karma:coveralls && rm -rf ./coverage", - "postinstall": "./node_modules/.bin/grunt copy:node_modules" + "coveralls": "grunt karma:coveralls && rm -rf ./coverage" }, "license": "Apache-2.0", "dependencies": { diff --git a/tasks/build_task.js b/tasks/build_task.js index d844b661722..3ace8514164 100644 --- a/tasks/build_task.js +++ b/tasks/build_task.js @@ -8,6 +8,7 @@ module.exports = function(grunt) { 'jscs', 'tslint', 'clean:release', + 'copy:node_modules', 'copy:public_to_gen', 'typescript:build', 'karma:test', diff --git a/tasks/default_task.js b/tasks/default_task.js index 7877fc2a34b..033acb3921e 100644 --- a/tasks/default_task.js +++ b/tasks/default_task.js @@ -8,6 +8,7 @@ module.exports = function(grunt) { 'jshint', 'tslint', 'clean:gen', + 'copy:node_modules', 'copy:public_to_gen', 'phantomjs', 'css', From 53f5cb6553d9d2e1b01e7eda74d12714e4eaa41e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 12 Feb 2016 10:01:45 +0100 Subject: [PATCH 027/444] fix(api): org name taken error now returns HTTP status code 409, closes --- pkg/api/org.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/api/org.go b/pkg/api/org.go index 0316116b6d3..61af62311c6 100644 --- a/pkg/api/org.go +++ b/pkg/api/org.go @@ -84,7 +84,7 @@ func CreateOrg(c *middleware.Context, cmd m.CreateOrgCommand) Response { cmd.UserId = c.UserId if err := bus.Dispatch(&cmd); err != nil { if err == m.ErrOrgNameTaken { - return ApiError(400, "Organization name taken", err) + return ApiError(409, "Organization name taken", err) } return ApiError(500, "Failed to create organization", err) } From b5dc1727d2cf668211ee89c85b22ca32803df375 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 12 Feb 2016 10:10:07 +0100 Subject: [PATCH 028/444] fix(postgres): If password or user is empty use empty quotes for connection string, #3985 --- pkg/services/sqlstore/sqlstore.go | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/pkg/services/sqlstore/sqlstore.go b/pkg/services/sqlstore/sqlstore.go index 3ab4bf1c00b..e3db2d7f537 100644 --- a/pkg/services/sqlstore/sqlstore.go +++ b/pkg/services/sqlstore/sqlstore.go @@ -149,8 +149,13 @@ func getEngine() (*xorm.Engine, error) { if len(fields) > 1 && len(strings.TrimSpace(fields[1])) > 0 { port = fields[1] } - cnnstr = fmt.Sprintf("user=%s password=%s host=%s port=%s dbname=%s sslmode=%s", - DbCfg.User, DbCfg.Pwd, host, port, DbCfg.Name, DbCfg.SslMode) + if DbCfg.Pwd == "" { + DbCfg.Pwd = "''" + } + if DbCfg.User == "" { + DbCfg.User = "''" + } + cnnstr = fmt.Sprintf("user=%s password=%s host=%s port=%s dbname=%s sslmode=%s", DbCfg.User, DbCfg.Pwd, host, port, DbCfg.Name, DbCfg.SslMode) case "sqlite3": if !filepath.IsAbs(DbCfg.Path) { DbCfg.Path = filepath.Join(setting.DataPath, DbCfg.Path) From 6cdc1e4d3726657ad5840af684189c16dd6921fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 12 Feb 2016 11:21:42 +0100 Subject: [PATCH 029/444] feat(ux): minor tweaks and fixes, added hover submenu dropdowns --- pkg/api/index.go | 1 + .../core/components/sidemenu/sidemenu.html | 11 +++-- .../app/core/components/sidemenu/sidemenu.ts | 2 +- public/less/search.less | 4 +- public/less/sidemenu.less | 49 ++++++++----------- public/less/variables.dark.less | 3 +- public/less/variables.light.less | 5 +- 7 files changed, 32 insertions(+), 43 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index f2cad9bc924..64b6da6a3a7 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -53,6 +53,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Icon: "icon-gf icon-gf-dashboard", Url: setting.AppSubUrl + "/", Children: []*dtos.NavLink{ + {Text: "Home dashboard", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/"}, {Text: "Playlists", Icon: "fa fa-fw fa-list", Url: setting.AppSubUrl + "/playlists"}, {Text: "Snapshots", Icon: "fa-fw icon-gf icon-gf-snapshot", Url: setting.AppSubUrl + "/dashboard/snapshots"}, }, diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 7488015d0fb..837e3e386b0 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -1,7 +1,7 @@ -
        +
          -
        • -
          +
        • +
          @@ -9,8 +9,8 @@ {{ctrl.user.name}} {{ctrl.user.orgName}}
          - +
      diff --git a/public/app/features/snapshot/partials/snapshots.html b/public/app/features/snapshot/partials/snapshots.html index 3bbc671e184..3cb78a49d3f 100644 --- a/public/app/features/snapshot/partials/snapshots.html +++ b/public/app/features/snapshot/partials/snapshots.html @@ -1,9 +1,17 @@ - + +
      + + + Snapshots + + +
      +
      -

      Available snapshots

      +

      Available snapshots

      diff --git a/public/less/playlist.less b/public/less/playlist.less index 5aa5e960979..335f7cbfbfd 100644 --- a/public/less/playlist.less +++ b/public/less/playlist.less @@ -1,5 +1,5 @@ .playlist-search-container { - margin: 15px; + // margin: 15px; z-index: 1000; position: relative; width: 700px; diff --git a/public/vendor/bootstrap/less/mixins.less b/public/vendor/bootstrap/less/mixins.less index e0aef540dd4..9a8ee6676c4 100644 --- a/public/vendor/bootstrap/less/mixins.less +++ b/public/vendor/bootstrap/less/mixins.less @@ -522,6 +522,7 @@ color: @textColor; background-color: @endColor; *background-color: darken(@endColor, 5%); + box-shadow: inset 0 -3px rgba(0,0,0,0.3); } // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves From f7e3297a0fff938d811444adc9b72812a7dd92ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 13 Feb 2016 14:32:20 +0100 Subject: [PATCH 034/444] ux(): updated navbar on all pages to new style, no subnav/dropdown yet though --- package.json | 2 +- public/app/core/components/navbar/navbar.html | 12 +++++------- public/app/core/components/navbar/navbar.ts | 3 +-- public/app/features/apps/partials/edit.html | 5 +---- public/app/features/apps/partials/page.html | 5 +---- .../features/dashboard/partials/import.html | 5 +---- .../features/datasources/partials/edit.html | 16 ++++------------ .../features/datasources/partials/list.html | 12 ++++-------- public/app/features/org/partials/invite.html | 2 +- public/app/features/org/partials/newOrg.html | 5 +---- .../app/features/org/partials/orgApiKeys.html | 9 +++------ .../app/features/org/partials/orgDetails.html | 19 ++++++------------- .../app/features/org/partials/orgUsers.html | 9 +-------- .../features/playlist/partials/playlist.html | 15 +-------------- .../features/playlist/partials/playlists.html | 9 +-------- .../features/profile/partials/password.html | 9 +-------- .../features/profile/partials/profile.html | 9 +-------- .../features/snapshot/partials/snapshots.html | 9 +-------- 18 files changed, 35 insertions(+), 120 deletions(-) diff --git a/package.json b/package.json index 6030416d1dc..11152664083 100644 --- a/package.json +++ b/package.json @@ -68,7 +68,7 @@ "grunt-jscs": "~1.5.x", "grunt-sync": "^0.4.1", "karma-sinon": "^1.0.3", - "lodash": "^4.0.0", + "lodash": "^2.4.1", "sinon": "1.16.1", "systemjs-builder": "^0.15.7", "tslint": "^3.2.1", diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 2ba53897696..02369f5f608 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -10,15 +10,13 @@ - - +
      + - - - {{ctrl.title}} + {{ctrl.title}} + - - +
      diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 82168f72c29..f4bea8f089a 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -17,15 +17,14 @@ export function navbarDirective() { templateUrl: 'public/app/core/components/navbar/navbar.html', controller: NavbarCtrl, bindToController: true, - controllerAs: 'ctrl', transclude: true, + controllerAs: 'ctrl', scope: { title: "@", titleUrl: "@", }, link: function(scope, elem, attrs, ctrl) { ctrl.icon = attrs.icon; - ctrl.subnav = attrs.subnav; } }; } diff --git a/public/app/features/apps/partials/edit.html b/public/app/features/apps/partials/edit.html index e743657f17a..7def9a3c96e 100644 --- a/public/app/features/apps/partials/edit.html +++ b/public/app/features/apps/partials/edit.html @@ -1,7 +1,4 @@ - - +
      diff --git a/public/app/features/apps/partials/page.html b/public/app/features/apps/partials/page.html index 506708fa654..0b3f983124d 100644 --- a/public/app/features/apps/partials/page.html +++ b/public/app/features/apps/partials/page.html @@ -1,7 +1,4 @@ - - +
      diff --git a/public/app/features/dashboard/partials/import.html b/public/app/features/dashboard/partials/import.html index a599d6a1797..f2bb97649af 100644 --- a/public/app/features/dashboard/partials/import.html +++ b/public/app/features/dashboard/partials/import.html @@ -1,7 +1,4 @@ - - +
      diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 57e7b7f2c55..7a13ce2df1d 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -1,15 +1,7 @@ - -
      - - - Data Sources - - -
      - +
      diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html index 54276454be1..e1c7f3555f8 100644 --- a/public/app/features/datasources/partials/list.html +++ b/public/app/features/datasources/partials/list.html @@ -1,11 +1,7 @@ - -
      - - - Data Sources - - -
      +
      diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 51ba5505b8c..6b3c1afffaf 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -51,7 +51,7 @@
      -
      +
      + Invite another
      diff --git a/public/app/features/org/partials/newOrg.html b/public/app/features/org/partials/newOrg.html index 03d1ce410a9..58579c36e8b 100644 --- a/public/app/features/org/partials/newOrg.html +++ b/public/app/features/org/partials/newOrg.html @@ -1,7 +1,4 @@ - - +
      diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 9a837b30381..091cd318f4c 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -1,7 +1,4 @@ - - +
      @@ -26,9 +23,9 @@ - +
      - +
      diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index d6e40952915..f3b37923442 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -1,21 +1,10 @@ - -
      - - - Organization Preferences - - -
      +
      -

      Organization

      - -
      -

      Preferences

      -
      +

      Preferences

      @@ -98,6 +87,10 @@
      +

      Org. Users

      + Manage + +
      diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 8e391d3a467..e765be865d4 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,11 +1,4 @@ - -
      - - - Organization Users - - -
      +
      diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index ae37408169d..e1debffdc5d 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -1,18 +1,5 @@ - -
      - - - Playlist - - -
      + -
      diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html index 673168531fc..037e1b9529b 100644 --- a/public/app/features/playlist/partials/playlists.html +++ b/public/app/features/playlist/partials/playlists.html @@ -1,11 +1,4 @@ - -
      - - - New Playlist - - -
      +
      diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index 17647503f58..8fc3eeb61cd 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -1,11 +1,4 @@ - -
      - - - Change Password - - -
      +
      diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index a684e1f36b8..f262a0bf12b 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -1,11 +1,4 @@ - -
      - - - Profile - - -
      +
      diff --git a/public/app/features/snapshot/partials/snapshots.html b/public/app/features/snapshot/partials/snapshots.html index 3cb78a49d3f..f6e54b9f0c5 100644 --- a/public/app/features/snapshot/partials/snapshots.html +++ b/public/app/features/snapshot/partials/snapshots.html @@ -1,11 +1,4 @@ - -
      - - - Snapshots - - -
      +
      From 7d75e0e53ca394a72298ac92f9971891a0878a47 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 13 Feb 2016 16:45:07 +0100 Subject: [PATCH 035/444] ux(): minor fixes and cleanup, fixes for white theme --- .../features/datasources/partials/list.html | 5 +- public/less/bootswatch.light.less | 3 - public/less/dropdown.less | 3 +- public/less/gfbox.less | 56 ------------------- public/less/grafana.less | 2 +- public/less/navbar.less | 2 +- public/less/page.less | 42 ++++++++++++++ public/less/sidemenu.less | 18 ------ public/less/variables.dark.less | 2 +- public/less/variables.light.less | 10 ++-- public/vendor/bootstrap/less/dropdowns.less | 7 --- 11 files changed, 52 insertions(+), 98 deletions(-) create mode 100644 public/less/page.less diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html index e1c7f3555f8..6f2ea468b82 100644 --- a/public/app/features/datasources/partials/list.html +++ b/public/app/features/datasources/partials/list.html @@ -5,15 +5,14 @@
      -
      -
      +

      Data Sources

      Add data source -
      +
      diff --git a/public/less/bootswatch.light.less b/public/less/bootswatch.light.less index 2ca89cd75ab..f31eb4a0f56 100644 --- a/public/less/bootswatch.light.less +++ b/public/less/bootswatch.light.less @@ -459,9 +459,6 @@ legend { // DROPDOWNS // ----------------------------------------------------- -.dropdown-menu { - .border-radius(0); -} // ALERTS, LABELS, BADGES // ----------------------------------------------------- diff --git a/public/less/dropdown.less b/public/less/dropdown.less index 1497c255432..eaaa93f62bd 100644 --- a/public/less/dropdown.less +++ b/public/less/dropdown.less @@ -5,7 +5,6 @@ // ========================================================================== - .select-input { display: inline-block; position: relative; @@ -88,4 +87,4 @@ .rt-form .select-input > select { height: 34px; line-height: 34px; -} \ No newline at end of file +} diff --git a/public/less/gfbox.less b/public/less/gfbox.less index a02451c09a0..2fc7aeef562 100644 --- a/public/less/gfbox.less +++ b/public/less/gfbox.less @@ -67,59 +67,3 @@ color: @textColor; } } - -.page-container { - background-color: @pageBackground; - position: relative; - padding: 25px 56px; - padding: 25px 56px; - min-height: 900px; - max-width: 1060px; - margin-left: 0; -} - - -.page { - max-width: 653px; -} - -.page-header-align { - display: flex; - justify-content: space-between; - align-items: center; - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -ms-flexbox; /* TWEENER - IE 10 */ - display: -webkit-flex; /* NEW - Chrome */ - flex-wrap: wrap-reverse; -} -.page-wide { - max-width: 1060px; -} - -.page-wide-margined { - margin-left: 170px; - max-width: 1000px; -} - -.admin-page { - max-width: 800px; - margin-left: 10px; - .gf-box { - margin-top: 0; - } - .gf-box-body { - min-height: 0; - } - h2 { - margin-left: 15px; - margin-bottom: 0px; - font-size: @fontSizeLarge; - color: @textColor; - i { - padding-right: 6px; - } - } -} - - diff --git a/public/less/grafana.less b/public/less/grafana.less index 94bf0507ac0..a3c81471fb3 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -29,7 +29,7 @@ @import "filter-table.less"; @import "simple-box.less"; @import "dropdown.less"; -// @import url(https://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic|PT+Sans+Caption:400,700); +@import "page.less"; @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700); .row-control-inner { diff --git a/public/less/navbar.less b/public/less/navbar.less index 25b450910b6..8aeb8de3e7d 100644 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -6,7 +6,7 @@ .navbar .navbar-inner { padding-left: 0px; - border: none; + border-bottom: @navbarBorder; } .navbar .nav>li>a { diff --git a/public/less/page.less b/public/less/page.less new file mode 100644 index 00000000000..9408d9ac39d --- /dev/null +++ b/public/less/page.less @@ -0,0 +1,42 @@ + +.page-container { + background-color: @pageBackground; + position: relative; + padding: 25px 56px; + padding: 25px 56px; + max-width: 1060px; + margin-left: 0; +} + + +.page-header { + display: flex; + justify-content: space-between; + align-items: center; + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + flex-wrap: wrap-reverse; +} + +.admin-page { + max-width: 800px; + margin-left: 10px; + .gf-box { + margin-top: 0; + } + .gf-box-body { + min-height: 0; + } + h2 { + margin-left: 15px; + margin-bottom: 0px; + font-size: @fontSizeLarge; + color: @textColor; + i { + padding-right: 6px; + } + } +} + diff --git a/public/less/sidemenu.less b/public/less/sidemenu.less index 6f560dfaca7..946799b76d8 100644 --- a/public/less/sidemenu.less +++ b/public/less/sidemenu.less @@ -132,26 +132,8 @@ } } -.sidemenu-system-section { - background-color: @blueDark; - color: @white; - padding: 3px 0; - margin-left: 10px; - margin-right: 10px; - border-radius: 2px; - - .sidemenu-system-section-inner { - border: 2px solid black; - border-left: none; - border-right: none; - padding: 4px; - overflow: hidden; - } -} - .sidemenu-section-tagline { font-style: italic; - font-size: 75%; line-height: 10px; } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 92892c4b1de..b2799b04b0c 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -241,7 +241,7 @@ @navbarHeight: 52px; @navbarBackgroundHighlight: @grayDark; @navbarBackground: @grayDark; -@navbarBorder: none; +@navbarBorder: 1px solid @grayDark; @navbarText: @grayLight; @navbarLinkColor: @grayLight; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 2322f8293f9..5fee9b35aed 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -67,9 +67,8 @@ // Scaffolding // ------------------------- -// @bodyBackground: #EFEFEF; -@pageBackground: @grayDarker; -@bodyBackground: @pageBackground; +@bodyBackground: #EFEFEF; +@pageBackground: @white; @textColor: @gray; // Links @@ -189,7 +188,7 @@ // Dropdowns // ------------------------- @dropdownBackground: @white; -@dropdownBorder: rgba(0,0,0,.2); +@dropdownBorder: @grafanaTargetBorder; @dropdownDividerTop: #e5e5e5; @dropdownDividerBottom: @white; @dropdownDivider: @dropdownDividerTop; @@ -203,7 +202,6 @@ @dropdownLinkBackgroundHover: @blue; - // COMPONENT VARIABLES // -------------------------------------------------- @@ -254,7 +252,7 @@ @navbarHeight: 52px; @navbarBackgroundHighlight: #f8f8f8; @navbarBackground: #f8f8f8; -@navbarBorder: none; +@navbarBorder: 1px solid @grafanaTargetBorder; @navbarText: #666; @navbarLinkColor: #666; diff --git a/public/vendor/bootstrap/less/dropdowns.less b/public/vendor/bootstrap/less/dropdowns.less index 436b888e6b2..ee098ef8e74 100644 --- a/public/vendor/bootstrap/less/dropdowns.less +++ b/public/vendor/bootstrap/less/dropdowns.less @@ -52,13 +52,6 @@ background-color: @dropdownBackground; border: 1px solid #ccc; // Fallback for IE7-8 border: 1px solid @dropdownBorder; - *border-right-width: 2px; - *border-bottom-width: 2px; - .border-radius(6px); - .box-shadow(0 5px 10px rgba(0,0,0,.2)); - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; // Aligns the dropdown menu to right &.pull-right { From 1004515bda905759853f6ba78e04f3142ba07e27 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 13 Feb 2016 17:01:18 +0100 Subject: [PATCH 036/444] ux(fix): fixed page header height without using fixed height, now 100% height works --- public/less/grafana.less | 22 ---------------------- public/less/page.less | 24 ++++++++++++++++++++++++ 2 files changed, 24 insertions(+), 22 deletions(-) diff --git a/public/less/grafana.less b/public/less/grafana.less index a3c81471fb3..3b744c7db98 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -74,11 +74,6 @@ top: 20%; } -.grafana-app { - display: block; - min-height: 100%; -} - .histogram-chart { position:relative; } @@ -88,23 +83,6 @@ overflow: auto; } -.dashboard-container { - padding: 5px 5px; - width: 100%; - box-sizing: border-box; -} - -.main-view { - background-image: url(/img/grafana_pattern.png); - background-position: 100% -550px; - background-repeat: no-repeat; -} - -.page-dashboard { - .main-view { - background-image: none; - } -} // // Srollbars diff --git a/public/less/page.less b/public/less/page.less index 9408d9ac39d..feefec98f44 100644 --- a/public/less/page.less +++ b/public/less/page.less @@ -1,3 +1,26 @@ +.grafana-app { + display: block; + height: 100%; +} + +.dashboard-container { + padding: 5px 5px; + width: 100%; + box-sizing: border-box; +} + +.main-view { + background-image: url(/img/grafana_pattern.png); + background-position: 100% -550px; + background-repeat: no-repeat; + height: 100%; +} + +.page-dashboard { + .main-view { + background-image: none; + } +} .page-container { background-color: @pageBackground; @@ -6,6 +29,7 @@ padding: 25px 56px; max-width: 1060px; margin-left: 0; + height: 100%; } From e00f9611f4f0d75b616c568ee971260a2d5c4e4b Mon Sep 17 00:00:00 2001 From: Axel Voitier Date: Sat, 13 Feb 2016 19:23:30 +0100 Subject: [PATCH 037/444] Adding units volt-ampere (VA), kilovolt-ampere (kVA) and volt-ampere reactive (var). --- public/app/core/utils/kbn.js | 38 +++++++++++++++++++++--------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index 959de5fa42a..fbb854148f9 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -358,14 +358,17 @@ function($, _) { kbn.valueFormats.iops = kbn.formatBuilders.simpleCountUnit('iops'); // Energy - kbn.valueFormats.watt = kbn.formatBuilders.decimalSIPrefix('W'); - kbn.valueFormats.kwatt = kbn.formatBuilders.decimalSIPrefix('W', 1); - kbn.valueFormats.watth = kbn.formatBuilders.decimalSIPrefix('Wh'); - kbn.valueFormats.kwatth = kbn.formatBuilders.decimalSIPrefix('Wh', 1); - kbn.valueFormats.joule = kbn.formatBuilders.decimalSIPrefix('J'); - kbn.valueFormats.ev = kbn.formatBuilders.decimalSIPrefix('eV'); - kbn.valueFormats.amp = kbn.formatBuilders.decimalSIPrefix('A'); - kbn.valueFormats.volt = kbn.formatBuilders.decimalSIPrefix('V'); + kbn.valueFormats.watt = kbn.formatBuilders.decimalSIPrefix('W'); + kbn.valueFormats.kwatt = kbn.formatBuilders.decimalSIPrefix('W', 1); + kbn.valueFormats.voltamp = kbn.formatBuilders.decimalSIPrefix('VA'); + kbn.valueFormats.kvoltamp = kbn.formatBuilders.decimalSIPrefix('VA', 1); + kbn.valueFormats.voltampreact = kbn.formatBuilders.decimalSIPrefix('var'); + kbn.valueFormats.watth = kbn.formatBuilders.decimalSIPrefix('Wh'); + kbn.valueFormats.kwatth = kbn.formatBuilders.decimalSIPrefix('Wh', 1); + kbn.valueFormats.joule = kbn.formatBuilders.decimalSIPrefix('J'); + kbn.valueFormats.ev = kbn.formatBuilders.decimalSIPrefix('eV'); + kbn.valueFormats.amp = kbn.formatBuilders.decimalSIPrefix('A'); + kbn.valueFormats.volt = kbn.formatBuilders.decimalSIPrefix('V'); // Temperature kbn.valueFormats.celsius = kbn.formatBuilders.fixedUnit('°C'); @@ -636,14 +639,17 @@ function($, _) { { text: 'energy', submenu: [ - {text: 'watt (W)', value: 'watt' }, - {text: 'kilowatt (kW)', value: 'kwatt' }, - {text: 'watt-hour (Wh)', value: 'watth' }, - {text: 'kilowatt-hour (kWh)', value: 'kwatth'}, - {text: 'joule (J)', value: 'joule' }, - {text: 'electron volt (eV)', value: 'ev' }, - {text: 'Ampere (A)', value: 'amp' }, - {text: 'Volt (V)', value: 'volt' }, + {text: 'watt (W)', value: 'watt' }, + {text: 'kilowatt (kW)', value: 'kwatt' }, + {text: 'volt-ampere (VA)', value: 'voltamp' }, + {text: 'kilovolt-ampere (kVA)', value: 'kvoltamp' }, + {text: 'volt-ampere reactive (var)', value: 'voltampreact'}, + {text: 'watt-hour (Wh)', value: 'watth' }, + {text: 'kilowatt-hour (kWh)', value: 'kwatth' }, + {text: 'joule (J)', value: 'joule' }, + {text: 'electron volt (eV)', value: 'ev' }, + {text: 'Ampere (A)', value: 'amp' }, + {text: 'Volt (V)', value: 'volt' }, ] }, { From caa765ec3219973d155a59cf5f47b92717e1a436 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 13 Feb 2016 19:42:05 +0100 Subject: [PATCH 038/444] ux(forms): major simplification of norm-form markup and css --- .../features/datasources/partials/edit.html | 96 ++++----- .../datasources/partials/http_settings.html | 95 ++++---- .../app/features/org/partials/orgDetails.html | 107 ++++----- public/less/bootswatch.dark.less | 58 ----- public/less/forms.less | 8 - public/less/normform.less | 204 +++--------------- public/less/overrides.less | 9 - public/less/page.less | 3 +- public/less/variables.light.less | 2 +- .../bootstrap/less/responsive-767px-max.less | 17 -- 10 files changed, 147 insertions(+), 452 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 7a13ce2df1d..22aee1047e8 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -5,64 +5,48 @@
      -
      -

      Add data source

      -

      Edit data source

      -

      This text will only appear on Add Data Source

      +

      Add data source

      +

      Edit data source

      -
      -
      -
        -
      • - Name -
        • -
      • -
      • - -
        • - -
      • - - -
        • -
      -
      + +
      +
      + Name +
      -
      -
        -
      • - Type -
        • -
      • - -
        • -
      -
      -
      - - - - - - -
      -
      Testing....
      -
      Test results
      -
      -
      {{testing.title}}
      -
      -
      -
      - -
      - - - - Cancel +
      +

      - -
      + +
      + Type + +
      +
      + + + + + + +
      +
      Testing....
      +
      Test results
      +
      +
      {{testing.title}}
      +
      +
      +
      + +
      + + + + Cancel +
      +
      +
      diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 24c4ceb51f5..91d4b46a363 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -1,64 +1,47 @@ -
      +

      Http settings

      -
      -
      -
        -
      • - Url -
        • -
      • - -
        • -
      -
      + +
      +
      + Url +
      -
      -
        -
      • - Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request -
        • -
      • - -
        • -
      -
      +
      + +
      + + Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request + +
      -
      -
        -
      • - Http Auth -
        • -
      • - -
        • -
      • - Tip for with credentials -
        • -
      -
      +
      + +
      + + Http Auth +
      -
      -
        -
      • - User -
        • -
      • - -
        • -
      -
      + + + + + Tip for with credentials + +
      + +
      + + User + +
      -
      -
        -
      • - Password -
        • -
      • - -
        • -
      -
      +
      + +
      + + Passord + +
      -
      diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index f3b37923442..2fa16fa62b3 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -6,91 +6,58 @@

      Preferences

      -
      -
      -
        -
      • - Name -
        • -
      • - -
        • -
      -
      + +
      + Name +
      -
      - -
      +
      + +
      -
      -

      Address

      -
      +

      Address

      -
      -
      -
        -
      • - Address 1 -
        • -
      • - -
        • -
      • - Address 2 -
        • -
      • - -
        • -
      -
      + +
      + Address1 +
      -
      -
        -
      • - City -
        • -
      • - -
        • -
      • - Postal code -
        • -
      • - -
        • -
      -
      +
      + Address2 +
      -
      -
        -
      • - State -
        • -
      • - -
        • -
      • - Country -
        • -
      • - -
        • -
      -
      +
      + +
      + City + +
      +
      + Postal code + +
      +
      + +
      + State + +
      +
      + Country +
      -
      - -
      +
      + +

      Org. Users

      Manage -
      diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index f2cbc607c2a..cef058fa2f5 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -103,64 +103,6 @@ hr { } } -@media (max-width: @navbarCollapseWidth) { - - .navbar .nav-collapse { - - .nav li > a { - border: none; - color: @grayLighter; - font-weight: normal; - text-shadow: none; - - &:hover { - border: none; - background-color: @blue; - } - } - - .nav .active > a { - border: none; - background-color: @blue; - } - - .dropdown-menu a:hover { - background-color: @blue; - } - - .navbar-form, - .navbar-search { - border-top: none; - border-bottom: none; - } - - .nav-header { - color: rgba(128, 128, 128, 0.6); - } - } - - .navbar-inverse .nav-collapse { - - .nav li > a:hover { - background-color: #111; - } - - .nav .active > a { - background-color: #111; - } - - .nav li.dropdown.open > .dropdown-toggle, - .nav li.dropdown.active > .dropdown-toggle, - .nav li.dropdown.open.active > .dropdown-toggle { - background-color: #111; - } - } -} - -.dropdown-menu { - .border-radius(0); -} - div.subnav { diff --git a/public/less/forms.less b/public/less/forms.less index 61693f63ece..5d2e00279d8 100644 --- a/public/less/forms.less +++ b/public/less/forms.less @@ -33,14 +33,6 @@ input[type="checkbox"]:checked+label { background: url(@checkboxImageUrl) 0px -21px no-repeat; } -.gf-form { - padding-bottom: 10px; - .checkbox-label { - padding-left: 7px; - display: inline; - } -} - .gf-fluid-input { border: none; display: block; diff --git a/public/less/normform.less b/public/less/normform.less index 2aba22c9e7f..0269449501a 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -1,214 +1,68 @@ -.norm-form { - border-top: 3px solid @pageBackground; - // border-left: 3px solid @pageBackground; - // border-right: 3px solid @pageBackground; - background: transparent; - - &.last { - border-bottom: 1px solid @pageBackground; - } - - &.borderless { - background: transparent; - border: none; - } +.gf-form { + margin-top: 3px; + margin-right: 3px; + display: inline-block; .checkbox-label { display: inline; - padding-right: 4px; - margin-bottom: 0; - margin-left: 5px; + padding: 8px 7px 8px 4px; + } + .cr1 { + margin-left: 8px; } } -.norm-form-container-no-item-borders { - border: 1px solid @pageBackground; - border-bottom: none; - - .norm-form, .norm-form-item, [type=text].norm-form-input, [type=text].norm-form-clear-input { - border: none; - } +.gf-form-group { + margin-bottom: 20px; } - -.spaced-form { - .norm-form { - margin: 7px 0; - } +.gf-form-button-row { + margin-top: 15px; + margin-bottom: 10px; } -.borderless { - .norm-form-item, - .norm-form-input { - border: none; - } -} - -.norm-form-container { - border-bottom: 1px solid @pageBackground; -} - -.norm-form-btn { - padding: 7px 12px; -} - -.norm-form-list { - list-style: none; - margin: 0; - >li { - float: left; - background: @labelBackground; - } - & .trans { - background: transparent; - } -} - -.norm-form-flex-wrapper { - display: flex; - flex-direction: row; - float: none !important; -} - -.grafana-metric-options { - margin-top: 25px; -} - -.norm-form-item { +.gf-form-label { + background-color: @labelBackground; + display: inline-block; padding: 8px 7px; - display: inline-block; - font-weight: normal; - border-right: 3px solid @pageBackground; - color: @grayLighter; - display: inline-block; .small; - - .has-open-function & { - padding-top: 25px; - } - - .norm-form-disabled & { - color: @grafanaTargetColorHide; - } - - &:hover, &:focus { - text-decoration: none; - } - - &a:hover { - background: @grafanaTargetFuncBackground; - } - - &.last { - border-right: none; - } -} - - -.norm-form-item-icon { - i { - width: 15px; - text-align: center; - display: inline-block; - } -} - -.norm-form-func { - background: @grafanaTargetFuncBackground; - > a { - color: @grafanaTargetColor; - } - > a:hover { - color: @linkColor; - } - - &.show-function-controls { - padding-top: 5px; - min-width: 100px; - text-align: center; - } -} - -input[type=text].norm-form-func-param { - background: transparent; - border: none; - margin: 0; - padding: 0; -} - -input[type=text].norm-form-clear-input { - padding: 8px 7px; - border: none; - margin: 0px; - background: transparent; - color: @grafanaTargetColor; - border-radius: 0; - border-right: 2px solid @pageBackground; } [type=text], [type=email], [type=number], [type=password], { - &.norm-form-input { + &.gf-form-input { border: none; - border-right: 3px solid @pageBackground; margin: 0px; border-radius: 0; padding: 8px 6px; height: 100%; box-sizing: border-box; font-size: 15px; - &.last { - border-right: none; - } } } -input[type=checkbox].norm-form-checkbox { +input[type=checkbox].gf-form-checkbox { margin: 0; } -.norm-form-textarea { - height: 200px; - margin: 0; - box-sizing: border-box; -} - -select.norm-form-input { +select.gf-form-input { border: none; - border-right: 3px solid @pageBackground; margin: 0px; border-radius: 0; height: 36px; - padding: 9px 3px; + padding: 9px 3px; font-size: 15px; - &.last { - border-right: none; - } } -.norm-form-radio { - input[type=radio] { - margin: 0; - } - label { - display: inline; - } -} -.norm-form-item-large { width: 115px; } -.norm-form-item-xlarge { width: 150px; } -.norm-form-item-xxlarge { width: 200px; } +.gf-size-xs { width: 60px;} +.gf-size-s { width: 80px;} +.gf-size-ms { width: 100px;} +.gf-size-m { width: 120px; } +.gf-size-l { width: 150px; } +.gf-size-xl { width: 200px; } +.gf-size-xxl { width: 300px; } +.gf-size-xxxl { width: 400px; } -.norm-form-input.norm-form-item-xxlarge { - width: 215px; -} - -.norm-form-auto { - width: auto; -} - -.norm-form-inner-box { - margin: 20px 0 20px 148px; - display: inline-block; -} +.gf-size-auto { width: auto; } diff --git a/public/less/overrides.less b/public/less/overrides.less index d33707bcf50..99abdee22f5 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -1,12 +1,3 @@ -// Media queries -// --------------------- -@media (max-width: 767px) { - div.panel { - width: 100% !important; - padding: 0px !important; - } -} - // Containers // --------------------- .container-fluid { diff --git a/public/less/page.less b/public/less/page.less index feefec98f44..e9a025f423f 100644 --- a/public/less/page.less +++ b/public/less/page.less @@ -25,8 +25,7 @@ .page-container { background-color: @pageBackground; position: relative; - padding: 25px 56px; - padding: 25px 56px; + padding: 25px 56px 10px 56px; max-width: 1060px; margin-left: 0; height: 100%; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 5fee9b35aed..30b470a197c 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -91,7 +91,7 @@ @headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily @headingsFontWeight: normal; // instead of browser default, bold -@headingsFontStyle: italic; +@headingsFontStyle: normal; @headingsColor: @textColor; // empty to use BS default, @textColor diff --git a/public/vendor/bootstrap/less/responsive-767px-max.less b/public/vendor/bootstrap/less/responsive-767px-max.less index 128f4ce30da..a074bc9d69d 100644 --- a/public/vendor/bootstrap/less/responsive-767px-max.less +++ b/public/vendor/bootstrap/less/responsive-767px-max.less @@ -5,23 +5,6 @@ @media (max-width: 767px) { - // Padding to set content in a bit - body { - padding-left: 20px; - padding-right: 20px; - } - // Negative indent the now static "fixed" navbar - .navbar-fixed-top, - .navbar-fixed-bottom, - .navbar-static-top { - margin-left: -20px; - margin-right: -20px; - } - // Remove padding on container given explicit padding set on body - .container-fluid { - padding: 0; - } - // TYPOGRAPHY // ---------- // Reset horizontal dl From eae4bb74ddaff07b4877edd01a6d0ce061e80133 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 13 Feb 2016 20:54:00 +0100 Subject: [PATCH 039/444] ux(profile): update profile forms with new form markup and classes --- .../features/profile/partials/password.html | 70 +++------ .../features/profile/partials/profile.html | 141 +++++++----------- public/less/normform.less | 2 +- 3 files changed, 80 insertions(+), 133 deletions(-) diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index 8fc3eeb61cd..fd5aaa82065 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -2,55 +2,33 @@
      -
      -

      Change password

      +

      Change password

      -
      -
      -
      -
        -
      • - Old Password -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - New Password -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Confirm New -
        • -
      • - -
        • -
      -
      -
      -
      + +
      + Old Password + +
      +
      -
      -
      - -   - Cancel -
      - +
      + New Password + +
      +
      + +
      + Confirm Password + +
      +
      + +
      + + Cancel +
      + -
      diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index f262a0bf12b..417f3728dfa 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -2,95 +2,64 @@
      -
      -

      Profile

      +

      Profile

      -
      -

      Preferences

      -
      -
      -
      -
        -
      • - Name -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Email -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Username -
        • -
      • - -
        • -
      -
      -
      + +
      + Name + +
      +
      -
      -
        -
      • - UI Theme -
        • -
      • - -
        • -
      -
      -
      -
      - -
      - +
      + Email + +
      +
      -
      -

      Password

      - Change Password -
      +
      + Username + +
      +
      -
      -

      Organizations

      -
      - - - - - - - - - - - - - - -
      NameRole
      {{org.name}}{{org.role}} - - Current - - - Select - -
      -
      - -
      +
      + UI Theme + +
      + +
      + +
      + + +

      Password

      + Change Password + +

      Organizations

      + + + + + + + + + + + + + + + +
      NameRole
      {{org.name}}{{org.role}} + + Current + + + Select + +
      +
      diff --git a/public/less/normform.less b/public/less/normform.less index 0269449501a..bfb6fe1a685 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -17,7 +17,7 @@ } .gf-form-button-row { - margin-top: 15px; + margin-top: 20px; margin-bottom: 10px; } From fa06040ed236b0cdfa2df17ce00f4dab17b0f679 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sat, 13 Feb 2016 22:12:15 +0100 Subject: [PATCH 040/444] ux(): updated playlist, other other minor fixes --- .../features/playlist/partials/playlist.html | 199 ++++++++---------- public/less/overrides.less | 2 +- public/less/playlist.less | 8 +- 3 files changed, 93 insertions(+), 116 deletions(-) diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index e1debffdc5d..54600ecc9f4 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -2,124 +2,101 @@
      -
      -

      New Playlist

      -

      Edit Playlist

      +

      New Playlist

      +

      Edit Playlist

      -

      Name and interval

      +

      Name and interval

      -
      -
      -
      -
        -
      • - Name -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Interval -
        • -
      • - -
        • -
      -
      -
      -
      +
      +
      + Name + +
      +
      + Interval + +
      +
      -
      +
      +
      Add dashboards
      +
      + +
      +
      -
      -
      - -
      -
      -
      Add dashboards
      -
      - -
      -
      -
      - -
      -
      +
      +
      Search results ({{ctrl.filteredDashboards.length}})
      - - - - - -
      - {{playlistItem.title}} - - -
      -
      -
      -
      -
      -
      - - - {{tag.term}}  ({{tag.count}}) - -
      -
      -
      -
      -
      -
      Added dashboards
      - - - - +
      - {{playlistItem.title}} - - - - {{playlistItem.title}} - -
      + + + + +
      + {{playlistItem.title}} + + +
      +
      +
      +
      +
      +
      + + + {{tag.term}}  ({{tag.count}}) + +
      +
      +
      +
      +
      +
      Added dashboards
      + + + + - - -
      + {{playlistItem.title}} + + + + {{playlistItem.title}} + + - - - -
      -
      -
      + + + + + + + +
      +
      -
      +
      -
      - - Save - Cancel - -
      +
      + + Save + Cancel + +
      -
      +
      diff --git a/public/less/overrides.less b/public/less/overrides.less index 99abdee22f5..a1e923ea28b 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -182,7 +182,7 @@ form input.ng-invalid { .row-open { margin-top: 5px; - left:-34px; + left:-28px; position: absolute; z-index: 100; transition: .10s left; diff --git a/public/less/playlist.less b/public/less/playlist.less index 335f7cbfbfd..16e3ebaaafa 100644 --- a/public/less/playlist.less +++ b/public/less/playlist.less @@ -14,9 +14,9 @@ } .playlist-search-switches { - position: relative; - top: -39px; - left: 260px; + position: absolute; + top: 8px; + right: 11px; } .playlist-search-field-wrapper { @@ -90,4 +90,4 @@ float: right; padding-left: 20px; } -} \ No newline at end of file +} From 68225d64aa91d324e3ed39d8b341127f1bbd44e8 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Sat, 13 Feb 2016 17:55:49 -0800 Subject: [PATCH 041/444] Converted org_users_ctrl to typescript --- public/app/core/routes/routes.ts | 1 + public/app/features/org/all.js | 2 +- public/app/features/org/orgUsersCtrl.js | 66 ----------------- public/app/features/org/org_users_ctrl.ts | 73 +++++++++++++++++++ .../app/features/org/partials/orgUsers.html | 18 ++--- 5 files changed, 84 insertions(+), 76 deletions(-) delete mode 100644 public/app/features/org/orgUsersCtrl.js create mode 100644 public/app/features/org/org_users_ctrl.ts diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 82da84fbc56..4df007d7bd6 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -71,6 +71,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/org/users', { templateUrl: 'public/app/features/org/partials/orgUsers.html', controller : 'OrgUsersCtrl', + controllerAs: 'ctrl', resolve: loadOrgBundle, }) .when('/org/apikeys', { diff --git a/public/app/features/org/all.js b/public/app/features/org/all.js index d232b3bcd0a..cebd0dd1def 100644 --- a/public/app/features/org/all.js +++ b/public/app/features/org/all.js @@ -1,5 +1,5 @@ define([ - './orgUsersCtrl', + './org_users_ctrl', './newOrgCtrl', './userInviteCtrl', './orgApiKeysCtrl', diff --git a/public/app/features/org/orgUsersCtrl.js b/public/app/features/org/orgUsersCtrl.js deleted file mode 100644 index 0419e4d4a3b..00000000000 --- a/public/app/features/org/orgUsersCtrl.js +++ /dev/null @@ -1,66 +0,0 @@ -define([ - 'angular', -], -function (angular) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('OrgUsersCtrl', function($scope, $http, backendSrv) { - - $scope.user = { - loginOrEmail: '', - role: 'Viewer', - }; - - $scope.users = []; - $scope.pendingInvites = []; - - $scope.init = function() { - $scope.get(); - $scope.editor = { index: 0 }; - }; - - $scope.get = function() { - backendSrv.get('/api/org/users').then(function(users) { - $scope.users = users; - }); - backendSrv.get('/api/org/invites').then(function(pendingInvites) { - $scope.pendingInvites = pendingInvites; - }); - }; - - $scope.updateOrgUser = function(user) { - backendSrv.patch('/api/org/users/' + user.userId, user); - }; - - $scope.removeUser = function(user) { - backendSrv.delete('/api/org/users/' + user.userId).then($scope.get); - }; - - $scope.revokeInvite = function(invite, evt) { - evt.stopPropagation(); - backendSrv.patch('/api/org/invites/' + invite.code + '/revoke').then($scope.get); - }; - - $scope.copyInviteToClipboard = function(evt) { - evt.stopPropagation(); - }; - - $scope.openInviteModal = function() { - var modalScope = $scope.$new(); - modalScope.invitesSent = function() { - $scope.get(); - }; - - $scope.appEvent('show-modal', { - src: 'public/app/features/org/partials/invite.html', - modalClass: 'modal-no-header invite-modal', - scope: modalScope - }); - }; - - $scope.init(); - - }); -}); diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts new file mode 100644 index 00000000000..5738eff1f77 --- /dev/null +++ b/public/app/features/org/org_users_ctrl.ts @@ -0,0 +1,73 @@ +/// + +import angular from 'angular'; +import _ from 'lodash'; +import coreModule from '../../core/core_module'; + +export class OrgUsersCtrl { + + user: any; + users: any; + pendingInvites: any; + editor: any; + + /** @ngInject */ + constructor(private $scope, private $http, private backendSrv) { + this.user = { + loginOrEmail: '', + role: 'Viewer', + }; + this.get(); + this.editor = { index: 0 }; + } + + get() { + this.backendSrv.get('/api/org/users') + .then((users) => { + this.users = users; + }); + this.backendSrv.get('/api/org/invites') + .then((pendingInvites) => { + this.pendingInvites = pendingInvites; + }); + } + + updateOrgUser(user) { + this.backendSrv.patch('/api/org/users/' + user.userId, user); + } + + removeUser(user) { + this.backendSrv.delete('/api/org/users/' + user.userId) + .then(() => { + this.get(); + }); + } + + revokeInvite(invite, evt) { + evt.stopPropagation(); + this.backendSrv.patch('/api/org/invites/' + invite.code + '/revoke') + .then(() => { + this.get(); + }); + } + + copyInviteToClipboard(evt) { + evt.stopPropagation(); + } + + openInviteModal() { + var modalScope = this.$scope.$new(); + modalScope.invitesSent = function() { + this.get(); + }; + + this.$scope.appEvent('show-modal', { + src: 'public/app/features/org/partials/invite.html', + modalClass: 'modal-no-header invite-modal', + scope: modalScope + }); + } + +} + +coreModule.controller('OrgUsersCtrl', OrgUsersCtrl); diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index c029dff2955..94ac26c7b0a 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -7,7 +7,7 @@
      - @@ -16,7 +16,7 @@
      - + @@ -26,22 +26,22 @@ - +
      {{user.login}} {{user.email}} - - +
      - + @@ -50,12 +50,12 @@ - +
      {{invite.email}} {{invite.name}} -   @@ -70,7 +70,7 @@ {{invite.url}}

        - From 47b6f01c8b70254d686ef237c03d677bc9ce3d54 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Sat, 13 Feb 2016 18:21:18 -0800 Subject: [PATCH 042/444] confirmation box added for user removal --- public/app/features/org/org_users_ctrl.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index 5738eff1f77..9d77148e2ab 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -37,6 +37,18 @@ export class OrgUsersCtrl { } removeUser(user) { + this.$scope.appEvent('confirm-modal', { + title: 'Confirm delete user', + text: 'Are you sure you want to delete user ' + user.login + '?', + yesText: "Delete", + icon: "fa-warning", + onConfirm: () => { + this.removeUserConfirmed(user); + } + }); + } + + removeUserConfirmed(user) { this.backendSrv.delete('/api/org/users/' + user.userId) .then(() => { this.get(); From 92f4442356418f4578655e706fea6c73c0aa145a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 10:39:20 +0100 Subject: [PATCH 043/444] fix(influxdb): fixed annotations editor, broken recently in master due to plugin changes, fixes #4023 --- .../datasource/influxdb/partials/annotations.editor.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/public/app/plugins/datasource/influxdb/partials/annotations.editor.html b/public/app/plugins/datasource/influxdb/partials/annotations.editor.html index 6d71ec3211a..03ef1df0b52 100644 --- a/public/app/plugins/datasource/influxdb/partials/annotations.editor.html +++ b/public/app/plugins/datasource/influxdb/partials/annotations.editor.html @@ -2,7 +2,7 @@
      InfluxDB Query Example: select text from events where $timeFilter
      - +
      @@ -12,17 +12,17 @@
      Column mappings If your influxdb query returns more than one column you need to specify the column names below. An annotation event is composed of a title, tags, and an additional text field.
      - +
      - +
      - +
      From f3d277cbab29141767e1cd66eea5b151316e0fc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 13:41:42 +0100 Subject: [PATCH 044/444] ux(): general ux polish and experimental work on page header --- .../features/datasources/partials/edit.html | 6 +- .../app/features/org/partials/orgDetails.html | 110 +++++++++--------- .../features/profile/partials/profile.html | 13 ++- public/img/page_header_line.png | Bin 0 -> 32993 bytes public/less/bootswatch.dark.less | 4 - public/less/grafana-responsive.less | 14 ++- public/less/grafana.less | 1 - public/less/normform.less | 22 ++-- public/less/page.less | 6 + public/less/type.less | 11 -- public/less/variables.dark.less | 2 +- public/views/index.html | 2 + 12 files changed, 107 insertions(+), 84 deletions(-) create mode 100644 public/img/page_header_line.png diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 22aee1047e8..8a0dc0f4e0a 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -5,8 +5,10 @@
      -

      Add data source

      -

      Edit data source

      +
      +

      Add data source

      +

      Edit data source

      +
      diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 2fa16fa62b3..1aa6046a28c 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -2,61 +2,67 @@
      -
      - +

      Preferences

      - - -
      - Name - -
      - -
      - -
      - - -

      Address

      - -
      -
      - Address1 - -
      -
      - Address2 - -
      -
      - -
      - City - -
      -
      - Postal code - -
      -
      - -
      - State - -
      -
      - Country - -
      - -
      - -
      -
      -

      Org. Users

      - Manage +
      +
      + Name + +
      + +
      + +
      +
      + +

      Address

      + +
      +
      + Address1 + +
      +
      + Address2 + +
      +
      + +
      + City + +
      +
      + Postal code + +
      +
      + +
      + State + +
      +
      + Country + +
      + +
      + +
      +
      + +
      +

      Users

      + Manage +
      + +
      +

      API Keys

      + Manage +
      diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 417f3728dfa..9ce7589a864 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -2,10 +2,13 @@
      - -

      Profile

      +
      +

      Profile

      +
      +

      Preferences

      +
      Name @@ -34,8 +37,10 @@
      -

      Password

      - Change Password +
      +

      Password

      + Change Password +

      Organizations

      diff --git a/public/img/page_header_line.png b/public/img/page_header_line.png new file mode 100644 index 0000000000000000000000000000000000000000..ec98becd09382ba3cacbf972f503c4c238e6b0b2 GIT binary patch literal 32993 zcmZ^Kb8uwAzwgAhZ9AFRwkEc1ZEV}th8t|`Y-~H5WMgc+;YJ(X`PHpkuim@${+Yv> z>FU${?T=2Znu;t6A|WCG06>wKlL7$%aBARv8hA+Xr^mNTB=82xLqc8?9v*&kUv&?B zNZ={0>#5;l?dfgiZUwM$c5$*|@vv~WvU2vYb@9B0>K6e3$N}$gh3U#DtX(ek&%!@lq+f0 zG%GzL{krm1d;jY|@2UGO|M}}=z1bvd8yRk%6yMK5B!{aVo_UXJ{$h_Sl9~DWXnOTh zsaQ-Jg^d4u=WZO$zd;cFf1UsDJL^%@2YLVBul)C=52+Z$zW>i}(n)CEB>wOJ`p+3r zjM6X{a2r10#Xnei<$kVvca4INfaDH6HN6+TSJMBdeWHf+!7SS!4cA_5J5co1r@dDa z8KQcnVb{fw<$^mGtWvReSKtnKkWt6!E1H&J0z-)D*J3wDI}LEqxCu@%DhkkcC}v96`a40gn74sTT=RVEww5t zHn;NBjTh`L)x!FLCuWza>D#h#2kZ24Cmr`;_K#Z!vF-($7;WZ>aUy!1z_yIwXYRJmCm<)-L0B6(I!}3E7iD$F$`|-ca_F=D)kR$CT4I&K)}}Y z+8kw)lKI)WKt^-4G`p)={d;WlGt`1*N*Lwg$)vp9;b5^sXE0B-3dN)oR?EoY^cM_2 zeO=hynqkW?#D*W*T1JTWhj^MFG>$*Bp(PBpk1#W|Y6#tbMN+UE&s+`b5_Bf8zEHv^|uZDuO2ZApY=~&3Ay_IAAC{{-v4O62=qo z0cvIU!<+w1;~`$?tQXqV00~eCw0E z^_GIBr}PD<0(<)fs%GQC_=z4fqvfD9>BMR!E6}Niau)X|!3!Cs4UFb4#Kv^J@{g|C zdU2ZleFTKHIUhf?0SC2cE*zeqLC5W3`>TPuj)p#wC6cO{+6Fj4jGY`KDAejn-LC@Q z*1T3UtggW%UFMTMR{q;;uo>|OP3<~FCDFIn;jEr_lL{8nWyZ!&sfd3uXQ?(H&2iFQ z+G@AfRo$~fA4G**XSsuSf7S!ZJ>|C{ygvmqoCjOj49n+!lR?wCI#d7shTz-y2C@3L z)Y*Hg4_5bsT;)r+1GCiR(8XT2Xmp;@*G;z?yojf;WG^Dew^9X`^zmSr<#6=k*`;Z- zuNKmST>{V=B6L%9f|^Cj>M?%m?%Gqn?do7~GHL^-xt(r<`Y6 zt-l+-2Eb)GR~%8cj)ZUy3PJ%|FN3POB-{HC%IdmVqBvBzhBNd-yHUmkCD+AGPd z7fCF8wFUmbZ#`2yDvDS~R%#dtO;1(OKUDLh!Vbv*bv|HB8AlD<3~-UOug?WzMw5ky z%6u8tY5c9#SqkS^qT^djK?`LATVI(L`HRs7c7G7Qupj$-lj~D|{>hGIejnfpq2Mxh zh0;Btvj8+G03PEw-y^TWQ{(gwzh3Q3?Cx>HoE^JJoZ*s3TKv(`!^3fj%KKsZ%$#@S zu+$abF#(ig7*!h^CKEhT8vIM6)>x#_L5?BSIPghcaxSrlYIw z2>T~M7o{kwWSRX}l;ZVR(-&7&W37`Eja%!2)1DfIImt(AY&_pRyEEYw^>E2=4K)-t zh%38j(`0Io)UAAOZ#BlcjGHPnygA>B4|(53h3*ZZ9a8FFiR(YO6ec8TOs&~H3AU4( z&O{`CQ~t63S^78ZCgOP_HDa1964_1A{eUV-~< zoz1c6ft>Jk)vpdhBj477Be&9Pt|P3y;0-WU=f;J1Q4R1oJGGa}sbUYB-PlXDADo9+ zJlFbjUxRGjM&y@GwFGbXk}1kXT~D57(pAfD%hrH|p_H98p24sm*Sn)Wf>(0j@Qe_XGd`1*k46>Gz|HS zXKIP9dV}n%g`O&%y&*$D3N+cSXM+~~$gG6f(wqGhs3M4uK6QU#13s9{E_yzg%sVsj zz7JKNGzGfcj8B~I6z94G&L8BU?IH}%W?x36s~V%T$H<3!6>C@O6#1ic&NbWXYO^G@ zt1ZX(B}OZBh;R3vZ#ffQTXrXM&_*KUayx#(CkiGiH6U1R{AekM=IO_Fmo7~p)P3i0 zJK}I|N>9r%iq6A%g6;okeRo;$p+n)e(~f3Gae63Tyf^7Gw~2E0)qNxmtrnU2ZawB0 zV~56U=q{{VV4Fx~K&*Q>a1L#O`n}2ixqw(`7+C05=%x%ms3R1k8bs+R+z~AMSiInP zd!t>Rpjp#L(!=WL`!E&NuBLj1Th)c6gm?MbG5Y#DfIyb>DnOU`6{k|C@!4_xsW8Q# zi-W}eYNQ-e;C;p_my@D#L~IdOfo0sI!FZ(Fm0JCaFd`ZOE4z_t=Yl8G{^%+hlx&*g zF5DHuE*3msC~ra|&UIcivg%~+I<^vTK~S=t+PDo1^&J~eUbOY!VM-2No-wRh2zM5Z zrI{h@nAKNq+{)MAmc{2zd$>%8d7rA~?7F{aeU9+h-LJyB&ADt}c{MNc-J4}iUd*=M zJ1|(F%h!=TsZ*&iNaT;?U~L#jDpSuYn^gEcvlv42#yXu5OB(*M_uZl7AX1zy<*9-k z1?VT4Q3d|#LT86?)|hqjI}-D@A)oJj%Zap(UY|iP3ZV4lP(=RouW$X6Dho7(*?jxp z5=CYzl@@P$DB1jkk5V8}ujssZr`=c%X&-=SV4TmU0WOa9b#TPu?vM3jz0!TvY-;$M)V!BFZgWa`J0Pu-)Om=s@EH2 z?ps;$vd>e4A38eC{n}ER!JuHG|0fL}wJ#~-wu~>+YS$V$hl%1$r0^$k_hJU-ujdrL zr@SJ4Xcr;OYX3ZLLxXH_5QWocl+cHRd*c1jgRSboyC^c#DfxIziL(BuUNfK6I7Hxv z@WL~8dsL!-Di=-!9Gf^%9P;nF!M5TQ3lhigILV?xnQh|w{39n4(^v7>7H_4g(@fz& zqDn2X03NGVGjmb|wwa`bt(=_GpC0Gv7^okAlO-N2;_@3GomYb;z7U({MV9Za3N~4g z0sDy`UA{L_v`H}TB&>Sppr~?^*Xs?~u>R~NGx?;QL5+0owZ&?`j$P@U(O-X--U!V3 zrXx0twSKF;UYf^J&gu)H_@$@{}!BYVqhrqbs8 z+D&YyMODXKhpiE(XD;$U95wgO=Si3r&(MSpQsn50VdemCgtPo;x+s+UQ~!y4rlK?h zXMy{V=DY@@awx>!A# z9p{=CAPvvD>wIMqId!WzGS_uyqQ;4-hthvZblux+V)FD;JH@Eb8j3?p^~TkRYkGqB zyfQ%_H0L6B;l{3~JF;&@NxA(_XzO!ufaE?A^+lvq;BokpeGLz_T)~Wy!FN#rTFer- z7`gloTt!=crx)s5G_xnDU<=K_WETbsCU8{Sx*uvC`Aqai&CA1qq4zy$s$H9#@nNS=ue?63X>J`RV%2t!% zF4uwN%)10XZu%|LnN;tj1U=0-fbSq-76=+HI4piCjlPXIdq)}fTVB59BVQ|B$|yoT zM*&gAB&iZJz<_zrM?&kpi<+da}f{~$7yQ)5zbJrh%)e<1F;`B zzF6t@xYFT@{lk=F4OyO#xF@w+&R(%(Q$b^&t6?!K{3(I0R+_%>*XBa>QHVrQ4 zoa9xtW#VvKG4!kiU2(TuIa3#XtLFLeL3#I+g-UP1sr3+2bdcY}7gzcre?y9{SJ~qd z6IbPY9S&q(lOWNaw?y*Hf~$YLzHe&@)Q5R#5|C>(&Y^Q1P`%2GyP=BC6}jRYUNOHL zhC*e8-d|IkK$9qH-J`Z|y;&Ob9$DhSP=&r%=4VDFC9MkI`&E@5Z&xsd{&L|X)~}Fc+E^L_pzFJP&#N6vGKFhm;E-m)wNa1!<*0fb+o1 zTz-oBs7-YE5sv=7e9SzqjR`D+E_h%YMnscE0s?cVyu}9nT5g~6SjN^k7?k2>k0LMj zA{*umppq;*U-Iu}JotEzd8x|RMzeO&TmtEi!c@DdzH^)_RTQF4ANEUJGq16La#FM> zGa+PyFiMNwxEmjrYZ@TrN^ermAeN;o4ScP0&t#O53ZMb#KYfatpiN$*(f{m#LHIEY zwsXw1S=U2Jr2n=!7$#c7ihG+XF%rMIJ^w*waKTYRiwIJkZdadWCA0%GNICi5f7++Q z?Ycc>V7zpX;PyA$a5+})T&33?&hu&5Za z2&VLsDtN`*n+OG%{;4?7td-b6qJ01(hO70=HUd+ANT3!<$76M&=HURDT#;sz7IcXc z+c~z6JIV*~IAiAzwFOC^7hxVQ|CR9FncOQ@fTmnqn(Jl+VO%~<`;;Cz^`8h<+q0wQ zIpY&K>N6lg<=FBiDWT54mylac-rFz)4Zd4JS;m0b6~C$atM!>#Of*5SbYqHS^F+Yh5nf=>^8F360Evz7uP;^ z*me?h)qlV3aYex*75KLfGcWTKG-ZOs&$J>&HE)bq#|Iokm#mZCpS%57Pfq#1AMo*~2mZ+vb8N@U* zW~1jW!lny#Sm=77gEYu!+4#_q>0szZVvZ|lp(M9(eiimD{JOp*E?-lD;4ks5YBqWr z+b7`Tae0vC*MZ$+U5a5slig7s^fj<^Y=9e;3o1nmt&7R*yK+){^}h8Ox0p)1Pf-W4 z7hFLAC!eQ%d~}3ioc!>h#{Qj&?MrxyKCOyy_!cB6#d@$DGAm^|4XLUD;*Xo9-=Js7 zKIOi+MUsqx zM>u|*9R{TcK+lFT=%*EYT(+$R^Q`3fOh?nDh>kw2En5jv&289N7*n@BAGp>_)WU}} zO}VaGa#pNpmEo=h4B1~dFwJ~N8#<{M%q@h=Om4g04b*pqAc>a?_TV;m<*Fu?qJm_X zU^45Wm{_~a#!HbDW1;7CSJb!PC4v;aX-nB+el&b(cHOGVe?uG$XA`~xQzZguC(K5pSL9kQ`3Cqc@?bC^#PFSG3}z#VAUmYVz+K=7 z=Y}*^x&IfC=)I@Ort~mq$@~2!qIoRtcnz4p{6zQhEiG^u?${`e(22Q_t?SveGvNEC@KAcYbXz;@QIW6x5>pqzo zO8k;vS%Nhb>aGHx|JsDbgX`YLW0oqP28iB{vBF26Uy%U2NQ9ykYW72VLUm?>Sfs7pXMj%;`71Eli{q*J1vd{=p|FV zwj2;L7;?V+eu?n(r(E4di+!o_5LJHUiq}GbT4wZFlo7Zg3*8T%GJx{B4$l=|d_jdr zqbCR1CW_ZWv8arGpE-x#j@v>^fapj$JD!YOXeP=ti3A9So?q*9V@0XJ3Bn^p8WM!o z6F9wv^PgkpTL%f&_RQWWiL;x9t%w0nRMf;X?*Sw;K@V` z!F(;$@l807^-~uzwUR<@?O=JJDB=;ialDL*z&e_o0L&d2fHoj+*0>XEd9T5%@)Rt4WFw26oK8gLD!D^Xfx6+30kC-}>CeLIX5 z88;G2glxJe$&{fM;#b4;a2 z$mI}fbOw;EqL{ysoi?^JyWx}|TqRK|7A9ucXwn?@u@a0wB$)fpOqPI$?F>+OVvU>< zl$Mbu!G3&!0S66`vMevhgq^Op%H`(Umi<-?Wr3;_l#?>_*%{B;LYDnx zvP8rLn-f3z&RxjUEE7+Br#WazRNh&a_!nH?*I#1JMI_RJ>e0$> zOzvuiKCFD?UT#<}1;@rWEyr;%psLDDb$%9|5>^(L%^9s!VjC%MnjutT4Eed%=!9mu zDj|bXkrnPQq5LqN%G2w})!Ng}S1z9^$WWc)m(1b=3A+3JbeLY;v$Y5Tz%fykCir^R9 z*#vW(RMrZ%K0!f#qH3_3ROo#M#*1Y`9*4Kq<3}cC(GO&dlG`)#&xixgk{bbLT{=2H zU3-SVq=R!%q1Bcnp1OW)xGot+a8@Qz%T6gN)A76#(+(vX*bs6ZvI0!mIjVMi&hG*G-67shcei5O}H?dms2u*CW{WvQkidB-FyLp)KT5UIrFp~pC7I5bkYg2N-nqU&DYVqqLjidaf9e|dU~H#@dq-S` z2*(6%)qCNxkyvE>kaOSw+8@$`8WRJV$9xVk@4V#9Ebm+^JupVe4!6#SigIYM*s#&h zo=5jxJ#IR!&VNF1_)eQ+9-8!Jej)t_7_|CJ%qHEuX@P}-bX6IVJ%UF;#vSAegV}Ud zkJ|JIJo6>6Ru(@U(ZV*gffwp#PRKd?6bvA+*ESch)!q}Z*Ir=GFlyLZ1}=TqyA;n< zG&4QZ{_@XTL_8XiSK@`|{^;7%|GUeBj)J;72V59ZAX>37Tv^>cZM7YEQHqxzT>EtE z8;P2q&ZQ_gM^aKRa9II1{`GV8gU|`qL@7wymJLXB2t8dVr8iE3i!0{Gd$e{CH*y!jC)a@u5nmC4NJgNnAKjPNUKGx?FRd`+5xR z+WP_Zd`xBPwp5cmWs%G^7w$)c!du&oq9U9aq$5fJ$C)iL=iW>g!h-6TY%x!9Dtz4k z7Ru>hwkkWiINsUEE<;08k;MtZ^YO%`GkoHQq0jd&v(6=}b0LzUhMbe!s*{mo?8?Y( z5%*Q~oE~oe&28O{zm|~}w#hubBRe1X5+VyDAyoUZx^Jj{FF$%pkf zchiCp`|D8fz`h8%6rS_keDjuth6a?!JVy>j4U9*Dm~y=_Ro@5$+`04boTxB5VM4O=EMXcPUXJk=DcMWG*p3#zzL z`I*-P^-y@HA^c3HFHrV1s_ngC?dUBF0zM`IFx*D}A8LgmxI5<25XQ#APa(_Gn-J6Y zF`r-OmfK^>qU1T;rPJhzbi}NaE)4uh5j_tfPdzk3oMo6G|FTyY`Pe~TmPagKbHc9l zmpxDr7AWX9pf)W zM?rA|xNuyNgpM zS~Vj$$TcknrHYN#JEw&QRKBzU+~n>;AdxMPCatpPe(uT8@zto6_-x@+RtT=(Blm)7 z*={4X1M$|2k?-kApO}QHhi)V8kGHY?^8d*Kp#9TAHWzSw?FX(l_$9m5hRZPw$5)Rs z2cw`Cg&ihKnu|F7L-IQJ26ExAdzi%@ZYZ)XU>~&DElb|5y8t&~`mf9}mus8{ZRS4X zOeI(~w-wH`R@TVR}WUbt;yXwLOj6z|Siz1~D+Qw#F57 zCE+G=Mah9dXBUazz^e8T^}M`~rm1p-``wUbW4z>;H1ICXz<|(}x4D1hLQxHvYS-9x zI~Rsnng)`j$T!4ix=60!_uXG3kr;fC>m6#&WAwL|W>ET5PFEo+6_w`wps$cB@*iHS z0x7V^_gxwX9G4(zvTVyZh)VzD^S$yqR2gwXK+Xn_=_O&0)Zhp#mB0 zc%>`&nI++!aUDYF^C6M|hSrCi&C0jC1%1Xm)iQf-yehK=|$)H`cT z@W_=bkMw|W9kVUYY2ib=5#vg(G?R?NKg@m;373v-2R?B8_B1%MaQ}!h0~W0D8;07^ zW9P@lcBQ1K%15FXqYOdq=;aY;ruW)g=eQ-NxYa{6i}ic&Z%$SnRq!q>j=O$^Fy~^R zCBbSYXN@nYX6HpDaWR=m?TNSnfhaOv;A9aM*zj4|k0<_y*dW$5StiT+Q|g%y;38$= z-^_(v0nT9dVa{NdYqvCNKA~$~NJJa88Ia{zttUsHr+5dl3pLs^r`ppU3Sd>In^ao) z7IPEkusx|usZt}NW%TWi3{3^X$oAcCABx9z-!=lSZ2WLoexQ}hw)Q7hMgx5I{SxFO z%RakO(yZg7>rB#zPpUr4gJV-FOLE5Ub<8AKiC<}s>cajq-YC^pi{xEa#u_WJ9?%e# zJk0Kid4c8cmpuERTv~r%yb+?L-a%Vj-MW`4g>kbb9nN<=y5hThUj+sRrMfF;+c%Og z1=%@&V%37lXmF?M!|hAsAut&l`4&l&lc*cVhc9CYoz1#QEnUEvOgL3%CxY#b?2`m9 z!!Y5+f!>>DHql&30GA_C#KN)J$11yN``xI;@a7($)(y;7o-bcu47~>mce#>3 zc++>t_h&k)6e#!(C-})F$Bv;ah6YL#*Zbh0a8F*6Sc28;zTgY}=|Gp02T8~yAo%ia z3{pUt7)_7~H`7FN_Od5*Mi&SD`+89AUn+-#D2b9t8_cBs)r-Ba&o9;BMp!sLEf|w^C|c(01kphiO+6fR2t{bst5KE)O85 z+`}zu!{(|rJ4FWeCs565cBbB~)jSH97z%}28R!i+1a_&l-ccdqBNwCO1y^Kn3itf` za-)LPp=JW5jP})94?R*j+RvS!G_o{h`vv-VEVq*C zB-AR33$a2Sa)PCI zHv;w@`Gne^ycq0%E!cYSi%}+Nn0Zj@I7aw7=>~-nES&gw6)gVnEfV05eN8l>HmkXk z40ZkvQh+aE>qS!e4C>p2xhV0$8a=7nx8`uo^Q}zfvLw#M1s;vU52GM-^&I)x`amkW zkb{~}=#|j^IXxg%#>a?JuosIEF(3YO*UJD%N1z`O8{vX-sFjqahGz(&HG5_4>_g5< zm^49hW|Ry|j;Bh4>p)Lxb0x%cm2*)D;pnE%5tx?lGsOX5i*JXu*Yg;C536=#k{hba z2NuBeBMS}e3S@5~(iOw^t$O~B#_p*8fZZjMlTyfuyAbk*p~c(x5tM`K@u2P@N6CPl zO*{}gJir$jwK`zg1&13XJ?1{Y(^tslfiULlrTsB|Dpx%F^GMC9Lpj7y$_EvAI1GeH zo);yS64{h1U$k=09~zLRvbCh*tkz0|F(RTX|E)-&F@_pSRx<35zHu9N7`k3DgQeO4 zxgtMW+i2V*AZc-=%lq`f#&D#cXsGOPkpunZT-ewU41=?D$jPgVL zW8jv#>{#YansDyP&oUNLRZ)~c6t&h+MBWf*Fln{#%2%FPLJ0$6!0P&dlb%S z!=83YE4+TDLB2WDi-PmWZuzb+^mZCBWDTOA!I7{hpvDR1BgfuPS1qgqVKd;j7Kv z_uLlQzwu^uR#f^CH9#jTUmbyGu}o1BafZribd(D_pK+%YYLn#&r^+-sB4nKyxkI%O zh)?^&?sqf=h3Xd)_!T5DG>i~3ZYKD(GY~}w2x0U#U#+t*mwq6H8IH_@$)FVI|LZ~W z{g$0~Bqz#HaxBFyxCnBj(gB?3+Jh$kfB_7o6>56@u-{Z1p6xRf1(*I>%XZx@|9vR3 zVkofT!1qt_?;NLcc4aiPn@}*#FRa@mtZbTB5ZKx0WMc#XE3sQnFN+k)qlwJIre@cBODG7^U#sd?^W5KNW0CTHEgf zxj6g@k~%Eho0{n+S{m5L!U=Jrhz^>4ZfQ?N#Y60GJmvZ!0TJV)U@k3ou+k!)ON+!p zNUGh3l5bM^mvN#V%5K3DEzxUg(s)lmmBD&45-f2J+f-eUql0z9mRo{g9=8Ecc?H(v zg5km95H`U+>ulQ{l=STnMJQGb1|{a5h*`Fmbb+(u;EX^1x!$xlt318VPNVP7bHOva z*&=PbOfl}s01udOF{~b9X))Jc}?eeXEyR zU48!EcPKf=h>EAGE2`!TQ?;^ek(U&Wd6_)3Dg>TjJ>rk~l>GQK5Pe0qv-Y78aEq8; z(+EPs<0g!Ig2lZtHYy)ibbbj)?hW&#G?Z%cJSUa{lzQE??Z$mQ!6PfPGu=@jwu?F! z1iQ3^B0oAm738h_IJ)pL-A(<}PA8R3}GC+g)DK}v^ zVeDdlnQOBeak`J70-{K+d068k<;hX7y)kNC(}(3=6+2qlG7^w5ANEX)?;Q3h-1ruL zus7d1+O*!9Ss6-`-(J!}Y^%%L) z-|Pl6VKKfZPqSG4i;@J(v>gtS7yCE!jaSCabk!f}?l%e7D0jKfVq)b1k0PAMYrf$( zPBv47^IVJrTu2^e?q9GgLMM(r+76cVWN;K&Djqu;t#~W4Bv=33{cW+GiFyUgWqhJv zePsy%G1P8IinW#uqah(AuQ4$o1g+;6%XRBF(49by-Ov;WF(kx z^xU$md|Cdb$|wzV<(&Aft-!E*^?A1j5%M!w216}`UP!b!O4i_oBH++Kq%aI@W&PQ% z`He#8WQ9uvU>pvIanMyl?0YbR@8;M|g+9x~&PUintR$M@XWzE%91vEi6|INOw=L&C z(qN3NRe@!nml?3y+!?*d2Z7+L*S2Jo z*-SUS0BHP^m!%p^I_@G}aNLWurkAD$1(C$;d*Wpb23;xEPNcC+5LIPxy2nnBG}L-x z&6h^b@H$5c3)-za^{i1U*+M(|(Ut(iFqIAzk`gT-d;W4QF+UvY<3-Elywk`F^%Fp)}HbxoF z0yTl(T{*=8Qb=PdXE~n7)SQ&(P2j8Iy_z8{wh7vcLke|4Ai`WP;XzIh7tZ;0StoOg z6WJj#HrW-Y_I*N{B}E0S#Ebu?NRn*@6TF3A z*oglTRAfkQzaE|01i;mV*{lMwm%&pbhbY~`NQppXdmIl>CkoFa`}Vtlz*`j?N;;!U z$q>rj$~A$-N3^SmTA|VS64PyBwAlt+26ppd;XqCt+P+uQf$}LKxbwzw&?K%DHhjfU zxVZww7497<#iRiGIleh~o>{?w$3VQhpQbyEcXMDjgwP4%ni-J7QbdPm3bxX5_HOi+ zzSlHRoL0RKWpL(e2axnVbH~g_IqkBeeIz*eS?)V>ECCxGk$8m3dtmdInbN?V-&C`4h5G7{%NYS~(`y=oJNr5%$j)$`Dm|2W6CQY&t`;+Zn!VV{ zd>fq;{gX2F|z>n8(pNAtJl zF0)DlTv6nEB?ZA|6ex#Z9$~+U$LT{xK#6D<2aOj$4P!&eD$s?gq=2y6OXm6Gk{>cXFeqGG zUS0uHUJaa)?c~7PsMAnD9G(uSg^+9=DP@TQ3MS7FSMam83|g3S{`0mby*lVv+Lm(sb0=xMuBBx_ko5zK3Z`{M}EFUlthYVplP zb3#>yp^*S3hNx8QQ;~@D?be6SnijStUD=ch>PYdXT>an5jjz}2!PC)$!E!G%EguF_ zcE4q@?SVdw^o_86d{H1~4m55QHK=;1g@TE)awPRIsEYYVj9#CUk@E8i|)xxF=jC^hML#h^XF#k&@=bFa&P6E;I5C#vvX!HV`S3qaa z(ho!EIwH(Aik7HB0Oh2~F>NFiG0Yf9FN5`F1+HP>cEd3(1op3k92QhZx6>cv8hOBN zGV*bc;#+JWv56RtTxtel>Zp~eA&)>h2MoVa;t0a0{pQVJRrAm^(C&gMWa z}M??zyn-fAqyaR6KS-g!F0|R%ov3K(IoksUVvDO+y&N))oE`3G09eJAQH8MH| z0f62v4ZB=V&z^x6Hv|*-ix6Anp`!|!?U>nOauhvZA&^e<$&8$!O3LI0CqlI{e|Lwo zR(BCL=e(rLZShgN5t{~P)Ut8QFJQm6FSsPkORYtb^wVokP>}3;kpvul;Y@mz;xwWc zGWDCti98F+AsWAZ+-rfo5T(L_*&c3O@K{b6;uAgWOGo=abNj#}z<>w=JV+y{lMlJx z#}Q3(mvo~>+#@$xa`E&h2uD{Rv*P57_m1PTIV&(!hp_pRB@}3FM@u-%1t|?!=muup% zaxj~~u31qvdMI&nyw0|gP0=`au^NlZg6_pZgMoat5*m|XbP_c;mz<>Xp4SVj*F*oF zf_(4{E`HQ9daRt^_V>Sj)-!VR%qYbubZz1DKe5v;vKqx9%@oY;dNSd^TEnjVMMoU= z#(aD$Q~k)Gm1YbR1h2~}_hH=R$crC5YpoLkrk2OOVSg3w*Bfw|UPJLo@lJl>OiV?t z)t#?<53;bry0r>yY}r1aagx`iamXNa)!YMS5{*MmFm#D3)&}+_Q{)kYGBSq#x+}-0 zNPW$qq=^~wYX^`Ec?4{{?mq`hKKv=Y)eG))Q0KsF=pqRbljru)Pi%i>HG`kA{JWi5 zl5vn1G@1(|qBQ#VyzpiQ4@~^PP=x1=XR8(kT+VZL^8#y|R3kK}faDbUHf++fur@`J z8)o``Y`PYj*KXXu_LnD)zsVue;3!TFM-Zuv2&P^-xMr&t13PLRURYqff|f;0r{7LDu=@H8cVE56&dV8hRf*udoTo)eSD!A zVK!PVN9OLTF&+&L+TZ$h+BpsFc4B@(-{i+z{1d`2B23C;*%qpZ305l zK$u`4FJTgHULd27dmRf9lafeYMbr+*v@g#b)0g~VPl{LD3zZ}s^?Y7GONLmw69@T+F|!i_A%4u{11DD2*?)EwTT=_32Yyra`pCaczD2h2 z+%H!+ggvw}q^oex@!DL+w;FF}6=8@{lohTVWT%UmUM}A*Riqbrmbnm!-h2T-KbD!` zmiH(#Z%!6G$mN2$M6ivAlf_Jd+}9#`wXG4IPy&H!ay(hSp}zSlb_6K4_D5dDx_;{` zXQvW01WTgOj2Nu^x0t!2z0R>PPnMR&(gMr6)+huXHNPJw42+Kst@gNJJhbnsjU59x z9ZN2)YVNchcf)mBPjijgEbbu=@5e8(C1C;V{qzu&aAQ>75B6$R7JrPMH)G&_26hO3 zA^AGF<7z+(ps!%{zAc{T)P^pXLjWOKfY^CRh~-y;F_pa|xTW%<6ehwKwJn)X%YWgR z5*qiNR$Y(@28ohjdFZ)Qup1TmCq{~nGaySExF7cHfmxf*J=1z1Ks(qFqk3?eBC-GF zPNG26nd`cY5mZIZr=hFBL3>m>s>0GBZe8d5&$k~67&e!<@zZ# zD8TZ?A{Z!lO7jTC4h3=-m8dG|NVqGWW-ps4g+`g9;`fIow12HBKZB9wyjO_|P{;&< zS}xkWhps;gYMj4iVER64eV!eP1tcd@L(dKYi{s5^6s>(9;S@vltOgJ(%kz0oM2!Bkm{mLj`-A1W* z+wg!kI^0JNH0#v+u;1{aAIgN>`|+-jM~Eik;{_wPtTqSa!4p`fPEm~Q&5z2aFiu4J zBa2T8=$?8QjK;3K>Ha?VT>G64-r;+T~SwfFL5PlaQAeHmK(nG50@tLZ73sjt+YQ; z>X-OyBT=!Mc$BjT+AKoqth{kgH`h$>zDzc-)-o0su|~G8v+BAlb~xJlvb@a;M2h1( zE3ld!l3*Oi#XxtISr6V|5SnOxcMT`xgDHx29gDgSfgGz0cdeZi;a-F)A~-@;lkC~M zVM90S?LU!3Opl?IvJJ?IioTDJ)?z&eyc(mA>0+PUgsicCAdLl`ra+tJU?A!&zuM_H{^4|3U8 z#ahb*Fc`&DMN~%&g5S5X=I$P=I-&o0nN|q50uG#gKK?Q%ESfl2tFZ8~Zu>ezHv$vs z_tAt=9znWziYOoOWlVE-=vKpya8F6S8;kB26_It++AM#vP`ZKw1XY;I}+IIILYFAYJ;9HKAOMMwMMBJw+3xTn4&3H@0LR( z%_7ygi1(e+t|r1UheUGuP!;tCjA5MHFvZH%;H)Axr!znxZ(GGL2g}732A}dpo3jZU zqQnSF3@`vZJ$3Ll2XpPn3fm8v$#8s*j-Ms!oJ=h*Jh{U#(BPV)##4~=t?BwmR?c>O zH?BT>OYogl2>E3B`4q&%%>eU*9RjEz_x1v+3U;@So5V0oK#YfhlmM1_J4Uy~zr4JhDHOckD(uS35u9$Y zu7_&Z{LVD(@+*)U7(d>_h-r~l=Ty0@&hKt_6&07aW~}6Yd8Xl_^do*ZF~p2M_3$ulDxMlv`Slo0 zpgjs(DhHmmdk@9fD`yf=w2TI zhOUg7A3e;~u|{&9DrR1xV&N>%hAlXq2ocuJj+1XGOs&rq;$3E8X3~P=W~}2=yUFe3 z%BBoW<_9f3vfo+9^~JMinb~ll&F=fU;Bf(K1-ZJk6-RV_J>Mq_KC+ti{>^ybSKYAm zAbc5XXEZ5j;sCel3mPQ?baO7+D7%cINR8p=? zW9SghOc842IRc~gZ2O&d^#R@UD4!?jRheUvG$P-A+)MqAaEiO1vPO^+U(#kZcePb= z+sgG8eH1hr@j@P6SU8#m)iw|%DIK)`sxP|g?$pyLUnoc8WQJV;{B#4})n>E(S6gox z6<5%0i*^W3Bf%j!1b26L2=3mvyKC^^?iSpF2M_Kpjcags_t)P&_l*0-8K-{q9{rlS;&X^ z#MtHB{J)+}2?s{Z_r<+{es6{D{7PcMdpFn^xp0CGqnp_BkBpw7w2mM1z63n0#+P2M zj6*X46Nn=pWSFoyXB)Fo~Xz>3q3WtlA6&9WmyILFXf}44p z{rKrS#YkMwdYITzbggBtfrjU^Xz~a#?!lhS&YItO^C}tW>OCGL z*1iB&e8kpEjV^GZ`>?S^KF#))2pb;;Cpb#Te3x^=MF=oiGBhw z%d$yWvI9GKf<*V9Be_k`LkGlzdwwnA_%CH8@-Ro?K=(OLFTk|WCm5Hpas|_+wS^T- z;lYWZL6ct2eu9V0pBaXXY%WN!n=Lx-E{HTBSyjP|#lk&zn@z>p!O*HgD?|zH;1`F+ z??ANvS|f!Sat|NxOlRW1IB-8|-HCNI#lt(c5o163Q}Is_r75H0x=9#Me_tX5zu}2> zgOhi^;-pI7;xESAwUwl_IVXS&Kx18oIS;1|ho;?DxktjH04NK=1`3l273{AX`v*V{ z1t)Jl005KHAfqMuBXO;wY_>h*Hj}4ZykvPXHm^j z_HMN*xr{6?^*A|I9Y_(0NsP;G2lo4EJ95pt{fHbBiW*l)3_39Ia^j~etO)ZdVJMUA z_vg928(gydA@i<h*y)w~z(INq9G*;GcSK8%m^-x`_d@i>U zb48`~>F-X9Kr7R7$+y?-UjefR=^7S!0-AO@LC_M<$HfS(qEZ3{KS-z4>oLGG5U+`iZHal@U%dT!&#PHFo=kh&rNWKmg$o00>j$v35gB6TDWzA@jGO+H z*!e65e)^g@8&nW}u?w$FAJM=Bce$A(CD6g|Z?ff;LdLCqahna{*~O`kyAy{rM$l95=wU zS~peAfMmA93HU))L=2yqasU*W{*E_n1doW)+y`(cv}Q`_%j~hEjK_6Fc*^(`=P}FX z)L{k<0H9G+V832Ed1w~eZ$ZhK=z5~#w6jE2|NS`$@{yFZ7>+58FRs?=P8fK~t{(Qn zi)9Ajemc{y3kU*p3m?-uUcPcfe^2;fbX+lj$tz%8aEtY$@E5;;ul-jxg~{XrRUSRs zsLyQajw&=ilyGYet*0xl8*W{Yz#2>tOP~}VUqRxr#!7%qX1rCt3+Z5iK;n}s4L7fD z{)ObPn^xaqz2A%Q9M)6Ahd?JH=9B^kI$3Q_F1I~neXCEJ{jhH+iXIIe`RI4ir2im9WTl(@BWbZ7>(LkT1C92h!OSpG6PDShdre^E&p;zYDv_Ywz68Gu595$XBE{;_ z&Qic*V3NfkipF;q!eQVrR&6#}v?YE`OQzZ_;tIHQA0$^?uv;foz;1Ld8=aD+WdexQ zz71ytBHgK)!vKEFC1YC50p}Wdy(bbDYw!*6yrfE$lx~L!1^77K>_4CZKW?RR)h2XT zYE1%8$%ny7d*!g{P{8vc3U7q2`0vz*B5B2xwtfC-d?& zK=1o7EE4>(_Y;TDu`KXG%s{&LyF8!DRbvhq+Njn;i%o&MN@DJn%$QvH)2F#waWR05&g;y+&F;ef9k)+%D@Q3NBc! zv%B`);4HE+CtT5$Kmeo3H-01OOl8=@%7BMBOZceG1aT{m?_l$CmovD&^ z;oZ+-WGCdx>ijpYG^5@@cmDY*V5Qj~(8nAG%GmVRNl$cn@3T`5%lh`^8}?oqlFRhS zNN2-5p_IbVa}RnUGz@(8*c^m`)t90brnj{(u~welPm3f5}mh^>XRk_ zXg7lf5UGu?TWYHVA5)U0Tb5_I(zYjNH(*^eA-J?;Uv7ig!o*v$l>-L}_t%=d$YaA0 zbD#W3e$3luZZjJ?B~rTW^=`QgNzmZ=+RZx3wKo>Kv=j$B#*sj$9yX$PNER$AX-DVZ zsQc#Rzubo60h#3JfiRSx?WbH3;H#glg4(Dxxu{SJx~oaEAU`e3|2ErGeA61{HBb?h zea}Gr$L_hN#JCFdCUEfHLGxQdGO^X3M{3yK_kq|;=&7->wZUoVeThBcAK=%xtg0#H z(6_JSRB^Xwt1K&8U-^`Kob(zki;EonCrYMF*p&CpFV(NqcwvG_;6;StgV6f9_J2-| zWV^O!ujlOKFzl=o-Y-bvD|Ty?EnU&Z(k4_%8x7IDDGX`J1vg$7-Suh%`hJ>;U`pKh zUw;jutM(2!as3vK=DD)WmsQL-Jd1gtGns?=t+Z}?SBsjR#X1kyEn3%(tWmT~=5W2e z(BmUEB41=1q>MS?e|$h+TzwpDryPZ+l4PJCFJm%8ir8p&p{)BdXYJ!_F8h3Jw%#rT zt})nj+ErVOa8d5r2LKL7kz(Zb?}#_#K=pW6$C=;rh8X$#i*Z>O8ToE^-$)<0!$5Ky z%PP%oo0bP|gs%d8B+!$sepu0PHU@9O?t9*M+gJ)WMjuaM`C+NUrjTHt;Y(fd_RP89 z=B*$dAdoKLVf^4>qc^!L*mFW|r*zN73JE&k z*K?t(m9A1Wyn@WT%({$B zjG`o=3Z>IWn3R6LM#tX-*4N1JnP)Ed4H>1}RmeCo`rDq?3h8jH??ldf{Yhhm?iZ1q&n1!ANoNT~#ngj4EY(=52;e z+TH19k2=L=qWpwU95Pq4Vp^7XO{1H9JM=e2#mSC?1-7oI^2+9hLrta_K5C5^+uWL%B<)_ww{F)ojyfLt(SmB<;$er zPuarJDb{f&_q)44zL(~Mg_}bpvfy)at}(9Mid~(zS7Y4%6~U*6>1B+gIR1=UBd?w6 zV6OA|DIk?X0pmD2^&Wl1((?M2rH!lWA6{OaH}|iq*i7st@G(|UCKV(j%xa6w=1uoG zt<1rmQU}fV_WquiKv;GW<==xIqqWZR zr#CLr!|i(|>PU0{7pYV69SDk!IELCT64$Os=m8Z_bK2wK5&z+Zqi-;rfFYI6HIHOF zf&{@BeG6No7@vnw%hP_(RsD7Q)mHs72h*!eHJyr$n>NltyuJxJ${0Un*Y=VS5=v*y zc@_<B% z;(e&*(C6bs&E@{doDLrx!Hf$Zi~v3az|V5)p^5w?#}=-1*_5Fwe@1!-fUS^V!5E@H{@M~#rbw+`7okrh{0hHRpE^hEfrIf9lpq`jrqMo96{iEYNC`Foa|@+qFsU^zbXL)fv!ZaF~Wj zmo~BVTNL_^6+yL6|2`g`OI&nYxLt_6>A`EE)~X&8lsO+*6O+ax`%BWpZSJP zj}e)eMXWXLf{5CRu>P2^o7is^NzgPNl)tHJ1ew`@XrP|w{!^)Po@S<@%5B5ug6#&L z&8FIub~zo6o83o9o@o$IZ=2$S0-jGor+0)fp5{}jA?3JXCUd}Y(Ug$VD!yM_#5Yx1*ld~sIfs&KeoEDls(>s)F!EfvZ=_Kqrq9Ausd++J9B4@9B;j)^F>aKdqHbfGojFggL=1<(RW)0z)?Z3ZQ z!)fq+4~bL42g9yxIhoyU*F-~4Y?54EO|lRGI1aWV%^W;C$c z^$NzUz(oVJ3>8x7d!9i*lv0PaGyM7|0ivm&>ujvNH!E9MDZ=^x0L<&*UG#O+EoEwD z8W4lSdHi6dVQ(aBCSXzFqo5wTxXR61UP3`tS5#|pF?r8$5v9tub1hr6{M5-ZBrO%! zSd8Iox!D@HQquG`Wa2*Fl3=%jr3Ljk+-_s#-HfK`|Wj%UQ>gy7+(l#L%FXx!1-a zhq7oC%RX!ait-b1|L`<#&b~dBG7xtn^)Zi|ngv|owP_i=9OVwr^Q#+_SRJh;9J|C^ zbSUgOMmGzQOfVkuJD0rdwvMHAn^Iu!S;}4yw(~*aoOIuZLV&1)kh3>$aRdfce!aFy z$G%pvm}+7r9Rv5>*o7hxS#NI0DZ3ZL)c?h*M1H>I=GTyUS}E0-O5(PPyjY3_Jr!yU z=X~+Thn})O)Iq3I$15Zse?Ii#+7t$sRQ&xZ@WyLQv6VL0#Loi zQHkJ3-p@Hqz^6CMf7=21!aqj0i`E{rcB((uxu8OMNk+1QhZ9Cb{Xcd?xDIdNsKi9_ zHcuR%ht@Y(!ac^l=8x>38KMSw)$cannHOdOBJs=&bRR=g9(fhV{LTV84dx2DRwI8a z(sI9cI!-#SzLh`luQgprul9`TBFlc42}ND=e`jI>5(r^d!vXuyvFYV>d^D*;TEnGw zmC7tu#h@1zctO}TBQ7*a9n=lDK|JYxWPK}1_(xp%jn_-bir6(#qUH@mgDruXk8Qoy_2 zFy9w#&+197%ZANNCiW&`UIf4oRx17fgqJMd?ha?m?VpigW4@kq*tV?dX@i|^ZI|*# zI{mO>5Y^tdaJJT#tk2fc-n||N7JVnjKG8?zd0j6l66O6d#LjUd;97rxXnWI8NMeNR zamXvs;4cBPd_hv6k`X#GtQaW)Dy-TQ&tz`(Rz(sdQiNy{2|N^y+WM&5iuzZ6^80h} zJbBe(?F?3^2p1!x;_#U5%A@9WYYcDxcpLqPvPCz|LdDO5qvWvuulz%uD$T`%j--+OZT68-6Cvxh8601!t+7vX< z=`b*1^^K=xU9BTTxQ>V{;6p_|imD1N{xmEuEMstn@rOd#4C%x`?qv{RZtiG7I z9hzO%B!%1rUdQ9Ir^EOB2CAR2%=+?(u{)7oW2RKQ zph)47LTi=KP(!Dc(C%LJ`~*nzaNvnM#RzsiM;Q8QfPe^r4^;y_gU4~ClnX!Gj$6ET zr6iIWn*rVw;T!5-&FaY zRJwF0XU%}Pz45E1@BwD|>$ggS|V^u zF>b_lCV0$lh%&uXxea#EhWOAbpPiInV-d{SGBy`;H649=>R`8m#7mi5r2X{N@spK1 ztFiEl0)Jxopx(Lhzoh~5hU&yt$}w`IUZVR)bQ0aOn_aw1YhXhx0oWPt)BaxDl6bBa zHs-l$)^%a|om%m>{$Gn+EAu!f&1Fap;6;t>fW78mDpaX5T#1OW1?dK7K9oEo#86w7 zJVL6_FZ}|R?pZ!CC4V|y8ta0{0RS~@mm?R&i=|pz_|TtMnLo11FiI`p^mq0#!U4c2 zJ>_nvY`mK6kAvn4PWzbKc1WUX_OJ0AJ z>ZVaf%Cw{jCjuAP zWNLDY$s49T{~JFil>&DKk)8IMyVG?dd(?g;*??0xr`7?EEDxRuY}%;u(J7UKVz>^X zn?QYm7k5g=YH6>3t9}-Y>}P@m^BKrUa!GX9908ZHPs5$bFGM&NyY57MtA4N76`ZOR z!&(i{4_?*=FG-u6Kmb6lTp{35CX>3_YwC-Srs3n+uu9BzGKIFc_2P#9XyWy`s=D8S zb%AI&gm^(Pd2e8PO{NwK1Fg(Ae_dEtZ*;PmixxAU9s%FlejzTIk!t@B9d)YT0TKx> zjW5+0A9~FV^LRf$KB73yqF`HeJ?LXj0{cJSIzo;)(a)vs+l)o>dDxvjpY9-3!a$3- z2T3+tcbFelDp#YSVT-n?NE5Hn=aOzeA0f6p?%n3Npf6}vm+&nS zEBz959AlcO9PAI-RS|O}X!zd~a!ST!%_Bnm!tXOV*UYLbSQgnQYl(zDlR)>d(~1_7 zsg1g-h#rrIUaN_noiHKi3CV>7PY>@W|u8z-y#qRoS(Y1V}NI#%U`MyZzznbA=V7$VZX@)+LiBcC%+Xxb`n7 zo#36K9*F(^u+mt|yt>3VgNrk~zM7rYVBmpJk!!;UZ*-Vm=emT~w#^?A=hbjkS_(%901<*7IA30x{MjjRy!&_)!ev7yP zIggJ;%`1``cV?djsLE6^UDf${pt~9)MgG%bi>blpyZ!`mXRv{@k`qB`RI!(k_r?jz zob8H?DYYUS9`@u_97?nQ z+p&F~kvX5GSIuf@kMz7wZyp8FGjK8bERS{%sJ zk`?zFZrTVf2dLof2c^z0H*6+1ARp0xf%~;nshBqJ0>2)m*rX$+I%iYi}9UQjC=gP;&1qM zcx<{Cq}8P$Al#(V955j~QN1v-U+$Oz8KX!snIHKH`oe4&r5jur++tFn7lzFoQnj>h zr_TiP9AXG2l`tpXW^UM>UY}xC;g@xCbF=GxH!Q{6`uJ+X`0W7z2ph(uC}2`;Wxeim z>nvbeV!GMccGbbv=3$4xN8#Hc!{HI(yszK^7iov)1T-Nyfr+}diQ|i@_e?2>|Kb%K#@E*m}XI!-}cs}6dm_i{{wTKspZX$ z){gM%NnCmLNg$w8i{zh2D}*@hKP*$K1Vu_D*)N8;4cjzw^Je0avB(#a1F^*|$k=tL znPqmIoszjd@CTGIhnV5R2COprzS}LN#%}G$*7nzEHIa@CBexFmHapa3cm7^9fhW|u zrLTQC08!D77Mb9d=+x4`KS7Mi zSVXa<)TXenc_b?v4QkcQy$8E2xZ!RLZb(|i+IZhGg@zh8jRs<>f zf1^e0L{l6_VOG&~1`Qn^-5cvTJlxxW?tdq2MH+^T@6%s)CCo&FM`l*J7Pz<}%*@*c(IJc4j3nM=$Ct}qsdwceWi007g?CaAzVq?%XCf3;G%KN;jF#=VXY$nDl+ z_)uxk0pFWbM)HF{)dm!y3PLn5z>|C>o?jD2fBXl zUzKS=&TUtd;fKcBLkZyiYm_VH3JMtpg;|BRob#SfUJ9LK)^4|`JkM}L&#;uX_mDi? ztt;1J=Q}IGjT3el$XCpHzd6_ZXK^3SBub8;HIGLku4@FP!XA>m2Y;D?+Km6D=gXEV z1dx_Um=z+=LpTA#SfO5KAjk!Haz0zr+VNnUQrxL-JdJ?q6x1K`!^Zb_l~qwmVqTfa zV5K%Ik1l22tv8{7pKl`~DvZ=uYg@MispHDGLUIy#M0u-~NVm~h2%S6mkXv;RT&>o+ zZBbhG@Z^%C#YvxqmXSn^Iy+_KV<690k~W`n-q|C+<0x!QA#Xg;e}j~?Kj3q%u_>u; zdfnQZ{vnSU(=aWeWlQ?P>(*=i$q_KbLeS?(0O#cUx1sT=&%>B5vaIrN-n)CzBBv4< zlK5*Qk;_PMJ(Y?h*Yr1%!{x9W$ZXkus*c@17sz|E?NfGuErfQ))N!=ssg% zqy;nOuHNQx@iqCQ&6jgmhK%D=axd;!tR zC;WO$;A?O4n`?A&Ifac)sFd$cA!ZE3w1&hWQDY4D&##W2N1?sHAe@zrERwAo&I;ED z1d1y!6Ch@Zf$FRXP-W_4}yv}>qB}9 z7P_9&>K00daa^xlv49v983Z|1swhO_P+rQ~*8*`M>Xo*u?>6&CG|fli%Ir_)QeGwF zEpy2|;31!T+Xk-r&;y{jAjIVluAYBAX}Hx`NalBUfRGZ?0iF)gT0iLhZ<1CR+7WOn zZuuTK{$3R{bnrA8X>Y!?_MM+}QPfgmnxE|N!epDA<-M+QaUy~(;d4HL@!(@%!FVEZ zK99XT>}YmseIS|@UHjmSwWaUlZ;YDLLPu^be@zr>`i@+p6}>xXu#hmW8#1{%*IVC` z93Og^>0f-N92-j@snoFcE^ZoSKB_z%rn8mzk?s+4NE~%t(CVAx-_jcMQ(xV*_#3vV zDEwTzh3-XXjyM7fFljH1dVf3(Yy4_uNDsSGy7YYM+J9<;P&o#!kGWTN2qz`(!Bu{_ z4I;s4MgJ_i#7K44OMO@u7zdp-LE3V~HNW0%`|8l-E=-`Ki#^U~kv zrPsaChCbmY;3N+t%9?o%2p&8N+eK+rZV$+{yW1YGb!HrjBtT_MCu1A3rjaJ-Di9KJ zJ5k@`u>jdNu6`Bxj8Uflqocx-Yf}DfA=Q4*KK{gIq%R2ciW#nC3-95JM_dV&er-3%L?I|PTB`HlL4osv2i;MzsK#IvyZ&Uu zlV^5C@AQ3a@z9~er=?ZD*~osi@=5#z~?scKeX9;$|F(*GeDI9EFH(^L&n?)?XE6y>kNGKb&qT98HhejOmgo zha8DT;xZ~^y}wYi`A5~i$*Rl_!ZF-$^vp~W`FIHR{@UB@SXkcBx;Z8;3^OVCBFgUF z8)U|f?~HoeKH(SWB(;=SB=GFlNmF<&q)Vo54vE0-``_Bne+wIP_QPwwyK=-8SdKWn zvkD$tLDY~2{qO*bu6}lfvum^I$?q_6I%0=gsu&wzHFQudeWd4g;|KWMBO0P0{zK`T zER+fpXt=5{gKGW-3p0yCb92?B3R$i^kPwZNSOBeK+Y_Nl6e~L&Ucs~WpJ_`7d!Q1B zgG_G$7Fwu%wG{!kVP1S5!m};Ihri!30|%Pvo|KQfz|BiY?^jEvzlI=ufndJFiXF4EFJsCyx!nVs)15FkgaBncYMx zM)>#;N^Od@m1Hahondw=i=YwS*}28F7rkJ^)q23vF{8LPZErj0`kk~RI+ithyWk7A zwN-{RB%kL#pmSES3IH~1(}NK_H~&pcFaUceL6cM*FSeu zL+-`*BS}p~i{CK=%+Xb9r9$_9d1F*8c!$2Z4VB>K4gQ6VT}y}jtI+FSR&8ZGQ41Yi z-Y{L>!DrZXU!t6$e5WN>#_-7i zbiv7kUb2jlFgK}|8f&t92oQ?nY2993AyYcbQqX_c*Ock%3N8!;!4_rM8b70H-f)h6 zrZm7y^00YB|88*kQG$m`Tw2xKZ$aqiq?OFd$TOBCfRNYsUsDziHp&w;E~wf=3}V%w z_Ayp|LCch4JhlZ5_Ra^%p{6+F81yjEIJcLcLg3yh0_5^gnm4X|8V0NN9QItx$5)xL zjGf%TcP%FB*FIN7s08&@=Hf0Zc zU@ryQ&!0Al$MZUVZ`{e)iR_d`QjjEc0L6={o6b#`V2Bi!?WJ7^G)T2zw<=dQj%Slr z=Naw7^vcef`c1Fym73{OOoiTJ6 zl}N0LLJzLC6DGKn6EyU%Pe|$?>$W<2=Zz@roiEmEJ5tJXwOfLHRUY&9PiqUyNgfBs z|60yo$GQfClj>TxxO1H^3fYV6nr2b%b3XYP$MSUSF=>r;&h32*e8;w#r^zSP{-wD8 zRpoJo!p3jsDb9WTQl>z-N>-oupg)fIGx;krux}T}rPgTrqV@&C&fX;sw-wYbxd#4Z zL=(jvg@8*wR`E5m>of6^xL1yBtZ}2!8#z;nz3W$FsV=YDY96WM4(>4&7qo{`Av4>2lbzxWBddKxr3WS zz3N5#hh@9TYLt(|_`<^ZT8S|L{&B#nt2! zc(FU8CKc1kwDObU>ElRDLW(Wosv2ZcHpAZ687mAv^$Ruda82SoVE&vQNX1%(G^On9 z-Rbhi+mptW(Z^i}C#D1jHsjRuB$zu={o^f8oO(2Q#I<>ik}mfvZUe{1gW<+je)%0Y zG|Ps&kW>b@qp#2mvM~b^m9j14YVF+W*^hB}lKc(!V#|!=fHG-Y zoE2JF;9r0yjh5#9WFO?clfRoOjG6FVA7no=zE>?fIB02=zFZxuLKcDC|l zwKzEeIiqsQEh4;grR{XZ9vELMKF$pzMrI~k6q{?G=k{y=A|M(avo~Nep5{8>^>3eT z@l6YLT|F)$h;;74IT(O@`yv)7Jbi!)LrF#TcQl(_BCPy)z%a(6X+YMBI;?o(fqOGq z(9_j$^F4@Q1h9=&D)1=oyWE>95Poys-f^E7@D1DF!~!Y|`2lZXGv>R( z!rKWGBqL$?0RLqYtz_ov-!3o%l9Qh~)PGwK8Rg6os-o7V9vLq8+rhHT91>S{oxCt0 zv_46rD4%#~)>b6WV8sgqL43%X;UcHZ-;+3+KFi%~HtqdvIb=bsXhjRjdi*68;8I#WC4R7!yLoljJ+L7D zvQ+@m$1RvOefoA?z}m(=X+e0pe3Mbw!BcS%_O-P;UKA&?_fsibazNM!mLrRSPoVb^ z{!RW=Ath1W_?psHl+(%B&`Vo(j-64oC_W>>&*&O;>?93v`$tLE)t+go9Whzz4b2DZsqV6e6=M=<+?n%yra@8!L0| zJ|{}^N43u3J1yJ-e4VBSz9V`*KBe?@-~}al)A82BpURvC%ozD}}j zHq&d6nz%t7e2dzxM|O0c*qz?w=mNv{a?q;1v0G|Q8VgnJ>B{NP3cf}t;zNH;Il#(7Qz-B%fYK(aRDvg> zBopJ}Z>>0Tc0^#d_q)~jK@KC`8AJ0()IsQ9qOtP6V5+!Zp8|?L#C9o}i=^3{`4>dS zil2^M@4CVG+4^>Dp20XnuDm9)GIXrpx33%3ILGF}d#6XY5|2|jXTZ>2Rhw38h8QYg zTp&NDXs`$YGALhZ`b6Y&V0Vkl>>enQ~b%6$-+w6Bxcz@5Op3n8p0&QmR$) z(MzINGEBsxzuYUd`7d6oY@ThACk$kT>I*6EC2DT<2)j~fzt$*`p1r)_GG``_ybf*S z@OZLaxM33H+RHXe)yw=+gUo%pRpVaGMEB474g#RYjd9*z9|RR^-Nz1qf|{BJ$=s#C zTvmt9bUDM!7HDoVs;e!b^66`Ek)a{Lpx-+sfrf@&!Le5$*sq-yC-@-uwY<1aOw(ZP z^*u|Vy;*;ATJhFT;>dSz?OS#3QufjsJHn@)k(aqCO^x#y2+1-ooP zNj{f8#Fy6K&*7y@&bt+`7GXT6^ayFH*|`kTtas;|M?)FIe~E=(a$^*DFQhDQh&+p| zDr}8qVS2PIk4LPyky++*mRHb5e!#o%?%jqnVqUoo{s3tT+@tGNc=>Nnqf(Pjqr0gN?&;Mt%V*NYN8sMC4x zx3W80JqheSgzgBGviow!1~Wr#FMYR4CJ7CKh0?^DxjdR5v1ua=1M%A>HrO0X#5vYq zPJzFXh+bj2q$%*8?UTQpG9YtZLx!#Ba|&m0Vg#|an=Nsn1=PK!`GOa2ammoQVKVjC z#oABE7w;xvTXw11S9c>2{|uo^kqLyjgAduhd5WX4%;4gZMFiNo?zfQzQIpbQmCTYL zVwI?nB4VM!;3aY+W<}Mu!Uv0()jOgQRP)Q&rm_a70MKMl@lSD}V|QH3<=buDApG(a zef)a=mu*V)rZTo72*LD`vDxV0AMm%qZGSKRk5m`&b&C$y8;-CTm*uA)R$+f?LnCgV z%&D;=3rhHijei#BcagB|a!%=*6NuqFZwE;zJ>{Z-rU zu6iD|UPRtxG4lO)b=JT@i9|m7`X#Ij`QMg^z|M>u?7g5pU_z0_ltmKbL2^~*G)61_ zx~Inh5Mx-*9|^djB}Fc{T7+J@Jo^)7goGjj1fx{MI!Mfh8)+AHUVA zm>Mpo%<-{_h)d;Nz;a*D8xo#|CZ&2myj2k$=i}A?je`8zg7j0y;$TG@j?4@NxyDGJ z3=b+QPrFao^da_^(_)sxUzPoq2`p}en_BBx?7gg0BE3{+W&%0awaDuiwJq1=KphFG z$VAEJ7XL}Xm8jmby74dmi-OqiLH$Nrpa*}5lPRJ7=f|sH;oYMpNH|VwSP0dk_v^he z&3M9OK*|T@_5A{T=G*w3a?o5w`@)NxSKHX5`G&`R%QyYC?gCkUV6h`C;QDegKU?*h z<95F5lODD&0yEHrW`3jRovEQ|Ij38gTu?36QHq_fH??rXBi8Q8#{HN`n z0AqL5I^&n1uWdN6rxHKz=8@7zbgu9Br#5+Dn$BS081obYr@WwUVwk*L_gXjKmuw;g zVUYoV^%cHyS=F)J!n%)SrS!gozPp-^#{sMt-tKE+=(BaBhq|#ebh+9V_QSO-L;ZZ| zPN;$^Ahd{J)RWx#AlEm<;N7fGo>xmFS(x%T*);fjbi0(P$76={pGu+Hpye;!+>ASO zi`yc`>jlOs;ZMda+8jmE(G#`%# zjOta$a=G#-modzqZ#V&0zJrGLA7Y|p`?^NiR3xowmGd5uXb+HsbiWFF@m{f|#}j)= z6OMckOZWVj==~r0`>&7PEX9L`ha`DD;rO3XuDr;_enY9twjOA%ai}?b<>O-%{^|!7 zx96)*9BWg7fcnNjbO97nVP9~G``AEl}`~>*XbKqo(t~;^lod-Rxf;v14P$$|jyi-pL-L3qzfAeJMhW9^~ z5%RTDOBf9r*H=V=N4@A*er)Gd^EjyH)MS5+rkw#i>^>}tH3C!L1{8}QsQ$dP}H zj9L88?ck-ljv*oi6aS_2|BBH6dweh*ZoI|{%9W3?x!QXlWHy;uZr&1ugV5bXG&TeE z4fU?MJ@kTG9r#>e*Rx3``QJ#^RinHrpM-9(DL~naCmef;%CqWCaPWS z{8hhBPtuI_tKQM(X3@P6l*ojyRHYFxZ$?7;zqD3_|Nk)6QG`?g0D!oRxQN>S8#Kix r+W)eR|FI`uq5hY_K{m!$>`_RAM>(phMy?0aA3#PzLA+YjDCqwKfgH|$ literal 0 HcmV?d00001 diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index cef058fa2f5..1f11a50e08d 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -34,10 +34,6 @@ body { background: @bodyBackground; } -.page-header { - border-bottom: 1px solid @grayDark -} - hr { border-bottom: none; } diff --git a/public/less/grafana-responsive.less b/public/less/grafana-responsive.less index 2ebf8d02264..ee8b26ef751 100644 --- a/public/less/grafana-responsive.less +++ b/public/less/grafana-responsive.less @@ -22,7 +22,7 @@ @fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); @fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); -@screen-xs: 480px; +@screen-xs: 320px; @screen-sm: 768px; @screen-md: 992px; @screen-lg: 1200px; @@ -67,6 +67,18 @@ .dashnav-action-icons { display: none; } + .page-container { + padding: 0 20px; + } +} + +// form styles +@media @breakpoint-sm-up { + .gf-size-m { width: 120px; } + .gf-size-l { width: 150px; } + .gf-size-xl { width: 200px; } + .gf-size-xxl { width: 300px; } + .gf-size-xxxl { width: 400px; } } @media @breakpoint-sm-up { diff --git a/public/less/grafana.less b/public/less/grafana.less index 3b744c7db98..f28893faafc 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -30,7 +30,6 @@ @import "simple-box.less"; @import "dropdown.less"; @import "page.less"; -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,600,700); .row-control-inner { padding:0px; diff --git a/public/less/normform.less b/public/less/normform.less index bfb6fe1a685..3dd0e0a294a 100644 --- a/public/less/normform.less +++ b/public/less/normform.less @@ -16,6 +16,11 @@ margin-bottom: 20px; } +.gf-form-flow { + float: left; + margin-right: 20px; +} + .gf-form-button-row { margin-top: 20px; margin-bottom: 10px; @@ -56,13 +61,14 @@ select.gf-form-input { font-size: 15px; } -.gf-size-xs { width: 60px;} -.gf-size-s { width: 80px;} +.gf-size-xs { width: 60px; } +.gf-size-s { width: 80px; } .gf-size-ms { width: 100px;} -.gf-size-m { width: 120px; } -.gf-size-l { width: 150px; } -.gf-size-xl { width: 200px; } -.gf-size-xxl { width: 300px; } -.gf-size-xxxl { width: 400px; } - +.gf-size-m { width: 110px; } +.gf-size-l { width: 120px; } +.gf-size-xl { width: 150px; } +.gf-size-xxl { width: 200px; } +.gf-size-xxxl { width: 300px; } .gf-size-auto { width: auto; } + + diff --git a/public/less/page.less b/public/less/page.less index e9a025f423f..ed775ecb07c 100644 --- a/public/less/page.less +++ b/public/less/page.less @@ -33,6 +33,8 @@ .page-header { + padding: 10px 0 39px 0px; + display: flex; justify-content: space-between; align-items: center; @@ -41,6 +43,10 @@ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ flex-wrap: wrap-reverse; + background: transparent url(../img/page_header_line.png) no-repeat left 60px; + h1 { + font-style: italic; + } } .admin-page { diff --git a/public/less/type.less b/public/less/type.less index 8d27a195e82..cefc051c091 100644 --- a/public/less/type.less +++ b/public/less/type.less @@ -88,17 +88,6 @@ h3 small { font-size: @baseFontSize; } h4 small { font-size: @baseFontSize; } -// Page header -// ------------------------- - -.page-header { - padding-bottom: (@baseLineHeight / 2) - 1; - margin: @baseLineHeight 0 (@baseLineHeight * 1.5); - border-bottom: 1px solid @grayLighter; -} - - - // Lists // -------------------------------------------------- diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index b2799b04b0c..2159b5196b8 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -78,7 +78,7 @@ @altFontFamily: @serifFontFamily; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: 200; // instead of browser default, bold +@headingsFontWeight: 400; // instead of browser default, bold @headingsFontStyle: normal; @headingsColor: darken(@white,11%); // empty to use BS default, @textColor @inputText: @black; diff --git a/public/views/index.html b/public/views/index.html index e24d4ec6e7d..3208c5ae9ff 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -8,6 +8,8 @@ Grafana + + [[if .User.LightTheme]] [[else]] From e32ee9f02e6397d7677ac70a59424acf8fcfad93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 17:37:05 +0100 Subject: [PATCH 045/444] ux(admin): admin pages overhaul --- pkg/api/index.go | 8 + public/app/core/components/navbar/navbar.html | 11 +- public/app/core/components/navbar/navbar.ts | 24 ++ .../core/components/sidemenu/sidemenu.html | 19 -- .../app/core/components/sidemenu/sidemenu.ts | 56 +--- public/app/core/routes/routes.ts | 15 ++ public/app/features/admin/admin.ts | 38 +++ public/app/features/admin/adminStatsCtrl.ts | 18 -- public/app/features/admin/all.js | 8 - .../features/admin/partials/admin_home.html | 28 ++ .../app/features/admin/partials/edit_org.html | 15 +- .../features/admin/partials/edit_user.html | 254 +++++++++--------- .../app/features/admin/partials/new_user.html | 116 ++++---- public/app/features/admin/partials/orgs.html | 60 +++-- .../app/features/admin/partials/settings.html | 12 +- public/app/features/admin/partials/stats.html | 100 +++---- public/app/features/admin/partials/users.html | 75 +++--- public/app/features/all.js | 1 - 18 files changed, 435 insertions(+), 423 deletions(-) create mode 100644 public/app/features/admin/admin.ts delete mode 100644 public/app/features/admin/adminStatsCtrl.ts delete mode 100644 public/app/features/admin/all.js create mode 100644 public/app/features/admin/partials/admin_home.html diff --git a/pkg/api/index.go b/pkg/api/index.go index 64b6da6a3a7..cffbf04482e 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -100,6 +100,14 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { } } + if c.IsGrafanaAdmin { + data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ + Text: "Admin", + Icon: "fa fa-fw fa-cogs", + Url: setting.AppSubUrl + "/admin", + }) + } + return &data, nil } diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 02369f5f608..8f070616d6e 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,5 +1,6 @@
      +
      @@ -10,12 +11,10 @@
      -
      - - - {{ctrl.title}} - - + +
      + +
      diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index f4bea8f089a..044c2579820 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -29,4 +29,28 @@ export function navbarDirective() { }; } +var navButtonTemplate = ` +
      + + + {{::title}} + +
      +`; + +function navButton() { + return { + restrict: 'E', + template: navButtonTemplate, + scope: { + title: "@", + titleUrl: "@", + }, + link: function(scope, elem, attrs, ctrl) { + scope.icon = attrs.icon; + } + }; +} + coreModule.directive('navbar', navbarDirective); +coreModule.directive('navButton', navButton); diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index 837e3e386b0..f4221367fdf 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -26,16 +26,6 @@ -
    • -
      - -
      -
      Grafana Admin
      -
      v {{ctrl.grafanaVersion}}
      -
      -
      -
      • -
    • @@ -54,15 +44,6 @@
      • - -
    • diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index 80eb967f377..0147eb51062 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/public/app/core/components/sidemenu/sidemenu.ts @@ -11,8 +11,6 @@ export class SideMenuCtrl { user: any; mainLinks: any; orgMenu: any; - systemSection: any; - grafanaVersion: any; appSubUrl: string; /** @ngInject */ @@ -21,11 +19,11 @@ export class SideMenuCtrl { this.user = contextSrv.user; this.appSubUrl = config.appSubUrl; this.showSignout = this.contextSrv.isSignedIn && !config['authProxyEnabled']; - this.updateMenu(); + + this.mainLinks = config.bootData.mainNavLinks; this.openUserDropdown(); this.$scope.$on('$routeChangeSuccess', () => { - this.updateMenu(); if (!this.contextSrv.pinned) { this.contextSrv.sidemenu = false; } @@ -37,10 +35,6 @@ export class SideMenuCtrl { return config.appSubUrl + url; } - setupMainNav() { - this.mainLinks = config.bootData.mainNavLinks; - } - openUserDropdown() { this.orgMenu = [ {section: 'You', cssClass: 'dropdown-menu-title'}, @@ -70,10 +64,6 @@ export class SideMenuCtrl { this.orgMenu.push({cssClass: "divider"}); - if (this.contextSrv.isGrafanaAdmin) { - this.orgMenu.push({text: "Grafana adminstration", icon: "fa fa-fw fa-cogs", url: this.getUrl("/admin/settings")}); - } - this.backendSrv.get('/api/user/orgs').then(orgs => { orgs.forEach(org => { if (org.orgId === this.contextSrv.user.orgId) { @@ -100,48 +90,6 @@ export class SideMenuCtrl { window.location.href = window.location.href; }); }; - - setupAdminNav() { - this.systemSection = true; - this.grafanaVersion = config.buildInfo.version; - - this.mainLinks.push({ - text: "System info", - icon: "fa fa-fw fa-info", - url: this.getUrl("/admin/settings"), - }); - - this.mainLinks.push({ - text: "Stats", - icon: "fa fa-fw fa-bar-chart", - url: this.getUrl("/admin/stats"), - }); - - this.mainLinks.push({ - text: "Users", - icon: "fa fa-fw fa-user", - url: this.getUrl("/admin/users"), - }); - - this.mainLinks.push({ - text: "Organizations", - icon: "fa fa-fw fa-users", - url: this.getUrl("/admin/orgs"), - }); - - } - - updateMenu() { - this.systemSection = false; - this.mainLinks = []; - - var currentPath = this.$location.path(); - if (currentPath.indexOf('/admin') === 0) { - this.setupAdminNav(); - } else { - this.setupMainNav(); - } - }; } export function sideMenuDirective() { diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index c3ae868d12c..7d33cf8df85 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -12,6 +12,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) { var loadOrgBundle = new BundleLoader('app/features/org/all'); var loadAppsBundle = new BundleLoader('app/features/apps/all'); + var loadAdminBundle = new BundleLoader('app/features/admin/admin'); $routeProvider .when('/', { @@ -95,35 +96,49 @@ function setupAngularRoutes($routeProvider, $locationProvider) { templateUrl: 'public/app/features/profile/partials/select_org.html', controller : 'SelectOrgCtrl', }) + // ADMIN + .when('/admin', { + templateUrl: 'public/app/features/admin/partials/admin_home.html', + controller : 'AdminHomeCtrl', + resolve: loadAdminBundle, + }) .when('/admin/settings', { templateUrl: 'public/app/features/admin/partials/settings.html', controller : 'AdminSettingsCtrl', + resolve: loadAdminBundle, }) .when('/admin/users', { templateUrl: 'public/app/features/admin/partials/users.html', controller : 'AdminListUsersCtrl', + resolve: loadAdminBundle, }) .when('/admin/users/create', { templateUrl: 'public/app/features/admin/partials/new_user.html', controller : 'AdminEditUserCtrl', + resolve: loadAdminBundle, }) .when('/admin/users/edit/:id', { templateUrl: 'public/app/features/admin/partials/edit_user.html', controller : 'AdminEditUserCtrl', + resolve: loadAdminBundle, }) .when('/admin/orgs', { templateUrl: 'public/app/features/admin/partials/orgs.html', controller : 'AdminListOrgsCtrl', + resolve: loadAdminBundle, }) .when('/admin/orgs/edit/:id', { templateUrl: 'public/app/features/admin/partials/edit_org.html', controller : 'AdminEditOrgCtrl', + resolve: loadAdminBundle, }) .when('/admin/stats', { templateUrl: 'public/app/features/admin/partials/stats.html', controller : 'AdminStatsCtrl', controllerAs: 'ctrl', + resolve: loadAdminBundle, }) + // LOGIN / SIGNUP .when('/login', { templateUrl: 'public/app/partials/login.html', controller : 'LoginCtrl', diff --git a/public/app/features/admin/admin.ts b/public/app/features/admin/admin.ts new file mode 100644 index 00000000000..47757520afe --- /dev/null +++ b/public/app/features/admin/admin.ts @@ -0,0 +1,38 @@ +import './adminListUsersCtrl'; +import './adminListOrgsCtrl'; +import './adminEditOrgCtrl'; +import './adminEditUserCtrl'; + +import coreModule from 'app/core/core_module'; + +class AdminSettingsCtrl { + + /** @ngInject **/ + constructor($scope, backendSrv) { + + backendSrv.get('/api/admin/settings').then(function(settings) { + $scope.settings = settings; + }); + + } +} + +class AdminHomeCtrl { + /** @ngInject **/ + constructor() {} +} + +export class AdminStatsCtrl { + stats: any; + + /** @ngInject */ + constructor(backendSrv: any) { + backendSrv.get('/api/admin/stats').then(stats => { + this.stats = stats; + }); + } +} + +coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl); +coreModule.controller('AdminHomeCtrl', AdminHomeCtrl); +coreModule.controller('AdminStatsCtrl', AdminStatsCtrl); diff --git a/public/app/features/admin/adminStatsCtrl.ts b/public/app/features/admin/adminStatsCtrl.ts deleted file mode 100644 index aa3ed6de343..00000000000 --- a/public/app/features/admin/adminStatsCtrl.ts +++ /dev/null @@ -1,18 +0,0 @@ -/// - -import angular from 'angular'; - -export class AdminStatsCtrl { - stats: any; - - /** @ngInject */ - constructor(private backendSrv: any) {} - - init() { - this.backendSrv.get('/api/admin/stats').then(stats => { - this.stats = stats; - }); - } -} - -angular.module('grafana.controllers').controller('AdminStatsCtrl', AdminStatsCtrl); diff --git a/public/app/features/admin/all.js b/public/app/features/admin/all.js deleted file mode 100644 index 786210f064f..00000000000 --- a/public/app/features/admin/all.js +++ /dev/null @@ -1,8 +0,0 @@ -define([ - './adminListUsersCtrl', - './adminListOrgsCtrl', - './adminEditOrgCtrl', - './adminEditUserCtrl', - './adminSettingsCtrl', - './adminStatsCtrl', -], function () {}); diff --git a/public/app/features/admin/partials/admin_home.html b/public/app/features/admin/partials/admin_home.html new file mode 100644 index 00000000000..aa667ddd2d0 --- /dev/null +++ b/public/app/features/admin/partials/admin_home.html @@ -0,0 +1,28 @@ + + + +
      +
      +

      + Server Administration +

      +
      + +       + Manage Users + + + + Manage Organizations + + + + View Server Settings + + + + View Server Stats + + +
      + diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index 975a4b6c93b..804076d8eed 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -1,14 +1,13 @@ - - + +
      -
      -

      - Organization Details -

      +
      +

      + Edit Organization +

      +
      diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 8bf705a6067..192a1e556ea 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -1,150 +1,148 @@ - - + +
      -
      -

      +
      +

      Edit User -

      - - -
      -
      -
        -
      • - Name -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Email -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Username -
        • -
      • - -
        • -
      -
      -
      -
      - -
      - - - -

      - Change password -

      - -
      -
      -
      -
        -
      • - New password -
        • -
      • - -
        • -
      -
      -
      -
      - -
      - - - -

      - Permissions -

      +

      +
      +
      -
      +
        -
      • - Grafana Admin  - - +
      • + Name +
        • +
      • +
      -
      - -
      -
      - -

      - Organizations -

      - -
        -
      • - Add organization +
      • + Email
      • - +
        • -
      • - Role -
        • -
      • - -
        • -
      • - -
        • -
      +
      - +
      +
        +
      • + Username +
        • +
      • + +
        • +
      +
      +
      +
      -
      • - - - - - - - - - - -
      NameRole
      - {{org.name}} Current - - - - - - -
      +
      + + +

      + Change password +

      + +
      +
      +
      +
        +
      • + New password +
        • +
      • + +
        • +
      +
      +
      +
      + +
      + +
      + +

      + Permissions +

      + +
      +
      +
        +
      • + Grafana Admin  + + +
        • +
      +
      +
      +
      + +
      + +

      + Organizations +

      + +
      +
      +
        +
      • + Add organization +
        • +
      • + +
        • +
      • + Role +
        • +
      • + +
        • +
      • + +
        • +
        +
      +
      +
      + + + + + + + + + + + + +
      NameRole
      + {{org.name}} Current + + + + + + +
      +
      diff --git a/public/app/features/admin/partials/new_user.html b/public/app/features/admin/partials/new_user.html index f0812a15b6d..99d2f974565 100644 --- a/public/app/features/admin/partials/new_user.html +++ b/public/app/features/admin/partials/new_user.html @@ -1,65 +1,63 @@ - - + +
      -
      -

      +
      +

      Add new user -

      - -
      -
      -
      -
        -
      • - Name -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Email -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Username -
        • -
      • - -
        • -
      -
      -
      -
      -
        -
      • - Password -
        • -
      • - -
        • -
      -
      -
      -
      - -
      - -
      +

      + +
      +
      +
      +
        +
      • + Name +
        • +
      • + +
        • +
      +
      +
      +
      +
        +
      • + Email +
        • +
      • + +
        • +
      +
      +
      +
      +
        +
      • + Username +
        • +
      • + +
        • +
      +
      +
      +
      +
        +
      • + Password +
        • +
      • + +
        • +
      +
      +
      +
      + +
      + +
      diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index 8ef7930c638..fbda738b501 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -1,35 +1,37 @@ - + +
      -
      -

      +
      +

      Organizations -

      - - - - - - - - - - - - - - - -
      IdName
      {{org.id}}{{org.name}} - - - Edit - -    - - - -
      +

      + + + + + + + + + + + + + + + + +
      IdName
      {{org.id}}{{org.name}} + + + Edit + +    + + + +
      diff --git a/public/app/features/admin/partials/settings.html b/public/app/features/admin/partials/settings.html index 2b55b968955..a941ed69bae 100644 --- a/public/app/features/admin/partials/settings.html +++ b/public/app/features/admin/partials/settings.html @@ -1,11 +1,12 @@ - +
      -
      -

      - System information -

      +
      +

      + Server settings +

      +
      These system settings are defined in grafana.ini or grafana.custom.ini (or overriden in ENV variables). @@ -22,7 +23,6 @@
      		{{keyValue}}
      -
      diff --git a/public/app/features/admin/partials/stats.html b/public/app/features/admin/partials/stats.html index 1d20e59349d..e9af199fa60 100644 --- a/public/app/features/admin/partials/stats.html +++ b/public/app/features/admin/partials/stats.html @@ -1,57 +1,57 @@ - +
      -
      +

      - Overview + Stats

      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
      NameValue
      Total dashboards{{ctrl.stats.dashboard_count}}
      Total users{{ctrl.stats.user_count}}
      Total grafana admins{{ctrl.stats.grafana_admin_count}}
      Total organizations{{ctrl.stats.org_count}}
      Total datasources{{ctrl.stats.data_source_count}}
      Total playlists{{ctrl.stats.playlist_count}}
      Total snapshots{{ctrl.stats.db_snapshot_count}}
      Total dashboard tags{{ctrl.stats.db_tag_count}}
      Total starred dashboards{{ctrl.stats.starred_db_count}}
      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
      NameValue
      Total dashboards{{ctrl.stats.dashboard_count}}
      Total users{{ctrl.stats.user_count}}
      Total grafana admins{{ctrl.stats.grafana_admin_count}}
      Total organizations{{ctrl.stats.org_count}}
      Total datasources{{ctrl.stats.data_source_count}}
      Total playlists{{ctrl.stats.playlist_count}}
      Total snapshots{{ctrl.stats.db_snapshot_count}}
      Total dashboard tags{{ctrl.stats.db_tag_count}}
      Total starred dashboards{{ctrl.stats.starred_db_count}}
      diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index 00182db3fde..adafe2ddf6f 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -1,45 +1,46 @@ - + +
      -
      - +
      +

      Users

      + +       Add new user - -

      Users

      - - - - - - - - - - - - - - - - - - - - - - -
      IdNameLoginEmailGrafana Admin
      {{user.id}}{{user.name}}{{user.login}}{{user.email}}{{user.isAdmin}} - - - Edit - -    - - - -
      + + + + + + + + + + + + + + + + + + + + + + +
      IdNameLoginEmailGrafana Admin
      {{user.id}}{{user.name}}{{user.login}}{{user.email}}{{user.isAdmin}} + + + Edit + +    + + + +
      diff --git a/public/app/features/all.js b/public/app/features/all.js index 4ec4719ebdd..dcaf33c8331 100644 --- a/public/app/features/all.js +++ b/public/app/features/all.js @@ -10,5 +10,4 @@ define([ './profile/profileCtrl', './profile/changePasswordCtrl', './profile/selectOrgCtrl', - './admin/all', ], function () {}); From 5274f93db7803d2f6fdb8b73253b62124e8e6aef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 18:02:53 +0100 Subject: [PATCH 046/444] ux(less): began less / bootstrap less cleanup and restructuring --- .../app/features/admin/adminSettingsCtrl.js | 24 -- .../less => less/bootstrap}/alerts.less | 0 .../less => less/bootstrap}/bootstrap.less | 2 - .../bootstrap}/button-groups.less | 0 .../less => less/bootstrap}/buttons.less | 0 .../less => less/bootstrap}/close.less | 0 .../less => less/bootstrap}/code.less | 0 .../bootstrap}/component-animations.less | 0 .../less => less/bootstrap}/dropdowns.less | 0 .../less => less/bootstrap}/forms.less | 0 .../less => less/bootstrap}/grid.less | 0 .../bootstrap}/labels-badges.less | 0 .../less => less/bootstrap}/layouts.less | 0 .../less => less/bootstrap}/media.less | 0 .../less => less/bootstrap}/mixins.less | 0 .../less => less/bootstrap}/modals.less | 0 .../less => less/bootstrap}/navbar.less | 111 ------- .../less => less/bootstrap}/navs.less | 0 .../less => less/bootstrap}/popovers.less | 0 .../less => less/bootstrap}/reset.less | 0 .../bootstrap}/responsive-1200px-min.less | 0 .../bootstrap}/responsive-767px-max.less | 0 .../bootstrap}/responsive-768px-979px.less | 0 .../bootstrap}/responsive-utilities.less | 0 .../less => less/bootstrap}/responsive.less | 15 - .../less => less/bootstrap}/scaffolding.less | 0 .../less => less/bootstrap}/tables.less | 0 .../less => less/bootstrap}/tooltip.less | 0 .../less => less/bootstrap}/type.less | 0 .../less => less/bootstrap}/utilities.less | 0 public/less/bootswatch.dark.less | 185 +---------- public/less/bootswatch.light.less | 170 ---------- public/less/grafana-responsive.less | 6 +- ...{bootstrap.dark.less => grafana.dark.less} | 6 +- ...ootstrap.light.less => grafana.light.less} | 6 +- public/vendor/bootstrap/less/variables.less | 301 ------------------ tasks/options/less.js | 6 +- 37 files changed, 13 insertions(+), 819 deletions(-) delete mode 100644 public/app/features/admin/adminSettingsCtrl.js rename public/{vendor/bootstrap/less => less/bootstrap}/alerts.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/bootstrap.less (91%) rename public/{vendor/bootstrap/less => less/bootstrap}/button-groups.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/buttons.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/close.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/code.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/component-animations.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/dropdowns.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/forms.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/grid.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/labels-badges.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/layouts.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/media.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/mixins.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/modals.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/navbar.less (63%) rename public/{vendor/bootstrap/less => less/bootstrap}/navs.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/popovers.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/reset.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/responsive-1200px-min.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/responsive-767px-max.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/responsive-768px-979px.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/responsive-utilities.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/responsive.less (71%) rename public/{vendor/bootstrap/less => less/bootstrap}/scaffolding.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/tables.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/tooltip.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/type.less (100%) rename public/{vendor/bootstrap/less => less/bootstrap}/utilities.less (100%) rename public/less/{bootstrap.dark.less => grafana.dark.less} (59%) rename public/less/{bootstrap.light.less => grafana.light.less} (60%) delete mode 100644 public/vendor/bootstrap/less/variables.less diff --git a/public/app/features/admin/adminSettingsCtrl.js b/public/app/features/admin/adminSettingsCtrl.js deleted file mode 100644 index d980281577d..00000000000 --- a/public/app/features/admin/adminSettingsCtrl.js +++ /dev/null @@ -1,24 +0,0 @@ -define([ - 'angular', -], -function (angular) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('AdminSettingsCtrl', function($scope, backendSrv) { - - $scope.init = function() { - $scope.getUsers(); - }; - - $scope.getUsers = function() { - backendSrv.get('/api/admin/settings').then(function(settings) { - $scope.settings = settings; - }); - }; - - $scope.init(); - - }); -}); diff --git a/public/vendor/bootstrap/less/alerts.less b/public/less/bootstrap/alerts.less similarity index 100% rename from public/vendor/bootstrap/less/alerts.less rename to public/less/bootstrap/alerts.less diff --git a/public/vendor/bootstrap/less/bootstrap.less b/public/less/bootstrap/bootstrap.less similarity index 91% rename from public/vendor/bootstrap/less/bootstrap.less rename to public/less/bootstrap/bootstrap.less index 9529c54cda4..5fbb1439bbc 100644 --- a/public/vendor/bootstrap/less/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -8,8 +8,6 @@ * Designed and built with all the love in the world by @mdo and @fat. */ -// Core variables and mixins -@import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; // CSS Reset diff --git a/public/vendor/bootstrap/less/button-groups.less b/public/less/bootstrap/button-groups.less similarity index 100% rename from public/vendor/bootstrap/less/button-groups.less rename to public/less/bootstrap/button-groups.less diff --git a/public/vendor/bootstrap/less/buttons.less b/public/less/bootstrap/buttons.less similarity index 100% rename from public/vendor/bootstrap/less/buttons.less rename to public/less/bootstrap/buttons.less diff --git a/public/vendor/bootstrap/less/close.less b/public/less/bootstrap/close.less similarity index 100% rename from public/vendor/bootstrap/less/close.less rename to public/less/bootstrap/close.less diff --git a/public/vendor/bootstrap/less/code.less b/public/less/bootstrap/code.less similarity index 100% rename from public/vendor/bootstrap/less/code.less rename to public/less/bootstrap/code.less diff --git a/public/vendor/bootstrap/less/component-animations.less b/public/less/bootstrap/component-animations.less similarity index 100% rename from public/vendor/bootstrap/less/component-animations.less rename to public/less/bootstrap/component-animations.less diff --git a/public/vendor/bootstrap/less/dropdowns.less b/public/less/bootstrap/dropdowns.less similarity index 100% rename from public/vendor/bootstrap/less/dropdowns.less rename to public/less/bootstrap/dropdowns.less diff --git a/public/vendor/bootstrap/less/forms.less b/public/less/bootstrap/forms.less similarity index 100% rename from public/vendor/bootstrap/less/forms.less rename to public/less/bootstrap/forms.less diff --git a/public/vendor/bootstrap/less/grid.less b/public/less/bootstrap/grid.less similarity index 100% rename from public/vendor/bootstrap/less/grid.less rename to public/less/bootstrap/grid.less diff --git a/public/vendor/bootstrap/less/labels-badges.less b/public/less/bootstrap/labels-badges.less similarity index 100% rename from public/vendor/bootstrap/less/labels-badges.less rename to public/less/bootstrap/labels-badges.less diff --git a/public/vendor/bootstrap/less/layouts.less b/public/less/bootstrap/layouts.less similarity index 100% rename from public/vendor/bootstrap/less/layouts.less rename to public/less/bootstrap/layouts.less diff --git a/public/vendor/bootstrap/less/media.less b/public/less/bootstrap/media.less similarity index 100% rename from public/vendor/bootstrap/less/media.less rename to public/less/bootstrap/media.less diff --git a/public/vendor/bootstrap/less/mixins.less b/public/less/bootstrap/mixins.less similarity index 100% rename from public/vendor/bootstrap/less/mixins.less rename to public/less/bootstrap/mixins.less diff --git a/public/vendor/bootstrap/less/modals.less b/public/less/bootstrap/modals.less similarity index 100% rename from public/vendor/bootstrap/less/modals.less rename to public/less/bootstrap/modals.less diff --git a/public/vendor/bootstrap/less/navbar.less b/public/less/bootstrap/navbar.less similarity index 63% rename from public/vendor/bootstrap/less/navbar.less rename to public/less/bootstrap/navbar.less index 40b9a96490b..dd8d91bf1e7 100644 --- a/public/vendor/bootstrap/less/navbar.less +++ b/public/less/bootstrap/navbar.less @@ -203,114 +203,3 @@ .border-radius(6px 0 6px 6px); } } - - -// Inverted navbar -// ------------------------- - -.navbar-inverse { - - .navbar-inner { - #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); - border-color: @navbarInverseBorder; - } - - .brand, - .nav > li > a { - color: @navbarInverseLinkColor; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - &:hover, - &:focus { - color: @navbarInverseLinkColorHover; - } - } - - .brand { - color: @navbarInverseBrandColor; - } - - .navbar-text { - color: @navbarInverseText; - } - - .nav > li > a:focus, - .nav > li > a:hover { - background-color: @navbarInverseLinkBackgroundHover; - color: @navbarInverseLinkColorHover; - } - - .nav .active > a, - .nav .active > a:hover, - .nav .active > a:focus { - color: @navbarInverseLinkColorActive; - background-color: @navbarInverseLinkBackgroundActive; - } - - // Inline text links - .navbar-link { - color: @navbarInverseLinkColor; - &:hover, - &:focus { - color: @navbarInverseLinkColorHover; - } - } - - // Dividers in navbar - .divider-vertical { - border-left-color: @navbarInverseBackground; - border-right-color: @navbarInverseBackgroundHighlight; - } - - // Dropdowns - .nav li.dropdown.open > .dropdown-toggle, - .nav li.dropdown.active > .dropdown-toggle, - .nav li.dropdown.open.active > .dropdown-toggle { - background-color: @navbarInverseLinkBackgroundActive; - color: @navbarInverseLinkColorActive; - } - .nav li.dropdown > a:hover .caret, - .nav li.dropdown > a:focus .caret { - border-top-color: @navbarInverseLinkColorActive; - border-bottom-color: @navbarInverseLinkColorActive; - } - .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: @navbarInverseLinkColor; - border-bottom-color: @navbarInverseLinkColor; - } - .nav li.dropdown.open > .dropdown-toggle .caret, - .nav li.dropdown.active > .dropdown-toggle .caret, - .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: @navbarInverseLinkColorActive; - border-bottom-color: @navbarInverseLinkColorActive; - } - - // Navbar search - .navbar-search { - .search-query { - color: @white; - background-color: @navbarInverseSearchBackground; - border-color: @navbarInverseSearchBorder; - .box-shadow(~"inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15)"); - .transition(none); - .placeholder(@navbarInverseSearchPlaceholderColor); - - // Focus states (we use .focused since IE7-8 and down doesn't support :focus) - &:focus, - &.focused { - padding: 5px 15px; - color: @grayDark; - text-shadow: 0 1px 0 @white; - background-color: @navbarInverseSearchBackgroundFocus; - border: 0; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - outline: 0; - } - } - } - - // Navbar collapse button - .btn-navbar { - .buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%)); - } - -} diff --git a/public/vendor/bootstrap/less/navs.less b/public/less/bootstrap/navs.less similarity index 100% rename from public/vendor/bootstrap/less/navs.less rename to public/less/bootstrap/navs.less diff --git a/public/vendor/bootstrap/less/popovers.less b/public/less/bootstrap/popovers.less similarity index 100% rename from public/vendor/bootstrap/less/popovers.less rename to public/less/bootstrap/popovers.less diff --git a/public/vendor/bootstrap/less/reset.less b/public/less/bootstrap/reset.less similarity index 100% rename from public/vendor/bootstrap/less/reset.less rename to public/less/bootstrap/reset.less diff --git a/public/vendor/bootstrap/less/responsive-1200px-min.less b/public/less/bootstrap/responsive-1200px-min.less similarity index 100% rename from public/vendor/bootstrap/less/responsive-1200px-min.less rename to public/less/bootstrap/responsive-1200px-min.less diff --git a/public/vendor/bootstrap/less/responsive-767px-max.less b/public/less/bootstrap/responsive-767px-max.less similarity index 100% rename from public/vendor/bootstrap/less/responsive-767px-max.less rename to public/less/bootstrap/responsive-767px-max.less diff --git a/public/vendor/bootstrap/less/responsive-768px-979px.less b/public/less/bootstrap/responsive-768px-979px.less similarity index 100% rename from public/vendor/bootstrap/less/responsive-768px-979px.less rename to public/less/bootstrap/responsive-768px-979px.less diff --git a/public/vendor/bootstrap/less/responsive-utilities.less b/public/less/bootstrap/responsive-utilities.less similarity index 100% rename from public/vendor/bootstrap/less/responsive-utilities.less rename to public/less/bootstrap/responsive-utilities.less diff --git a/public/vendor/bootstrap/less/responsive.less b/public/less/bootstrap/responsive.less similarity index 71% rename from public/vendor/bootstrap/less/responsive.less rename to public/less/bootstrap/responsive.less index 0affbbbe6ff..9fe486aa5b6 100644 --- a/public/vendor/bootstrap/less/responsive.less +++ b/public/less/bootstrap/responsive.less @@ -18,25 +18,10 @@ // ------------------------- // Required since we compile the responsive stuff separately -@import "variables.less"; // Modify this for custom colors, font-sizes, etc @import "mixins.less"; - - -// RESPONSIVE CLASSES -// ------------------ @import "responsive-utilities.less"; - - -// MEDIA QUERIES -// ------------------ - -// Large desktops @import "responsive-1200px-min.less"; - -// Tablets to regular desktops @import "responsive-768px-979px.less"; - -// Phones to portrait tablets and narrow desktops @import "responsive-767px-max.less"; diff --git a/public/vendor/bootstrap/less/scaffolding.less b/public/less/bootstrap/scaffolding.less similarity index 100% rename from public/vendor/bootstrap/less/scaffolding.less rename to public/less/bootstrap/scaffolding.less diff --git a/public/vendor/bootstrap/less/tables.less b/public/less/bootstrap/tables.less similarity index 100% rename from public/vendor/bootstrap/less/tables.less rename to public/less/bootstrap/tables.less diff --git a/public/vendor/bootstrap/less/tooltip.less b/public/less/bootstrap/tooltip.less similarity index 100% rename from public/vendor/bootstrap/less/tooltip.less rename to public/less/bootstrap/tooltip.less diff --git a/public/vendor/bootstrap/less/type.less b/public/less/bootstrap/type.less similarity index 100% rename from public/vendor/bootstrap/less/type.less rename to public/less/bootstrap/type.less diff --git a/public/vendor/bootstrap/less/utilities.less b/public/less/bootstrap/utilities.less similarity index 100% rename from public/vendor/bootstrap/less/utilities.less rename to public/less/bootstrap/utilities.less diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 1f11a50e08d..6c0de417eeb 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -5,26 +5,6 @@ // TYPOGRAPHY // ----------------------------------------------------- -label, input, button, select, textarea, -.navbar .search-query:-moz-placeholder, -.navbar .search-query::-webkit-input-placeholder { - font-family: 'Droid Sans', sans-serif; - color: @gray; -} - - - -blockquote { - border-left: 5px solid @grayDark; - - &.pull-right { - border-right: 5px solid @grayDark; - } -} - -// SCAFFOLDING -// ----------------------------------------------------- - html { height: 100%; } @@ -93,54 +73,9 @@ hr { text-shadow: none; .placeholder(@gray); } - - &-inverse { - - } } -div.subnav { - - margin: 0 1px; - background-color: @grayDarker; - background-image: none; - border: none; - border-bottom: 1px solid @grayDark; - - .nav > li > a, - .nav > li:first-child > a, - .nav > li:first-child > a:hover { - padding: 11px 12px; - border: none; - background-color: @grayDarker; - color: @grayLight; - } - - .nav > li > a:hover, - .nav > li.active > a, - .nav > li.active > a:hover, - .nav > li:first-child > a:hover { - padding: 11px 12px; - background: transparent; - border: none; - border-bottom: 1px solid @blue; - color: @white; - } - - .nav li.nav-header { - text-shadow: none; - } - - - - - &-fixed { - top: @navbarHeight; - margin: 0; - } -} - // NAV // ----------------------------------------------------- @@ -172,131 +107,13 @@ div.subnav { } } -.nav-pills { - - li > a:hover { - background-color: @blue; - color: @white; - } - - li.disabled > a { - color: @textColor; - } - - .open .dropdown-toggle { - background-color: #060606; - } - - .dropdown-menu li > a:hover { - border: none; - } -} - -.nav-list { - - li > a { - text-shadow: none; - } - - li > a:hover { - background-color: @blue; - color: @white; - } - - .nav-header { - text-shadow: none; - } - - .divider { - background-color: transparent; - border-bottom: 1px solid @grayDark; - } -} - -.nav-stacked { - - li > a { - border: 1px solid @grayDark !important; - } - - li > a:hover, - li.active > a { - background-color: @blue; - color: @white; - } -} - -.tabbable { - .nav-tabs, - .nav-tabs li.active > a { - border-color: @grayDark; - } -} - -.breadcrumb { - - background-color: transparent; - background-image: none; - border-width: 0; - .box-shadow(none); - font-size: 14px; - - li { - text-shadow: none; - } - - li > a { - color: @blue; - text-shadow: none; - } -} - -.pagination { - - ul { - .box-shadow(none); - } - - ul > li > a:hover, - ul > .active > a, - ul > .active > span { - // color: @white; - } - - ul > .disabled > a, - ul > .disabled > a:hover, - ul > .disabled > span, - ul > .disabled > span:hover { - background-color: rgba(0, 0, 0, 0.2); - } -} - -.pager { - - li > a, - li > span { - background-color: @bodyBackground; - border: none; - - &:hover { - background-color: @blue; - } - } - - .disabled a, - .disabled a:hover { - background-color: @bodyBackground; - } - -} - // BUTTONS // ----------------------------------------------------- + .btn { padding: 8px 12px; margin-right:10px; background-image: none; - // .box-shadow(0px 0px 8px @bodyBackground); border: none; .border-radius(0px); text-shadow: none; diff --git a/public/less/bootswatch.light.less b/public/less/bootswatch.light.less index f31eb4a0f56..b548d187941 100644 --- a/public/less/bootswatch.light.less +++ b/public/less/bootswatch.light.less @@ -87,64 +87,12 @@ a.text-success:hover { color: darken(@green, 10%); } .navbar-search .search-query { line-height: normal; } - - &-inverse { - - .brand, - .nav > li > a { - text-shadow: none; - } - - .brand:hover, - .nav > .active > a, - .nav > .active > a:hover, - .nav > .active > a:focus { - background-color: @navbarInverseLinkBackgroundHover; - .box-shadow(none); - color: @white; - } - - .navbar-search .search-query { - color: @grayDarker; - } - } -} - -div.subnav { - - margin: 0 1px; - background: @grayLight none; - .box-shadow(none); - border: none; - .border-radius(0); - - .nav { - background-color: transparent; - } - - .nav > li > a { - border-color: transparent; - } - - .nav > .active > a, - .nav > .active > a:hover { - border-color: transparent; - background-color: @black; - color: @white; - .box-shadow(none); - } - - &-fixed { - top: @navbarHeight + 1; - margin: 0; - } } // NAV // ----------------------------------------------------- .nav { - .open .dropdown-toggle, & > li.dropdown.open.active > a:hover { color: @blue; @@ -187,121 +135,6 @@ div.subnav { } } -.nav-pills { - - & > li > a { - //background-color: @grayLight; - .border-radius(0); - color: @black; - - &:hover { - background-color: @black; - color: @white; - } - } - - & > .disabled > a, - & > .disabled > a:hover { - background-color: @grayLighter; - color: @grayDark; - } -} - -.nav-list { - - & > li > a { - color: @grayDarker; - - &:hover { - background-color: @blue; - color: @white; - text-shadow: none; - } - } - - .nav-header { - color: @grayDarker; - } - - .divider { - background-color: @gray; - border-bottom: none; - } -} - -.pagination { - - ul { - - .box-shadow(none); - - & > li > a, - & > li > span { - margin-right: 6px; - color: @grayDarker; - - &:hover { - background-color: @grayDarker; - color: @white; - } - } - - & > li:last-child > a, - & > li:last-child > span { - margin-right: 0; - } - - & > .active > a, - & > .active > span { - color: @white; - } - - & > .disabled > span, - & > .disabled > a, - & > .disabled > a:hover { - background-color: @grayLighter; - color: @grayDark; - } - } -} - -.pager { - - li > a, - li > span { - background-color: @grayLight; - border: none; - .border-radius(0); - color: @grayDarker; - - &:hover { - background-color: @grayDarker; - color: @white; - } - } - - .disabled > a, - .disabled > a:hover, - .disabled > span { - background-color: @grayLighter; - color: @grayDark; - } - -} - -.breadcrumb { - background-color: @grayLight; - - li { - text-shadow: none; - } - - .divider, - .active { - color: @grayDarker; - text-shadow: none; - } -} // BUTTONS // ----------------------------------------------------- @@ -319,9 +152,6 @@ div.subnav { } } -.btn-inverse { -} - .btn-large { padding: 14px 23px; } diff --git a/public/less/grafana-responsive.less b/public/less/grafana-responsive.less index ee8b26ef751..0431bb3dcae 100644 --- a/public/less/grafana-responsive.less +++ b/public/less/grafana-responsive.less @@ -1,4 +1,5 @@ -@import "responsive.less"; +@import "variables.dark.less"; +@import "bootstrap/responsive.less"; @gridColumnWidth: 70px; @gridGutterWidth: 10px; @@ -68,7 +69,7 @@ display: none; } .page-container { - padding: 0 20px; + padding: 10px 20px; } } @@ -92,7 +93,6 @@ .dashnav-action-icons { display: none; } - .dashnav-back-to-dashboard { display: block; } diff --git a/public/less/bootstrap.dark.less b/public/less/grafana.dark.less similarity index 59% rename from public/less/bootstrap.dark.less rename to public/less/grafana.dark.less index 56fb2921371..96f24eeec02 100644 --- a/public/less/bootstrap.dark.less +++ b/public/less/grafana.dark.less @@ -1,5 +1,5 @@ -@import "bootstrap.less"; +@import "variables.dark.less"; +@import "bootstrap/bootstrap.less"; @import "bootswatch.dark.less"; @import "overrides.less"; -@import "variables.dark.less"; -@import "grafana.less"; \ No newline at end of file +@import "grafana.less"; diff --git a/public/less/bootstrap.light.less b/public/less/grafana.light.less similarity index 60% rename from public/less/bootstrap.light.less rename to public/less/grafana.light.less index 973ec849ef3..601e0cbf15a 100644 --- a/public/less/bootstrap.light.less +++ b/public/less/grafana.light.less @@ -1,5 +1,5 @@ -@import "bootstrap.less"; +@import "variables.light.less"; +@import "bootstrap/bootstrap.less"; @import "bootswatch.light.less"; @import "overrides.less"; -@import "variables.light.less"; -@import "grafana.less"; \ No newline at end of file +@import "grafana.less"; diff --git a/public/vendor/bootstrap/less/variables.less b/public/vendor/bootstrap/less/variables.less deleted file mode 100644 index 31c131b1e23..00000000000 --- a/public/vendor/bootstrap/less/variables.less +++ /dev/null @@ -1,301 +0,0 @@ -// -// Variables -// -------------------------------------------------- - - -// Global values -// -------------------------------------------------- - - -// Grays -// ------------------------- -@black: #000; -@grayDarker: #222; -@grayDark: #333; -@gray: #555; -@grayLight: #999; -@grayLighter: #eee; -@white: #fff; - - -// Accent colors -// ------------------------- -@blue: #049cdb; -@blueDark: #0064cd; -@green: #46a546; -@red: #9d261d; -@yellow: #ffc40d; -@orange: #f89406; -@pink: #c3325f; -@purple: #7a43b6; - - -// Scaffolding -// ------------------------- -@bodyBackground: @white; -@textColor: @grayDark; - - -// Links -// ------------------------- -@linkColor: #08c; -@linkColorHover: darken(@linkColor, 15%); - - -// Typography -// ------------------------- -@sansFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -@serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Monaco, Menlo, Consolas, "Courier New", monospace; - -@baseFontSize: 14px; -@baseFontFamily: @sansFontFamily; -@baseLineHeight: 20px; -@altFontFamily: @serifFontFamily; - -@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: bold; // instead of browser default, bold -@headingsColor: inherit; // empty to use BS default, @textColor - - -// Component sizing -// ------------------------- -// Based on 14px font-size and 20px line-height - -@fontSizeLarge: @baseFontSize * 1.25; // ~18px -@fontSizeSmall: @baseFontSize * 0.85; // ~12px -@fontSizeMini: @baseFontSize * 0.75; // ~11px - -@paddingLarge: 11px 19px; // 44px -@paddingSmall: 2px 10px; // 26px -@paddingMini: 0 6px; // 22px - -@baseBorderRadius: 4px; -@borderRadiusLarge: 6px; -@borderRadiusSmall: 3px; - - -// Tables -// ------------------------- -@tableBackground: transparent; // overall background-color -@tableBackgroundAccent: #f9f9f9; // for striping -@tableBackgroundHover: #f5f5f5; // for hover -@tableBorder: #ddd; // table and cell border - -// Buttons -// ------------------------- -@btnBackground: @white; -@btnBackgroundHighlight: darken(@white, 10%); -@btnBorder: #ccc; - -@btnPrimaryBackground: @linkColor; -@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%); - -@btnInfoBackground: #5bc0de; -@btnInfoBackgroundHighlight: #2f96b4; - -@btnSuccessBackground: #62c462; -@btnSuccessBackgroundHighlight: #51a351; - -@btnWarningBackground: lighten(@orange, 15%); -@btnWarningBackgroundHighlight: @orange; - -@btnDangerBackground: #ee5f5b; -@btnDangerBackgroundHighlight: #bd362f; - -@btnInverseBackground: #444; -@btnInverseBackgroundHighlight: @grayDarker; - - -// Forms -// ------------------------- -@inputBackground: @white; -@inputBorder: #ccc; -@inputBorderRadius: @baseBorderRadius; -@inputDisabledBackground: @grayLighter; -@formActionsBackground: #f5f5f5; -@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border - - -// Dropdowns -// ------------------------- -@dropdownBackground: @white; -@dropdownBorder: rgba(0,0,0,.2); -@dropdownDividerTop: #e5e5e5; -@dropdownDividerBottom: @white; - -@dropdownLinkColor: @grayDark; -@dropdownLinkColorHover: @white; -@dropdownLinkColorActive: @white; - -@dropdownLinkBackgroundActive: @linkColor; -@dropdownLinkBackgroundHover: @dropdownLinkBackgroundActive; - - - -// COMPONENT VARIABLES -// -------------------------------------------------- - - -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -@zindexDropdown: 1000; -@zindexPopover: 1010; -@zindexTooltip: 1030; -@zindexFixedNavbar: 1030; -@zindexModalBackdrop: 1040; -@zindexModal: 1050; - - -// Sprite icons path -// ------------------------- -@iconSpritePath: "../img/glyphicons-halflings.png"; -@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; - - -// Input placeholder text color -// ------------------------- -@placeholderText: @grayLight; - - -// Hr border color -// ------------------------- -@hrBorder: @grayLighter; - - -// Horizontal forms & lists -// ------------------------- -@horizontalComponentOffset: 180px; - - -// Wells -// ------------------------- -@wellBackground: #f5f5f5; - - -// Navbar -// ------------------------- -@navbarCollapseWidth: 979px; -@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; - -@navbarHeight: 40px; -@navbarBackgroundHighlight: #ffffff; -@navbarBackground: darken(@navbarBackgroundHighlight, 5%); -@navbarBorder: darken(@navbarBackground, 12%); - -@navbarText: #777; -@navbarLinkColor: #777; -@navbarLinkColorHover: @grayDark; -@navbarLinkColorActive: @gray; -@navbarLinkBackgroundHover: transparent; -@navbarLinkBackgroundActive: darken(@navbarBackground, 5%); - -@navbarBrandColor: @navbarLinkColor; - -// Inverted navbar -@navbarInverseBackground: #111111; -@navbarInverseBackgroundHighlight: #222222; -@navbarInverseBorder: #252525; - -@navbarInverseText: @grayLight; -@navbarInverseLinkColor: @grayLight; -@navbarInverseLinkColorHover: @white; -@navbarInverseLinkColorActive: @navbarInverseLinkColorHover; -@navbarInverseLinkBackgroundHover: transparent; -@navbarInverseLinkBackgroundActive: @navbarInverseBackground; - -@navbarInverseSearchBackground: lighten(@navbarInverseBackground, 25%); -@navbarInverseSearchBackgroundFocus: @white; -@navbarInverseSearchBorder: @navbarInverseBackground; -@navbarInverseSearchPlaceholderColor: #ccc; - -@navbarInverseBrandColor: @navbarInverseLinkColor; - - -// Pagination -// ------------------------- -@paginationBackground: #fff; -@paginationBorder: #ddd; -@paginationActiveBackground: #f5f5f5; - - -// Hero unit -// ------------------------- -@heroUnitBackground: @grayLighter; -@heroUnitHeadingColor: inherit; -@heroUnitLeadColor: inherit; - - -// Form states and alerts -// ------------------------- -@warningText: #c09853; -@warningBackground: #fcf8e3; -@warningBorder: darken(spin(@warningBackground, -10), 3%); - -@errorText: #b94a48; -@errorBackground: #f2dede; -@errorBorder: darken(spin(@errorBackground, -10), 3%); - -@successText: #468847; -@successBackground: #dff0d8; -@successBorder: darken(spin(@successBackground, -10), 5%); - -@infoText: #3a87ad; -@infoBackground: #d9edf7; -@infoBorder: darken(spin(@infoBackground, -10), 7%); - - -// Tooltips and popovers -// ------------------------- -@tooltipColor: #fff; -@tooltipBackground: #000; -@tooltipArrowWidth: 5px; -@tooltipArrowColor: @tooltipBackground; - -@popoverBackground: #fff; -@popoverArrowWidth: 10px; -@popoverArrowColor: #fff; -@popoverTitleBackground: darken(@popoverBackground, 3%); - -// Special enhancement for popovers -@popoverArrowOuterWidth: @popoverArrowWidth + 1; -@popoverArrowOuterColor: rgba(0,0,0,.25); - - - -// GRID -// -------------------------------------------------- - - -// Default 940px grid -// ------------------------- -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - -// 1200px min -@gridColumnWidth1200: 70px; -@gridGutterWidth1200: 30px; -@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); - -// 768px-979px -@gridColumnWidth768: 42px; -@gridGutterWidth768: 20px; -@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); - - -// Fluid grid -// ------------------------- -@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); -@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); - -// 1200px min -@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); -@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); - -// 768px-979px -@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); -@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); diff --git a/tasks/options/less.js b/tasks/options/less.js index b0a893e9a37..17ef180e36c 100644 --- a/tasks/options/less.js +++ b/tasks/options/less.js @@ -3,12 +3,12 @@ module.exports = function(config) { return { src:{ options: { - paths: ["<%= srcDir %>/vendor/bootstrap/less", "<%= srcDir %>/less"], + paths: ["<%= srcDir %>/less"], yuicompress: true }, files: { - "<%= genDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/less/bootstrap.dark.less", - "<%= genDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/less/bootstrap.light.less", + "<%= genDir %>/css/bootstrap.dark.min.css": "<%= srcDir %>/less/grafana.dark.less", + "<%= genDir %>/css/bootstrap.light.min.css": "<%= srcDir %>/less/grafana.light.less", "<%= genDir %>/css/bootstrap-responsive.min.css": "<%= srcDir %>/less/grafana-responsive.less" } } From f888716d81b07c423cc1d46735f511d8a4a76d21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 20:05:17 +0100 Subject: [PATCH 047/444] ux(less): refactoring and restructuring less files --- .../less/{gf-fonts.less => base/fonts.less} | 0 public/less/{ => base}/forms.less | 0 public/less/{ => base}/type.less | 0 public/less/bootswatch.dark.less | 1 - public/less/bootswatch.light.less | 1 - .../{ => components}/filter-controls.less | 0 public/less/{ => components}/filter-list.less | 0 .../less/{ => components}/filter-table.less | 0 .../gf-form.less} | 0 public/less/{ => components}/gfbox.less | 0 public/less/{ => components}/navbar.less | 0 public/less/{ => components}/pagination.less | 0 public/less/{ => components}/panel.less | 0 .../less/{ => components}/panel_dashlist.less | 0 public/less/{ => components}/panel_graph.less | 0 .../{ => components}/panel_singlestat.less | 0 public/less/{ => components}/panel_table.less | 0 public/less/{ => components}/search.less | 0 public/less/{ => components}/sidemenu.less | 0 public/less/{ => components}/submenu.less | 0 .../less/{ => components}/tables_lists.less | 0 public/less/{ => components}/tabs.less | 0 .../tagsinput.less} | 0 public/less/{ => components}/tightform.less | 0 public/less/{ => components}/timepicker.less | 0 public/less/dropdown.less | 90 ------------------- public/less/fonts.less | 31 ------- public/less/grafana.less | 73 ++++++++------- public/less/{ => layout}/page.less | 0 public/less/{ => pages}/admin.less | 0 public/less/{ => pages}/alerting.less | 0 public/less/{ => pages}/apps.less | 0 public/less/{ => pages}/login.less | 0 public/less/{ => pages}/playlist.less | 0 public/less/simple-box.less | 50 ----------- public/less/{ => utils}/validation.less | 0 36 files changed, 41 insertions(+), 205 deletions(-) rename public/less/{gf-fonts.less => base/fonts.less} (100%) rename public/less/{ => base}/forms.less (100%) rename public/less/{ => base}/type.less (100%) rename public/less/{ => components}/filter-controls.less (100%) rename public/less/{ => components}/filter-list.less (100%) rename public/less/{ => components}/filter-table.less (100%) rename public/less/{normform.less => components/gf-form.less} (100%) rename public/less/{ => components}/gfbox.less (100%) rename public/less/{ => components}/navbar.less (100%) rename public/less/{ => components}/pagination.less (100%) rename public/less/{ => components}/panel.less (100%) rename public/less/{ => components}/panel_dashlist.less (100%) rename public/less/{ => components}/panel_graph.less (100%) rename public/less/{ => components}/panel_singlestat.less (100%) rename public/less/{ => components}/panel_table.less (100%) rename public/less/{ => components}/search.less (100%) rename public/less/{ => components}/sidemenu.less (100%) rename public/less/{ => components}/submenu.less (100%) rename public/less/{ => components}/tables_lists.less (100%) rename public/less/{ => components}/tabs.less (100%) rename public/less/{bootstrap-tagsinput.less => components/tagsinput.less} (100%) rename public/less/{ => components}/tightform.less (100%) rename public/less/{ => components}/timepicker.less (100%) delete mode 100644 public/less/dropdown.less delete mode 100644 public/less/fonts.less rename public/less/{ => layout}/page.less (100%) rename public/less/{ => pages}/admin.less (100%) rename public/less/{ => pages}/alerting.less (100%) rename public/less/{ => pages}/apps.less (100%) rename public/less/{ => pages}/login.less (100%) rename public/less/{ => pages}/playlist.less (100%) delete mode 100644 public/less/simple-box.less rename public/less/{ => utils}/validation.less (100%) diff --git a/public/less/gf-fonts.less b/public/less/base/fonts.less similarity index 100% rename from public/less/gf-fonts.less rename to public/less/base/fonts.less diff --git a/public/less/forms.less b/public/less/base/forms.less similarity index 100% rename from public/less/forms.less rename to public/less/base/forms.less diff --git a/public/less/type.less b/public/less/base/type.less similarity index 100% rename from public/less/type.less rename to public/less/base/type.less diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 6c0de417eeb..b92ec592fe4 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -200,7 +200,6 @@ legend, label { // ----------------------------------------------------- .table { - .border-radius(1px); tbody tr.success td { diff --git a/public/less/bootswatch.light.less b/public/less/bootswatch.light.less index b548d187941..31ab74330ad 100644 --- a/public/less/bootswatch.light.less +++ b/public/less/bootswatch.light.less @@ -165,7 +165,6 @@ a.text-success:hover { color: darken(@green, 10%); } } .btn-group { - & > .btn:first-child, & > .btn:last-child, & > .dropdown-toggle { diff --git a/public/less/filter-controls.less b/public/less/components/filter-controls.less similarity index 100% rename from public/less/filter-controls.less rename to public/less/components/filter-controls.less diff --git a/public/less/filter-list.less b/public/less/components/filter-list.less similarity index 100% rename from public/less/filter-list.less rename to public/less/components/filter-list.less diff --git a/public/less/filter-table.less b/public/less/components/filter-table.less similarity index 100% rename from public/less/filter-table.less rename to public/less/components/filter-table.less diff --git a/public/less/normform.less b/public/less/components/gf-form.less similarity index 100% rename from public/less/normform.less rename to public/less/components/gf-form.less diff --git a/public/less/gfbox.less b/public/less/components/gfbox.less similarity index 100% rename from public/less/gfbox.less rename to public/less/components/gfbox.less diff --git a/public/less/navbar.less b/public/less/components/navbar.less similarity index 100% rename from public/less/navbar.less rename to public/less/components/navbar.less diff --git a/public/less/pagination.less b/public/less/components/pagination.less similarity index 100% rename from public/less/pagination.less rename to public/less/components/pagination.less diff --git a/public/less/panel.less b/public/less/components/panel.less similarity index 100% rename from public/less/panel.less rename to public/less/components/panel.less diff --git a/public/less/panel_dashlist.less b/public/less/components/panel_dashlist.less similarity index 100% rename from public/less/panel_dashlist.less rename to public/less/components/panel_dashlist.less diff --git a/public/less/panel_graph.less b/public/less/components/panel_graph.less similarity index 100% rename from public/less/panel_graph.less rename to public/less/components/panel_graph.less diff --git a/public/less/panel_singlestat.less b/public/less/components/panel_singlestat.less similarity index 100% rename from public/less/panel_singlestat.less rename to public/less/components/panel_singlestat.less diff --git a/public/less/panel_table.less b/public/less/components/panel_table.less similarity index 100% rename from public/less/panel_table.less rename to public/less/components/panel_table.less diff --git a/public/less/search.less b/public/less/components/search.less similarity index 100% rename from public/less/search.less rename to public/less/components/search.less diff --git a/public/less/sidemenu.less b/public/less/components/sidemenu.less similarity index 100% rename from public/less/sidemenu.less rename to public/less/components/sidemenu.less diff --git a/public/less/submenu.less b/public/less/components/submenu.less similarity index 100% rename from public/less/submenu.less rename to public/less/components/submenu.less diff --git a/public/less/tables_lists.less b/public/less/components/tables_lists.less similarity index 100% rename from public/less/tables_lists.less rename to public/less/components/tables_lists.less diff --git a/public/less/tabs.less b/public/less/components/tabs.less similarity index 100% rename from public/less/tabs.less rename to public/less/components/tabs.less diff --git a/public/less/bootstrap-tagsinput.less b/public/less/components/tagsinput.less similarity index 100% rename from public/less/bootstrap-tagsinput.less rename to public/less/components/tagsinput.less diff --git a/public/less/tightform.less b/public/less/components/tightform.less similarity index 100% rename from public/less/tightform.less rename to public/less/components/tightform.less diff --git a/public/less/timepicker.less b/public/less/components/timepicker.less similarity index 100% rename from public/less/timepicker.less rename to public/less/components/timepicker.less diff --git a/public/less/dropdown.less b/public/less/dropdown.less deleted file mode 100644 index eaaa93f62bd..00000000000 --- a/public/less/dropdown.less +++ /dev/null @@ -1,90 +0,0 @@ -// ========================================================================== -// DROPDOWN -// -// dropdown.scss -// ========================================================================== - - -.select-input { - display: inline-block; - position: relative; - width: auto; - max-width: 100%; - margin: 0 5px; - padding: 0 12px 0 6px; - border: @grafanaPanelBorder; - background-color: @grafanaSelectBackground; - background-color: red; - overflow: hidden; - vertical-align: top; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; -} - -.select-input > select { - width: 115%; - min-width: 110%; - max-width: 115%; - height: 24px; - margin: 0; - padding: 0 20px 0 0; - border: 0; - outline: none; - background: transparent; - color: @linkColor; - font-size: 16px; - font-weight: 400; - line-height: 24px; - text-indent: .01px; - text-overflow: ''; - -webkit-appearance: none; - -moz-appearance: menulist-text; // was set to "window" and caused odd display on windows and linux. - appearance: none; -} - -// This hides native dropdown button arrow in IE -.select-input > select::-ms-expand { - display: none; -} - -.select-input:after { - position: absolute; - top: 50%; - right: 10px; - height: 12px; - margin-top: -6px; - padding: 0; - background-color: transparent; - color: @linkColor; - font: normal normal normal 14px/1 FontAwesome; - text-align: center; - content: '\f0d7'; - pointer-events: none; -} - -.select-input > select:focus { - outline: none; -} - -// This hides focus around selected option in FF -.select-input > select:-moz-focusring { - color: transparent; - text-shadow: 0 0 0 #adafae; -} - -.rt-form .select-input { - margin: 0; - background: @grafanaSelectBackground; -} - -.rt-form .select-interior { - margin: 0; - background-color: @inputBackground; - border: 1px solid @inputBorder; -} - -.rt-form .select-input > select { - height: 34px; - line-height: 34px; -} diff --git a/public/less/fonts.less b/public/less/fonts.less deleted file mode 100644 index 365e5bf033b..00000000000 --- a/public/less/fonts.less +++ /dev/null @@ -1,31 +0,0 @@ - -@font-face { - text-rendering: optimizeLegibility; - font-family: 'raintank'; - src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SAywAAAC8AAAAYGNtYXAaVcxZAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zm7/N1QAAAFwAAAFmGhlYWQFNK2SAAAHCAAAADZoaGVhB14DyAAAB0AAAAAkaG10eAwxAAQAAAdkAAAAHGxvY2ECNgP2AAAHgAAAABBtYXhwABcAvAAAB5AAAAAgbmFtZflvA+cAAAewAAABTnBvc3QAAwAAAAAJAAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYC//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAADwAA/7YDnAO3AAMAHQAhACUAKgAuADEAQgBTAGQAdQCGAJcAqAC5AAA3FyUnJTUTJzUjJwcjJwcjFQcTBxcVIQ0BNzM1NycTAxEXJTkCByERIREHFSc3NzEzAxQWOwEyNj0BNCYrASIGHQE3MzIWHQEUBisBIiY9ATQ2MxcVFBY7ATI2PQE0JisBIgYVMxUUBisBIiY9ATQ2OwE2FhUHNCYrASIGHQEUFjsBMjY9AQc1NDY7ATIWHQEUBisBIiY1BTMyNj0BNCYrASIGHQEUFjM3FRQGKwEiJj0BNDY7ATYWFXsKAS9VAbOKkFsDmDvbEZhXTjY/Alj+wQFGGT4mIU5TU/3CmgJU/awxICDLAWUbE40TGxsTjRMbLo0LERELjQwQEAzQHBONExsbE40UG9cQC40MEBAMjQsQ7BsTjRMbGxONExvXEAuNDBAQDIwMEAEbjRMbGxONFBsbFKgQC40MEBAMjQsQDkMvFvQEAfYoVRcXPDxGDf4JwhFKBFpdHAbPAdn+zwFIF54x/ZsCZUbPygV3/s4TGxsTjBQbHBOMqRAMjQsQEAuMDBEdjBQbHBOMFBsbFIwMEBAMjAwQAREM+RQbHBONExscEo2MjAwQEAyNCxARCy4bE4wUGxwTjRIbuo0LEBALjQwQAREMAAoAAf+5A2IDtQAQACEAMgBDAFQAZQB2AIcAkACVAAATHgE/AT4BLwEuAQ8BDgEfAT8BNhYfARYGDwEGJi8BJjY3NxceAT8BPgEvAS4BDwEOARc3FxYGDwEGJi8BJjY/ATYWFwMuAQ8BDgEfAR4BPwE+AS8BBycmNj8BNhYfARYGDwEGJicFNz4BLwEuAQ8BDgEfAR4BNzcXFgYPAQYmLwEmNj8BNhYXARMfASUvAQMFEwMlEwWdAyAVkhUYAxcDIRSTFBgDFxWTDBQBFwIODZIMFAIXAg8M3hcDIRSSFBgDFwMgFZIUGAPgFwIPDJIMFAIWAg4MkgwUAs4DIRSTFBgDFwMgFZIVGAMXyhcCDwyTDBQBFwIODZIMFAIBL5IUGAMXAyAVkhQYAxcDIRSRFwIPDJIMFAIXAg8MkgwUAv1pahUNAtUNFWv9LJ9jAmxj/ZQCFxQYAxYEIBWSFRgDFwMhFJO3FwIPDJIMFAIXAg8MkwwUAQWTFBgDFgMhFJMUGAMWAyEUIpINEwIXAg8MkwwUAhYCDg3+1xQYAxcDIRSTFBgDFwMhFJO2kwwUAhYCDgyTDBQCFgIPCwMXAyEUkxQYAxcDIBWSFBkD35MMFAIWAg4NkgwUAhYCDgwBU/1PilFwUokCsXD9VwJ9YP2DYAAKAAP/twMyA7QAEAAhADIAQwBUAGUAdgCHAIwAkQAAExQWOwEyNj0BNCYrASIGHQE3MzIWHQEUBisBIiY9ATQ2MxcVFBY7ATI2PQE0JisBIgYVMxUUBisBIiY9ATQ2OwEyFhUBNCYrASIGHQEUFjsBMjY9AQc1NDY7ATIWHQEUBisBIiY1BTMyNj0BNCYrASIGHQEUFjM3FRQGKwEiJj0BNDY7ATIWFQERIREhExEhESF7IBelFx8fF6UXIDelDhITDaUOExQN9CAXpBcgIBekFyD8Ew2lDhMUDaQOE/7rHxelFyAgF6UXH/wUDaUOEhMNpQ0UAUykFyAgF6QXICAXxRMNpQ4TFA2kDhP9YQMv/NE7Arr9RgJOFyAgF6QXICAXpMUTDqQOExMOpA4TIaQXICAXpBcgIBekDhMTDqQOExMO/twXICAXpBcgIBekpKQOExMOpA4TEw43IBekFyAgF6QXINukDhMTDqQOExMOAeb8AwP9/PkCzP00AAEAAAABAADkYnVvXw889QALBAAAAAAA0Ty0lAAAAADRPLSUAAD/tgOcA7cAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA5wAAQAAAAAAAAAAAAAAAAAAAAcAAAAAAAAAAAAAAAACAAAAA50AAANiAAEDMgADAAAAAAAKABQAHgEWAg4CzAABAAAABwC6AA8AAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEAEAAAAAEAAAAAAAIADgBOAAEAAAAAAAMAEAAmAAEAAAAAAAQAEABcAAEAAAAAAAUAFgAQAAEAAAAAAAYACAA2AAEAAAAAAAoANABsAAMAAQQJAAEAEAAAAAMAAQQJAAIADgBOAAMAAQQJAAMAEAAmAAMAAQQJAAQAEABcAAMAAQQJAAUAFgAQAAMAAQQJAAYAEAA+AAMAAQQJAAoANABsAHIAYQBpAG4AdABhAG4AawBWAGUAcgBzAGkAbwBuACAAMQAuADAAcgBhAGkAbgB0AGEAbgBrcmFpbnRhbmsAcgBhAGkAbgB0AGEAbgBrAFIAZQBnAHUAbABhAHIAcgBhAGkAbgB0AGEAbgBrAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), - url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAlsAAsAAAAACSAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIDLGNtYXAAAAFoAAAATAAAAEwaVcxZZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAABZgAAAWYbv83VGhlYWQAAAdUAAAANgAAADYFNK2SaGhlYQAAB4wAAAAkAAAAJAdeA8hobXR4AAAHsAAAABwAAAAcDDEABGxvY2EAAAfMAAAAEAAAABACNgP2bWF4cAAAB9wAAAAgAAAAIAAXALxuYW1lAAAH/AAAAU4AAAFO+W8D53Bvc3QAAAlMAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAv/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAA8AAP+2A5wDtwADAB0AIQAlACoALgAxAEIAUwBkAHUAhgCXAKgAuQAANxclJyU1Eyc1IycHIycHIxUHEwcXFSENATczNTcnEwMRFyU5AgchESERBxUnNzcxMwMUFjsBMjY9ATQmKwEiBh0BNzMyFh0BFAYrASImPQE0NjMXFRQWOwEyNj0BNCYrASIGFTMVFAYrASImPQE0NjsBNhYVBzQmKwEiBh0BFBY7ATI2PQEHNTQ2OwEyFh0BFAYrASImNQUzMjY9ATQmKwEiBh0BFBYzNxUUBisBIiY9ATQ2OwE2FhV7CgEvVQGzipBbA5g72xGYV042PwJY/sEBRhk+JiFOU1P9wpoCVP2sMSAgywFlGxONExsbE40TGy6NCxERC40MEBAM0BwTjRMbGxONFBvXEAuNDBAQDI0LEOwbE40TGxsTjRMb1xALjQwQEAyMDBABG40TGxsTjRQbGxSoEAuNDBAQDI0LEA5DLxb0BAH2KFUXFzw8Rg3+CcIRSgRaXRwGzwHZ/s8BSBeeMf2bAmVGz8oFd/7OExsbE4wUGxwTjKkQDI0LEBALjAwRHYwUGxwTjBQbGxSMDBAQDIwMEAERDPkUGxwTjRMbHBKNjIwMEBAMjQsQEQsuGxOMFBscE40SG7qNCxAQC40MEAERDAAKAAH/uQNiA7UAEAAhADIAQwBUAGUAdgCHAJAAlQAAEx4BPwE+AS8BLgEPAQ4BHwE/ATYWHwEWBg8BBiYvASY2NzcXHgE/AT4BLwEuAQ8BDgEXNxcWBg8BBiYvASY2PwE2FhcDLgEPAQ4BHwEeAT8BPgEvAQcnJjY/ATYWHwEWBg8BBiYnBTc+AS8BLgEPAQ4BHwEeATc3FxYGDwEGJi8BJjY/ATYWFwETHwElLwEDBRMDJRMFnQMgFZIVGAMXAyEUkxQYAxcVkwwUARcCDg2SDBQCFwIPDN4XAyEUkhQYAxcDIBWSFBgD4BcCDwySDBQCFgIODJIMFALOAyEUkxQYAxcDIBWSFRgDF8oXAg8MkwwUARcCDg2SDBQCAS+SFBgDFwMgFZIUGAMXAyEUkRcCDwySDBQCFwIPDJIMFAL9aWoVDQLVDRVr/SyfYwJsY/2UAhcUGAMWBCAVkhUYAxcDIRSTtxcCDwySDBQCFwIPDJMMFAEFkxQYAxYDIRSTFBgDFgMhFCKSDRMCFwIPDJMMFAIWAg4N/tcUGAMXAyEUkxQYAxcDIRSTtpMMFAIWAg4MkwwUAhYCDwsDFwMhFJMUGAMXAyAVkhQZA9+TDBQCFgIODZIMFAIWAg4MAVP9T4pRcFKJArFw/VcCfWD9g2AACgAD/7cDMgO0ABAAIQAyAEMAVABlAHYAhwCMAJEAABMUFjsBMjY9ATQmKwEiBh0BNzMyFh0BFAYrASImPQE0NjMXFRQWOwEyNj0BNCYrASIGFTMVFAYrASImPQE0NjsBMhYVATQmKwEiBh0BFBY7ATI2PQEHNTQ2OwEyFh0BFAYrASImNQUzMjY9ATQmKwEiBh0BFBYzNxUUBisBIiY9ATQ2OwEyFhUBESERIRMRIREheyAXpRcfHxelFyA3pQ4SEw2lDhMUDfQgF6QXICAXpBcg/BMNpQ4TFA2kDhP+6x8XpRcgIBelFx/8FA2lDhITDaUNFAFMpBcgIBekFyAgF8UTDaUOExQNpA4T/WEDL/zROwK6/UYCThcgIBekFyAgF6TFEw6kDhMTDqQOEyGkFyAgF6QXICAXpA4TEw6kDhMTDv7cFyAgF6QXICAXpKSkDhMTDqQOExMONyAXpBcgIBekFyDbpA4TEw6kDhMTDgHm/AMD/fz5Asz9NAABAAAAAQAA5GJ1b18PPPUACwQAAAAAANE8tJQAAAAA0Ty0lAAA/7YDnAO3AAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAOcAAEAAAAAAAAAAAAAAAAAAAAHAAAAAAAAAAAAAAAAAgAAAAOdAAADYgABAzIAAwAAAAAACgAUAB4BFgIOAswAAQAAAAcAugAPAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABABAAAAABAAAAAAACAA4ATgABAAAAAAADABAAJgABAAAAAAAEABAAXAABAAAAAAAFABYAEAABAAAAAAAGAAgANgABAAAAAAAKADQAbAADAAEECQABABAAAAADAAEECQACAA4ATgADAAEECQADABAAJgADAAEECQAEABAAXAADAAEECQAFABYAEAADAAEECQAGABAAPgADAAEECQAKADQAbAByAGEAaQBuAHQAYQBuAGsAVgBlAHIAcwBpAG8AbgAgADEALgAwAHIAYQBpAG4AdABhAG4Aa3JhaW50YW5rAHIAYQBpAG4AdABhAG4AawBSAGUAZwB1AGwAYQByAHIAYQBpAG4AdABhAG4AawBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff'); - font-weight: normal; - font-style: normal; -} - -.gf-icon { - display: inline-block; - font: normal normal normal 14px/1 'raintank'; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.gf-icon-snap-multi:before { - content: "\e600"; -} - -.gf-icon-snap-single-tilt:before { - content: "\e601"; -} - -.gf-icon-snap-single:before { - content: "\e602"; -} - diff --git a/public/less/grafana.less b/public/less/grafana.less index f28893faafc..8f01c5e9429 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -1,35 +1,44 @@ -@import "type.less"; -@import "login.less"; -@import "submenu.less"; -@import "panel_graph.less"; -@import "panel_dashlist.less"; -@import "panel_singlestat.less"; -@import "panel_table.less"; -@import "bootstrap-tagsinput.less"; -@import "tables_lists.less"; -@import "search.less"; -@import "playlist.less"; -@import "panel.less"; -@import "forms.less"; -@import "tightform.less"; -@import "normform.less"; -@import "sidemenu.less"; -@import "navbar.less"; -@import "gfbox.less"; -@import "admin.less"; -@import "pagination.less"; -@import "validation.less"; -@import "gf-fonts.less"; -@import "tabs.less"; -@import "timepicker.less"; -@import "alerting.less"; -@import "apps.less"; -@import "filter-controls.less"; -@import "filter-list.less"; -@import "filter-table.less"; -@import "simple-box.less"; -@import "dropdown.less"; -@import "page.less"; + +// BASE +@import "./base/type.less"; +@import "./base/forms.less"; +@import "./base/fonts.less"; + +// UTILS +@import "./utils/validation.less"; + +// LAYOUTS +@import "./layout/page.less"; + +// COMPONENTS +@import "./components/panel_graph.less"; +@import "./components/submenu.less"; +@import "./components/panel_dashlist.less"; +@import "./components/panel_singlestat.less"; +@import "./components/panel_table.less"; +@import "./components/tagsinput.less"; +@import "./components/tables_lists.less"; +@import "./components/search.less"; +@import "./components/panel.less"; +@import "./components/tightform.less"; +@import "./components/gf-form.less"; +@import "./components/sidemenu.less"; +@import "./components/navbar.less"; +@import "./components/gfbox.less"; +@import "./components/pagination.less"; +@import "./components/tabs.less"; +@import "./components/timepicker.less"; +@import "./components/filter-controls.less"; +@import "./components/filter-list.less"; +@import "./components/filter-table.less"; + +// PAGES +@import "./pages/login.less"; +@import "./pages/playlist.less"; +@import "./pages/admin.less"; +@import "./pages/alerting.less"; +@import "./pages/apps.less"; + .row-control-inner { padding:0px; diff --git a/public/less/page.less b/public/less/layout/page.less similarity index 100% rename from public/less/page.less rename to public/less/layout/page.less diff --git a/public/less/admin.less b/public/less/pages/admin.less similarity index 100% rename from public/less/admin.less rename to public/less/pages/admin.less diff --git a/public/less/alerting.less b/public/less/pages/alerting.less similarity index 100% rename from public/less/alerting.less rename to public/less/pages/alerting.less diff --git a/public/less/apps.less b/public/less/pages/apps.less similarity index 100% rename from public/less/apps.less rename to public/less/pages/apps.less diff --git a/public/less/login.less b/public/less/pages/login.less similarity index 100% rename from public/less/login.less rename to public/less/pages/login.less diff --git a/public/less/playlist.less b/public/less/pages/playlist.less similarity index 100% rename from public/less/playlist.less rename to public/less/pages/playlist.less diff --git a/public/less/simple-box.less b/public/less/simple-box.less deleted file mode 100644 index 07062c864d5..00000000000 --- a/public/less/simple-box.less +++ /dev/null @@ -1,50 +0,0 @@ - -@simpleBoxBorderWidth: 0.2rem; -@simpleBoxMargin: 1.5rem; -@simpleBoxBodyPadding: 1rem 0 0.5rem 1rem; - -.simple-box { - margin-top: @simpleBoxMargin; - background: @grafanaPanelBackground; -} - -.simple-box-header { - font-weight: normal; - line-height: 2.5rem; - color: @textColor; - margin: 0; - padding-left: 1rem; - // border-bottom: @simpleBoxBorderWidth solid @bodyBackground; -} - -.simple-box-column { - flex-direction: row; - width: 25%; - border-right: @simpleBoxBorderWidth solid @bodyBackground; - ul { - margin: 0.7rem 0 1rem 1.2rem; - } -} - -.simple-box-column:last-child { - border: none; -} - -.simple-box-column-header { - font-size: @fontSizeLarge; - i { - padding-right: 0.3rem; - } -} - -.simple-box-body { - padding: @simpleBoxBodyPadding; -} - -.flex-container { - display: flex; -} - -.flex-column { - flex-direction: row; -} diff --git a/public/less/validation.less b/public/less/utils/validation.less similarity index 100% rename from public/less/validation.less rename to public/less/utils/validation.less From 50c79df70f76c4174276d1e4ffd2ce3ded42e322 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 20:44:41 +0100 Subject: [PATCH 048/444] ux(less): less cleanup of unused styles, restructuring and consolidating --- public/app/core/components/navbar/navbar.html | 36 ++- .../features/panel/partials/soloPanel.html | 2 +- public/app/partials/dashboard.html | 4 +- public/less/base/base.less | 8 + public/less/{bootstrap => base}/code.less | 7 +- public/less/bootstrap/bootstrap.less | 3 - public/less/bootstrap/layouts.less | 16 -- public/less/bootstrap/media.less | 55 ----- public/less/bootstrap/navbar.less | 205 ------------------ public/less/bootswatch.dark.less | 55 ----- public/less/components/navbar.less | 57 ++++- public/less/components/old_stuff.less | 20 ++ public/less/components/scrollbar.less | 41 ++++ public/less/grafana.less | 46 +--- public/less/overrides.less | 131 +---------- public/less/utils/validation.less | 4 + 16 files changed, 155 insertions(+), 535 deletions(-) create mode 100644 public/less/base/base.less rename public/less/{bootstrap => base}/code.less (88%) delete mode 100644 public/less/bootstrap/layouts.less delete mode 100644 public/less/bootstrap/media.less delete mode 100644 public/less/bootstrap/navbar.less create mode 100644 public/less/components/old_stuff.less create mode 100644 public/less/components/scrollbar.less diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 8f070616d6e..aeb2c8b04fd 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,24 +1,22 @@
      -
      - -
      - - - - - - - -
      - - -
      - - -
      - -
      +
      +
      + + + + + + +
      + + +
      + + +
      + +
      diff --git a/public/app/features/panel/partials/soloPanel.html b/public/app/features/panel/partials/soloPanel.html index eb0c95baaec..e76ad724343 100644 --- a/public/app/features/panel/partials/soloPanel.html +++ b/public/app/features/panel/partials/soloPanel.html @@ -1,4 +1,4 @@ -
      +
      diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 3d1f44042fe..685429d5e84 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -16,14 +16,14 @@
      - +
      -
      +
      diff --git a/public/less/base/base.less b/public/less/base/base.less new file mode 100644 index 00000000000..871abc436c0 --- /dev/null +++ b/public/less/base/base.less @@ -0,0 +1,8 @@ +html { + height: 100%; +} + +body { + height: 100%; + background: @bodyBackground; +} diff --git a/public/less/bootstrap/code.less b/public/less/base/code.less similarity index 88% rename from public/less/bootstrap/code.less rename to public/less/base/code.less index 266a926e73d..f45d0bbf52a 100644 --- a/public/less/bootstrap/code.less +++ b/public/less/base/code.less @@ -10,6 +10,7 @@ pre { #font > #family > .monospace; font-size: @baseFontSize - 2; color: @grayDark; + background-color: @codeTagBackground; .border-radius(3px); } @@ -34,7 +35,6 @@ pre { white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; - border: 1px solid #ccc; // fallback for IE7-8 border: 1px solid rgba(0,0,0,.15); .border-radius(@baseBorderRadius); @@ -54,8 +54,3 @@ pre { } } -// Enable scrollable blocks of code -.pre-scrollable { - max-height: 340px; - overflow-y: scroll; -} \ No newline at end of file diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 5fbb1439bbc..5001c873541 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -16,7 +16,6 @@ // Grid system and page structure @import "scaffolding.less"; @import "grid.less"; -@import "layouts.less"; // Base CSS @import "type.less"; @@ -35,7 +34,6 @@ // Components: Nav @import "navs.less"; -@import "navbar.less"; // Components: Popovers @import "modals.less"; @@ -43,7 +41,6 @@ @import "popovers.less"; // Components: Misc -@import "media.less"; @import "labels-badges.less"; // Utility classes diff --git a/public/less/bootstrap/layouts.less b/public/less/bootstrap/layouts.less deleted file mode 100644 index 24a2062117c..00000000000 --- a/public/less/bootstrap/layouts.less +++ /dev/null @@ -1,16 +0,0 @@ -// -// Layouts -// -------------------------------------------------- - - -// Container (centered, fixed-width layouts) -.container { - .container-fixed(); -} - -// Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { - padding-right: @gridGutterWidth; - padding-left: @gridGutterWidth; - .clearfix(); -} \ No newline at end of file diff --git a/public/less/bootstrap/media.less b/public/less/bootstrap/media.less deleted file mode 100644 index e461e446d23..00000000000 --- a/public/less/bootstrap/media.less +++ /dev/null @@ -1,55 +0,0 @@ -// Media objects -// Source: http://stubbornella.org/content/?p=497 -// -------------------------------------------------- - - -// Common styles -// ------------------------- - -// Clear the floats -.media, -.media-body { - overflow: hidden; - *overflow: visible; - zoom: 1; -} - -// Proper spacing between instances of .media -.media, -.media .media { - margin-top: 15px; -} -.media:first-child { - margin-top: 0; -} - -// For images and videos, set to block -.media-object { - display: block; -} - -// Reset margins on headings for tighter default spacing -.media-heading { - margin: 0 0 5px; -} - - -// Media image alignment -// ------------------------- - -.media > .pull-left { - margin-right: 10px; -} -.media > .pull-right { - margin-left: 10px; -} - - -// Media list variation -// ------------------------- - -// Undo default ul/ol styles -.media-list { - margin-left: 0; - list-style: none; -} diff --git a/public/less/bootstrap/navbar.less b/public/less/bootstrap/navbar.less deleted file mode 100644 index dd8d91bf1e7..00000000000 --- a/public/less/bootstrap/navbar.less +++ /dev/null @@ -1,205 +0,0 @@ -// -// Navbars (Redux) -// -------------------------------------------------- - - -// COMMON STYLES -// ------------- - -// Base class and wrapper -.navbar { - overflow: visible; - margin-bottom: @baseLineHeight; - - // Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar - *position: relative; - *z-index: 2; -} - -// Inner for background effects -// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present -.navbar-inner { - min-height: @navbarHeight; - padding-left: 20px; - padding-right: 20px; - background-color: @navbarBackground; - border: 1px solid @navbarBorder; - - // Prevent floats from breaking the navbar - .clearfix(); -} - -// Set width to auto for default container -// We then reset it for fixed navbars in the #gridSystem mixin -.navbar .container { - width: auto; -} - -// NAVIGATION -// ---------- - -.navbar .nav { - position: relative; - left: 0; - float: left; - margin: 0 10px 0 0; -} - -.nav { - display: block; -} - -.navbar .nav.pull-right { - float: right; // redeclare due to specificity - margin-right: 0; // remove margin on float right nav -} -.navbar .nav > li { - float: left; -} - -// Links -.navbar .nav > li > a { - float: none; - // Vertically center the text given @navbarHeight - padding: ((@navbarHeight - @baseLineHeight) / 2) 15px ((@navbarHeight - @baseLineHeight) / 2); - color: @navbarLinkColor; - text-decoration: none; - text-shadow: 0 1px 0 @navbarBackgroundHighlight; -} -.navbar .nav .dropdown-toggle .caret { - margin-top: 8px; -} - -// Hover/focus -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active - color: @navbarLinkColorHover; - text-decoration: none; -} - -// Active nav items -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { - color: @navbarLinkColorActive; - text-decoration: none; - background-color: @navbarLinkBackgroundActive; - .box-shadow(inset 0 3px 8px rgba(0,0,0,.125)); -} - -// Navbar button for toggling navbar items in responsive layouts -// These definitions need to come after '.navbar .btn' -.navbar .btn-navbar { - display: none; - float: right; - padding: 7px 10px; - margin-left: 5px; - margin-right: 5px; - .buttonBackground(darken(@navbarBackgroundHighlight, 5%), darken(@navbarBackground, 5%)); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)"); -} -.navbar .btn-navbar .icon-bar { - display: block; - width: 18px; - height: 2px; - background-color: #f5f5f5; - .border-radius(1px); - .box-shadow(0 1px 0 rgba(0,0,0,.25)); -} -.btn-navbar .icon-bar + .icon-bar { - margin-top: 3px; -} - - - -// Dropdown menus -// -------------- - -// Menu position and menu carets -.navbar .nav > li > .dropdown-menu { - &:before { - content: ''; - display: inline-block; - border-left: 7px solid transparent; - border-right: 7px solid transparent; - border-bottom: 7px solid #ccc; - border-bottom-color: @dropdownBorder; - position: absolute; - top: -7px; - left: 9px; - } - &:after { - content: ''; - display: inline-block; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: 6px solid @dropdownBackground; - position: absolute; - top: -6px; - left: 10px; - } -} -// Menu position and menu caret support for dropups via extra dropup class -.navbar-fixed-bottom .nav > li > .dropdown-menu { - &:before { - border-top: 7px solid #ccc; - border-top-color: @dropdownBorder; - border-bottom: 0; - bottom: -7px; - top: auto; - } - &:after { - border-top: 6px solid @dropdownBackground; - border-bottom: 0; - bottom: -6px; - top: auto; - } -} - -// Caret should match text color on hover/focus -.navbar .nav li.dropdown > a:hover .caret, -.navbar .nav li.dropdown > a:focus .caret { - border-top-color: @navbarLinkColorHover; - border-bottom-color: @navbarLinkColorHover; -} - -// Remove background color from open dropdown -.navbar .nav li.dropdown.open > .dropdown-toggle, -.navbar .nav li.dropdown.active > .dropdown-toggle, -.navbar .nav li.dropdown.open.active > .dropdown-toggle { - background-color: @navbarLinkBackgroundActive; - color: @navbarLinkColorActive; -} -.navbar .nav li.dropdown > .dropdown-toggle .caret { - border-top-color: @navbarLinkColor; - border-bottom-color: @navbarLinkColor; -} -.navbar .nav li.dropdown.open > .dropdown-toggle .caret, -.navbar .nav li.dropdown.active > .dropdown-toggle .caret, -.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret { - border-top-color: @navbarLinkColorActive; - border-bottom-color: @navbarLinkColorActive; -} - -// Right aligned menus need alt position -.navbar .pull-right > li > .dropdown-menu, -.navbar .nav > li > .dropdown-menu.pull-right { - left: auto; - right: 0; - &:before { - left: auto; - right: 12px; - } - &:after { - left: auto; - right: 13px; - } - .dropdown-menu { - left: auto; - right: 100%; - margin-left: 0; - margin-right: -1px; - .border-radius(6px 0 6px 6px); - } -} diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index b92ec592fe4..4cece97d3f9 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -21,61 +21,6 @@ hr { // NAVBAR // ----------------------------------------------------- -.navbar { - - .navbar-inner { - .border-radius(0); - .box-shadow(none); - } - - .brand { - padding: 0px 15px; - color: @navbarBrandColor; - font-weight: normal; - text-shadow: none; - } - - .nav > li > a { - padding: 15px 15px 14px; - border-bottom: 1px solid transparent; - } - - .nav > li > a:hover, - .nav > .active > a, - .nav > .active > a:hover { - } - - .nav > .active > a, - .nav > .active > a:hover, - .nav > .active > a:focus { - .box-shadow(none); - } - - .navbar-text { - margin-bottom: 1px; - padding: 15px 15px 14px; - line-height: inherit; - } - - .divider-vertical { - margin: 0; - border-left: 1px solid @grayDark; - border-right-width: 0; - } - - .search-query, - .search-query:focus, - .search-query.focused { - .border-radius(1px); - background-color: @grayDark; - line-height: normal; - color: @grayLight; - text-shadow: none; - .placeholder(@gray); - } -} - - // NAV // ----------------------------------------------------- diff --git a/public/less/components/navbar.less b/public/less/components/navbar.less index 8aeb8de3e7d..2b8ed23a8f4 100644 --- a/public/less/components/navbar.less +++ b/public/less/components/navbar.less @@ -1,19 +1,68 @@ + + .navbar { + overflow: visible; position: relative; z-index: 110; - margin-bottom: 0; } -.navbar .navbar-inner { - padding-left: 0px; +.navbar-inner { + min-height: @navbarHeight; + padding-right: 20px; + background-color: @navbarBackground; border-bottom: @navbarBorder; + + .clearfix(); } -.navbar .nav>li>a { +.navbar .nav { + position: relative; + left: 0; + float: left; + margin: 0 10px 0 0; +} + +.nav { + display: block; +} + +.navbar .nav.pull-right { + float: right; // redeclare due to specificity + margin-right: 0; // remove margin on float right nav +} + +.navbar .nav > li { + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; padding: 17px 13px 13px; + color: @navbarLinkColor; + text-decoration: none; + .fa { font-size: 115%; } } +// Hover/focus +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active + color: @navbarLinkColorHover; + text-decoration: none; +} + +// Active nav items +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: @navbarLinkColorActive; + text-decoration: none; + background-color: @navbarLinkBackgroundActive; +} + + .fa.top-nav-breadcrumb-icon { margin: 18px 0 6px 5px; float: left; diff --git a/public/less/components/old_stuff.less b/public/less/components/old_stuff.less new file mode 100644 index 00000000000..eae5eb558ce --- /dev/null +++ b/public/less/components/old_stuff.less @@ -0,0 +1,20 @@ + +div.editor-row { + vertical-align: top; +} + +div.editor-row div.section { + margin-right: 20px; + vertical-align: top; + display: inline-block; +} + +div.editor-option { + vertical-align: top; + display: inline-block; + margin-right: 10px; +} + +div.editor-option label { + display: block; +} diff --git a/public/less/components/scrollbar.less b/public/less/components/scrollbar.less new file mode 100644 index 00000000000..8c9d13303c8 --- /dev/null +++ b/public/less/components/scrollbar.less @@ -0,0 +1,41 @@ +// +// Srollbars +// + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar:hover { + height: 8px; +} + +::-webkit-scrollbar-button:start:decrement, +::-webkit-scrollbar-button:end:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement { display: none; } +::-webkit-scrollbar-button:horizontal:increment { display: none; } +::-webkit-scrollbar-button:vertical:decrement { display: none; } +::-webkit-scrollbar-button:vertical:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } +::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } +::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } +::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } +::-webkit-scrollbar-track-piece { background-color: transparent; } + +::-webkit-scrollbar-thumb:vertical { + height: 50px; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); + border: 1px solid @scrollbarBorder; + border-top: 1px solid @scrollbarBorder; + border-left: 1px solid @scrollbarBorder; +} + +::-webkit-scrollbar-thumb:horizontal { + width: 50px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); + border: 1px solid @scrollbarBorder; + border-top: 1px solid @scrollbarBorder; + border-left: 1px solid @scrollbarBorder; +} + diff --git a/public/less/grafana.less b/public/less/grafana.less index 8f01c5e9429..b57b3eaa1c4 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -1,8 +1,10 @@ // BASE +@import "./base/base.less"; @import "./base/type.less"; @import "./base/forms.less"; @import "./base/fonts.less"; +@import "./base/code.less"; // UTILS @import "./utils/validation.less"; @@ -31,6 +33,9 @@ @import "./components/filter-controls.less"; @import "./components/filter-list.less"; @import "./components/filter-table.less"; +@import "./components/scrollbar.less"; +@import "./components/old_stuff.less"; +@import "./components/navbar.less"; // PAGES @import "./pages/login.less"; @@ -92,47 +97,6 @@ } -// -// Srollbars -// - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar:hover { - height: 8px; -} - -::-webkit-scrollbar-button:start:decrement, -::-webkit-scrollbar-button:end:increment { display: none; } -::-webkit-scrollbar-button:horizontal:decrement { display: none; } -::-webkit-scrollbar-button:horizontal:increment { display: none; } -::-webkit-scrollbar-button:vertical:decrement { display: none; } -::-webkit-scrollbar-button:vertical:increment { display: none; } -::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } -::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } -::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } -::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } -::-webkit-scrollbar-track-piece { background-color: transparent; } - -::-webkit-scrollbar-thumb:vertical { - height: 50px; - background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); - border: 1px solid @scrollbarBorder; - border-top: 1px solid @scrollbarBorder; - border-left: 1px solid @scrollbarBorder; -} - -::-webkit-scrollbar-thumb:horizontal { - width: 50px; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); - border: 1px solid @scrollbarBorder; - border-top: 1px solid @scrollbarBorder; - border-left: 1px solid @scrollbarBorder; -} - // SPECTRUM CSS overrides diff --git a/public/less/overrides.less b/public/less/overrides.less index a1e923ea28b..2f2aedb373b 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -1,134 +1,6 @@ -// Containers -// --------------------- -.container-fluid { - padding-left: 0px; - padding-right: 0px; -} - // Backgrounds // --------------------- -.bgNav { - background: @navbarBackground; -} - -.bgPrimary { - background: @btnPrimaryBackground; - color: rgba(255,255,255,.90); -} - -.bgInfo { - background: @btnInfoBackground; - color: rgba(255,255,255,.90); - -} - -.bgSuccess { - background: @btnSuccessBackground; - color: rgba(255,255,255,.90); - -} - -.bgWarning { - background: @btnWarningBackground; - color: rgba(255,255,255,.90); -} - -.bgDanger { - background: @btnDangerBackground; - color: rgba(255,255,255,.90); - -} - -.bgInverse { - background: @btnInverseBackground; - color: rgba(255,255,255,.90); -} - -code, pre { - background-color: @codeTagBackground; -} - -div.editor-row { - vertical-align: top; -} - -div.editor-row div.section { - margin-right: 20px; - vertical-align: top; - display: inline-block; -} - -div.editor-option { - vertical-align: top; - display: inline-block; - margin-right: 10px; -} - -div.editor-option label { - display: block; -} - -#events { - font-size: 12px; -} - -.version { - font-size: 85%; -} - -.legend { - color: @black; -} - -div.fake-input { - background-color: @inputBackground; - border: 1px solid @inputBorder; - .border-radius(@inputBorderRadius @inputBorderRadius @inputBorderRadius @inputBorderRadius); -} - -hr.small { - margin: 5px 0px; -} - -form input.ng-invalid { - color: @errorText; -} - -.editor-title { - margin-right: 10px; - font-size: 1.7em; - font-weight: bold; - text-transform:capitalize; -} - -.editor-title small { - opacity: 0.5; - font-size: 0.7em; - font-weight: normal; -} - -.bordered { - border: 1px solid @tableBorder; -} - -.table-unpadded { - th, - td { - padding: 0px 2px; - } -} - -.spy { - position:absolute; - right:0px; - top:0px; -} - -.navbar-inner { - border-width: 0 0 0px; -} - .grafana-row { margin-bottom: 5px; } @@ -149,6 +21,8 @@ form input.ng-invalid { text-align: center; display: inline-block; line-height: 30px; + background: @btnSuccessBackground; + color: rgba(255,255,255,.90); } .row-button { @@ -156,6 +30,7 @@ form input.ng-invalid { float: left; cursor: pointer; line-height: 31px; + background-color: @blueDark; } .row-text { diff --git a/public/less/utils/validation.less b/public/less/utils/validation.less index fdb398f2245..cdc9e45ac4c 100644 --- a/public/less/utils/validation.less +++ b/public/less/utils/validation.less @@ -1,3 +1,7 @@ input[type=text].ng-dirty.ng-invalid { box-shadow: inset 0 0px 7px @red; } + +form input.ng-invalid { + color: @errorText; +} From 9e0ed7bc8ea990669b5c8f9e4341aff0adf551a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 21:00:25 +0100 Subject: [PATCH 049/444] ux(less): less cleanup of unused styles, restructuring and consolidating, part 2 --- public/less/base/type.less | 14 + public/less/bootstrap/bootstrap.less | 3 - public/less/bootstrap/tables.less | 244 ------------------ public/less/bootstrap/type.less | 1 - public/less/bootswatch.dark.less | 17 -- .../components/{panel.less => dashboard.less} | 88 +++++-- .../{bootstrap => components}/popovers.less | 9 +- public/less/grafana.less | 4 +- public/less/overrides.less | 105 -------- public/less/utils/angular.less | 7 + 10 files changed, 94 insertions(+), 398 deletions(-) delete mode 100644 public/less/bootstrap/tables.less delete mode 100644 public/less/bootstrap/type.less rename public/less/components/{panel.less => dashboard.less} (72%) rename public/less/{bootstrap => components}/popovers.less (91%) create mode 100644 public/less/utils/angular.less diff --git a/public/less/base/type.less b/public/less/base/type.less index cefc051c091..b0cbecb4f6c 100644 --- a/public/less/base/type.less +++ b/public/less/base/type.less @@ -240,3 +240,17 @@ a.external-link { color: @blue; text-decoration: underline; } + + +.link { + color: @linkColor; + cursor: pointer; +} + +.link:hover { + color: @linkColorHover; +} + +.pointer { + cursor: pointer; +} diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 5001c873541..4a3559318ed 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -18,9 +18,7 @@ @import "grid.less"; // Base CSS -@import "type.less"; @import "forms.less"; -@import "tables.less"; // Components: common @import "dropdowns.less"; @@ -38,7 +36,6 @@ // Components: Popovers @import "modals.less"; @import "tooltip.less"; -@import "popovers.less"; // Components: Misc @import "labels-badges.less"; diff --git a/public/less/bootstrap/tables.less b/public/less/bootstrap/tables.less deleted file mode 100644 index 0e35271e11f..00000000000 --- a/public/less/bootstrap/tables.less +++ /dev/null @@ -1,244 +0,0 @@ -// -// Tables -// -------------------------------------------------- - - -// BASE TABLES -// ----------------- - -table { - max-width: 100%; - background-color: @tableBackground; - border-collapse: collapse; - border-spacing: 0; -} - -// BASELINE STYLES -// --------------- - -.table { - width: 100%; - margin-bottom: @baseLineHeight; - // Cells - th, - td { - padding: 8px; - line-height: @baseLineHeight; - text-align: left; - vertical-align: top; - border-top: 1px solid @tableBorder; - } - th { - font-weight: bold; - } - // Bottom align for column headings - thead th { - vertical-align: bottom; - } - // Remove top border from thead by default - caption + thead tr:first-child th, - caption + thead tr:first-child td, - colgroup + thead tr:first-child th, - colgroup + thead tr:first-child td, - thead:first-child tr:first-child th, - thead:first-child tr:first-child td { - border-top: 0; - } - // Account for multiple tbody instances - tbody + tbody { - border-top: 2px solid @tableBorder; - } - - // Nesting - .table { - background-color: @bodyBackground; - } -} - - - -// CONDENSED TABLE W/ HALF PADDING -// ------------------------------- - -.table-condensed { - th, - td { - padding: 4px 5px; - } -} - - -// BORDERED VERSION -// ---------------- - -.table-bordered { - border: 1px solid @tableBorder; - border-collapse: separate; // Done so we can round those corners! - *border-collapse: collapse; // IE7 can't round corners anyway - border-left: 0; - .border-radius(@baseBorderRadius); - th, - td { - border-left: 1px solid @tableBorder; - } - // Prevent a double border - caption + thead tr:first-child th, - caption + tbody tr:first-child th, - caption + tbody tr:first-child td, - colgroup + thead tr:first-child th, - colgroup + tbody tr:first-child th, - colgroup + tbody tr:first-child td, - thead:first-child tr:first-child th, - tbody:first-child tr:first-child th, - tbody:first-child tr:first-child td { - border-top: 0; - } - // For first th/td in the first row in the first thead or tbody - thead:first-child tr:first-child > th:first-child, - tbody:first-child tr:first-child > td:first-child, - tbody:first-child tr:first-child > th:first-child { - .border-top-left-radius(@baseBorderRadius); - } - // For last th/td in the first row in the first thead or tbody - thead:first-child tr:first-child > th:last-child, - tbody:first-child tr:first-child > td:last-child, - tbody:first-child tr:first-child > th:last-child { - .border-top-right-radius(@baseBorderRadius); - } - // For first th/td (can be either) in the last row in the last thead, tbody, and tfoot - thead:last-child tr:last-child > th:first-child, - tbody:last-child tr:last-child > td:first-child, - tbody:last-child tr:last-child > th:first-child, - tfoot:last-child tr:last-child > td:first-child, - tfoot:last-child tr:last-child > th:first-child { - .border-bottom-left-radius(@baseBorderRadius); - } - // For last th/td (can be either) in the last row in the last thead, tbody, and tfoot - thead:last-child tr:last-child > th:last-child, - tbody:last-child tr:last-child > td:last-child, - tbody:last-child tr:last-child > th:last-child, - tfoot:last-child tr:last-child > td:last-child, - tfoot:last-child tr:last-child > th:last-child { - .border-bottom-right-radius(@baseBorderRadius); - } - - // Clear border-radius for first and last td in the last row in the last tbody for table with tfoot - tfoot + tbody:last-child tr:last-child td:first-child { - .border-bottom-left-radius(0); - } - tfoot + tbody:last-child tr:last-child td:last-child { - .border-bottom-right-radius(0); - } - - // Special fixes to round the left border on the first td/th - caption + thead tr:first-child th:first-child, - caption + tbody tr:first-child td:first-child, - colgroup + thead tr:first-child th:first-child, - colgroup + tbody tr:first-child td:first-child { - .border-top-left-radius(@baseBorderRadius); - } - caption + thead tr:first-child th:last-child, - caption + tbody tr:first-child td:last-child, - colgroup + thead tr:first-child th:last-child, - colgroup + tbody tr:first-child td:last-child { - .border-top-right-radius(@baseBorderRadius); - } - -} - - - - -// ZEBRA-STRIPING -// -------------- - -// Default zebra-stripe styles (alternating gray and transparent backgrounds) -.table-striped { - tbody { - > tr:nth-child(odd) > td, - > tr:nth-child(odd) > th { - background-color: @tableBackgroundAccent; - } - } -} - - -// HOVER EFFECT -// ------------ -// Placed here since it has to come after the potential zebra striping -.table-hover { - tbody { - tr:hover > td, - tr:hover > th { - background-color: @tableBackgroundHover; - } - } -} - - -// TABLE CELL SIZING -// ----------------- - -// Reset default grid behavior -table td[class*="span"], -table th[class*="span"], -.row-fluid table td[class*="span"], -.row-fluid table th[class*="span"] { - display: table-cell; - float: none; // undo default grid column styles - margin-left: 0; // undo default grid column styles -} - -// Change the column widths to account for td/th padding -.table td, -.table th { - &.span1 { .tableColumns(1); } - &.span2 { .tableColumns(2); } - &.span3 { .tableColumns(3); } - &.span4 { .tableColumns(4); } - &.span5 { .tableColumns(5); } - &.span6 { .tableColumns(6); } - &.span7 { .tableColumns(7); } - &.span8 { .tableColumns(8); } - &.span9 { .tableColumns(9); } - &.span10 { .tableColumns(10); } - &.span11 { .tableColumns(11); } - &.span12 { .tableColumns(12); } -} - - - -// TABLE BACKGROUNDS -// ----------------- -// Exact selectors below required to override .table-striped - -.table tbody tr { - &.success > td { - background-color: @successBackground; - } - &.error > td { - background-color: @errorBackground; - } - &.warning > td { - background-color: @warningBackground; - } - &.info > td { - background-color: @infoBackground; - } -} - -// Hover states for .table-hover -.table-hover tbody tr { - &.success:hover > td { - background-color: darken(@successBackground, 5%); - } - &.error:hover > td { - background-color: darken(@errorBackground, 5%); - } - &.warning:hover > td { - background-color: darken(@warningBackground, 5%); - } - &.info:hover > td { - background-color: darken(@infoBackground, 5%); - } -} diff --git a/public/less/bootstrap/type.less b/public/less/bootstrap/type.less deleted file mode 100644 index 8b137891791..00000000000 --- a/public/less/bootstrap/type.less +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 4cece97d3f9..ea9bc4901e1 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -5,14 +5,6 @@ // TYPOGRAPHY // ----------------------------------------------------- -html { - height: 100%; -} - -body { - height: 100%; - background: @bodyBackground; -} hr { border-bottom: none; @@ -253,15 +245,6 @@ a:hover { .box-shadow(none); } -.popover { - .border-radius(0); - - &-title { - border-bottom: none; - color: @white; - } - -} .footer { border-top: 1px solid @grayDark; diff --git a/public/less/components/panel.less b/public/less/components/dashboard.less similarity index 72% rename from public/less/components/panel.less rename to public/less/components/dashboard.less index 19bf93ed49a..09b8d40e32c 100644 --- a/public/less/components/panel.less +++ b/public/less/components/dashboard.less @@ -1,3 +1,71 @@ + +.grafana-row { + margin-bottom: 5px; +} + +.row-tab { + .dropdown-menu-right { + top: 0; + left: 33px; + } +} + +.row-tab-button { + padding: 0px; + cursor: pointer; + vertical-align: middle; + width: 30px; + height: 30px; + text-align: center; + display: inline-block; + line-height: 30px; + background: @btnSuccessBackground; + color: rgba(255,255,255,.90); +} + +.row-button { + width: 30px; + float: left; + cursor: pointer; + line-height: 31px; + background-color: @blueDark; +} + +.row-text { + white-space: nowrap; + text-transform: uppercase; + font-weight: bold; + font-size: 0.9em; + text-align: center; + line-height: 31px; + height: 31px; +} + +.row-close { + padding: 0px; + margin: 0px; + background: @grafanaPanelBackground; + text-align: center; +} + +.row-close-buttons { + position: absolute; + left: 0; +} + +.row-open { + margin-top: 5px; + left: -28px; + position: absolute; + z-index: 100; + transition: .10s left; + transition-delay: .10s; + + &:hover { + left: -12px; + } +} + .panel { display: inline-block; float: left; @@ -144,26 +212,6 @@ } } -.panel-ghost{ - width: 100%; - .panel-container { - border: none; - background: transparent; - } - .panel-ghost-list { - margin: 10px 0 10px 20px; - } - - button { - text-align: left; - min-width: 135px; - .fa { - position: relative; - left: -5px; - } - } -} - .panel-time-info { font-weight: bold; float: right; diff --git a/public/less/bootstrap/popovers.less b/public/less/components/popovers.less similarity index 91% rename from public/less/bootstrap/popovers.less rename to public/less/components/popovers.less index aae35c8cd56..0d4516b080c 100644 --- a/public/less/bootstrap/popovers.less +++ b/public/less/components/popovers.less @@ -9,16 +9,13 @@ left: 0; z-index: @zindexPopover; display: none; - max-width: 276px; + max-width: 480px; padding: 1px; text-align: left; // Reset given new insertion method background-color: @popoverBackground; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; + background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.2); - .border-radius(6px); .box-shadow(0 5px 10px rgba(0,0,0,.2)); // Overrides for proper insertion @@ -38,8 +35,6 @@ font-weight: normal; line-height: 18px; background-color: @popoverTitleBackground; - border-bottom: 1px solid darken(@popoverTitleBackground, 5%); - .border-radius(5px 5px 0 0); &:empty { display: none; diff --git a/public/less/grafana.less b/public/less/grafana.less index b57b3eaa1c4..eb6cacae6dc 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -8,6 +8,7 @@ // UTILS @import "./utils/validation.less"; +@import "./utils/angular.less"; // LAYOUTS @import "./layout/page.less"; @@ -21,7 +22,7 @@ @import "./components/tagsinput.less"; @import "./components/tables_lists.less"; @import "./components/search.less"; -@import "./components/panel.less"; +@import "./components/dashboard.less"; @import "./components/tightform.less"; @import "./components/gf-form.less"; @import "./components/sidemenu.less"; @@ -36,6 +37,7 @@ @import "./components/scrollbar.less"; @import "./components/old_stuff.less"; @import "./components/navbar.less"; +@import "./components/popovers.less"; // PAGES @import "./pages/login.less"; diff --git a/public/less/overrides.less b/public/less/overrides.less index 2f2aedb373b..d20340c4c98 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -1,112 +1,7 @@ // Backgrounds // --------------------- -.grafana-row { - margin-bottom: 5px; -} -.row-tab { - .dropdown-menu-right { - top: 0; - left: 33px; - } -} - -.row-tab-button { - padding: 0px; - cursor: pointer; - vertical-align: middle; - width: 30px; - height: 30px; - text-align: center; - display: inline-block; - line-height: 30px; - background: @btnSuccessBackground; - color: rgba(255,255,255,.90); -} - -.row-button { - width: 30px; - float: left; - cursor: pointer; - line-height: 31px; - background-color: @blueDark; -} - -.row-text { - white-space: nowrap; - text-transform: uppercase; - font-weight: bold; - font-size: 0.9em; - text-align: center; - line-height: 31px; - height: 31px; -} - -.row-close { - padding: 0px; - margin: 0px; - background: @grafanaPanelBackground; - text-align: center; -} - -.row-close-buttons { - position: absolute; - left: 0; -} - -.row-open { - margin-top: 5px; - left:-28px; - position: absolute; - z-index: 100; - transition: .10s left; - transition-delay: .10s; - -webkit-transition-delay: .10s; -} - -.row-open:hover { - left:-12px; -} - -.odd { - background-color: @tableBackgroundAccent; -} - -.nomargin { - margin: 0px; -} - - -[ng\:cloak], [ng-cloak], .ng-cloak { - display: none !important; -} - -.table tbody + tbody { - border-top: 0px; -} - -.ui-draggable-dragging { - display: block; - z-index: 9999; -} - -.link { - color: @linkColor; - cursor: pointer; -} - -.link:hover { - color: @linkColorHover; -} - -.pointer { - cursor: pointer; -} - -.popover { - max-width: 480px; -} .tiny { font-size: 50%; diff --git a/public/less/utils/angular.less b/public/less/utils/angular.less new file mode 100644 index 00000000000..1519b249920 --- /dev/null +++ b/public/less/utils/angular.less @@ -0,0 +1,7 @@ + + +[ng\:cloak], [ng-cloak], .ng-cloak { + display: none !important; +} + + From 5836a6ec4b2a8682167415aa9e6e25bfc3b06a15 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 21:50:06 +0100 Subject: [PATCH 050/444] ux(less): more less refactoring and cleanup, consolidating alerts --- public/app/features/datasources/edit_ctrl.js | 2 - public/less/base/base.less | 1 + public/less/base/type.less | 3 +- public/less/bootstrap/alerts.less | 79 --------------- public/less/bootstrap/bootstrap.less | 1 - public/less/bootswatch.dark.less | 22 +--- public/less/bootswatch.light.less | 15 +-- public/less/components/alerts.less | 68 +++++++++++++ public/less/components/dashboard.less | 4 + public/less/grafana.less | 1 + public/less/overrides.less | 101 ------------------- public/less/variables.dark.less | 12 +-- public/less/variables.light.less | 1 + 13 files changed, 85 insertions(+), 225 deletions(-) delete mode 100644 public/less/bootstrap/alerts.less create mode 100644 public/less/components/alerts.less diff --git a/public/app/features/datasources/edit_ctrl.js b/public/app/features/datasources/edit_ctrl.js index c3242f5b565..cbb3cfdd4c5 100644 --- a/public/app/features/datasources/edit_ctrl.js +++ b/public/app/features/datasources/edit_ctrl.js @@ -105,8 +105,6 @@ function (angular, _, config) { $scope.updateFrontendSettings().then(function() { if (test) { $scope.testDatasource(); - } else { - $location.path('datasources'); } }); }); diff --git a/public/less/base/base.less b/public/less/base/base.less index 871abc436c0..9c639c007cd 100644 --- a/public/less/base/base.less +++ b/public/less/base/base.less @@ -6,3 +6,4 @@ body { height: 100%; background: @bodyBackground; } + diff --git a/public/less/base/type.less b/public/less/base/type.less index b0cbecb4f6c..4c2839a5603 100644 --- a/public/less/base/type.less +++ b/public/less/base/type.less @@ -21,7 +21,8 @@ p { // ------------------------- // Ex: 14px base font * 85% = about 12px -small { font-size: 85%; } +.small, small { font-size: 85%; } +.large { font-size: 120%; } strong { font-weight: bold; } em { font-style: italic; color: @headingsColor; } diff --git a/public/less/bootstrap/alerts.less b/public/less/bootstrap/alerts.less deleted file mode 100644 index 0116b191b3b..00000000000 --- a/public/less/bootstrap/alerts.less +++ /dev/null @@ -1,79 +0,0 @@ -// -// Alerts -// -------------------------------------------------- - - -// Base styles -// ------------------------- - -.alert { - padding: 8px 35px 8px 14px; - margin-bottom: @baseLineHeight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: @warningBackground; - border: 1px solid @warningBorder; - .border-radius(@baseBorderRadius); -} -.alert, -.alert h4 { - // Specified for the h4 to prevent conflicts of changing @headingsColor - color: @warningText; -} -.alert h4 { - margin: 0; -} - -// Adjust close link position -.alert .close { - position: relative; - top: -2px; - right: -21px; - line-height: @baseLineHeight; -} - - -// Alternate styles -// ------------------------- - -.alert-success { - background-color: @successBackground; - border-color: @successBorder; - color: @successText; -} -.alert-success h4 { - color: @successText; -} -.alert-danger, -.alert-error { - background-color: @errorBackground; - border-color: @errorBorder; - color: @errorText; -} -.alert-danger h4, -.alert-error h4 { - color: @errorText; -} -.alert-info { - background-color: @infoBackground; - border-color: @infoBorder; - color: @infoText; -} -.alert-info h4 { - color: @infoText; -} - - -// Block alerts -// ------------------------- - -.alert-block { - padding-top: 14px; - padding-bottom: 14px; -} -.alert-block > p, -.alert-block > ul { - margin-bottom: 0; -} -.alert-block p + p { - margin-top: 5px; -} diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 4a3559318ed..641d36b80c2 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -28,7 +28,6 @@ // Components: Buttons & Alerts @import "buttons.less"; @import "button-groups.less"; -@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less // Components: Nav @import "navs.less"; diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index ea9bc4901e1..3ebc6b79152 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -49,11 +49,11 @@ hr { .btn { padding: 8px 12px; - margin-right:10px; + margin-right: 10px; background-image: none; border: none; .border-radius(0px); - text-shadow: none; + text-shadow: 0 1px 0 rgba(0,0,0,.5); &.disabled { box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05); @@ -155,24 +155,6 @@ legend, label { } } -// ALERTS, LABELS, BADGES -// ----------------------------------------------------- - -.alert, -.alert .alert-heading, -.alert-success, -.alert-success .alert-heading, -.alert-danger, -.alert-error, -.alert-danger .alert-heading, -.alert-error .alert-heading, -.alert-info, -.alert-info .alert-heading { - color: @white; - text-shadow: none; - border: none; -} - .label { color: @white; } diff --git a/public/less/bootswatch.light.less b/public/less/bootswatch.light.less index 31ab74330ad..3b9ec72de87 100644 --- a/public/less/bootswatch.light.less +++ b/public/less/bootswatch.light.less @@ -140,12 +140,12 @@ a.text-success:hover { color: darken(@green, 10%); } // ----------------------------------------------------- .btn { - padding: 5px 12px; + padding: 8px 12px; background-image: none; .box-shadow(none); border: none; .border-radius(3px); - text-shadow: none; + text-shadow: 0 1px 0 rgba(0,0,0,.5); &.disabled { box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05); @@ -289,17 +289,6 @@ legend { // ----------------------------------------------------- -// ALERTS, LABELS, BADGES -// ----------------------------------------------------- - -.alert { - text-shadow: none; - - &-heading, h1, h2, h3, h4, h5, h6 { - color: @white; - } -} - .label { &-success { diff --git a/public/less/components/alerts.less b/public/less/components/alerts.less new file mode 100644 index 00000000000..6824697326c --- /dev/null +++ b/public/less/components/alerts.less @@ -0,0 +1,68 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: 8px 35px 13px 14px; + margin-bottom: @baseLineHeight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + background-color: @warningBackground; + position: relative; + color: @white; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + border-radius: 2px; +} + +// Alternate styles +// ------------------------- + +.alert-success { + background-color: @successBackground; +} + +.alert-danger, +.alert-error { + background-color: @errorBackground; +} +.alert-info { + background-color: @infoBackground; +} +.alert-warning { + background-color: @warningBackground; +} + +.page-alert-list { + z-index: 8000; + min-width: 300px; + max-width: 300px; + position: fixed; + right: 20px; + top: 56px; +} + +.alert-close { + position: absolute; + top: -4px; + right: -2px; + width: 18px; + height: 18px; + padding: 0; + background: @white; + border-radius: 50%; + border: none; + font-size: 1.1rem; + color: @grayDarker; + .fa { + position: relative; + top: -2px; + } +} + +.alert-title { + font-weight: @fontWeightSemi; + padding-bottom: 2px; +} diff --git a/public/less/components/dashboard.less b/public/less/components/dashboard.less index 09b8d40e32c..024c3954ba0 100644 --- a/public/less/components/dashboard.less +++ b/public/less/components/dashboard.less @@ -66,6 +66,10 @@ } } +div.flot-text { + color: @textColor !important; +} + .panel { display: inline-block; float: left; diff --git a/public/less/grafana.less b/public/less/grafana.less index eb6cacae6dc..875c314c770 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -38,6 +38,7 @@ @import "./components/old_stuff.less"; @import "./components/navbar.less"; @import "./components/popovers.less"; +@import "./components/alerts.less"; // PAGES @import "./pages/login.less"; diff --git a/public/less/overrides.less b/public/less/overrides.less index d20340c4c98..6ea47048342 100644 --- a/public/less/overrides.less +++ b/public/less/overrides.less @@ -2,107 +2,6 @@ // --------------------- - -.tiny { - font-size: 50%; -} - -.smaller { - font-size: 70%; -} - -.small { - font-size: 85%; -} - -.large { - font-size: 120%; -} - -.strong { - font-weight: bold; -} - -a { - cursor: pointer; -} - -.normal { - font-weight: normal; -} - -.light { - font-weight: 200; -} - -.input-smaller { - width: 75px; -} - -.string {color:lighten(@textColor, 5%)} -.number {color:lighten(@infoText, 5%)} -.boolean {color:lighten(@warningText, 5%)} -.key {color:lighten(@errorText, 5%)} - -.btn-active { - background-color: #E6E6E6; - background-image: none; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.05); - outline: 0 none -} - -.remove:hover { - background-color: @btnDangerBackgroundHighlight; -} - -.faded { - opacity: 0.2; -} - -div.flot-text { - color: @textColor !important; -} - -.page-alert-list { - z-index:8000; - min-width: 300px; - max-width: 300px; - position: fixed; - right: 20px; - top: 56px; -} - -.alert { - color: @white; - padding-bottom: 13px; - position: relative; -} - -.alert-close { - position: absolute; - top: -4px; - right: -2px; - width: 19px; - height: 19px; - padding: 0; - background: @grayLighter; - border-radius: 50%; - border: none; - font-size: 1.1rem; - color: @grayDarker; -} - -.alert-title { - font-weight: bold; - padding-bottom: 2px; -} - - -.alert-warning { - background-color: @warningBackground; - border-color: @warningBorder; -} - /* =================================================== * popover-extra-placements.css v0.1 * http://twitter.github.com/bootstrap-popover-extra-placements diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 2159b5196b8..2be071bc151 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -76,6 +76,7 @@ @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; +@fontWeightSemi: 600; @headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily @headingsFontWeight: 400; // instead of browser default, bold @@ -273,20 +274,15 @@ // ------------------------- @warningText: darken(#c09853, 10%); @warningBackground: @orange; -@warningBorder: transparent; @errorText: #b94a48; -@errorBackground: @grayLighter; -@errorBorder: darken(spin(@errorBackground, -10), 3%); +@errorBackground: @btnDangerBackground; @successText: #468847; -@successBackground: @grayLighter; -@successBorder: darken(spin(@successBackground, -10), 5%); +@successBackground: @btnSuccessBackground; @infoText: @blueDark; -@infoBackground: @grayLighter; -@infoBorder: darken(spin(@infoBackground, -10), 7%); - +@infoBackground: @btnInfoBackground; // Tooltips and popovers // ------------------------- diff --git a/public/less/variables.light.less b/public/less/variables.light.less index 30b470a197c..bae029698b0 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -85,6 +85,7 @@ @baseFontSize: 14px; @baseFontWeight: 400; +@fontWeightSemi: 600; @baseFontFamily: @sansFontFamily; @baseLineHeight: 20px; @altFontFamily: @serifFontFamily; From fcc3a7f6e4211dc56d1d8afbbe0150b1b1c5f4b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 22:13:06 +0100 Subject: [PATCH 051/444] ux(less): more less refactoring and cleanup, modals, and dropdowns --- public/less/base/code.less | 10 +- public/less/bootstrap/bootstrap.less | 3 - .../less/bootstrap/component-animations.less | 22 -- public/less/bootstrap/modals.less | 87 ------ public/less/bootswatch.dark.less | 12 - .../dropdown.less} | 9 +- public/less/components/modals.less | 149 ++++++++++ public/less/components/tags.less | 24 ++ public/less/components/typeahead.less | 6 + public/less/grafana.dark.less | 1 - public/less/grafana.less | 100 +------ public/less/grafana.light.less | 1 - public/less/overrides.less | 266 ------------------ 13 files changed, 194 insertions(+), 496 deletions(-) delete mode 100644 public/less/bootstrap/component-animations.less delete mode 100644 public/less/bootstrap/modals.less rename public/less/{bootstrap/dropdowns.less => components/dropdown.less} (97%) create mode 100644 public/less/components/modals.less create mode 100644 public/less/components/tags.less create mode 100644 public/less/components/typeahead.less delete mode 100644 public/less/overrides.less diff --git a/public/less/base/code.less b/public/less/base/code.less index f45d0bbf52a..9304855475a 100644 --- a/public/less/base/code.less +++ b/public/less/base/code.less @@ -6,17 +6,18 @@ // Inline and block code styles code, pre { - padding: 0 3px 2px; #font > #family > .monospace; font-size: @baseFontSize - 2; - color: @grayDark; background-color: @codeTagBackground; + color: @textColor; + border: 1px solid darken(@codeTagBackground, 15%); + padding: 2px; + .border-radius(3px); } // Inline code code { - padding: 2px 4px; color: #d14; background-color: #f7f7f9; border: 1px solid #e1e1e8; @@ -26,7 +27,6 @@ code { // Blocks of code pre { display: block; - padding: (@baseLineHeight - 1) / 2; margin: 0 0 @baseLineHeight / 2; font-size: @baseFontSize - 1; // 14px to 13px line-height: @baseLineHeight; @@ -35,8 +35,6 @@ pre { white-space: pre; white-space: pre-wrap; background-color: #f5f5f5; - border: 1px solid rgba(0,0,0,.15); - .border-radius(@baseBorderRadius); // Make prettyprint styles more spaced out for readability &.prettyprint { diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 641d36b80c2..7a3e9edc842 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -21,8 +21,6 @@ @import "forms.less"; // Components: common -@import "dropdowns.less"; -@import "component-animations.less"; @import "close.less"; // Components: Buttons & Alerts @@ -33,7 +31,6 @@ @import "navs.less"; // Components: Popovers -@import "modals.less"; @import "tooltip.less"; // Components: Misc diff --git a/public/less/bootstrap/component-animations.less b/public/less/bootstrap/component-animations.less deleted file mode 100644 index d614263a76a..00000000000 --- a/public/less/bootstrap/component-animations.less +++ /dev/null @@ -1,22 +0,0 @@ -// -// Component animations -// -------------------------------------------------- - - -.fade { - opacity: 0; - .transition(opacity .15s linear); - &.in { - opacity: 1; - } -} - -.collapse { - position: relative; - height: 0; - overflow: hidden; - .transition(height .35s ease); - &.in { - height: auto; - } -} diff --git a/public/less/bootstrap/modals.less b/public/less/bootstrap/modals.less deleted file mode 100644 index 7c4a7e95b1d..00000000000 --- a/public/less/bootstrap/modals.less +++ /dev/null @@ -1,87 +0,0 @@ -// -// Modals -// -------------------------------------------------- - -// Background -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @zindexModalBackdrop; - background-color: @black; - // Fade for backdrop - &.fade { opacity: 0; } -} - -.modal-backdrop, -.modal-backdrop.fade.in { - .opacity(70); -} - -// Base modal -.modal { - position: fixed; - z-index: @zindexModal; - width: 100%; - background-color: @white; - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - // Remove focus outline from opened modal - outline: none; - - &.fade { - .transition(e('opacity .3s linear, top .3s ease-out')); - top: -25%; - } - &.fade.in { top: 10%; } -} -.modal-header { - padding: 9px 15px; - border-bottom: 1px solid #eee; - // Close icon - .close { margin-top: 2px; } - // Heading - h3 { - margin: 0; - line-height: 30px; - } -} - -// Body (where all modal content resides) -.modal-body { - position: relative; - overflow-y: auto; - //max-height: 700px; - padding: 15px; -} -// Remove bottom margin if need be -.modal-form { - margin-bottom: 0; -} - -// Footer (for actions) -.modal-footer { - padding: 14px 15px 15px; - margin-bottom: 0; - text-align: right; // right align buttons - background-color: #f5f5f5; - border-top: 1px solid #ddd; - .box-shadow(inset 0 1px 0 @white); - .clearfix(); // clear it in case folks use .pull-* classes on buttons - - // Properly space out buttons - .btn + .btn { - margin-left: 5px; - margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs - } - // but override that for button groups - .btn-group .btn + .btn { - margin-left: -1px; - } - // and override it for block buttons as well - .btn-block + .btn-block { - margin-left: 0; - } -} diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 3ebc6b79152..550d5d601de 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -212,19 +212,7 @@ a:hover { .border-radius(0); } -.modal { - background-color: @grafanaPanelBackground; -} - -.modal-header { - border-bottom: 1px solid @grafanaPanelBackground; -} - .modal-footer { - background-color: @grafanaPanelBackground; - border-top: 1px solid @grafanaPanelBackground; - .border-radius(0 0 0px 0px); - .box-shadow(none); } diff --git a/public/less/bootstrap/dropdowns.less b/public/less/components/dropdown.less similarity index 97% rename from public/less/bootstrap/dropdowns.less rename to public/less/components/dropdown.less index ee098ef8e74..d7c46d92afa 100644 --- a/public/less/bootstrap/dropdowns.less +++ b/public/less/components/dropdown.less @@ -45,7 +45,7 @@ z-index: @zindexDropdown; display: none; // none by default, but block on "open" of the menu float: left; - min-width: 160px; + min-width: 140px; padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; @@ -67,12 +67,17 @@ // Links within the dropdown menu > li > a { display: block; - padding: 3px 20px; + padding: 3px 20px 3px 15px; clear: both; font-weight: normal; line-height: @baseLineHeight; color: @dropdownLinkColor; white-space: nowrap; + + i { + padding-right: 5px; + color: @linkColorDisabled; + } } } diff --git a/public/less/components/modals.less b/public/less/components/modals.less new file mode 100644 index 00000000000..5e4d730494f --- /dev/null +++ b/public/less/components/modals.less @@ -0,0 +1,149 @@ +// +// Modals +// -------------------------------------------------- + +// Background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: @zindexModalBackdrop; + background-color: @black; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + .opacity(70); +} + +// Base modal +.modal { + position: fixed; + z-index: @zindexModal; + width: 100%; + background-color: @grafanaPanelBackground; + .box-shadow(0 3px 7px rgba(0,0,0,0.3)); + .background-clip(padding-box); + outline: none; + + max-width: 800px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + top: 20%; +} + +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid @grafanaPanelBackground; +} + +// Body (where all modal content resides) +.modal-body { + position: relative; + overflow-y: auto; +} + +// Remove bottom margin if need be +.modal-form { + margin-bottom: 0; +} + +// Footer (for actions) +.modal-footer { + padding: 14px 15px 15px; + border-top: 1px solid @grafanaPanelBackground; + background-color: @grafanaPanelBackground; + text-align: right; // right align buttons + .clearfix(); // clear it in case folks use .pull-* classes on buttons +} + +.modal-no-header { + border: 1px solid @grafanaTargetFuncBackground; + text-align: center; + + h3 { + margin-top: 30px; + } + + .modal-close { + float: right; + font-size: 140%; + padding: 10px; + } + + .modal-tagline { + font-size: 16px; + } +} + +.confirm-modal { + max-width: 500px; + + .confirm-modal-icon { + padding-top: 41px; + font-size: 280%; + color: @green; + padding-bottom: 20px; + } + + .confirm-modal-title { + font-size: 18px; + color: @linkColor; + margin-bottom: 15px; + } + + .confirm-modal-buttons { + margin-top: 35px; + margin-bottom: 35px; + button { + margin-right: 5px + } + } +} + +.share-modal-body { + text-align: center; + padding: 10px 0; + + .tight-form { + text-align: left; + } + + .share-modal-options { + margin: 11px 20px 33px 20px; + } + + .share-modal-big-icon { + .fa, .icon-gf { + font-size: 70px; + } + } + + .share-snapshot-info-text { + margin: 10px 105px; + strong { + color: @headingsColor; + font-weight: 500; + } + } + + .share-snapshot-header { + margin: 20px 0 22px 0; + } + + .tight-form { + text-align: left; + } + + .share-snapshot-link { + max-width: 716px; + white-space: nowrap; + overflow: hidden; + display: block; + text-overflow: ellipsis; + } +} diff --git a/public/less/components/tags.less b/public/less/components/tags.less new file mode 100644 index 00000000000..b19eab1244a --- /dev/null +++ b/public/less/components/tags.less @@ -0,0 +1,24 @@ + +// Labels & Badges +.label-tag { + background-color: @purple; + color: darken(@white, 5%); + white-space: nowrap; + border-radius: 3px; + text-shadow: none; + font-size: 13px; + padding: 2px 6px; + border-width: 1px; + border-style: solid; + .icon-tag { + position: relative; + top: 1px; + padding-right: 4px; + } +} + +.label-tag:hover { + opacity: 0.85; + background-color: darken(@purple, 10%); +} + diff --git a/public/less/components/typeahead.less b/public/less/components/typeahead.less new file mode 100644 index 00000000000..23802504b0b --- /dev/null +++ b/public/less/components/typeahead.less @@ -0,0 +1,6 @@ + +// typeahead max height +.typeahead { + max-height: 300px; + overflow-y: auto; +} diff --git a/public/less/grafana.dark.less b/public/less/grafana.dark.less index 96f24eeec02..ba8897f5aac 100644 --- a/public/less/grafana.dark.less +++ b/public/less/grafana.dark.less @@ -1,5 +1,4 @@ @import "variables.dark.less"; @import "bootstrap/bootstrap.less"; @import "bootswatch.dark.less"; -@import "overrides.less"; @import "grafana.less"; diff --git a/public/less/grafana.less b/public/less/grafana.less index 875c314c770..bd557bcde83 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -39,6 +39,10 @@ @import "./components/navbar.less"; @import "./components/popovers.less"; @import "./components/alerts.less"; +@import "./components/typeahead.less"; +@import "./components/tags.less"; +@import "./components/modals.less"; +@import "./components/dropdown.less"; // PAGES @import "./pages/login.less"; @@ -81,15 +85,6 @@ width: 24px; } -.modal { - max-width: 800px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - top: 20%; -} - .histogram-chart { position:relative; } @@ -237,93 +232,6 @@ td:first-child { text-align: right; } } -.modal-no-header { - border: 1px solid @grafanaTargetFuncBackground; - text-align: center; - - h3 { - margin-top: 30px; - } - - .modal-close { - float: right; - font-size: 140%; - padding: 10px; - } - - .modal-tagline { - font-size: 16px; - } -} - -.confirm-modal { - max-width: 500px; - - .confirm-modal-icon { - padding-top: 41px; - font-size: 280%; - color: @green; - padding-bottom: 20px; - } - - .confirm-modal-title { - font-size: 18px; - color: @linkColor; - margin-bottom: 15px; - } - - .confirm-modal-buttons { - margin-top: 35px; - margin-bottom: 35px; - button { - margin-right: 5px - } - } -} - -.share-modal-body { - text-align: center; - padding: 10px 0; - - .tight-form { - text-align: left; - } - - .share-modal-options { - margin: 11px 20px 33px 20px; - } - - .share-modal-big-icon { - .fa, .icon-gf { - font-size: 70px; - } - } - - .share-snapshot-info-text { - margin: 10px 105px; - strong { - color: @headingsColor; - font-weight: 500; - } - } - - .share-snapshot-header { - margin: 20px 0 22px 0; - } - - .tight-form { - text-align: left; - } - - .share-snapshot-link { - max-width: 716px; - white-space: nowrap; - overflow: hidden; - display: block; - text-overflow: ellipsis; - } -} - .query-keyword { font-weight: bold; color: @blue; diff --git a/public/less/grafana.light.less b/public/less/grafana.light.less index 601e0cbf15a..6f07f7f9075 100644 --- a/public/less/grafana.light.less +++ b/public/less/grafana.light.less @@ -1,5 +1,4 @@ @import "variables.light.less"; @import "bootstrap/bootstrap.less"; @import "bootswatch.light.less"; -@import "overrides.less"; @import "grafana.less"; diff --git a/public/less/overrides.less b/public/less/overrides.less deleted file mode 100644 index 6ea47048342..00000000000 --- a/public/less/overrides.less +++ /dev/null @@ -1,266 +0,0 @@ -// Backgrounds -// --------------------- - - -/* =================================================== - * popover-extra-placements.css v0.1 - * http://twitter.github.com/bootstrap-popover-extra-placements - * =================================================== - * Copyright 2012 Daniel Kleehammer - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - * ========================================================== */ - - -/************************* - * Top Positions - *************************/ - -/** Top Left **/ -.popover.topLeft { - margin-top: -10px; -} - -.popover.topLeft .arrow { - bottom: -10px; - left: 25%; - margin-left: -10px; - border-width: 10px 10px 0; - border-top-color: @popoverTitleBackground; -} - -.popover.topLeft .arrow:after { - border-width: 11px 11px 0; - border-top-color: rgba(0, 0, 0, 0.25); - bottom: -1px; - left: -11px; -} - -/** Top Right **/ -.popover.topRight { - margin-top: -10px; -} - -.popover.topRight .arrow { - bottom: -10px; - left: 75%; - margin-left: -10px; - border-width: 10px 10px 0; - border-top-color: @popoverTitleBackground;; -} - -.popover.topRight .arrow:after { - border-width: 11px 11px 0; - border-top-color: rgba(0, 0, 0, 0.25); - bottom: -1px; - left: -11px; -} - - -/************************* - * Right Positions - *************************/ -.popover { - &.rightTop .arrow { - top: 10%; - left: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-left-width: 0; - border-right-color: #999; // IE8 fallback - border-right-color: @popoverArrowOuterColor; - &:after { - left: 1px; - bottom: -@popoverArrowWidth; - border-left-width: 0; - border-right-color: @popoverArrowColor; - } - } - &.rightBottom .arrow { - top: 90%; - left: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-left-width: 0; - border-right-color: #999; // IE8 fallback - border-right-color: @popoverArrowOuterColor; - &:after { - left: 1px; - bottom: -@popoverArrowWidth; - border-left-width: 0; - border-right-color: @popoverArrowColor; - } - } - &.bottomLeft .arrow { - left: 10%; - margin-left: -@popoverArrowOuterWidth; - border-top-width: 0; - border-bottom-color: #999; // IE8 fallback - border-bottom-color: @popoverArrowOuterColor; - top: -@popoverArrowOuterWidth; - &:after { - top: 1px; - margin-left: -@popoverArrowWidth; - border-top-width: 0; - border-bottom-color: @popoverArrowColor; - } - } - &.bottomRight .arrow { - left: 90%; - margin-left: -@popoverArrowOuterWidth; - border-top-width: 0; - border-bottom-color: #999; // IE8 fallback - border-bottom-color: @popoverArrowOuterColor; - top: -@popoverArrowOuterWidth; - &:after { - top: 1px; - margin-left: -@popoverArrowWidth; - border-top-width: 0; - border-bottom-color: @popoverArrowColor; - } - } - &.leftTop .arrow { - top: 10%; - right: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-right-width: 0; - border-left-color: #999; // IE8 fallback - border-left-color: @popoverArrowOuterColor; - &:after { - right: 1px; - border-right-width: 0; - border-left-color: @popoverArrowColor; - bottom: -@popoverArrowWidth; - } - } - &.leftBottom .arrow { - top: 90%; - right: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-right-width: 0; - border-left-color: #999; // IE8 fallback - border-left-color: @popoverArrowOuterColor; - &:after { - right: 1px; - border-right-width: 0; - border-left-color: @popoverArrowColor; - bottom: -@popoverArrowWidth; - } - } - &.topLeft .arrow { - left: 10%; - margin-left: -@popoverArrowOuterWidth; - border-bottom-width: 0; - border-top-color: #999; // IE8 fallback - border-top-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - &:after { - bottom: 1px; - margin-left: -@popoverArrowWidth; - border-bottom-width: 0; - border-top-color: @popoverArrowColor; - } - } - &.topRight .arrow { - left: 90%; - margin-left: -@popoverArrowOuterWidth; - border-bottom-width: 0; - border-top-color: #999; // IE8 fallback - border-top-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - &:after { - bottom: 1px; - margin-left: -@popoverArrowWidth; - border-bottom-width: 0; - border-top-color: @popoverArrowColor; - } - } -} - -// typeahead max height -.typeahead { - max-height: 300px; - overflow-y: auto; -} - -// Labels & Badges -.label-tag { - background-color: @purple; - color: darken(@white, 5%); - white-space: nowrap; - border-radius: 3px; - text-shadow: none; - font-size: 13px; - padding: 2px 6px; - border-width: 1px; - border-style: solid; - .icon-tag { - position: relative; - top: 1px; - padding-right: 4px; - } -} - -.label-tag:hover { - opacity: 0.85; - background-color: darken(@purple, 10%); -} - -.label-tag-email { - padding-left: 25px; - background: @black url(/img/envelope.png) 5px 50% no-repeat !important; - border-color: @black !important; - font-size: 12px; - font-weight: normal; - border-radius: 5px; -} - - -// inspector -.inspector-request-table { - td { - padding: 5px; - } - - td:first-child { - white-space: nowrap; - } -} - -.modal-body { - padding: 0; -} - -// pre -code, pre { - background-color: @codeTagBackground; - color: @textColor; - border: 1px solid darken(@codeTagBackground, 15%); - padding: 2px; -} - -.dropdown-menu { - min-width: 140px; - > li > a { - padding: 3px 20px 3px 15px; - i { - padding-right: 5px; - color: @linkColorDisabled; - } - } -} - -.dropdown-submenu>.dropdown-menu.dropdown-submenu-left { - left: auto; - right: 100%; - margin-left: 0; - margin-right: -1px; -} From 37b031afcf90638f48171789ce2a20304757a654 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 14 Feb 2016 22:33:03 +0100 Subject: [PATCH 052/444] ux(css): more progress on css refactor / cleanup --- .../app/plugins/panel/graph/graph_tooltip.js | 3 +- public/less/bootstrap/bootstrap.less | 4 - public/less/components/color_picker.less | 37 +++++ public/less/components/dashboard.less | 34 ++++- public/less/components/panel_graph.less | 24 ++- .../{bootstrap => components}/tooltip.less | 32 +++- public/less/grafana.less | 140 +----------------- public/less/variables.dark.less | 2 +- public/less/variables.light.less | 2 +- 9 files changed, 128 insertions(+), 150 deletions(-) create mode 100644 public/less/components/color_picker.less rename public/less/{bootstrap => components}/tooltip.less (76%) diff --git a/public/app/plugins/panel/graph/graph_tooltip.js b/public/app/plugins/panel/graph/graph_tooltip.js index f10e57ef21a..bdf5f91ac3c 100644 --- a/public/app/plugins/panel/graph/graph_tooltip.js +++ b/public/app/plugins/panel/graph/graph_tooltip.js @@ -34,7 +34,8 @@ function ($) { }; this.showTooltip = function(absoluteTime, relativeTime, innerHtml, pos) { - var body = '
      '+ absoluteTime + '
      (' + relativeTime + ')
      ' ; + var body = '
      '+ absoluteTime + + ' (' + relativeTime + ')
      '; body += innerHtml + '
      '; $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY); }; diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 7a3e9edc842..4c9f974bf2a 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -30,10 +30,6 @@ // Components: Nav @import "navs.less"; -// Components: Popovers -@import "tooltip.less"; - -// Components: Misc @import "labels-badges.less"; // Utility classes diff --git a/public/less/components/color_picker.less b/public/less/components/color_picker.less new file mode 100644 index 00000000000..a9e599ef2b5 --- /dev/null +++ b/public/less/components/color_picker.less @@ -0,0 +1,37 @@ + +.sp-replacer { + background: inherit; + border: none; + color: inherit; + padding: 0; +} + +.sp-replacer:hover, .sp-replacer.sp-active { + border-color: inherit; + color: inherit; +} + +.sp-container { + border-radius: 0; + background-color: @heroUnitBackground; + border: none; + padding: 0; +} + +.sp-palette-container, .sp-picker-container { + border: none; +} + +.sp-dd { + display: none; +} + +.sp-preview { + position: relative; + width: 15px; + height: 15px; + border: none; + margin-right: 5px; + float: left; + z-index: 0; +} diff --git a/public/less/components/dashboard.less b/public/less/components/dashboard.less index 024c3954ba0..38172d89044 100644 --- a/public/less/components/dashboard.less +++ b/public/less/components/dashboard.less @@ -24,7 +24,7 @@ } .row-button { - width: 30px; + width: 24px; float: left; cursor: pointer; line-height: 31px; @@ -66,6 +66,36 @@ } } + +.row-control-inner { + padding:0px; + margin:0px; + position:relative; +} + +.hide-controls { + padding: 0; + .row-tab { + display: none; + } + .add-row-panel-hint { + display: none; + } +} + +.playlist-active { + .add-row-panel-hint, + .dashnav-refresh-action, + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } + + .grafana-menu-stop-playlist { + display: list-item; + } +} + div.flot-text { color: @textColor !important; } @@ -110,7 +140,7 @@ div.flot-text { .panel-title { border: 0px; - font-weight: bold; + font-weight: @fontWeightSemi; position: relative; cursor: pointer; width: 100%; diff --git a/public/less/components/panel_graph.less b/public/less/components/panel_graph.less index 36e96d67441..dfef812811c 100644 --- a/public/less/components/panel_graph.less +++ b/public/less/components/panel_graph.less @@ -3,6 +3,24 @@ cursor: crosshair; } +.histogram-chart { + position: relative; +} + +.datapoints-warning { + pointer: none; + position: absolute; + top: 50%; + left: 50%; + z-index: 10; + margin-top: -50px; + margin-left: -100px; + width: 200px; + text-align: center; + cursor: auto; + padding: 10px; +} + .graph-legend { margin: 0 20px; text-align: center; @@ -206,11 +224,15 @@ .graph-tooltip-time { text-align: center; - font-weight: bold; + font-weight: @fontWeightSemi; position: relative; top: -3px; } + .tone-down { + opacity: 0.7; + } + .label-tag { margin-right: 4px; margin-top: 8px; diff --git a/public/less/bootstrap/tooltip.less b/public/less/components/tooltip.less similarity index 76% rename from public/less/bootstrap/tooltip.less rename to public/less/components/tooltip.less index 83d5f2bd765..1922128d4d3 100644 --- a/public/less/bootstrap/tooltip.less +++ b/public/less/components/tooltip.less @@ -12,7 +12,7 @@ font-size: 11px; line-height: 1.4; .opacity(0); - &.in { .opacity(80); } + &.in { .opacity(100); } &.top { margin-top: -3px; padding: 5px 0; } &.right { margin-left: 3px; padding: 0 5px; } &.bottom { margin-top: 3px; padding: 5px 0; } @@ -21,7 +21,7 @@ // Wrapper for the tooltip content .tooltip-inner { - max-width: 200px; + max-width: 400px; padding: 8px; color: @tooltipColor; text-align: center; @@ -68,3 +68,31 @@ border-bottom-color: @tooltipArrowColor; } } + +.grafana-tooltip { + position : absolute; + top: -1000; + left: 0; + color: @tooltipColor; + padding: 10px; + font-size: 11pt; + font-weight : 200; + background-color: @tooltipBackground; + border-radius: 5px; + z-index: 9999; + max-width: 800px; + max-height: 600px; + overflow: hidden; + line-height: 14px; + a { + color: @tooltipLinkColor; + } +} + +.grafana-tooltip hr { + padding: 2px; + color: #c8c8c8; + margin: 0px; + border-bottom: 0px solid #c8c8c8; +} + diff --git a/public/less/grafana.less b/public/less/grafana.less index bd557bcde83..813ba26b312 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -43,6 +43,8 @@ @import "./components/tags.less"; @import "./components/modals.less"; @import "./components/dropdown.less"; +@import "./components/color_picker.less"; +@import "./components/tooltip.less"; // PAGES @import "./pages/login.less"; @@ -51,144 +53,6 @@ @import "./pages/alerting.less"; @import "./pages/apps.less"; - -.row-control-inner { - padding:0px; - margin:0px; - position:relative; -} - -.hide-controls { - padding: 0; - .row-tab { - display: none; - } - .add-row-panel-hint { - display: none; - } -} - -.playlist-active { - .add-row-panel-hint, - .dashnav-refresh-action, - .dashnav-zoom-out, - .dashnav-action-icons { - display: none; - } - - .grafana-menu-stop-playlist { - display: list-item; - } -} - -.row-button { - width: 24px; -} - -.histogram-chart { - position:relative; -} - -.scrollable { - max-height: 300px; - overflow: auto; -} - - - -// SPECTRUM CSS overrides - -.sp-replacer { - background: inherit; - border: none; - color: inherit; - padding: 0; -} - -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: inherit; - color: inherit; -} - -.sp-container { - border-radius: 0; - background-color: @heroUnitBackground; - border: none; - padding: 0; -} - -.sp-palette-container, .sp-picker-container { - border: none; -} - -.sp-dd { - display: none; -} - -.sp-preview { - position: relative; - width: 15px; - height: 15px; - border: none; - margin-right: 5px; - float: left; - z-index: 0; -} - -.datapoints-warning { - pointer: none; - position: absolute; - top: 50%; - left: 50%; - z-index: 10; - margin-top: -50px; - margin-left: -100px; - width: 200px; - text-align: center; - cursor: auto; - padding: 10px; -} - -.metrics-editor-help:hover { - .hide { - display: block; - } -} - -.grafana-tooltip { - position : absolute; - top: -1000; - left: 0; - color: @tooltipColor; - padding: 10px; - font-size: 11pt; - font-weight : 200; - background-color: @tooltipBackground; - border-radius: 5px; - z-index: 9999; - max-width: 800px; - max-height: 600px; - overflow: hidden; - line-height: 14px; - a { - color: @tooltipLinkColor; - } -} - -.grafana-tooltip hr { - padding: 2px; - color: #c8c8c8; - margin: 0px; - border-bottom:0px solid #c8c8c8; -} - -.tooltip.in { - .opacity(100); -} -.tooltip-inner { - max-width: 400px; -} - .grafana-version-info { position: absolute; bottom: 2px; diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 2be071bc151..6d5434ac479 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -286,7 +286,7 @@ // Tooltips and popovers // ------------------------- -@tooltipColor: #fff; +@tooltipColor: @white; @tooltipBackground: rgb(58, 57, 57); @tooltipArrowWidth: 5px; @tooltipArrowColor: @tooltipBackground; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index bae029698b0..ae8fcef2df3 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -79,7 +79,7 @@ // Typography // ------------------------- -@sansFontFamily: "PT Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; @serifFontFamily: Georgia, "Times New Roman", Times, serif; @monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; From b9b3b75c0cf5b29c38b206929d1515b58727eb65 Mon Sep 17 00:00:00 2001 From: utkarshcmu Date: Sun, 14 Feb 2016 22:13:59 -0800 Subject: [PATCH 053/444] Fixing snapshot templating bug --- public/app/features/dashboard/shareSnapshotCtrl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/features/dashboard/shareSnapshotCtrl.js b/public/app/features/dashboard/shareSnapshotCtrl.js index 44c2b3974a6..853e3db3b9c 100644 --- a/public/app/features/dashboard/shareSnapshotCtrl.js +++ b/public/app/features/dashboard/shareSnapshotCtrl.js @@ -117,7 +117,7 @@ function (angular, _) { // remove template queries _.each(dash.templating.list, function(variable) { variable.query = ""; - variable.options = []; + variable.options = variable.current; variable.refresh = false; }); From c4d605147714f8aa5a78261d349de4624e9b9762 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 07:52:34 +0100 Subject: [PATCH 054/444] add fig option for opentsdb --- docker/blocks/opentsdb/fig | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 docker/blocks/opentsdb/fig diff --git a/docker/blocks/opentsdb/fig b/docker/blocks/opentsdb/fig new file mode 100644 index 00000000000..34bbf4b854c --- /dev/null +++ b/docker/blocks/opentsdb/fig @@ -0,0 +1,5 @@ +opentsdb: + image: opower/opentsdb:latest + ports: + - "4242:4242" + From d523d45124a05074bcd9d107b1749461ac6d9995 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 10:09:15 +0100 Subject: [PATCH 055/444] fix(playlist): dont swallow errors --- pkg/api/playlist_play.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/api/playlist_play.go b/pkg/api/playlist_play.go index 9bfcf1532fa..3be185b2273 100644 --- a/pkg/api/playlist_play.go +++ b/pkg/api/playlist_play.go @@ -16,7 +16,7 @@ func populateDashboardsById(dashboardByIds []int64) ([]m.PlaylistDashboardDto, e if len(dashboardByIds) > 0 { dashboardQuery := m.GetDashboardsQuery{DashboardIds: dashboardByIds} if err := bus.Dispatch(&dashboardQuery); err != nil { - return result, errors.New("Playlist not found") //TODO: dont swallow error + return result, err } for _, item := range *dashboardQuery.Result { From da8782a9d0085046456555229fc2a5daa5a1624b Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 10:34:47 +0100 Subject: [PATCH 056/444] remove unused imports --- pkg/api/playlist_play.go | 1 - 1 file changed, 1 deletion(-) diff --git a/pkg/api/playlist_play.go b/pkg/api/playlist_play.go index 3be185b2273..f3bae6cbcd3 100644 --- a/pkg/api/playlist_play.go +++ b/pkg/api/playlist_play.go @@ -1,7 +1,6 @@ package api import ( - "errors" "strconv" "github.com/grafana/grafana/pkg/bus" From 7c9728df4773459c21fc7b44e46876e2a99bc78d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 10:49:20 +0100 Subject: [PATCH 057/444] ux(less): refactoring and cleanup --- public/less/base/base.less | 21 +- public/less/base/forms.less | 241 +++++++++++++ public/less/bootstrap/bootstrap.less | 4 - public/less/bootstrap/forms.less | 451 +------------------------ public/less/bootstrap/scaffolding.less | 53 --- public/less/bootswatch.dark.less | 146 -------- public/less/components/gf-form.less | 7 +- public/less/variables.dark.less | 2 +- 8 files changed, 266 insertions(+), 659 deletions(-) delete mode 100644 public/less/bootstrap/scaffolding.less diff --git a/public/less/base/base.less b/public/less/base/base.less index 9c639c007cd..d10711b48f3 100644 --- a/public/less/base/base.less +++ b/public/less/base/base.less @@ -4,6 +4,25 @@ html { body { height: 100%; - background: @bodyBackground; + margin: 0; + font-family: @baseFontFamily; + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @textColor; + background-color: @bodyBackground; +} + + +// Links +// ------------------------- + +a { + color: @linkColor; + text-decoration: none; +} + +a:hover, +a:focus { + color: @linkColorHover; } diff --git a/public/less/base/forms.less b/public/less/base/forms.less index 5d2e00279d8..4a84a70b3ab 100644 --- a/public/less/base/forms.less +++ b/public/less/base/forms.less @@ -1,3 +1,244 @@ +// +// Forms +// -------------------------------------------------- + + +// GENERAL STYLES +// -------------- + +// Make all forms have space below them +form { + margin: 0 0 @baseLineHeight; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +// Groups of fields with labels on top (legends) +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: @baseLineHeight; + font-size: @baseFontSize * 1.5; + line-height: @baseLineHeight * 2; + color: @grayDark; + border: 0; + border-bottom: 1px solid #e5e5e5; + + // Small + small { + font-size: @baseLineHeight * .75; + color: @grayLight; + } +} + +// Set font for forms +label, +input, +button, +select, +textarea { + #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here +} +input, +button, +select, +textarea { + font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element) +} + +// Identify controls by their labels +label { + display: block; + margin-bottom: 5px; +} + +// Form controls +// ------------------------- + +// Shared size and type resets +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + display: inline-block; + height: @baseLineHeight; + padding: 4px 6px; + font-size: @baseFontSize; + line-height: @baseLineHeight; + color: @inputText; + vertical-align: top; +} + +// Reset appearance properties for textual inputs and textarea +// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) +input, +textarea, +.uneditable-input { + width: 206px; // plus 12px padding and 2px border +} +// Reset height since textareas have rows +textarea { + height: auto; +} + +// Everything else +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: @inputBackground; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border linear .2s, box-shadow linear .2s"); + + // Focus state + &:focus { + border-color: rgba(82,168,236, .8); + outline: 0; + outline: thin dotted \9; /* IE6-9 */ + .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + line-height: normal; +} + +// Reset width of input images, buttons, radios, checkboxes +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector +} + +// Set the height of select and file controls to match text inputs +select, +input[type="file"] { + height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + line-height: @inputHeight; +} + +// Make select elements obey height by applying a border +select { + width: 220px; // default input width + 10px of padding that doesn't get applied + border: 1px solid @inputBorder; + background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Focus for select, file, radio, and checkbox +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + .tab-focus(); +} + +// Placeholder +// ------------------------- + +// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector +input, +textarea { + .placeholder(); +} + + +// INPUT SIZES +// ----------- + +// General classes for quick sizes +.input-mini { width: 60px; } +.input-small { width: 90px; } +.input-medium { width: 150px; } +.input-large { width: 210px; } +.input-xlarge { width: 270px; } +.input-xxlarge { width: 530px; } + +// GRID SIZING FOR INPUTS +// ---------------------- + +// Grid sizes +#grid > .input(@gridColumnWidth, @gridGutterWidth); + +// DISABLED STATE +// -------------- + +// Disabled and read-only inputs +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: @inputDisabledBackground; +} + +// Explicitly reset the colors here +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + + +// HTML5 invalid states +// Shares styles with the .control-group.error above +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { + color: #b94a48; + border-color: #ee5f5b; + &:focus { + border-color: darken(#ee5f5b, 10%); + @shadow: 0 0 6px lighten(#ee5f5b, 20%); + .box-shadow(@shadow); + } +} + input[type=text].input-fluid { width: 100%; box-sizing: border-box; diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 4c9f974bf2a..1b4e2d8824a 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -14,12 +14,8 @@ @import "reset.less"; // Grid system and page structure -@import "scaffolding.less"; @import "grid.less"; -// Base CSS -@import "forms.less"; - // Components: common @import "close.less"; diff --git a/public/less/bootstrap/forms.less b/public/less/bootstrap/forms.less index 21c4fd979fa..b20642c064c 100644 --- a/public/less/bootstrap/forms.less +++ b/public/less/bootstrap/forms.less @@ -81,11 +81,9 @@ input[type="color"], display: inline-block; height: @baseLineHeight; padding: 4px 6px; - margin-bottom: @baseLineHeight / 2; font-size: @baseFontSize; line-height: @baseLineHeight; color: @inputText; - .border-radius(@inputBorderRadius); vertical-align: middle; } @@ -100,6 +98,7 @@ textarea, textarea { height: auto; } + // Everything else textarea, input[type="text"], @@ -118,13 +117,12 @@ input[type="tel"], input[type="color"], .uneditable-input { background-color: @inputBackground; - border: 1px solid @inputBorder; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border linear .2s, box-shadow linear .2s"); // Focus state &:focus { - border-color: rgba(82,168,236,.8); + border-color: rgba(82,168,236, .8); outline: 0; outline: thin dotted \9; /* IE6-9 */ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); @@ -135,8 +133,6 @@ input[type="color"], input[type="radio"], input[type="checkbox"] { margin: 4px 0 0; - *margin-top: 0; /* IE7 */ - margin-top: 1px \9; /* IE8-9 */ line-height: normal; } @@ -155,7 +151,6 @@ input[type="checkbox"] { select, input[type="file"] { height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - *margin-top: 4px; /* For IE7, add top margin to align select with labels */ line-height: @inputHeight; } @@ -180,33 +175,6 @@ input[type="checkbox"]:focus { .tab-focus(); } - -// Uneditable inputs -// ------------------------- - -// Make uneditable inputs look inactive -.uneditable-input, -.uneditable-textarea { - color: @grayLight; - background-color: darken(@inputBackground, 1%); - border-color: @inputBorder; - .box-shadow(inset 0 1px 2px rgba(0,0,0,.025)); - cursor: not-allowed; -} - -// For text that needs to appear as an input but should not be an input -.uneditable-input { - overflow: hidden; // prevent text from wrapping, but still cut it off like an input does - white-space: nowrap; -} - -// Make uneditable textareas behave like a textarea -.uneditable-textarea { - width: auto; - height: auto; -} - - // Placeholder // ------------------------- @@ -217,43 +185,6 @@ textarea { } -// CHECKBOXES & RADIOS -// ------------------- - -// Indent the labels to position radios/checkboxes as hanging -.radio, -.checkbox { - min-height: @baseLineHeight; // clear the floating input if there is no label text - padding-left: 20px; -} -.radio input[type="radio"], -.checkbox input[type="checkbox"] { - float: left; - margin-left: -20px; -} - -// Move the options list down to align with labels -.controls > .radio:first-child, -.controls > .checkbox:first-child { - padding-top: 5px; // has to be padding because margin collaspes -} - -// Radios and checkboxes on same line -// TODO v3: Convert .inline to .control-inline -.radio.inline, -.checkbox.inline { - display: inline-block; - padding-top: 5px; - margin-bottom: 0; - vertical-align: middle; -} -.radio.inline + .radio.inline, -.checkbox.inline + .checkbox.inline { - margin-left: 10px; // space out consecutive inline controls -} - - - // INPUT SIZES // ----------- @@ -265,61 +196,12 @@ textarea { .input-xlarge { width: 270px; } .input-xxlarge { width: 530px; } -// Grid style input sizes -input[class*="span"], -select[class*="span"], -textarea[class*="span"], -.uneditable-input[class*="span"], -// Redeclare since the fluid row class is more specific -.row-fluid input[class*="span"], -.row-fluid select[class*="span"], -.row-fluid textarea[class*="span"], -.row-fluid .uneditable-input[class*="span"] { - float: none; - margin-left: 0; -} -// Ensure input-prepend/append never wraps -.input-append input[class*="span"], -.input-append .uneditable-input[class*="span"], -.input-prepend input[class*="span"], -.input-prepend .uneditable-input[class*="span"], -.row-fluid input[class*="span"], -.row-fluid select[class*="span"], -.row-fluid textarea[class*="span"], -.row-fluid .uneditable-input[class*="span"], -.row-fluid .input-prepend [class*="span"], -.row-fluid .input-append [class*="span"] { - display: inline-block; -} - - - // GRID SIZING FOR INPUTS // ---------------------- // Grid sizes #grid > .input(@gridColumnWidth, @gridGutterWidth); -// Control row for multiple inputs per line -.controls-row { - .clearfix(); // Clear the float from controls -} - -// Float to collapse white-space for proper grid alignment -.controls-row [class*="span"], -// Redeclare the fluid grid collapse since we undo the float for inputs -.row-fluid .controls-row [class*="span"] { - float: left; -} -// Explicity set top padding on all checkboxes/radios, not just first-child -.controls-row .checkbox[class*="span"], -.controls-row .radio[class*="span"] { - padding-top: 5px; -} - - - - // DISABLED STATE // -------------- @@ -342,28 +224,6 @@ input[type="checkbox"][readonly] { } - - -// FORM FIELD FEEDBACK STATES -// -------------------------- - -// Warning -.control-group.warning { - .formFieldState(@warningText, @warningText, @warningBackground); -} -// Error -.control-group.error { - .formFieldState(@errorText, @errorText, @errorBackground); -} -// Success -.control-group.success { - .formFieldState(@successText, @successText, @successBackground); -} -// Success -.control-group.info { - .formFieldState(@infoText, @infoText, @infoBackground); -} - // HTML5 invalid states // Shares styles with the .control-group.error above input:focus:invalid, @@ -380,311 +240,4 @@ select:focus:invalid { -// FORM ACTIONS -// ------------ -.form-actions { - padding: (@baseLineHeight - 1) 20px @baseLineHeight; - margin-top: @baseLineHeight; - margin-bottom: @baseLineHeight; - background-color: @formActionsBackground; - border-top: 1px solid #e5e5e5; - .clearfix(); // Adding clearfix to allow for .pull-right button containers -} - - - -// HELP TEXT -// --------- - -.help-block, -.help-inline { - color: lighten(@textColor, 15%); // lighten the text some for contrast -} - -.help-block { - display: block; // account for any element using help-block - margin-bottom: @baseLineHeight / 2; -} - -.help-inline { - display: inline-block; - .ie7-inline-block(); - vertical-align: middle; - padding-left: 5px; -} - - - -// INPUT GROUPS -// ------------ - -// Allow us to put symbols and text within the input field for a cleaner look -.input-append, -.input-prepend { - display: inline-block; - margin-bottom: @baseLineHeight / 2; - vertical-align: middle; - font-size: 0; // white space collapse hack - white-space: nowrap; // Prevent span and input from separating - - // Reset the white space collapse hack - input, - select, - .uneditable-input, - .dropdown-menu, - .popover { - font-size: @baseFontSize; - } - - input, - select, - .uneditable-input { - position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness - margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms - *margin-left: 0; - vertical-align: top; - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - // Make input on top when focused so blue border and shadow always show - &:focus { - z-index: 2; - } - } - .add-on { - display: inline-block; - width: auto; - height: @baseLineHeight; - min-width: 16px; - padding: 4px 5px; - font-size: @baseFontSize; - font-weight: normal; - line-height: @baseLineHeight; - text-align: center; - text-shadow: 0 1px 0 @white; - background-color: @grayLighter; - border: 1px solid #ccc; - } - .add-on, - .btn, - .btn-group > .dropdown-toggle { - vertical-align: top; - .border-radius(0); - } - .active { - background-color: lighten(@green, 30); - border-color: @green; - } -} - -.input-prepend { - .add-on, - .btn { - margin-right: -1px; - } - .add-on:first-child, - .btn:first-child { - // FYI, `.btn:first-child` accounts for a button group that's prepended - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - } -} - -.input-append { - input, - select, - .uneditable-input { - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - + .btn-group .btn:last-child { - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } - } - .add-on, - .btn, - .btn-group { - margin-left: -1px; - } - .add-on:last-child, - .btn:last-child, - .btn-group:last-child > .dropdown-toggle { - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } -} - -// Remove all border-radius for inputs with both prepend and append -.input-prepend.input-append { - input, - select, - .uneditable-input { - .border-radius(0); - + .btn-group .btn { - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } - } - .add-on:first-child, - .btn:first-child { - margin-right: -1px; - .border-radius(@inputBorderRadius 0 0 @inputBorderRadius); - } - .add-on:last-child, - .btn:last-child { - margin-left: -1px; - .border-radius(0 @inputBorderRadius @inputBorderRadius 0); - } - .btn-group:first-child { - margin-left: 0; - } -} - - - - -// SEARCH FORM -// ----------- - -input.search-query { - padding-right: 14px; - padding-right: 4px \9; - padding-left: 14px; - padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ - margin-bottom: 0; // Remove the default margin on all inputs - .border-radius(15px); -} - -/* Allow for input prepend/append in search forms */ -.form-search .input-append .search-query, -.form-search .input-prepend .search-query { - .border-radius(0); // Override due to specificity -} -.form-search .input-append .search-query { - .border-radius(14px 0 0 14px); -} -.form-search .input-append .btn { - .border-radius(0 14px 14px 0); -} -.form-search .input-prepend .search-query { - .border-radius(0 14px 14px 0); -} -.form-search .input-prepend .btn { - .border-radius(14px 0 0 14px); -} - - - - -// HORIZONTAL & VERTICAL FORMS -// --------------------------- - -// Common properties -// ----------------- - -.form-search, -.form-inline, -.form-horizontal { - input, - textarea, - select, - .help-inline, - .uneditable-input, - .input-prepend, - .input-append { - display: inline-block; - .ie7-inline-block(); - margin-bottom: 0; - vertical-align: middle; - } - // Re-hide hidden elements due to specifity - .hide { - display: none; - } -} -.form-search label, -.form-inline label, -.form-search .btn-group, -.form-inline .btn-group { - display: inline-block; -} -// Remove margin for input-prepend/-append -.form-search .input-append, -.form-inline .input-append, -.form-search .input-prepend, -.form-inline .input-prepend { - margin-bottom: 0; -} -// Inline checkbox/radio labels (remove padding on left) -.form-search .radio, -.form-search .checkbox, -.form-inline .radio, -.form-inline .checkbox { - padding-left: 0; - margin-bottom: 0; - vertical-align: middle; -} -// Remove float and margin, set to inline-block -.form-search .radio input[type="radio"], -.form-search .checkbox input[type="checkbox"], -.form-inline .radio input[type="radio"], -.form-inline .checkbox input[type="checkbox"] { - float: left; - margin-right: 3px; - margin-left: 0; -} - - -// Margin to space out fieldsets -.control-group { - margin-bottom: @baseLineHeight / 2; -} - -// Legend collapses margin, so next element is responsible for spacing -legend + .control-group { - margin-top: @baseLineHeight; - -webkit-margin-top-collapse: separate; -} - -// Horizontal-specific styles -// -------------------------- - -.form-horizontal { - // Increase spacing between groups - .control-group { - margin-bottom: @baseLineHeight; - .clearfix(); - } - // Float the labels left - .control-label { - float: left; - width: @horizontalComponentOffset - 20; - padding-top: 5px; - text-align: right; - } - // Move over all input controls and content - .controls { - // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend - // don't inherit the margin of the parent, in this case .controls - *display: inline-block; - *padding-left: 20px; - margin-left: @horizontalComponentOffset; - *margin-left: 0; - &:first-child { - *padding-left: @horizontalComponentOffset; - } - } - // Remove bottom margin on block level help text since that's accounted for on .control-group - .help-block { - margin-bottom: 0; - } - // And apply it only to .help-block instances that follow a form control - input, - select, - textarea, - .uneditable-input, - .input-prepend, - .input-append { - + .help-block { - margin-top: @baseLineHeight / 2; - } - } - // Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: @horizontalComponentOffset; - } -} diff --git a/public/less/bootstrap/scaffolding.less b/public/less/bootstrap/scaffolding.less deleted file mode 100644 index f17e8cadb40..00000000000 --- a/public/less/bootstrap/scaffolding.less +++ /dev/null @@ -1,53 +0,0 @@ -// -// Scaffolding -// -------------------------------------------------- - - -// Body reset -// ------------------------- - -body { - margin: 0; - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @textColor; - background-color: @bodyBackground; -} - - -// Links -// ------------------------- - -a { - color: @linkColor; - text-decoration: none; -} -a:hover, -a:focus { - color: @linkColorHover; - text-decoration: underline; -} - - -// Images -// ------------------------- - -// Rounded corners -.img-rounded { - .border-radius(6px); -} - -// Add polaroid-esque trim -.img-polaroid { - padding: 4px; - background-color: #fff; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - .box-shadow(0 1px 3px rgba(0,0,0,.1)); -} - -// Perfect circle -.img-circle { - .border-radius(500px); // crank the border-radius so it works with most reasonably sized images -} diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less index 550d5d601de..a75730ab7b3 100644 --- a/public/less/bootswatch.dark.less +++ b/public/less/bootswatch.dark.less @@ -85,149 +85,3 @@ hr { } } - -// FORMS -// ----------------------------------------------------- - -input, textarea, select { - border-width: 2px; - .border-radius(1px); -} - -select, textarea, -input[type="text"], input[type="password"], input[type="datetime"], -input[type="datetime-local"], input[type="date"], input[type="month"], -input[type="time"], input[type="week"], input[type="number"], -input[type="email"], input[type="url"], input[type="search"], -input[type="tel"], input[type="color"], .uneditable-input { - color: @grayLight; -} - -input[disabled], select[disabled], textarea[disabled], input[readonly], select[readonly], textarea[readonly], .uneditable-input { - border-color: #444; -} - -input:focus, -textarea:focus, -input.focused, -textarea.focused { - border-color: rgba(82,168,236,1); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ -} - -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus, -select:focus { - .box-shadow(none); // override for file inputs - .tab-focus(); -} - -legend, label { - color: @textColor; - border-bottom: 0px solid #222; -} - -.form-actions { - border-top: 1px solid #222; -} - -// TABLES -// ----------------------------------------------------- - -.table { - .border-radius(1px); - - tbody tr.success td { - background-color: @green; - color: @white; - } - - tbody tr.error td { - background-color: @red; - color: @white; - } - - tbody tr.info td { - background-color: @blue; - color: @white; - } -} - -.label { - color: @white; -} - -.badge { - border-radius: 0; - font-weight: 200; -} - -.label, .alert { background-color: darken(@gray, 20%); } - -.label:hover { background-color: darken(@gray, 30%); } - -.label-important, -.alert-danger, -.alert-error { background-color: @red; } - -.label-important:hover { background-color: darken(@red, 10%); } - -.label-warning { background-color: darken(@orange, 10%); } - -.label-warning:hover { background-color: darken(@orange, 20%); } - -.label-success, .alert-success { background-color: darken(@green, 3%); } - -.label-success:hover { background-color: darken(@green, 13%); } - -.label-info, .alert-info { background-color: darken(@blueDark, 10%); } - -.label-info:hover { background-color: darken(@blueDark, 20%); } - -// MISC -// ----------------------------------------------------- - -a:hover { - text-decoration: none; -} - -.well, .hero-unit { - .border-radius(0px); -} - -.well, .hero-unit { - border-top: solid 1px lighten(@grayDark, 5%); - .box-shadow(0 2px 4px rgba(0,0,0,.8)); -} - -.thumbnail { - border-color: @grayDark; -} - -.progress { - background-color: #060606; - background-image: none; - .border-radius(0); -} - -.modal-footer { -} - - -.footer { - border-top: 1px solid @grayDark; -} - -// MEDIA QUERIES -// ----------------------------------------------------- - -.caret { - color: @textColor -} - -.dropdown-submenu > a:after { - border-left-color: @textColor; -} - diff --git a/public/less/components/gf-form.less b/public/less/components/gf-form.less index 3dd0e0a294a..50f8a87eaec 100644 --- a/public/less/components/gf-form.less +++ b/public/less/components/gf-form.less @@ -53,12 +53,9 @@ input[type=checkbox].gf-form-checkbox { } select.gf-form-input { - border: none; - margin: 0px; - border-radius: 0; - height: 36px; - padding: 9px 3px; + padding: 2px 3px; font-size: 15px; + box-sizing: content-box; } .gf-size-xs { width: 60px; } diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 6d5434ac479..07a6da7f278 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -82,7 +82,7 @@ @headingsFontWeight: 400; // instead of browser default, bold @headingsFontStyle: normal; @headingsColor: darken(@white,11%); // empty to use BS default, @textColor -@inputText: @black; +@inputText: @grayLight; // Component sizing From 6e7813f2f8789717ec21eca1cb736b95b69c7471 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 11:15:38 +0100 Subject: [PATCH 058/444] feat(build): move grafana into grafana-server --- build.go | 2 +- main.go => pkg/cmd/grafana-server/main.go | 3 +-- pkg/cmd/{ => grafana-server}/web.go | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) rename main.go => pkg/cmd/grafana-server/main.go (98%) rename pkg/cmd/{ => grafana-server}/web.go (99%) diff --git a/build.go b/build.go index ac7707f76fc..a05b27b3008 100644 --- a/build.go +++ b/build.go @@ -63,7 +63,7 @@ func main() { setup() case "build": - pkg := "." + pkg := "./pkg/cmd/grafana-server" clean() build(pkg, []string{}) diff --git a/main.go b/pkg/cmd/grafana-server/main.go similarity index 98% rename from main.go rename to pkg/cmd/grafana-server/main.go index 4a052ea4934..d78b8f700ff 100644 --- a/main.go +++ b/pkg/cmd/grafana-server/main.go @@ -12,7 +12,6 @@ import ( "syscall" "time" - "github.com/grafana/grafana/pkg/cmd" "github.com/grafana/grafana/pkg/log" "github.com/grafana/grafana/pkg/login" "github.com/grafana/grafana/pkg/metrics" @@ -74,7 +73,7 @@ func main() { go metrics.StartUsageReportLoop() } - cmd.StartServer() + StartServer() exitChan <- 0 } diff --git a/pkg/cmd/web.go b/pkg/cmd/grafana-server/web.go similarity index 99% rename from pkg/cmd/web.go rename to pkg/cmd/grafana-server/web.go index 61534e7d346..0d78de0daae 100644 --- a/pkg/cmd/web.go +++ b/pkg/cmd/grafana-server/web.go @@ -1,7 +1,7 @@ // Copyright 2014 Unknwon // Copyright 2014 Torkel Ödegaard -package cmd +package main import ( "fmt" From 35a1a04f500fb36f548789591f3bf1386e044c25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 11:50:31 +0100 Subject: [PATCH 059/444] ux(buttons): began work on buttons consolidation and cleanup / refactor --- .bra.toml | 2 +- public/less/bootstrap/bootstrap.less | 6 - public/less/bootstrap/button-groups.less | 229 ----------- public/less/bootstrap/forms.less | 242 ------------ public/less/bootstrap/mixins.less | 24 -- public/less/bootswatch.dark.less | 87 ----- public/less/bootswatch.light.less | 359 ------------------ .../{bootstrap => components}/buttons.less | 96 +---- public/less/components/navbar.less | 2 +- public/less/grafana.dark.less | 1 - public/less/grafana.less | 4 + public/less/grafana.light.less | 1 - public/less/mixins/buttons.less | 18 + public/less/variables.dark.less | 25 +- public/less/variables.light.less | 26 +- 15 files changed, 65 insertions(+), 1057 deletions(-) delete mode 100644 public/less/bootstrap/button-groups.less delete mode 100644 public/less/bootswatch.dark.less delete mode 100644 public/less/bootswatch.light.less rename public/less/{bootstrap => components}/buttons.less (62%) create mode 100644 public/less/mixins/buttons.less diff --git a/.bra.toml b/.bra.toml index 5ff554bfc75..ef1a925158d 100644 --- a/.bra.toml +++ b/.bra.toml @@ -3,7 +3,7 @@ init_cmds = [ ["go", "build", "-o", "./bin/grafana-server"], ["./bin/grafana-server"] ] -watch_all = false +watch_all = true watch_dirs = [ "$WORKDIR/pkg", "$WORKDIR/public/views", diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 1b4e2d8824a..9bc162acaaa 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -19,13 +19,7 @@ // Components: common @import "close.less"; -// Components: Buttons & Alerts -@import "buttons.less"; -@import "button-groups.less"; - -// Components: Nav @import "navs.less"; - @import "labels-badges.less"; // Utility classes diff --git a/public/less/bootstrap/button-groups.less b/public/less/bootstrap/button-groups.less deleted file mode 100644 index 55cdc603387..00000000000 --- a/public/less/bootstrap/button-groups.less +++ /dev/null @@ -1,229 +0,0 @@ -// -// Button groups -// -------------------------------------------------- - - -// Make the div behave like a button -.btn-group { - position: relative; - display: inline-block; - .ie7-inline-block(); - font-size: 0; // remove as part 1 of font-size inline-block hack - vertical-align: middle; // match .btn alignment given font-size hack above - white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page) - .ie7-restore-left-whitespace(); -} - -// Space out series of button groups -.btn-group + .btn-group { - margin-left: 5px; -} - -// Optional: Group multiple button groups together for a toolbar -.btn-toolbar { - font-size: 0; // Hack to remove whitespace that results from using inline-block - margin-top: @baseLineHeight / 2; - margin-bottom: @baseLineHeight / 2; - > .btn + .btn, - > .btn-group + .btn, - > .btn + .btn-group { - margin-left: 5px; - } -} - -// Float them, remove border radius, then re-add to first and last elements -.btn-group > .btn { - position: relative; - .border-radius(0); -} -.btn-group > .btn + .btn { - margin-left: -1px; -} -.btn-group > .btn, -.btn-group > .dropdown-menu, -.btn-group > .popover { - font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack -} - -// Reset fonts for other sizes -.btn-group > .btn-mini { - font-size: @fontSizeMini; -} -.btn-group > .btn-small { - font-size: @fontSizeSmall; -} -.btn-group > .btn-large { - font-size: @fontSizeLarge; -} - -// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match -.btn-group > .btn:first-child { - margin-left: 0; - .border-top-left-radius(@baseBorderRadius); - .border-bottom-left-radius(@baseBorderRadius); -} -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it -.btn-group > .btn:last-child, -.btn-group > .dropdown-toggle { - .border-top-right-radius(@baseBorderRadius); - .border-bottom-right-radius(@baseBorderRadius); -} -// Reset corners for large buttons -.btn-group > .btn.large:first-child { - margin-left: 0; - .border-top-left-radius(@borderRadiusLarge); - .border-bottom-left-radius(@borderRadiusLarge); -} -.btn-group > .btn.large:last-child, -.btn-group > .large.dropdown-toggle { - .border-top-right-radius(@borderRadiusLarge); - .border-bottom-right-radius(@borderRadiusLarge); -} - -// On hover/focus/active, bring the proper btn to front -.btn-group > .btn:hover, -.btn-group > .btn:focus, -.btn-group > .btn:active, -.btn-group > .btn.active { - z-index: 2; -} - -// On active and open, don't show outline -.btn-group .dropdown-toggle:active, -.btn-group.open .dropdown-toggle { - outline: 0; -} - - - -// Split button dropdowns -// ---------------------- - -// Give the line between buttons some depth -.btn-group > .btn + .dropdown-toggle { - padding-left: 8px; - padding-right: 8px; - .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); - *padding-top: 5px; - *padding-bottom: 5px; -} -.btn-group > .btn-mini + .dropdown-toggle { - padding-left: 5px; - padding-right: 5px; - *padding-top: 2px; - *padding-bottom: 2px; -} -.btn-group > .btn-small + .dropdown-toggle { - *padding-top: 5px; - *padding-bottom: 4px; -} -.btn-group > .btn-large + .dropdown-toggle { - padding-left: 12px; - padding-right: 12px; - *padding-top: 7px; - *padding-bottom: 7px; -} - -.btn-group.open { - - // The clickable button for toggling the menu - // Remove the gradient and set the same inset shadow as the :active state - .dropdown-toggle { - background-image: none; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); - } - - // Keep the hover's background when dropdown is open - .btn.dropdown-toggle { - background-color: @btnBackgroundHighlight; - } - .btn-primary.dropdown-toggle { - background-color: @btnPrimaryBackgroundHighlight; - } - .btn-warning.dropdown-toggle { - background-color: @btnWarningBackgroundHighlight; - } - .btn-danger.dropdown-toggle { - background-color: @btnDangerBackgroundHighlight; - } - .btn-success.dropdown-toggle { - background-color: @btnSuccessBackgroundHighlight; - } - .btn-info.dropdown-toggle { - background-color: @btnInfoBackgroundHighlight; - } - .btn-inverse.dropdown-toggle { - background-color: @btnInverseBackgroundHighlight; - } -} - - -// Reposition the caret -.btn .caret { - margin-top: 8px; - margin-left: 0; -} -// Carets in other button sizes -.btn-large .caret { - margin-top: 6px; -} -.btn-large .caret { - border-left-width: 5px; - border-right-width: 5px; - border-top-width: 5px; -} -.btn-mini .caret, -.btn-small .caret { - margin-top: 8px; -} -// Upside down carets for .dropup -.dropup .btn-large .caret { - border-bottom-width: 5px; -} - - - -// Account for other colors -.btn-primary, -.btn-warning, -.btn-danger, -.btn-info, -.btn-success, -.btn-inverse { - .caret { - border-top-color: @white; - border-bottom-color: @white; - } -} - - - -// Vertical button groups -// ---------------------- - -.btn-group-vertical { - display: inline-block; // makes buttons only take up the width they need - .ie7-inline-block(); -} -.btn-group-vertical > .btn { - display: block; - float: none; - max-width: 100%; - .border-radius(0); -} -.btn-group-vertical > .btn + .btn { - margin-left: 0; - margin-top: -1px; -} -.btn-group-vertical > .btn:first-child { - .border-radius(@baseBorderRadius @baseBorderRadius 0 0); -} -.btn-group-vertical > .btn:last-child { - .border-radius(0 0 @baseBorderRadius @baseBorderRadius); -} -.btn-group-vertical > .btn-large:first-child { - .border-radius(@borderRadiusLarge @borderRadiusLarge 0 0); -} -.btn-group-vertical > .btn-large:last-child { - .border-radius(0 0 @borderRadiusLarge @borderRadiusLarge); -} diff --git a/public/less/bootstrap/forms.less b/public/less/bootstrap/forms.less index b20642c064c..8b137891791 100644 --- a/public/less/bootstrap/forms.less +++ b/public/less/bootstrap/forms.less @@ -1,243 +1 @@ -// -// Forms -// -------------------------------------------------- - - -// GENERAL STYLES -// -------------- - -// Make all forms have space below them -form { - margin: 0 0 @baseLineHeight; -} - -fieldset { - padding: 0; - margin: 0; - border: 0; -} - -// Groups of fields with labels on top (legends) -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; - line-height: @baseLineHeight * 2; - color: @grayDark; - border: 0; - border-bottom: 1px solid #e5e5e5; - - // Small - small { - font-size: @baseLineHeight * .75; - color: @grayLight; - } -} - -// Set font for forms -label, -input, -button, -select, -textarea { - #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here -} -input, -button, -select, -textarea { - font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element) -} - -// Identify controls by their labels -label { - display: block; - margin-bottom: 5px; -} - -// Form controls -// ------------------------- - -// Shared size and type resets -select, -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - display: inline-block; - height: @baseLineHeight; - padding: 4px 6px; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @inputText; - vertical-align: middle; -} - -// Reset appearance properties for textual inputs and textarea -// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) -input, -textarea, -.uneditable-input { - width: 206px; // plus 12px padding and 2px border -} -// Reset height since textareas have rows -textarea { - height: auto; -} - -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - background-color: @inputBackground; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border linear .2s, box-shadow linear .2s"); - - // Focus state - &:focus { - border-color: rgba(82,168,236, .8); - outline: 0; - outline: thin dotted \9; /* IE6-9 */ - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; -} - -// Reset width of input images, buttons, radios, checkboxes -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; // Override of generic input selector -} - -// Set the height of select and file controls to match text inputs -select, -input[type="file"] { - height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - line-height: @inputHeight; -} - -// Make select elements obey height by applying a border -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - border: 1px solid @inputBorder; - background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for select, file, radio, and checkbox -select:focus, -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - .tab-focus(); -} - -// Placeholder -// ------------------------- - -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector -input, -textarea { - .placeholder(); -} - - -// INPUT SIZES -// ----------- - -// General classes for quick sizes -.input-mini { width: 60px; } -.input-small { width: 90px; } -.input-medium { width: 150px; } -.input-large { width: 210px; } -.input-xlarge { width: 270px; } -.input-xxlarge { width: 530px; } - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid sizes -#grid > .input(@gridColumnWidth, @gridGutterWidth); - -// DISABLED STATE -// -------------- - -// Disabled and read-only inputs -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - cursor: not-allowed; - background-color: @inputDisabledBackground; -} -// Explicitly reset the colors here -input[type="radio"][disabled], -input[type="checkbox"][disabled], -input[type="radio"][readonly], -input[type="checkbox"][readonly] { - background-color: transparent; -} - - -// HTML5 invalid states -// Shares styles with the .control-group.error above -input:focus:invalid, -textarea:focus:invalid, -select:focus:invalid { - color: #b94a48; - border-color: #ee5f5b; - &:focus { - border-color: darken(#ee5f5b, 10%); - @shadow: 0 0 6px lighten(#ee5f5b, 20%); - .box-shadow(@shadow); - } -} - - - diff --git a/public/less/bootstrap/mixins.less b/public/less/bootstrap/mixins.less index 9a8ee6676c4..d7f16cfc246 100644 --- a/public/less/bootstrap/mixins.less +++ b/public/less/bootstrap/mixins.less @@ -508,30 +508,6 @@ border-bottom: 1px solid @bottom; } -// Button backgrounds -// ------------------ -.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - .gradientBar(@startColor, @endColor, @textColor, @textShadow); - *background-color: @endColor; /* Darken IE7 buttons by default so they stand out more given they won't have borders */ - box-shadow: inset 0 -3px rgba(0,0,0,0.3); - .reset-filter(); - - // in these cases the gradient won't cover the background, so we override - &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { - color: @textColor; - background-color: @endColor; - *background-color: darken(@endColor, 5%); - box-shadow: inset 0 -3px rgba(0,0,0,0.3); - } - - // IE 7 + 8 can't handle box-shadow to show active, so we darken a bit ourselves - &:active, - &.active { - background-color: darken(@endColor, 10%) e("\9"); - } -} - // Navbar vertical align // ------------------------- // Vertically center elements in the navbar. diff --git a/public/less/bootswatch.dark.less b/public/less/bootswatch.dark.less deleted file mode 100644 index a75730ab7b3..00000000000 --- a/public/less/bootswatch.dark.less +++ /dev/null @@ -1,87 +0,0 @@ -// Cyborg 2.3.2 -// Bootswatch -// ----------------------------------------------------- - -// TYPOGRAPHY -// ----------------------------------------------------- - - -hr { - border-bottom: none; -} - -// NAVBAR -// ----------------------------------------------------- - -// NAV -// ----------------------------------------------------- - -.nav-tabs { - - border-bottom: none; - - & > li > a { - .border-radius(0); - } - - li > a:hover, - li.active > a, - li.active > a:focus, - li.active > a:hover { - border-color: transparent; - background-color: transparent; - border-bottom: 2px solid @blue; - color: @white; - } - - li.disabled > a { - color: @textColor; - } - - .open .dropdown-toggle { - background-color: #060606; - border-color: transparent; - } -} - -// BUTTONS -// ----------------------------------------------------- - -.btn { - padding: 8px 12px; - margin-right: 10px; - background-image: none; - border: none; - .border-radius(0px); - text-shadow: 0 1px 0 rgba(0,0,0,.5); - - &.disabled { - box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05); - } -} - -.btn-inverse { - border: 1px solid #444; - box-shadow: none; -} - -.btn-large { - padding: 6px 20px; -} - -.btn-small { - padding: 2px 10px; -} - -.btn-mini { - padding: 2px 6px; - margin-right: 0; - margin-right: 0; -} - -.btn-group { - & > .btn + .dropdown-toggle { - .box-shadow(none); - } -} - diff --git a/public/less/bootswatch.light.less b/public/less/bootswatch.light.less deleted file mode 100644 index 3b9ec72de87..00000000000 --- a/public/less/bootswatch.light.less +++ /dev/null @@ -1,359 +0,0 @@ -// Cosmo 2.3.2 -// Bootswatch -// ----------------------------------------------------- - - -// TYPOGRAPHY -// ----------------------------------------------------- - -body { - font-weight: 300; - background: @bodyBackground; - //url('../img/light.png') repeat right top; -} - -blockquote { - - padding: 10px 15px; - background-color: @grayLighter; - border-left-color: @gray; - - &.pull-right { - padding: 10px 15px; - border-right-color: @gray; - } - - small { - color: @gray; - } -} - -.muted { - color: @gray; -} - -.text-warning { color: @orange; } -a.text-warning:hover { color: darken(@orange, 10%); } - -.text-error { color: @red; } -a.text-error:hover { color: darken(@red, 10%); } - -.text-info { color: @purple; } -a.text-info:hover { color: darken(@purple, 10%); } - -.text-success { color: @green; } -a.text-success:hover { color: darken(@green, 10%); } - -// SCAFFOLDING -// ----------------------------------------------------- - -// NAVBAR -// ----------------------------------------------------- - -.navbar { - - .navbar-inner { - background-image: none; - .box-shadow(none); - .border-radius(0); - } - - .brand { - padding: 0px 15px; - - &:hover { - color: @navbarLinkColorHover; - } - } - - .nav > .active > a, - .nav > .active > a:hover, - .nav > .active > a:focus { - .box-shadow(none); - border-bottom: 1px solid @blue; - background-color: @navbarLinkBackgroundHover; - } - - .nav li.dropdown.open > .dropdown-toggle, - .nav li.dropdown.active > .dropdown-toggle, - .nav li.dropdown.open.active > .dropdown-toggle { - color: @navbarLinkColorActive; - - &:hover { - color: @grayLighter; - } - } - - .navbar-search .search-query { - line-height: normal; - } -} - -// NAV -// ----------------------------------------------------- - -.nav { - .open .dropdown-toggle, - & > li.dropdown.open.active > a:hover { - color: @blue; - } -} - -.nav-tabs { - - & > li > a { - .border-radius(0); - } - - li > a:hover, - li.active > a, - li.active > a:focus, - li.active > a:hover { - border-color: transparent; - background-color: transparent; - border-bottom: 2px solid @blue; - color: @blue - } - - li.disabled > a { - color: @textColor; - } - - .open .dropdown-toggle { - background-color: #060606; - border-color: transparent; - } -} - -.tabs-below, -.tabs-left, -.tabs-right { - - & > .nav-tabs > li > a{ - .border-radius(0); - border: 0px; - } -} - - -// BUTTONS -// ----------------------------------------------------- - -.btn { - padding: 8px 12px; - background-image: none; - .box-shadow(none); - border: none; - .border-radius(3px); - text-shadow: 0 1px 0 rgba(0,0,0,.5); - - &.disabled { - box-shadow: inset 0 2px 4px rgba(0,0,0,.15),~" "0 1px 2px rgba(0,0,0,.05); - } -} - -.btn-large { - padding: 14px 23px; -} - -.btn-small { - padding: 2px 10px; -} - -.btn-mini { - padding: 2px 6px; -} - -.btn-group { - & > .btn:first-child, - & > .btn:last-child, - & > .dropdown-toggle { - .border-radius(0); - } - - & > .btn + .dropdown-toggle { - .box-shadow(none); - } -} - -legend, label { - color: @textColor; - border-bottom: 0px solid #222; -} - -// TABLES -// ----------------------------------------------------- - -.table { - - tbody tr.success td { - color: @white; - } - - tbody tr.error td { - color: @white; - } - - tbody tr.info td { - color: @white; - } - - &-bordered { - .border-radius(0); - - thead:first-child tr:first-child th:first-child, - tbody:first-child tr:first-child td:first-child { - .border-radius(0); - } - - thead:last-child tr:last-child th:first-child, - tbody:last-child tr:last-child td:first-child, - tfoot:last-child tr:last-child td:first-child { - .border-radius(0); - } - } -} - -// FORMS -// ----------------------------------------------------- - -select, textarea, input[type="text"], input[type="password"], input[type="datetime"], -input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], -input[type="week"], input[type="number"], input[type="email"], input[type="url"], -input[type="search"], input[type="tel"], input[type="color"] { - color: @grayDarker; -} - -.control-group { - - &.warning { - - .control-label, - .help-block, - .help-inline { - color: @orange; - } - - input, - select, - textarea { - border-color: @orange; - color: @grayDarker; - } - } - - &.error { - - .control-label, - .help-block, - .help-inline { - color: @red; - } - - input, - select, - textarea { - border-color: @red; - color: @grayDarker; - } - } - - &.success { - - .control-label, - .help-block, - .help-inline { - color: @green; - } - - input, - select, - textarea { - border-color: @green; - color: @grayDarker; - } - } -} - -legend { - border-bottom: none; - color: @grayDarker; -} - -.form-actions { - border-top: none; - background-color: @grayLighter; -} - -// DROPDOWNS -// ----------------------------------------------------- - - -.label { - - &-success { - background-color: @green; - } - - &-important { - background-color: @red; - } - - &-info { - background-color: @purple; - } - - &-inverse { - background-color: @black; - } -} - -.badge { - border-radius: 0; - font-weight: 200; -} - -// MISC -// ----------------------------------------------------- - -a:hover { - text-decoration: none; -} - -.hero-unit { - border: none; - .border-radius(0); - .box-shadow(none); -} - -.well { - border: none; - .border-radius(0); - .box-shadow(none); -} - -a.thumbnail { - background-color: @grayLight; - - &:hover { - background-color: @gray; - border-color: transparent; - } -} - -.progress { - background-color: @grayLighter; - background-image: none; - .border-radius(0); -} - -.popover { - .border-radius(0); - - &-title { - border-bottom: none; - color: @white; - } - -} - diff --git a/public/less/bootstrap/buttons.less b/public/less/components/buttons.less similarity index 62% rename from public/less/bootstrap/buttons.less rename to public/less/components/buttons.less index 358b2120e6a..1ffc8f3e6cb 100644 --- a/public/less/bootstrap/buttons.less +++ b/public/less/components/buttons.less @@ -2,39 +2,28 @@ // Buttons // -------------------------------------------------- - // Base styles // -------------------------------------------------- // Core .btn { display: inline-block; - .ie7-inline-block(); - padding: 4px 12px; - margin-bottom: 0; // For input.btn + padding: 8px 12px; + margin-right: 10px; font-size: @baseFontSize; line-height: @baseLineHeight; text-align: center; vertical-align: middle; cursor: pointer; - .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); border: none; - *border: 0; // Remove the border to prevent IE7's black border on input:focus - border-bottom-color: darken(@btnBorder, 10%); - .border-radius(@baseBorderRadius); - .ie7-restore-left-whitespace(); // Give IE7 some love + + .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); // Hover/focus state &:hover, &:focus { - color: @grayDark; text-decoration: none; - background-position: 0 -15px; - - // transition is only when going to hover/focus, otherwise the background - // behind the gradient (there for IE<=9 fallback) gets mismatched - .transition(background-position .1s linear); } // Focus state for keyboard and accessibility @@ -47,7 +36,6 @@ &:active { background-image: none; outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); } // Disabled state @@ -56,88 +44,28 @@ cursor: default; background-image: none; .opacity(65); - .box-shadow(none); } - } - - // Button Sizes // -------------------------------------------------- // Large .btn-large { - padding: @paddingLarge; + padding: 6px 20px; font-size: @fontSizeLarge; - .border-radius(@borderRadiusLarge); -} -.btn-large [class^="icon-"], -.btn-large [class*=" icon-"] { - margin-top: 4px; } -// Small .btn-small { - padding: @paddingSmall; + padding: 2px 10px; font-size: @fontSizeSmall; - .border-radius(@borderRadiusSmall); -} -.btn-small [class^="icon-"], -.btn-small [class*=" icon-"] { - margin-top: 0; -} -.btn-mini [class^="icon-"], -.btn-mini [class*=" icon-"] { - margin-top: -1px; } -// Mini .btn-mini { - padding: @paddingMini; + padding: 2px 6px; + margin-right: 0; + margin-right: 0; font-size: @fontSizeMini; - .border-radius(@borderRadiusSmall); -} - - -// Block button -// ------------------------- - -.btn-block { - display: block; - width: 100%; - padding-left: 0; - padding-right: 0; - .box-sizing(border-box); -} - -// Vertically space out multiple block buttons -.btn-block + .btn-block { - margin-top: 5px; -} - -// Specificity overrides -input[type="submit"], -input[type="reset"], -input[type="button"] { - &.btn-block { - width: 100%; - } -} - - - -// Alternate buttons -// -------------------------------------------------- - -// Provide *some* extra contrast for those who can get it -.btn-primary.active, -.btn-warning.active, -.btn-danger.active, -.btn-success.active, -.btn-info.active, -.btn-inverse.active { - color: rgba(255,255,255,.75); } // Set the backgrounds @@ -163,7 +91,9 @@ input[type="button"] { } // Inverse appears as dark gray .btn-inverse { - .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); + .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight, @btnInverseText); + box-shadow: none; + border: 1px solid @grafanaTargetFuncHightlight; } @@ -231,4 +161,4 @@ input[type="submit"].btn { color: @btnText; margin: 0; vertical-align: middle; -} \ No newline at end of file +} diff --git a/public/less/components/navbar.less b/public/less/components/navbar.less index 2b8ed23a8f4..4a1d0861060 100644 --- a/public/less/components/navbar.less +++ b/public/less/components/navbar.less @@ -100,7 +100,7 @@ .top-nav-menu-btn { a { - padding: 6px 20px 6px 13px; + padding: 7px 20px 6px 13px; } img { width: 30px; diff --git a/public/less/grafana.dark.less b/public/less/grafana.dark.less index ba8897f5aac..e4c834c6aa8 100644 --- a/public/less/grafana.dark.less +++ b/public/less/grafana.dark.less @@ -1,4 +1,3 @@ @import "variables.dark.less"; @import "bootstrap/bootstrap.less"; -@import "bootswatch.dark.less"; @import "grafana.less"; diff --git a/public/less/grafana.less b/public/less/grafana.less index 813ba26b312..8e0b80470db 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -10,6 +10,9 @@ @import "./utils/validation.less"; @import "./utils/angular.less"; +// MIXINS +@import "./mixins/buttons.less"; + // LAYOUTS @import "./layout/page.less"; @@ -45,6 +48,7 @@ @import "./components/dropdown.less"; @import "./components/color_picker.less"; @import "./components/tooltip.less"; +@import "./components/buttons.less"; // PAGES @import "./pages/login.less"; diff --git a/public/less/grafana.light.less b/public/less/grafana.light.less index 6f07f7f9075..68a8f13dece 100644 --- a/public/less/grafana.light.less +++ b/public/less/grafana.light.less @@ -1,4 +1,3 @@ @import "variables.light.less"; @import "bootstrap/bootstrap.less"; -@import "bootswatch.light.less"; @import "grafana.less"; diff --git a/public/less/mixins/buttons.less b/public/less/mixins/buttons.less new file mode 100644 index 00000000000..de055f918e8 --- /dev/null +++ b/public/less/mixins/buttons.less @@ -0,0 +1,18 @@ + +// Button backgrounds +// ------------------ +.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + // gradientBar will set the background to a pleasing blend of these, to support IE<=9 + .gradientBar(@startColor, @endColor, @textColor, @textShadow); + + box-shadow: inset 0 -4px rgba(0,0,0,0.3); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { + color: @textColor; + background-image: none; + background-color: darken(@endColor, 2%); + } +} + + diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 07a6da7f278..7784d3c6dac 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -129,22 +129,25 @@ @btnBorder: #bbb; @btnPrimaryBackground: @blueDark; -@btnPrimaryBackgroundHighlight: lighten(@blueDark, 10%); +@btnPrimaryBackgroundHighlight: lighten(@blueDark, 5%); -@btnInfoBackground: lighten(@purple, 5%); -@btnInfoBackgroundHighlight: darken(@purple, 5%); +@btnInfoBackground: lighten(@purple, 3%); +@btnInfoBackgroundHighlight: darken(@purple, 3%); -@btnSuccessBackground: lighten(@green, 5%); -@btnSuccessBackgroundHighlight: darken(@green, 5%); +@btnSuccessBackground: lighten(@green, 3%); +@btnSuccessBackgroundHighlight: darken(@green, 3%); -@btnWarningBackground: lighten(@orange, 5%); -@btnWarningBackgroundHighlight: darken(@orange, 5%); +@btnWarningBackground: lighten(@orange, 3%); +@btnWarningBackgroundHighlight: darken(@orange, 3%); -@btnDangerBackground: lighten(@red, 5%); -@btnDangerBackgroundHighlight: darken(@red, 5%); +@btnDangerBackground: lighten(@red, 3%); +@btnDangerBackgroundHighlight: darken(@red, 3%); @btnInverseBackground: @grayDark; -@btnInverseBackgroundHighlight: lighten(@grayDark, 5%); +@btnInverseBackgroundHighlight: lighten(@grayDark, 1%); +@btnInverseText: @textColor; +@btnInverseBorder: #333; + @btnText: @gray; @@ -242,7 +245,7 @@ @navbarHeight: 52px; @navbarBackgroundHighlight: @grayDark; @navbarBackground: @grayDark; -@navbarBorder: 1px solid @grayDark; +@navbarBorder: 1px solid @bodyBackground; @navbarText: @grayLight; @navbarLinkColor: @grayLight; diff --git a/public/less/variables.light.less b/public/less/variables.light.less index ae8fcef2df3..29236f734a9 100644 --- a/public/less/variables.light.less +++ b/public/less/variables.light.less @@ -140,23 +140,25 @@ @btnBackgroundHighlight: darken(@grayLighter, 15%); @btnBorder: #bbb; -@btnPrimaryBackground: lighten(@blue, 5%); -@btnPrimaryBackgroundHighlight: darken(@blue, 5%); +@btnPrimaryBackground: lighten(@blue, 3%); +@btnPrimaryBackgroundHighlight: darken(@blue, 3%); -@btnInfoBackground: lighten(@purple, 5%); -@btnInfoBackgroundHighlight: darken(@purple, 5%); +@btnInfoBackground: lighten(@purple, 3%); +@btnInfoBackgroundHighlight: darken(@purple, 3%); -@btnSuccessBackground: lighten(@green, 5%); -@btnSuccessBackgroundHighlight: darken(@green, 5%); +@btnSuccessBackground: lighten(@green, 3%); +@btnSuccessBackgroundHighlight: darken(@green, 3%); -@btnWarningBackground: lighten(@orange, 5%); -@btnWarningBackgroundHighlight: darken(@orange, 5%); +@btnWarningBackground: lighten(@orange, 3%); +@btnWarningBackgroundHighlight: darken(@orange, 3%); -@btnDangerBackground: lighten(@red, 5%); -@btnDangerBackgroundHighlight: darken(@red, 5%); +@btnDangerBackground: lighten(@red, 3%); +@btnDangerBackgroundHighlight: darken(@red, 3%); -@btnInverseBackground: @white; -@btnInverseBackgroundHighlight: darken(@grayLight, 15%); +@btnInverseBackground: @grayLighter; +@btnInverseBackgroundHighlight: darken(@grayLighter, 5%); +@btnInverseText: @black; +@btnInverseBorder: @grayLight; @btnText: @grayLighter; From fe4cdc59bedcc166260bf93dd34a2ff85f67b721 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 13:19:03 +0100 Subject: [PATCH 060/444] fix(bra): fix bra runner --- .bra.toml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.bra.toml b/.bra.toml index ef1a925158d..54019208984 100644 --- a/.bra.toml +++ b/.bra.toml @@ -1,6 +1,6 @@ [run] init_cmds = [ - ["go", "build", "-o", "./bin/grafana-server"], + ["go", "build", "-o", "./bin/grafana-server", "./pkg/cmd/grafana-server"], ["./bin/grafana-server"] ] watch_all = true @@ -12,6 +12,6 @@ watch_dirs = [ watch_exts = [".go", ".ini", ".toml", ".html"] build_delay = 1500 cmds = [ - ["go", "build", "-o", "./bin/grafana-server"], + ["go", "build", "-o", "./bin/grafana-server", "./pkg/cmd/grafana-server"], ["./bin/grafana-server"] ] From c11322a01688f561c3d44afdd434438d6197b50a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 13:51:56 +0100 Subject: [PATCH 061/444] ux(less): more less cleanup, restructuring --- public/less/components/buttons.less | 61 ------------- public/less/components/dashboard.less | 17 ++++ public/less/components/footer.less | 9 ++ public/less/components/infobox.less | 20 +++++ public/less/components/query_editor.less | 16 ++++ public/less/components/shortcuts.less | 6 ++ public/less/components/tooltip.less | 4 + public/less/components/typeahead.less | 5 ++ public/less/grafana.less | 107 ++--------------------- public/less/layout/page.less | 6 +- public/less/pages/login.less | 1 + public/less/pages/signup.less | 17 ++++ public/less/utils/utils.less | 4 + public/less/variables.dark.less | 1 - 14 files changed, 108 insertions(+), 166 deletions(-) create mode 100644 public/less/components/footer.less create mode 100644 public/less/components/infobox.less create mode 100644 public/less/components/query_editor.less create mode 100644 public/less/components/shortcuts.less create mode 100644 public/less/pages/signup.less create mode 100644 public/less/utils/utils.less diff --git a/public/less/components/buttons.less b/public/less/components/buttons.less index 1ffc8f3e6cb..cd0095cf8e0 100644 --- a/public/less/components/buttons.less +++ b/public/less/components/buttons.less @@ -96,67 +96,6 @@ border: 1px solid @grafanaTargetFuncHightlight; } - -// Cross-browser Jank -// -------------------------------------------------- - -button.btn, -input[type="submit"].btn { - - // Firefox 3.6 only I believe - &::-moz-focus-inner { - padding: 0; - border: 0; - } - - // IE7 has some default padding on button controls - *padding-top: 3px; - *padding-bottom: 3px; - - &.btn-large { - *padding-top: 7px; - *padding-bottom: 7px; - } - &.btn-small { - *padding-top: 3px; - *padding-bottom: 3px; - } - &.btn-mini { - *padding-top: 1px; - *padding-bottom: 1px; - } -} - - -// Link buttons -// -------------------------------------------------- - -// Make a button look and behave like a link -.btn-link, -.btn-link:active, -.btn-link[disabled] { - background-color: transparent; - background-image: none; - .box-shadow(none); -} -.btn-link { - border-color: transparent; - cursor: pointer; - color: @linkColor; - .border-radius(0); -} -.btn-link:hover, -.btn-link:focus { - color: @linkColorHover; - text-decoration: underline; - background-color: transparent; -} -.btn-link[disabled]:hover, -.btn-link[disabled]:focus { - color: @grayDark; - text-decoration: none; -} - .btn-text { color: @btnText; margin: 0; diff --git a/public/less/components/dashboard.less b/public/less/components/dashboard.less index 38172d89044..cc19bf0a1b6 100644 --- a/public/less/components/dashboard.less +++ b/public/less/components/dashboard.less @@ -1,3 +1,6 @@ +.template-variable { + color: @variable; +} .grafana-row { margin-bottom: 5px; @@ -266,3 +269,17 @@ div.flot-text { height: 15px; display: block; } + +.dashboard-header { + font-family: "grafana-icons"; + font-size: 22px; + text-align: center; + span { + display: inline-block; + border: none; + border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); + border-image-slice: 1; + border-bottom: 2px solid transparent; + padding: 1.2rem .2rem .4rem .2rem; + } +} diff --git a/public/less/components/footer.less b/public/less/components/footer.less new file mode 100644 index 00000000000..9c25c837b3f --- /dev/null +++ b/public/less/components/footer.less @@ -0,0 +1,9 @@ +.grafana-version-info { + position: absolute; + bottom: 2px; + left: 3px; + font-size: 80%; + color: darken(@gray, 25%); + a { color: darken(@gray, 25%); } +} + diff --git a/public/less/components/infobox.less b/public/less/components/infobox.less new file mode 100644 index 00000000000..be446e9eb8a --- /dev/null +++ b/public/less/components/infobox.less @@ -0,0 +1,20 @@ +.grafana-info-box:before { + content: "\f05a"; + font-family:'FontAwesome'; + position: absolute; + top: -8px; + left: -8px; + font-size: 20px; + color: @blue; +} + +.grafana-info-box { + position: relative; + padding: 5px 15px; + background-color: @grafanaTargetBackground; + border: 1px solid @grafanaTargetBorder; + h5 { + margin-top: 5px; + } +} + diff --git a/public/less/components/query_editor.less b/public/less/components/query_editor.less new file mode 100644 index 00000000000..de7df012c46 --- /dev/null +++ b/public/less/components/query_editor.less @@ -0,0 +1,16 @@ +.query-keyword { + font-weight: bold; + color: @blue; +} + +.query-segment-key { + border-right: none; + padding-right: 1px; +} + +.query-segment-operator { + padding-right: 1px; + border-right: none; + color: @orange; +} + diff --git a/public/less/components/shortcuts.less b/public/less/components/shortcuts.less new file mode 100644 index 00000000000..ed639b6292c --- /dev/null +++ b/public/less/components/shortcuts.less @@ -0,0 +1,6 @@ +.shortcut-table { + td { padding: 3px; } + th:last-child { text-align: left; } + td:first-child { text-align: right; } +} + diff --git a/public/less/components/tooltip.less b/public/less/components/tooltip.less index 1922128d4d3..03be011f72a 100644 --- a/public/less/components/tooltip.less +++ b/public/less/components/tooltip.less @@ -96,3 +96,7 @@ border-bottom: 0px solid #c8c8c8; } +.grafana-tip { + padding-left: 5px; +} + diff --git a/public/less/components/typeahead.less b/public/less/components/typeahead.less index 23802504b0b..6d63ed05a99 100644 --- a/public/less/components/typeahead.less +++ b/public/less/components/typeahead.less @@ -4,3 +4,8 @@ max-height: 300px; overflow-y: auto; } + +.typeahead strong { + color: @yellow; +} + diff --git a/public/less/grafana.less b/public/less/grafana.less index 8e0b80470db..76b199224f9 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -7,6 +7,7 @@ @import "./base/code.less"; // UTILS +@import "./utils/utils.less"; @import "./utils/validation.less"; @import "./utils/angular.less"; @@ -49,6 +50,10 @@ @import "./components/color_picker.less"; @import "./components/tooltip.less"; @import "./components/buttons.less"; +@import "./components/footer.less"; +@import "./components/infobox.less"; +@import "./components/shortcuts.less"; +@import "./components/query_editor.less"; // PAGES @import "./pages/login.less"; @@ -56,105 +61,5 @@ @import "./pages/admin.less"; @import "./pages/alerting.less"; @import "./pages/apps.less"; +@import "./pages/signup.less"; -.grafana-version-info { - position: absolute; - bottom: 2px; - left: 3px; - font-size: 80%; - color: darken(@gray, 25%); - a { color: darken(@gray, 25%); } -} - -.template-variable { - color: @variable; -} - -.grafana-info-box:before { - content: "\f05a"; - font-family:'FontAwesome'; - position: absolute; - top: -8px; - left: -8px; - font-size: 20px; - color: @blue; -} - -.grafana-info-box { - position: relative; - padding: 5px 15px; - background-color: @grafanaTargetBackground; - border: 1px solid @grafanaTargetBorder; - h5 { - margin-top: 5px; - } -} - -.grafana-tip { - padding-left: 5px; -} - -.shortcut-table { - td { padding: 3px; } - th:last-child { text-align: left; } - td:first-child { text-align: right; } -} - -.query-keyword { - font-weight: bold; - color: @blue; -} - -.query-segment-key { - border-right: none; - padding-right: 1px; -} - -.query-segment-operator { - padding-right: 1px; - border-right: none; - color: @orange; -} - -.highlight-word { - color: @orange; -} - -.body-copy-emphasis { - color: @headingsColor; -} - -.signup-page-container { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - background-image: url(/img/background_tease.jpg); - - .signup-logo-container { - width: 150px; - margin: 0 auto; - padding: 80px 0; - } -} - -.typeahead strong { - color: @yellow; -} - -.dashboard-header { - font-family: "grafana-icons"; - font-size: 22px; - text-align: center; - span { - display: inline-block; - border: none; - border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); - border-image-slice: 1; - border-bottom: 2px solid transparent; - padding: 1.2rem .2rem .4rem .2rem; - } -} diff --git a/public/less/layout/page.less b/public/less/layout/page.less index ed775ecb07c..11b37da2f96 100644 --- a/public/less/layout/page.less +++ b/public/less/layout/page.less @@ -10,9 +10,9 @@ } .main-view { - background-image: url(/img/grafana_pattern.png); - background-position: 100% -550px; - background-repeat: no-repeat; + // background-image: url(/img/grafana_pattern.png); + // background-position: 100% -550px; + // background-repeat: no-repeat; height: 100%; } diff --git a/public/less/pages/login.less b/public/less/pages/login.less index 98942b660ba..16dd1f342fb 100644 --- a/public/less/pages/login.less +++ b/public/less/pages/login.less @@ -98,6 +98,7 @@ background: #dd4b39; color: white; } + .btn-github { background: #555; color: white; diff --git a/public/less/pages/signup.less b/public/less/pages/signup.less new file mode 100644 index 00000000000..7b2b0b0e84a --- /dev/null +++ b/public/less/pages/signup.less @@ -0,0 +1,17 @@ +.signup-page-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + background-image: url(/img/background_tease.jpg); + + .signup-logo-container { + width: 150px; + margin: 0 auto; + padding: 80px 0; + } +} + diff --git a/public/less/utils/utils.less b/public/less/utils/utils.less new file mode 100644 index 00000000000..3e145a2bc58 --- /dev/null +++ b/public/less/utils/utils.less @@ -0,0 +1,4 @@ +.highlight-word { + color: @orange; +} + diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less index 7784d3c6dac..9303f017496 100644 --- a/public/less/variables.dark.less +++ b/public/less/variables.dark.less @@ -148,7 +148,6 @@ @btnInverseText: @textColor; @btnInverseBorder: #333; - @btnText: @gray; @iconContainerBackground: @black; From d59beec3546fe8a872ac11734dfa7e1e6c93de72 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 14:09:34 +0100 Subject: [PATCH 062/444] feat(cli): move cli into main repo --- Godeps/Godeps.json | 17 + .../github.com/codegangsta/cli/.travis.yml | 19 + .../src/github.com/codegangsta/cli/LICENSE | 21 + .../src/github.com/codegangsta/cli/README.md | 341 ++++++++++++ .../src/github.com/codegangsta/cli/app.go | 334 +++++++++++ .../cli/autocomplete/bash_autocomplete | 14 + .../cli/autocomplete/zsh_autocomplete | 5 + .../src/github.com/codegangsta/cli/cli.go | 40 ++ .../src/github.com/codegangsta/cli/command.go | 216 +++++++ .../src/github.com/codegangsta/cli/context.go | 388 +++++++++++++ .../src/github.com/codegangsta/cli/flag.go | 527 ++++++++++++++++++ .../src/github.com/codegangsta/cli/help.go | 246 ++++++++ .../src/github.com/franela/goreq/.gitignore | 24 + .../src/github.com/franela/goreq/.travis.yml | 8 + .../src/github.com/franela/goreq/LICENSE | 20 + .../src/github.com/franela/goreq/Makefile | 3 + .../src/github.com/franela/goreq/README.md | 444 +++++++++++++++ .../src/github.com/franela/goreq/goreq.go | 491 ++++++++++++++++ .../src/github.com/franela/goreq/tags.go | 64 +++ .../src/github.com/gopherjs/gopherjs/LICENSE | 24 + .../src/github.com/gopherjs/gopherjs/js/js.go | 168 ++++++ .../github.com/grafana/grafana-cli/LICENSE | 201 +++++++ .../grafana-cli/pkg/commands/command_line.go | 35 ++ .../grafana-cli/pkg/commands/commands.go | 48 ++ .../commands/commandstest/fake_commandLine.go | 95 ++++ .../pkg/commands/commandstest/fake_ioutil.go | 55 ++ .../pkg/commands/install_command.go | 146 +++++ .../pkg/commands/listremote_command.go | 20 + .../grafana-cli/pkg/commands/ls_command.go | 49 ++ .../pkg/commands/remove_command.go | 35 ++ .../pkg/commands/upgrade_all_command.go | 61 ++ .../pkg/commands/upgrade_command.go | 9 + .../grafana/grafana-cli/pkg/log/log.go | 49 ++ .../grafana/grafana-cli/pkg/models/model.go | 48 ++ .../grafana-cli/pkg/services/io_util.go | 28 + .../grafana-cli/pkg/services/services.go | 70 +++ .../grafana-cli/pkg/version/version.go | 5 + .../hashicorp/go-version/.travis.yml | 11 + .../github.com/hashicorp/go-version/LICENSE | 354 ++++++++++++ .../github.com/hashicorp/go-version/README.md | 65 +++ .../hashicorp/go-version/constraint.go | 156 ++++++ .../hashicorp/go-version/version.go | 251 +++++++++ .../go-version/version_collection.go | 17 + build.go | 8 +- pkg/cmd/grafana-cli/commands/command_line.go | 35 ++ pkg/cmd/grafana-cli/commands/commands.go | 48 ++ .../commands/commandstest/fake_commandLine.go | 95 ++++ .../commands/commandstest/fake_ioutil.go | 55 ++ .../grafana-cli/commands/install_command.go | 146 +++++ .../commands/install_command_test.go | 39 ++ .../commands/listremote_command.go | 20 + pkg/cmd/grafana-cli/commands/ls_command.go | 49 ++ .../grafana-cli/commands/ls_command_test.go | 47 ++ .../grafana-cli/commands/remove_command.go | 35 ++ .../commands/upgrade_all_command.go | 61 ++ .../commands/upgrade_all_command_test.go | 46 ++ .../grafana-cli/commands/upgrade_command.go | 9 + pkg/cmd/grafana-cli/log/log.go | 49 ++ pkg/cmd/grafana-cli/main.go | 69 +++ pkg/cmd/grafana-cli/models/model.go | 48 ++ pkg/cmd/grafana-cli/services/io_util.go | 28 + pkg/cmd/grafana-cli/services/services.go | 70 +++ pkg/cmd/grafana-cli/version/version.go | 5 + 63 files changed, 6180 insertions(+), 4 deletions(-) create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/.travis.yml create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/LICENSE create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/README.md create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/app.go create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/bash_autocomplete create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/zsh_autocomplete create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/cli.go create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/command.go create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/context.go create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/flag.go create mode 100644 Godeps/_workspace/src/github.com/codegangsta/cli/help.go create mode 100644 Godeps/_workspace/src/github.com/franela/goreq/.gitignore create mode 100644 Godeps/_workspace/src/github.com/franela/goreq/.travis.yml create mode 100644 Godeps/_workspace/src/github.com/franela/goreq/LICENSE create mode 100644 Godeps/_workspace/src/github.com/franela/goreq/Makefile create mode 100644 Godeps/_workspace/src/github.com/franela/goreq/README.md create mode 100644 Godeps/_workspace/src/github.com/franela/goreq/goreq.go create mode 100644 Godeps/_workspace/src/github.com/franela/goreq/tags.go create mode 100644 Godeps/_workspace/src/github.com/gopherjs/gopherjs/LICENSE create mode 100644 Godeps/_workspace/src/github.com/gopherjs/gopherjs/js/js.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/LICENSE create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/command_line.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commands.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_commandLine.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_ioutil.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/install_command.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/listremote_command.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/ls_command.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/remove_command.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_all_command.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_command.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/log/log.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/models/model.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/io_util.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/services.go create mode 100644 Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/version/version.go create mode 100644 Godeps/_workspace/src/github.com/hashicorp/go-version/.travis.yml create mode 100644 Godeps/_workspace/src/github.com/hashicorp/go-version/LICENSE create mode 100644 Godeps/_workspace/src/github.com/hashicorp/go-version/README.md create mode 100644 Godeps/_workspace/src/github.com/hashicorp/go-version/constraint.go create mode 100644 Godeps/_workspace/src/github.com/hashicorp/go-version/version.go create mode 100644 Godeps/_workspace/src/github.com/hashicorp/go-version/version_collection.go create mode 100644 pkg/cmd/grafana-cli/commands/command_line.go create mode 100644 pkg/cmd/grafana-cli/commands/commands.go create mode 100644 pkg/cmd/grafana-cli/commands/commandstest/fake_commandLine.go create mode 100644 pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go create mode 100644 pkg/cmd/grafana-cli/commands/install_command.go create mode 100644 pkg/cmd/grafana-cli/commands/install_command_test.go create mode 100644 pkg/cmd/grafana-cli/commands/listremote_command.go create mode 100644 pkg/cmd/grafana-cli/commands/ls_command.go create mode 100644 pkg/cmd/grafana-cli/commands/ls_command_test.go create mode 100644 pkg/cmd/grafana-cli/commands/remove_command.go create mode 100644 pkg/cmd/grafana-cli/commands/upgrade_all_command.go create mode 100644 pkg/cmd/grafana-cli/commands/upgrade_all_command_test.go create mode 100644 pkg/cmd/grafana-cli/commands/upgrade_command.go create mode 100644 pkg/cmd/grafana-cli/log/log.go create mode 100644 pkg/cmd/grafana-cli/main.go create mode 100644 pkg/cmd/grafana-cli/models/model.go create mode 100644 pkg/cmd/grafana-cli/services/io_util.go create mode 100644 pkg/cmd/grafana-cli/services/services.go create mode 100644 pkg/cmd/grafana-cli/version/version.go diff --git a/Godeps/Godeps.json b/Godeps/Godeps.json index 6449d1941c4..b75fdfb574a 100644 --- a/Godeps/Godeps.json +++ b/Godeps/Godeps.json @@ -69,10 +69,19 @@ "Comment": "release.r60-40-g72a6864", "Rev": "72a68649ba712ee7c4b5b4a943a626bcd7d90eb8" }, + { + "ImportPath": "github.com/codegangsta/cli", + "Comment": "1.2.0-187-gc31a797", + "Rev": "c31a7975863e7810c92e2e288a9ab074f9a88f29" + }, { "ImportPath": "github.com/davecgh/go-spew/spew", "Rev": "2df174808ee097f90d259e432cc04442cf60be21" }, + { + "ImportPath": "github.com/franela/goreq", + "Rev": "3ddeded65be21dacb5a2e2d0b95af9ff6862a2b5" + }, { "ImportPath": "github.com/go-ini/ini", "Comment": "v0-48-g060d7da", @@ -114,10 +123,18 @@ "Comment": "v0.4.4-44-gf561133", "Rev": "f56113384f2c63dfe4cd8e768e349f1c35122b58" }, + { + "ImportPath": "github.com/gopherjs/gopherjs/js", + "Rev": "14d893dca2e4adb93a5ccc9494040acc0821cd8d" + }, { "ImportPath": "github.com/gosimple/slug", "Rev": "8d258463b4459f161f51d6a357edacd3eef9d663" }, + { + "ImportPath": "github.com/hashicorp/go-version", + "Rev": "7e3c02b30806fa5779d3bdfc152ce4c6f40e7b38" + }, { "ImportPath": "github.com/jmespath/go-jmespath", "Comment": "0.2.2", diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/.travis.yml b/Godeps/_workspace/src/github.com/codegangsta/cli/.travis.yml new file mode 100644 index 00000000000..87ba52f98ea --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/.travis.yml @@ -0,0 +1,19 @@ +language: go +sudo: false + +go: +- 1.0.3 +- 1.1.2 +- 1.2.2 +- 1.3.3 +- 1.4.2 +- 1.5.1 +- tip + +matrix: + allow_failures: + - go: tip + +script: +- go vet ./... +- go test -v ./... diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/LICENSE b/Godeps/_workspace/src/github.com/codegangsta/cli/LICENSE new file mode 100644 index 00000000000..5515ccfb716 --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/LICENSE @@ -0,0 +1,21 @@ +Copyright (C) 2013 Jeremy Saenz +All Rights Reserved. + +MIT LICENSE + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/README.md b/Godeps/_workspace/src/github.com/codegangsta/cli/README.md new file mode 100644 index 00000000000..26a183865dc --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/README.md @@ -0,0 +1,341 @@ +[![Coverage](http://gocover.io/_badge/github.com/codegangsta/cli?0)](http://gocover.io/github.com/codegangsta/cli) +[![Build Status](https://travis-ci.org/codegangsta/cli.png?branch=master)](https://travis-ci.org/codegangsta/cli) +[![GoDoc](https://godoc.org/github.com/codegangsta/cli?status.svg)](https://godoc.org/github.com/codegangsta/cli) + +# cli.go +`cli.go` is simple, fast, and fun package for building command line apps in Go. The goal is to enable developers to write fast and distributable command line applications in an expressive way. + +## Overview +Command line apps are usually so tiny that there is absolutely no reason why your code should *not* be self-documenting. Things like generating help text and parsing command flags/options should not hinder productivity when writing a command line app. + +**This is where `cli.go` comes into play.** `cli.go` makes command line programming fun, organized, and expressive! + +## Installation +Make sure you have a working Go environment (go 1.1+ is *required*). [See the install instructions](http://golang.org/doc/install.html). + +To install `cli.go`, simply run: +``` +$ go get github.com/codegangsta/cli +``` + +Make sure your `PATH` includes to the `$GOPATH/bin` directory so your commands can be easily used: +``` +export PATH=$PATH:$GOPATH/bin +``` + +## Getting Started +One of the philosophies behind `cli.go` is that an API should be playful and full of discovery. So a `cli.go` app can be as little as one line of code in `main()`. + +``` go +package main + +import ( + "os" + "github.com/codegangsta/cli" +) + +func main() { + cli.NewApp().Run(os.Args) +} +``` + +This app will run and show help text, but is not very useful. Let's give an action to execute and some help documentation: + +``` go +package main + +import ( + "os" + "github.com/codegangsta/cli" +) + +func main() { + app := cli.NewApp() + app.Name = "boom" + app.Usage = "make an explosive entrance" + app.Action = func(c *cli.Context) { + println("boom! I say!") + } + + app.Run(os.Args) +} +``` + +Running this already gives you a ton of functionality, plus support for things like subcommands and flags, which are covered below. + +## Example + +Being a programmer can be a lonely job. Thankfully by the power of automation that is not the case! Let's create a greeter app to fend off our demons of loneliness! + +Start by creating a directory named `greet`, and within it, add a file, `greet.go` with the following code in it: + +``` go +package main + +import ( + "os" + "github.com/codegangsta/cli" +) + +func main() { + app := cli.NewApp() + app.Name = "greet" + app.Usage = "fight the loneliness!" + app.Action = func(c *cli.Context) { + println("Hello friend!") + } + + app.Run(os.Args) +} +``` + +Install our command to the `$GOPATH/bin` directory: + +``` +$ go install +``` + +Finally run our new command: + +``` +$ greet +Hello friend! +``` + +`cli.go` also generates neat help text: + +``` +$ greet help +NAME: + greet - fight the loneliness! + +USAGE: + greet [global options] command [command options] [arguments...] + +VERSION: + 0.0.0 + +COMMANDS: + help, h Shows a list of commands or help for one command + +GLOBAL OPTIONS + --version Shows version information +``` + +### Arguments +You can lookup arguments by calling the `Args` function on `cli.Context`. + +``` go +... +app.Action = func(c *cli.Context) { + println("Hello", c.Args()[0]) +} +... +``` + +### Flags +Setting and querying flags is simple. +``` go +... +app.Flags = []cli.Flag { + cli.StringFlag{ + Name: "lang", + Value: "english", + Usage: "language for the greeting", + }, +} +app.Action = func(c *cli.Context) { + name := "someone" + if len(c.Args()) > 0 { + name = c.Args()[0] + } + if c.String("lang") == "spanish" { + println("Hola", name) + } else { + println("Hello", name) + } +} +... +``` + +You can also set a destination variable for a flag, to which the content will be scanned. +``` go +... +var language string +app.Flags = []cli.Flag { + cli.StringFlag{ + Name: "lang", + Value: "english", + Usage: "language for the greeting", + Destination: &language, + }, +} +app.Action = func(c *cli.Context) { + name := "someone" + if len(c.Args()) > 0 { + name = c.Args()[0] + } + if language == "spanish" { + println("Hola", name) + } else { + println("Hello", name) + } +} +... +``` + +See full list of flags at http://godoc.org/github.com/codegangsta/cli + +#### Alternate Names + +You can set alternate (or short) names for flags by providing a comma-delimited list for the `Name`. e.g. + +``` go +app.Flags = []cli.Flag { + cli.StringFlag{ + Name: "lang, l", + Value: "english", + Usage: "language for the greeting", + }, +} +``` + +That flag can then be set with `--lang spanish` or `-l spanish`. Note that giving two different forms of the same flag in the same command invocation is an error. + +#### Values from the Environment + +You can also have the default value set from the environment via `EnvVar`. e.g. + +``` go +app.Flags = []cli.Flag { + cli.StringFlag{ + Name: "lang, l", + Value: "english", + Usage: "language for the greeting", + EnvVar: "APP_LANG", + }, +} +``` + +The `EnvVar` may also be given as a comma-delimited "cascade", where the first environment variable that resolves is used as the default. + +``` go +app.Flags = []cli.Flag { + cli.StringFlag{ + Name: "lang, l", + Value: "english", + Usage: "language for the greeting", + EnvVar: "LEGACY_COMPAT_LANG,APP_LANG,LANG", + }, +} +``` + +### Subcommands + +Subcommands can be defined for a more git-like command line app. +```go +... +app.Commands = []cli.Command{ + { + Name: "add", + Aliases: []string{"a"}, + Usage: "add a task to the list", + Action: func(c *cli.Context) { + println("added task: ", c.Args().First()) + }, + }, + { + Name: "complete", + Aliases: []string{"c"}, + Usage: "complete a task on the list", + Action: func(c *cli.Context) { + println("completed task: ", c.Args().First()) + }, + }, + { + Name: "template", + Aliases: []string{"r"}, + Usage: "options for task templates", + Subcommands: []cli.Command{ + { + Name: "add", + Usage: "add a new template", + Action: func(c *cli.Context) { + println("new task template: ", c.Args().First()) + }, + }, + { + Name: "remove", + Usage: "remove an existing template", + Action: func(c *cli.Context) { + println("removed task template: ", c.Args().First()) + }, + }, + }, + }, +} +... +``` + +### Bash Completion + +You can enable completion commands by setting the `EnableBashCompletion` +flag on the `App` object. By default, this setting will only auto-complete to +show an app's subcommands, but you can write your own completion methods for +the App or its subcommands. +```go +... +var tasks = []string{"cook", "clean", "laundry", "eat", "sleep", "code"} +app := cli.NewApp() +app.EnableBashCompletion = true +app.Commands = []cli.Command{ + { + Name: "complete", + Aliases: []string{"c"}, + Usage: "complete a task on the list", + Action: func(c *cli.Context) { + println("completed task: ", c.Args().First()) + }, + BashComplete: func(c *cli.Context) { + // This will complete if no args are passed + if len(c.Args()) > 0 { + return + } + for _, t := range tasks { + fmt.Println(t) + } + }, + } +} +... +``` + +#### To Enable + +Source the `autocomplete/bash_autocomplete` file in your `.bashrc` file while +setting the `PROG` variable to the name of your program: + +`PROG=myprogram source /.../cli/autocomplete/bash_autocomplete` + +#### To Distribute + +Copy `autocomplete/bash_autocomplete` into `/etc/bash_completion.d/` and rename +it to the name of the program you wish to add autocomplete support for (or +automatically install it there if you are distributing a package). Don't forget +to source the file to make it active in the current shell. + +``` + sudo cp src/bash_autocomplete /etc/bash_completion.d/ + source /etc/bash_completion.d/ +``` + +Alternatively, you can just document that users should source the generic +`autocomplete/bash_autocomplete` in their bash configuration with `$PROG` set +to the name of their program (as above). + +## Contribution Guidelines +Feel free to put up a pull request to fix a bug or maybe add a feature. I will give it a code review and make sure that it does not break backwards compatibility. If I or any other collaborators agree that it is in line with the vision of the project, we will work with you to get the code into a mergeable state and merge it into the master branch. + +If you have contributed something significant to the project, I will most likely add you as a collaborator. As a collaborator you are given the ability to merge others pull requests. It is very important that new code does not break existing code, so be careful about what code you do choose to merge. If you have any questions feel free to link @codegangsta to the issue in question and we can review it together. + +If you feel like you have contributed to the project but have not yet been added as a collaborator, I probably forgot to add you. Hit @codegangsta up over email and we will get it figured out. diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/app.go b/Godeps/_workspace/src/github.com/codegangsta/cli/app.go new file mode 100644 index 00000000000..2f992d0d7a7 --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/app.go @@ -0,0 +1,334 @@ +package cli + +import ( + "fmt" + "io" + "io/ioutil" + "os" + "path" + "time" +) + +// App is the main structure of a cli application. It is recomended that +// an app be created with the cli.NewApp() function +type App struct { + // The name of the program. Defaults to path.Base(os.Args[0]) + Name string + // Full name of command for help, defaults to Name + HelpName string + // Description of the program. + Usage string + // Description of the program argument format. + ArgsUsage string + // Version of the program + Version string + // List of commands to execute + Commands []Command + // List of flags to parse + Flags []Flag + // Boolean to enable bash completion commands + EnableBashCompletion bool + // Boolean to hide built-in help command + HideHelp bool + // Boolean to hide built-in version flag + HideVersion bool + // An action to execute when the bash-completion flag is set + BashComplete func(context *Context) + // An action to execute before any subcommands are run, but after the context is ready + // If a non-nil error is returned, no subcommands are run + Before func(context *Context) error + // An action to execute after any subcommands are run, but after the subcommand has finished + // It is run even if Action() panics + After func(context *Context) error + // The action to execute when no subcommands are specified + Action func(context *Context) + // Execute this function if the proper command cannot be found + CommandNotFound func(context *Context, command string) + // Compilation date + Compiled time.Time + // List of all authors who contributed + Authors []Author + // Copyright of the binary if any + Copyright string + // Name of Author (Note: Use App.Authors, this is deprecated) + Author string + // Email of Author (Note: Use App.Authors, this is deprecated) + Email string + // Writer writer to write output to + Writer io.Writer +} + +// Tries to find out when this binary was compiled. +// Returns the current time if it fails to find it. +func compileTime() time.Time { + info, err := os.Stat(os.Args[0]) + if err != nil { + return time.Now() + } + return info.ModTime() +} + +// Creates a new cli Application with some reasonable defaults for Name, Usage, Version and Action. +func NewApp() *App { + return &App{ + Name: path.Base(os.Args[0]), + HelpName: path.Base(os.Args[0]), + Usage: "A new cli application", + Version: "0.0.0", + BashComplete: DefaultAppComplete, + Action: helpCommand.Action, + Compiled: compileTime(), + Writer: os.Stdout, + } +} + +// Entry point to the cli app. Parses the arguments slice and routes to the proper flag/args combination +func (a *App) Run(arguments []string) (err error) { + if a.Author != "" || a.Email != "" { + a.Authors = append(a.Authors, Author{Name: a.Author, Email: a.Email}) + } + + newCmds := []Command{} + for _, c := range a.Commands { + if c.HelpName == "" { + c.HelpName = fmt.Sprintf("%s %s", a.HelpName, c.Name) + } + newCmds = append(newCmds, c) + } + a.Commands = newCmds + + // append help to commands + if a.Command(helpCommand.Name) == nil && !a.HideHelp { + a.Commands = append(a.Commands, helpCommand) + if (HelpFlag != BoolFlag{}) { + a.appendFlag(HelpFlag) + } + } + + //append version/help flags + if a.EnableBashCompletion { + a.appendFlag(BashCompletionFlag) + } + + if !a.HideVersion { + a.appendFlag(VersionFlag) + } + + // parse flags + set := flagSet(a.Name, a.Flags) + set.SetOutput(ioutil.Discard) + err = set.Parse(arguments[1:]) + nerr := normalizeFlags(a.Flags, set) + if nerr != nil { + fmt.Fprintln(a.Writer, nerr) + context := NewContext(a, set, nil) + ShowAppHelp(context) + return nerr + } + context := NewContext(a, set, nil) + + if checkCompletions(context) { + return nil + } + + if err != nil { + fmt.Fprintln(a.Writer, "Incorrect Usage.") + fmt.Fprintln(a.Writer) + ShowAppHelp(context) + return err + } + + if !a.HideHelp && checkHelp(context) { + ShowAppHelp(context) + return nil + } + + if !a.HideVersion && checkVersion(context) { + ShowVersion(context) + return nil + } + + if a.After != nil { + defer func() { + afterErr := a.After(context) + if afterErr != nil { + if err != nil { + err = NewMultiError(err, afterErr) + } else { + err = afterErr + } + } + }() + } + + if a.Before != nil { + err := a.Before(context) + if err != nil { + return err + } + } + + args := context.Args() + if args.Present() { + name := args.First() + c := a.Command(name) + if c != nil { + return c.Run(context) + } + } + + // Run default Action + a.Action(context) + return nil +} + +// Another entry point to the cli app, takes care of passing arguments and error handling +func (a *App) RunAndExitOnError() { + if err := a.Run(os.Args); err != nil { + fmt.Fprintln(os.Stderr, err) + os.Exit(1) + } +} + +// Invokes the subcommand given the context, parses ctx.Args() to generate command-specific flags +func (a *App) RunAsSubcommand(ctx *Context) (err error) { + // append help to commands + if len(a.Commands) > 0 { + if a.Command(helpCommand.Name) == nil && !a.HideHelp { + a.Commands = append(a.Commands, helpCommand) + if (HelpFlag != BoolFlag{}) { + a.appendFlag(HelpFlag) + } + } + } + + newCmds := []Command{} + for _, c := range a.Commands { + if c.HelpName == "" { + c.HelpName = fmt.Sprintf("%s %s", a.HelpName, c.Name) + } + newCmds = append(newCmds, c) + } + a.Commands = newCmds + + // append flags + if a.EnableBashCompletion { + a.appendFlag(BashCompletionFlag) + } + + // parse flags + set := flagSet(a.Name, a.Flags) + set.SetOutput(ioutil.Discard) + err = set.Parse(ctx.Args().Tail()) + nerr := normalizeFlags(a.Flags, set) + context := NewContext(a, set, ctx) + + if nerr != nil { + fmt.Fprintln(a.Writer, nerr) + fmt.Fprintln(a.Writer) + if len(a.Commands) > 0 { + ShowSubcommandHelp(context) + } else { + ShowCommandHelp(ctx, context.Args().First()) + } + return nerr + } + + if checkCompletions(context) { + return nil + } + + if err != nil { + fmt.Fprintln(a.Writer, "Incorrect Usage.") + fmt.Fprintln(a.Writer) + ShowSubcommandHelp(context) + return err + } + + if len(a.Commands) > 0 { + if checkSubcommandHelp(context) { + return nil + } + } else { + if checkCommandHelp(ctx, context.Args().First()) { + return nil + } + } + + if a.After != nil { + defer func() { + afterErr := a.After(context) + if afterErr != nil { + if err != nil { + err = NewMultiError(err, afterErr) + } else { + err = afterErr + } + } + }() + } + + if a.Before != nil { + err := a.Before(context) + if err != nil { + return err + } + } + + args := context.Args() + if args.Present() { + name := args.First() + c := a.Command(name) + if c != nil { + return c.Run(context) + } + } + + // Run default Action + a.Action(context) + + return nil +} + +// Returns the named command on App. Returns nil if the command does not exist +func (a *App) Command(name string) *Command { + for _, c := range a.Commands { + if c.HasName(name) { + return &c + } + } + + return nil +} + +func (a *App) hasFlag(flag Flag) bool { + for _, f := range a.Flags { + if flag == f { + return true + } + } + + return false +} + +func (a *App) appendFlag(flag Flag) { + if !a.hasFlag(flag) { + a.Flags = append(a.Flags, flag) + } +} + +// Author represents someone who has contributed to a cli project. +type Author struct { + Name string // The Authors name + Email string // The Authors email +} + +// String makes Author comply to the Stringer interface, to allow an easy print in the templating process +func (a Author) String() string { + e := "" + if a.Email != "" { + e = "<" + a.Email + "> " + } + + return fmt.Sprintf("%v %v", a.Name, e) +} diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/bash_autocomplete b/Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/bash_autocomplete new file mode 100644 index 00000000000..21a232f1f55 --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/bash_autocomplete @@ -0,0 +1,14 @@ +#! /bin/bash + +: ${PROG:=$(basename ${BASH_SOURCE})} + +_cli_bash_autocomplete() { + local cur opts base + COMPREPLY=() + cur="${COMP_WORDS[COMP_CWORD]}" + opts=$( ${COMP_WORDS[@]:0:$COMP_CWORD} --generate-bash-completion ) + COMPREPLY=( $(compgen -W "${opts}" -- ${cur}) ) + return 0 + } + + complete -F _cli_bash_autocomplete $PROG diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/zsh_autocomplete b/Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/zsh_autocomplete new file mode 100644 index 00000000000..5430a18f957 --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/autocomplete/zsh_autocomplete @@ -0,0 +1,5 @@ +autoload -U compinit && compinit +autoload -U bashcompinit && bashcompinit + +script_dir=$(dirname $0) +source ${script_dir}/bash_autocomplete diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/cli.go b/Godeps/_workspace/src/github.com/codegangsta/cli/cli.go new file mode 100644 index 00000000000..31dc9124d1e --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/cli.go @@ -0,0 +1,40 @@ +// Package cli provides a minimal framework for creating and organizing command line +// Go applications. cli is designed to be easy to understand and write, the most simple +// cli application can be written as follows: +// func main() { +// cli.NewApp().Run(os.Args) +// } +// +// Of course this application does not do much, so let's make this an actual application: +// func main() { +// app := cli.NewApp() +// app.Name = "greet" +// app.Usage = "say a greeting" +// app.Action = func(c *cli.Context) { +// println("Greetings") +// } +// +// app.Run(os.Args) +// } +package cli + +import ( + "strings" +) + +type MultiError struct { + Errors []error +} + +func NewMultiError(err ...error) MultiError { + return MultiError{Errors: err} +} + +func (m MultiError) Error() string { + errs := make([]string, len(m.Errors)) + for i, err := range m.Errors { + errs[i] = err.Error() + } + + return strings.Join(errs, "\n") +} diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/command.go b/Godeps/_workspace/src/github.com/codegangsta/cli/command.go new file mode 100644 index 00000000000..824e77bae3f --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/command.go @@ -0,0 +1,216 @@ +package cli + +import ( + "fmt" + "io/ioutil" + "strings" +) + +// Command is a subcommand for a cli.App. +type Command struct { + // The name of the command + Name string + // short name of the command. Typically one character (deprecated, use `Aliases`) + ShortName string + // A list of aliases for the command + Aliases []string + // A short description of the usage of this command + Usage string + // A longer explanation of how the command works + Description string + // A short description of the arguments of this command + ArgsUsage string + // The function to call when checking for bash command completions + BashComplete func(context *Context) + // An action to execute before any sub-subcommands are run, but after the context is ready + // If a non-nil error is returned, no sub-subcommands are run + Before func(context *Context) error + // An action to execute after any subcommands are run, but after the subcommand has finished + // It is run even if Action() panics + After func(context *Context) error + // The function to call when this command is invoked + Action func(context *Context) + // List of child commands + Subcommands []Command + // List of flags to parse + Flags []Flag + // Treat all flags as normal arguments if true + SkipFlagParsing bool + // Boolean to hide built-in help command + HideHelp bool + + // Full name of command for help, defaults to full command name, including parent commands. + HelpName string + commandNamePath []string +} + +// Returns the full name of the command. +// For subcommands this ensures that parent commands are part of the command path +func (c Command) FullName() string { + if c.commandNamePath == nil { + return c.Name + } + return strings.Join(c.commandNamePath, " ") +} + +// Invokes the command given the context, parses ctx.Args() to generate command-specific flags +func (c Command) Run(ctx *Context) error { + if len(c.Subcommands) > 0 || c.Before != nil || c.After != nil { + return c.startApp(ctx) + } + + if !c.HideHelp && (HelpFlag != BoolFlag{}) { + // append help to flags + c.Flags = append( + c.Flags, + HelpFlag, + ) + } + + if ctx.App.EnableBashCompletion { + c.Flags = append(c.Flags, BashCompletionFlag) + } + + set := flagSet(c.Name, c.Flags) + set.SetOutput(ioutil.Discard) + + var err error + if !c.SkipFlagParsing { + firstFlagIndex := -1 + terminatorIndex := -1 + for index, arg := range ctx.Args() { + if arg == "--" { + terminatorIndex = index + break + } else if strings.HasPrefix(arg, "-") && firstFlagIndex == -1 { + firstFlagIndex = index + } + } + + if firstFlagIndex > -1 { + args := ctx.Args() + regularArgs := make([]string, len(args[1:firstFlagIndex])) + copy(regularArgs, args[1:firstFlagIndex]) + + var flagArgs []string + if terminatorIndex > -1 { + flagArgs = args[firstFlagIndex:terminatorIndex] + regularArgs = append(regularArgs, args[terminatorIndex:]...) + } else { + flagArgs = args[firstFlagIndex:] + } + + err = set.Parse(append(flagArgs, regularArgs...)) + } else { + err = set.Parse(ctx.Args().Tail()) + } + } else { + if c.SkipFlagParsing { + err = set.Parse(append([]string{"--"}, ctx.Args().Tail()...)) + } + } + + if err != nil { + fmt.Fprintln(ctx.App.Writer, "Incorrect Usage.") + fmt.Fprintln(ctx.App.Writer) + ShowCommandHelp(ctx, c.Name) + return err + } + + nerr := normalizeFlags(c.Flags, set) + if nerr != nil { + fmt.Fprintln(ctx.App.Writer, nerr) + fmt.Fprintln(ctx.App.Writer) + ShowCommandHelp(ctx, c.Name) + return nerr + } + context := NewContext(ctx.App, set, ctx) + + if checkCommandCompletions(context, c.Name) { + return nil + } + + if checkCommandHelp(context, c.Name) { + return nil + } + context.Command = c + c.Action(context) + return nil +} + +func (c Command) Names() []string { + names := []string{c.Name} + + if c.ShortName != "" { + names = append(names, c.ShortName) + } + + return append(names, c.Aliases...) +} + +// Returns true if Command.Name or Command.ShortName matches given name +func (c Command) HasName(name string) bool { + for _, n := range c.Names() { + if n == name { + return true + } + } + return false +} + +func (c Command) startApp(ctx *Context) error { + app := NewApp() + + // set the name and usage + app.Name = fmt.Sprintf("%s %s", ctx.App.Name, c.Name) + if c.HelpName == "" { + app.HelpName = c.HelpName + } else { + app.HelpName = fmt.Sprintf("%s %s", ctx.App.Name, c.Name) + } + + if c.Description != "" { + app.Usage = c.Description + } else { + app.Usage = c.Usage + } + + // set CommandNotFound + app.CommandNotFound = ctx.App.CommandNotFound + + // set the flags and commands + app.Commands = c.Subcommands + app.Flags = c.Flags + app.HideHelp = c.HideHelp + + app.Version = ctx.App.Version + app.HideVersion = ctx.App.HideVersion + app.Compiled = ctx.App.Compiled + app.Author = ctx.App.Author + app.Email = ctx.App.Email + app.Writer = ctx.App.Writer + + // bash completion + app.EnableBashCompletion = ctx.App.EnableBashCompletion + if c.BashComplete != nil { + app.BashComplete = c.BashComplete + } + + // set the actions + app.Before = c.Before + app.After = c.After + if c.Action != nil { + app.Action = c.Action + } else { + app.Action = helpSubcommand.Action + } + + var newCmds []Command + for _, cc := range app.Commands { + cc.commandNamePath = []string{c.Name, cc.Name} + newCmds = append(newCmds, cc) + } + app.Commands = newCmds + + return app.RunAsSubcommand(ctx) +} diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/context.go b/Godeps/_workspace/src/github.com/codegangsta/cli/context.go new file mode 100644 index 00000000000..0513d34f61e --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/context.go @@ -0,0 +1,388 @@ +package cli + +import ( + "errors" + "flag" + "strconv" + "strings" + "time" +) + +// Context is a type that is passed through to +// each Handler action in a cli application. Context +// can be used to retrieve context-specific Args and +// parsed command-line options. +type Context struct { + App *App + Command Command + flagSet *flag.FlagSet + setFlags map[string]bool + globalSetFlags map[string]bool + parentContext *Context +} + +// Creates a new context. For use in when invoking an App or Command action. +func NewContext(app *App, set *flag.FlagSet, parentCtx *Context) *Context { + return &Context{App: app, flagSet: set, parentContext: parentCtx} +} + +// Looks up the value of a local int flag, returns 0 if no int flag exists +func (c *Context) Int(name string) int { + return lookupInt(name, c.flagSet) +} + +// Looks up the value of a local time.Duration flag, returns 0 if no time.Duration flag exists +func (c *Context) Duration(name string) time.Duration { + return lookupDuration(name, c.flagSet) +} + +// Looks up the value of a local float64 flag, returns 0 if no float64 flag exists +func (c *Context) Float64(name string) float64 { + return lookupFloat64(name, c.flagSet) +} + +// Looks up the value of a local bool flag, returns false if no bool flag exists +func (c *Context) Bool(name string) bool { + return lookupBool(name, c.flagSet) +} + +// Looks up the value of a local boolT flag, returns false if no bool flag exists +func (c *Context) BoolT(name string) bool { + return lookupBoolT(name, c.flagSet) +} + +// Looks up the value of a local string flag, returns "" if no string flag exists +func (c *Context) String(name string) string { + return lookupString(name, c.flagSet) +} + +// Looks up the value of a local string slice flag, returns nil if no string slice flag exists +func (c *Context) StringSlice(name string) []string { + return lookupStringSlice(name, c.flagSet) +} + +// Looks up the value of a local int slice flag, returns nil if no int slice flag exists +func (c *Context) IntSlice(name string) []int { + return lookupIntSlice(name, c.flagSet) +} + +// Looks up the value of a local generic flag, returns nil if no generic flag exists +func (c *Context) Generic(name string) interface{} { + return lookupGeneric(name, c.flagSet) +} + +// Looks up the value of a global int flag, returns 0 if no int flag exists +func (c *Context) GlobalInt(name string) int { + if fs := lookupGlobalFlagSet(name, c); fs != nil { + return lookupInt(name, fs) + } + return 0 +} + +// Looks up the value of a global time.Duration flag, returns 0 if no time.Duration flag exists +func (c *Context) GlobalDuration(name string) time.Duration { + if fs := lookupGlobalFlagSet(name, c); fs != nil { + return lookupDuration(name, fs) + } + return 0 +} + +// Looks up the value of a global bool flag, returns false if no bool flag exists +func (c *Context) GlobalBool(name string) bool { + if fs := lookupGlobalFlagSet(name, c); fs != nil { + return lookupBool(name, fs) + } + return false +} + +// Looks up the value of a global string flag, returns "" if no string flag exists +func (c *Context) GlobalString(name string) string { + if fs := lookupGlobalFlagSet(name, c); fs != nil { + return lookupString(name, fs) + } + return "" +} + +// Looks up the value of a global string slice flag, returns nil if no string slice flag exists +func (c *Context) GlobalStringSlice(name string) []string { + if fs := lookupGlobalFlagSet(name, c); fs != nil { + return lookupStringSlice(name, fs) + } + return nil +} + +// Looks up the value of a global int slice flag, returns nil if no int slice flag exists +func (c *Context) GlobalIntSlice(name string) []int { + if fs := lookupGlobalFlagSet(name, c); fs != nil { + return lookupIntSlice(name, fs) + } + return nil +} + +// Looks up the value of a global generic flag, returns nil if no generic flag exists +func (c *Context) GlobalGeneric(name string) interface{} { + if fs := lookupGlobalFlagSet(name, c); fs != nil { + return lookupGeneric(name, fs) + } + return nil +} + +// Returns the number of flags set +func (c *Context) NumFlags() int { + return c.flagSet.NFlag() +} + +// Determines if the flag was actually set +func (c *Context) IsSet(name string) bool { + if c.setFlags == nil { + c.setFlags = make(map[string]bool) + c.flagSet.Visit(func(f *flag.Flag) { + c.setFlags[f.Name] = true + }) + } + return c.setFlags[name] == true +} + +// Determines if the global flag was actually set +func (c *Context) GlobalIsSet(name string) bool { + if c.globalSetFlags == nil { + c.globalSetFlags = make(map[string]bool) + ctx := c + if ctx.parentContext != nil { + ctx = ctx.parentContext + } + for ; ctx != nil && c.globalSetFlags[name] == false; ctx = ctx.parentContext { + ctx.flagSet.Visit(func(f *flag.Flag) { + c.globalSetFlags[f.Name] = true + }) + } + } + return c.globalSetFlags[name] +} + +// Returns a slice of flag names used in this context. +func (c *Context) FlagNames() (names []string) { + for _, flag := range c.Command.Flags { + name := strings.Split(flag.GetName(), ",")[0] + if name == "help" { + continue + } + names = append(names, name) + } + return +} + +// Returns a slice of global flag names used by the app. +func (c *Context) GlobalFlagNames() (names []string) { + for _, flag := range c.App.Flags { + name := strings.Split(flag.GetName(), ",")[0] + if name == "help" || name == "version" { + continue + } + names = append(names, name) + } + return +} + +// Returns the parent context, if any +func (c *Context) Parent() *Context { + return c.parentContext +} + +type Args []string + +// Returns the command line arguments associated with the context. +func (c *Context) Args() Args { + args := Args(c.flagSet.Args()) + return args +} + +// Returns the nth argument, or else a blank string +func (a Args) Get(n int) string { + if len(a) > n { + return a[n] + } + return "" +} + +// Returns the first argument, or else a blank string +func (a Args) First() string { + return a.Get(0) +} + +// Return the rest of the arguments (not the first one) +// or else an empty string slice +func (a Args) Tail() []string { + if len(a) >= 2 { + return []string(a)[1:] + } + return []string{} +} + +// Checks if there are any arguments present +func (a Args) Present() bool { + return len(a) != 0 +} + +// Swaps arguments at the given indexes +func (a Args) Swap(from, to int) error { + if from >= len(a) || to >= len(a) { + return errors.New("index out of range") + } + a[from], a[to] = a[to], a[from] + return nil +} + +func lookupGlobalFlagSet(name string, ctx *Context) *flag.FlagSet { + if ctx.parentContext != nil { + ctx = ctx.parentContext + } + for ; ctx != nil; ctx = ctx.parentContext { + if f := ctx.flagSet.Lookup(name); f != nil { + return ctx.flagSet + } + } + return nil +} + +func lookupInt(name string, set *flag.FlagSet) int { + f := set.Lookup(name) + if f != nil { + val, err := strconv.Atoi(f.Value.String()) + if err != nil { + return 0 + } + return val + } + + return 0 +} + +func lookupDuration(name string, set *flag.FlagSet) time.Duration { + f := set.Lookup(name) + if f != nil { + val, err := time.ParseDuration(f.Value.String()) + if err == nil { + return val + } + } + + return 0 +} + +func lookupFloat64(name string, set *flag.FlagSet) float64 { + f := set.Lookup(name) + if f != nil { + val, err := strconv.ParseFloat(f.Value.String(), 64) + if err != nil { + return 0 + } + return val + } + + return 0 +} + +func lookupString(name string, set *flag.FlagSet) string { + f := set.Lookup(name) + if f != nil { + return f.Value.String() + } + + return "" +} + +func lookupStringSlice(name string, set *flag.FlagSet) []string { + f := set.Lookup(name) + if f != nil { + return (f.Value.(*StringSlice)).Value() + + } + + return nil +} + +func lookupIntSlice(name string, set *flag.FlagSet) []int { + f := set.Lookup(name) + if f != nil { + return (f.Value.(*IntSlice)).Value() + + } + + return nil +} + +func lookupGeneric(name string, set *flag.FlagSet) interface{} { + f := set.Lookup(name) + if f != nil { + return f.Value + } + return nil +} + +func lookupBool(name string, set *flag.FlagSet) bool { + f := set.Lookup(name) + if f != nil { + val, err := strconv.ParseBool(f.Value.String()) + if err != nil { + return false + } + return val + } + + return false +} + +func lookupBoolT(name string, set *flag.FlagSet) bool { + f := set.Lookup(name) + if f != nil { + val, err := strconv.ParseBool(f.Value.String()) + if err != nil { + return true + } + return val + } + + return false +} + +func copyFlag(name string, ff *flag.Flag, set *flag.FlagSet) { + switch ff.Value.(type) { + case *StringSlice: + default: + set.Set(name, ff.Value.String()) + } +} + +func normalizeFlags(flags []Flag, set *flag.FlagSet) error { + visited := make(map[string]bool) + set.Visit(func(f *flag.Flag) { + visited[f.Name] = true + }) + for _, f := range flags { + parts := strings.Split(f.GetName(), ",") + if len(parts) == 1 { + continue + } + var ff *flag.Flag + for _, name := range parts { + name = strings.Trim(name, " ") + if visited[name] { + if ff != nil { + return errors.New("Cannot use two forms of the same flag: " + name + " " + ff.Name) + } + ff = set.Lookup(name) + } + } + if ff == nil { + continue + } + for _, name := range parts { + name = strings.Trim(name, " ") + if !visited[name] { + copyFlag(name, ff, set) + } + } + } + return nil +} diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/flag.go b/Godeps/_workspace/src/github.com/codegangsta/cli/flag.go new file mode 100644 index 00000000000..49f30994ea6 --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/flag.go @@ -0,0 +1,527 @@ +package cli + +import ( + "flag" + "fmt" + "os" + "strconv" + "strings" + "time" +) + +// This flag enables bash-completion for all commands and subcommands +var BashCompletionFlag = BoolFlag{ + Name: "generate-bash-completion", +} + +// This flag prints the version for the application +var VersionFlag = BoolFlag{ + Name: "version, v", + Usage: "print the version", +} + +// This flag prints the help for all commands and subcommands +// Set to the zero value (BoolFlag{}) to disable flag -- keeps subcommand +// unless HideHelp is set to true) +var HelpFlag = BoolFlag{ + Name: "help, h", + Usage: "show help", +} + +// Flag is a common interface related to parsing flags in cli. +// For more advanced flag parsing techniques, it is recomended that +// this interface be implemented. +type Flag interface { + fmt.Stringer + // Apply Flag settings to the given flag set + Apply(*flag.FlagSet) + GetName() string +} + +func flagSet(name string, flags []Flag) *flag.FlagSet { + set := flag.NewFlagSet(name, flag.ContinueOnError) + + for _, f := range flags { + f.Apply(set) + } + return set +} + +func eachName(longName string, fn func(string)) { + parts := strings.Split(longName, ",") + for _, name := range parts { + name = strings.Trim(name, " ") + fn(name) + } +} + +// Generic is a generic parseable type identified by a specific flag +type Generic interface { + Set(value string) error + String() string +} + +// GenericFlag is the flag type for types implementing Generic +type GenericFlag struct { + Name string + Value Generic + Usage string + EnvVar string +} + +// String returns the string representation of the generic flag to display the +// help text to the user (uses the String() method of the generic flag to show +// the value) +func (f GenericFlag) String() string { + return withEnvHint(f.EnvVar, fmt.Sprintf("%s%s \"%v\"\t%v", prefixFor(f.Name), f.Name, f.Value, f.Usage)) +} + +// Apply takes the flagset and calls Set on the generic flag with the value +// provided by the user for parsing by the flag +func (f GenericFlag) Apply(set *flag.FlagSet) { + val := f.Value + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + val.Set(envVal) + break + } + } + } + + eachName(f.Name, func(name string) { + set.Var(f.Value, name, f.Usage) + }) +} + +func (f GenericFlag) GetName() string { + return f.Name +} + +// StringSlice is an opaque type for []string to satisfy flag.Value +type StringSlice []string + +// Set appends the string value to the list of values +func (f *StringSlice) Set(value string) error { + *f = append(*f, value) + return nil +} + +// String returns a readable representation of this value (for usage defaults) +func (f *StringSlice) String() string { + return fmt.Sprintf("%s", *f) +} + +// Value returns the slice of strings set by this flag +func (f *StringSlice) Value() []string { + return *f +} + +// StringSlice is a string flag that can be specified multiple times on the +// command-line +type StringSliceFlag struct { + Name string + Value *StringSlice + Usage string + EnvVar string +} + +// String returns the usage +func (f StringSliceFlag) String() string { + firstName := strings.Trim(strings.Split(f.Name, ",")[0], " ") + pref := prefixFor(firstName) + return withEnvHint(f.EnvVar, fmt.Sprintf("%s [%v]\t%v", prefixedNames(f.Name), pref+firstName+" option "+pref+firstName+" option", f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f StringSliceFlag) Apply(set *flag.FlagSet) { + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + newVal := &StringSlice{} + for _, s := range strings.Split(envVal, ",") { + s = strings.TrimSpace(s) + newVal.Set(s) + } + f.Value = newVal + break + } + } + } + + eachName(f.Name, func(name string) { + if f.Value == nil { + f.Value = &StringSlice{} + } + set.Var(f.Value, name, f.Usage) + }) +} + +func (f StringSliceFlag) GetName() string { + return f.Name +} + +// StringSlice is an opaque type for []int to satisfy flag.Value +type IntSlice []int + +// Set parses the value into an integer and appends it to the list of values +func (f *IntSlice) Set(value string) error { + tmp, err := strconv.Atoi(value) + if err != nil { + return err + } else { + *f = append(*f, tmp) + } + return nil +} + +// String returns a readable representation of this value (for usage defaults) +func (f *IntSlice) String() string { + return fmt.Sprintf("%d", *f) +} + +// Value returns the slice of ints set by this flag +func (f *IntSlice) Value() []int { + return *f +} + +// IntSliceFlag is an int flag that can be specified multiple times on the +// command-line +type IntSliceFlag struct { + Name string + Value *IntSlice + Usage string + EnvVar string +} + +// String returns the usage +func (f IntSliceFlag) String() string { + firstName := strings.Trim(strings.Split(f.Name, ",")[0], " ") + pref := prefixFor(firstName) + return withEnvHint(f.EnvVar, fmt.Sprintf("%s [%v]\t%v", prefixedNames(f.Name), pref+firstName+" option "+pref+firstName+" option", f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f IntSliceFlag) Apply(set *flag.FlagSet) { + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + newVal := &IntSlice{} + for _, s := range strings.Split(envVal, ",") { + s = strings.TrimSpace(s) + err := newVal.Set(s) + if err != nil { + fmt.Fprintf(os.Stderr, err.Error()) + } + } + f.Value = newVal + break + } + } + } + + eachName(f.Name, func(name string) { + if f.Value == nil { + f.Value = &IntSlice{} + } + set.Var(f.Value, name, f.Usage) + }) +} + +func (f IntSliceFlag) GetName() string { + return f.Name +} + +// BoolFlag is a switch that defaults to false +type BoolFlag struct { + Name string + Usage string + EnvVar string + Destination *bool +} + +// String returns a readable representation of this value (for usage defaults) +func (f BoolFlag) String() string { + return withEnvHint(f.EnvVar, fmt.Sprintf("%s\t%v", prefixedNames(f.Name), f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f BoolFlag) Apply(set *flag.FlagSet) { + val := false + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + envValBool, err := strconv.ParseBool(envVal) + if err == nil { + val = envValBool + } + break + } + } + } + + eachName(f.Name, func(name string) { + if f.Destination != nil { + set.BoolVar(f.Destination, name, val, f.Usage) + return + } + set.Bool(name, val, f.Usage) + }) +} + +func (f BoolFlag) GetName() string { + return f.Name +} + +// BoolTFlag this represents a boolean flag that is true by default, but can +// still be set to false by --some-flag=false +type BoolTFlag struct { + Name string + Usage string + EnvVar string + Destination *bool +} + +// String returns a readable representation of this value (for usage defaults) +func (f BoolTFlag) String() string { + return withEnvHint(f.EnvVar, fmt.Sprintf("%s\t%v", prefixedNames(f.Name), f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f BoolTFlag) Apply(set *flag.FlagSet) { + val := true + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + envValBool, err := strconv.ParseBool(envVal) + if err == nil { + val = envValBool + break + } + } + } + } + + eachName(f.Name, func(name string) { + if f.Destination != nil { + set.BoolVar(f.Destination, name, val, f.Usage) + return + } + set.Bool(name, val, f.Usage) + }) +} + +func (f BoolTFlag) GetName() string { + return f.Name +} + +// StringFlag represents a flag that takes as string value +type StringFlag struct { + Name string + Value string + Usage string + EnvVar string + Destination *string +} + +// String returns the usage +func (f StringFlag) String() string { + var fmtString string + fmtString = "%s %v\t%v" + + if len(f.Value) > 0 { + fmtString = "%s \"%v\"\t%v" + } else { + fmtString = "%s %v\t%v" + } + + return withEnvHint(f.EnvVar, fmt.Sprintf(fmtString, prefixedNames(f.Name), f.Value, f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f StringFlag) Apply(set *flag.FlagSet) { + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + f.Value = envVal + break + } + } + } + + eachName(f.Name, func(name string) { + if f.Destination != nil { + set.StringVar(f.Destination, name, f.Value, f.Usage) + return + } + set.String(name, f.Value, f.Usage) + }) +} + +func (f StringFlag) GetName() string { + return f.Name +} + +// IntFlag is a flag that takes an integer +// Errors if the value provided cannot be parsed +type IntFlag struct { + Name string + Value int + Usage string + EnvVar string + Destination *int +} + +// String returns the usage +func (f IntFlag) String() string { + return withEnvHint(f.EnvVar, fmt.Sprintf("%s \"%v\"\t%v", prefixedNames(f.Name), f.Value, f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f IntFlag) Apply(set *flag.FlagSet) { + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + envValInt, err := strconv.ParseInt(envVal, 0, 64) + if err == nil { + f.Value = int(envValInt) + break + } + } + } + } + + eachName(f.Name, func(name string) { + if f.Destination != nil { + set.IntVar(f.Destination, name, f.Value, f.Usage) + return + } + set.Int(name, f.Value, f.Usage) + }) +} + +func (f IntFlag) GetName() string { + return f.Name +} + +// DurationFlag is a flag that takes a duration specified in Go's duration +// format: https://golang.org/pkg/time/#ParseDuration +type DurationFlag struct { + Name string + Value time.Duration + Usage string + EnvVar string + Destination *time.Duration +} + +// String returns a readable representation of this value (for usage defaults) +func (f DurationFlag) String() string { + return withEnvHint(f.EnvVar, fmt.Sprintf("%s \"%v\"\t%v", prefixedNames(f.Name), f.Value, f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f DurationFlag) Apply(set *flag.FlagSet) { + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + envValDuration, err := time.ParseDuration(envVal) + if err == nil { + f.Value = envValDuration + break + } + } + } + } + + eachName(f.Name, func(name string) { + if f.Destination != nil { + set.DurationVar(f.Destination, name, f.Value, f.Usage) + return + } + set.Duration(name, f.Value, f.Usage) + }) +} + +func (f DurationFlag) GetName() string { + return f.Name +} + +// Float64Flag is a flag that takes an float value +// Errors if the value provided cannot be parsed +type Float64Flag struct { + Name string + Value float64 + Usage string + EnvVar string + Destination *float64 +} + +// String returns the usage +func (f Float64Flag) String() string { + return withEnvHint(f.EnvVar, fmt.Sprintf("%s \"%v\"\t%v", prefixedNames(f.Name), f.Value, f.Usage)) +} + +// Apply populates the flag given the flag set and environment +func (f Float64Flag) Apply(set *flag.FlagSet) { + if f.EnvVar != "" { + for _, envVar := range strings.Split(f.EnvVar, ",") { + envVar = strings.TrimSpace(envVar) + if envVal := os.Getenv(envVar); envVal != "" { + envValFloat, err := strconv.ParseFloat(envVal, 10) + if err == nil { + f.Value = float64(envValFloat) + } + } + } + } + + eachName(f.Name, func(name string) { + if f.Destination != nil { + set.Float64Var(f.Destination, name, f.Value, f.Usage) + return + } + set.Float64(name, f.Value, f.Usage) + }) +} + +func (f Float64Flag) GetName() string { + return f.Name +} + +func prefixFor(name string) (prefix string) { + if len(name) == 1 { + prefix = "-" + } else { + prefix = "--" + } + + return +} + +func prefixedNames(fullName string) (prefixed string) { + parts := strings.Split(fullName, ",") + for i, name := range parts { + name = strings.Trim(name, " ") + prefixed += prefixFor(name) + name + if i < len(parts)-1 { + prefixed += ", " + } + } + return +} + +func withEnvHint(envVar, str string) string { + envText := "" + if envVar != "" { + envText = fmt.Sprintf(" [$%s]", strings.Join(strings.Split(envVar, ","), ", $")) + } + return str + envText +} diff --git a/Godeps/_workspace/src/github.com/codegangsta/cli/help.go b/Godeps/_workspace/src/github.com/codegangsta/cli/help.go new file mode 100644 index 00000000000..a246f63ac4d --- /dev/null +++ b/Godeps/_workspace/src/github.com/codegangsta/cli/help.go @@ -0,0 +1,246 @@ +package cli + +import ( + "fmt" + "io" + "strings" + "text/tabwriter" + "text/template" +) + +// The text template for the Default help topic. +// cli.go uses text/template to render templates. You can +// render custom help text by setting this variable. +var AppHelpTemplate = `NAME: + {{.Name}} - {{.Usage}} + +USAGE: + {{.HelpName}} {{if .Flags}}[global options]{{end}}{{if .Commands}} command [command options]{{end}} {{if .ArgsUsage}}{{.ArgsUsage}}{{else}}[arguments...]{{end}} + {{if .Version}} +VERSION: + {{.Version}} + {{end}}{{if len .Authors}} +AUTHOR(S): + {{range .Authors}}{{ . }}{{end}} + {{end}}{{if .Commands}} +COMMANDS: + {{range .Commands}}{{join .Names ", "}}{{ "\t" }}{{.Usage}} + {{end}}{{end}}{{if .Flags}} +GLOBAL OPTIONS: + {{range .Flags}}{{.}} + {{end}}{{end}}{{if .Copyright }} +COPYRIGHT: + {{.Copyright}} + {{end}} +` + +// The text template for the command help topic. +// cli.go uses text/template to render templates. You can +// render custom help text by setting this variable. +var CommandHelpTemplate = `NAME: + {{.HelpName}} - {{.Usage}} + +USAGE: + {{.HelpName}}{{if .Flags}} [command options]{{end}} {{if .ArgsUsage}}{{.ArgsUsage}}{{else}}[arguments...]{{end}}{{if .Description}} + +DESCRIPTION: + {{.Description}}{{end}}{{if .Flags}} + +OPTIONS: + {{range .Flags}}{{.}} + {{end}}{{ end }} +` + +// The text template for the subcommand help topic. +// cli.go uses text/template to render templates. You can +// render custom help text by setting this variable. +var SubcommandHelpTemplate = `NAME: + {{.HelpName}} - {{.Usage}} + +USAGE: + {{.HelpName}} command{{if .Flags}} [command options]{{end}} {{if .ArgsUsage}}{{.ArgsUsage}}{{else}}[arguments...]{{end}} + +COMMANDS: + {{range .Commands}}{{join .Names ", "}}{{ "\t" }}{{.Usage}} + {{end}}{{if .Flags}} +OPTIONS: + {{range .Flags}}{{.}} + {{end}}{{end}} +` + +var helpCommand = Command{ + Name: "help", + Aliases: []string{"h"}, + Usage: "Shows a list of commands or help for one command", + ArgsUsage: "[command]", + Action: func(c *Context) { + args := c.Args() + if args.Present() { + ShowCommandHelp(c, args.First()) + } else { + ShowAppHelp(c) + } + }, +} + +var helpSubcommand = Command{ + Name: "help", + Aliases: []string{"h"}, + Usage: "Shows a list of commands or help for one command", + ArgsUsage: "[command]", + Action: func(c *Context) { + args := c.Args() + if args.Present() { + ShowCommandHelp(c, args.First()) + } else { + ShowSubcommandHelp(c) + } + }, +} + +// Prints help for the App or Command +type helpPrinter func(w io.Writer, templ string, data interface{}) + +var HelpPrinter helpPrinter = printHelp + +// Prints version for the App +var VersionPrinter = printVersion + +func ShowAppHelp(c *Context) { + HelpPrinter(c.App.Writer, AppHelpTemplate, c.App) +} + +// Prints the list of subcommands as the default app completion method +func DefaultAppComplete(c *Context) { + for _, command := range c.App.Commands { + for _, name := range command.Names() { + fmt.Fprintln(c.App.Writer, name) + } + } +} + +// Prints help for the given command +func ShowCommandHelp(ctx *Context, command string) { + // show the subcommand help for a command with subcommands + if command == "" { + HelpPrinter(ctx.App.Writer, SubcommandHelpTemplate, ctx.App) + return + } + + for _, c := range ctx.App.Commands { + if c.HasName(command) { + HelpPrinter(ctx.App.Writer, CommandHelpTemplate, c) + return + } + } + + if ctx.App.CommandNotFound != nil { + ctx.App.CommandNotFound(ctx, command) + } else { + fmt.Fprintf(ctx.App.Writer, "No help topic for '%v'\n", command) + } +} + +// Prints help for the given subcommand +func ShowSubcommandHelp(c *Context) { + ShowCommandHelp(c, c.Command.Name) +} + +// Prints the version number of the App +func ShowVersion(c *Context) { + VersionPrinter(c) +} + +func printVersion(c *Context) { + fmt.Fprintf(c.App.Writer, "%v version %v\n", c.App.Name, c.App.Version) +} + +// Prints the lists of commands within a given context +func ShowCompletions(c *Context) { + a := c.App + if a != nil && a.BashComplete != nil { + a.BashComplete(c) + } +} + +// Prints the custom completions for a given command +func ShowCommandCompletions(ctx *Context, command string) { + c := ctx.App.Command(command) + if c != nil && c.BashComplete != nil { + c.BashComplete(ctx) + } +} + +func printHelp(out io.Writer, templ string, data interface{}) { + funcMap := template.FuncMap{ + "join": strings.Join, + } + + w := tabwriter.NewWriter(out, 0, 8, 1, '\t', 0) + t := template.Must(template.New("help").Funcs(funcMap).Parse(templ)) + err := t.Execute(w, data) + if err != nil { + panic(err) + } + w.Flush() +} + +func checkVersion(c *Context) bool { + found := false + if VersionFlag.Name != "" { + eachName(VersionFlag.Name, func(name string) { + if c.GlobalBool(name) || c.Bool(name) { + found = true + } + }) + } + return found +} + +func checkHelp(c *Context) bool { + found := false + if HelpFlag.Name != "" { + eachName(HelpFlag.Name, func(name string) { + if c.GlobalBool(name) || c.Bool(name) { + found = true + } + }) + } + return found +} + +func checkCommandHelp(c *Context, name string) bool { + if c.Bool("h") || c.Bool("help") { + ShowCommandHelp(c, name) + return true + } + + return false +} + +func checkSubcommandHelp(c *Context) bool { + if c.GlobalBool("h") || c.GlobalBool("help") { + ShowSubcommandHelp(c) + return true + } + + return false +} + +func checkCompletions(c *Context) bool { + if (c.GlobalBool(BashCompletionFlag.Name) || c.Bool(BashCompletionFlag.Name)) && c.App.EnableBashCompletion { + ShowCompletions(c) + return true + } + + return false +} + +func checkCommandCompletions(c *Context, name string) bool { + if c.Bool(BashCompletionFlag.Name) && c.App.EnableBashCompletion { + ShowCommandCompletions(c, name) + return true + } + + return false +} diff --git a/Godeps/_workspace/src/github.com/franela/goreq/.gitignore b/Godeps/_workspace/src/github.com/franela/goreq/.gitignore new file mode 100644 index 00000000000..131fc16fbbc --- /dev/null +++ b/Godeps/_workspace/src/github.com/franela/goreq/.gitignore @@ -0,0 +1,24 @@ +# Compiled Object files, Static and Dynamic libs (Shared Objects) +*.o +*.a +*.so + +# Folders +_obj +_test + +# Architecture specific extensions/prefixes +*.[568vq] +[568vq].out + +*.cgo1.go +*.cgo2.c +_cgo_defun.c +_cgo_gotypes.go +_cgo_export.* + +_testmain.go + +*.exe + +src diff --git a/Godeps/_workspace/src/github.com/franela/goreq/.travis.yml b/Godeps/_workspace/src/github.com/franela/goreq/.travis.yml new file mode 100644 index 00000000000..d5041b4961f --- /dev/null +++ b/Godeps/_workspace/src/github.com/franela/goreq/.travis.yml @@ -0,0 +1,8 @@ +language: go +go: + - 1.5.3 + - tip +notifications: + email: + - ionathan@gmail.com + - marcosnils@gmail.com diff --git a/Godeps/_workspace/src/github.com/franela/goreq/LICENSE b/Godeps/_workspace/src/github.com/franela/goreq/LICENSE new file mode 100644 index 00000000000..068dee1edcc --- /dev/null +++ b/Godeps/_workspace/src/github.com/franela/goreq/LICENSE @@ -0,0 +1,20 @@ +The MIT License (MIT) + +Copyright (c) 2013 Jonathan Leibiusky and Marcos Lilljedahl + +Permission is hereby granted, free of charge, to any person obtaining a copy of +this software and associated documentation files (the "Software"), to deal in +the Software without restriction, including without limitation the rights to +use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, +subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS +FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR +COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER +IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN +CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/Godeps/_workspace/src/github.com/franela/goreq/Makefile b/Godeps/_workspace/src/github.com/franela/goreq/Makefile new file mode 100644 index 00000000000..0f04d6572df --- /dev/null +++ b/Godeps/_workspace/src/github.com/franela/goreq/Makefile @@ -0,0 +1,3 @@ +test: + go get -v -d -t ./... + go test -v diff --git a/Godeps/_workspace/src/github.com/franela/goreq/README.md b/Godeps/_workspace/src/github.com/franela/goreq/README.md new file mode 100644 index 00000000000..b6a0bfd2e1f --- /dev/null +++ b/Godeps/_workspace/src/github.com/franela/goreq/README.md @@ -0,0 +1,444 @@ +[![Build Status](https://img.shields.io/travis/franela/goreq/master.svg)](https://travis-ci.org/franela/goreq) +[![GoDoc](https://godoc.org/github.com/franela/goreq?status.svg)](https://godoc.org/github.com/franela/goreq) + +GoReq +======= + +Simple and sane HTTP request library for Go language. + + + +**Table of Contents** + +- [Why GoReq?](#user-content-why-goreq) +- [How do I install it?](#user-content-how-do-i-install-it) +- [What can I do with it?](#user-content-what-can-i-do-with-it) + - [Making requests with different methods](#user-content-making-requests-with-different-methods) + - [GET](#user-content-get) + - [Tags](#user-content-tags) + - [POST](#user-content-post) + - [Sending payloads in the Body](#user-content-sending-payloads-in-the-body) + - [Specifiying request headers](#user-content-specifiying-request-headers) + - [Sending Cookies](#cookie-support) + - [Setting timeouts](#user-content-setting-timeouts) + - [Using the Response and Error](#user-content-using-the-response-and-error) + - [Receiving JSON](#user-content-receiving-json) + - [Sending/Receiving Compressed Payloads](#user-content-sendingreceiving-compressed-payloads) + - [Using gzip compression:](#user-content-using-gzip-compression) + - [Using deflate compression:](#user-content-using-deflate-compression) + - [Using compressed responses:](#user-content-using-compressed-responses) + - [Proxy](#proxy) + - [Debugging requests](#debug) + - [Getting raw Request & Response](#getting-raw-request--response) + - [TODO:](#user-content-todo) + + + +Why GoReq? +========== + +Go has very nice native libraries that allows you to do lots of cool things. But sometimes those libraries are too low level, which means that to do a simple thing, like an HTTP Request, it takes some time. And if you want to do something as simple as adding a timeout to a request, you will end up writing several lines of code. + +This is why we think GoReq is useful. Because you can do all your HTTP requests in a very simple and comprehensive way, while enabling you to do more advanced stuff by giving you access to the native API. + +How do I install it? +==================== + +```bash +go get github.com/franela/goreq +``` + +What can I do with it? +====================== + +## Making requests with different methods + +#### GET +```go +res, err := goreq.Request{ Uri: "http://www.google.com" }.Do() +``` + +GoReq default method is GET. + +You can also set value to GET method easily + +```go +type Item struct { + Limit int + Skip int + Fields string +} + +item := Item { + Limit: 3, + Skip: 5, + Fields: "Value", +} + +res, err := goreq.Request{ + Uri: "http://localhost:3000/", + QueryString: item, +}.Do() +``` +The sample above will send `http://localhost:3000/?limit=3&skip=5&fields=Value` + +Alternatively the `url` tag can be used in struct fields to customize encoding properties + +```go +type Item struct { + TheLimit int `url:"the_limit"` + TheSkip string `url:"the_skip,omitempty"` + TheFields string `url:"-"` +} + +item := Item { + TheLimit: 3, + TheSkip: "", + TheFields: "Value", +} + +res, err := goreq.Request{ + Uri: "http://localhost:3000/", + QueryString: item, +}.Do() +``` +The sample above will send `http://localhost:3000/?the_limit=3` + + +QueryString also support url.Values + +```go +item := url.Values{} +item.Set("Limit", 3) +item.Add("Field", "somefield") +item.Add("Field", "someotherfield") + +res, err := goreq.Request{ + Uri: "http://localhost:3000/", + QueryString: item, +}.Do() +``` + +The sample above will send `http://localhost:3000/?limit=3&field=somefield&field=someotherfield` + +### Tags + +Struct field `url` tag is mainly used as the request parameter name. +Tags can be comma separated multiple values, 1st value is for naming and rest has special meanings. + +- special tag for 1st value + - `-`: value is ignored if set this + +- special tag for rest 2nd value + - `omitempty`: zero-value is ignored if set this + - `squash`: the fields of embedded struct is used for parameter + +#### Tag Examples + +```go +type Place struct { + Country string `url:"country"` + City string `url:"city"` + ZipCode string `url:"zipcode,omitempty"` +} + +type Person struct { + Place `url:",squash"` + + FirstName string `url:"first_name"` + LastName string `url:"last_name"` + Age string `url:"age,omitempty"` + Password string `url:"-"` +} + +johnbull := Person{ + Place: Place{ // squash the embedded struct value + Country: "UK", + City: "London", + ZipCode: "SW1", + }, + FirstName: "John", + LastName: "Doe", + Age: "35", + Password: "my-secret", // ignored for parameter +} + +goreq.Request{ + Uri: "http://localhost/", + QueryString: johnbull, +}.Do() +// => `http://localhost/?first_name=John&last_name=Doe&age=35&country=UK&city=London&zip_code=SW1` + + +// age and zipcode will be ignored because of `omitempty` +// but firstname isn't. +samurai := Person{ + Place: Place{ // squash the embedded struct value + Country: "Japan", + City: "Tokyo", + }, + LastName: "Yagyu", +} + +goreq.Request{ + Uri: "http://localhost/", + QueryString: samurai, +}.Do() +// => `http://localhost/?first_name=&last_name=yagyu&country=Japan&city=Tokyo` +``` + + +#### POST + +```go +res, err := goreq.Request{ Method: "POST", Uri: "http://www.google.com" }.Do() +``` + +## Sending payloads in the Body + +You can send ```string```, ```Reader``` or ```interface{}``` in the body. The first two will be sent as text. The last one will be marshalled to JSON, if possible. + +```go +type Item struct { + Id int + Name string +} + +item := Item{ Id: 1111, Name: "foobar" } + +res, err := goreq.Request{ + Method: "POST", + Uri: "http://www.google.com", + Body: item, +}.Do() +``` + +## Specifiying request headers + +We think that most of the times the request headers that you use are: ```Host```, ```Content-Type```, ```Accept``` and ```User-Agent```. This is why we decided to make it very easy to set these headers. + +```go +res, err := goreq.Request{ + Uri: "http://www.google.com", + Host: "foobar.com", + Accept: "application/json", + ContentType: "application/json", + UserAgent: "goreq", +}.Do() +``` + +But sometimes you need to set other headers. You can still do it. + +```go +req := goreq.Request{ Uri: "http://www.google.com" } + +req.AddHeader("X-Custom", "somevalue") + +req.Do() +``` + +Alternatively you can use the `WithHeader` function to keep the syntax short + +```go +res, err = goreq.Request{ Uri: "http://www.google.com" }.WithHeader("X-Custom", "somevalue").Do() +``` + +## Cookie support + +Cookies can be either set at the request level by sending a [CookieJar](http://golang.org/pkg/net/http/cookiejar/) in the `CookieJar` request field +or you can use goreq's one-liner WithCookie method as shown below + +```go +res, err := goreq.Request{ + Uri: "http://www.google.com", +}. +WithCookie(&http.Cookie{Name: "c1", Value: "v1"}). +Do() +``` + +## Setting timeouts + +GoReq supports 2 kind of timeouts. A general connection timeout and a request specific one. By default the connection timeout is of 1 second. There is no default for request timeout, which means it will wait forever. + +You can change the connection timeout doing: + +```go +goreq.SetConnectTimeout(100 * time.Millisecond) +``` + +And specify the request timeout doing: + +```go +res, err := goreq.Request{ + Uri: "http://www.google.com", + Timeout: 500 * time.Millisecond, +}.Do() +``` + +## Using the Response and Error + +GoReq will always return 2 values: a ```Response``` and an ```Error```. +If ```Error``` is not ```nil``` it means that an error happened while doing the request and you shouldn't use the ```Response``` in any way. +You can check what happened by getting the error message: + +```go +fmt.Println(err.Error()) +``` +And to make it easy to know if it was a timeout error, you can ask the error or return it: + +```go +if serr, ok := err.(*goreq.Error); ok { + if serr.Timeout() { + ... + } +} +return err +``` + +If you don't get an error, you can safely use the ```Response```. + +```go +res.Uri // return final URL location of the response (fulfilled after redirect was made) +res.StatusCode // return the status code of the response +res.Body // gives you access to the body +res.Body.ToString() // will return the body as a string +res.Header.Get("Content-Type") // gives you access to all the response headers +``` +Remember that you should **always** close `res.Body` if it's not `nil` + +## Receiving JSON + +GoReq will help you to receive and unmarshal JSON. + +```go +type Item struct { + Id int + Name string +} + +var item Item + +res.Body.FromJsonTo(&item) +``` + +## Sending/Receiving Compressed Payloads +GoReq supports gzip, deflate and zlib compression of requests' body and transparent decompression of responses provided they have a correct `Content-Encoding` header. + +#####Using gzip compression: +```go +res, err := goreq.Request{ + Method: "POST", + Uri: "http://www.google.com", + Body: item, + Compression: goreq.Gzip(), +}.Do() +``` +#####Using deflate/zlib compression: +```go +res, err := goreq.Request{ + Method: "POST", + Uri: "http://www.google.com", + Body: item, + Compression: goreq.Deflate(), +}.Do() +``` +#####Using compressed responses: +If servers replies a correct and matching `Content-Encoding` header (gzip requires `Content-Encoding: gzip` and deflate `Content-Encoding: deflate`) goreq transparently decompresses the response so the previous example should always work: +```go +type Item struct { + Id int + Name string +} +res, err := goreq.Request{ + Method: "POST", + Uri: "http://www.google.com", + Body: item, + Compression: goreq.Gzip(), +}.Do() +var item Item +res.Body.FromJsonTo(&item) +``` +If no `Content-Encoding` header is replied by the server GoReq will return the crude response. + +## Proxy +If you need to use a proxy for your requests GoReq supports the standard `http_proxy` env variable as well as manually setting the proxy for each request + +```go +res, err := goreq.Request{ + Method: "GET", + Proxy: "http://myproxy:myproxyport", + Uri: "http://www.google.com", +}.Do() +``` + +### Proxy basic auth is also supported + +```go +res, err := goreq.Request{ + Method: "GET", + Proxy: "http://user:pass@myproxy:myproxyport", + Uri: "http://www.google.com", +}.Do() +``` + +## Debug +If you need to debug your http requests, it can print the http request detail. + +```go +res, err := goreq.Request{ + Method: "GET", + Uri: "http://www.google.com", + Compression: goreq.Gzip(), + ShowDebug: true, +}.Do() +fmt.Println(res, err) +``` + +and it will print the log: +``` +GET / HTTP/1.1 +Host: www.google.com +Accept: +Accept-Encoding: gzip +Content-Encoding: gzip +Content-Type: +``` + + +### Getting raw Request & Response + +To get the Request: + +```go +req := goreq.Request{ + Host: "foobar.com", +} + +//req.Request will return a new instance of an http.Request so you can safely use it for something else +request, _ := req.NewRequest() + +``` + + +To get the Response: + +```go +res, err := goreq.Request{ + Method: "GET", + Uri: "http://www.google.com", + Compression: goreq.Gzip(), + ShowDebug: true, +}.Do() + +// res.Response will contain the original http.Response structure +fmt.Println(res.Response, err) +``` + + + + +TODO: +----- + +We do have a couple of [issues](https://github.com/franela/goreq/issues) pending we'll be addressing soon. But feel free to +contribute and send us PRs (with tests please :smile:). diff --git a/Godeps/_workspace/src/github.com/franela/goreq/goreq.go b/Godeps/_workspace/src/github.com/franela/goreq/goreq.go new file mode 100644 index 00000000000..ffa5ea82200 --- /dev/null +++ b/Godeps/_workspace/src/github.com/franela/goreq/goreq.go @@ -0,0 +1,491 @@ +package goreq + +import ( + "bufio" + "bytes" + "compress/gzip" + "compress/zlib" + "crypto/tls" + "encoding/json" + "errors" + "fmt" + "io" + "io/ioutil" + "log" + "net" + "net/http" + "net/http/httputil" + "net/url" + "reflect" + "strings" + "time" +) + +type itimeout interface { + Timeout() bool +} +type Request struct { + headers []headerTuple + cookies []*http.Cookie + Method string + Uri string + Body interface{} + QueryString interface{} + Timeout time.Duration + ContentType string + Accept string + Host string + UserAgent string + Insecure bool + MaxRedirects int + RedirectHeaders bool + Proxy string + Compression *compression + BasicAuthUsername string + BasicAuthPassword string + CookieJar http.CookieJar + ShowDebug bool + OnBeforeRequest func(goreq *Request, httpreq *http.Request) +} + +type compression struct { + writer func(buffer io.Writer) (io.WriteCloser, error) + reader func(buffer io.Reader) (io.ReadCloser, error) + ContentEncoding string +} + +type Response struct { + *http.Response + Uri string + Body *Body + req *http.Request +} + +func (r Response) CancelRequest() { + cancelRequest(DefaultTransport, r.req) + +} + +func cancelRequest(transport interface{}, r *http.Request) { + if tp, ok := transport.(transportRequestCanceler); ok { + tp.CancelRequest(r) + } +} + +type headerTuple struct { + name string + value string +} + +type Body struct { + reader io.ReadCloser + compressedReader io.ReadCloser +} + +type Error struct { + timeout bool + Err error +} + +type transportRequestCanceler interface { + CancelRequest(*http.Request) +} + +func (e *Error) Timeout() bool { + return e.timeout +} + +func (e *Error) Error() string { + return e.Err.Error() +} + +func (b *Body) Read(p []byte) (int, error) { + if b.compressedReader != nil { + return b.compressedReader.Read(p) + } + return b.reader.Read(p) +} + +func (b *Body) Close() error { + err := b.reader.Close() + if b.compressedReader != nil { + return b.compressedReader.Close() + } + return err +} + +func (b *Body) FromJsonTo(o interface{}) error { + return json.NewDecoder(b).Decode(o) +} + +func (b *Body) ToString() (string, error) { + body, err := ioutil.ReadAll(b) + if err != nil { + return "", err + } + return string(body), nil +} + +func Gzip() *compression { + reader := func(buffer io.Reader) (io.ReadCloser, error) { + return gzip.NewReader(buffer) + } + writer := func(buffer io.Writer) (io.WriteCloser, error) { + return gzip.NewWriter(buffer), nil + } + return &compression{writer: writer, reader: reader, ContentEncoding: "gzip"} +} + +func Deflate() *compression { + reader := func(buffer io.Reader) (io.ReadCloser, error) { + return zlib.NewReader(buffer) + } + writer := func(buffer io.Writer) (io.WriteCloser, error) { + return zlib.NewWriter(buffer), nil + } + return &compression{writer: writer, reader: reader, ContentEncoding: "deflate"} +} + +func Zlib() *compression { + return Deflate() +} + +func paramParse(query interface{}) (string, error) { + switch query.(type) { + case url.Values: + return query.(url.Values).Encode(), nil + case *url.Values: + return query.(*url.Values).Encode(), nil + default: + var v = &url.Values{} + err := paramParseStruct(v, query) + return v.Encode(), err + } +} + +func paramParseStruct(v *url.Values, query interface{}) error { + var ( + s = reflect.ValueOf(query) + t = reflect.TypeOf(query) + ) + for t.Kind() == reflect.Ptr || t.Kind() == reflect.Interface { + s = s.Elem() + t = s.Type() + } + + if t.Kind() != reflect.Struct { + return errors.New("Can not parse QueryString.") + } + + for i := 0; i < t.NumField(); i++ { + var name string + + field := s.Field(i) + typeField := t.Field(i) + + if !field.CanInterface() { + continue + } + + urlTag := typeField.Tag.Get("url") + if urlTag == "-" { + continue + } + + name, opts := parseTag(urlTag) + + var omitEmpty, squash bool + omitEmpty = opts.Contains("omitempty") + squash = opts.Contains("squash") + + if squash { + err := paramParseStruct(v, field.Interface()) + if err != nil { + return err + } + continue + } + + if urlTag == "" { + name = strings.ToLower(typeField.Name) + } + + if val := fmt.Sprintf("%v", field.Interface()); !(omitEmpty && len(val) == 0) { + v.Add(name, val) + } + } + return nil +} + +func prepareRequestBody(b interface{}) (io.Reader, error) { + switch b.(type) { + case string: + // treat is as text + return strings.NewReader(b.(string)), nil + case io.Reader: + // treat is as text + return b.(io.Reader), nil + case []byte: + //treat as byte array + return bytes.NewReader(b.([]byte)), nil + case nil: + return nil, nil + default: + // try to jsonify it + j, err := json.Marshal(b) + if err == nil { + return bytes.NewReader(j), nil + } + return nil, err + } +} + +var DefaultDialer = &net.Dialer{Timeout: 1000 * time.Millisecond} +var DefaultTransport http.RoundTripper = &http.Transport{Dial: DefaultDialer.Dial, Proxy: http.ProxyFromEnvironment} +var DefaultClient = &http.Client{Transport: DefaultTransport} + +var proxyTransport http.RoundTripper +var proxyClient *http.Client + +func SetConnectTimeout(duration time.Duration) { + DefaultDialer.Timeout = duration +} + +func (r *Request) AddHeader(name string, value string) { + if r.headers == nil { + r.headers = []headerTuple{} + } + r.headers = append(r.headers, headerTuple{name: name, value: value}) +} + +func (r Request) WithHeader(name string, value string) Request { + r.AddHeader(name, value) + return r +} + +func (r *Request) AddCookie(c *http.Cookie) { + r.cookies = append(r.cookies, c) +} + +func (r Request) WithCookie(c *http.Cookie) Request { + r.AddCookie(c) + return r + +} + +func (r Request) Do() (*Response, error) { + var client = DefaultClient + var transport = DefaultTransport + var resUri string + var redirectFailed bool + + r.Method = valueOrDefault(r.Method, "GET") + + // use a client with a cookie jar if necessary. We create a new client not + // to modify the default one. + if r.CookieJar != nil { + client = &http.Client{ + Transport: transport, + Jar: r.CookieJar, + } + } + + if r.Proxy != "" { + proxyUrl, err := url.Parse(r.Proxy) + if err != nil { + // proxy address is in a wrong format + return nil, &Error{Err: err} + } + + //If jar is specified new client needs to be built + if proxyTransport == nil || client.Jar != nil { + proxyTransport = &http.Transport{Dial: DefaultDialer.Dial, Proxy: http.ProxyURL(proxyUrl)} + proxyClient = &http.Client{Transport: proxyTransport, Jar: client.Jar} + } else if proxyTransport, ok := proxyTransport.(*http.Transport); ok { + proxyTransport.Proxy = http.ProxyURL(proxyUrl) + } + transport = proxyTransport + client = proxyClient + } + + client.CheckRedirect = func(req *http.Request, via []*http.Request) error { + + if len(via) > r.MaxRedirects { + redirectFailed = true + return errors.New("Error redirecting. MaxRedirects reached") + } + + resUri = req.URL.String() + + //By default Golang will not redirect request headers + // https://code.google.com/p/go/issues/detail?id=4800&q=request%20header + if r.RedirectHeaders { + for key, val := range via[0].Header { + req.Header[key] = val + } + } + return nil + } + + if transport, ok := transport.(*http.Transport); ok { + if r.Insecure { + if transport.TLSClientConfig != nil { + transport.TLSClientConfig.InsecureSkipVerify = true + } else { + transport.TLSClientConfig = &tls.Config{InsecureSkipVerify: true} + } + } else if transport.TLSClientConfig != nil { + // the default TLS client (when transport.TLSClientConfig==nil) is + // already set to verify, so do nothing in that case + transport.TLSClientConfig.InsecureSkipVerify = false + } + } + + req, err := r.NewRequest() + + if err != nil { + // we couldn't parse the URL. + return nil, &Error{Err: err} + } + + timeout := false + if r.Timeout > 0 { + client.Timeout = r.Timeout + } + + if r.ShowDebug { + dump, err := httputil.DumpRequest(req, true) + if err != nil { + log.Println(err) + } + log.Println(string(dump)) + } + + if r.OnBeforeRequest != nil { + r.OnBeforeRequest(&r, req) + } + res, err := client.Do(req) + + if err != nil { + if !timeout { + if t, ok := err.(itimeout); ok { + timeout = t.Timeout() + } + if ue, ok := err.(*url.Error); ok { + if t, ok := ue.Err.(itimeout); ok { + timeout = t.Timeout() + } + } + } + + var response *Response + //If redirect fails we still want to return response data + if redirectFailed { + if res != nil { + response = &Response{res, resUri, &Body{reader: res.Body}, req} + } else { + response = &Response{res, resUri, nil, req} + } + } + + //If redirect fails and we haven't set a redirect count we shouldn't return an error + if redirectFailed && r.MaxRedirects == 0 { + return response, nil + } + + return response, &Error{timeout: timeout, Err: err} + } + + if r.Compression != nil && strings.Contains(res.Header.Get("Content-Encoding"), r.Compression.ContentEncoding) { + compressedReader, err := r.Compression.reader(res.Body) + if err != nil { + return nil, &Error{Err: err} + } + return &Response{res, resUri, &Body{reader: res.Body, compressedReader: compressedReader}, req}, nil + } + + return &Response{res, resUri, &Body{reader: res.Body}, req}, nil +} + +func (r Request) addHeaders(headersMap http.Header) { + if len(r.UserAgent) > 0 { + headersMap.Add("User-Agent", r.UserAgent) + } + if r.Accept != "" { + headersMap.Add("Accept", r.Accept) + } + if r.ContentType != "" { + headersMap.Add("Content-Type", r.ContentType) + } +} + +func (r Request) NewRequest() (*http.Request, error) { + + b, e := prepareRequestBody(r.Body) + if e != nil { + // there was a problem marshaling the body + return nil, &Error{Err: e} + } + + if r.QueryString != nil { + param, e := paramParse(r.QueryString) + if e != nil { + return nil, &Error{Err: e} + } + r.Uri = r.Uri + "?" + param + } + + var bodyReader io.Reader + if b != nil && r.Compression != nil { + buffer := bytes.NewBuffer([]byte{}) + readBuffer := bufio.NewReader(b) + writer, err := r.Compression.writer(buffer) + if err != nil { + return nil, &Error{Err: err} + } + _, e = readBuffer.WriteTo(writer) + writer.Close() + if e != nil { + return nil, &Error{Err: e} + } + bodyReader = buffer + } else { + bodyReader = b + } + + req, err := http.NewRequest(r.Method, r.Uri, bodyReader) + if err != nil { + return nil, err + } + // add headers to the request + req.Host = r.Host + + r.addHeaders(req.Header) + if r.Compression != nil { + req.Header.Add("Content-Encoding", r.Compression.ContentEncoding) + req.Header.Add("Accept-Encoding", r.Compression.ContentEncoding) + } + if r.headers != nil { + for _, header := range r.headers { + req.Header.Add(header.name, header.value) + } + } + + //use basic auth if required + if r.BasicAuthUsername != "" { + req.SetBasicAuth(r.BasicAuthUsername, r.BasicAuthPassword) + } + + for _, c := range r.cookies { + req.AddCookie(c) + } + return req, nil +} + +// Return value if nonempty, def otherwise. +func valueOrDefault(value, def string) string { + if value != "" { + return value + } + return def +} diff --git a/Godeps/_workspace/src/github.com/franela/goreq/tags.go b/Godeps/_workspace/src/github.com/franela/goreq/tags.go new file mode 100644 index 00000000000..ffe8789d394 --- /dev/null +++ b/Godeps/_workspace/src/github.com/franela/goreq/tags.go @@ -0,0 +1,64 @@ +// Copyright 2011 The Go Authors. All rights reserved. +// Use of this source code is governed by a BSD-style +// license that can be found in the LICENSE file. + +package goreq + +import ( + "strings" + "unicode" +) + +// tagOptions is the string following a comma in a struct field's "json" +// tag, or the empty string. It does not include the leading comma. +type tagOptions string + +// parseTag splits a struct field's json tag into its name and +// comma-separated options. +func parseTag(tag string) (string, tagOptions) { + if idx := strings.Index(tag, ","); idx != -1 { + return tag[:idx], tagOptions(tag[idx+1:]) + } + return tag, tagOptions("") +} + +// Contains reports whether a comma-separated list of options +// contains a particular substr flag. substr must be surrounded by a +// string boundary or commas. +func (o tagOptions) Contains(optionName string) bool { + if len(o) == 0 { + return false + } + s := string(o) + for s != "" { + var next string + i := strings.Index(s, ",") + if i >= 0 { + s, next = s[:i], s[i+1:] + } + if s == optionName { + return true + } + s = next + } + return false +} + +func isValidTag(s string) bool { + if s == "" { + return false + } + for _, c := range s { + switch { + case strings.ContainsRune("!#$%&()*+-./:<=>?@[]^_{|}~ ", c): + // Backslash and quote chars are reserved, but + // otherwise any punctuation chars are allowed + // in a tag name. + default: + if !unicode.IsLetter(c) && !unicode.IsDigit(c) { + return false + } + } + } + return true +} diff --git a/Godeps/_workspace/src/github.com/gopherjs/gopherjs/LICENSE b/Godeps/_workspace/src/github.com/gopherjs/gopherjs/LICENSE new file mode 100644 index 00000000000..d496fef1092 --- /dev/null +++ b/Godeps/_workspace/src/github.com/gopherjs/gopherjs/LICENSE @@ -0,0 +1,24 @@ +Copyright (c) 2013 Richard Musiol. All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are +met: + + * Redistributions of source code must retain the above copyright +notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above +copyright notice, this list of conditions and the following disclaimer +in the documentation and/or other materials provided with the +distribution. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. diff --git a/Godeps/_workspace/src/github.com/gopherjs/gopherjs/js/js.go b/Godeps/_workspace/src/github.com/gopherjs/gopherjs/js/js.go new file mode 100644 index 00000000000..5367d3d0fa7 --- /dev/null +++ b/Godeps/_workspace/src/github.com/gopherjs/gopherjs/js/js.go @@ -0,0 +1,168 @@ +// Package js provides functions for interacting with native JavaScript APIs. Calls to these functions are treated specially by GopherJS and translated directly to their corresponding JavaScript syntax. +// +// Use MakeWrapper to expose methods to JavaScript. When passing values directly, the following type conversions are performed: +// +// | Go type | JavaScript type | Conversions back to interface{} | +// | --------------------- | --------------------- | ------------------------------- | +// | bool | Boolean | bool | +// | integers and floats | Number | float64 | +// | string | String | string | +// | []int8 | Int8Array | []int8 | +// | []int16 | Int16Array | []int16 | +// | []int32, []int | Int32Array | []int | +// | []uint8 | Uint8Array | []uint8 | +// | []uint16 | Uint16Array | []uint16 | +// | []uint32, []uint | Uint32Array | []uint | +// | []float32 | Float32Array | []float32 | +// | []float64 | Float64Array | []float64 | +// | all other slices | Array | []interface{} | +// | arrays | see slice type | see slice type | +// | functions | Function | func(...interface{}) *js.Object | +// | time.Time | Date | time.Time | +// | - | instanceof Node | *js.Object | +// | maps, structs | instanceof Object | map[string]interface{} | +// +// Additionally, for a struct containing a *js.Object field, only the content of the field will be passed to JavaScript and vice versa. +package js + +// Object is a container for a native JavaScript object. Calls to its methods are treated specially by GopherJS and translated directly to their JavaScript syntax. A nil pointer to Object is equal to JavaScript's "null". Object can not be used as a map key. +type Object struct{ object *Object } + +// Get returns the object's property with the given key. +func (o *Object) Get(key string) *Object { return o.object.Get(key) } + +// Set assigns the value to the object's property with the given key. +func (o *Object) Set(key string, value interface{}) { o.object.Set(key, value) } + +// Delete removes the object's property with the given key. +func (o *Object) Delete(key string) { o.object.Delete(key) } + +// Length returns the object's "length" property, converted to int. +func (o *Object) Length() int { return o.object.Length() } + +// Index returns the i'th element of an array. +func (o *Object) Index(i int) *Object { return o.object.Index(i) } + +// SetIndex sets the i'th element of an array. +func (o *Object) SetIndex(i int, value interface{}) { o.object.SetIndex(i, value) } + +// Call calls the object's method with the given name. +func (o *Object) Call(name string, args ...interface{}) *Object { return o.object.Call(name, args...) } + +// Invoke calls the object itself. This will fail if it is not a function. +func (o *Object) Invoke(args ...interface{}) *Object { return o.object.Invoke(args...) } + +// New creates a new instance of this type object. This will fail if it not a function (constructor). +func (o *Object) New(args ...interface{}) *Object { return o.object.New(args...) } + +// Bool returns the object converted to bool according to JavaScript type conversions. +func (o *Object) Bool() bool { return o.object.Bool() } + +// String returns the object converted to string according to JavaScript type conversions. +func (o *Object) String() string { return o.object.String() } + +// Int returns the object converted to int according to JavaScript type conversions (parseInt). +func (o *Object) Int() int { return o.object.Int() } + +// Int64 returns the object converted to int64 according to JavaScript type conversions (parseInt). +func (o *Object) Int64() int64 { return o.object.Int64() } + +// Uint64 returns the object converted to uint64 according to JavaScript type conversions (parseInt). +func (o *Object) Uint64() uint64 { return o.object.Uint64() } + +// Float returns the object converted to float64 according to JavaScript type conversions (parseFloat). +func (o *Object) Float() float64 { return o.object.Float() } + +// Interface returns the object converted to interface{}. See GopherJS' README for details. +func (o *Object) Interface() interface{} { return o.object.Interface() } + +// Unsafe returns the object as an uintptr, which can be converted via unsafe.Pointer. Not intended for public use. +func (o *Object) Unsafe() uintptr { return o.object.Unsafe() } + +// Error encapsulates JavaScript errors. Those are turned into a Go panic and may be recovered, giving an *Error that holds the JavaScript error object. +type Error struct { + *Object +} + +// Error returns the message of the encapsulated JavaScript error object. +func (err *Error) Error() string { + return "JavaScript error: " + err.Get("message").String() +} + +// Stack returns the stack property of the encapsulated JavaScript error object. +func (err *Error) Stack() string { + return err.Get("stack").String() +} + +// Global gives JavaScript's global object ("window" for browsers and "GLOBAL" for Node.js). +var Global *Object + +// Module gives the value of the "module" variable set by Node.js. Hint: Set a module export with 'js.Module.Get("exports").Set("exportName", ...)'. +var Module *Object + +// Undefined gives the JavaScript value "undefined". +var Undefined *Object + +// Debugger gets compiled to JavaScript's "debugger;" statement. +func Debugger() {} + +// InternalObject returns the internal JavaScript object that represents i. Not intended for public use. +func InternalObject(i interface{}) *Object { + return nil +} + +// MakeFunc wraps a function and gives access to the values of JavaScript's "this" and "arguments" keywords. +func MakeFunc(func(this *Object, arguments []*Object) interface{}) *Object { + return nil +} + +// Keys returns the keys of the given JavaScript object. +func Keys(o *Object) []string { + if o == nil || o == Undefined { + return nil + } + a := Global.Get("Object").Call("keys", o) + s := make([]string, a.Length()) + for i := 0; i < a.Length(); i++ { + s[i] = a.Index(i).String() + } + return s +} + +// MakeWrapper creates a JavaScript object which has wrappers for the exported methods of i. Use explicit getter and setter methods to expose struct fields to JavaScript. +func MakeWrapper(i interface{}) *Object { + v := InternalObject(i) + o := Global.Get("Object").New() + o.Set("__internal_object__", v) + methods := v.Get("constructor").Get("methods") + for i := 0; i < methods.Length(); i++ { + m := methods.Index(i) + if m.Get("pkg").String() != "" { // not exported + continue + } + o.Set(m.Get("name").String(), func(args ...*Object) *Object { + return Global.Call("$externalizeFunction", v.Get(m.Get("prop").String()), m.Get("typ"), true).Call("apply", v, args) + }) + } + return o +} + +// NewArrayBuffer creates a JavaScript ArrayBuffer from a byte slice. +func NewArrayBuffer(b []byte) *Object { + slice := InternalObject(b) + offset := slice.Get("$offset").Int() + length := slice.Get("$length").Int() + return slice.Get("$array").Get("buffer").Call("slice", offset, offset+length) +} + +// M is a simple map type. It is intended as a shorthand for JavaScript objects (before conversion). +type M map[string]interface{} + +// S is a simple slice type. It is intended as a shorthand for JavaScript arrays (before conversion). +type S []interface{} + +func init() { + // avoid dead code elimination + e := Error{} + _ = e +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/LICENSE b/Godeps/_workspace/src/github.com/grafana/grafana-cli/LICENSE new file mode 100644 index 00000000000..8dada3edaf5 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright {yyyy} {name of copyright owner} + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/command_line.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/command_line.go new file mode 100644 index 00000000000..edbdc03d7c2 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/command_line.go @@ -0,0 +1,35 @@ +package commands + +import ( + "github.com/codegangsta/cli" +) + +type CommandLine interface { + ShowHelp() + ShowVersion() + Application() *cli.App + Args() cli.Args + Bool(name string) bool + Int(name string) int + String(name string) string + StringSlice(name string) []string + GlobalString(name string) string + FlagNames() (names []string) + Generic(name string) interface{} +} + +type contextCommandLine struct { + *cli.Context +} + +func (c *contextCommandLine) ShowHelp() { + cli.ShowCommandHelp(c.Context, c.Command.Name) +} + +func (c *contextCommandLine) ShowVersion() { + cli.ShowVersion(c.Context) +} + +func (c *contextCommandLine) Application() *cli.App { + return c.App +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commands.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commands.go new file mode 100644 index 00000000000..e72a1e45ff6 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commands.go @@ -0,0 +1,48 @@ +package commands + +import ( + "github.com/codegangsta/cli" + "github.com/grafana/grafana-cli/pkg/log" +) + +func runCommand(command func(commandLine CommandLine) error) func(context *cli.Context) { + return func(context *cli.Context) { + + cmd := &contextCommandLine{context} + if err := command(cmd); err != nil { + log.Errorf("%v\n\n", err) + + cmd.ShowHelp() + } else { + log.Info("Restart grafana after installing plugins . \n") + } + } +} + +var Commands = []cli.Command{ + { + Name: "install", + Usage: "installs stuff", + Action: runCommand(installCommand), + }, { + Name: "list-remote", + Usage: "list remote available plugins", + Action: runCommand(listremoteCommand), + }, { + Name: "upgrade", + Usage: "upgrades one plugin", + Action: runCommand(upgradeCommand), + }, { + Name: "upgrade-all", + Usage: "upgrades all your installed plugins", + Action: runCommand(upgradeAllCommand), + }, { + Name: "ls", + Usage: "list all installed plugins", + Action: runCommand(lsCommand), + }, { + Name: "remove", + Usage: "removes stuff", + Action: runCommand(removeCommand), + }, +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_commandLine.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_commandLine.go new file mode 100644 index 00000000000..4a070b5a192 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_commandLine.go @@ -0,0 +1,95 @@ +package commandstest + +import ( + "github.com/codegangsta/cli" +) + +type FakeFlagger struct { + Data map[string]interface{} +} + +type FakeCommandLine struct { + LocalFlags, GlobalFlags *FakeFlagger + HelpShown, VersionShown bool + CliArgs []string +} + +func (ff FakeFlagger) String(key string) string { + if value, ok := ff.Data[key]; ok { + return value.(string) + } + return "" +} + +func (ff FakeFlagger) StringSlice(key string) []string { + if value, ok := ff.Data[key]; ok { + return value.([]string) + } + return []string{} +} + +func (ff FakeFlagger) Int(key string) int { + if value, ok := ff.Data[key]; ok { + return value.(int) + } + return 0 +} + +func (ff FakeFlagger) Bool(key string) bool { + if value, ok := ff.Data[key]; ok { + return value.(bool) + } + return false +} + +func (fcli *FakeCommandLine) String(key string) string { + return fcli.LocalFlags.String(key) +} + +func (fcli *FakeCommandLine) StringSlice(key string) []string { + return fcli.LocalFlags.StringSlice(key) +} + +func (fcli *FakeCommandLine) Int(key string) int { + return fcli.LocalFlags.Int(key) +} + +func (fcli *FakeCommandLine) Bool(key string) bool { + if fcli.LocalFlags == nil { + return false + } + return fcli.LocalFlags.Bool(key) +} + +func (fcli *FakeCommandLine) GlobalString(key string) string { + return fcli.GlobalFlags.String(key) +} + +func (fcli *FakeCommandLine) Generic(name string) interface{} { + return fcli.LocalFlags.Data[name] +} + +func (fcli *FakeCommandLine) FlagNames() []string { + flagNames := []string{} + for key := range fcli.LocalFlags.Data { + flagNames = append(flagNames, key) + } + + return flagNames +} + +func (fcli *FakeCommandLine) ShowHelp() { + fcli.HelpShown = true +} + +func (fcli *FakeCommandLine) Application() *cli.App { + return cli.NewApp() +} + +func (fcli *FakeCommandLine) Args() cli.Args { + return fcli.CliArgs +} + +func (fcli *FakeCommandLine) ShowVersion() { + fcli.VersionShown = true +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_ioutil.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_ioutil.go new file mode 100644 index 00000000000..e6715a5ea77 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/commandstest/fake_ioutil.go @@ -0,0 +1,55 @@ +package commandstest + +import ( + "os" + "time" +) + +type FakeIoUtil struct { + FakeReadDir []os.FileInfo + FakeIsDirectory bool +} + +func (util *FakeIoUtil) Stat(path string) (os.FileInfo, error) { + return FakeFileInfo{IsDirectory: util.FakeIsDirectory}, nil +} + +func (util *FakeIoUtil) RemoveAll(path string) error { + return nil +} + +func (util *FakeIoUtil) ReadDir(path string) ([]os.FileInfo, error) { + return util.FakeReadDir, nil +} + +func (i *FakeIoUtil) ReadFile(filename string) ([]byte, error) { + return make([]byte, 0), nil +} + +type FakeFileInfo struct { + IsDirectory bool +} + +func (ffi FakeFileInfo) IsDir() bool { + return ffi.IsDirectory +} + +func (ffi FakeFileInfo) Size() int64 { + return 1 +} + +func (ffi FakeFileInfo) Mode() os.FileMode { + return 0777 +} + +func (ffi FakeFileInfo) Name() string { + return "" +} + +func (ffi FakeFileInfo) ModTime() time.Time { + return time.Time{} +} + +func (ffi FakeFileInfo) Sys() interface{} { + return nil +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/install_command.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/install_command.go new file mode 100644 index 00000000000..f8807d66108 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/install_command.go @@ -0,0 +1,146 @@ +package commands + +import ( + "archive/zip" + "bytes" + "errors" + "github.com/grafana/grafana-cli/pkg/log" + m "github.com/grafana/grafana-cli/pkg/models" + services "github.com/grafana/grafana-cli/pkg/services" + "io" + "io/ioutil" + "net/http" + "os" + "path" + "regexp" +) + +func validateInput(c CommandLine, pluginFolder string) error { + arg := c.Args().First() + if arg == "" { + return errors.New("please specify plugin to install") + } + + pluginDir := c.GlobalString("path") + if pluginDir == "" { + return errors.New("missing path flag") + } + + fileinfo, err := os.Stat(pluginDir) + if err != nil && !fileinfo.IsDir() { + return errors.New("path is not a directory") + } + + return nil +} + +func installCommand(c CommandLine) error { + pluginFolder := c.GlobalString("path") + if err := validateInput(c, pluginFolder); err != nil { + return err + } + + pluginToInstall := c.Args().First() + version := c.Args().Get(1) + + log.Infof("version: %v\n", version) + + return InstallPlugin(pluginToInstall, pluginFolder, version) +} + +func InstallPlugin(pluginName, pluginFolder, version string) error { + plugin, err := services.GetPlugin(pluginName) + if err != nil { + return err + } + + v, err := SelectVersion(plugin, version) + if err != nil { + return err + } + + url := v.Url + commit := v.Commit + + downloadURL := url + "/archive/" + commit + ".zip" + + log.Infof("installing %v @ %v\n", plugin.Id, version) + log.Infof("from url: %v\n", downloadURL) + log.Infof("on commit: %v\n", commit) + log.Infof("into: %v\n", pluginFolder) + + err = downloadFile(plugin.Id, pluginFolder, downloadURL) + if err == nil { + log.Info("Installed %s successfully ✔\n", plugin.Id) + } + + res := services.ReadPlugin(pluginFolder, pluginName) + + for _, v := range res.Dependency.Plugins { + log.Infof("Depends on %s install!\n", v.Id) + + //Todo: uncomment this code once the repo is more correct. + //InstallPlugin(v.Id, pluginFolder, "") + } + + return err +} + +func SelectVersion(plugin m.Plugin, version string) (m.Version, error) { + if version == "" { + return plugin.Versions[0], nil + } + + for _, v := range plugin.Versions { + if v.Version == version { + return v, nil + } + } + + return m.Version{}, errors.New("Could not find the version your looking for") +} + +func RemoveGitBuildFromname(pluginname, filename string) string { + r := regexp.MustCompile("^[a-zA-Z0-9_.-]*/") + return r.ReplaceAllString(filename, pluginname+"/") +} + +func downloadFile(pluginName, filepath, url string) (err error) { + resp, err := http.Get(url) + if err != nil { + return err + } + defer resp.Body.Close() + + body, err := ioutil.ReadAll(resp.Body) + if err != nil { + return err + } + + r, err := zip.NewReader(bytes.NewReader(body), resp.ContentLength) + if err != nil { + return err + } + for _, zf := range r.File { + newfile := path.Join(filepath, RemoveGitBuildFromname(pluginName, zf.Name)) + + if zf.FileInfo().IsDir() { + os.Mkdir(newfile, 0777) + } else { + dst, err := os.Create(newfile) + if err != nil { + log.Errorf("%v", err) + } + defer dst.Close() + src, err := zf.Open() + if err != nil { + log.Errorf("%v", err) + } + defer src.Close() + + io.Copy(dst, src) + } + } + + return nil +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/listremote_command.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/listremote_command.go new file mode 100644 index 00000000000..9dc1af204c9 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/listremote_command.go @@ -0,0 +1,20 @@ +package commands + +import ( + "github.com/grafana/grafana-cli/pkg/log" + "github.com/grafana/grafana-cli/pkg/services" +) + +func listremoteCommand(c CommandLine) error { + plugin, err := services.ListAllPlugins() + + if err != nil { + return err + } + + for _, i := range plugin.Plugins { + log.Infof("id: %v version:\n", i.Id) + } + + return nil +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/ls_command.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/ls_command.go new file mode 100644 index 00000000000..7965f74de27 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/ls_command.go @@ -0,0 +1,49 @@ +package commands + +import ( + "errors" + "github.com/grafana/grafana-cli/pkg/log" + m "github.com/grafana/grafana-cli/pkg/models" + s "github.com/grafana/grafana-cli/pkg/services" +) + +var getPlugins func(path string) []m.InstalledPlugin + +var GetStat m.IoUtil + +func init() { + getPlugins = s.GetLocalPlugins + GetStat = s.IoUtil +} + +func validateCommand(pluginDir string) error { + if pluginDir == "" { + return errors.New("missing path flag") + } + + log.Info("plugindir: " + pluginDir + "\n") + pluginDirInfo, err := GetStat.Stat(pluginDir) + + if err != nil { + return errors.New("missing path flag") + } + + if pluginDirInfo.IsDir() == false { + return errors.New("plugin path is not a directory") + } + + return nil +} + +func lsCommand(c CommandLine) error { + pluginDir := c.GlobalString("path") + if err := validateCommand(pluginDir); err != nil { + return err + } + + for _, plugin := range getPlugins(pluginDir) { + log.Infof("plugin: %s @ %s \n", plugin.Name, plugin.Info.Version) + } + + return nil +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/remove_command.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/remove_command.go new file mode 100644 index 00000000000..4a25d04404e --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/remove_command.go @@ -0,0 +1,35 @@ +package commands + +import ( + "errors" + "github.com/grafana/grafana-cli/pkg/log" + m "github.com/grafana/grafana-cli/pkg/models" + services "github.com/grafana/grafana-cli/pkg/services" +) + +var getPluginss func(path string) []m.InstalledPlugin = services.GetLocalPlugins +var removePlugin func(pluginPath, id string) error = services.RemoveInstalledPlugin + +func removeCommand(c CommandLine) error { + pluginPath := c.GlobalString("path") + localPlugins := getPluginss(pluginPath) + + log.Info("remove!\n") + + plugin := c.Args().First() + log.Info("plugin: " + plugin + "\n") + if plugin == "" { + return errors.New("Missing which plugin parameter") + } + + log.Infof("plugins : \n%v\n", localPlugins) + + for _, p := range localPlugins { + log.Infof("is %s == %s ? %v", p.Id, c.Args().First(), p.Id == c.Args().First()) + if p.Id == c.Args().First() { + removePlugin(pluginPath, p.Id) + } + } + + return nil +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_all_command.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_all_command.go new file mode 100644 index 00000000000..97454769e62 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_all_command.go @@ -0,0 +1,61 @@ +package commands + +import ( + "github.com/grafana/grafana-cli/pkg/log" + m "github.com/grafana/grafana-cli/pkg/models" + services "github.com/grafana/grafana-cli/pkg/services" + "github.com/hashicorp/go-version" +) + +func ShouldUpgrade(installed string, remote m.Plugin) bool { + installedVersion, err1 := version.NewVersion(installed) + + if err1 != nil { + return false + } + + for _, v := range remote.Versions { + remoteVersion, err2 := version.NewVersion(v.Version) + + if err2 == nil { + if installedVersion.LessThan(remoteVersion) { + return true + } + } + } + + return false +} + +func upgradeAllCommand(c CommandLine) error { + pluginDir := c.GlobalString("path") + + localPlugins := services.GetLocalPlugins(pluginDir) + + remotePlugins, err := services.ListAllPlugins() + + if err != nil { + return err + } + + pluginsToUpgrade := make([]m.InstalledPlugin, 0) + + for _, localPlugin := range localPlugins { + for _, remotePlugin := range remotePlugins.Plugins { + if localPlugin.Id == remotePlugin.Id { + if ShouldUpgrade(localPlugin.Info.Version, remotePlugin) { + pluginsToUpgrade = append(pluginsToUpgrade, localPlugin) + } + } + } + } + + for _, p := range pluginsToUpgrade { + log.Infof("lets upgrade %v \n", p) + + services.RemoveInstalledPlugin(pluginDir, p.Id) + InstallPlugin(p.Id, pluginDir, "") + } + + return nil +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_command.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_command.go new file mode 100644 index 00000000000..df9581b3dc3 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/commands/upgrade_command.go @@ -0,0 +1,9 @@ +package commands + +import ( + "errors" +) + +func upgradeCommand(c CommandLine) error { + return errors.New("Not yet Implemented") +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/log/log.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/log/log.go new file mode 100644 index 00000000000..c8222d60c81 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/log/log.go @@ -0,0 +1,49 @@ +package log + +import ( + "fmt" +) + +var ( + debugmode = false +) + +func Debug(args ...interface{}) { + if debugmode { + fmt.Print(args...) + } +} + +func Debugf(fmtString string, args ...interface{}) { + if debugmode { + fmt.Printf(fmtString, args...) + } +} + +func Error(args ...interface{}) { + fmt.Print(args...) +} + +func Errorf(fmtString string, args ...interface{}) { + fmt.Printf(fmtString, args...) +} + +func Info(args ...interface{}) { + fmt.Print(args...) +} + +func Infof(fmtString string, args ...interface{}) { + fmt.Printf(fmtString, args...) +} + +func Warn(args ...interface{}) { + fmt.Print(args...) +} + +func Warnf(fmtString string, args ...interface{}) { + fmt.Printf(fmtString, args...) +} + +func SetDebug(value bool) { + debugmode = value +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/models/model.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/models/model.go new file mode 100644 index 00000000000..3a39c5fbe65 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/models/model.go @@ -0,0 +1,48 @@ +package models + +import ( + "os" +) + +type InstalledPlugin struct { + Id string `json:"id"` + Name string `json:"name"` + Type string `json:"type"` + + Info PluginInfo `json:"info"` + Dependency Dependency `json:"dependencies"` +} + +type Dependency struct { + GrafanaVersion string `json:"grafanaVersion"` + Plugins []Plugin `json:"plugins"` +} + +type PluginInfo struct { + Version string `json:"version"` + Updated string `json:"updated"` +} + +type Plugin struct { + Id string `json:"id"` + Category string `json:"category"` + Versions []Version `json:"versions"` +} + +type Version struct { + Commit string `json:"commit"` + Url string `json:"url"` + Version string `json:"version"` +} + +type PluginRepo struct { + Plugins []Plugin `json:"plugins"` + Version string `json:"version"` +} + +type IoUtil interface { + Stat(path string) (os.FileInfo, error) + RemoveAll(path string) error + ReadDir(path string) ([]os.FileInfo, error) + ReadFile(filename string) ([]byte, error) +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/io_util.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/io_util.go new file mode 100644 index 00000000000..5a7cd187575 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/io_util.go @@ -0,0 +1,28 @@ +package services + +import ( + m "github.com/grafana/grafana-cli/pkg/models" + "io/ioutil" + "os" +) + +var IoUtil m.IoUtil = IoUtilImp{} + +type IoUtilImp struct { +} + +func (i IoUtilImp) Stat(path string) (os.FileInfo, error) { + return os.Stat(path) +} + +func (i IoUtilImp) RemoveAll(path string) error { + return os.RemoveAll(path) +} + +func (i IoUtilImp) ReadDir(path string) ([]os.FileInfo, error) { + return ioutil.ReadDir(path) +} + +func (i IoUtilImp) ReadFile(filename string) ([]byte, error) { + return ioutil.ReadFile(filename) +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/services.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/services.go new file mode 100644 index 00000000000..9e5b65f5e84 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/services/services.go @@ -0,0 +1,70 @@ +package services + +import ( + "encoding/json" + "errors" + "github.com/franela/goreq" + m "github.com/grafana/grafana-cli/pkg/models" + "path" +) + +var IoHelper m.IoUtil = IoUtilImp{} + +func ListAllPlugins() (m.PluginRepo, error) { + res, _ := goreq.Request{Uri: "https://raw.githubusercontent.com/grafana/grafana-plugin-repository/master/repo.json"}.Do() + + var resp m.PluginRepo + err := res.Body.FromJsonTo(&resp) + if err != nil { + return m.PluginRepo{}, errors.New("Could not load plugin data") + } + + return resp, nil +} + +func ReadPlugin(pluginDir, pluginName string) m.InstalledPlugin { + pluginDataPath := path.Join(pluginDir, pluginName, "plugin.json") + pluginData, _ := IoHelper.ReadFile(pluginDataPath) + + res := m.InstalledPlugin{} + json.Unmarshal(pluginData, &res) + + if res.Info.Version == "" { + res.Info.Version = "0.0.0" + } + + if res.Id == "" { + res.Id = res.Name + } + + return res +} + +func GetLocalPlugins(pluginDir string) []m.InstalledPlugin { + result := make([]m.InstalledPlugin, 0) + files, _ := IoHelper.ReadDir(pluginDir) + for _, f := range files { + res := ReadPlugin(pluginDir, f.Name()) + result = append(result, res) + } + + return result +} + +func RemoveInstalledPlugin(pluginPath, id string) error { + return IoHelper.RemoveAll(path.Join(pluginPath, id)) +} + +func GetPlugin(id string) (m.Plugin, error) { + resp, err := ListAllPlugins() + if err != nil { + } + + for _, i := range resp.Plugins { + if i.Id == id { + return i, nil + } + } + + return m.Plugin{}, errors.New("could not find plugin named \"" + id + "\"") +} diff --git a/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/version/version.go b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/version/version.go new file mode 100644 index 00000000000..2a0eddf9859 --- /dev/null +++ b/Godeps/_workspace/src/github.com/grafana/grafana-cli/pkg/version/version.go @@ -0,0 +1,5 @@ +package version + +var ( + Version = "0.0.2" +) diff --git a/Godeps/_workspace/src/github.com/hashicorp/go-version/.travis.yml b/Godeps/_workspace/src/github.com/hashicorp/go-version/.travis.yml new file mode 100644 index 00000000000..9f30eecd73f --- /dev/null +++ b/Godeps/_workspace/src/github.com/hashicorp/go-version/.travis.yml @@ -0,0 +1,11 @@ +language: go + +go: + - 1.0 + - 1.1 + - 1.2 + - 1.3 + - 1.4 + +script: + - go test diff --git a/Godeps/_workspace/src/github.com/hashicorp/go-version/LICENSE b/Godeps/_workspace/src/github.com/hashicorp/go-version/LICENSE new file mode 100644 index 00000000000..c33dcc7c928 --- /dev/null +++ b/Godeps/_workspace/src/github.com/hashicorp/go-version/LICENSE @@ -0,0 +1,354 @@ +Mozilla Public License, version 2.0 + +1. Definitions + +1.1. “Contributor” + + means each individual or legal entity that creates, contributes to the + creation of, or owns Covered Software. + +1.2. “Contributor Version” + + means the combination of the Contributions of others (if any) used by a + Contributor and that particular Contributor’s Contribution. + +1.3. “Contribution” + + means Covered Software of a particular Contributor. + +1.4. “Covered Software” + + means Source Code Form to which the initial Contributor has attached the + notice in Exhibit A, the Executable Form of such Source Code Form, and + Modifications of such Source Code Form, in each case including portions + thereof. + +1.5. “Incompatible With Secondary Licenses” + means + + a. that the initial Contributor has attached the notice described in + Exhibit B to the Covered Software; or + + b. that the Covered Software was made available under the terms of version + 1.1 or earlier of the License, but not also under the terms of a + Secondary License. + +1.6. “Executable Form” + + means any form of the work other than Source Code Form. + +1.7. “Larger Work” + + means a work that combines Covered Software with other material, in a separate + file or files, that is not Covered Software. + +1.8. “License” + + means this document. + +1.9. “Licensable” + + means having the right to grant, to the maximum extent possible, whether at the + time of the initial grant or subsequently, any and all of the rights conveyed by + this License. + +1.10. “Modifications” + + means any of the following: + + a. any file in Source Code Form that results from an addition to, deletion + from, or modification of the contents of Covered Software; or + + b. any new file in Source Code Form that contains any Covered Software. + +1.11. “Patent Claims” of a Contributor + + means any patent claim(s), including without limitation, method, process, + and apparatus claims, in any patent Licensable by such Contributor that + would be infringed, but for the grant of the License, by the making, + using, selling, offering for sale, having made, import, or transfer of + either its Contributions or its Contributor Version. + +1.12. “Secondary License” + + means either the GNU General Public License, Version 2.0, the GNU Lesser + General Public License, Version 2.1, the GNU Affero General Public + License, Version 3.0, or any later versions of those licenses. + +1.13. “Source Code Form” + + means the form of the work preferred for making modifications. + +1.14. “You” (or “Your”) + + means an individual or a legal entity exercising rights under this + License. For legal entities, “You” includes any entity that controls, is + controlled by, or is under common control with You. For purposes of this + definition, “control” means (a) the power, direct or indirect, to cause + the direction or management of such entity, whether by contract or + otherwise, or (b) ownership of more than fifty percent (50%) of the + outstanding shares or beneficial ownership of such entity. + + +2. License Grants and Conditions + +2.1. Grants + + Each Contributor hereby grants You a world-wide, royalty-free, + non-exclusive license: + + a. under intellectual property rights (other than patent or trademark) + Licensable by such Contributor to use, reproduce, make available, + modify, display, perform, distribute, and otherwise exploit its + Contributions, either on an unmodified basis, with Modifications, or as + part of a Larger Work; and + + b. under Patent Claims of such Contributor to make, use, sell, offer for + sale, have made, import, and otherwise transfer either its Contributions + or its Contributor Version. + +2.2. Effective Date + + The licenses granted in Section 2.1 with respect to any Contribution become + effective for each Contribution on the date the Contributor first distributes + such Contribution. + +2.3. Limitations on Grant Scope + + The licenses granted in this Section 2 are the only rights granted under this + License. No additional rights or licenses will be implied from the distribution + or licensing of Covered Software under this License. Notwithstanding Section + 2.1(b) above, no patent license is granted by a Contributor: + + a. for any code that a Contributor has removed from Covered Software; or + + b. for infringements caused by: (i) Your and any other third party’s + modifications of Covered Software, or (ii) the combination of its + Contributions with other software (except as part of its Contributor + Version); or + + c. under Patent Claims infringed by Covered Software in the absence of its + Contributions. + + This License does not grant any rights in the trademarks, service marks, or + logos of any Contributor (except as may be necessary to comply with the + notice requirements in Section 3.4). + +2.4. Subsequent Licenses + + No Contributor makes additional grants as a result of Your choice to + distribute the Covered Software under a subsequent version of this License + (see Section 10.2) or under the terms of a Secondary License (if permitted + under the terms of Section 3.3). + +2.5. Representation + + Each Contributor represents that the Contributor believes its Contributions + are its original creation(s) or it has sufficient rights to grant the + rights to its Contributions conveyed by this License. + +2.6. Fair Use + + This License is not intended to limit any rights You have under applicable + copyright doctrines of fair use, fair dealing, or other equivalents. + +2.7. Conditions + + Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in + Section 2.1. + + +3. Responsibilities + +3.1. Distribution of Source Form + + All distribution of Covered Software in Source Code Form, including any + Modifications that You create or to which You contribute, must be under the + terms of this License. You must inform recipients that the Source Code Form + of the Covered Software is governed by the terms of this License, and how + they can obtain a copy of this License. You may not attempt to alter or + restrict the recipients’ rights in the Source Code Form. + +3.2. Distribution of Executable Form + + If You distribute Covered Software in Executable Form then: + + a. such Covered Software must also be made available in Source Code Form, + as described in Section 3.1, and You must inform recipients of the + Executable Form how they can obtain a copy of such Source Code Form by + reasonable means in a timely manner, at a charge no more than the cost + of distribution to the recipient; and + + b. You may distribute such Executable Form under the terms of this License, + or sublicense it under different terms, provided that the license for + the Executable Form does not attempt to limit or alter the recipients’ + rights in the Source Code Form under this License. + +3.3. Distribution of a Larger Work + + You may create and distribute a Larger Work under terms of Your choice, + provided that You also comply with the requirements of this License for the + Covered Software. If the Larger Work is a combination of Covered Software + with a work governed by one or more Secondary Licenses, and the Covered + Software is not Incompatible With Secondary Licenses, this License permits + You to additionally distribute such Covered Software under the terms of + such Secondary License(s), so that the recipient of the Larger Work may, at + their option, further distribute the Covered Software under the terms of + either this License or such Secondary License(s). + +3.4. Notices + + You may not remove or alter the substance of any license notices (including + copyright notices, patent notices, disclaimers of warranty, or limitations + of liability) contained within the Source Code Form of the Covered + Software, except that You may alter any license notices to the extent + required to remedy known factual inaccuracies. + +3.5. Application of Additional Terms + + You may choose to offer, and to charge a fee for, warranty, support, + indemnity or liability obligations to one or more recipients of Covered + Software. However, You may do so only on Your own behalf, and not on behalf + of any Contributor. You must make it absolutely clear that any such + warranty, support, indemnity, or liability obligation is offered by You + alone, and You hereby agree to indemnify every Contributor for any + liability incurred by such Contributor as a result of warranty, support, + indemnity or liability terms You offer. You may include additional + disclaimers of warranty and limitations of liability specific to any + jurisdiction. + +4. Inability to Comply Due to Statute or Regulation + + If it is impossible for You to comply with any of the terms of this License + with respect to some or all of the Covered Software due to statute, judicial + order, or regulation then You must: (a) comply with the terms of this License + to the maximum extent possible; and (b) describe the limitations and the code + they affect. Such description must be placed in a text file included with all + distributions of the Covered Software under this License. Except to the + extent prohibited by statute or regulation, such description must be + sufficiently detailed for a recipient of ordinary skill to be able to + understand it. + +5. Termination + +5.1. The rights granted under this License will terminate automatically if You + fail to comply with any of its terms. However, if You become compliant, + then the rights granted under this License from a particular Contributor + are reinstated (a) provisionally, unless and until such Contributor + explicitly and finally terminates Your grants, and (b) on an ongoing basis, + if such Contributor fails to notify You of the non-compliance by some + reasonable means prior to 60 days after You have come back into compliance. + Moreover, Your grants from a particular Contributor are reinstated on an + ongoing basis if such Contributor notifies You of the non-compliance by + some reasonable means, this is the first time You have received notice of + non-compliance with this License from such Contributor, and You become + compliant prior to 30 days after Your receipt of the notice. + +5.2. If You initiate litigation against any entity by asserting a patent + infringement claim (excluding declaratory judgment actions, counter-claims, + and cross-claims) alleging that a Contributor Version directly or + indirectly infringes any patent, then the rights granted to You by any and + all Contributors for the Covered Software under Section 2.1 of this License + shall terminate. + +5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user + license agreements (excluding distributors and resellers) which have been + validly granted by You or Your distributors under this License prior to + termination shall survive termination. + +6. Disclaimer of Warranty + + Covered Software is provided under this License on an “as is” basis, without + warranty of any kind, either expressed, implied, or statutory, including, + without limitation, warranties that the Covered Software is free of defects, + merchantable, fit for a particular purpose or non-infringing. The entire + risk as to the quality and performance of the Covered Software is with You. + Should any Covered Software prove defective in any respect, You (not any + Contributor) assume the cost of any necessary servicing, repair, or + correction. This disclaimer of warranty constitutes an essential part of this + License. No use of any Covered Software is authorized under this License + except under this disclaimer. + +7. Limitation of Liability + + Under no circumstances and under no legal theory, whether tort (including + negligence), contract, or otherwise, shall any Contributor, or anyone who + distributes Covered Software as permitted above, be liable to You for any + direct, indirect, special, incidental, or consequential damages of any + character including, without limitation, damages for lost profits, loss of + goodwill, work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses, even if such party shall have been + informed of the possibility of such damages. This limitation of liability + shall not apply to liability for death or personal injury resulting from such + party’s negligence to the extent applicable law prohibits such limitation. + Some jurisdictions do not allow the exclusion or limitation of incidental or + consequential damages, so this exclusion and limitation may not apply to You. + +8. Litigation + + Any litigation relating to this License may be brought only in the courts of + a jurisdiction where the defendant maintains its principal place of business + and such litigation shall be governed by laws of that jurisdiction, without + reference to its conflict-of-law provisions. Nothing in this Section shall + prevent a party’s ability to bring cross-claims or counter-claims. + +9. Miscellaneous + + This License represents the complete agreement concerning the subject matter + hereof. If any provision of this License is held to be unenforceable, such + provision shall be reformed only to the extent necessary to make it + enforceable. Any law or regulation which provides that the language of a + contract shall be construed against the drafter shall not be used to construe + this License against a Contributor. + + +10. Versions of the License + +10.1. New Versions + + Mozilla Foundation is the license steward. Except as provided in Section + 10.3, no one other than the license steward has the right to modify or + publish new versions of this License. Each version will be given a + distinguishing version number. + +10.2. Effect of New Versions + + You may distribute the Covered Software under the terms of the version of + the License under which You originally received the Covered Software, or + under the terms of any subsequent version published by the license + steward. + +10.3. Modified Versions + + If you create software not governed by this License, and you want to + create a new license for such software, you may create and use a modified + version of this License if you rename the license and remove any + references to the name of the license steward (except to note that such + modified license differs from this License). + +10.4. Distributing Source Code Form that is Incompatible With Secondary Licenses + If You choose to distribute Source Code Form that is Incompatible With + Secondary Licenses under the terms of this version of the License, the + notice described in Exhibit B of this License must be attached. + +Exhibit A - Source Code Form License Notice + + This Source Code Form is subject to the + terms of the Mozilla Public License, v. + 2.0. If a copy of the MPL was not + distributed with this file, You can + obtain one at + http://mozilla.org/MPL/2.0/. + +If it is not possible or desirable to put the notice in a particular file, then +You may include the notice in a location (such as a LICENSE file in a relevant +directory) where a recipient would be likely to look for such a notice. + +You may add additional accurate notices of copyright ownership. + +Exhibit B - “Incompatible With Secondary Licenses” Notice + + This Source Code Form is “Incompatible + With Secondary Licenses”, as defined by + the Mozilla Public License, v. 2.0. + diff --git a/Godeps/_workspace/src/github.com/hashicorp/go-version/README.md b/Godeps/_workspace/src/github.com/hashicorp/go-version/README.md new file mode 100644 index 00000000000..1d50070f131 --- /dev/null +++ b/Godeps/_workspace/src/github.com/hashicorp/go-version/README.md @@ -0,0 +1,65 @@ +# Versioning Library for Go +[![Build Status](https://travis-ci.org/hashicorp/go-version.svg?branch=master)](https://travis-ci.org/hashicorp/go-version) + +go-version is a library for parsing versions and version constraints, +and verifying versions against a set of constraints. go-version +can sort a collection of versions properly, handles prerelease/beta +versions, can increment versions, etc. + +Versions used with go-version must follow [SemVer](http://semver.org/). + +## Installation and Usage + +Package documentation can be found on +[GoDoc](http://godoc.org/github.com/hashicorp/go-version). + +Installation can be done with a normal `go get`: + +``` +$ go get github.com/hashicorp/go-version +``` + +#### Version Parsing and Comparison + +```go +v1, err := version.NewVersion("1.2") +v2, err := version.NewVersion("1.5+metadata") + +// Comparison example. There is also GreaterThan, Equal, and just +// a simple Compare that returns an int allowing easy >=, <=, etc. +if v1.LessThan(v2) { + fmt.Printf("%s is less than %s", v1, v2) +} +``` + +#### Version Constraints + +```go +v1, err := version.NewVersion("1.2") + +// Constraints example. +constraints, err := version.NewConstraint(">= 1.0, < 1.4") +if constraints.Check(v1) { + fmt.Printf("%s satisfies constraints %s", v1, constraints) +} +``` + +#### Version Sorting + +```go +versionsRaw := []string{"1.1", "0.7.1", "1.4-beta", "1.4", "2"} +versions := make([]*version.Version, len(versionsRaw)) +for i, raw := range versionsRaw { + v, _ := version.NewVersion(raw) + versions[i] = v +} + +// After this, the versions are properly sorted +sort.Sort(version.Collection(versions)) +``` + +## Issues and Contributing + +If you find an issue with this library, please report an issue. If you'd +like, we welcome any contributions. Fork this library and submit a pull +request. diff --git a/Godeps/_workspace/src/github.com/hashicorp/go-version/constraint.go b/Godeps/_workspace/src/github.com/hashicorp/go-version/constraint.go new file mode 100644 index 00000000000..091cfab389f --- /dev/null +++ b/Godeps/_workspace/src/github.com/hashicorp/go-version/constraint.go @@ -0,0 +1,156 @@ +package version + +import ( + "fmt" + "regexp" + "strings" +) + +// Constraint represents a single constraint for a version, such as +// ">= 1.0". +type Constraint struct { + f constraintFunc + check *Version + original string +} + +// Constraints is a slice of constraints. We make a custom type so that +// we can add methods to it. +type Constraints []*Constraint + +type constraintFunc func(v, c *Version) bool + +var constraintOperators map[string]constraintFunc + +var constraintRegexp *regexp.Regexp + +func init() { + constraintOperators = map[string]constraintFunc{ + "": constraintEqual, + "=": constraintEqual, + "!=": constraintNotEqual, + ">": constraintGreaterThan, + "<": constraintLessThan, + ">=": constraintGreaterThanEqual, + "<=": constraintLessThanEqual, + "~>": constraintPessimistic, + } + + ops := make([]string, 0, len(constraintOperators)) + for k, _ := range constraintOperators { + ops = append(ops, regexp.QuoteMeta(k)) + } + + constraintRegexp = regexp.MustCompile(fmt.Sprintf( + `^\s*(%s)\s*(%s)\s*$`, + strings.Join(ops, "|"), + VersionRegexpRaw)) +} + +// NewConstraint will parse one or more constraints from the given +// constraint string. The string must be a comma-separated list of +// constraints. +func NewConstraint(v string) (Constraints, error) { + vs := strings.Split(v, ",") + result := make([]*Constraint, len(vs)) + for i, single := range vs { + c, err := parseSingle(single) + if err != nil { + return nil, err + } + + result[i] = c + } + + return Constraints(result), nil +} + +// Check tests if a version satisfies all the constraints. +func (cs Constraints) Check(v *Version) bool { + for _, c := range cs { + if !c.Check(v) { + return false + } + } + + return true +} + +// Returns the string format of the constraints +func (cs Constraints) String() string { + csStr := make([]string, len(cs)) + for i, c := range cs { + csStr[i] = c.String() + } + + return strings.Join(csStr, ",") +} + +// Check tests if a constraint is validated by the given version. +func (c *Constraint) Check(v *Version) bool { + return c.f(v, c.check) +} + +func (c *Constraint) String() string { + return c.original +} + +func parseSingle(v string) (*Constraint, error) { + matches := constraintRegexp.FindStringSubmatch(v) + if matches == nil { + return nil, fmt.Errorf("Malformed constraint: %s", v) + } + + check, err := NewVersion(matches[2]) + if err != nil { + return nil, err + } + + return &Constraint{ + f: constraintOperators[matches[1]], + check: check, + original: v, + }, nil +} + +//------------------------------------------------------------------- +// Constraint functions +//------------------------------------------------------------------- + +func constraintEqual(v, c *Version) bool { + return v.Equal(c) +} + +func constraintNotEqual(v, c *Version) bool { + return !v.Equal(c) +} + +func constraintGreaterThan(v, c *Version) bool { + return v.Compare(c) == 1 +} + +func constraintLessThan(v, c *Version) bool { + return v.Compare(c) == -1 +} + +func constraintGreaterThanEqual(v, c *Version) bool { + return v.Compare(c) >= 0 +} + +func constraintLessThanEqual(v, c *Version) bool { + return v.Compare(c) <= 0 +} + +func constraintPessimistic(v, c *Version) bool { + if v.LessThan(c) { + return false + } + + for i := 0; i < c.si-1; i++ { + if v.segments[i] != c.segments[i] { + return false + } + } + + return true +} diff --git a/Godeps/_workspace/src/github.com/hashicorp/go-version/version.go b/Godeps/_workspace/src/github.com/hashicorp/go-version/version.go new file mode 100644 index 00000000000..d0e0b0c8ff7 --- /dev/null +++ b/Godeps/_workspace/src/github.com/hashicorp/go-version/version.go @@ -0,0 +1,251 @@ +package version + +import ( + "bytes" + "fmt" + "reflect" + "regexp" + "strconv" + "strings" +) + +// The compiled regular expression used to test the validity of a version. +var versionRegexp *regexp.Regexp + +// The raw regular expression string used for testing the validity +// of a version. +const VersionRegexpRaw string = `([0-9]+(\.[0-9]+){0,2})` + + `(-([0-9A-Za-z\-]+(\.[0-9A-Za-z\-]+)*))?` + + `(\+([0-9A-Za-z\-]+(\.[0-9A-Za-z\-]+)*))?` + + `?` + +// Version represents a single version. +type Version struct { + metadata string + pre string + segments []int + si int +} + +func init() { + versionRegexp = regexp.MustCompile("^" + VersionRegexpRaw + "$") +} + +// NewVersion parses the given version and returns a new +// Version. +func NewVersion(v string) (*Version, error) { + matches := versionRegexp.FindStringSubmatch(v) + if matches == nil { + return nil, fmt.Errorf("Malformed version: %s", v) + } + + segmentsStr := strings.Split(matches[1], ".") + segments := make([]int, len(segmentsStr), 3) + si := 0 + for i, str := range segmentsStr { + val, err := strconv.ParseInt(str, 10, 32) + if err != nil { + return nil, fmt.Errorf( + "Error parsing version: %s", err) + } + + segments[i] = int(val) + si += 1 + } + for i := len(segments); i < 3; i++ { + segments = append(segments, 0) + } + + return &Version{ + metadata: matches[7], + pre: matches[4], + segments: segments, + si: si, + }, nil +} + +// Must is a helper that wraps a call to a function returning (*Version, error) +// and panics if error is non-nil. +func Must(v *Version, err error) *Version { + if err != nil { + panic(err) + } + + return v +} + +// Compare compares this version to another version. This +// returns -1, 0, or 1 if this version is smaller, equal, +// or larger than the other version, respectively. +// +// If you want boolean results, use the LessThan, Equal, +// or GreaterThan methods. +func (v *Version) Compare(other *Version) int { + // A quick, efficient equality check + if v.String() == other.String() { + return 0 + } + + segmentsSelf := v.Segments() + segmentsOther := other.Segments() + + // If the segments are the same, we must compare on prerelease info + if reflect.DeepEqual(segmentsSelf, segmentsOther) { + preSelf := v.Prerelease() + preOther := other.Prerelease() + if preSelf == "" && preOther == "" { + return 0 + } + if preSelf == "" { + return 1 + } + if preOther == "" { + return -1 + } + + return comparePrereleases(preSelf, preOther) + } + + // Compare the segments + for i := 0; i < len(segmentsSelf); i++ { + lhs := segmentsSelf[i] + rhs := segmentsOther[i] + + if lhs == rhs { + continue + } else if lhs < rhs { + return -1 + } else { + return 1 + } + } + + panic("should not be reached") +} + +func comparePart(preSelf string, preOther string) int { + if preSelf == preOther { + return 0 + } + + // if a part is empty, we use the other to decide + if preSelf == "" { + _, notIsNumeric := strconv.ParseInt(preOther, 10, 64) + if notIsNumeric == nil { + return -1 + } + return 1 + } + + if preOther == "" { + _, notIsNumeric := strconv.ParseInt(preSelf, 10, 64) + if notIsNumeric == nil { + return 1 + } + return -1 + } + + if preSelf > preOther { + return 1 + } + + return -1 +} + +func comparePrereleases(v string, other string) int { + // the same pre release! + if v == other { + return 0 + } + + // split both pre releases for analyse their parts + selfPreReleaseMeta := strings.Split(v, ".") + otherPreReleaseMeta := strings.Split(other, ".") + + selfPreReleaseLen := len(selfPreReleaseMeta) + otherPreReleaseLen := len(otherPreReleaseMeta) + + biggestLen := otherPreReleaseLen + if selfPreReleaseLen > otherPreReleaseLen { + biggestLen = selfPreReleaseLen + } + + // loop for parts to find the first difference + for i := 0; i < biggestLen; i = i + 1 { + partSelfPre := "" + if i < selfPreReleaseLen { + partSelfPre = selfPreReleaseMeta[i] + } + + partOtherPre := "" + if i < otherPreReleaseLen { + partOtherPre = otherPreReleaseMeta[i] + } + + compare := comparePart(partSelfPre, partOtherPre) + // if parts are equals, continue the loop + if compare != 0 { + return compare + } + } + + return 0 +} + +// Equal tests if two versions are equal. +func (v *Version) Equal(o *Version) bool { + return v.Compare(o) == 0 +} + +// GreaterThan tests if this version is greater than another version. +func (v *Version) GreaterThan(o *Version) bool { + return v.Compare(o) > 0 +} + +// LessThan tests if this version is less than another version. +func (v *Version) LessThan(o *Version) bool { + return v.Compare(o) < 0 +} + +// Metadata returns any metadata that was part of the version +// string. +// +// Metadata is anything that comes after the "+" in the version. +// For example, with "1.2.3+beta", the metadata is "beta". +func (v *Version) Metadata() string { + return v.metadata +} + +// Prerelease returns any prerelease data that is part of the version, +// or blank if there is no prerelease data. +// +// Prerelease information is anything that comes after the "-" in the +// version (but before any metadata). For example, with "1.2.3-beta", +// the prerelease information is "beta". +func (v *Version) Prerelease() string { + return v.pre +} + +// Segments returns the numeric segments of the version as a slice. +// +// This excludes any metadata or pre-release information. For example, +// for a version "1.2.3-beta", segments will return a slice of +// 1, 2, 3. +func (v *Version) Segments() []int { + return v.segments +} + +// String returns the full version string included pre-release +// and metadata information. +func (v *Version) String() string { + var buf bytes.Buffer + fmt.Fprintf(&buf, "%d.%d.%d", v.segments[0], v.segments[1], v.segments[2]) + if v.pre != "" { + fmt.Fprintf(&buf, "-%s", v.pre) + } + if v.metadata != "" { + fmt.Fprintf(&buf, "+%s", v.metadata) + } + + return buf.String() +} diff --git a/Godeps/_workspace/src/github.com/hashicorp/go-version/version_collection.go b/Godeps/_workspace/src/github.com/hashicorp/go-version/version_collection.go new file mode 100644 index 00000000000..cc888d43e6b --- /dev/null +++ b/Godeps/_workspace/src/github.com/hashicorp/go-version/version_collection.go @@ -0,0 +1,17 @@ +package version + +// Collection is a type that implements the sort.Interface interface +// so that versions can be sorted. +type Collection []*Version + +func (v Collection) Len() int { + return len(v) +} + +func (v Collection) Less(i, j int) bool { + return v[i].LessThan(v[j]) +} + +func (v Collection) Swap(i, j int) { + v[i], v[j] = v[j], v[i] +} diff --git a/build.go b/build.go index a05b27b3008..4b15722e14a 100644 --- a/build.go +++ b/build.go @@ -63,9 +63,9 @@ func main() { setup() case "build": - pkg := "./pkg/cmd/grafana-server" clean() - build(pkg, []string{}) + build(serverBinaryName, "./pkg/cmd/grafana-server", []string{}) + build("grafana-cli", "./pkg/cmd/grafana-cli", []string{}) case "test": test("./pkg/...") @@ -312,8 +312,8 @@ func test(pkg string) { runPrint("go", "test", "-short", "-timeout", "60s", pkg) } -func build(pkg string, tags []string) { - binary := "./bin/" + serverBinaryName +func build(binaryName, pkg string, tags []string) { + binary := "./bin/" + binaryName if goos == "windows" { binary += ".exe" } diff --git a/pkg/cmd/grafana-cli/commands/command_line.go b/pkg/cmd/grafana-cli/commands/command_line.go new file mode 100644 index 00000000000..edbdc03d7c2 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/command_line.go @@ -0,0 +1,35 @@ +package commands + +import ( + "github.com/codegangsta/cli" +) + +type CommandLine interface { + ShowHelp() + ShowVersion() + Application() *cli.App + Args() cli.Args + Bool(name string) bool + Int(name string) int + String(name string) string + StringSlice(name string) []string + GlobalString(name string) string + FlagNames() (names []string) + Generic(name string) interface{} +} + +type contextCommandLine struct { + *cli.Context +} + +func (c *contextCommandLine) ShowHelp() { + cli.ShowCommandHelp(c.Context, c.Command.Name) +} + +func (c *contextCommandLine) ShowVersion() { + cli.ShowVersion(c.Context) +} + +func (c *contextCommandLine) Application() *cli.App { + return c.App +} diff --git a/pkg/cmd/grafana-cli/commands/commands.go b/pkg/cmd/grafana-cli/commands/commands.go new file mode 100644 index 00000000000..1f85366b18d --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/commands.go @@ -0,0 +1,48 @@ +package commands + +import ( + "github.com/codegangsta/cli" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" +) + +func runCommand(command func(commandLine CommandLine) error) func(context *cli.Context) { + return func(context *cli.Context) { + + cmd := &contextCommandLine{context} + if err := command(cmd); err != nil { + log.Errorf("%v\n\n", err) + + cmd.ShowHelp() + } else { + log.Info("Restart grafana after installing plugins . \n") + } + } +} + +var Commands = []cli.Command{ + { + Name: "install", + Usage: "installs stuff", + Action: runCommand(installCommand), + }, { + Name: "list-remote", + Usage: "list remote available plugins", + Action: runCommand(listremoteCommand), + }, { + Name: "upgrade", + Usage: "upgrades one plugin", + Action: runCommand(upgradeCommand), + }, { + Name: "upgrade-all", + Usage: "upgrades all your installed plugins", + Action: runCommand(upgradeAllCommand), + }, { + Name: "ls", + Usage: "list all installed plugins", + Action: runCommand(lsCommand), + }, { + Name: "remove", + Usage: "removes stuff", + Action: runCommand(removeCommand), + }, +} diff --git a/pkg/cmd/grafana-cli/commands/commandstest/fake_commandLine.go b/pkg/cmd/grafana-cli/commands/commandstest/fake_commandLine.go new file mode 100644 index 00000000000..4a070b5a192 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/commandstest/fake_commandLine.go @@ -0,0 +1,95 @@ +package commandstest + +import ( + "github.com/codegangsta/cli" +) + +type FakeFlagger struct { + Data map[string]interface{} +} + +type FakeCommandLine struct { + LocalFlags, GlobalFlags *FakeFlagger + HelpShown, VersionShown bool + CliArgs []string +} + +func (ff FakeFlagger) String(key string) string { + if value, ok := ff.Data[key]; ok { + return value.(string) + } + return "" +} + +func (ff FakeFlagger) StringSlice(key string) []string { + if value, ok := ff.Data[key]; ok { + return value.([]string) + } + return []string{} +} + +func (ff FakeFlagger) Int(key string) int { + if value, ok := ff.Data[key]; ok { + return value.(int) + } + return 0 +} + +func (ff FakeFlagger) Bool(key string) bool { + if value, ok := ff.Data[key]; ok { + return value.(bool) + } + return false +} + +func (fcli *FakeCommandLine) String(key string) string { + return fcli.LocalFlags.String(key) +} + +func (fcli *FakeCommandLine) StringSlice(key string) []string { + return fcli.LocalFlags.StringSlice(key) +} + +func (fcli *FakeCommandLine) Int(key string) int { + return fcli.LocalFlags.Int(key) +} + +func (fcli *FakeCommandLine) Bool(key string) bool { + if fcli.LocalFlags == nil { + return false + } + return fcli.LocalFlags.Bool(key) +} + +func (fcli *FakeCommandLine) GlobalString(key string) string { + return fcli.GlobalFlags.String(key) +} + +func (fcli *FakeCommandLine) Generic(name string) interface{} { + return fcli.LocalFlags.Data[name] +} + +func (fcli *FakeCommandLine) FlagNames() []string { + flagNames := []string{} + for key := range fcli.LocalFlags.Data { + flagNames = append(flagNames, key) + } + + return flagNames +} + +func (fcli *FakeCommandLine) ShowHelp() { + fcli.HelpShown = true +} + +func (fcli *FakeCommandLine) Application() *cli.App { + return cli.NewApp() +} + +func (fcli *FakeCommandLine) Args() cli.Args { + return fcli.CliArgs +} + +func (fcli *FakeCommandLine) ShowVersion() { + fcli.VersionShown = true +} diff --git a/pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go b/pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go new file mode 100644 index 00000000000..e6715a5ea77 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go @@ -0,0 +1,55 @@ +package commandstest + +import ( + "os" + "time" +) + +type FakeIoUtil struct { + FakeReadDir []os.FileInfo + FakeIsDirectory bool +} + +func (util *FakeIoUtil) Stat(path string) (os.FileInfo, error) { + return FakeFileInfo{IsDirectory: util.FakeIsDirectory}, nil +} + +func (util *FakeIoUtil) RemoveAll(path string) error { + return nil +} + +func (util *FakeIoUtil) ReadDir(path string) ([]os.FileInfo, error) { + return util.FakeReadDir, nil +} + +func (i *FakeIoUtil) ReadFile(filename string) ([]byte, error) { + return make([]byte, 0), nil +} + +type FakeFileInfo struct { + IsDirectory bool +} + +func (ffi FakeFileInfo) IsDir() bool { + return ffi.IsDirectory +} + +func (ffi FakeFileInfo) Size() int64 { + return 1 +} + +func (ffi FakeFileInfo) Mode() os.FileMode { + return 0777 +} + +func (ffi FakeFileInfo) Name() string { + return "" +} + +func (ffi FakeFileInfo) ModTime() time.Time { + return time.Time{} +} + +func (ffi FakeFileInfo) Sys() interface{} { + return nil +} diff --git a/pkg/cmd/grafana-cli/commands/install_command.go b/pkg/cmd/grafana-cli/commands/install_command.go new file mode 100644 index 00000000000..f8c2452d1eb --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/install_command.go @@ -0,0 +1,146 @@ +package commands + +import ( + "archive/zip" + "bytes" + "errors" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" + m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + services "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" + "io" + "io/ioutil" + "net/http" + "os" + "path" + "regexp" +) + +func validateInput(c CommandLine, pluginFolder string) error { + arg := c.Args().First() + if arg == "" { + return errors.New("please specify plugin to install") + } + + pluginDir := c.GlobalString("path") + if pluginDir == "" { + return errors.New("missing path flag") + } + + fileinfo, err := os.Stat(pluginDir) + if err != nil && !fileinfo.IsDir() { + return errors.New("path is not a directory") + } + + return nil +} + +func installCommand(c CommandLine) error { + pluginFolder := c.GlobalString("path") + if err := validateInput(c, pluginFolder); err != nil { + return err + } + + pluginToInstall := c.Args().First() + version := c.Args().Get(1) + + log.Infof("version: %v\n", version) + + return InstallPlugin(pluginToInstall, pluginFolder, version) +} + +func InstallPlugin(pluginName, pluginFolder, version string) error { + plugin, err := services.GetPlugin(pluginName) + if err != nil { + return err + } + + v, err := SelectVersion(plugin, version) + if err != nil { + return err + } + + url := v.Url + commit := v.Commit + + downloadURL := url + "/archive/" + commit + ".zip" + + log.Infof("installing %v @ %v\n", plugin.Id, version) + log.Infof("from url: %v\n", downloadURL) + log.Infof("on commit: %v\n", commit) + log.Infof("into: %v\n", pluginFolder) + + err = downloadFile(plugin.Id, pluginFolder, downloadURL) + if err == nil { + log.Info("Installed %s successfully ✔\n", plugin.Id) + } + + res := services.ReadPlugin(pluginFolder, pluginName) + + for _, v := range res.Dependency.Plugins { + log.Infof("Depends on %s install!\n", v.Id) + + //Todo: uncomment this code once the repo is more correct. + //InstallPlugin(v.Id, pluginFolder, "") + } + + return err +} + +func SelectVersion(plugin m.Plugin, version string) (m.Version, error) { + if version == "" { + return plugin.Versions[0], nil + } + + for _, v := range plugin.Versions { + if v.Version == version { + return v, nil + } + } + + return m.Version{}, errors.New("Could not find the version your looking for") +} + +func RemoveGitBuildFromname(pluginname, filename string) string { + r := regexp.MustCompile("^[a-zA-Z0-9_.-]*/") + return r.ReplaceAllString(filename, pluginname+"/") +} + +func downloadFile(pluginName, filepath, url string) (err error) { + resp, err := http.Get(url) + if err != nil { + return err + } + defer resp.Body.Close() + + body, err := ioutil.ReadAll(resp.Body) + if err != nil { + return err + } + + r, err := zip.NewReader(bytes.NewReader(body), resp.ContentLength) + if err != nil { + return err + } + for _, zf := range r.File { + newfile := path.Join(filepath, RemoveGitBuildFromname(pluginName, zf.Name)) + + if zf.FileInfo().IsDir() { + os.Mkdir(newfile, 0777) + } else { + dst, err := os.Create(newfile) + if err != nil { + log.Errorf("%v", err) + } + defer dst.Close() + src, err := zf.Open() + if err != nil { + log.Errorf("%v", err) + } + defer src.Close() + + io.Copy(dst, src) + } + } + + return nil +} diff --git a/pkg/cmd/grafana-cli/commands/install_command_test.go b/pkg/cmd/grafana-cli/commands/install_command_test.go new file mode 100644 index 00000000000..b88677cf614 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/install_command_test.go @@ -0,0 +1,39 @@ +package commands + +import ( + "testing" + + . "github.com/smartystreets/goconvey/convey" +) + +func TestFoldernameReplacement(t *testing.T) { + Convey("path containing git commit path", t, func() { + pluginName := "datasource-plugin-kairosdb" + + paths := map[string]string{ + "datasource-plugin-kairosdb-cc4a3965ef5d3eb1ae0ee4f93e9e78ec7db69e64/": "datasource-plugin-kairosdb/", + "datasource-plugin-kairosdb-cc4a3965ef5d3eb1ae0ee4f93e9e78ec7db69e64/README.md": "datasource-plugin-kairosdb/README.md", + "datasource-plugin-kairosdb-cc4a3965ef5d3eb1ae0ee4f93e9e78ec7db69e64/partials/": "datasource-plugin-kairosdb/partials/", + "datasource-plugin-kairosdb-cc4a3965ef5d3eb1ae0ee4f93e9e78ec7db69e64/partials/config.html": "datasource-plugin-kairosdb/partials/config.html", + } + + Convey("should be replaced with plugin name", func() { + for k, v := range paths { + So(RemoveGitBuildFromname(pluginName, k), ShouldEqual, v) + } + }) + }) + + Convey("path containing git commit path", t, func() { + pluginName := "app-example" + paths := map[string]string{ + "app-plugin-example-3c28f65ac6fb7f1e234b0364b97081d836495439/": "app-example/", + } + + Convey("should be replaced with plugin name", func() { + for k, v := range paths { + So(RemoveGitBuildFromname(pluginName, k), ShouldEqual, v) + } + }) + }) +} diff --git a/pkg/cmd/grafana-cli/commands/listremote_command.go b/pkg/cmd/grafana-cli/commands/listremote_command.go new file mode 100644 index 00000000000..5adda217be1 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/listremote_command.go @@ -0,0 +1,20 @@ +package commands + +import ( + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" +) + +func listremoteCommand(c CommandLine) error { + plugin, err := services.ListAllPlugins() + + if err != nil { + return err + } + + for _, i := range plugin.Plugins { + log.Infof("id: %v version:\n", i.Id) + } + + return nil +} diff --git a/pkg/cmd/grafana-cli/commands/ls_command.go b/pkg/cmd/grafana-cli/commands/ls_command.go new file mode 100644 index 00000000000..b12213799cc --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/ls_command.go @@ -0,0 +1,49 @@ +package commands + +import ( + "errors" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" + m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" +) + +var getPlugins func(path string) []m.InstalledPlugin + +var GetStat m.IoUtil + +func init() { + getPlugins = s.GetLocalPlugins + GetStat = s.IoUtil +} + +func validateCommand(pluginDir string) error { + if pluginDir == "" { + return errors.New("missing path flag") + } + + log.Info("plugindir: " + pluginDir + "\n") + pluginDirInfo, err := GetStat.Stat(pluginDir) + + if err != nil { + return errors.New("missing path flag") + } + + if pluginDirInfo.IsDir() == false { + return errors.New("plugin path is not a directory") + } + + return nil +} + +func lsCommand(c CommandLine) error { + pluginDir := c.GlobalString("path") + if err := validateCommand(pluginDir); err != nil { + return err + } + + for _, plugin := range getPlugins(pluginDir) { + log.Infof("plugin: %s @ %s \n", plugin.Name, plugin.Info.Version) + } + + return nil +} diff --git a/pkg/cmd/grafana-cli/commands/ls_command_test.go b/pkg/cmd/grafana-cli/commands/ls_command_test.go new file mode 100644 index 00000000000..55553c4fd99 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/ls_command_test.go @@ -0,0 +1,47 @@ +package commands + +import ( + "testing" + + "github.com/grafana/grafana/pkg/cmd/grafana-cli/commands/commandstest" + s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" + . "github.com/smartystreets/goconvey/convey" +) + +func TestMissingPath(t *testing.T) { + Convey("Missing path", t, func() { + commandLine := &commandstest.FakeCommandLine{ + CliArgs: []string{"ls"}, + GlobalFlags: &commandstest.FakeFlagger{ + Data: map[string]interface{}{ + "path": "", + }, + }, + } + s.IoHelper = &commandstest.FakeIoUtil{} + + Convey("should return error", func() { + err := lsCommand(commandLine) + So(err, ShouldNotBeNil) + }) + }) + + Convey("Path is not a directory", t, func() { + commandLine := &commandstest.FakeCommandLine{ + CliArgs: []string{"ls"}, + GlobalFlags: &commandstest.FakeFlagger{ + Data: map[string]interface{}{ + "path": "/var/lib/grafana/plugins", + }, + }, + } + GetStat = &commandstest.FakeIoUtil{ + FakeIsDirectory: false, + } + + Convey("should return error", func() { + err := lsCommand(commandLine) + So(err, ShouldNotBeNil) + }) + }) +} diff --git a/pkg/cmd/grafana-cli/commands/remove_command.go b/pkg/cmd/grafana-cli/commands/remove_command.go new file mode 100644 index 00000000000..86a3ccc9809 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/remove_command.go @@ -0,0 +1,35 @@ +package commands + +import ( + "errors" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" + m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + services "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" +) + +var getPluginss func(path string) []m.InstalledPlugin = services.GetLocalPlugins +var removePlugin func(pluginPath, id string) error = services.RemoveInstalledPlugin + +func removeCommand(c CommandLine) error { + pluginPath := c.GlobalString("path") + localPlugins := getPluginss(pluginPath) + + log.Info("remove!\n") + + plugin := c.Args().First() + log.Info("plugin: " + plugin + "\n") + if plugin == "" { + return errors.New("Missing which plugin parameter") + } + + log.Infof("plugins : \n%v\n", localPlugins) + + for _, p := range localPlugins { + log.Infof("is %s == %s ? %v", p.Id, c.Args().First(), p.Id == c.Args().First()) + if p.Id == c.Args().First() { + removePlugin(pluginPath, p.Id) + } + } + + return nil +} diff --git a/pkg/cmd/grafana-cli/commands/upgrade_all_command.go b/pkg/cmd/grafana-cli/commands/upgrade_all_command.go new file mode 100644 index 00000000000..04d6cea840a --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/upgrade_all_command.go @@ -0,0 +1,61 @@ +package commands + +import ( + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" + m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + services "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" + "github.com/hashicorp/go-version" +) + +func ShouldUpgrade(installed string, remote m.Plugin) bool { + installedVersion, err1 := version.NewVersion(installed) + + if err1 != nil { + return false + } + + for _, v := range remote.Versions { + remoteVersion, err2 := version.NewVersion(v.Version) + + if err2 == nil { + if installedVersion.LessThan(remoteVersion) { + return true + } + } + } + + return false +} + +func upgradeAllCommand(c CommandLine) error { + pluginDir := c.GlobalString("path") + + localPlugins := services.GetLocalPlugins(pluginDir) + + remotePlugins, err := services.ListAllPlugins() + + if err != nil { + return err + } + + pluginsToUpgrade := make([]m.InstalledPlugin, 0) + + for _, localPlugin := range localPlugins { + for _, remotePlugin := range remotePlugins.Plugins { + if localPlugin.Id == remotePlugin.Id { + if ShouldUpgrade(localPlugin.Info.Version, remotePlugin) { + pluginsToUpgrade = append(pluginsToUpgrade, localPlugin) + } + } + } + } + + for _, p := range pluginsToUpgrade { + log.Infof("lets upgrade %v \n", p) + + services.RemoveInstalledPlugin(pluginDir, p.Id) + InstallPlugin(p.Id, pluginDir, "") + } + + return nil +} diff --git a/pkg/cmd/grafana-cli/commands/upgrade_all_command_test.go b/pkg/cmd/grafana-cli/commands/upgrade_all_command_test.go new file mode 100644 index 00000000000..235b6a3930b --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/upgrade_all_command_test.go @@ -0,0 +1,46 @@ +package commands + +import ( + "testing" + + m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + . "github.com/smartystreets/goconvey/convey" +) + +func TestVersionComparsion(t *testing.T) { + Convey("Validate that version is outdated", t, func() { + versions := []m.Version{ + {Version: "1.1.1"}, + {Version: "2.0.0"}, + } + + shouldUpgrade := map[string]m.Plugin{ + "0.0.0": {Versions: versions}, + "1.0.0": {Versions: versions}, + } + + Convey("should return error", func() { + for k, v := range shouldUpgrade { + So(ShouldUpgrade(k, v), ShouldBeTrue) + } + }) + }) + + Convey("Validate that version is ok", t, func() { + versions := []m.Version{ + {Version: "1.1.1"}, + {Version: "2.0.0"}, + } + + shouldNotUpgrade := map[string]m.Plugin{ + "2.0.0": {Versions: versions}, + "6.0.0": {Versions: versions}, + } + + Convey("should return error", func() { + for k, v := range shouldNotUpgrade { + So(ShouldUpgrade(k, v), ShouldBeFalse) + } + }) + }) +} diff --git a/pkg/cmd/grafana-cli/commands/upgrade_command.go b/pkg/cmd/grafana-cli/commands/upgrade_command.go new file mode 100644 index 00000000000..df9581b3dc3 --- /dev/null +++ b/pkg/cmd/grafana-cli/commands/upgrade_command.go @@ -0,0 +1,9 @@ +package commands + +import ( + "errors" +) + +func upgradeCommand(c CommandLine) error { + return errors.New("Not yet Implemented") +} diff --git a/pkg/cmd/grafana-cli/log/log.go b/pkg/cmd/grafana-cli/log/log.go new file mode 100644 index 00000000000..c8222d60c81 --- /dev/null +++ b/pkg/cmd/grafana-cli/log/log.go @@ -0,0 +1,49 @@ +package log + +import ( + "fmt" +) + +var ( + debugmode = false +) + +func Debug(args ...interface{}) { + if debugmode { + fmt.Print(args...) + } +} + +func Debugf(fmtString string, args ...interface{}) { + if debugmode { + fmt.Printf(fmtString, args...) + } +} + +func Error(args ...interface{}) { + fmt.Print(args...) +} + +func Errorf(fmtString string, args ...interface{}) { + fmt.Printf(fmtString, args...) +} + +func Info(args ...interface{}) { + fmt.Print(args...) +} + +func Infof(fmtString string, args ...interface{}) { + fmt.Printf(fmtString, args...) +} + +func Warn(args ...interface{}) { + fmt.Print(args...) +} + +func Warnf(fmtString string, args ...interface{}) { + fmt.Printf(fmtString, args...) +} + +func SetDebug(value bool) { + debugmode = value +} diff --git a/pkg/cmd/grafana-cli/main.go b/pkg/cmd/grafana-cli/main.go new file mode 100644 index 00000000000..7023ad738bf --- /dev/null +++ b/pkg/cmd/grafana-cli/main.go @@ -0,0 +1,69 @@ +package main + +import ( + "fmt" + "github.com/codegangsta/cli" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/commands" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/version" + "os" + "runtime" +) + +func getGrafanaPluginPath() string { + os := runtime.GOOS + if os == "linux" { + return "/var/lib/grafana/plugins" + } else if os == "windows" { + return "C:\\opt\\grafana\\plugins" // :& + } + + return "tmp_do/" //based on your OS! +} + +func main() { + SetupLogging() + + app := cli.NewApp() + app.Name = "Grafana cli" + app.Author = "raintank" + app.Email = "https://github.com/grafana/grafana" + app.Version = version.Version + app.Flags = []cli.Flag{ + cli.StringFlag{ + Name: "path", + Usage: "path to the grafana installation", + Value: getGrafanaPluginPath(), + }, + cli.BoolFlag{ + Name: "debug, d", + Usage: "enable debug logging", + }, + } + + app.Commands = commands.Commands + app.CommandNotFound = cmdNotFound + + if err := app.Run(os.Args); err != nil { + log.Errorf("%v", err) + } +} + +func SetupLogging() { + for _, f := range os.Args { + if f == "-D" || f == "--debug" || f == "-debug" { + log.SetDebug(true) + } + } +} + +func cmdNotFound(c *cli.Context, command string) { + fmt.Printf( + "%s: '%s' is not a %s command. See '%s --help'.\n", + c.App.Name, + command, + c.App.Name, + os.Args[0], + ) + os.Exit(1) +} diff --git a/pkg/cmd/grafana-cli/models/model.go b/pkg/cmd/grafana-cli/models/model.go new file mode 100644 index 00000000000..3a39c5fbe65 --- /dev/null +++ b/pkg/cmd/grafana-cli/models/model.go @@ -0,0 +1,48 @@ +package models + +import ( + "os" +) + +type InstalledPlugin struct { + Id string `json:"id"` + Name string `json:"name"` + Type string `json:"type"` + + Info PluginInfo `json:"info"` + Dependency Dependency `json:"dependencies"` +} + +type Dependency struct { + GrafanaVersion string `json:"grafanaVersion"` + Plugins []Plugin `json:"plugins"` +} + +type PluginInfo struct { + Version string `json:"version"` + Updated string `json:"updated"` +} + +type Plugin struct { + Id string `json:"id"` + Category string `json:"category"` + Versions []Version `json:"versions"` +} + +type Version struct { + Commit string `json:"commit"` + Url string `json:"url"` + Version string `json:"version"` +} + +type PluginRepo struct { + Plugins []Plugin `json:"plugins"` + Version string `json:"version"` +} + +type IoUtil interface { + Stat(path string) (os.FileInfo, error) + RemoveAll(path string) error + ReadDir(path string) ([]os.FileInfo, error) + ReadFile(filename string) ([]byte, error) +} diff --git a/pkg/cmd/grafana-cli/services/io_util.go b/pkg/cmd/grafana-cli/services/io_util.go new file mode 100644 index 00000000000..c3be33af199 --- /dev/null +++ b/pkg/cmd/grafana-cli/services/io_util.go @@ -0,0 +1,28 @@ +package services + +import ( + m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + "io/ioutil" + "os" +) + +var IoUtil m.IoUtil = IoUtilImp{} + +type IoUtilImp struct { +} + +func (i IoUtilImp) Stat(path string) (os.FileInfo, error) { + return os.Stat(path) +} + +func (i IoUtilImp) RemoveAll(path string) error { + return os.RemoveAll(path) +} + +func (i IoUtilImp) ReadDir(path string) ([]os.FileInfo, error) { + return ioutil.ReadDir(path) +} + +func (i IoUtilImp) ReadFile(filename string) ([]byte, error) { + return ioutil.ReadFile(filename) +} diff --git a/pkg/cmd/grafana-cli/services/services.go b/pkg/cmd/grafana-cli/services/services.go new file mode 100644 index 00000000000..dba14d13d2d --- /dev/null +++ b/pkg/cmd/grafana-cli/services/services.go @@ -0,0 +1,70 @@ +package services + +import ( + "encoding/json" + "errors" + "github.com/franela/goreq" + m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + "path" +) + +var IoHelper m.IoUtil = IoUtilImp{} + +func ListAllPlugins() (m.PluginRepo, error) { + res, _ := goreq.Request{Uri: "https://raw.githubusercontent.com/grafana/grafana-plugin-repository/master/repo.json"}.Do() + + var resp m.PluginRepo + err := res.Body.FromJsonTo(&resp) + if err != nil { + return m.PluginRepo{}, errors.New("Could not load plugin data") + } + + return resp, nil +} + +func ReadPlugin(pluginDir, pluginName string) m.InstalledPlugin { + pluginDataPath := path.Join(pluginDir, pluginName, "plugin.json") + pluginData, _ := IoHelper.ReadFile(pluginDataPath) + + res := m.InstalledPlugin{} + json.Unmarshal(pluginData, &res) + + if res.Info.Version == "" { + res.Info.Version = "0.0.0" + } + + if res.Id == "" { + res.Id = res.Name + } + + return res +} + +func GetLocalPlugins(pluginDir string) []m.InstalledPlugin { + result := make([]m.InstalledPlugin, 0) + files, _ := IoHelper.ReadDir(pluginDir) + for _, f := range files { + res := ReadPlugin(pluginDir, f.Name()) + result = append(result, res) + } + + return result +} + +func RemoveInstalledPlugin(pluginPath, id string) error { + return IoHelper.RemoveAll(path.Join(pluginPath, id)) +} + +func GetPlugin(id string) (m.Plugin, error) { + resp, err := ListAllPlugins() + if err != nil { + } + + for _, i := range resp.Plugins { + if i.Id == id { + return i, nil + } + } + + return m.Plugin{}, errors.New("could not find plugin named \"" + id + "\"") +} diff --git a/pkg/cmd/grafana-cli/version/version.go b/pkg/cmd/grafana-cli/version/version.go new file mode 100644 index 00000000000..2a0eddf9859 --- /dev/null +++ b/pkg/cmd/grafana-cli/version/version.go @@ -0,0 +1,5 @@ +package version + +var ( + Version = "0.0.2" +) From 580cd510d56f629210e87a6a0f3db035c549bd4f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 14:18:17 +0100 Subject: [PATCH 063/444] ux(less): moved mixins out from bootstrap and removed unused mixins --- public/less/base/code.less | 4 +- public/less/base/forms.less | 2 +- public/less/base/type.less | 4 +- public/less/bootstrap/bootstrap.less | 3 - public/less/bootstrap/navs.less | 409 ------------------ public/less/bootstrap/responsive.less | 2 +- public/less/components/dropdown.less | 10 - public/less/grafana.less | 2 + public/less/{bootstrap => mixins}/mixins.less | 297 +++---------- 9 files changed, 61 insertions(+), 672 deletions(-) delete mode 100644 public/less/bootstrap/navs.less rename public/less/{bootstrap => mixins}/mixins.less (53%) diff --git a/public/less/base/code.less b/public/less/base/code.less index 9304855475a..ebbacc9d733 100644 --- a/public/less/base/code.less +++ b/public/less/base/code.less @@ -6,14 +6,12 @@ // Inline and block code styles code, pre { - #font > #family > .monospace; + .font-family-monospace(); font-size: @baseFontSize - 2; background-color: @codeTagBackground; color: @textColor; border: 1px solid darken(@codeTagBackground, 15%); padding: 2px; - - .border-radius(3px); } // Inline code diff --git a/public/less/base/forms.less b/public/less/base/forms.less index 4a84a70b3ab..46722a8e4e7 100644 --- a/public/less/base/forms.less +++ b/public/less/base/forms.less @@ -42,7 +42,7 @@ input, button, select, textarea { - #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here + .font-shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here } input, button, diff --git a/public/less/base/type.less b/public/less/base/type.less index 4c2839a5603..d00b10fb5d3 100644 --- a/public/less/base/type.less +++ b/public/less/base/type.less @@ -16,8 +16,8 @@ p { line-height: @baseLineHeight * 1.5; } - // Emphasis & misc + // ------------------------- // Ex: 14px base font * 85% = about 12px @@ -48,6 +48,7 @@ a.text-info:focus { color: darken(@infoText, 10%); } .text-success { color: @successText; } a.text-success:hover, a.text-success:focus { color: darken(@successText, 10%); } +a { cursor: pointer; } .text-left { text-align: left; } .text-right { text-align: right; } @@ -121,7 +122,6 @@ ol.inline { list-style: none; > li { display: inline-block; - .ie7-inline-block(); padding-left: 5px; padding-right: 5px; } diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less index 9bc162acaaa..9f29c528994 100644 --- a/public/less/bootstrap/bootstrap.less +++ b/public/less/bootstrap/bootstrap.less @@ -8,8 +8,6 @@ * Designed and built with all the love in the world by @mdo and @fat. */ -@import "mixins.less"; - // CSS Reset @import "reset.less"; @@ -19,7 +17,6 @@ // Components: common @import "close.less"; -@import "navs.less"; @import "labels-badges.less"; // Utility classes diff --git a/public/less/bootstrap/navs.less b/public/less/bootstrap/navs.less deleted file mode 100644 index 01cd805bde2..00000000000 --- a/public/less/bootstrap/navs.less +++ /dev/null @@ -1,409 +0,0 @@ -// -// Navs -// -------------------------------------------------- - - -// BASE CLASS -// ---------- - -.nav { - margin-left: 0; - margin-bottom: @baseLineHeight; - list-style: none; -} - -// Make links block level -.nav > li > a { - display: block; -} -.nav > li > a:hover, -.nav > li > a:focus { - text-decoration: none; - background-color: @grayLighter; -} - -// Prevent IE8 from misplacing imgs -// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 -.nav > li > a > img { - max-width: none; -} - -// Redeclare pull classes because of specifity -.nav > .pull-right { - float: right; -} - -// Nav headers (for dropdowns and lists) -.nav-header { - display: block; - padding: 3px 15px; - font-size: 11px; - font-weight: bold; - line-height: @baseLineHeight; - color: @grayLight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; -} -// Space them out when they follow another list item (link) -.nav li + .nav-header { - margin-top: 9px; -} - - - -// NAV LIST -// -------- - -.nav-list { - padding-left: 15px; - padding-right: 15px; - margin-bottom: 0; -} -.nav-list > li > a, -.nav-list .nav-header { - margin-left: -15px; - margin-right: -15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.nav-list > li > a { - padding: 3px 15px; -} -.nav-list > .active > a, -.nav-list > .active > a:hover, -.nav-list > .active > a:focus { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: @linkColor; -} -.nav-list [class^="icon-"], -.nav-list [class*=" icon-"] { - margin-right: 2px; -} -// Dividers (basically an hr) within the dropdown -.nav-list .divider { - .nav-divider(); -} - - - -// TABS AND PILLS -// ------------- - -// Common styles -.nav-tabs, -.nav-pills { - .clearfix(); -} -.nav-tabs > li, -.nav-pills > li { - float: left; -} -.nav-tabs > li > a, -.nav-pills > li > a { - padding-right: 12px; - padding-left: 12px; - margin-right: 2px; - line-height: 14px; // keeps the overall height an even number -} - -// TABS -// ---- - -// Give the tabs something to sit on -.nav-tabs { - border-bottom: 1px solid #ddd; -} -// Make the list-items overlay the bottom border -.nav-tabs > li { - margin-bottom: -1px; -} -// Actual tabs (as links) -.nav-tabs > li > a { - padding-top: 8px; - padding-bottom: 8px; - line-height: @baseLineHeight; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover, - &:focus { - border-color: @grayLighter @grayLighter #ddd; - } -} -// Active state, and it's :hover/:focus to override normal :hover/:focus -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover, -.nav-tabs > .active > a:focus { - color: @gray; - background-color: @bodyBackground; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} - - -// PILLS -// ----- - -// Links rendered as pills -.nav-pills > li > a { - padding-top: 8px; - padding-bottom: 8px; - margin-top: 2px; - margin-bottom: 2px; - .border-radius(5px); -} - -// Active state -.nav-pills > .active > a, -.nav-pills > .active > a:hover, -.nav-pills > .active > a:focus { - color: @white; - background-color: @linkColor; -} - - - -// STACKED NAV -// ----------- - -// Stacked tabs and pills -.nav-stacked > li { - float: none; -} -.nav-stacked > li > a { - margin-right: 0; // no need for the gap between nav items -} - -// Tabs -.nav-tabs.nav-stacked { - border-bottom: 0; -} -.nav-tabs.nav-stacked > li > a { - border: 1px solid #ddd; - .border-radius(0); -} -.nav-tabs.nav-stacked > li:first-child > a { - .border-top-radius(4px); -} -.nav-tabs.nav-stacked > li:last-child > a { - .border-bottom-radius(4px); -} -.nav-tabs.nav-stacked > li > a:hover, -.nav-tabs.nav-stacked > li > a:focus { - border-color: #ddd; - z-index: 2; -} - -// Pills -.nav-pills.nav-stacked > li > a { - margin-bottom: 3px; -} -.nav-pills.nav-stacked > li:last-child > a { - margin-bottom: 1px; // decrease margin to match sizing of stacked tabs -} - - - -// DROPDOWNS -// --------- - -.nav-tabs .dropdown-menu { - .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu -} -.nav-pills .dropdown-menu { - .border-radius(6px); // make rounded corners match the pills -} - -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: @linkColor; - border-bottom-color: @linkColor; - margin-top: 6px; -} -.nav .dropdown-toggle:hover .caret, -.nav .dropdown-toggle:focus .caret { - border-top-color: @linkColorHover; - border-bottom-color: @linkColorHover; -} -/* move down carets for tabs */ -.nav-tabs .dropdown-toggle .caret { - margin-top: 8px; -} - -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: @gray; - border-bottom-color: @gray; -} - -// Active:hover/:focus dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover, -.nav > .dropdown.active > a:focus { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover, -.nav > li.dropdown.open.active > a:focus { - color: @white; - background-color: @grayLight; - border-color: @grayLight; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret, -.nav li.dropdown.open a:focus .caret { - border-top-color: @white; - border-bottom-color: @white; - .opacity(100); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover, -.tabs-stacked .open > a:focus { - border-color: @grayLight; -} - - - -// TABBABLE -// -------- - - -// COMMON STYLES -// ------------- - -// Clear any floats -.tabbable { - .clearfix(); -} -.tab-content { - overflow: auto; // prevent content from running below tabs -} - -// Remove border on bottom, left, right -.tabs-below > .nav-tabs, -.tabs-right > .nav-tabs, -.tabs-left > .nav-tabs { - border-bottom: 0; -} - -// Show/hide tabbable areas -.tab-content > .tab-pane, -.pill-content > .pill-pane { - display: none; -} -.tab-content > .active, -.pill-content > .active { - display: block; -} - - -// BOTTOM -// ------ - -.tabs-below > .nav-tabs { - border-top: 1px solid #ddd; -} -.tabs-below > .nav-tabs > li { - margin-top: -1px; - margin-bottom: 0; -} -.tabs-below > .nav-tabs > li > a { - .border-radius(0 0 4px 4px); - &:hover, - &:focus { - border-bottom-color: transparent; - border-top-color: #ddd; - } -} -.tabs-below > .nav-tabs > .active > a, -.tabs-below > .nav-tabs > .active > a:hover, -.tabs-below > .nav-tabs > .active > a:focus { - border-color: transparent #ddd #ddd #ddd; -} - -// LEFT & RIGHT -// ------------ - -// Common styles -.tabs-left > .nav-tabs > li, -.tabs-right > .nav-tabs > li { - float: none; -} -.tabs-left > .nav-tabs > li > a, -.tabs-right > .nav-tabs > li > a { - min-width: 74px; - margin-right: 0; - margin-bottom: 3px; -} - -// Tabs on the left -.tabs-left > .nav-tabs { - float: left; - margin-right: 19px; - border-right: 1px solid #ddd; -} -.tabs-left > .nav-tabs > li > a { - margin-right: -1px; - .border-radius(4px 0 0 4px); -} -.tabs-left > .nav-tabs > li > a:hover, -.tabs-left > .nav-tabs > li > a:focus { - border-color: @grayLighter #ddd @grayLighter @grayLighter; -} -.tabs-left > .nav-tabs .active > a, -.tabs-left > .nav-tabs .active > a:hover, -.tabs-left > .nav-tabs .active > a:focus { - border-color: #ddd transparent #ddd #ddd; - *border-right-color: @white; -} - -// Tabs on the right -.tabs-right > .nav-tabs { - float: right; - margin-left: 19px; - border-left: 1px solid #ddd; -} -.tabs-right > .nav-tabs > li > a { - margin-left: -1px; - .border-radius(0 4px 4px 0); -} -.tabs-right > .nav-tabs > li > a:hover, -.tabs-right > .nav-tabs > li > a:focus { - border-color: @grayLighter @grayLighter @grayLighter #ddd; -} -.tabs-right > .nav-tabs .active > a, -.tabs-right > .nav-tabs .active > a:hover, -.tabs-right > .nav-tabs .active > a:focus { - border-color: #ddd #ddd #ddd transparent; - *border-left-color: @white; -} - - - -// DISABLED STATES -// --------------- - -// Gray out text -.nav > .disabled > a { - color: @grayLight; -} -// Nuke hover/focus effects -.nav > .disabled > a:hover, -.nav > .disabled > a:focus { - text-decoration: none; - background-color: transparent; - cursor: default; -} diff --git a/public/less/bootstrap/responsive.less b/public/less/bootstrap/responsive.less index 9fe486aa5b6..64788eaf1b9 100644 --- a/public/less/bootstrap/responsive.less +++ b/public/less/bootstrap/responsive.less @@ -18,7 +18,7 @@ // ------------------------- // Required since we compile the responsive stuff separately -@import "mixins.less"; +@import "../mixins/mixins.less"; @import "responsive-utilities.less"; @import "responsive-1200px-min.less"; @import "responsive-768px-979px.less"; diff --git a/public/less/components/dropdown.less b/public/less/components/dropdown.less index d7c46d92afa..94944d38168 100644 --- a/public/less/components/dropdown.less +++ b/public/less/components/dropdown.less @@ -59,11 +59,6 @@ left: auto; } - // Dividers (basically an hr) within the dropdown - .divider { - .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); - } - // Links within the dropdown menu > li > a { display: block; @@ -117,17 +112,12 @@ text-decoration: none; background-color: transparent; background-image: none; // Remove CSS gradient - .reset-filter(); cursor: default; } // Open state for the dropdown // --------------------------- .open { - // IE7's z-index only goes to the nearest positioned ancestor, which would - // make the menu appear below buttons that appeared later on the page - *z-index: @zindexDropdown; - & > .dropdown-menu { display: block; } diff --git a/public/less/grafana.less b/public/less/grafana.less index 76b199224f9..ac069063239 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -12,6 +12,7 @@ @import "./utils/angular.less"; // MIXINS +@import "./mixins/mixins.less"; @import "./mixins/buttons.less"; // LAYOUTS @@ -54,6 +55,7 @@ @import "./components/infobox.less"; @import "./components/shortcuts.less"; @import "./components/query_editor.less"; +@import "./components/navs.less"; // PAGES @import "./pages/login.less"; diff --git a/public/less/bootstrap/mixins.less b/public/less/mixins/mixins.less similarity index 53% rename from public/less/bootstrap/mixins.less rename to public/less/mixins/mixins.less index d7f16cfc246..8fe81221af9 100644 --- a/public/less/bootstrap/mixins.less +++ b/public/less/mixins/mixins.less @@ -42,37 +42,13 @@ margin-right: auto; } -// IE7 inline-block -// ---------------- -.ie7-inline-block() { - *display: inline; /* IE7 inline-block hack */ - *zoom: 1; -} - -// IE7 likes to collapse whitespace on either side of the inline-block elements. -// Ems because we're attempting to match the width of a space character. Left -// version is for form buttons, which typically come after other elements, and -// right version is for icons, which come before. Applying both is ok, but it will -// mean that space between those elements will be .6em (~2 space characters) in IE7, -// instead of the 1 space in other browsers. -.ie7-restore-left-whitespace() { - *margin-left: .3em; - - &:first-child { - *margin-left: 0; - } -} - -.ie7-restore-right-whitespace() { - *margin-right: .3em; -} - // Sizing shortcuts // ------------------------- .size(@height, @width) { width: @width; height: @height; } + .square(@size) { .size(@size, @size); } @@ -115,35 +91,31 @@ // FONTS // -------------------------------------------------- -#font { - #family { - .serif() { - font-family: @serifFontFamily; - } - .sans-serif() { - font-family: @sansFontFamily; - } - .monospace() { - font-family: @monoFontFamily; - } - } - .shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; - } - .serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .serif; - #font > .shorthand(@size, @weight, @lineHeight); - } - .sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .sans-serif; - #font > .shorthand(@size, @weight, @lineHeight); - } - .monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - #font > #family > .monospace; - #font > .shorthand(@size, @weight, @lineHeight); - } +.font-family-serif() { + font-family: @serifFontFamily; +} +.font-family-sans-serif() { + font-family: @sansFontFamily; +} +.font-family-monospace() { + font-family: @monoFontFamily; +} +.font-shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + font-size: @size; + font-weight: @weight; + line-height: @lineHeight; +} +.font-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + .font-family-serif(); + .font-shorthand(@size, @weight, @lineHeight); +} +.font-sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + .font-family-sans-serif(); + .font-shorthand(@size, @weight, @lineHeight); +} +.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { + .font-family-monospace; + .font-shorthand(@size, @weight, @lineHeight); } @@ -159,65 +131,26 @@ } - -// Mixin for form field states -.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { - // Set the text color - .control-label, - .help-block, - .help-inline { - color: @textColor; - } - // Style inputs accordingly - .checkbox, - .radio, - input, - select, - textarea { - color: @textColor; - } - input, - select, - textarea { - border-color: @borderColor; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - &:focus { - border-color: darken(@borderColor, 10%); - @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@borderColor, 20%); - .box-shadow(@shadow); - } - } - // Give a small background color for input-prepend/-append - .input-prepend .add-on, - .input-append .add-on { - color: @textColor; - background-color: @backgroundColor; - border-color: @textColor; - } -} - - - // CSS3 PROPERTIES // -------------------------------------------------- // Border Radius .border-radius(@radius) { -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; + -moz-border-radius: @radius; + border-radius: @radius; } // Single Corner Border Radius .border-top-left-radius(@radius) { -webkit-border-top-left-radius: @radius; - -moz-border-radius-topleft: @radius; - border-top-left-radius: @radius; + -moz-border-radius-topleft: @radius; + border-top-left-radius: @radius; } .border-top-right-radius(@radius) { -webkit-border-top-right-radius: @radius; - -moz-border-radius-topright: @radius; - border-top-right-radius: @radius; + -moz-border-radius-topright: @radius; + border-top-right-radius: @radius; } .border-bottom-right-radius(@radius) { -webkit-border-bottom-right-radius: @radius; @@ -250,110 +183,66 @@ // Drop shadows .box-shadow(@shadow) { - -webkit-box-shadow: @shadow; - -moz-box-shadow: @shadow; - box-shadow: @shadow; + box-shadow: @shadow; } // Transitions .transition(@transition) { - -webkit-transition: @transition; - -moz-transition: @transition; - -o-transition: @transition; - transition: @transition; + transition: @transition; } + .transition-delay(@transition-delay) { - -webkit-transition-delay: @transition-delay; - -moz-transition-delay: @transition-delay; - -o-transition-delay: @transition-delay; - transition-delay: @transition-delay; + transition-delay: @transition-delay; } + .transition-duration(@transition-duration) { - -webkit-transition-duration: @transition-duration; - -moz-transition-duration: @transition-duration; - -o-transition-duration: @transition-duration; - transition-duration: @transition-duration; + transition-duration: @transition-duration; } // Transformations .rotate(@degrees) { - -webkit-transform: rotate(@degrees); - -moz-transform: rotate(@degrees); - -ms-transform: rotate(@degrees); - -o-transform: rotate(@degrees); - transform: rotate(@degrees); + transform: rotate(@degrees); } + .scale(@ratio) { - -webkit-transform: scale(@ratio); - -moz-transform: scale(@ratio); - -ms-transform: scale(@ratio); - -o-transform: scale(@ratio); - transform: scale(@ratio); + transform: scale(@ratio); } + .translate(@x, @y) { - -webkit-transform: translate(@x, @y); - -moz-transform: translate(@x, @y); - -ms-transform: translate(@x, @y); - -o-transform: translate(@x, @y); - transform: translate(@x, @y); + transform: translate(@x, @y); } + .skew(@x, @y) { - -webkit-transform: skew(@x, @y); - -moz-transform: skew(@x, @y); - -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885 - -o-transform: skew(@x, @y); - transform: skew(@x, @y); + transform: skew(@x, @y); -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 } + .translate3d(@x, @y, @z) { - -webkit-transform: translate3d(@x, @y, @z); - -moz-transform: translate3d(@x, @y, @z); - -o-transform: translate3d(@x, @y, @z); - transform: translate3d(@x, @y, @z); + transform: translate3d(@x, @y, @z); } -// Backface visibility -// Prevent browsers from flickering when using CSS 3D transforms. -// Default value is `visible`, but can be changed to `hidden -// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples .backface-visibility(@visibility){ - -webkit-backface-visibility: @visibility; - -moz-backface-visibility: @visibility; - backface-visibility: @visibility; + backface-visibility: @visibility; } - -// Background clipping // Heads up: FF 3.6 and under need "padding" instead of "padding-box" .background-clip(@clip) { - -webkit-background-clip: @clip; - -moz-background-clip: @clip; - background-clip: @clip; + background-clip: @clip; } // Background sizing .background-size(@size) { - -webkit-background-size: @size; - -moz-background-size: @size; - -o-background-size: @size; - background-size: @size; + background-size: @size; } - // Box sizing .box-sizing(@boxmodel) { - -webkit-box-sizing: @boxmodel; - -moz-box-sizing: @boxmodel; - box-sizing: @boxmodel; + box-sizing: @boxmodel; } // User select // For selecting text on the page .user-select(@select) { - -webkit-user-select: @select; - -moz-user-select: @select; - -ms-user-select: @select; - -o-user-select: @select; - user-select: @select; + user-select: @select; } // Resize anything @@ -385,11 +274,8 @@ // Opacity .opacity(@opacity) { opacity: @opacity / 100; - filter: ~"alpha(opacity=@{opacity})"; } - - // BACKGROUNDS // -------------------------------------------------- @@ -417,53 +303,30 @@ #gradient { .horizontal(@startColor: #555, @endColor: #333) { background-color: @endColor; - background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@startColor),argb(@endColor))); // IE9 and down } .vertical(@startColor: #555, @endColor: #333) { background-color: mix(@startColor, @endColor, 60%); - background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+ - background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 background-repeat: repeat-x; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down } .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { background-color: @endColor; background-repeat: repeat-x; - background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ - background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ - background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 } .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(left, @startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { background-color: mix(@midColor, @endColor, 80%); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); - background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); - background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); background-repeat: no-repeat; - filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor))); // IE9 and down, gets no color-stop at all for proper fallback } + .radial(@innerColor: #555, @outerColor: #333) { background-color: @outerColor; background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); @@ -472,51 +335,12 @@ background-image: -o-radial-gradient(circle, @innerColor, @outerColor); background-repeat: no-repeat; } + .striped(@color: #555, @angle: 45deg) { background-color: @color; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, rgba(255,255,255,.15)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255,255,255,.15)), color-stop(.75, rgba(255,255,255,.15)), color-stop(.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); } } -// Reset filters for IE -.reset-filter() { - filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); -} - - - -// COMPONENT MIXINS -// -------------------------------------------------- - -// Horizontal dividers -// ------------------------- -// Dividers (basically an hr) within dropdowns and nav lists -.nav-divider(@top: #e5e5e5, @bottom: @white) { - // IE7 needs a set width since we gave a height. Restricting just - // to IE7 to keep the 1px left/right space in other browsers. - // It is unclear where IE is getting the extra space that we need - // to negative-margin away, but so it goes. - *width: 100%; - height: 1px; - margin: ((@baseLineHeight / 2) - 1) 1px; // 8px 1px - *margin: -5px 0 5px; - overflow: hidden; - background-color: @top; - border-bottom: 1px solid @bottom; -} - -// Navbar vertical align -// ------------------------- -// Vertically center elements in the navbar. -// Example: an element has a height of 30px, so write out `.navbarVerticalAlign(30px);` to calculate the appropriate top margin. -.navbarVerticalAlign(@elementHeight) { - margin-top: (@navbarHeight - @elementHeight) / 2; -} - - // Grid System // ----------- @@ -528,19 +352,6 @@ .clearfix(); } -// Table columns -.tableColumns(@columnSpan: 1) { - float: none; // undo default grid column styles - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells - margin-left: 0; // undo default grid column styles -} - -// Make a Grid -// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior -.makeRow() { - margin-left: @gridGutterWidth * -1; - .clearfix(); -} .makeColumn(@columns: 1, @offset: 0) { float: left; margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); From 5adac86b43eb57b80f891593d5b9cdde53f02cc4 Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 14:19:59 +0100 Subject: [PATCH 064/444] fix(cli): remove dev text values --- pkg/cmd/grafana-cli/commands/commands.go | 4 ++-- pkg/cmd/grafana-cli/commands/install_command.go | 5 ++--- pkg/cmd/grafana-cli/main.go | 14 +++++++------- 3 files changed, 11 insertions(+), 12 deletions(-) diff --git a/pkg/cmd/grafana-cli/commands/commands.go b/pkg/cmd/grafana-cli/commands/commands.go index 1f85366b18d..7854e45b77a 100644 --- a/pkg/cmd/grafana-cli/commands/commands.go +++ b/pkg/cmd/grafana-cli/commands/commands.go @@ -22,7 +22,7 @@ func runCommand(command func(commandLine CommandLine) error) func(context *cli.C var Commands = []cli.Command{ { Name: "install", - Usage: "installs stuff", + Usage: "installs a plugin", Action: runCommand(installCommand), }, { Name: "list-remote", @@ -42,7 +42,7 @@ var Commands = []cli.Command{ Action: runCommand(lsCommand), }, { Name: "remove", - Usage: "removes stuff", + Usage: "removes installed plugin", Action: runCommand(removeCommand), }, } diff --git a/pkg/cmd/grafana-cli/commands/install_command.go b/pkg/cmd/grafana-cli/commands/install_command.go index f8c2452d1eb..f3de4cfb5d6 100644 --- a/pkg/cmd/grafana-cli/commands/install_command.go +++ b/pkg/cmd/grafana-cli/commands/install_command.go @@ -77,10 +77,9 @@ func InstallPlugin(pluginName, pluginFolder, version string) error { res := services.ReadPlugin(pluginFolder, pluginName) for _, v := range res.Dependency.Plugins { - log.Infof("Depends on %s install!\n", v.Id) + log.Infof("Installing Dependency: %s\n", v.Id) - //Todo: uncomment this code once the repo is more correct. - //InstallPlugin(v.Id, pluginFolder, "") + InstallPlugin(v.Id, pluginFolder, "") } return err diff --git a/pkg/cmd/grafana-cli/main.go b/pkg/cmd/grafana-cli/main.go index 7023ad738bf..a04d1511397 100644 --- a/pkg/cmd/grafana-cli/main.go +++ b/pkg/cmd/grafana-cli/main.go @@ -11,14 +11,14 @@ import ( ) func getGrafanaPluginPath() string { - os := runtime.GOOS - if os == "linux" { - return "/var/lib/grafana/plugins" - } else if os == "windows" { - return "C:\\opt\\grafana\\plugins" // :& - } + //TODO: try to get path from os:env GF_PLUGIN_FOLDER - return "tmp_do/" //based on your OS! + os := runtime.GOOS + if os == "windows" { + return "C:\\opt\\grafana\\plugins" + } else { + return "/var/lib/grafana/plugins" + } } func main() { From 1176b68c6a898001770e8b6af3634aaf354812bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 14:24:51 +0100 Subject: [PATCH 065/444] ux(less): moved and consolidated remaining bootstrap stuff, now only grid system left --- public/less/base/normalize.less | 425 +++++++++++++++++++++++ public/less/bootstrap/bootstrap.less | 23 -- public/less/bootstrap/close.less | 32 -- public/less/bootstrap/forms.less | 1 - public/less/bootstrap/labels-badges.less | 84 ----- public/less/bootstrap/reset.less | 216 ------------ public/less/bootstrap/utilities.less | 30 -- public/less/components/navs.less | 193 ++++++++++ public/less/components/tags.less | 15 + public/less/grafana.dark.less | 1 - public/less/grafana.less | 2 + public/less/grafana.light.less | 1 - public/less/utils/utils.less | 60 ++++ 13 files changed, 695 insertions(+), 388 deletions(-) create mode 100644 public/less/base/normalize.less delete mode 100644 public/less/bootstrap/bootstrap.less delete mode 100644 public/less/bootstrap/close.less delete mode 100644 public/less/bootstrap/forms.less delete mode 100644 public/less/bootstrap/labels-badges.less delete mode 100644 public/less/bootstrap/reset.less delete mode 100644 public/less/bootstrap/utilities.less create mode 100644 public/less/components/navs.less diff --git a/public/less/base/normalize.less b/public/less/base/normalize.less new file mode 100644 index 00000000000..93dd4521727 --- /dev/null +++ b/public/less/base/normalize.less @@ -0,0 +1,425 @@ +/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS and IE text size adjust after device orientation change, +// without disabling user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 +// and Firefox. +// Correct `block` display not defined for `main` in IE 11. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} + +// +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// + +audio, +canvas, +progress, +video { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. +// + +[hidden], +template { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background color from active links in IE 10. +// + +a { + background-color: transparent; +} + +// +// Improve readability of focused elements when they are also in an +// active/hover state. +// + +a { + &:active { + outline: 0; + } + &:hover { + outline: 0; + } +} + +// Text-level semantics +// ========================================================================== + +// +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + background: #ff0; + color: #000; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9/10. +// + +img { + border: 0; +} + +// +// Correct overflow not hidden in IE 9/10/11. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari. +// + +figure { + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + box-sizing: content-box; + height: 0; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + +// +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// + +button, +input, +optgroup, +select, +textarea { + color: inherit; // 1 + font: inherit; // 2 + margin: 0; // 3 +} + +// +// Address `overflow` set to `hidden` in IE 8/9/10/11. +// + +button { + overflow: visible; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// Address `appearance` set to `searchfield` in Safari and Chrome. +// + +input[type="search"] { + -webkit-appearance: textfield; +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9/10/11. +// + +textarea { + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; +} + +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/public/less/bootstrap/bootstrap.less b/public/less/bootstrap/bootstrap.less deleted file mode 100644 index 9f29c528994..00000000000 --- a/public/less/bootstrap/bootstrap.less +++ /dev/null @@ -1,23 +0,0 @@ -/*! - * Bootstrap v2.3.2 - * - * Copyright 2013 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world by @mdo and @fat. - */ - -// CSS Reset -@import "reset.less"; - -// Grid system and page structure -@import "grid.less"; - -// Components: common -@import "close.less"; - -@import "labels-badges.less"; - -// Utility classes -@import "utilities.less"; // Has to be last to override when necessary diff --git a/public/less/bootstrap/close.less b/public/less/bootstrap/close.less deleted file mode 100644 index 4c626bda6cc..00000000000 --- a/public/less/bootstrap/close.less +++ /dev/null @@ -1,32 +0,0 @@ -// -// Close icons -// -------------------------------------------------- - - -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: @baseLineHeight; - color: @black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover, - &:focus { - color: @black; - text-decoration: none; - cursor: pointer; - .opacity(40); - } -} - -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -button.close { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; -} \ No newline at end of file diff --git a/public/less/bootstrap/forms.less b/public/less/bootstrap/forms.less deleted file mode 100644 index 8b137891791..00000000000 --- a/public/less/bootstrap/forms.less +++ /dev/null @@ -1 +0,0 @@ - diff --git a/public/less/bootstrap/labels-badges.less b/public/less/bootstrap/labels-badges.less deleted file mode 100644 index bc321fe5c18..00000000000 --- a/public/less/bootstrap/labels-badges.less +++ /dev/null @@ -1,84 +0,0 @@ -// -// Labels and badges -// -------------------------------------------------- - - -// Base classes -.label, -.badge { - display: inline-block; - padding: 2px 4px; - font-size: @baseFontSize * .846; - font-weight: bold; - line-height: 14px; // ensure proper line-height if floated - color: @white; - vertical-align: baseline; - white-space: nowrap; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: @grayLight; -} -// Set unique padding and border-radii -.label { - .border-radius(3px); -} -.badge { - padding-left: 9px; - padding-right: 9px; - .border-radius(9px); -} - -// Empty labels/badges collapse -.label, -.badge { - &:empty { - display: none; - } -} - -// Hover/focus state, but only for links -a { - &.label:hover, - &.label:focus, - &.badge:hover, - &.badge:focus { - color: @white; - text-decoration: none; - cursor: pointer; - } -} - -// Colors -// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) -.label, -.badge { - // Important (red) - &-important { background-color: @errorText; } - &-important[href] { background-color: darken(@errorText, 10%); } - // Warnings (orange) - &-warning { background-color: @orange; } - &-warning[href] { background-color: darken(@orange, 10%); } - // Success (green) - &-success { background-color: @successText; } - &-success[href] { background-color: darken(@successText, 10%); } - // Info (turquoise) - &-info { background-color: @infoText; } - &-info[href] { background-color: darken(@infoText, 10%); } - // Inverse (black) - &-inverse { background-color: @grayDark; } - &-inverse[href] { background-color: darken(@grayDark, 10%); } -} - -// Quick fix for labels/badges in buttons -.btn { - .label, - .badge { - position: relative; - top: -1px; - } -} -.btn-mini { - .label, - .badge { - top: 0; - } -} diff --git a/public/less/bootstrap/reset.less b/public/less/bootstrap/reset.less deleted file mode 100644 index 4806bd5e59d..00000000000 --- a/public/less/bootstrap/reset.less +++ /dev/null @@ -1,216 +0,0 @@ -// -// Reset CSS -// Adapted from http://github.com/necolas/normalize.css -// -------------------------------------------------- - - -// Display in IE6-9 and FF3 -// ------------------------- - -article, -aside, -details, -figcaption, -figure, -footer, -header, -hgroup, -nav, -section { - display: block; -} - -// Display block in IE6-9 and FF3 -// ------------------------- - -audio, -canvas, -video { - display: inline-block; - *display: inline; - *zoom: 1; -} - -// Prevents modern browsers from displaying 'audio' without controls -// ------------------------- - -audio:not([controls]) { - display: none; -} - -// Base settings -// ------------------------- - -html { - font-size: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; -} -// Focus states -a:focus { - .tab-focus(); -} -// Hover & Active -a:hover, -a:active { - outline: 0; -} - -// Prevents sub and sup affecting line-height in all browsers -// ------------------------- - -sub, -sup { - position: relative; - font-size: 75%; - line-height: 0; - vertical-align: baseline; -} -sup { - top: -0.5em; -} -sub { - bottom: -0.25em; -} - -// Img border in a's and image quality -// ------------------------- - -img { - /* Responsive images (ensure images don't scale beyond their parents) */ - max-width: 100%; /* Part 1: Set a maxium relative to the parent */ - width: auto\9; /* IE7-8 need help adjusting responsive images */ - height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ - - vertical-align: middle; - border: 0; - -ms-interpolation-mode: bicubic; -} - -// Prevent max-width from affecting Google Maps -#map_canvas img, -.google-maps img { - max-width: none; -} - -// Forms -// ------------------------- - -// Font size in all browsers, margin changes, misc consistency -button, -input, -select, -textarea { - margin: 0; - font-size: 100%; - vertical-align: middle; -} -button, -input { - *overflow: visible; // Inner spacing ie IE6/7 - line-height: normal; // FF3/4 have !important on line-height in UA stylesheet -} -button::-moz-focus-inner, -input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 - padding: 0; - border: 0; -} -button, -html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS. - cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. -} -label, -select, -button, -input[type="button"], -input[type="reset"], -input[type="submit"], -input[type="radio"], -input[type="checkbox"] { - cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. -} -input[type="search"] { // Appearance in Safari/Chrome - .box-sizing(content-box); - -webkit-appearance: textfield; -} -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button { - -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 -} -textarea { - overflow: auto; // Remove vertical scrollbar in IE6-9 - vertical-align: top; // Readability and alignment cross-browser -} - - -// Printing -// ------------------------- -// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css - -@media print { - - * { - text-shadow: none !important; - color: #000 !important; // Black prints faster: h5bp.com/s - background: transparent !important; - box-shadow: none !important; - } - - a, - a:visited { - text-decoration: underline; - } - - a[href]:after { - content: " (" attr(href) ")"; - } - - abbr[title]:after { - content: " (" attr(title) ")"; - } - - // Don't show links for images, or javascript/internal links - .ir a:after, - a[href^="javascript:"]:after, - a[href^="#"]:after { - content: ""; - } - - pre, - blockquote { - border: 1px solid #999; - page-break-inside: avoid; - } - - thead { - display: table-header-group; // h5bp.com/t - } - - tr, - img { - page-break-inside: avoid; - } - - img { - max-width: 100% !important; - } - - @page { - margin: 0.5cm; - } - - p, - h2, - h3 { - orphans: 3; - widows: 3; - } - - h2, - h3 { - page-break-after: avoid; - } -} diff --git a/public/less/bootstrap/utilities.less b/public/less/bootstrap/utilities.less deleted file mode 100644 index 314b4ffdb45..00000000000 --- a/public/less/bootstrap/utilities.less +++ /dev/null @@ -1,30 +0,0 @@ -// -// Utility classes -// -------------------------------------------------- - - -// Quick floats -.pull-right { - float: right; -} -.pull-left { - float: left; -} - -// Toggling content -.hide { - display: none; -} -.show { - display: block; -} - -// Visibility -.invisible { - visibility: hidden; -} - -// For Affix plugin -.affix { - position: fixed; -} diff --git a/public/less/components/navs.less b/public/less/components/navs.less new file mode 100644 index 00000000000..b597d3f7073 --- /dev/null +++ b/public/less/components/navs.less @@ -0,0 +1,193 @@ +// +// Navs +// -------------------------------------------------- + + +// BASE CLASS +// ---------- + +.nav { + margin-left: 0; + margin-bottom: @baseLineHeight; + list-style: none; +} + +// Make links block level +.nav > li > a { + display: block; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: @grayLighter; +} + +// Redeclare pull classes because of specifity +.nav > .pull-right { + float: right; +} + +// Nav headers (for dropdowns and lists) +.nav-header { + display: block; + padding: 3px 15px; + font-size: 11px; + font-weight: bold; + line-height: @baseLineHeight; + color: @grayLight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + text-transform: uppercase; +} +// Space them out when they follow another list item (link) +.nav li + .nav-header { + margin-top: 9px; +} + + + +// NAV LIST +// -------- + +.nav-list { + padding-left: 15px; + padding-right: 15px; + margin-bottom: 0; +} +.nav-list > li > a, +.nav-list .nav-header { + margin-left: -15px; + margin-right: -15px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.nav-list > li > a { + padding: 3px 15px; +} +.nav-list > .active > a, +.nav-list > .active > a:hover, +.nav-list > .active > a:focus { + color: @white; + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + background-color: @linkColor; +} +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { + margin-right: 2px; +} + +// TABS AND PILLS +// ------------- + +// Common styles +.nav-tabs, +.nav-pills { + .clearfix(); +} +.nav-tabs > li, +.nav-pills > li { + float: left; +} +.nav-tabs > li > a, +.nav-pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; // keeps the overall height an even number +} + +// TABS +// ---- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid #ddd; +} +// Make the list-items overlay the bottom border +.nav-tabs > li { + margin-bottom: -1px; +} +// Actual tabs (as links) +.nav-tabs > li > a { + padding-top: 8px; + padding-bottom: 8px; + line-height: @baseLineHeight; + border: 1px solid transparent; + .border-radius(4px 4px 0 0); + &:hover, + &:focus { + border-color: @grayLighter @grayLighter #ddd; + } +} +// Active state, and it's :hover/:focus to override normal :hover/:focus +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover, +.nav-tabs > .active > a:focus { + color: @gray; + background-color: @bodyBackground; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + + +// Default dropdown links +// ------------------------- +// Make carets use linkColor to start +.nav .dropdown-toggle .caret { + border-top-color: @linkColor; + border-bottom-color: @linkColor; + margin-top: 6px; +} +.nav .dropdown-toggle:hover .caret, +.nav .dropdown-toggle:focus .caret { + border-top-color: @linkColorHover; + border-bottom-color: @linkColorHover; +} +/* move down carets for tabs */ +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} + +// Active dropdown links +// ------------------------- +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: @gray; + border-bottom-color: @gray; +} + +// Active:hover/:focus dropdown links +// ------------------------- +.nav > .dropdown.active > a:hover, +.nav > .dropdown.active > a:focus { + cursor: pointer; +} + +// Open dropdowns +// ------------------------- +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > li.dropdown.open.active > a:hover, +.nav > li.dropdown.open.active > a:focus { + color: @white; + background-color: @grayLight; + border-color: @grayLight; +} +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret, +.nav li.dropdown.open a:focus .caret { + border-top-color: @white; + border-bottom-color: @white; + .opacity(100); +} + +// Dropdowns in stacked tabs +.tabs-stacked .open > a:hover, +.tabs-stacked .open > a:focus { + border-color: @grayLight; +} + + diff --git a/public/less/components/tags.less b/public/less/components/tags.less index b19eab1244a..7b2af7ef30c 100644 --- a/public/less/components/tags.less +++ b/public/less/components/tags.less @@ -1,3 +1,18 @@ +// Base classes +.label, +.badge { + display: inline-block; + padding: 2px 4px; + font-size: @baseFontSize * .846; + font-weight: bold; + line-height: 14px; // ensure proper line-height if floated + color: @white; + vertical-align: baseline; + white-space: nowrap; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + background-color: @grayLight; +} + // Labels & Badges .label-tag { diff --git a/public/less/grafana.dark.less b/public/less/grafana.dark.less index e4c834c6aa8..e922d47f91c 100644 --- a/public/less/grafana.dark.less +++ b/public/less/grafana.dark.less @@ -1,3 +1,2 @@ @import "variables.dark.less"; -@import "bootstrap/bootstrap.less"; @import "grafana.less"; diff --git a/public/less/grafana.less b/public/less/grafana.less index ac069063239..5bbc9c08b74 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -1,5 +1,6 @@ // BASE +@import "./base/normalize.less"; @import "./base/base.less"; @import "./base/type.less"; @import "./base/forms.less"; @@ -16,6 +17,7 @@ @import "./mixins/buttons.less"; // LAYOUTS +@import "./bootstrap/grid.less"; @import "./layout/page.less"; // COMPONENTS diff --git a/public/less/grafana.light.less b/public/less/grafana.light.less index 68a8f13dece..57824198630 100644 --- a/public/less/grafana.light.less +++ b/public/less/grafana.light.less @@ -1,3 +1,2 @@ @import "variables.light.less"; -@import "bootstrap/bootstrap.less"; @import "grafana.less"; diff --git a/public/less/utils/utils.less b/public/less/utils/utils.less index 3e145a2bc58..d493bbdebdf 100644 --- a/public/less/utils/utils.less +++ b/public/less/utils/utils.less @@ -2,3 +2,63 @@ color: @orange; } +// Close icons +// -------------------------------------------------- +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: @baseLineHeight; + color: @black; + text-shadow: 0 1px 0 rgba(255,255,255,1); + .opacity(20); + &:hover, + &:focus { + color: @black; + text-decoration: none; + cursor: pointer; + .opacity(40); + } +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} + +// +// Utility classes +// -------------------------------------------------- + + +// Quick floats +.pull-right { + float: right; +} +.pull-left { + float: left; +} + +// Toggling content +.hide { + display: none; +} +.show { + display: block; +} + +// Visibility +.invisible { + visibility: hidden; +} + +// For Affix plugin +.affix { + position: fixed; +} From c961d6218df1d92468322f749cfeaeb6a1697f08 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 14:43:33 +0100 Subject: [PATCH 066/444] ux(less): removed normalize --- public/less/base/forms.less | 1 - public/less/components/buttons.less | 1 - public/less/components/navs.less | 7 +++++++ public/less/mixins/mixins.less | 7 ------- public/less/pages/login.less | 4 ---- public/vendor/css/normalize.min.css | 1 - public/vendor/modernizr-2.6.1.js | 4 ---- tasks/options/concat.js | 2 -- 8 files changed, 7 insertions(+), 20 deletions(-) delete mode 100644 public/vendor/css/normalize.min.css delete mode 100644 public/vendor/modernizr-2.6.1.js diff --git a/public/less/base/forms.less b/public/less/base/forms.less index 46722a8e4e7..1e4e6b74c26 100644 --- a/public/less/base/forms.less +++ b/public/less/base/forms.less @@ -124,7 +124,6 @@ input[type="color"], &:focus { border-color: rgba(82,168,236, .8); outline: 0; - outline: thin dotted \9; /* IE6-9 */ .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); } } diff --git a/public/less/components/buttons.less b/public/less/components/buttons.less index cd0095cf8e0..1e08400b821 100644 --- a/public/less/components/buttons.less +++ b/public/less/components/buttons.less @@ -35,7 +35,6 @@ &.active, &:active { background-image: none; - outline: 0; } // Disabled state diff --git a/public/less/components/navs.less b/public/less/components/navs.less index b597d3f7073..1c1426d99cf 100644 --- a/public/less/components/navs.less +++ b/public/less/components/navs.less @@ -190,4 +190,11 @@ border-color: @grayLight; } +// Show/hide tabbable areas +.tab-content > .tab-pane { + display: none; +} +.tab-content > .active { + display: block; +} diff --git a/public/less/mixins/mixins.less b/public/less/mixins/mixins.less index 8fe81221af9..b7215a034fa 100644 --- a/public/less/mixins/mixins.less +++ b/public/less/mixins/mixins.less @@ -24,14 +24,7 @@ } } -// Webkit-style focus -// ------------------ .tab-focus() { - // Default - outline: thin dotted #333; - // Webkit - outline: 5px auto -webkit-focus-ring-color; - outline-offset: -2px; } // Center-align a block level element diff --git a/public/less/pages/login.less b/public/less/pages/login.less index 16dd1f342fb..4c38d6221c4 100644 --- a/public/less/pages/login.less +++ b/public/less/pages/login.less @@ -46,10 +46,6 @@ color: @white; } - &:focus { - outline: none; - } - font-weight: bold; display: inline-block; width: 170px; diff --git a/public/vendor/css/normalize.min.css b/public/vendor/css/normalize.min.css deleted file mode 100644 index 928e30601c3..00000000000 --- a/public/vendor/css/normalize.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! normalize.css v1.0.1 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0} \ No newline at end of file diff --git a/public/vendor/modernizr-2.6.1.js b/public/vendor/modernizr-2.6.1.js deleted file mode 100644 index 52b523fa2f6..00000000000 --- a/public/vendor/modernizr-2.6.1.js +++ /dev/null @@ -1,4 +0,0 @@ -/* Modernizr 2.6.1 (Custom Build) | MIT & BSD - * Build: http://modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-mq-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load - */ -;window.Modernizr=function(a,b,c){function D(a){j.cssText=a}function E(a,b){return D(n.join(a+";")+(b||""))}function F(a,b){return typeof a===b}function G(a,b){return!!~(""+a).indexOf(b)}function H(a,b){for(var d in a){var e=a[d];if(!G(e,"-")&&j[e]!==c)return b=="pfx"?e:!0}return!1}function I(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:F(f,"function")?f.bind(d||b):f}return!1}function J(a,b,c){var d=a.charAt(0).toUpperCase()+a.slice(1),e=(a+" "+p.join(d+" ")+d).split(" ");return F(b,"string")||F(b,"undefined")?H(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),I(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d',a,""].join(""),k.id=h,(l?k:m).innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},z=function(b){var c=a.matchMedia||a.msMatchMedia;if(c)return c(b).matches;var d;return y("@media "+b+" { #"+h+" { position: absolute; } }",function(b){d=(a.getComputedStyle?getComputedStyle(b,null):b.currentStyle)["position"]=="absolute"}),d},A=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=F(e[d],"function"),F(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),B={}.hasOwnProperty,C;!F(B,"undefined")&&!F(B.call,"undefined")?C=function(a,b){return B.call(a,b)}:C=function(a,b){return b in a&&F(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e}),s.flexbox=function(){return J("flexWrap")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!F(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){return!!a.WebGLRenderingContext},s.touch=function(){var c;return"ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch?c=!0:y(["@media (",n.join("touch-enabled),("),h,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(a){c=a.offsetTop===9}),c},s.geolocation=function(){return"geolocation"in navigator},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!J("indexedDB",a)},s.hashchange=function(){return A("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){return"WebSocket"in a||"MozWebSocket"in a},s.rgba=function(){return D("background-color:rgba(150,255,150,.5)"),G(j.backgroundColor,"rgba")},s.hsla=function(){return D("background-color:hsla(120,40%,100%,.5)"),G(j.backgroundColor,"rgba")||G(j.backgroundColor,"hsla")},s.multiplebgs=function(){return D("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return J("backgroundSize")},s.borderimage=function(){return J("borderImage")},s.borderradius=function(){return J("borderRadius")},s.boxshadow=function(){return J("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return E("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return J("animationName")},s.csscolumns=function(){return J("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return D((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),G(j.backgroundImage,"gradient")},s.cssreflections=function(){return J("boxReflect")},s.csstransforms=function(){return!!J("transform")},s.csstransforms3d=function(){var a=!!J("perspective");return a&&"webkitPerspective"in g.style&&y("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}",function(b,c){a=b.offsetLeft===9&&b.offsetHeight===3}),a},s.csstransitions=function(){return J("transition")},s.fontface=function(){var a;return y('@font-face {font-family:"font";src:url("https://")}',function(c,d){var e=b.getElementById("smodernizr"),f=e.sheet||e.styleSheet,g=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"";a=/src/i.test(g)&&g.indexOf(d.split(" ")[0])===0}),a},s.generatedcontent=function(){var a;return y(['#modernizr:after{content:"',l,'";visibility:hidden}'].join(""),function(b){a=b.offsetHeight>=1}),a},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)C(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),e.addTest=function(a,b){if(typeof a=="object")for(var d in a)C(a,d)&&e.addTest(d,a[d]);else{a=a.toLowerCase();if(e[a]!==c)return e;b=typeof b=="function"?b():b,f&&(g.className+=" "+(b?"":"no-")+a),e[a]=b}return e},D(""),i=k=null,function(a,b){function k(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x",d.insertBefore(c.lastChild,d.firstChild)}function l(){var a=r.elements;return typeof a=="string"?a.split(" "):a}function m(a){var b=i[a[g]];return b||(b={},h++,a[g]=h,i[h]=b),b}function n(a,c,f){c||(c=b);if(j)return c.createElement(a);f||(f=m(c));var g;return f.cache[a]?g=f.cache[a].cloneNode():e.test(a)?g=(f.cache[a]=f.createElem(a)).cloneNode():g=f.createElem(a),g.canHaveChildren&&!d.test(a)?f.frag.appendChild(g):g}function o(a,c){a||(a=b);if(j)return a.createDocumentFragment();c=c||m(a);var d=c.frag.cloneNode(),e=0,f=l(),g=f.length;for(;e",f="hidden"in a,j=a.childNodes.length==1||function(){b.createElement("a");var a=b.createDocumentFragment();return typeof a.cloneNode=="undefined"||typeof a.createDocumentFragment=="undefined"||typeof a.createElement=="undefined"}()}catch(c){f=!0,j=!0}})();var r={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,supportsUnknownElements:j,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:q,createElement:n,createDocumentFragment:o};a.html5=r,q(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.mq=z,e.hasEvent=A,e.testProp=function(a){return H([a])},e.testAllProps=J,e.testStyles=y,e.prefixed=function(a,b,c){return b?J(a,b,c):J(a,"pfx")},g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f/vendor/css/normalize.min.css', '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', '<%= genDir %>/css/bootstrap.dark.min.css', @@ -16,7 +15,6 @@ module.exports = function(config) { cssLight: { src: [ - '<%= genDir %>/vendor/css/normalize.min.css', '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', '<%= genDir %>/css/bootstrap.light.min.css', From 063b54aefe6f17deea3aac4e06362ac19a126b1e Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 14:58:16 +0100 Subject: [PATCH 067/444] feat(cli): add grafana-cli to linux packages --- build.go | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/build.go b/build.go index 4b15722e14a..344374522f3 100644 --- a/build.go +++ b/build.go @@ -138,7 +138,8 @@ func readVersionFromPackageJson() { type linuxPackageOptions struct { packageType string homeDir string - binPath string + serverBinPath string + cliBinPath string configDir string configFilePath string ldapFilePath string @@ -159,7 +160,8 @@ func createDebPackages() { createPackage(linuxPackageOptions{ packageType: "deb", homeDir: "/usr/share/grafana", - binPath: "/usr/sbin/grafana-server", + serverBinPath: "/usr/sbin/grafana-server", + cliBinPath: "/usr/sbin/grafana-cli", configDir: "/etc/grafana", configFilePath: "/etc/grafana/grafana.ini", ldapFilePath: "/etc/grafana/ldap.toml", @@ -181,7 +183,8 @@ func createRpmPackages() { createPackage(linuxPackageOptions{ packageType: "rpm", homeDir: "/usr/share/grafana", - binPath: "/usr/sbin/grafana-server", + serverBinPath: "/usr/sbin/grafana-server", + cliBinPath: "/usr/sbin/grafana-cli", configDir: "/etc/grafana", configFilePath: "/etc/grafana/grafana.ini", ldapFilePath: "/etc/grafana/ldap.toml", @@ -216,7 +219,9 @@ func createPackage(options linuxPackageOptions) { runPrint("mkdir", "-p", filepath.Join(packageRoot, "/usr/sbin")) // copy binary - runPrint("cp", "-p", filepath.Join(workingDir, "tmp/bin/"+serverBinaryName), filepath.Join(packageRoot, options.binPath)) + runPrint("cp", "-p", filepath.Join(workingDir, "tmp/bin/grafana-server"), filepath.Join(packageRoot, options.serverBinPath)) + // copy binary + runPrint("cp", "-p", filepath.Join(workingDir, "tmp/bin/grafana-cli"), filepath.Join(packageRoot, options.cliBinPath)) // copy init.d script runPrint("cp", "-p", options.initdScriptSrc, filepath.Join(packageRoot, options.initdScriptFilePath)) // copy environment var file From 9c50b89d64b4bf51627f685b54d0cd43cff5ae1b Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 15:22:03 +0100 Subject: [PATCH 068/444] feat(build): make build more generic for executables --- build.go | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/build.go b/build.go index 344374522f3..9a945a2b07d 100644 --- a/build.go +++ b/build.go @@ -31,7 +31,7 @@ var ( linuxPackageIteration string = "" race bool workingDir string - serverBinaryName string = "grafana-server" + binaries []string = []string{"grafana-server", "grafana-cli"} ) const minGoVersion = 1.3 @@ -64,8 +64,9 @@ func main() { case "build": clean() - build(serverBinaryName, "./pkg/cmd/grafana-server", []string{}) - build("grafana-cli", "./pkg/cmd/grafana-cli", []string{}) + for _, binary := range binaries { + build(binary, "./pkg/cmd/"+binary, []string{}) + } case "test": test("./pkg/...") @@ -138,6 +139,7 @@ func readVersionFromPackageJson() { type linuxPackageOptions struct { packageType string homeDir string + binPath string serverBinPath string cliBinPath string configDir string @@ -160,8 +162,7 @@ func createDebPackages() { createPackage(linuxPackageOptions{ packageType: "deb", homeDir: "/usr/share/grafana", - serverBinPath: "/usr/sbin/grafana-server", - cliBinPath: "/usr/sbin/grafana-cli", + binPath: "/usr/sbin", configDir: "/etc/grafana", configFilePath: "/etc/grafana/grafana.ini", ldapFilePath: "/etc/grafana/ldap.toml", @@ -183,8 +184,7 @@ func createRpmPackages() { createPackage(linuxPackageOptions{ packageType: "rpm", homeDir: "/usr/share/grafana", - serverBinPath: "/usr/sbin/grafana-server", - cliBinPath: "/usr/sbin/grafana-cli", + binPath: "/usr/sbin", configDir: "/etc/grafana", configFilePath: "/etc/grafana/grafana.ini", ldapFilePath: "/etc/grafana/ldap.toml", @@ -219,9 +219,9 @@ func createPackage(options linuxPackageOptions) { runPrint("mkdir", "-p", filepath.Join(packageRoot, "/usr/sbin")) // copy binary - runPrint("cp", "-p", filepath.Join(workingDir, "tmp/bin/grafana-server"), filepath.Join(packageRoot, options.serverBinPath)) - // copy binary - runPrint("cp", "-p", filepath.Join(workingDir, "tmp/bin/grafana-cli"), filepath.Join(packageRoot, options.cliBinPath)) + for _, binary := range binaries { + runPrint("cp", "-p", filepath.Join(workingDir, "tmp/bin/"+binary), filepath.Join(packageRoot, "/usr/sbin/"+binary)) + } // copy init.d script runPrint("cp", "-p", options.initdScriptSrc, filepath.Join(packageRoot, options.initdScriptFilePath)) // copy environment var file From f8e233e4007b0c0940b164593bb18795ef887258 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 15:27:41 +0100 Subject: [PATCH 069/444] commit(): saas changs --- package.json | 3 +- public/less/base/base.scss | 28 ++ public/less/base/code.scss | 52 +++ public/less/base/fonts.scss | 168 +++++++ public/less/base/forms.scss | 290 ++++++++++++ public/less/base/normalize.scss | 425 ++++++++++++++++++ public/less/base/type.less | 14 - public/less/base/type.scss | 257 +++++++++++ public/less/bootstrap/grid.scss | 21 + .../less/bootstrap/responsive-1200px-min.scss | 28 ++ .../less/bootstrap/responsive-767px-max.scss | 161 +++++++ .../bootstrap/responsive-768px-979px.scss | 19 + .../less/bootstrap/responsive-utilities.scss | 59 +++ public/less/bootstrap/responsive.scss | 27 ++ public/less/components/alerts.scss | 68 +++ public/less/components/buttons.scss | 102 +++++ public/less/components/color_picker.scss | 37 ++ public/less/components/dashboard.scss | 285 ++++++++++++ public/less/components/dropdown.scss | 236 ++++++++++ public/less/components/filter-controls.scss | 37 ++ public/less/components/filter-list.scss | 142 ++++++ public/less/components/filter-table.scss | 57 +++ public/less/components/footer.scss | 9 + public/less/components/gf-form.scss | 71 +++ public/less/components/gfbox.scss | 69 +++ public/less/components/infobox.scss | 20 + public/less/components/modals.scss | 149 ++++++ public/less/components/navbar.scss | 178 ++++++++ public/less/components/navs.scss | 200 +++++++++ public/less/components/old_stuff.scss | 20 + public/less/components/pagination.scss | 113 +++++ public/less/components/panel_dashlist.scss | 22 + public/less/components/panel_graph.scss | 298 ++++++++++++ public/less/components/panel_singlestat.scss | 51 +++ public/less/components/panel_table.scss | 101 +++++ public/less/components/popovers.scss | 128 ++++++ public/less/components/query_editor.scss | 16 + public/less/components/scrollbar.scss | 41 ++ public/less/components/search.scss | 107 +++++ public/less/components/shortcuts.scss | 6 + public/less/components/sidemenu.scss | 220 +++++++++ public/less/components/submenu.scss | 133 ++++++ public/less/components/tables_lists.scss | 43 ++ public/less/components/tabs.scss | 40 ++ public/less/components/tags.scss | 39 ++ public/less/components/tagsinput.scss | 39 ++ public/less/components/tightform.scss | 236 ++++++++++ public/less/components/timepicker.scss | 107 +++++ public/less/components/tooltip.scss | 102 +++++ public/less/components/typeahead.scss | 11 + public/less/grafana-responsive.scss | 127 ++++++ public/less/grafana.dark.scss | 2 + public/less/grafana.less | 2 +- public/less/grafana.light.scss | 2 + public/less/grafana.scss | 69 +++ public/less/layout/page.scss | 71 +++ public/less/mixins/buttons.scss | 18 + public/less/mixins/mixins.scss | 334 ++++++++++++++ public/less/pages/admin.scss | 10 + public/less/pages/alerting.scss | 42 ++ public/less/pages/apps.scss | 26 ++ public/less/pages/login.scss | 169 +++++++ public/less/pages/playlist.scss | 93 ++++ public/less/pages/signup.scss | 17 + public/less/utils/angular.scss | 7 + public/less/utils/utils.scss | 64 +++ public/less/utils/validation.scss | 7 + public/less/variables.dark.scss | 342 ++++++++++++++ public/less/variables.light.scss | 359 +++++++++++++++ tasks/options/concat.js | 2 - tasks/options/sass.js | 12 + tasks/options/watch.js | 4 +- 72 files changed, 6844 insertions(+), 20 deletions(-) create mode 100644 public/less/base/base.scss create mode 100644 public/less/base/code.scss create mode 100644 public/less/base/fonts.scss create mode 100644 public/less/base/forms.scss create mode 100644 public/less/base/normalize.scss create mode 100644 public/less/base/type.scss create mode 100644 public/less/bootstrap/grid.scss create mode 100644 public/less/bootstrap/responsive-1200px-min.scss create mode 100644 public/less/bootstrap/responsive-767px-max.scss create mode 100644 public/less/bootstrap/responsive-768px-979px.scss create mode 100644 public/less/bootstrap/responsive-utilities.scss create mode 100644 public/less/bootstrap/responsive.scss create mode 100644 public/less/components/alerts.scss create mode 100644 public/less/components/buttons.scss create mode 100644 public/less/components/color_picker.scss create mode 100644 public/less/components/dashboard.scss create mode 100644 public/less/components/dropdown.scss create mode 100644 public/less/components/filter-controls.scss create mode 100644 public/less/components/filter-list.scss create mode 100644 public/less/components/filter-table.scss create mode 100644 public/less/components/footer.scss create mode 100644 public/less/components/gf-form.scss create mode 100644 public/less/components/gfbox.scss create mode 100644 public/less/components/infobox.scss create mode 100644 public/less/components/modals.scss create mode 100644 public/less/components/navbar.scss create mode 100644 public/less/components/navs.scss create mode 100644 public/less/components/old_stuff.scss create mode 100644 public/less/components/pagination.scss create mode 100644 public/less/components/panel_dashlist.scss create mode 100644 public/less/components/panel_graph.scss create mode 100644 public/less/components/panel_singlestat.scss create mode 100644 public/less/components/panel_table.scss create mode 100644 public/less/components/popovers.scss create mode 100644 public/less/components/query_editor.scss create mode 100644 public/less/components/scrollbar.scss create mode 100644 public/less/components/search.scss create mode 100644 public/less/components/shortcuts.scss create mode 100644 public/less/components/sidemenu.scss create mode 100644 public/less/components/submenu.scss create mode 100644 public/less/components/tables_lists.scss create mode 100644 public/less/components/tabs.scss create mode 100644 public/less/components/tags.scss create mode 100644 public/less/components/tagsinput.scss create mode 100644 public/less/components/tightform.scss create mode 100644 public/less/components/timepicker.scss create mode 100644 public/less/components/tooltip.scss create mode 100644 public/less/components/typeahead.scss create mode 100644 public/less/grafana-responsive.scss create mode 100644 public/less/grafana.dark.scss create mode 100644 public/less/grafana.light.scss create mode 100644 public/less/grafana.scss create mode 100644 public/less/layout/page.scss create mode 100644 public/less/mixins/buttons.scss create mode 100644 public/less/mixins/mixins.scss create mode 100644 public/less/pages/admin.scss create mode 100644 public/less/pages/alerting.scss create mode 100644 public/less/pages/apps.scss create mode 100644 public/less/pages/login.scss create mode 100644 public/less/pages/playlist.scss create mode 100644 public/less/pages/signup.scss create mode 100644 public/less/utils/angular.scss create mode 100644 public/less/utils/utils.scss create mode 100644 public/less/utils/validation.scss create mode 100644 public/less/variables.dark.scss create mode 100644 public/less/variables.light.scss create mode 100644 tasks/options/sass.js diff --git a/package.json b/package.json index 11152664083..0c31f9e2616 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,8 @@ "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", "systemjs": "0.19.20", - "zone.js": "0.5.10" + "zone.js": "0.5.10", + "grunt-sass": "^1.1.0" }, "engines": { "node": "0.4.x", diff --git a/public/less/base/base.scss b/public/less/base/base.scss new file mode 100644 index 00000000000..1556ee1d534 --- /dev/null +++ b/public/less/base/base.scss @@ -0,0 +1,28 @@ +html { + height: 100%; +} + +body { + height: 100%; + margin: 0; + font-family: $baseFontFamily; + font-size: $baseFontSize; + line-height: $baseLineHeight; + color: $textColor; + background-color: $bodyBackground; +} + + +// Links +// ------------------------- + +a { + color: $linkColor; + text-decoration: none; +} + +a:hover, +a:focus { + color: $linkColorHover; +} + diff --git a/public/less/base/code.scss b/public/less/base/code.scss new file mode 100644 index 00000000000..c345da0db5d --- /dev/null +++ b/public/less/base/code.scss @@ -0,0 +1,52 @@ +// +// Code (inline and blocK) +// -------------------------------------------------- + + +// Inline and block code styles +code, +pre { + @include font-family-monospace(); + font-size: $baseFontSize - 2; + background-color: $codeTagBackground; + color: $textColor; + border: 1px solid darken($codeTagBackground, 15%); + padding: 2px; +} + +// Inline code +code { + color: #d14; + background-color: #f7f7f9; + border: 1px solid #e1e1e8; + white-space: nowrap; +} + +// Blocks of code +pre { + display: block; + margin: 0 0 $baseLineHeight / 2; + font-size: $baseFontSize - 1; // 14px to 13px + line-height: $baseLineHeight; + word-break: break-all; + word-wrap: break-word; + white-space: pre; + white-space: pre-wrap; + background-color: #f5f5f5; + + // Make prettyprint styles more spaced out for readability + &.prettyprint { + margin-bottom: $baseLineHeight; + } + + // Account for some code outputs that place code tags in pre tags + code { + padding: 0; + color: inherit; + white-space: pre; + white-space: pre-wrap; + background-color: transparent; + border: 0; + } +} + diff --git a/public/less/base/fonts.scss b/public/less/base/fonts.scss new file mode 100644 index 00000000000..61ff672465b --- /dev/null +++ b/public/less/base/fonts.scss @@ -0,0 +1,168 @@ +@font-face { + font-family: 'grafana-icons'; + src: url('../fonts/grafana-icons.eot?h6rv8b'); + src: url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'), + url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'), + url('../fonts/grafana-icons.woff?h6rv8b') format('woff'), + url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +.icon-gf { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: 'grafana-icons' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-gf-raintank_wordmark:before { + content: "\e600"; +} +.icon-gf-raintank_icn:before { + content: "\e601"; +} +.icon-gf-raintank_r-icn:before { + content: "\e905"; +} +.icon-gf-check-alt:before { + content: "\e603"; +} +.icon-gf-check:before { + content: "\e604"; +} +.icon-gf-collector:before { + content: "\e605"; +} +.icon-gf-dashboard:before { + content: "\e606"; +} +.icon-gf-panel:before { + content: "\e904"; +} +.icon-gf-datasources:before { + content: "\e607"; +} +.icon-gf-endpoint-tiny:before { + content: "\e608"; +} +.icon-gf-endpoint:before { + content: "\e609"; +} +.icon-gf-filter:before { + content: "\e60a"; +} +.icon-gf-status:before { + content: "\e60b"; +} +.icon-gf-monitoring:before { + content: "\e60c"; +} +.icon-gf-monitoring-tiny:before { + content: "\e620"; +} +.icon-gf-jump-to-dashboard:before { + content: "\e60d"; +} +.icon-gf-warn:before { + content: "\e60e"; +} +.icon-gf-nodata:before { + content: "\e60f"; +} +.icon-gf-critical:before { + content: "\e610"; +} +.icon-gf-online:before { + content: "\e611"; +} +.icon-gf-event-error:before { + content: "\e623"; +} +.icon-gf-event:before { + content: "\e624"; +} +.icon-gf-private-collector:before { + content: "\e612"; +} +.icon-gf-alert:before { + content: "\e61f"; +} +.icon-gf-alert-disabled:before { + content: "\e621"; +} +.icon-gf-refresh:before { + content: "\e613"; +} +.icon-gf-save:before { + content: "\e614"; +} +.icon-gf-settings:before { + content: "\e615"; +} +.icon-gf-share:before { + content: "\e616"; +} +.icon-gf-star:before { + content: "\e617"; +} +.icon-gf-search:before { + content: "\e618"; +} +.icon-gf-tag-add:before { + content: "\e619"; +} +.icon-gf-tag-remove:before { + content: "\e61a"; +} +.icon-gf-video:before { + content: "\e61b"; +} +.icon-gf-bulk_action:before { + content: "\e61c"; +} +.icon-gf-users:before { + content: "\e622"; +} +.icon-gf-globe:before { + content: "\e61d"; +} +.icon-gf-snapshot:before { + content: "\e61e"; +} +.icon-gf-play-grafana-icon:before { + content: "\e629"; +} +.icon-gf-grafana-icon:before { + content: "\e625"; +} +.icon-gf-email:before { + content: "\e628"; +} +.icon-gf-stopwatch:before { + content: "\e626"; +} +.icon-gf-skull:before { + content: "\e900"; +} +.icon-gf-probe:before { + content: "\e901"; +} +.icon-gf-apps:before { + content: "\e902"; +} +.icon-gf-litmus:before { + content: "\e627"; +} +.icon-gf-grafana_wordmark:before { + content: "\e903"; +} + diff --git a/public/less/base/forms.scss b/public/less/base/forms.scss new file mode 100644 index 00000000000..644c77980b2 --- /dev/null +++ b/public/less/base/forms.scss @@ -0,0 +1,290 @@ +// +// Forms +// -------------------------------------------------- + + +// GENERAL STYLES +// -------------- + +// Make all forms have space below them +form { + margin: 0 0 $baseLineHeight; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +// Groups of fields with labels on top (legends) +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: $baseLineHeight; + font-size: $baseFontSize * 1.5; + line-height: $baseLineHeight * 2; + color: $grayDark; + border: 0; + border-bottom: 1px solid #e5e5e5; + + // Small + small { + font-size: $baseLineHeight * .75; + color: $grayLight; + } +} + +// Set font for forms +label, +input, +button, +select, +textarea { + @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here +} +input, +button, +select, +textarea { + font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element) +} + +// Identify controls by their labels +label { + display: block; + margin-bottom: 5px; +} + +// Form controls +// ------------------------- + +// Shared size and type resets +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + display: inline-block; + height: $baseLineHeight; + padding: 4px 6px; + font-size: $baseFontSize; + line-height: $baseLineHeight; + color: $inputText; + vertical-align: top; +} + +// Reset appearance properties for textual inputs and textarea +// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) +input, +textarea, +.uneditable-input { + width: 206px; // plus 12px padding and 2px border +} +// Reset height since textareas have rows +textarea { + height: auto; +} + +// Everything else +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + background-color: $inputBackground; + @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + @include transition("border linear .2s, box-shadow linear .2s"); + + // Focus state + &:focus { + border-color: rgba(82,168,236, .8); + outline: 0; + @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); + } +} + +// Position radios and checkboxes better +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + line-height: normal; +} + +// Reset width of input images, buttons, radios, checkboxes +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector +} + +// Set the height of select and file controls to match text inputs +select, +input[type="file"] { + height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + line-height: $inputHeight; +} + +// Make select elements obey height by applying a border +select { + width: 220px; // default input width + 10px of padding that doesn't get applied + border: 1px solid $inputBorder; + background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color +} + +// Make multiple select elements height not fixed +select[multiple], +select[size] { + height: auto; +} + +// Focus for select, file, radio, and checkbox +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + @include tab-focus(); +} + +// Placeholder +// ------------------------- + +// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector +input, +textarea { + @include placeholder(); +} + + +// INPUT SIZES +// ----------- + +// General classes for quick sizes +.input-mini { width: 60px; } +.input-small { width: 90px; } +.input-medium { width: 150px; } +.input-large { width: 210px; } +.input-xlarge { width: 270px; } +.input-xxlarge { width: 530px; } + +// GRID SIZING FOR INPUTS +// ---------------------- + +// DISABLED STATE +// -------------- + +// Disabled and read-only inputs +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly] { + cursor: not-allowed; + background-color: $inputDisabledBackground; +} + +// Explicitly reset the colors here +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly] { + background-color: transparent; +} + + +// HTML5 invalid states +// Shares styles with the .control-group.error above +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { + color: #b94a48; + border-color: #ee5f5b; + &:focus { + border-color: darken(#ee5f5b, 10%); + $shadow: 0 0 6px lighten(#ee5f5b, 20%); + @include box-shadow($shadow); + } +} + +input[type=text].input-fluid { + width: 100%; + box-sizing: border-box; + padding: 10px; + font-size: 16px; + -moz-box-sizing: border-box; + height: 100%; +} + +input[type="checkbox"].cr1 { + display: none; +} + +.editor-option label.cr1 { + display: inline-block; + margin: 5px 0 1px 0; +} + +label.cr1 { + display: inline-block; + height: 19px; + position: relative; + clear: none; + text-indent: 2px; + margin: 0 0 0px 0; + padding: 0 0 0 20px; + vertical-align: top; + background: url($checkboxImageUrl) left top no-repeat; + cursor:pointer; +} + +input[type="checkbox"]:checked+label { + background: url($checkboxImageUrl) 0px -21px no-repeat; +} + +.gf-fluid-input { + border: none; + display: block; + overflow: hidden; + padding-right: 10px; + input[type=text] { + width: 100%; + padding: 5px 6px; + height: 100%; + box-sizing: border-box; + } + textarea { + width: 100%; + padding: 5px 6px; + height: 100%; + box-sizing: border-box; + } +} diff --git a/public/less/base/normalize.scss b/public/less/base/normalize.scss new file mode 100644 index 00000000000..93dd4521727 --- /dev/null +++ b/public/less/base/normalize.scss @@ -0,0 +1,425 @@ +/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */ + +// +// 1. Set default font family to sans-serif. +// 2. Prevent iOS and IE text size adjust after device orientation change, +// without disabling user zoom. +// + +html { + font-family: sans-serif; // 1 + -ms-text-size-adjust: 100%; // 2 + -webkit-text-size-adjust: 100%; // 2 +} + +// +// Remove default margin. +// + +body { + margin: 0; +} + +// HTML5 display definitions +// ========================================================================== + +// +// Correct `block` display not defined for any HTML5 element in IE 8/9. +// Correct `block` display not defined for `details` or `summary` in IE 10/11 +// and Firefox. +// Correct `block` display not defined for `main` in IE 11. +// + +article, +aside, +details, +figcaption, +figure, +footer, +header, +main, +menu, +nav, +section, +summary { + display: block; +} + +// +// 1. Correct `inline-block` display not defined in IE 8/9. +// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. +// + +audio, +canvas, +progress, +video { + display: inline-block; // 1 + vertical-align: baseline; // 2 +} + +// +// Prevent modern browsers from displaying `audio` without controls. +// Remove excess height in iOS 5 devices. +// + +audio:not([controls]) { + display: none; + height: 0; +} + +// +// Address `[hidden]` styling not present in IE 8/9/10. +// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. +// + +[hidden], +template { + display: none; +} + +// Links +// ========================================================================== + +// +// Remove the gray background color from active links in IE 10. +// + +a { + background-color: transparent; +} + +// +// Improve readability of focused elements when they are also in an +// active/hover state. +// + +a { + &:active { + outline: 0; + } + &:hover { + outline: 0; + } +} + +// Text-level semantics +// ========================================================================== + +// +// Address styling not present in IE 8/9/10/11, Safari, and Chrome. +// + +abbr[title] { + border-bottom: 1px dotted; +} + +// +// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. +// + +b, +strong { + font-weight: bold; +} + +// +// Address styling not present in Safari and Chrome. +// + +dfn { + font-style: italic; +} + +// +// Address variable `h1` font-size and margin within `section` and `article` +// contexts in Firefox 4+, Safari, and Chrome. +// + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +// +// Address styling not present in IE 8/9. +// + +mark { + background: #ff0; + color: #000; +} + +// +// Address inconsistent and variable font size in all browsers. +// + +small { + font-size: 80%; +} + +// +// Prevent `sub` and `sup` affecting `line-height` in all browsers. +// + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +// Embedded content +// ========================================================================== + +// +// Remove border when inside `a` element in IE 8/9/10. +// + +img { + border: 0; +} + +// +// Correct overflow not hidden in IE 9/10/11. +// + +svg:not(:root) { + overflow: hidden; +} + +// Grouping content +// ========================================================================== + +// +// Address margin not present in IE 8/9 and Safari. +// + +figure { + margin: 1em 40px; +} + +// +// Address differences between Firefox and other browsers. +// + +hr { + box-sizing: content-box; + height: 0; +} + +// +// Contain overflow in all browsers. +// + +pre { + overflow: auto; +} + +// +// Address odd `em`-unit font size rendering in all browsers. +// + +code, +kbd, +pre, +samp { + font-family: monospace, monospace; + font-size: 1em; +} + +// Forms +// ========================================================================== + +// +// Known limitation: by default, Chrome and Safari on OS X allow very limited +// styling of `select`, unless a `border` property is set. +// + +// +// 1. Correct color not being inherited. +// Known issue: affects color of disabled elements. +// 2. Correct font properties not being inherited. +// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. +// + +button, +input, +optgroup, +select, +textarea { + color: inherit; // 1 + font: inherit; // 2 + margin: 0; // 3 +} + +// +// Address `overflow` set to `hidden` in IE 8/9/10/11. +// + +button { + overflow: visible; +} + +// +// Address inconsistent `text-transform` inheritance for `button` and `select`. +// All other form control elements do not inherit `text-transform` values. +// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. +// Correct `select` style inheritance in Firefox. +// + +button, +select { + text-transform: none; +} + +// +// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` +// and `video` controls. +// 2. Correct inability to style clickable `input` types in iOS. +// 3. Improve usability and consistency of cursor style between image-type +// `input` and others. +// + +button, +html input[type="button"], // 1 +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; // 2 + cursor: pointer; // 3 +} + +// +// Re-set default cursor for disabled elements. +// + +button[disabled], +html input[disabled] { + cursor: default; +} + +// +// Remove inner padding and border in Firefox 4+. +// + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +// +// Address Firefox 4+ setting `line-height` on `input` using `!important` in +// the UA stylesheet. +// + +input { + line-height: normal; +} + +// +// It's recommended that you don't attempt to style these elements. +// Firefox's implementation doesn't respect box-sizing, padding, or width. +// +// 1. Address box sizing set to `content-box` in IE 8/9/10. +// 2. Remove excess padding in IE 8/9/10. +// + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; // 1 + padding: 0; // 2 +} + +// +// Fix the cursor style for Chrome's increment/decrement buttons. For certain +// `font-size` values of the `input`, it causes the cursor style of the +// decrement button to change from `default` to `text`. +// + +input[type="number"]::-webkit-inner-spin-button, +input[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +// +// Address `appearance` set to `searchfield` in Safari and Chrome. +// + +input[type="search"] { + -webkit-appearance: textfield; +} + +// +// Remove inner padding and search cancel button in Safari and Chrome on OS X. +// Safari (but not Chrome) clips the cancel button when the search input has +// padding (and `textfield` appearance). +// + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +// +// Define consistent border, margin, and padding. +// + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +// +// 1. Correct `color` not being inherited in IE 8/9/10/11. +// 2. Remove padding so people aren't caught out if they zero out fieldsets. +// + +legend { + border: 0; // 1 + padding: 0; // 2 +} + +// +// Remove default vertical scrollbar in IE 8/9/10/11. +// + +textarea { + overflow: auto; +} + +// +// Don't inherit the `font-weight` (applied by a rule above). +// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. +// + +optgroup { + font-weight: bold; +} + +// Tables +// ========================================================================== + +// +// Remove most spacing between table cells. +// + +table { + border-collapse: collapse; + border-spacing: 0; +} + +td, +th { + padding: 0; +} diff --git a/public/less/base/type.less b/public/less/base/type.less index d00b10fb5d3..f75e52d0f90 100644 --- a/public/less/base/type.less +++ b/public/less/base/type.less @@ -141,20 +141,6 @@ dt { dd { margin-left: @baseLineHeight / 2; } -// Horizontal layout (like forms) -.dl-horizontal { - .clearfix(); // Ensure dl clears floats if empty dd elements present - dt { - float: left; - width: @horizontalComponentOffset - 20; - clear: left; - text-align: right; - .text-overflow(); - } - dd { - margin-left: @horizontalComponentOffset; - } -} // MISC // ---- diff --git a/public/less/base/type.scss b/public/less/base/type.scss new file mode 100644 index 00000000000..f834bbf5ca6 --- /dev/null +++ b/public/less/base/type.scss @@ -0,0 +1,257 @@ +// +// Typography +// -------------------------------------------------- + + +// Body text +// ------------------------- + +p { + margin: 0 0 $baseLineHeight / 2; +} +.lead { + margin-bottom: $baseLineHeight; + font-size: $baseFontSize * 1.5; + font-weight: 200; + line-height: $baseLineHeight * 1.5; +} + +// Emphasis & misc + +// ------------------------- + +// Ex: 14px base font * 85% = about 12px +.small, small { font-size: 85%; } +.large { font-size: 120%; } + +strong { font-weight: bold; } +em { font-style: italic; color: $headingsColor; } +cite { font-style: normal; } + +// Utility classes +.muted { color: $grayLight; } +a.muted:hover, +a.muted:focus { color: darken($grayLight, 10%); } + +.text-warning { color: $warningText; } +a.text-warning:hover, +a.text-warning:focus { color: darken($warningText, 10%); } + +.text-error { color: $errorText; } +a.text-error:hover, +a.text-error:focus { color: darken($errorText, 10%); } + +.text-info { color: $infoText; } +a.text-info:hover, +a.text-info:focus { color: darken($infoText, 10%); } + +.text-success { color: $successText; } +a.text-success:hover, +a.text-success:focus { color: darken($successText, 10%); } +a { cursor: pointer; } + +.text-left { text-align: left; } +.text-right { text-align: right; } +.text-center { text-align: center; } + + +// Headings +// ------------------------- + +h1, h2, h3, h4, h5, h6 { + margin: ($baseLineHeight / 2) 0; + font-family: $headingsFontFamily; + font-weight: $headingsFontWeight; + line-height: $baseLineHeight; + color: $headingsColor; + text-rendering: optimizelegibility; // Fix the character spacing for headings + font-style: $headingsFontStyle; + small { + font-weight: normal; + line-height: 1; + color: $grayLight; + } +} + +h1, +h2, +h3 { line-height: $baseLineHeight * 2; } + +h1 { font-size: $baseFontSize * 2.00; } // ~38px +h2 { font-size: $baseFontSize * 1.75; } // ~32px +h3 { font-size: $baseFontSize * 1.50; } // ~24px +h4 { font-size: $baseFontSize * 1.25; } // ~18px +h5 { font-size: $baseFontSize; } +h6 { font-size: $baseFontSize * 0.85; } // ~12px + +h1 small { font-size: $baseFontSize * 1.75; } // ~24px +h2 small { font-size: $baseFontSize * 1.25; } // ~18px +h3 small { font-size: $baseFontSize; } +h4 small { font-size: $baseFontSize; } + + +// Lists +// -------------------------------------------------- + +// Unordered and Ordered lists +ul, ol { + padding: 0; + margin: 0 0 $baseLineHeight / 2 25px; +} +ul ul, +ul ol, +ol ol, +ol ul { + margin-bottom: 0; +} +li { + line-height: $baseLineHeight; +} + +// Remove default list styles +ul.unstyled, +ol.unstyled { + margin-left: 0; + list-style: none; +} + +// Single-line list items +ul.inline, +ol.inline { + margin-left: 0; + list-style: none; + > li { + display: inline-block; + padding-left: 5px; + padding-right: 5px; + } +} + +// Description Lists +dl { + margin-bottom: $baseLineHeight; +} +dt, +dd { + line-height: $baseLineHeight; +} +dt { + font-weight: bold; +} +dd { + margin-left: $baseLineHeight / 2; +} +// Horizontal layout (like forms) +.dl-horizontal { + @include clearfix(); + dt { + float: left; + width: $horizontalComponentOffset - 20; + clear: left; + text-align: right; + @include text-overflow(); + } + dd { + margin-left: $horizontalComponentOffset; + } +} + +// MISC +// ---- + +// Horizontal rules +hr { + margin: $baseLineHeight 0; + border: 0; + border-top: 1px solid $hrBorder; + border-bottom: 1px solid $white; +} + +// Abbreviations and acronyms +abbr[title], +// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted $grayLight; +} +abbr.initialism { + font-size: 90%; + text-transform: uppercase; +} + +// Blockquotes +blockquote { + padding: 0 0 0 15px; + margin: 0 0 $baseLineHeight; + border-left: 5px solid $grayLighter; + p { + margin-bottom: 0; + font-size: $baseFontSize * 1.25; + font-weight: 300; + line-height: 1.25; + } + small { + display: block; + line-height: $baseLineHeight; + color: $grayLight; + &:before { + content: '\2014 \00A0'; + } + } + + // Float right with text-align: right + &.pull-right { + float: right; + padding-right: 15px; + padding-left: 0; + border-right: 5px solid $grayLighter; + border-left: 0; + p, + small { + text-align: right; + } + small { + &:before { + content: ''; + } + &:after { + content: '\00A0 \2014'; + } + } + } +} + +// Quotes +q:before, +q:after, +blockquote:before, +blockquote:after { + content: ""; +} + +// Addresses +address { + display: block; + margin-bottom: $baseLineHeight; + font-style: normal; + line-height: $baseLineHeight; +} + +a.external-link { + color: $blue; + text-decoration: underline; +} + + +.link { + color: $linkColor; + cursor: pointer; +} + +.link:hover { + color: $linkColorHover; +} + +.pointer { + cursor: pointer; +} diff --git a/public/less/bootstrap/grid.scss b/public/less/bootstrap/grid.scss new file mode 100644 index 00000000000..15b89a8703e --- /dev/null +++ b/public/less/bootstrap/grid.scss @@ -0,0 +1,21 @@ +// +// Grid system +// -------------------------------------------------- + + +// Fixed (940px) +#grid > .core($gridColumnWidth, $gridGutterWidth); + +// Fluid (940px) +#grid > .fluid($fluidGridColumnWidth, $fluidGridGutterWidth); + +// Reset utility classes due to specificity +[class*="span"].hide, +.row-fluid [class*="span"].hide { + display: none; +} + +[class*="span"].pull-right, +.row-fluid [class*="span"].pull-right { + float: right; +} diff --git a/public/less/bootstrap/responsive-1200px-min.scss b/public/less/bootstrap/responsive-1200px-min.scss new file mode 100644 index 00000000000..8b85385d84f --- /dev/null +++ b/public/less/bootstrap/responsive-1200px-min.scss @@ -0,0 +1,28 @@ +// +// Responsive: Large desktop and up +// -------------------------------------------------- + + +@media (min-width: 1200px) { + + // Fixed grid + #grid > .core($gridColumnWidth1200, $gridGutterWidth1200); + + // Fluid grid + #grid > .fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200); + + // Input grid + #grid > .input($gridColumnWidth1200, $gridGutterWidth1200); + + // Thumbnails + .thumbnails { + margin-left: -$gridGutterWidth1200; + } + .thumbnails > li { + margin-left: $gridGutterWidth1200; + } + .row-fluid .thumbnails { + margin-left: 0; + } + +} diff --git a/public/less/bootstrap/responsive-767px-max.scss b/public/less/bootstrap/responsive-767px-max.scss new file mode 100644 index 00000000000..5c01855cbc2 --- /dev/null +++ b/public/less/bootstrap/responsive-767px-max.scss @@ -0,0 +1,161 @@ +// +// Responsive: Landscape phone to desktop/tablet +// -------------------------------------------------- + + +@media (max-width: 767px) { + + // GRID & CONTAINERS + // ----------------- + // Remove width from containers + .container { + width: auto; + } + // Fluid rows + .row-fluid { + width: 100%; + } + // Undo negative margin on rows and thumbnails + .row, + .thumbnails { + margin-left: 0; + } + .thumbnails > li { + float: none; + margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present + } + // Make all grid-sized elements block level again + [class*="span"], + .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing + .row-fluid [class*="span"] { + float: none; + display: block; + width: 100%; + margin-left: 0; + @include box-sizing(border-box); + } + .span12, + .row-fluid .span12 { + width: 100%; + @include box-sizing(border-box); + } + .row-fluid [class*="offset"]:first-child { + margin-left: 0; + } + + // FORM FIELDS + // ----------- + // Make span* classes full width + .input-large, + .input-xlarge, + .input-xxlarge, + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + @mixin input-block-level(); + } + // But don't let it screw up prepend/append inputs + .input-prepend input, + .input-append input, + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + display: inline-block; // redeclare so they don't wrap to new lines + width: auto; + } + .controls-row [class*="span"] + [class*="span"] { + margin-left: 0; + } + + // Modals + .modal { + position: fixed; + top: 20px; + left: 20px; + right: 20px; + width: auto; + margin: 0; + &.fade { top: -100px; } + &.fade.in { top: 20px; } + } + +} + + + +// UP TO LANDSCAPE PHONE +// --------------------- + +@media (max-width: 480px) { + + // Smooth out the collapsing/expanding nav + .nav-collapse { + -webkit-transform: translate3d(0, 0, 0); // activate the GPU + } + + // Block level the page header small tag for readability + .page-header h1 small { + display: block; + line-height: $baseLineHeight; + } + + // Update checkboxes for iOS + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + + // Remove the horizontal form styles + .form-horizontal { + .control-label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + // Move over all input controls and content + .controls { + margin-left: 0; + } + // Move the options list down to align with labels + .control-list { + padding-top: 0; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-actions { + padding-left: 10px; + padding-right: 10px; + } + } + + // Medias + // Reset float and spacing to stack + .media .pull-left, + .media .pull-right { + float: none; + display: block; + margin-bottom: 10px; + } + // Remove side margins since we stack instead of indent + .media-object { + margin-right: 0; + margin-left: 0; + } + + // Modals + .modal { + top: 10px; + left: 10px; + right: 10px; + } + .modal-header .close { + padding: 10px; + margin: -10px; + } + + // Carousel + .carousel-caption { + position: static; + } + +} diff --git a/public/less/bootstrap/responsive-768px-979px.scss b/public/less/bootstrap/responsive-768px-979px.scss new file mode 100644 index 00000000000..cef846699c3 --- /dev/null +++ b/public/less/bootstrap/responsive-768px-979px.scss @@ -0,0 +1,19 @@ +// +// Responsive: Tablet to desktop +// -------------------------------------------------- + + +@media (min-width: 768px) and (max-width: 979px) { + + // Fixed grid + #grid > .core($gridColumnWidth768, $gridGutterWidth768); + + // Fluid grid + #grid > .fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768); + + // Input grid + #grid > .input($gridColumnWidth768, $gridGutterWidth768); + + // No need to reset .thumbnails here since it's the same $gridGutterWidth + +} diff --git a/public/less/bootstrap/responsive-utilities.scss b/public/less/bootstrap/responsive-utilities.scss new file mode 100644 index 00000000000..eca42571a89 --- /dev/null +++ b/public/less/bootstrap/responsive-utilities.scss @@ -0,0 +1,59 @@ +// +// Responsive: Utility classes +// -------------------------------------------------- + + +// IE10 Metro responsive +// Required for Windows 8 Metro split-screen snapping with IE10 +// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ +$-ms-viewport{ + width: device-width; +} + +// Hide from screenreaders and browsers +// Credit: HTML5 Boilerplate +.hidden { + display: none; + visibility: hidden; +} + +// Visibility utilities + +// For desktops +.visible-phone { display: none !important; } +.visible-tablet { display: none !important; } +.hidden-phone { } +.hidden-tablet { } +.hidden-desktop { display: none !important; } +.visible-desktop { display: inherit !important; } + +// Tablets & small desktops only +@media (min-width: 768px) and (max-width: 979px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important ; } + // Show + .visible-tablet { display: inherit !important; } + // Hide + .hidden-tablet { display: none !important; } +} + +// Phones only +@media (max-width: 767px) { + // Hide everything else + .hidden-desktop { display: inherit !important; } + .visible-desktop { display: none !important; } + // Show + .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior + // Hide + .hidden-phone { display: none !important; } +} + +// Print utilities +.visible-print { display: none !important; } +.hidden-print { } + +@media print { + .visible-print { display: inherit !important; } + .hidden-print { display: none !important; } +} diff --git a/public/less/bootstrap/responsive.scss b/public/less/bootstrap/responsive.scss new file mode 100644 index 00000000000..8f4888f23d5 --- /dev/null +++ b/public/less/bootstrap/responsive.scss @@ -0,0 +1,27 @@ +/*! + * Bootstrap Responsive v2.3.2 + * + * Copyright 2013 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world by $mdo and $fat. + */ + + +// Responsive.scss +// For phone and tablet devices +// ------------------------------------------------------------- + + +// REPEAT VARIABLES & MIXINS +// ------------------------- +// Required since we compile the responsive stuff separately + +@import "../mixins/mixins.scss"; +@import "responsive-utilities.scss"; +@import "responsive-1200px-min.scss"; +@import "responsive-768px-979px.scss"; +@import "responsive-767px-max.scss"; + + diff --git a/public/less/components/alerts.scss b/public/less/components/alerts.scss new file mode 100644 index 00000000000..b6a79ae8a53 --- /dev/null +++ b/public/less/components/alerts.scss @@ -0,0 +1,68 @@ +// +// Alerts +// -------------------------------------------------- + + +// Base styles +// ------------------------- + +.alert { + padding: 8px 35px 13px 14px; + margin-bottom: $baseLineHeight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + background-color: $warningBackground; + position: relative; + color: $white; + text-shadow: 0 1px 0 rgba(0,0,0,.5); + border-radius: 2px; +} + +// Alternate styles +// ------------------------- + +.alert-success { + background-color: $successBackground; +} + +.alert-danger, +.alert-error { + background-color: $errorBackground; +} +.alert-info { + background-color: $infoBackground; +} +.alert-warning { + background-color: $warningBackground; +} + +.page-alert-list { + z-index: 8000; + min-width: 300px; + max-width: 300px; + position: fixed; + right: 20px; + top: 56px; +} + +.alert-close { + position: absolute; + top: -4px; + right: -2px; + width: 18px; + height: 18px; + padding: 0; + background: $white; + border-radius: 50%; + border: none; + font-size: 1.1rem; + color: $grayDarker; + .fa { + position: relative; + top: -2px; + } +} + +.alert-title { + font-weight: $fontWeightSemi; + padding-bottom: 2px; +} diff --git a/public/less/components/buttons.scss b/public/less/components/buttons.scss new file mode 100644 index 00000000000..b6a0b986b37 --- /dev/null +++ b/public/less/components/buttons.scss @@ -0,0 +1,102 @@ +// +// Buttons +// -------------------------------------------------- + +// Base styles +// -------------------------------------------------- + +// Core +.btn { + display: inline-block; + padding: 8px 12px; + margin-right: 10px; + font-size: $baseFontSize; + line-height: $baseLineHeight; + text-align: center; + vertical-align: middle; + cursor: pointer; + border: none; + + @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75)); + @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); + + // Hover/focus state + &:hover, + &:focus { + text-decoration: none; + } + + // Focus state for keyboard and accessibility + &:focus { + @include tab-focus(); + } + + // Active state + &.active, + &:active { + background-image: none; + } + + // Disabled state + &.disabled, + &[disabled] { + cursor: default; + background-image: none; + @include opacity(65); + } +} + +// Button Sizes +// -------------------------------------------------- + +// Large +.btn-large { + padding: 6px 20px; + font-size: $fontSizeLarge; +} + +.btn-small { + padding: 2px 10px; + font-size: $fontSizeSmall; +} + +.btn-mini { + padding: 2px 6px; + margin-right: 0; + margin-right: 0; + font-size: $fontSizeMini; +} + +// Set the backgrounds +// ------------------------- +.btn-primary { + @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); +} +// Warning appears are orange +.btn-warning { + @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); +} +// Danger and error appear as red +.btn-danger { + @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); +} +// Success appears as green +.btn-success { + @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); +} +// Info appears as a neutral blue +.btn-info { + @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); +} +// Inverse appears as dark gray +.btn-inverse { + @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText); + box-shadow: none; + border: 1px solid $grafanaTargetFuncHightlight; +} + +.btn-text { + color: $btnText; + margin: 0; + vertical-align: middle; +} diff --git a/public/less/components/color_picker.scss b/public/less/components/color_picker.scss new file mode 100644 index 00000000000..bc3c11aed0c --- /dev/null +++ b/public/less/components/color_picker.scss @@ -0,0 +1,37 @@ + +.sp-replacer { + background: inherit; + border: none; + color: inherit; + padding: 0; +} + +.sp-replacer:hover, .sp-replacer.sp-active { + border-color: inherit; + color: inherit; +} + +.sp-container { + border-radius: 0; + background-color: $heroUnitBackground; + border: none; + padding: 0; +} + +.sp-palette-container, .sp-picker-container { + border: none; +} + +.sp-dd { + display: none; +} + +.sp-preview { + position: relative; + width: 15px; + height: 15px; + border: none; + margin-right: 5px; + float: left; + z-index: 0; +} diff --git a/public/less/components/dashboard.scss b/public/less/components/dashboard.scss new file mode 100644 index 00000000000..bea7058d87d --- /dev/null +++ b/public/less/components/dashboard.scss @@ -0,0 +1,285 @@ +.template-variable { + color: $variable; +} + +.grafana-row { + margin-bottom: 5px; +} + +.row-tab { + .dropdown-menu-right { + top: 0; + left: 33px; + } +} + +.row-tab-button { + padding: 0px; + cursor: pointer; + vertical-align: middle; + width: 30px; + height: 30px; + text-align: center; + display: inline-block; + line-height: 30px; + background: $btnSuccessBackground; + color: rgba(255,255,255,.90); +} + +.row-button { + width: 24px; + float: left; + cursor: pointer; + line-height: 31px; + background-color: $blueDark; +} + +.row-text { + white-space: nowrap; + text-transform: uppercase; + font-weight: bold; + font-size: 0.9em; + text-align: center; + line-height: 31px; + height: 31px; +} + +.row-close { + padding: 0px; + margin: 0px; + background: $grafanaPanelBackground; + text-align: center; +} + +.row-close-buttons { + position: absolute; + left: 0; +} + +.row-open { + margin-top: 5px; + left: -28px; + position: absolute; + z-index: 100; + transition: .10s left; + transition-delay: .10s; + + &:hover { + left: -12px; + } +} + + +.row-control-inner { + padding:0px; + margin:0px; + position:relative; +} + +.hide-controls { + padding: 0; + .row-tab { + display: none; + } + .add-row-panel-hint { + display: none; + } +} + +.playlist-active { + .add-row-panel-hint, + .dashnav-refresh-action, + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } + + .grafana-menu-stop-playlist { + display: list-item; + } +} + +div.flot-text { + color: $textColor !important; +} + +.panel { + display: inline-block; + float: left; + vertical-align: top; + position: relative; +} + +.panel-margin { + margin: 5px; + display: block; +} + +.panel-container { + background-color: $grafanaPanelBackground; + position: relative; + border: $grafanaPanelBorder; + &:hover { + .panel-actions { + display: block; + } + } + + &.panel-transparent { + background-color: transparent; + border: none; + } +} + +.panel-content { + padding: 0px 10px 5px 10px; +} + +.panel-title-container { + min-height: 5px; + padding-top: 4px; + cursor: pointer; +} + +.panel-title { + border: 0px; + font-weight: $fontWeightSemi; + position: relative; + cursor: pointer; + width: 100%; + display: block; +} + +.panel-links-btn { + margin-left: 10px; + display: none; +} + +.panel-loading { + position:absolute; + top: -3px; + right: 0px; + z-index: 800; +} + +.panel-header { + text-align: center; +} + +.panel-error { + color: $white; + position: absolute; + left: 0; + padding: 0px 17px 6px 5px; + top: 0; + z-index: 10; + i { + position: relative; + top: -2px; + } +} + +.panel-error-arrow { + width: 0; + height: 0; + position: absolute; + border-left: 31px solid transparent; + border-right: 30px solid transparent; + border-bottom: 27px solid $grafanaPanelBackground; + left: 0; + bottom: 0; +} + +.panel-fullscreen { + .panel-title-container { + padding: 8px; + } +} + +.panel-full-edit { + margin-top: 20px; + margin-bottom: 20px; +} + +.panel-menu { + z-index: 500; + position: absolute; + background: $grafanaTargetFuncBackground; + border: 1px solid black; + + .panel-menu-row { + white-space: nowrap; + border-bottom: 1px solid black; + &:last-child { + border-bottom: none; + } + } + + .panel-menu-link, .panel-menu-icon { + padding: 5px 10px; + } + + .panel-menu-link { + display: inline-block; + border-right: 1px solid black; + &:last-child { + border: none; + } + } + + .dropdown-menu { + text-align: left; + } +} + +.panel-highlight { + @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)"); +} + +.on-drag-hover { + .panel-container { + @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)"); + } +} + +.panel-drop-zone { + display: none; + .panel-container { + border: 1px solid $grayDark; + } +} + +.panel-time-info { + font-weight: bold; + float: right; + margin-right: 15px; + color: $blue; + font-size: 85%; + position: absolute; + top: 0; + right: 0; +} + +.resize-panel-handle { + cursor: se-resize; + position: absolute; + bottom: 0; + right: 0; + width: 15px; + height: 15px; + display: block; +} + +.dashboard-header { + font-family: "grafana-icons"; + font-size: 22px; + text-align: center; + span { + display: inline-block; + border: none; + border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); + border-image-slice: 1; + border-bottom: 2px solid transparent; + padding: 1.2rem .2rem .4rem .2rem; + } +} diff --git a/public/less/components/dropdown.scss b/public/less/components/dropdown.scss new file mode 100644 index 00000000000..b9ad1574bb1 --- /dev/null +++ b/public/less/components/dropdown.scss @@ -0,0 +1,236 @@ +// +// Dropdown menus +// -------------------------------------------------- + + +// Use the .menu class on any
    • element within the topbar or ul.tabs and you'll get some superfancy dropdowns +.dropup, +.dropdown { + position: relative; +} +.dropdown-toggle { + // The caret makes the toggle a bit too tall in IE7 + *margin-bottom: -3px; +} +.dropdown-toggle:active, +.open .dropdown-toggle { + outline: 0; +} + +// Dropdown arrow/caret +// -------------------- +.caret { + display: inline-block; + width: 0; + height: 0; + vertical-align: top; + border-top: 4px solid $black; + border-right: 4px solid transparent; + border-left: 4px solid transparent; + content: ""; +} + +// Place the caret +.dropdown .caret { + margin-top: 8px; + margin-left: 2px; +} + +// The dropdown menu (ul) +// ---------------------- +.dropdown-menu { + position: absolute; + top: 100%; + left: 0; + z-index: $zindexDropdown; + display: none; // none by default, but block on "open" of the menu + float: left; + min-width: 140px; + padding: 5px 0; + margin: 2px 0 0; // override default ul + list-style: none; + background-color: $dropdownBackground; + border: 1px solid #ccc; // Fallback for IE7-8 + border: 1px solid $dropdownBorder; + + // Aligns the dropdown menu to right + &.pull-right { + right: 0; + left: auto; + } + + // Links within the dropdown menu + > li > a { + display: block; + padding: 3px 20px 3px 15px; + clear: both; + font-weight: normal; + line-height: $baseLineHeight; + color: $dropdownLinkColor; + white-space: nowrap; + + i { + padding-right: 5px; + color: $linkColorDisabled; + } + } +} + +// Hover/Focus state +// ----------- +.dropdown-menu > li > a:hover, +.dropdown-menu > li > a:focus, +.dropdown-submenu:hover > a, +.dropdown-submenu:focus > a { + text-decoration: none; + color: $dropdownLinkColorHover; + background-color: $grafanaListHighlight; +} + +// Active state +// ------------ +.dropdown-menu > .active > a, +.dropdown-menu > .active > a:hover, +.dropdown-menu > .active > a:focus { + color: $dropdownLinkColorActive; + text-decoration: none; + outline: 0; + background-color: $grafanaListHighlight; +} + +// Disabled state +// -------------- +// Gray out text and ensure the hover/focus state remains gray +.dropdown-menu > .disabled > a, +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + color: $grayLight; +} +// Nuke hover/focus effects +.dropdown-menu > .disabled > a:hover, +.dropdown-menu > .disabled > a:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + cursor: default; +} + +// Open state for the dropdown +// --------------------------- +.open { + & > .dropdown-menu { + display: block; + } +} + +// Backdrop to catch body clicks on mobile, etc. +// --------------------------- +.dropdown-backdrop { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + z-index: $zindexDropdown - 10; +} + +// Right aligned dropdowns +// --------------------------- +.pull-right > .dropdown-menu { + right: 0; + left: auto; +} + +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// ------------------------------------------------------ +// Just add .dropup after the standard .dropdown class and you're set, bro. +// TODO: abstract this so that the navbar fixed styles are not placed here? +.dropup, +.navbar-fixed-bottom .dropdown { + // Reverse the caret + .caret { + border-top: 0; + border-bottom: 4px solid $black; + content: ""; + } + // Different positioning for bottom up menu + .dropdown-menu { + top: auto; + bottom: 100%; + margin-bottom: 1px; + } +} + +// Sub menus +// --------------------------- +.dropdown-submenu { + position: relative; +} +// Default dropdowns +.dropdown-submenu > .dropdown-menu { + top: 0; + left: 100%; + margin-top: -6px; + margin-left: -1px; + @include border-radius(0 6px 6px 6px); +} +.dropdown-submenu:hover > .dropdown-menu { + display: block; +} + +// Dropups +.dropup .dropdown-submenu > .dropdown-menu { + top: auto; + bottom: 0; + margin-top: 0; + margin-bottom: -2px; + @include border-radius(5px 5px 5px 0); +} + +// Caret to indicate there is a submenu +.dropdown-submenu > a:after { + display: block; + content: " "; + float: right; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; + border-width: 5px 0 5px 5px; + border-left-color: darken($dropdownBackground, 20%); + margin-top: 5px; + margin-right: -10px; +} +.dropdown-submenu:hover > a:after { + border-left-color: $dropdownLinkColorHover; +} + +// Left aligned submenus +.dropdown-submenu.pull-left { + // Undo the float + // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. + float: none; + + // Positioning the submenu + > .dropdown-menu { + left: -100%; + margin-left: 10px; + @include border-radius(6px 0 6px 6px); + } +} + +// Tweak nav headers +// ----------------- +// Increase padding from 15px to 20px on sides +.dropdown .dropdown-menu .nav-header { + padding-left: 20px; + padding-right: 20px; +} + +// Typeahead +// --------- +.typeahead { + z-index: 1051; + margin-top: 2px; // give it some space to breathe + @include border-radius($baseBorderRadius); +} diff --git a/public/less/components/filter-controls.scss b/public/less/components/filter-controls.scss new file mode 100644 index 00000000000..287bebe3757 --- /dev/null +++ b/public/less/components/filter-controls.scss @@ -0,0 +1,37 @@ +// ========================================================================== +// FILTER CONTROLS +// ========================================================================== + + + +// Filters +// -------------------------------------------------------------------------- + +.filter-controls-filters { + display: inline-block; + margin-bottom: 40px; +} + +.tab-pane > .filter-controls-filters { + margin-top: 20px; +} + + + +// Actions +// -------------------------------------------------------------------------- + +.filter-controls-actions { + margin: 0 0 10px; + padding: 0; + list-style: none; +} + +.filter-controls-actions > li { + display: inline-block; + margin-right: 10px; +} + +.filter-controls-actions-selected { + text-transform: uppercase; +} diff --git a/public/less/components/filter-list.scss b/public/less/components/filter-list.scss new file mode 100644 index 00000000000..73f8057b686 --- /dev/null +++ b/public/less/components/filter-list.scss @@ -0,0 +1,142 @@ +// ========================================================================== +// FILTER LIST +// ========================================================================== + + + +// List +// -------------------------------------------------------------------------- + +.filter-list { + margin: 0; + padding: 0; + list-style: none; +} + +.filter-list > li { + padding: 10px; + margin-bottom: 2px; + background: $grafanaPanelBackground; + + &:last-child { + margin: 0; + } +} + + + +// Card +// -------------------------------------------------------------------------- + +.filter-list-card { + display: table; + width: 100%; + margin: 0; + padding: 0; + list-style: none; +} + +.filter-list-card > li { + display: table-cell; + vertical-align: top; +} + +.filter-list-card-select { + width: 23px; + padding-right: 5px; +} + +.filter-list-card-title { + display: block; + font-size: 16px; + font-weight: normal; +} + +.filter-list-card-image { + width: 50px; + padding: 5px 50px 5px 5px; +} + + +.filter-list-card-status { + color: #777; + font-size: 12px; +} + +.filter-list-card-state { + display: inline-block; + padding: 5px 0 0 28px; + background: 0 bottom no-repeat; + background-size: 24px auto; + font-size: 14px; + text-transform: uppercase; + + &.online { + background-image: url('/img/online.svg'); + color: $online; + } + + &.warn { + background-image: url('/img/warn-tiny.svg'); + color: $warn; + } + + &.critical { + background-image: url('/img/critical.svg'); + color: $critical; + } +} + +.filter-list-card-controls { + float: right; +} + +.filter-list-card-links, +.filter-list-card-config, +.filter-list-card-expand { + display: inline-block; + vertical-align: middle; +} + +.filter-list-card-link { + display: block; + color: #777; + text-align: right; + + > a { + color: #777; + } +} + +.filter-list-card-config { + padding: 8px 8px 8px 16px; + color: #777; + font-size: 25px; + + > a { + color: #777; + } +} + +.filter-list-card-expand { + width: 20px; + padding: 8px 0 8px 8px; + color: #aaa; + font-size: 30px; + text-align: center; + cursor: pointer; +} + +.filter-list-card-details { + padding: 20px 0 0 30px; +} + +.filter-list-card-details-heading { + font-weight: normal; + + > a { + float: right; + color: $blue; + font-size: 12px; + } +} diff --git a/public/less/components/filter-table.scss b/public/less/components/filter-table.scss new file mode 100644 index 00000000000..28fcefb1b3d --- /dev/null +++ b/public/less/components/filter-table.scss @@ -0,0 +1,57 @@ +// ========================================================================== +// FILTER TABLE +// ========================================================================== + + + +// Table +// -------------------------------------------------------------------------- + +.filter-table * { + box-sizing: border-box; +} + +.filter-table { + width: 100%; + border-collapse: collapse; + // table-layout: fixed; +} + +.filter-table tr { + background: $grafanaListBackground; + border-bottom: 2px solid $pageBackground; +} + +.filter-table th { + width: auto; + padding: 10px 15px 10px 0; + text-align: left; + + &:first-child { + padding-left: 15px; + } +} + +.filter-table td { + padding: 15px 15px 15px 0; + + &:first-child { + padding-left: 15px; + } +} + +.filter-table .ellipsis { + display: block; + width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.filter-table .expanded { + border-color: $grafanaPanelBackground; +} + +.filter-table .expanded > td { + padding-bottom: 0; +} diff --git a/public/less/components/footer.scss b/public/less/components/footer.scss new file mode 100644 index 00000000000..302fd8ee142 --- /dev/null +++ b/public/less/components/footer.scss @@ -0,0 +1,9 @@ +.grafana-version-info { + position: absolute; + bottom: 2px; + left: 3px; + font-size: 80%; + color: darken($gray, 25%); + a { color: darken($gray, 25%); } +} + diff --git a/public/less/components/gf-form.scss b/public/less/components/gf-form.scss new file mode 100644 index 00000000000..78f42e4a68d --- /dev/null +++ b/public/less/components/gf-form.scss @@ -0,0 +1,71 @@ +.gf-form { + margin-top: 3px; + margin-right: 3px; + display: inline-block; + + .checkbox-label { + display: inline; + padding: 8px 7px 8px 4px; + } + .cr1 { + margin-left: 8px; + } +} + +.gf-form-group { + margin-bottom: 20px; +} + +.gf-form-flow { + float: left; + margin-right: 20px; +} + +.gf-form-button-row { + margin-top: 20px; + margin-bottom: 10px; +} + +.gf-form-label { + background-color: $labelBackground; + display: inline-block; + padding: 8px 7px; + @include small; +} + +[type=text], +[type=email], +[type=number], +[type=password], { + &.gf-form-input { + border: none; + margin: 0px; + border-radius: 0; + padding: 8px 6px; + height: 100%; + box-sizing: border-box; + font-size: 15px; + } +} + +input[type=checkbox].gf-form-checkbox { + margin: 0; +} + +select.gf-form-input { + padding: 2px 3px; + font-size: 15px; + box-sizing: content-box; +} + +.gf-size-xs { width: 60px; } +.gf-size-s { width: 80px; } +.gf-size-ms { width: 100px;} +.gf-size-m { width: 110px; } +.gf-size-l { width: 120px; } +.gf-size-xl { width: 150px; } +.gf-size-xxl { width: 200px; } +.gf-size-xxxl { width: 300px; } +.gf-size-auto { width: auto; } + + diff --git a/public/less/components/gfbox.scss b/public/less/components/gfbox.scss new file mode 100644 index 00000000000..544bbe11f1d --- /dev/null +++ b/public/less/components/gfbox.scss @@ -0,0 +1,69 @@ +.gf-box { + margin: 10px 5px; + background-color: $grafanaPanelBackground; + position: relative; + border: 1px solid $grafanaTargetFuncBackground; +} + +.gf-box-no-margin { + margin: 0; +} + +.gf-box-header-close-btn { + float: right; + padding: 0; + margin: 0; + background-color: transparent; + border: none; + padding: 8px; + i { + font-size: 120%; + } + color: $textColor; + &:hover { + color: $white; + } +} + +.gf-box-header-save-btn { + padding: 7px 0; + float: right; + color: $grayLight; + font-style: italic; +} + +.gf-box-body { + padding: 20px; + min-height: 150px; +} + +.gf-box-footer { + overflow: hidden; +} + +.gf-box-header { + border-bottom: 1px solid $grafanaTargetFuncBackground; + overflow: hidden; + background-color: $grafanaTargetBackground; + .tabs { + float: left; + } + .nav { + margin: 0; + } +} + +.gf-box-title { + padding-right: 20px; + padding-left: 10px; + float: left; + color: $linkColor; + font-size: 18px; + font-weight: normal; + line-height: 38px; + margin: 0; + .fa { + padding: 0 8px 0 5px; + color: $textColor; + } +} diff --git a/public/less/components/infobox.scss b/public/less/components/infobox.scss new file mode 100644 index 00000000000..82fd07633bb --- /dev/null +++ b/public/less/components/infobox.scss @@ -0,0 +1,20 @@ +.grafana-info-box:before { + content: "\f05a"; + font-family:'FontAwesome'; + position: absolute; + top: -8px; + left: -8px; + font-size: 20px; + color: $blue; +} + +.grafana-info-box { + position: relative; + padding: 5px 15px; + background-color: $grafanaTargetBackground; + border: 1px solid $grafanaTargetBorder; + h5 { + margin-top: 5px; + } +} + diff --git a/public/less/components/modals.scss b/public/less/components/modals.scss new file mode 100644 index 00000000000..6165766e80f --- /dev/null +++ b/public/less/components/modals.scss @@ -0,0 +1,149 @@ +// +// Modals +// -------------------------------------------------- + +// Background +.modal-backdrop { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: $zindexModalBackdrop; + background-color: $black; +} + +.modal-backdrop, +.modal-backdrop.fade.in { + @include opacity(70); +} + +// Base modal +.modal { + position: fixed; + z-index: $zindexModal; + width: 100%; + background-color: $grafanaPanelBackground; + @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); + @include background-clip(padding-box); + outline: none; + + max-width: 800px; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; + top: 20%; +} + +.modal-header { + padding: 9px 15px; + border-bottom: 1px solid $grafanaPanelBackground; +} + +// Body (where all modal content resides) +.modal-body { + position: relative; + overflow-y: auto; +} + +// Remove bottom margin if need be +.modal-form { + margin-bottom: 0; +} + +// Footer (for actions) +.modal-footer { + padding: 14px 15px 15px; + border-top: 1px solid $grafanaPanelBackground; + background-color: $grafanaPanelBackground; + text-align: right; // right align buttons + @include clearfix(); // clear it in case folks use .pull-* classes on buttons +} + +.modal-no-header { + border: 1px solid $grafanaTargetFuncBackground; + text-align: center; + + h3 { + margin-top: 30px; + } + + .modal-close { + float: right; + font-size: 140%; + padding: 10px; + } + + .modal-tagline { + font-size: 16px; + } +} + +.confirm-modal { + max-width: 500px; + + .confirm-modal-icon { + padding-top: 41px; + font-size: 280%; + color: $green; + padding-bottom: 20px; + } + + .confirm-modal-title { + font-size: 18px; + color: $linkColor; + margin-bottom: 15px; + } + + .confirm-modal-buttons { + margin-top: 35px; + margin-bottom: 35px; + button { + margin-right: 5px + } + } +} + +.share-modal-body { + text-align: center; + padding: 10px 0; + + .tight-form { + text-align: left; + } + + .share-modal-options { + margin: 11px 20px 33px 20px; + } + + .share-modal-big-icon { + .fa, .icon-gf { + font-size: 70px; + } + } + + .share-snapshot-info-text { + margin: 10px 105px; + strong { + color: $headingsColor; + font-weight: 500; + } + } + + .share-snapshot-header { + margin: 20px 0 22px 0; + } + + .tight-form { + text-align: left; + } + + .share-snapshot-link { + max-width: 716px; + white-space: nowrap; + overflow: hidden; + display: block; + text-overflow: ellipsis; + } +} diff --git a/public/less/components/navbar.scss b/public/less/components/navbar.scss new file mode 100644 index 00000000000..92aaf8b2176 --- /dev/null +++ b/public/less/components/navbar.scss @@ -0,0 +1,178 @@ + + +.navbar { + overflow: visible; + position: relative; + z-index: 110; +} + +.navbar-inner { + min-height: $navbarHeight; + padding-right: 20px; + background-color: $navbarBackground; + border-bottom: $navbarBorder; + + @include clearfix(); +} + +.navbar .nav { + position: relative; + left: 0; + float: left; + margin: 0 10px 0 0; +} + +.nav { + display: block; +} + +.navbar .nav.pull-right { + float: right; // redeclare due to specificity + margin-right: 0; // remove margin on float right nav +} + +.navbar .nav > li { + float: left; +} + +// Links +.navbar .nav > li > a { + float: none; + padding: 17px 13px 13px; + color: $navbarLinkColor; + text-decoration: none; + + .fa { font-size: 115%; } +} + +// Hover/focus +.navbar .nav > li > a:focus, +.navbar .nav > li > a:hover { + background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active + color: $navbarLinkColorHover; + text-decoration: none; +} + +// Active nav items +.navbar .nav > .active > a, +.navbar .nav > .active > a:hover, +.navbar .nav > .active > a:focus { + color: $navbarLinkColorActive; + text-decoration: none; + background-color: $navbarLinkBackgroundActive; +} + + +.fa.top-nav-breadcrumb-icon { + margin: 18px 0 6px 5px; + float: left; + font-size: 120%; + color: $textColor; +} + +.top-nav-btn { + display: block; + position: relative; + float: left; + margin: 0; + font-size: 1.4em; + border-right: 1px solid $grafanaTargetBorder; + + .fa-caret-down { + font-size: 55%; + position: absolute; + right: 8px; + top: 23px; + margin-right: 2px; + } + + a { + color: darken($linkColor, 5%); + background-color: $navbarButtonBackground; + display: inline-block; + &:hover { + background: $navbarButtonBackgroundHighlight; + color: $linkColor; + // border-bottom: 1px solid $blue; + } + } +} + +.top-nav-menu-btn { + a { + padding: 7px 20px 6px 13px; + } + img { + width: 30px; + position: relative; + } + .top-nav-logo-background { + display: inline-block; + border: 1px solid $bodyBackground; + padding: 4px; + border-radius: 50%; + background: $iconContainerBackground; + width: 30px; + height: 30px; + } + .icon-gf-grafana_wordmark { + font-size: 21px; + position: relative; + top: 4px; + padding-left: 5px; + display: none; + } +} + +.dashnav-dashboards-btn { + a { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + display: block; + padding: 16px 17px 16px 13px; + } + + .fa-th-large { + position: relative; + top: 2px; + } + + .icon-gf { + position: relative; + top: 2px; + font-size: 20px; + line-height: 8px; + } +} + +.dashboard-title { + padding: 0px 6px 5px 5px; + font-size: 17px; +} + +.top-nav-icon { + margin: 5px 0px 0 11px; + line-height: 41px; + float: left; +} + +.top-nav-section { + display: block; + float: left; + padding: 19px 9px 8px 0; + font-weight: bold; + i { + padding-left: 8px; + } +} + +.top-nav-title { + display: block; + float: left; + font-size: 17px; + padding: 18px 10px 10px 13px; + color: $linkColor; +} + + diff --git a/public/less/components/navs.scss b/public/less/components/navs.scss new file mode 100644 index 00000000000..8e67bd677f2 --- /dev/null +++ b/public/less/components/navs.scss @@ -0,0 +1,200 @@ +// +// Navs +// -------------------------------------------------- + + +// BASE CLASS +// ---------- + +.nav { + margin-left: 0; + margin-bottom: $baseLineHeight; + list-style: none; +} + +// Make links block level +.nav > li > a { + display: block; +} +.nav > li > a:hover, +.nav > li > a:focus { + text-decoration: none; + background-color: $grayLighter; +} + +// Redeclare pull classes because of specifity +.nav > .pull-right { + float: right; +} + +// Nav headers (for dropdowns and lists) +.nav-header { + display: block; + padding: 3px 15px; + font-size: 11px; + font-weight: bold; + line-height: $baseLineHeight; + color: $grayLight; + text-shadow: 0 1px 0 rgba(255,255,255,.5); + text-transform: uppercase; +} +// Space them out when they follow another list item (link) +.nav li + .nav-header { + margin-top: 9px; +} + + + +// NAV LIST +// -------- + +.nav-list { + padding-left: 15px; + padding-right: 15px; + margin-bottom: 0; +} +.nav-list > li > a, +.nav-list .nav-header { + margin-left: -15px; + margin-right: -15px; + text-shadow: 0 1px 0 rgba(255,255,255,.5); +} +.nav-list > li > a { + padding: 3px 15px; +} +.nav-list > .active > a, +.nav-list > .active > a:hover, +.nav-list > .active > a:focus { + color: $white; + text-shadow: 0 -1px 0 rgba(0,0,0,.2); + background-color: $linkColor; +} +.nav-list [class^="icon-"], +.nav-list [class*=" icon-"] { + margin-right: 2px; +} + +// TABS AND PILLS +// ------------- + +// Common styles +.nav-tabs, +.nav-pills { + @include clearfix(); +} +.nav-tabs > li, +.nav-pills > li { + float: left; +} +.nav-tabs > li > a, +.nav-pills > li > a { + padding-right: 12px; + padding-left: 12px; + margin-right: 2px; + line-height: 14px; // keeps the overall height an even number +} + +// TABS +// ---- + +// Give the tabs something to sit on +.nav-tabs { + border-bottom: 1px solid #ddd; +} +// Make the list-items overlay the bottom border +.nav-tabs > li { + margin-bottom: -1px; +} +// Actual tabs (as links) +.nav-tabs > li > a { + padding-top: 8px; + padding-bottom: 8px; + line-height: $baseLineHeight; + border: 1px solid transparent; + @include border-radius(4px 4px 0 0); + &:hover, + &:focus { + border-color: $grayLighter $grayLighter #ddd; + } +} +// Active state, and it's :hover/:focus to override normal :hover/:focus +.nav-tabs > .active > a, +.nav-tabs > .active > a:hover, +.nav-tabs > .active > a:focus { + color: $gray; + background-color: $bodyBackground; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; +} + + +// Default dropdown links +// ------------------------- +// Make carets use linkColor to start +.nav .dropdown-toggle .caret { + border-top-color: $linkColor; + border-bottom-color: $linkColor; + margin-top: 6px; +} +.nav .dropdown-toggle:hover .caret, +.nav .dropdown-toggle:focus .caret { + border-top-color: $linkColorHover; + border-bottom-color: $linkColorHover; +} +/* move down carets for tabs */ +.nav-tabs .dropdown-toggle .caret { + margin-top: 8px; +} + +// Active dropdown links +// ------------------------- +.nav .active .dropdown-toggle .caret { + border-top-color: #fff; + border-bottom-color: #fff; +} +.nav-tabs .active .dropdown-toggle .caret { + border-top-color: $gray; + border-bottom-color: $gray; +} + +// Active:hover/:focus dropdown links +// ------------------------- +.nav > .dropdown.active > a:hover, +.nav > .dropdown.active > a:focus { + cursor: pointer; +} + +// Open dropdowns +// ------------------------- +.nav-tabs .open .dropdown-toggle, +.nav-pills .open .dropdown-toggle, +.nav > li.dropdown.open.active > a:hover, +.nav > li.dropdown.open.active > a:focus { + color: $white; + background-color: $grayLight; + border-color: $grayLight; +} +.nav li.dropdown.open .caret, +.nav li.dropdown.open.active .caret, +.nav li.dropdown.open a:hover .caret, +.nav li.dropdown.open a:focus .caret { + border-top-color: $white; + border-bottom-color: $white; + @include opacity(100); +} + +// Dropdowns in stacked tabs +.tabs-stacked .open > a:hover, +.tabs-stacked .open > a:focus { + border-color: $grayLight; +} + +// Show/hide tabbable areas +.tab-content > .tab-pane { + display: none; +} + +.tab-content > .active { + display: block; +} diff --git a/public/less/components/old_stuff.scss b/public/less/components/old_stuff.scss new file mode 100644 index 00000000000..eae5eb558ce --- /dev/null +++ b/public/less/components/old_stuff.scss @@ -0,0 +1,20 @@ + +div.editor-row { + vertical-align: top; +} + +div.editor-row div.section { + margin-right: 20px; + vertical-align: top; + display: inline-block; +} + +div.editor-option { + vertical-align: top; + display: inline-block; + margin-right: 10px; +} + +div.editor-option label { + display: block; +} diff --git a/public/less/components/pagination.scss b/public/less/components/pagination.scss new file mode 100644 index 00000000000..7d67a980cf6 --- /dev/null +++ b/public/less/components/pagination.scss @@ -0,0 +1,113 @@ +.pagination { +} + +.pagination ul { + display: inline-block; + margin-left: 0; + margin-bottom: 0; + @include border-radius($baseBorderRadius); + @include box-shadow(0 1px 2px rgba(0,0,0,.05)); +} +.pagination ul > li { + display: inline; // Remove list-style and block-level defaults +} +.pagination ul > li > a, +.pagination ul > li > span { + float: left; // Collapse white-space + padding: 4px 12px; + line-height: $baseLineHeight; + text-decoration: none; + background-color: $paginationBackground; + border: 1px solid $paginationBorder; + border-left-width: 0; +} +.pagination ul > li > a:hover, +.pagination ul > li > a:focus, +.pagination ul > .active > a, +.pagination ul > .active > span { + background-color: $paginationActiveBackground; +} +.pagination ul > .active > a, +.pagination ul > .active > span { + color: $grayLight; + cursor: default; +} +.pagination ul > .disabled > span, +.pagination ul > .disabled > a, +.pagination ul > .disabled > a:hover, +.pagination ul > .disabled > a:focus { + color: $grayLight; + background-color: transparent; + cursor: default; +} +.pagination ul > li:first-child > a, +.pagination ul > li:first-child > span { + border-left-width: 1px; + @include border-left-radius($baseBorderRadius); +} +.pagination ul > li:last-child > a, +.pagination ul > li:last-child > span { + @include border-right-radius($baseBorderRadius); +} + + +// Alignment +// -------------------------------------------------- + +.pagination-centered { + text-align: center; +} +.pagination-right { + text-align: right; +} + + +// Sizing +// -------------------------------------------------- + +// Large +.pagination-large { + ul > li > a, + ul > li > span { + padding: $paddingLarge; + font-size: $fontSizeLarge; + } + ul > li:first-child > a, + ul > li:first-child > span { + @include border-left-radius($borderRadiusLarge); + } + ul > li:last-child > a, + ul > li:last-child > span { + @include border-right-radius($borderRadiusLarge); + } +} + +// Small and mini +.pagination-mini, +.pagination-small { + ul > li:first-child > a, + ul > li:first-child > span { + @include border-left-radius($borderRadiusSmall); + } + ul > li:last-child > a, + ul > li:last-child > span { + @include border-right-radius($borderRadiusSmall); + } +} + +// Small +.pagination-small { + ul > li > a, + ul > li > span { + padding: $paddingSmall; + font-size: $fontSizeSmall; + } +} +// Mini +.pagination-mini { + ul > li > a, + ul > li > span { + padding: $paddingMini; + font-size: $fontSizeMini; + } +} diff --git a/public/less/components/panel_dashlist.scss b/public/less/components/panel_dashlist.scss new file mode 100644 index 00000000000..4847d41d144 --- /dev/null +++ b/public/less/components/panel_dashlist.scss @@ -0,0 +1,22 @@ +.dashlist-item { + +} + +.dashlist-link { + display: block; + margin: 5px; + padding: 7px; + background-color: $grafanaTargetBackground; + border: 1px solid $grafanaTargetBorder; + .fa { + float: right; + padding-top: 3px; + } + .fa-star { + color: $orange; + } + + &:hover { + background-color: $grafanaTargetFuncBackground; + } +} diff --git a/public/less/components/panel_graph.scss b/public/less/components/panel_graph.scss new file mode 100644 index 00000000000..e527507bef5 --- /dev/null +++ b/public/less/components/panel_graph.scss @@ -0,0 +1,298 @@ +.graph-canvas-wrapper { + position: relative; + cursor: crosshair; +} + +.histogram-chart { + position: relative; +} + +.datapoints-warning { + pointer: none; + position: absolute; + top: 50%; + left: 50%; + z-index: 10; + margin-top: -50px; + margin-left: -100px; + width: 200px; + text-align: center; + cursor: auto; + padding: 10px; +} + +.graph-legend { + margin: 0 20px; + text-align: center; + + .popover-content { + padding: 0; + } +} + +.graph-legend-icon { + position: relative; + padding-right: 4px; + top: 1px; +} + +.graph-legend-icon, +.graph-legend-alias, +.graph-legend-value { + float: left; + white-space: nowrap; + font-size: 85%; + text-align: left; + &.current:before { + content: "Current: " + } + &.max:before { + content: "Max: " + } + &.min:before { + content: "Min: " + } + &.total:before { + content: "Total: " + } + &.avg:before { + content: "Avg: " + } +} + +.graph-legend-icon .fa { + font-size: 135%; + position: relative; + top: 1px; +} + +.graph-legend-series { + float: left; + white-space: nowrap; + padding-left: 10px; + padding-top: 6px; +} + +.graph-legend-value { + padding-left: 6px; +} + +.graph-legend-table { + width: 100%; + margin: 0; + + .graph-legend-series { + display: table-row; + float: none; + padding-left: 0; + &.pull-right { + float: none; + } + } + + td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value { + float: none; + display: table-cell; + white-space: nowrap; + padding: 2px 10px; + text-align: right; + } + + .graph-legend-icon { + width: 5px; + padding: 0; + top: 0; + .fa { + top: 4px; + } + } + + .graph-legend-value { + padding-left: 15px; + } + + .graph-legend-alias { + padding-left: 7px; + text-align: left; + width: 95%; + } + + .graph-legend-series:nth-child(odd) { + background-color: $grafanaListAccent; + } + + .graph-legend-value { + &.current, &.max, &.min, &.total, &.avg { + &:before { + content: ''; + } + } + } + + th { + text-align: right; + padding: 0px 10px 1px 0; + font-weight: bold; + color: $blue; + font-size: 85%; + white-space: nowrap; + } +} + +.graph-legend-rightside { + + &.graph-wrapper { + display: table; + width: 100%; + } + + .graph-canvas-wrapper { + display: table-cell; + width: 100%; + position: relative; + } + + .graph-legend-wrapper { + display: table-cell; + vertical-align: top; + position: relative; + left: 4px; + } + + .graph-legend { + margin: 0; + } + + .graph-legend-series { + display: block; + padding-left: 0px; + } + + .graph-legend-table .graph-legend-series { + display: table-row; + } +} + +.graph-legend-series-hidden { + a { + color: $linkColorDisabled; + } +} + +.graph-legend-popover { + width: 200px; + min-height: 100px; + label { + display: inline-block; + } + .btn { + padding: 1px 3px; + margin-right: 0px; + line-height: initial; + } + .close { + margin-right: 5px; + color: $linkColor; + opacity: 0.7; + text-shadow: none; + } + .editor-row { + padding: 5px; + } +} + +.annotation-tags { + color: $purple; +} + +.graph-series-override { + input { + float: left; + margin-right: 10px; + } + .graph-series-override-option { + float: left; + padding: 2px 6px; + } + .graph-series-override-selector { + float: left; + } +} + +.graph-tooltip { + white-space: nowrap; + + .graph-tooltip-time { + text-align: center; + font-weight: $fontWeightSemi; + position: relative; + top: -3px; + } + + .tone-down { + opacity: 0.7; + } + + .label-tag { + margin-right: 4px; + margin-top: 8px; + } + + .graph-tooltip-list-item { + display: table-row; + } + + .graph-tooltip-series-name { + display: table-cell; + } + + .graph-tooltip-value { + display: table-cell; + font-weight: bold; + padding-left: 10px; + text-align: right; + } +} + +.left-yaxis-label { + top: 50%; + left: -5px; + transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform-origin: left top; + -o-transform-origin: left top; + -ms-transform-origin: left top; + -moz-transform-origin: left top; + -webkit-transform-origin: left top; +} + +.right-yaxis-label { + top: 50%; + right: -5px; + + -webkit-transform: rotate(90deg); + -webkit-transform-origin: right top; + -moz-transform: rotate(90deg); + -moz-transform-origin: right top; + -ms-transform: rotate(90deg); + -ms-transform-origin: right top; + -o-transform: rotate(90deg); + -o-transform-origin: right top; + transform: rotate(90deg); + transform-origin: right top; +} + +.axisLabel { + color: $textColor; + font-size: $fontSizeSmall; + position: absolute; + text-align: center; + font-size: 12px; +} + +.graph-legend-fixed-height { + overflow-y: scroll; +} diff --git a/public/less/components/panel_singlestat.scss b/public/less/components/panel_singlestat.scss new file mode 100644 index 00000000000..84de79c387e --- /dev/null +++ b/public/less/components/panel_singlestat.scss @@ -0,0 +1,51 @@ +.singlestat-panel { + position: relative; + display: table; + width: 100%; +} + +.singlestat-panel-value-container { + padding: 20px; + display: table-cell; + vertical-align: middle; + text-align: center; + position: relative; + z-index: 1; + font-size: 3em; + font-weight: bold; +} + +.singlestat-panel-prefix { + padding-right: 20px; +} + +.singlestat-panel-table { + width: 100%; + td { + padding: 5px 10px; + white-space: nowrap; + text-align: right; + border-bottom: 1px solid $grafanaListBorderBottom; + } + + th { + text-align: right; + padding: 5px 10px; + font-weight: bold; + color: $blue + } + + td:first-child { + text-align: left; + } + + tr:nth-child(odd) td { + background-color: $grafanaListAccent; + } + + tr:last-child td { + border: none; + } +} + + diff --git a/public/less/components/panel_table.scss b/public/less/components/panel_table.scss new file mode 100644 index 00000000000..ad30d3d0d64 --- /dev/null +++ b/public/less/components/panel_table.scss @@ -0,0 +1,101 @@ +.table-panel-wrapper { + .panel-content { + padding: 0; + } + .panel-title-container { + padding-bottom: 4px; + } +} + +.table-panel-scroll { + overflow: auto; +} + +.table-panel-container { + padding-top: 2.2em; + position: relative; +} + +.table-panel-footer { + text-align: center; + font-size: 90%; + line-height: 2px; + + ul { + position: relative; + display: inline-block; + margin-left: 0; + margin-bottom: 0; + } + ul > li { + display: inline; // Remove list-style and block-level defaults + } + ul > li > a { + float: left; // Collapse white-space + padding: 4px 12px; + text-decoration: none; + border-left-width: 0; + + &:hover { + background-color: $grafanaTargetFuncBackground; + } + + &.active { + font-weight: bold; + color: $blue; + } + } +} + +.table-panel-table { + width: 100%; + border-collapse: collapse; + + th { + padding: 0; + + &:first-child { + .table-panel-table-header-inner { + padding-left: 15px; + } + } + } + + td { + padding: 0.45em 0 0.45em 1.1em; + border-bottom: 2px solid $bodyBackground; + border-right: 2px solid $bodyBackground; + + &:first-child { + padding-left: 15px; + } + &:last-child { + border-right: none; + } + } +} + +.table-panel-header-bg { + background: $grafanaListAccent; + border-top: 2px solid $bodyBackground; + border-bottom: 2px solid $bodyBackground; + height: 2.0em; + position: absolute; + top: 0; + right: 0; + left: 0; +} + +.table-panel-table-header-inner { + padding: 0.45em 0 0.45em 1.1em; + text-align: left; + color: $blue; + position: absolute; + top: 0; +} + +.table-panel-width-hack { + visibility: hidden; + height: 0px; + line-height: 0px; +} diff --git a/public/less/components/popovers.scss b/public/less/components/popovers.scss new file mode 100644 index 00000000000..cf9ea93b80b --- /dev/null +++ b/public/less/components/popovers.scss @@ -0,0 +1,128 @@ +// +// Popovers +// -------------------------------------------------- + + +.popover { + position: absolute; + top: 0; + left: 0; + z-index: $zindexPopover; + display: none; + max-width: 480px; + padding: 1px; + text-align: left; // Reset given new insertion method + background-color: $popoverBackground; + background-clip: padding-box; + border: 1px solid #ccc; + border: 1px solid rgba(0,0,0,.2); + @include box-shadow(0 5px 10px rgba(0,0,0,.2)); + + // Overrides for proper insertion + white-space: normal; + + // Offset the popover to account for the popover arrow + &.top { margin-top: -10px; } + &.right { margin-left: 10px; } + &.bottom { margin-top: 10px; } + &.left { margin-left: -10px; } +} + +.popover-title { + margin: 0; // reset heading margin + padding: 8px 14px; + font-size: 14px; + font-weight: normal; + line-height: 18px; + background-color: $popoverTitleBackground; + + &:empty { + display: none; + } +} + +.popover-content { + padding: 9px 14px; +} + +// Arrows +// +// .arrow is outer, .arrow:after is inner + +.popover .arrow, +.popover .arrow:after { + position: absolute; + display: block; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.popover .arrow { + border-width: $popoverArrowOuterWidth; +} +.popover .arrow:after { + border-width: $popoverArrowWidth; + content: ""; +} + +.popover { + &.top .arrow { + left: 50%; + margin-left: -$popoverArrowOuterWidth; + border-bottom-width: 0; + border-top-color: #999; // IE8 fallback + border-top-color: $popoverArrowOuterColor; + bottom: -$popoverArrowOuterWidth; + &:after { + bottom: 1px; + margin-left: -$popoverArrowWidth; + border-bottom-width: 0; + border-top-color: $popoverArrowColor; + } + } + &.right .arrow { + top: 50%; + left: -$popoverArrowOuterWidth; + margin-top: -$popoverArrowOuterWidth; + border-left-width: 0; + border-right-color: #999; // IE8 fallback + border-right-color: $popoverArrowOuterColor; + &:after { + left: 1px; + bottom: -$popoverArrowWidth; + border-left-width: 0; + border-right-color: $popoverArrowColor; + } + } + &.bottom .arrow { + left: 50%; + margin-left: -$popoverArrowOuterWidth; + border-top-width: 0; + border-bottom-color: #999; // IE8 fallback + border-bottom-color: $popoverArrowOuterColor; + top: -$popoverArrowOuterWidth; + &:after { + top: 1px; + margin-left: -$popoverArrowWidth; + border-top-width: 0; + border-bottom-color: $popoverArrowColor; + } + } + + &.left .arrow { + top: 50%; + right: -$popoverArrowOuterWidth; + margin-top: -$popoverArrowOuterWidth; + border-right-width: 0; + border-left-color: #999; // IE8 fallback + border-left-color: $popoverArrowOuterColor; + &:after { + right: 1px; + border-right-width: 0; + border-left-color: $popoverArrowColor; + bottom: -$popoverArrowWidth; + } + } + +} diff --git a/public/less/components/query_editor.scss b/public/less/components/query_editor.scss new file mode 100644 index 00000000000..fe8d3fb157c --- /dev/null +++ b/public/less/components/query_editor.scss @@ -0,0 +1,16 @@ +.query-keyword { + font-weight: bold; + color: $blue; +} + +.query-segment-key { + border-right: none; + padding-right: 1px; +} + +.query-segment-operator { + padding-right: 1px; + border-right: none; + color: $orange; +} + diff --git a/public/less/components/scrollbar.scss b/public/less/components/scrollbar.scss new file mode 100644 index 00000000000..85227625a8d --- /dev/null +++ b/public/less/components/scrollbar.scss @@ -0,0 +1,41 @@ +// +// Srollbars +// + +::-webkit-scrollbar { + width: 8px; + height: 8px; +} + +::-webkit-scrollbar:hover { + height: 8px; +} + +::-webkit-scrollbar-button:start:decrement, +::-webkit-scrollbar-button:end:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement { display: none; } +::-webkit-scrollbar-button:horizontal:increment { display: none; } +::-webkit-scrollbar-button:vertical:decrement { display: none; } +::-webkit-scrollbar-button:vertical:increment { display: none; } +::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } +::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } +::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } +::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } +::-webkit-scrollbar-track-piece { background-color: transparent; } + +::-webkit-scrollbar-thumb:vertical { + height: 50px; + background: -webkit-gradient(linear, left top, right top, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2)); + border: 1px solid $scrollbarBorder; + border-top: 1px solid $scrollbarBorder; + border-left: 1px solid $scrollbarBorder; +} + +::-webkit-scrollbar-thumb:horizontal { + width: 50px; + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $scrollbarBackground), color-stop(100%, $scrollbarBackground2)); + border: 1px solid $scrollbarBorder; + border-top: 1px solid $scrollbarBorder; + border-left: 1px solid $scrollbarBorder; +} + diff --git a/public/less/components/search.scss b/public/less/components/search.scss new file mode 100644 index 00000000000..1a117f252b9 --- /dev/null +++ b/public/less/components/search.scss @@ -0,0 +1,107 @@ +.search-container { + left: 72px; + top: 39px; + margin: 16px 0 0 2px; + z-index: 1000; + position: absolute; + width: 700px; + box-shadow: $searchShadow; + padding: 10px; + background-color: $grafanaPanelBackground; + border: $grafanaPanelBorder; + + .label-tag { + margin-left: 6px; + font-size: 11px; + padding: 2px 6px; + } +} + +// Search +.search-field-wrapper { + padding-bottom: 10px; + input { + width: 100%; + padding: 8px 8px; + height: 100%; + box-sizing: border-box; + } + button { + margin: 0 4px 0 0; + } + > span { + display: block; + overflow: hidden; + } +} + +.search-results-container { + height: 450px; + overflow: auto; + display: block; + line-height: 28px; + + .search-item:hover, .search-item.selected { + background-color: $grafanaListHighlight; + } + + .selected { + .search-result-tag { + opacity: 0.70; + color: white; + } + } + + .fa-star, .fa-star-o { + padding-left: 13px; + } + + .fa-star { + color: $orange; + } + + .search-result-link { + color: $grafanaListMainLinkColor; + .fa { + padding-right: 10px; + } + } + + .search-item { + display: block; + padding: 3px 10px; + white-space: nowrap; + background-color: $grafanaListBackground; + margin-bottom: 4px; + .search-result-icon:before { + content: "\f009"; + } + + &.search-item-dash-home .search-result-icon:before { + content: "\f015"; + } + } + + .search-result-tags { + float: right; + } + + .search-result-actions { + float: right; + padding-left: 20px; + } +} + +.search-switches { + position: absolute; + top: 19px; + right: 21px; +} + +.search-button-row { + padding-top: 20px; + button, a { + margin-right: 10px; + } +} + diff --git a/public/less/components/shortcuts.scss b/public/less/components/shortcuts.scss new file mode 100644 index 00000000000..ed639b6292c --- /dev/null +++ b/public/less/components/shortcuts.scss @@ -0,0 +1,6 @@ +.shortcut-table { + td { padding: 3px; } + th:last-child { text-align: left; } + td:first-child { text-align: right; } +} + diff --git a/public/less/components/sidemenu.scss b/public/less/components/sidemenu.scss new file mode 100644 index 00000000000..ec6c23fc984 --- /dev/null +++ b/public/less/components/sidemenu.scss @@ -0,0 +1,220 @@ +$sideMenuWidth: 220px; + +.sidemenu-canvas { + position: relative; +} + +.sidemenu-wrapper { + position: absolute; + top: 52px; + left: 0; + width: $sideMenuWidth; + background-color: $bodyBackground; + z-index: 101; + transform: translate3d(0, -100%, 0); + visibility: hidden; + + a:focus { + text-decoration: none; + } +} + +.sidemenu-open { + .sidemenu-wrapper { + visibility: visible; + transform: translate3d(0, 0, 0); + transition: all 0.2s; + } +} + +.sidemenu-pinned { + .sidemenu-wrapper { + min-height: 100%; + } + .dashboard-container { + padding-left: $sideMenuWidth; + } + .page-container { + margin-left: 195px; + padding-left: 77px; + } + .top-nav-menu-btn { + a { + background-color: $pageBackground; + padding-right: 67px; + padding-left: 22px; + } + .icon-gf-grafana_wordmark { + display: inline-block; + } + .fa { + display: none; + } + } + .sidemenu-org { + box-shadow: none; + } + .search-container { + left: auto; + } +} + +.sidemenu { + font-weight: $baseFontWeight; + list-style: none; + margin: 0; + padding: 0; + + li { + position: relative; + + &:hover { + .dropdown-menu { + display: block; + top: 0px; + left: $sideMenuWidth; + background-color: $bodyBackground; + } + } + } +} + +.sidemenu-main-link { + font-size: 16px; +} + +.sidemenu-item-text { + width: 110px; + display: inline-block; + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.icon-circle { + width: 40px; + height: 40px; + display: inline-block; + i { + color: $linkColor; + opacity: .7; + position: relative; + left: 7px; + top: 5px; + font-size: 150%; + } + img { + left: 7px; + position: relative; + } +} + +.sidemenu-item { + color: $linkColor; + line-height: 47px; + padding: 0px 10px 0px 10px; + display: block; + + &:hover { + background-color: $sideMenuBackgroundHighlight; + } + + .sidemenu-item-text { + padding-left: 11px; + } + + img { + border-radius: 50%; + width: 28px; + height: 28px; + box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05); + } +} + +.sidemenu-section-tagline { + font-style: italic; + line-height: 10px; +} + +.sidemenu-section-text-wrapper { + padding-top: 4px; +} + +.sidemenu-org-section .dropdown-menu-title { + margin: 0 10px 0 6px; + padding: 7px 0 7px; + overflow: hidden; + color: $dropdownTitle; +} + +.sidemenu-org-section .dropdown-menu-title > span { + display: inline-block; + position: relative; + + &:after { + display: block; + position: absolute; + top: 50%; + right: 0; + left: 100%; + width: 200px; + height: 1px; + margin-left: 5px; + background: $dropdownDivider; + content: ''; + } +} + +.sidemenu-org { + padding: 17px 10px 15px 14px; + box-sizing: border-box; + cursor: pointer; + &:hover { + background-color: $sideMenuBackgroundHighlight; + } + display: table; + position: relative; + width: 100%; +} + +.sidemenu .fa-caret-right { + position: absolute; + top: 38%; + right: 25px; + font-size: 14px; + color: $linkColor; +} + +.sidemenu-org-avatar, +.sidemenu-org-details { + display: table-cell; + vertical-align: top; +} + +.sidemenu-org-avatar { + width: 44px; +} + +.sidemenu-org-avatar > img { + width: 40px; + height: 40px; + border-radius: 50%; + position: absolute; +} + +.sidemenu-org-details { + padding-left: 10px; + color: $linkColor; +} + +.sidemenu-org-name { + display: block; + font-size: 13px; + color: $linkColorDisabled; +} + +.sidemenu-org-user { + display: block; +} + diff --git a/public/less/components/submenu.scss b/public/less/components/submenu.scss new file mode 100644 index 00000000000..b4a7154aee5 --- /dev/null +++ b/public/less/components/submenu.scss @@ -0,0 +1,133 @@ +.submenu-controls { + margin: 10px 5px; + font-size: 16px; +} + +.annotation-disabled, .annotation-disabled a { + color: $linkColorDisabled; +} + +.annotation-segment { + label.cr1 { + margin-left: 5px; + } + padding: 8px 7px; +} + +.submenu-item { + margin-right: 20px; + display: inline-block; + border-radius: 3px; + background-color: $grafanaPanelBackground; + border: $grafanaPanelBorder; + margin-right: 10px; + display: inline-block; + + .fa-caret-down { + font-size: 75%; + position: relative; + top: 1px; + } +} + +.variable-value-link { + font-size: 16px; + padding-right: 10px; + .label-tag { + margin: 0 5px; + } +} + +.variable-link-wrapper { + display: inline-block; + position: relative; +} + +.variable-value-dropdown { + position: absolute; + top: 47px; + min-width: 150px; + max-height: 400px; + min-height: 150px; + overflow-y: auto; + overflow-x: hidden; + background-color: $dropdownBackground; + box-shadow: 0 0 25px 0 rgba(0,0,0,0.4); + z-index: 1000; + font-size: $baseFontSize; + border-radius: 3px 3px 0 0; + border: 1px solid $grafanaTargetFuncBackground; + + &.multi { + .selected { + .variable-option-icon{ + background: url($checkboxImageUrl) 0px -18px no-repeat; + } + } + } + + &.single { + .variable-option-icon { + display: none; + } + .selected { + background-color: $grafanaTargetFuncHightlight; + } + } +} + +.variable-options-wrapper { + display: table; + width: 100%; +} + +.variable-options-column { + max-height: 350px; + display: table-cell; + line-height: 26px; + &:nth-child(2) { + border-left: 1px solid $grafanaTargetFuncBackground; + } +} + +.variable-option-tag, +.variable-option, +.variable-options-column-header { + display: block; + padding: 2px 27px 0 8px; + position: relative; + white-space: nowrap; + min-width: 115px; +} + +.variable-options-column-header { + padding-top: 5px; + padding-bottom: 5px; + margin-bottom: 5px; + &.many-selected { + .variable-option-icon { + background: url($checkboxImageUrl) 0px -36px no-repeat; + } + } +} + +.variable-option-icon { + display: inline-block; + width: 24px; + height: 18px; + position: relative; + top: 4px; + background: url($checkboxImageUrl) left top no-repeat; +} + +.variable-option { + &:hover, &.highlighted { + background-color: $blueDark; + } +} + +.dash-nav-link { + padding: 8px 7px; + display: inline-block; + color: $textColor; +} diff --git a/public/less/components/tables_lists.scss b/public/less/components/tables_lists.scss new file mode 100644 index 00000000000..f6d1edf35bc --- /dev/null +++ b/public/less/components/tables_lists.scss @@ -0,0 +1,43 @@ +.grafana-options-table { + width: 100%; + + th { + text-align: left; + padding: 5px 10px; + border-bottom: 4px solid $grafanaPanelBackground; + } + + tr td { + background-color: $grafanaListBackground; + padding: 5px 10px; + white-space: nowrap; + border-bottom: 4px solid $grafanaPanelBackground; + &.nobg { + background-color: transparent; + } + } + + .max-width-btns { + padding-right: 0px; + .btn { + box-sizing: border-box; + width: 100%; + } + } +} + +.max-width { + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + white-space: nowrap; +} + +.grafana-list-item { + display: block; + padding: 1px 10px; + line-height: 34px; + background-color: $grafanaTargetBackground; + margin-bottom: 4px; + cursor: pointer; +} diff --git a/public/less/components/tabs.scss b/public/less/components/tabs.scss new file mode 100644 index 00000000000..792314df2d3 --- /dev/null +++ b/public/less/components/tabs.scss @@ -0,0 +1,40 @@ + +.nav-tabs-alt { + border-bottom: $grafanaTriggerBorder; + padding-left: 10px; + margin: 0 0 10px 0; + + & > li > a { + color: darken($linkColor, 20%); + } + + li > a:hover { + border-bottom: none; + } + + li.active > a, + li.active > a:focus, + li.active > a:hover { + @include border-radius(3px); + border: $grafanaTriggerBorder; + background-color: transparent; + border-bottom: 1px solid $grafanaPanelBackground; + color: $linkColor; + } + + li.disabled > a { + color: $textColor; + } + + .open .dropdown-toggle { + background-color: #060606; + border-color: transparent; + } + + .tab-content { + padding: 10px; + background-color: $grafanaPanelBackground; + } +} + + diff --git a/public/less/components/tags.scss b/public/less/components/tags.scss new file mode 100644 index 00000000000..c0aa1bd23a5 --- /dev/null +++ b/public/less/components/tags.scss @@ -0,0 +1,39 @@ +// Base classes +.label, +.badge { + display: inline-block; + padding: 2px 4px; + font-size: $baseFontSize * .846; + font-weight: bold; + line-height: 14px; // ensure proper line-height if floated + color: $white; + vertical-align: baseline; + white-space: nowrap; + text-shadow: 0 -1px 0 rgba(0,0,0,.25); + background-color: $grayLight; +} + + +// Labels & Badges +.label-tag { + background-color: $purple; + color: darken($white, 5%); + white-space: nowrap; + border-radius: 3px; + text-shadow: none; + font-size: 13px; + padding: 2px 6px; + border-width: 1px; + border-style: solid; + .icon-tag { + position: relative; + top: 1px; + padding-right: 4px; + } +} + +.label-tag:hover { + opacity: 0.85; + background-color: darken($purple, 10%); +} + diff --git a/public/less/components/tagsinput.scss b/public/less/components/tagsinput.scss new file mode 100644 index 00000000000..3bfdb5547c8 --- /dev/null +++ b/public/less/components/tagsinput.scss @@ -0,0 +1,39 @@ +.bootstrap-tagsinput { + display: inline-block; + padding: 0 0 0 6px; + vertical-align: middle; + max-width: 100%; + line-height: 22px; + background-color: $inputBackground; + + input { + border: none; + border-right: 1px solid $grafanaTargetSegmentBorder; + margin: 0px; + border-radius: 0; + padding: 8px 6px; + height: 100%; + width: 5rem; + box-sizing: border-box; + } + + .tag { + margin-right: 2px; + color: white; + + [data-role="remove"] { + margin-left:8px; + cursor:pointer; + &:after{ + content: "x"; + padding:0px 2px; + } + &:hover { + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); + &:active { + box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); + } + } + } + } +} diff --git a/public/less/components/tightform.scss b/public/less/components/tightform.scss new file mode 100644 index 00000000000..e1df5f2ae71 --- /dev/null +++ b/public/less/components/tightform.scss @@ -0,0 +1,236 @@ +.tight-form { + border-top: 1px solid $grafanaTargetBorder; + border-left: 1px solid $grafanaTargetBorder; + border-right: 1px solid $grafanaTargetBorder; + background: $grafanaTargetBackground; + + &.last { + border-bottom: 1px solid $grafanaTargetBorder; + } + + &.borderless { + background: transparent; + border: none; + } + + .checkbox-label { + display: inline; + padding-right: 4px; + margin-bottom: 0; + } +} + +.tight-form-container-no-item-borders { + border: 1px solid $grafanaTargetBorder; + border-bottom: none; + + .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input { + border: none; + } +} + + +.spaced-form { + .tight-form { + margin: 7px 0; + } +} + +.borderless { + .tight-form-item, + .tight-form-input { + border: none; + } +} + +.tight-form-container { + border-bottom: 1px solid $grafanaTargetBorder; +} + +.tight-form-btn { + padding: 7px 12px; +} + +.tight-form-list { + list-style: none; + margin: 0; + >li { + float: left; + } +} + +.tight-form-flex-wrapper { + display: flex; + flex-direction: row; + float: none !important; +} + +.grafana-metric-options { + margin-top: 25px; +} + +.tight-form-item { + padding: 8px 7px; + display: inline-block; + font-weight: normal; + border-right: 1px solid $grafanaTargetSegmentBorder; + color: $grafanaTargetColor; + display: inline-block; + + .has-open-function & { + padding-top: 25px; + } + + .tight-form-disabled & { + color: $grafanaTargetColorHide; + } + + &:hover, &:focus { + text-decoration: none; + } + + &a:hover { + background: $grafanaTargetFuncBackground; + } + + &.last { + border-right: none; + } +} + + +.tight-form-item-icon { + i { + width: 15px; + text-align: center; + display: inline-block; + } +} + +.tight-form-func { + background: $grafanaTargetFuncBackground; + > a { + color: $grafanaTargetColor; + } + > a:hover { + color: $linkColor; + } + + &.show-function-controls { + padding-top: 5px; + min-width: 100px; + text-align: center; + } +} + +input[type=text].tight-form-func-param { + background: transparent; + border: none; + margin: 0; + padding: 0; +} + +input[type=text].tight-form-clear-input { + padding: 8px 7px; + border: none; + margin: 0px; + background: transparent; + color: $grafanaTargetColor; + border-radius: 0; + border-right: 1px solid $grafanaTargetSegmentBorder; +} + +[type=text], +[type=email], +[type=number], +[type=password] { + &.tight-form-input { + border: none; + border-right: 1px solid $grafanaTargetSegmentBorder; + margin: 0px; + border-radius: 0; + padding: 8px 6px; + height: 100%; + box-sizing: border-box; + &.last { + border-right: none; + } + } +} + +input[type=checkbox].tight-form-checkbox { + margin: 0; +} + +.tight-form-textarea { + height: 200px; + margin: 0; + box-sizing: border-box; +} + +select.tight-form-input { + border: none; + border-right: 1px solid $grafanaTargetSegmentBorder; + margin: 0px; + border-radius: 0; + height: 36px; + padding: 9px 3px; + &.last { + border-right: none; + } +} + +.tight-form-func-controls { + display: none; + text-align: center; + + .fa-arrow-left { + float: left; + position: relative; + top: 2px; + } + .fa-arrow-right { + float: right; + position: relative; + top: 2px; + } + .fa-remove { + margin-left: 10px; + } +} + +.tight-form-radio { + input[type=radio] { + margin: 0; + } + label { + display: inline; + } +} + +.tight-form-section { + margin-bottom: 20px; + margin-right: 40px; + vertical-align: top; + display: inline-block; + .tight-form { + margin-left: 20px; + } +} + +.tight-form-align { + padding-left: 66px; +} + +.tight-form-item-large { width: 115px; } +.tight-form-item-xlarge { width: 150px; } +.tight-form-item-xxlarge { width: 200px; } + +.tight-form-input.tight-form-item-xxlarge { + width: 215px; +} + +.tight-form-inner-box { + margin: 20px 0 20px 148px; + display: inline-block; +} diff --git a/public/less/components/timepicker.scss b/public/less/components/timepicker.scss new file mode 100644 index 00000000000..8a232ddc779 --- /dev/null +++ b/public/less/components/timepicker.scss @@ -0,0 +1,107 @@ +.nav.gf-timepicker-nav { + margin-right: 0; +} + +.timepicker-timestring { + font-weight: normal; +} + +.gf-timepicker-nav-btn { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.gf-timepicker-dropdown { + margin: -5px -10px 10px 5px; + padding: 10px 20px; + float: right; + background-color: $grafanaPanelBackground; + @include box-shadow($navbarDropdownShadow); +} + +.gf-timepicker-absolute-section { + width: 300px; + float: left; + border-right: $grafanaTriggerBorder; + padding: 0 0 0 20px; + select { + width: 183px; + margin-bottom: 0; + } +} + +.gf-timepicker-btn-apply { + margin: 0 0 0 15px; +} + +.gf-timepicker-utc { + background-color: $grafanaTargetFuncBackground; + color: $orange; + font-size: 75%; + padding: 3px; + border-radius: 2px; + font-weight: bold; + margin-left: 4px; +} + +.gf-timepicker-relative-section { + padding: 0 20px 0 30px; + min-height: 258px; + float: left; + ul { + list-style: none; + float: left; + margin: 0 30px 10px 0px; + li { + line-height: 22px; + } + li.active { + border-bottom: 1px solid $blue; + margin: 3px 0; + font-weight: bold; + } + } +} + +.gf-timepicker-component { + margin-bottom: 10px; + button.btn-sm { + @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); + background-image: none; + border: none; + padding: 6px 9px; + color: $textColor; + &.active span { + color: $blue; + font-weight: bold; + } + .text-info { + color: $orange; + font-weight: bold; + } + } +} + +.faMixin { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.glyphicon-chevron-right:before { + @include faMixin; + content: "\f054"; +} + +.glyphicon-chevron-left:before { + @include faMixin; + content: "\f053"; +} + +.input-datetime-format { + color: $linkColorDisabled +} diff --git a/public/less/components/tooltip.scss b/public/less/components/tooltip.scss new file mode 100644 index 00000000000..3d0e2a7b16a --- /dev/null +++ b/public/less/components/tooltip.scss @@ -0,0 +1,102 @@ +// +// Tooltips +// -------------------------------------------------- + + +// Base class +.tooltip { + position: absolute; + z-index: $zindexTooltip; + display: block; + visibility: visible; + font-size: 11px; + line-height: 1.4; + @include opacity(0); + &.in { .opacity(100); } + &.top { margin-top: -3px; padding: 5px 0; } + &.right { margin-left: 3px; padding: 0 5px; } + &.bottom { margin-top: 3px; padding: 5px 0; } + &.left { margin-left: -3px; padding: 0 5px; } +} + +// Wrapper for the tooltip content +.tooltip-inner { + max-width: 400px; + padding: 8px; + color: $tooltipColor; + text-align: center; + text-decoration: none; + background-color: $tooltipBackground; + @include border-radius($baseBorderRadius); +} + +// Arrows +.tooltip-arrow { + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: solid; +} +.tooltip { + &.top .tooltip-arrow { + bottom: 0; + left: 50%; + margin-left: -$tooltipArrowWidth; + border-width: $tooltipArrowWidth $tooltipArrowWidth 0; + border-top-color: $tooltipArrowColor; + } + &.right .tooltip-arrow { + top: 50%; + left: 0; + margin-top: -$tooltipArrowWidth; + border-width: $tooltipArrowWidth $tooltipArrowWidth $tooltipArrowWidth 0; + border-right-color: $tooltipArrowColor; + } + &.left .tooltip-arrow { + top: 50%; + right: 0; + margin-top: -$tooltipArrowWidth; + border-width: $tooltipArrowWidth 0 $tooltipArrowWidth $tooltipArrowWidth; + border-left-color: $tooltipArrowColor; + } + &.bottom .tooltip-arrow { + top: 0; + left: 50%; + margin-left: -$tooltipArrowWidth; + border-width: 0 $tooltipArrowWidth $tooltipArrowWidth; + border-bottom-color: $tooltipArrowColor; + } +} + +.grafana-tooltip { + position : absolute; + top: -1000; + left: 0; + color: $tooltipColor; + padding: 10px; + font-size: 11pt; + font-weight : 200; + background-color: $tooltipBackground; + border-radius: 5px; + z-index: 9999; + max-width: 800px; + max-height: 600px; + overflow: hidden; + line-height: 14px; + a { + color: $tooltipLinkColor; + } +} + +.grafana-tooltip hr { + padding: 2px; + color: #c8c8c8; + margin: 0px; + border-bottom: 0px solid #c8c8c8; +} + +.grafana-tip { + padding-left: 5px; +} + diff --git a/public/less/components/typeahead.scss b/public/less/components/typeahead.scss new file mode 100644 index 00000000000..efa4f3459ed --- /dev/null +++ b/public/less/components/typeahead.scss @@ -0,0 +1,11 @@ + +// typeahead max height +.typeahead { + max-height: 300px; + overflow-y: auto; +} + +.typeahead strong { + color: $yellow; +} + diff --git a/public/less/grafana-responsive.scss b/public/less/grafana-responsive.scss new file mode 100644 index 00000000000..051a801f215 --- /dev/null +++ b/public/less/grafana-responsive.scss @@ -0,0 +1,127 @@ +@import "variables.dark.scss"; +@import "bootstrap/responsive.scss"; + +$gridColumnWidth: 70px; +$gridGutterWidth: 10px; + +$gridColumnWidth768: 52px; +$gridGutterWidth768: 10px; + +$gridColumnWidth1200: 90px; +$gridGutterWidth1200: 10px; + +// Fluid grid +// ------------------------- +$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); +$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); + +// 1200px min +$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); +$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); + +// 768px-979px +$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); +$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); + +$screen-xs: 320px; +$screen-sm: 768px; +$screen-md: 992px; +$screen-lg: 1200px; + +$screen-xs-max: ($screen-sm - 1); +$screen-sm-max: ($screen-md - 1); +$screen-md-max: ($screen-lg - 1); + +$breakpoint-xs-up: "only screen and (min-width: #{$screen-xs})"; +$breakpoint-xs: "only screen and (min-width: #{$screen-xs}) and (max-width: #{$screen-xs-max})"; +$breakpoint-sm-up: "only screen and (min-width: #{$screen-sm})"; +$breakpoint-sm: "only screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max})"; +$breakpoint-md-up: "only screen and (min-width: #{$screen-md})"; +$breakpoint-md: "only screen and (min-width: #{$screen-md}) and (max-width: #{$screen-md-max})"; +$breakpoint-lg: "only screen and (min-width: #{$screen-lg})"; + +.dashnav-back-to-dashboard { + display: none; +} + +// Media queries +// --------------------- +@media $breakpoint-xs { + div.panel { + width: 100% !important; + padding: 0px !important; + } + .panel-margin { + margin-right: 0; + margin-left: 0; + } + body { + padding: 0; + } + .dashnav-dashboards-btn a { + max-width: 200px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } + .page-container { + padding: 10px 20px; + } +} + +// form styles +@media $breakpoint-sm-up { + .gf-size-m { width: 120px; } + .gf-size-l { width: 150px; } + .gf-size-xl { width: 200px; } + .gf-size-xxl { width: 300px; } + .gf-size-xxxl { width: 400px; } +} + +@media $breakpoint-sm-up { + .dashnav-dashboards-btn a { + max-width: 200px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .panel-in-fullscreen { + .dashnav-action-icons { + display: none; + } + .dashnav-back-to-dashboard { + display: block; + } + } +} + +@media $breakpoint-md-up { + .dashnav-dashboards-btn a { + max-width: 290px; + } + .gf-timepicker-nav-btn { + max-width: 250px; + } + .dashnav-zoom-out { + display: block; + } +} + +@media $breakpoint-lg { + .panel-in-fullscreen { + .dashnav-action-icons { + display: block; + } + } + + .dashnav-dashboards-btn a { + max-width: none; + } + .gf-timepicker-nav-btn { + max-width: none; + } +} diff --git a/public/less/grafana.dark.scss b/public/less/grafana.dark.scss new file mode 100644 index 00000000000..2dbd9475e24 --- /dev/null +++ b/public/less/grafana.dark.scss @@ -0,0 +1,2 @@ +@import "variables.dark.scss"; +@import "grafana.scss"; diff --git a/public/less/grafana.less b/public/less/grafana.less index 5bbc9c08b74..6a3facc4206 100644 --- a/public/less/grafana.less +++ b/public/less/grafana.less @@ -17,7 +17,7 @@ @import "./mixins/buttons.less"; // LAYOUTS -@import "./bootstrap/grid.less"; +// @import "./bootstrap/grid.less"; @import "./layout/page.less"; // COMPONENTS diff --git a/public/less/grafana.light.scss b/public/less/grafana.light.scss new file mode 100644 index 00000000000..bc9b18e52fe --- /dev/null +++ b/public/less/grafana.light.scss @@ -0,0 +1,2 @@ +@import "variables.light.scss"; +@import "grafana.scss"; diff --git a/public/less/grafana.scss b/public/less/grafana.scss new file mode 100644 index 00000000000..3d8de05687f --- /dev/null +++ b/public/less/grafana.scss @@ -0,0 +1,69 @@ + +// BASE +@import "./base/normalize.scss"; +@import "./base/base.scss"; +@import "./base/type.scss"; +@import "./base/forms.scss"; +@import "./base/fonts.scss"; +@import "./base/code.scss"; + +// UTILS +@import "./utils/utils.scss"; +@import "./utils/validation.scss"; +@import "./utils/angular.scss"; + +// MIXINS +@import "./mixins/mixins.scss"; +@import "./mixins/buttons.scss"; + +// LAYOUTS +// @import "./bootstrap/grid.scss"; +@import "./layout/page.scss"; + +// COMPONENTS +@import "./components/panel_graph.scss"; +@import "./components/submenu.scss"; +@import "./components/panel_dashlist.scss"; +@import "./components/panel_singlestat.scss"; +@import "./components/panel_table.scss"; +@import "./components/tagsinput.scss"; +@import "./components/tables_lists.scss"; +@import "./components/search.scss"; +@import "./components/dashboard.scss"; +@import "./components/tightform.scss"; +@import "./components/gf-form.scss"; +@import "./components/sidemenu.scss"; +@import "./components/navbar.scss"; +@import "./components/gfbox.scss"; +@import "./components/pagination.scss"; +@import "./components/tabs.scss"; +@import "./components/timepicker.scss"; +@import "./components/filter-controls.scss"; +@import "./components/filter-list.scss"; +@import "./components/filter-table.scss"; +@import "./components/scrollbar.scss"; +@import "./components/old_stuff.scss"; +@import "./components/navbar.scss"; +@import "./components/popovers.scss"; +@import "./components/alerts.scss"; +@import "./components/typeahead.scss"; +@import "./components/tags.scss"; +@import "./components/modals.scss"; +@import "./components/dropdown.scss"; +@import "./components/color_picker.scss"; +@import "./components/tooltip.scss"; +@import "./components/buttons.scss"; +@import "./components/footer.scss"; +@import "./components/infobox.scss"; +@import "./components/shortcuts.scss"; +@import "./components/query_editor.scss"; +@import "./components/navs.scss"; + +// PAGES +@import "./pages/login.scss"; +@import "./pages/playlist.scss"; +@import "./pages/admin.scss"; +@import "./pages/alerting.scss"; +@import "./pages/apps.scss"; +@import "./pages/signup.scss"; + diff --git a/public/less/layout/page.scss b/public/less/layout/page.scss new file mode 100644 index 00000000000..de28297b319 --- /dev/null +++ b/public/less/layout/page.scss @@ -0,0 +1,71 @@ +.grafana-app { + display: block; + height: 100%; +} + +.dashboard-container { + padding: 5px 5px; + width: 100%; + box-sizing: border-box; +} + +.main-view { + // background-image: url(/img/grafana_pattern.png); + // background-position: 100% -550px; + // background-repeat: no-repeat; + height: 100%; +} + +.page-dashboard { + .main-view { + background-image: none; + } +} + +.page-container { + background-color: $pageBackground; + position: relative; + padding: 25px 56px 10px 56px; + max-width: 1060px; + margin-left: 0; + height: 100%; +} + + +.page-header { + padding: 10px 0 39px 0px; + + display: flex; + justify-content: space-between; + align-items: center; + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + flex-wrap: wrap-reverse; + background: transparent url(../img/page_header_line.png) no-repeat left 60px; + h1 { + font-style: italic; + } +} + +.admin-page { + max-width: 800px; + margin-left: 10px; + .gf-box { + margin-top: 0; + } + .gf-box-body { + min-height: 0; + } + h2 { + margin-left: 15px; + margin-bottom: 0px; + font-size: $fontSizeLarge; + color: $textColor; + i { + padding-right: 6px; + } + } +} + diff --git a/public/less/mixins/buttons.scss b/public/less/mixins/buttons.scss new file mode 100644 index 00000000000..6d7def7e2dc --- /dev/null +++ b/public/less/mixins/buttons.scss @@ -0,0 +1,18 @@ + +// Button backgrounds +// ------------------ +@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + // gradientBar will set the background to a pleasing blend of these, to support IE<=9 + @include gradientBar($startColor, $endColor, $textColor, $textShadow); + + box-shadow: inset 0 -4px rgba(0,0,0,0.3); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { + color: $textColor; + background-image: none; + background-color: darken($endColor, 2%); + } +} + + diff --git a/public/less/mixins/mixins.scss b/public/less/mixins/mixins.scss new file mode 100644 index 00000000000..ecbdc0288e9 --- /dev/null +++ b/public/less/mixins/mixins.scss @@ -0,0 +1,334 @@ + +@mixin clearfix() { + &::after { + content: ""; + display: table; + clear: both; + } +} + +@mixin tab-focus() { + // Default + outline: thin dotted; + // WebKit + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +// Center-align a block level element +// ---------------------------------- +@mixin center-block() { + display: block; + margin-left: auto; + margin-right: auto; +} + +// Sizing shortcuts +// ------------------------- +@mixin size($height, $width) { + width: $width; + height: $height; +} + +@mixin square($size) { + @include size($size, $size); +} + +// Placeholder text +// ------------------------- +@mixin placeholder($color: $placeholderText) { + &:-moz-placeholder { + color: $color; + } + &:-ms-input-placeholder { + color: $color; + } + &::-webkit-input-placeholder { + color: $color; + } +} + +// Text overflow +// ------------------------- +// Requires inline-block or block for proper styling +@mixin text-overflow() { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +// CSS image replacement +// ------------------------- +// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 +.hide-text { + font: 0/0 a; + color: transparent; + text-shadow: none; + background-color: transparent; + border: 0; +} + + +// FONTS +// -------------------------------------------------- + +@mixin font-family-serif() { + font-family: $serifFontFamily; +} + +@mixin font-family-sans-serif() { + font-family: $sansFontFamily; +} + +@mixin font-family-monospace() { + font-family: $monoFontFamily; +} + +@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + font-size: $size; + font-weight: $weight; + line-height: $lineHeight; +} + +@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-serif(); + @include font-shorthand($size, $weight, $lineHeight); +} + +@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-sans-serif(); + @include font-shorthand($size, $weight, $lineHeight); +} + +@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { + @include font-family-monospace; + @include font-shorthand($size, $weight, $lineHeight); +} + + +// FORMS +// -------------------------------------------------- + +// Block level inputs +.input-block-level { + display: block; + width: 100%; + min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + @include box-sizing(border-box); // Makes inputs behave like true block-level elements +} + + +// CSS3 PROPERTIES +// -------------------------------------------------- + +// Border Radius +@mixin border-radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +// Single Corner Border Radius +@mixin border-top-left-radius($radius) { + -webkit-border-top-left-radius: $radius; + -moz-border-radius-topleft: $radius; + border-top-left-radius: $radius; +} +@mixin border-top-right-radius($radius) { + -webkit-border-top-right-radius: $radius; + -moz-border-radius-topright: $radius; + border-top-right-radius: $radius; +} +@mixin border-bottom-right-radius($radius) { + -webkit-border-bottom-right-radius: $radius; + -moz-border-radius-bottomright: $radius; + border-bottom-right-radius: $radius; +} +@mixin border-bottom-left-radius($radius) { + -webkit-border-bottom-left-radius: $radius; + -moz-border-radius-bottomleft: $radius; + border-bottom-left-radius: $radius; +} + +// Single Side Border Radius +@mixin border-top-radius($radius) { + @include border-top-right-radius($radius); + @include border-top-left-radius($radius); +} +@mixin border-right-radius($radius) { + @include border-top-right-radius($radius); + @include border-bottom-right-radius($radius); +} +@mixin border-bottom-radius($radius) { + @include border-bottom-right-radius($radius); + @include border-bottom-left-radius($radius); +} +@mixin border-left-radius($radius) { + @include border-top-left-radius($radius); + @include border-bottom-left-radius($radius); +} + +// Drop shadows +@mixin box-shadow($shadow) { + box-shadow: $shadow; +} + +// Transitions +@mixin transition($transition) { + transition: $transition; +} + +@mixin transition-delay($transition-delay) { + transition-delay: $transition-delay; +} + +@mixin transition-duration($transition-duration) { + transition-duration: $transition-duration; +} + +// Transformations +@mixin rotate($degrees) { + transform: rotate($degrees); +} + +@mixin scale($ratio) { + transform: scale($ratio); +} + +@mixin translate($x, $y) { + transform: translate($x, $y); +} + +@mixin skew($x, $y) { + transform: skew($x, $y); + -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 +} + +@mixin translate3d($x, $y, $z) { + transform: translate3d($x, $y, $z); +} + +@mixin backface-visibility($visibility) { + backface-visibility: $visibility; +} +// Heads up: FF 3.6 and under need "padding" instead of "padding-box" +@mixin background-clip($clip) { + background-clip: $clip; +} + +// Background sizing +@mixin background-size($size) { + background-size: $size; +} + +// Box sizing +@mixin box-sizing($boxmodel) { + box-sizing: $boxmodel; +} + +// User select +// For selecting text on the page +@mixin user-select($select) { + user-select: $select; +} + +// Resize anything +@mixin resizable($direction) { + resize: $direction; // Options: horizontal, vertical, both + overflow: auto; // Safari fix +} + +// CSS3 Content Columns +@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) { + -webkit-column-count: $columnCount; + -moz-column-count: $columnCount; + column-count: $columnCount; + -webkit-column-gap: $columnGap; + -moz-column-gap: $columnGap; + column-gap: $columnGap; +} + +// Optional hyphenation +@mixin hyphens($mode: auto) { + word-wrap: break-word; + -webkit-hyphens: $mode; + -moz-hyphens: $mode; + -ms-hyphens: $mode; + -o-hyphens: $mode; + hyphens: $mode; +} + +// Opacity +@mixin opacity($opacity) { + opacity: $opacity / 100; +} + +// BACKGROUNDS +// -------------------------------------------------- + +// Add an alphatransparency value to any background or border color (via Elyse Holladay) +#translucent { + @mixin background($color: $white, $alpha: 1) { + background-color: hsla(hue($color), saturation($color), lightness($color), $alpha); + } + @mixin border($color: $white, $alpha: 1) { + border-color: hsla(hue($color), saturation($color), lightness($color), $alpha); + @include background-clip(padding-box); + } +} + +// Gradient Bar Colors for buttons and alerts +@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: $textColor; + text-shadow: $textShadow; + @include gradient-vertical($primaryColor, $secondaryColor); + border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); + border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); +} + +// Gradients +@mixin gradient-horizontal($startColor: #555, $endColor: #333) { + background-color: $endColor; + background-image: linear-gradient(to right, $startColor, $endColor); // Standard, IE10 + background-repeat: repeat-x; +} + +@mixin gradient-vertical($startColor: #555, $endColor: #333) { + background-color: mix($startColor, $endColor, 60%); + background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10 + background-repeat: repeat-x; +} + +@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45deg) { + background-color: $endColor; + background-repeat: repeat-x; + background-image: linear-gradient($deg, $startColor, $endColor); // Standard, IE10 +} + +@mixin gradient-horizontal-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { + background-color: mix($midColor, $endColor, 80%); + background-image: linear-gradient(to right, $startColor, $midColor $colorStop, $endColor); + background-repeat: no-repeat; +} + +@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f) { + background-color: mix($midColor, $endColor, 80%); + background-image: linear-gradient($startColor, $midColor $colorStop, $endColor); + background-repeat: no-repeat; +} + +@mixin gradient-radial($innerColor: #555, $outerColor: #333) { + background-color: $outerColor; + background-image: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)); + background-image: -webkit-radial-gradient(circle, $innerColor, $outerColor); + background-image: -moz-radial-gradient(circle, $innerColor, $outerColor); + background-image: -o-radial-gradient(circle, $innerColor, $outerColor); + background-repeat: no-repeat; +} + +@mixin striped($color: #555, $angle: 45deg) { + background-color: $color; + background-image: linear-gradient($angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); +} + + diff --git a/public/less/pages/admin.scss b/public/less/pages/admin.scss new file mode 100644 index 00000000000..30bc3ca8b34 --- /dev/null +++ b/public/less/pages/admin.scss @@ -0,0 +1,10 @@ + +.admin-settings-section { + color: $variable; + font-weight: bold; +} + +td.admin-settings-key { + padding-left: 20px; +} + diff --git a/public/less/pages/alerting.scss b/public/less/pages/alerting.scss new file mode 100644 index 00000000000..00ecf707520 --- /dev/null +++ b/public/less/pages/alerting.scss @@ -0,0 +1,42 @@ +.copy-query { + display: block; + width: 30px; + height: 36px; + margin: 0; + padding: 0; + border: 0; + background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat; + cursor: pointer; +} + +.alert-state { + display: inline-block; + padding-left: 30px; + background: 0 50% no-repeat; + background-size: 20px auto; +} + +.alert-state-online { + background-image: url('/img/online.svg'); +} + +.alert-state-warning { + background-image: url('/img/warn-tiny.svg'); +} + +.alert-state-critical { + background-image: url('/img/critical.svg'); +} + +.alert-notify-emails { + width: 400px; + border-right: 1px solid $black; +} + +.alert-notify-emails .bootstrap-tagsinput { + width: 394px; // offset for 8px left padding and border width +} + +.alert-notify-emails .bootstrap-tagsinput input { + border: 0; +} diff --git a/public/less/pages/apps.scss b/public/less/pages/apps.scss new file mode 100644 index 00000000000..35e4f8522cd --- /dev/null +++ b/public/less/pages/apps.scss @@ -0,0 +1,26 @@ + +.app-edit-logo-box { + padding: 1.2rem; + background: $grafanaPanelBackground; + text-align: center; + img { + max-width: 7rem; + } + margin-right: 2rem; +} + +.app-edit-links { + list-style: none; + margin: 0 0 0 2rem; + + li { + background: $grafanaPanelBackground; + margin-top: 4px; + padding: 0.2rem 1rem; + } +} + +.app-edit-description { + font-style: italic; + margin-bottom: 1.5rem; +} diff --git a/public/less/pages/login.scss b/public/less/pages/login.scss new file mode 100644 index 00000000000..a0f2188b4f2 --- /dev/null +++ b/public/less/pages/login.scss @@ -0,0 +1,169 @@ + +.login-form { + width: 50%; + float: left; + margin-left: 25%; + margin-right: 25%; + padding-top: 25px; +} + +.login-box { + width: 700px; + margin: 70px auto 0 auto; +} + +.login-box-logo { + text-align: center; + img { + width: 125px; + } + .icon-gf-grafana_wordmark { + color: $linkColor; + position: relative; + top: -90px; + font-size: 3rem; + text-shadow: 3px 3px 5px black; + } +} + +.login-inner-box { + background: $grafanaPanelBackground; +} + +.login-tab-header { + background: $grafanaTargetBackground; + text-align: center; +} + +.btn-login-tab { + background: transparent; + border: none; + font-size: 15px; + padding: 10px 10px; + + &.active { + background: darken($grafanaTargetBackground, 5%); + color: $white; + } + + font-weight: bold; + display: inline-block; + width: 170px; + color: $textColor; +} + +.password-strength { + display: block; + width: 15%; + overflow: visible; + white-space: nowrap; + padding-top: 3px; + color: darken($textColor, 20%); + border-top: 3px solid $red; + &.password-strength-ok { + width: 40%; + border-top: 3px solid lighten($yellow, 10%); + } + &.password-strength-good { + width: 100%; + border-top: 3px solid lighten($green, 10%); + } +} + +.login-submit-button-row { + text-align: center; + margin-top: 30px; + button { + padding: 14px 23px; + font-size: 16px; + font-weight: bold; + min-width: 150px; + display: inline-block; + border: 1px solid lighten($btnInverseBackground, 10%); + } +} + +.login-oauth { + margin-bottom: 15px; + + .btn { + margin: 5px; + } + + .btn-google { + background: #dd4b39; + color: white; + } + + .btn-github { + background: #555; + color: white; + } +} + +.password-recovery { + background: $grafanaTargetBackground; + margin-top: 10px; + padding: 10px; + a { + color: $grayLight; + } +} + +.login-divider { + float: left; + width: 50%; + margin: 5px 25% 25px 25%; + + .login-divider-line { + width: 100%; + height: 10px; + border-bottom: 1px solid $gray; + + .login-divider-text { + background-color: $grayDarker; + color: $grayLight; + padding: 0 10px; + } + } +} + +.signup-page-background { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + background-image: url(../img/background_tease.jpg); + opacity: 0.3; + z-index: -1; +} + +.invite-box { + text-align: center; + border: 1px solid $grafanaTargetFuncBackground; + background-color: $grafanaPanelBackground; + width: 800px; + margin-left: auto; + margin-right: auto; + + .tight-form { + text-align: left; + } + + h3 { + margin-top: 30px; + } + + .modal-close { + float: right; + font-size: 140%; + padding: 10px; + } + + .modal-tagline { + font-size: 16px; + } +} diff --git a/public/less/pages/playlist.scss b/public/less/pages/playlist.scss new file mode 100644 index 00000000000..782d49d584d --- /dev/null +++ b/public/less/pages/playlist.scss @@ -0,0 +1,93 @@ +.playlist-search-container { + // margin: 15px; + z-index: 1000; + position: relative; + width: 700px; + box-shadow: 0px 0px 55px 0px black; + background-color: $grafanaPanelBackground; + + .label-tag { + margin-left: 6px; + font-size: 11px; + padding: 2px 6px; + } +} + +.playlist-search-switches { + position: absolute; + top: 8px; + right: 11px; +} + +.playlist-search-field-wrapper { + input { + width: 100%; + padding: 8px 8px; + height: 100%; + box-sizing: border-box; + } + button { + margin: 0 4px 0 0; + } + > span { + display: block; + overflow: hidden; + } +} + +.playlist-search-results-container { + min-height: 100px; + overflow: auto; + display: block; + line-height: 28px; + + .search-item:hover, .search-item.selected { + background-color: $grafanaListHighlight; + } + + .selected { + .search-result-tag { + opacity: 0.70; + color: white; + } + } + + .fa-star, .fa-star-o { + padding-left: 13px; + } + + .fa-star { + color: $orange; + } + + .search-result-link { + color: $grafanaListMainLinkColor; + .fa { + padding-right: 10px; + } + } + + .search-item { + display: block; + padding: 3px 10px; + white-space: nowrap; + background-color: $grafanaListBackground; + margin-bottom: 4px; + .search-result-icon:before { + content: "\f009"; + } + + &.search-item-dash-home .search-result-icon:before { + content: "\f015"; + } + } + + .search-result-tags { + float: right; + } + + .search-result-actions { + float: right; + padding-left: 20px; + } +} diff --git a/public/less/pages/signup.scss b/public/less/pages/signup.scss new file mode 100644 index 00000000000..7b2b0b0e84a --- /dev/null +++ b/public/less/pages/signup.scss @@ -0,0 +1,17 @@ +.signup-page-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + height: 100%; + width: 100%; + background-image: url(/img/background_tease.jpg); + + .signup-logo-container { + width: 150px; + margin: 0 auto; + padding: 80px 0; + } +} + diff --git a/public/less/utils/angular.scss b/public/less/utils/angular.scss new file mode 100644 index 00000000000..1519b249920 --- /dev/null +++ b/public/less/utils/angular.scss @@ -0,0 +1,7 @@ + + +[ng\:cloak], [ng-cloak], .ng-cloak { + display: none !important; +} + + diff --git a/public/less/utils/utils.scss b/public/less/utils/utils.scss new file mode 100644 index 00000000000..497142956a8 --- /dev/null +++ b/public/less/utils/utils.scss @@ -0,0 +1,64 @@ +.highlight-word { + color: $orange; +} + +// Close icons +// -------------------------------------------------- +.close { + float: right; + font-size: 20px; + font-weight: bold; + line-height: $baseLineHeight; + color: $black; + text-shadow: 0 1px 0 rgba(255,255,255,1); + @include opacity(20); + &:hover, + &:focus { + color: $black; + text-decoration: none; + cursor: pointer; + @include opacity(40); + } +} + +// Additional properties for button version +// iOS requires the button element instead of an anchor tag. +// If you want the anchor version, it requires `href="#"`. +button.close { + padding: 0; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; +} + +// +// Utility classes +// -------------------------------------------------- + + +// Quick floats +.pull-right { + float: right; +} +.pull-left { + float: left; +} + +// Toggling content +.hide { + display: none; +} +.show { + display: block; +} + +// Visibility +.invisible { + visibility: hidden; +} + +// For Affix plugin +.affix { + position: fixed; +} diff --git a/public/less/utils/validation.scss b/public/less/utils/validation.scss new file mode 100644 index 00000000000..b732322d2de --- /dev/null +++ b/public/less/utils/validation.scss @@ -0,0 +1,7 @@ +input[type=text].ng-dirty.ng-invalid { + box-shadow: inset 0 0px 7px $red; +} + +form input.ng-invalid { + color: $errorText; +} diff --git a/public/less/variables.dark.scss b/public/less/variables.dark.scss new file mode 100644 index 00000000000..7237b386e7f --- /dev/null +++ b/public/less/variables.dark.scss @@ -0,0 +1,342 @@ +// Global values +// -------------------------------------------------- + + +// Grays +// ------------------------- +$black: #000; +$gray: #bbb; +$grayDark: #262626; +$grayDarker: #1f1f1f; + +$grayLight: #ADAFAE; +$grayLighter: #BBBFC2; +$white: #fff; + +// Accent colors +// ------------------------- +$blue: #33B5E5; +$blueDark: #005f81; +$green: #669900; +$red: #CC3900; +$yellow: #ECBB13; +$orange: #FF8800; +$pink: #FF4444; +$purple: #9933CC; +$variable: #32D1DF; + +// Status colors +// ------------------------- +$online: #10a345; +$warn: #ffc03c; +$critical: #ed2e18; + +// grafana Variables +// ------------------------- +$grafanaPanelBackground: $grayDarker; +$grafanaPanelBorder: solid 1px $grayDark; +$grafanaTriggerBorder: solid 1px #555; + +// Graphite Target Editor +$grafanaTargetBorder: $black; +$grafanaTargetBackground: $grayDark; +$grafanaTargetColor: #c8c8c8; +$grafanaTargetColorHide: darken(#c8c8c8, 25%); +$grafanaTargetSegmentBorder: #050505; + +$grafanaTargetFuncBackground: #333; +$grafanaTargetFuncHightlight: #444; + +$grafanaSelectBackground: $grafanaTargetFuncBackground; + +$modalBackground: $black; +$codeTagBackground: #444; + +// Scaffolding +// ------------------------- +$bodyBackground: rgb(20,20,20); +$pageBackground: $grayDarker; +$textColor: $grayLighter; + +// Links +// ------------------------- +$linkColor: darken($white,11%); +$linkColorDisabled: darken($linkColor,30%); +$linkColorHover: $white; + + +// Typography +// ------------------------- +$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$serifFontFamily: Georgia, "Times New Roman", Times, serif; +$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; + +$baseFontSize: 14px; +$baseFontWeight: 400; +$baseFontFamily: $sansFontFamily; +$baseLineHeight: 20px; +$altFontFamily: $serifFontFamily; +$fontWeightSemi: 600; + +$headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily +$headingsFontWeight: 400; // instead of browser default, bold +$headingsFontStyle: normal; +$headingsColor: darken($white,11%); // empty to use BS default, $textColor +$inputText: $grayLight; + + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +$fontSizeLarge: $baseFontSize * 1.25; // ~18px +$fontSizeSmall: $baseFontSize * 0.85; // ~12px +$fontSizeMini: $baseFontSize * 0.75; // ~11px + +$paddingLarge: 11px 19px; // 44px +$paddingSmall: 2px 10px; // 26px +$paddingMini: 0px 6px; // 22px + +$baseBorderRadius: 3px; +$borderRadiusLarge: 4px; +$borderRadiusSmall: 2px; + +// Lists +$grafanaListBackground: $grayDark; +$grafanaListAccent: lighten($grayDarker, 2%); +$grafanaListBorderTop: $grayDark; +$grafanaListBorderBottom: $black; +$grafanaListHighlight: #333; +$grafanaListMainLinkColor: $textColor; + +// Scrollbars +$scrollbarBackground: #3a3a3a; +$scrollbarBackground2: #3a3a3a; +$scrollbarBorder: black; + +// Tables +// ------------------------- +$tableBackground: transparent; // overall background-color +$tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping +$tableBackgroundHover: $grayDark; // for hover +$tableBorder: $grayDark; // table and cell border + +// Buttons +// ------------------------- +$btnBackground: $grayDark; +$btnBackgroundHighlight: darken($grayLight, 15%); +$btnBackgroundShadow: darken($grayLight, 15%); +$btnBorder: #bbb; + +$btnPrimaryBackground: $blueDark; +$btnPrimaryBackgroundHighlight: lighten($blueDark, 5%); + +$btnInfoBackground: lighten($purple, 3%); +$btnInfoBackgroundHighlight: darken($purple, 3%); + +$btnSuccessBackground: lighten($green, 3%); +$btnSuccessBackgroundHighlight: darken($green, 3%); + +$btnWarningBackground: lighten($orange, 3%); +$btnWarningBackgroundHighlight: darken($orange, 3%); + +$btnDangerBackground: lighten($red, 3%); +$btnDangerBackgroundHighlight: darken($red, 3%); + +$btnInverseBackground: $grayDark; +$btnInverseBackgroundHighlight: lighten($grayDark, 1%); +$btnInverseText: $textColor; +$btnInverseBorder: #333; + +$btnText: $gray; + +$iconContainerBackground: $black; +$iconContainerBackgroundHighlight: lighten($black, 5%); +$iconContainerBorder: 1px solid transparent; +$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); + + +// Forms +// ------------------------- +$inputBackground: lighten($grayDark,5%); +$inputBorder: lighten($grayDark,5%); +$inputBorderRadius: $baseBorderRadius; +$inputDisabledBackground: #555; +$formActionsBackground: transparent; +$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +$labelBackground: $grayDark; + + +// Sidemenu +// ------------------------- +$sideMenuTopShadow: $navbarDropdownShadow; +$sideMenuBackground: $grayDark; +$sideMenuBackgroundHighlight: lighten($grayDark, 4%); +$sideMenuShadow: 0 0 35px 0 $bodyBackground; + +// Search +$searchShadow: 0 0 35px 0 $bodyBackground; + +// Dropdowns +// ------------------------- +$dropdownBackground: $heroUnitBackground; +$dropdownBorder: rgba(0,0,0,.2); +$dropdownDividerTop: transparent; +$dropdownDividerBottom: #444; +$dropdownDivider: $dropdownDividerBottom; +$dropdownTitle: $linkColorDisabled; + +$dropdownLinkColor: $textColor; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundActive: $blueDark; +$dropdownLinkBackgroundHover: $blueDark; + + + +// COMPONENT VARIABLES +// -------------------------------------------------- + + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindexDropdown: 1000; +$zindexPopover: 1010; +$zindexTooltip: 1020; +$zindexFixedNavbar: 1030; +$zindexModalBackdrop: 1040; +$zindexModal: 1050; + +// Sprite icons path +// ------------------------- +$iconSpritePath: "../img/glyphicons-halflings.png"; +$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; + + +// Input placeholder text color +// ------------------------- +$placeholderText: darken($textColor, 25%); + + +// Hr border color +// ------------------------- +$hrBorder: $grayDark; + + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + + +// Wells +// ------------------------- +$wellBackground: #131517; + + +// Navbar +// ------------------------- +$navbarCollapseWidth: 979px; +$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; + +$navbarHeight: 52px; +$navbarBackgroundHighlight: $grayDark; +$navbarBackground: $grayDark; +$navbarBorder: 1px solid $bodyBackground; + +$navbarText: $grayLight; +$navbarLinkColor: $grayLight; +$navbarLinkColorHover: $white; +$navbarLinkColorActive: $navbarLinkColorHover; +$navbarLinkBackgroundHover: transparent; +$navbarLinkBackgroundActive: $navbarBackground; +$navbarBrandColor: $linkColor; +$navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground; + +$navbarButtonBackground: lighten($navbarBackground, 3%); +$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + +// Pagination +// ------------------------- +$paginationBackground: $bodyBackground; +$paginationBorder: transparent; +$paginationActiveBackground: $blue; + + +// Hero unit +// ------------------------- +$heroUnitBackground: $grayDark; +$heroUnitHeadingColor: inherit; +$heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +$warningText: darken(#c09853, 10%); +$warningBackground: $orange; + +$errorText: #b94a48; +$errorBackground: $btnDangerBackground; + +$successText: #468847; +$successBackground: $btnSuccessBackground; + +$infoText: $blueDark; +$infoBackground: $btnInfoBackground; + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $white; +$tooltipBackground: rgb(58, 57, 57); +$tooltipArrowWidth: 5px; +$tooltipArrowColor: $tooltipBackground; +$tooltipLinkColor: $linkColor; + +$popoverBackground: $heroUnitBackground; +$popoverArrowWidth: 10px; +$popoverArrowColor: $popoverBackground; +$popoverTitleBackground: $popoverBackground; + +// Special enhancement for popovers +$popoverArrowOuterWidth: $popoverArrowWidth + 1; +$popoverArrowOuterColor: rgba(0,0,0,.25); + +// images +$checkboxImageUrl: '../img/checkbox.png'; + +// GRID +// -------------------------------------------------- + + +// Default 940px grid +// ------------------------- +$gridColumns: 12; +$gridColumnWidth: 60px; +$gridGutterWidth: 20px; +$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); + +// 1200px min +$gridColumnWidth1200: 70px; +$gridGutterWidth1200: 30px; +$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); + +// 768px-979px +$gridColumnWidth768: 42px; +$gridGutterWidth768: 20px; +$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); + + +// Fluid grid +// ------------------------- +$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); +$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); + +// 1200px min +$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); +$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); + +// 768px-979px +$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); +$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); diff --git a/public/less/variables.light.scss b/public/less/variables.light.scss new file mode 100644 index 00000000000..5cc0908e42e --- /dev/null +++ b/public/less/variables.light.scss @@ -0,0 +1,359 @@ +// Cosmo 2.3.2 +// Variables +// -------------------------------------------------- + + +// Global values +// -------------------------------------------------- + + +// Grays +// ------------------------- +$black: #000; +$grayDarker: lighten(#000, 11.5%); // #222 +$grayDark: lighten(#000, 20%); // #333 +$gray: lighten(#000, 33.5%); // #555 +$grayLight: lighten(#000, 60%); // #999 +$grayLighter: lighten(#000, 97.5%); // #eee +$white: #fff; + + +// Accent colors +// ------------------------- +$blueOrig: #007FFF; +$blue: #2AB2E4; +$blueDark: #75CAEB; +$green: #28B62C; +$red: #FF4136; +$yellow: #FF851B; +$orange: #FF7518; +$pink: #E671B8; +$purple: #9954BB; +$variable: #2AB2E4; + +// Status colors +// ------------------------- +$online: #01A64F; +$warn: #F79520; +$critical: #EC2128; + +// grafana Variables +// ------------------------- +$grafanaPanelBackground: $grayLighter; +$grafanaPanelBorder: solid 1px #ddd; +$grafanaTriggerBorder: solid 1px $grayLight; + +// Submenu +$submenuBackground: rgb(218, 217, 217); +$submenuBorder: $white; + +// Tabs +$fullEditBorder: $grayLighter; + +// Graphite Target Editor +$grafanaTargetBorder: #ddd; +$grafanaTargetBackground: #efefef; +$grafanaTargetColor: $textColor; +$grafanaTargetColorHide: lighten($textColor, 25%); +$grafanaTargetSegmentBorder: #ddd; + +$grafanaTargetFuncBackground: darken($grafanaTargetBackground, 5%); +$grafanaTargetFuncHightlight: darken($grafanaTargetBackground, 10%); + +$grafanaSelectBackground: $grafanaTargetFuncBackground; + +$modalBackground: $bodyBackground; +$codeTagBackground: #ddd; + +// Scaffolding +// ------------------------- +$bodyBackground: #EFEFEF; +$pageBackground: $white; +$textColor: $gray; + +// Links +// ------------------------- +$linkColor: $gray; +$linkColorDisabled: lighten($linkColor,30%); +$linkColorHover: darken($linkColor, 20%); + +// Typography +// ------------------------- +$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$serifFontFamily: Georgia, "Times New Roman", Times, serif; +$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; + +$baseFontSize: 14px; +$baseFontWeight: 400; +$fontWeightSemi: 600; +$baseFontFamily: $sansFontFamily; +$baseLineHeight: 20px; +$altFontFamily: $serifFontFamily; + +$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily +$headingsFontWeight: normal; // instead of browser default, bold +$headingsFontStyle: normal; +$headingsColor: $textColor; // empty to use BS default, $textColor + + +// Component sizing +// ------------------------- +// Based on 14px font-size and 20px line-height + +$fontSizeLarge: $baseFontSize * 1.25; // ~18px +$fontSizeSmall: $baseFontSize * 0.85; // ~12px +$fontSizeMini: $baseFontSize * 0.75; // ~11px + +$paddingLarge: 22px 30px; // 66px +$paddingSmall: 2px 10px; // 26px +$paddingMini: 2px 6px; // 24px + +$baseBorderRadius: 3px; +$borderRadiusLarge: 4px; +$borderRadiusSmall: 2px; + +// Lists +$grafanaListBackground: darken($grayLighter,5%); +$grafanaListAccent: darken($grayLighter,8%); +$grafanaListBorderTop: #eee; +$grafanaListBorderBottom: #eee; +$grafanaListHighlight: darken($grayLighter,10%); +$grafanaListHighlightContrast: #ddd; +$grafanaListMainLinkColor: $textColor; + + +// Tables +// ------------------------- +$tableBackground: transparent; // overall background-color +$tableBackgroundAccent: #f9f9f9; // for striping +$tableBackgroundHover: #E8F8FD; // for hover +$tableBorder: #ddd; // table and cell border + +// Scrollbars +$scrollbarBackground: $grayLighter; +$scrollbarBackground2: $grayLighter; +$scrollbarBorder: $grayLight; + +// Buttons +// ------------------------- +$btnBackground: $grayLighter; +$btnBackgroundHighlight: darken($grayLighter, 15%); +$btnBorder: #bbb; + +$btnPrimaryBackground: lighten($blue, 3%); +$btnPrimaryBackgroundHighlight: darken($blue, 3%); + +$btnInfoBackground: lighten($purple, 3%); +$btnInfoBackgroundHighlight: darken($purple, 3%); + +$btnSuccessBackground: lighten($green, 3%); +$btnSuccessBackgroundHighlight: darken($green, 3%); + +$btnWarningBackground: lighten($orange, 3%); +$btnWarningBackgroundHighlight: darken($orange, 3%); + +$btnDangerBackground: lighten($red, 3%); +$btnDangerBackgroundHighlight: darken($red, 3%); + +$btnInverseBackground: $grayLighter; +$btnInverseBackgroundHighlight: darken($grayLighter, 5%); +$btnInverseText: $black; +$btnInverseBorder: $grayLight; + +$btnText: $grayLighter; + +$iconContainerBackground: $white; +$iconContainerBackgroundHighlight: lighten($white, 5%); +$iconContainerBorder: 1px solid rgba(0,0,0, 0.05); +$iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); + + +// Forms +// ------------------------- +$inputBackground: $white; +$inputBorder: $grayLight; +$inputBorderRadius: $baseBorderRadius; +$inputDisabledBackground: $grayLighter; +$formActionsBackground: #f5f5f5; +$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +$inputText: #020202; +$labelBackground: #f8f8f8; + + +// Sidemenu +// ------------------------- +$sideMenuBackground: $grafanaPanelBackground; +$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); + +// search +$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%); + +// Dropdowns +// ------------------------- +$dropdownBackground: $white; +$dropdownBorder: $grafanaTargetBorder; +$dropdownDividerTop: #e5e5e5; +$dropdownDividerBottom: $white; +$dropdownDivider: $dropdownDividerTop; +$dropdownTitle: #333; + +$dropdownLinkColor: $grayDark; +$dropdownLinkColorHover: $white; +$dropdownLinkColorActive: $white; + +$dropdownLinkBackgroundActive: $blue; +$dropdownLinkBackgroundHover: $blue; + + +// COMPONENT VARIABLES +// -------------------------------------------------- + + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindexDropdown: 1000; +$zindexPopover: 1010; +$zindexTooltip: 1030; +$zindexFixedNavbar: 1030; +$zindexModalBackdrop: 1040; +$zindexModal: 1050; + + +// Sprite icons path +// ------------------------- +$iconSpritePath: "../img/glyphicons-halflings.png"; +$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; + + +// Input placeholder text color +// ------------------------- +$placeholderText: $grayLight; + + +// Hr border color +// ------------------------- +$hrBorder: $grayLighter; + + +// Horizontal forms & lists +// ------------------------- +$horizontalComponentOffset: 180px; + + +// Wells +// ------------------------- +$wellBackground: $grayLighter; + + +// Navbar +// ------------------------- +$navbarCollapseWidth: 979px; +$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; + +$navbarHeight: 52px; +$navbarBackgroundHighlight: #f8f8f8; +$navbarBackground: #f8f8f8; +$navbarBorder: 1px solid $grafanaTargetBorder; + +$navbarText: #666; +$navbarLinkColor: #666; +$navbarLinkColorHover: #333; +$navbarLinkColorActive: #555; +$navbarLinkBackgroundHover: transparent; +$navbarLinkBackgroundActive: darken($navbarBackground, 6.5%); +$navbarDropdownShadow: inset 0px 4px 7px -4px darken($bodyBackground, 20%); + +$navbarBrandColor: $navbarLinkColor; + +$navbarButtonBackground: lighten($navbarBackground, 3%); +$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); + + +// Pagination +// ------------------------- +$paginationBackground: $grayLight; +$paginationBorder: transparent; +$paginationActiveBackground: $blue; + + +// Hero unit +// ------------------------- +$heroUnitBackground: $grayLighter; +$heroUnitHeadingColor: inherit; +$heroUnitLeadColor: inherit; + + +// Form states and alerts +// ------------------------- +$warningText: lighten($orange, 10%); +$warningBackground: $orange; +$warningBorder: transparent; + +$errorText: lighten($red, 10%); +$errorBackground: $red; +$errorBorder: transparent; + +$successText: lighten($green, 10%); +$successBackground: $green; +$successBorder: transparent; + +$infoText: lighten($purple,10%); +$infoBackground: $purple; +$infoBorder: transparent; + + +// Tooltips and popovers +// ------------------------- +$tooltipColor: $white; +$tooltipBackground: $grayDark; +$tooltipArrowWidth: 5px; +$tooltipArrowColor: $tooltipBackground; +$tooltipLinkColor: darken($white,11%); + +$popoverBackground: $white; +$popoverArrowWidth: 15px; +$popoverArrowColor: $white; +$popoverTitleBackground: $white; + +// Special enhancement for popovers +$popoverArrowOuterWidth: $popoverArrowWidth + 1; +$popoverArrowOuterColor: rgba(0,0,0,.25); + +// images +$checkboxImageUrl: '../img/checkbox_white.png'; + +// GRID +// -------------------------------------------------- + +// Default 940px grid +// ------------------------- +$gridColumns: 12; +$gridColumnWidth: 60px; +$gridGutterWidth: 20px; +$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); + +// 1200px min +$gridColumnWidth1200: 70px; +$gridGutterWidth1200: 30px; +$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); + +// 768px-979px +$gridColumnWidth768: 42px; +$gridGutterWidth768: 20px; +$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); + + +// Fluid grid +// ------------------------- +$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); +$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); + +// 1200px min +$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); +$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); + +// 768px-979px +$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); +$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); diff --git a/tasks/options/concat.js b/tasks/options/concat.js index eea68919253..521db4d9f39 100644 --- a/tasks/options/concat.js +++ b/tasks/options/concat.js @@ -7,7 +7,6 @@ module.exports = function(config) { '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', '<%= genDir %>/css/bootstrap.dark.min.css', - '<%= genDir %>/css/bootstrap-responsive.min.css', '<%= genDir %>/vendor/css/font-awesome.min.css' ], dest: '<%= genDir %>/css/grafana.dark.min.css' @@ -18,7 +17,6 @@ module.exports = function(config) { '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', '<%= genDir %>/css/bootstrap.light.min.css', - '<%= genDir %>/css/bootstrap-responsive.min.css', '<%= genDir %>/vendor/css/font-awesome.min.css' ], dest: '<%= genDir %>/css/grafana.light.min.css' diff --git a/tasks/options/sass.js b/tasks/options/sass.js new file mode 100644 index 00000000000..38e72f28a98 --- /dev/null +++ b/tasks/options/sass.js @@ -0,0 +1,12 @@ +module.exports = function(config) { + + return { + src:{ + options: {}, + files: { + "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss", + "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss", + } + } + }; +}; diff --git a/tasks/options/watch.js b/tasks/options/watch.js index 187b07696c7..8e02bb2a509 100644 --- a/tasks/options/watch.js +++ b/tasks/options/watch.js @@ -21,9 +21,9 @@ module.exports = function(config, grunt) { grunt.task.run('jscs'); } - if (/(\.less)$/.test(filepath)) { + if (/(\.scss)$/.test(filepath)) { grunt.task.run('clean:css'); - grunt.task.run('css'); + grunt.task.run('sass'); } if (/(\.ts)$/.test(filepath)) { From 5447bd007a2ce98f7d2ef675b15e0b738d273edf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 16:02:58 +0100 Subject: [PATCH 070/444] ux(css): migrated from less to saas --- public/less/base/base.less | 28 - public/less/base/code.less | 52 -- public/less/base/fonts.less | 168 ------ public/less/base/forms.less | 294 ----------- public/less/base/normalize.less | 425 --------------- public/less/base/type.less | 243 --------- public/less/bootstrap/grid.less | 21 - .../less/bootstrap/responsive-1200px-min.less | 28 - .../less/bootstrap/responsive-767px-max.less | 176 ------- .../bootstrap/responsive-768px-979px.less | 19 - .../less/bootstrap/responsive-utilities.less | 59 --- public/less/bootstrap/responsive.less | 27 - public/less/components/alerts.less | 68 --- public/less/components/buttons.less | 102 ---- public/less/components/color_picker.less | 37 -- public/less/components/dashboard.less | 285 ----------- public/less/components/dropdown.less | 236 --------- public/less/components/filter-controls.less | 37 -- public/less/components/filter-list.less | 142 ----- public/less/components/filter-table.less | 57 --- public/less/components/footer.less | 9 - public/less/components/gf-form.less | 71 --- public/less/components/gf-form.scss | 2 +- public/less/components/gfbox.less | 69 --- public/less/components/infobox.less | 20 - public/less/components/modals.less | 149 ------ public/less/components/navbar.less | 178 ------- public/less/components/navs.less | 200 -------- public/less/components/old_stuff.less | 20 - public/less/components/pagination.less | 113 ---- public/less/components/panel_dashlist.less | 22 - public/less/components/panel_graph.less | 298 ----------- public/less/components/panel_singlestat.less | 51 -- public/less/components/panel_table.less | 101 ---- public/less/components/popovers.less | 128 ----- public/less/components/query_editor.less | 16 - public/less/components/scrollbar.less | 41 -- public/less/components/search.less | 107 ---- public/less/components/shortcuts.less | 6 - public/less/components/sidemenu.less | 220 -------- public/less/components/submenu.less | 133 ----- public/less/components/tables_lists.less | 43 -- public/less/components/tabs.less | 40 -- public/less/components/tags.less | 39 -- public/less/components/tagsinput.less | 39 -- public/less/components/tightform.less | 236 --------- public/less/components/timepicker.less | 107 ---- public/less/components/timepicker.scss | 19 - public/less/components/tooltip.less | 102 ---- public/less/components/tooltip.scss | 2 +- public/less/components/typeahead.less | 11 - public/less/grafana-responsive.less | 127 ----- public/less/grafana.dark.less | 2 - public/less/grafana.less | 69 --- public/less/grafana.light.less | 2 - public/less/grafana.scss | 8 +- public/less/layout/page.less | 71 --- public/less/mixins/buttons.less | 18 - public/less/mixins/mixins.less | 484 ------------------ public/less/mixins/mixins.scss | 10 +- public/less/pages/admin.less | 10 - public/less/pages/alerting.less | 42 -- public/less/pages/apps.less | 26 - public/less/pages/login.less | 169 ------ public/less/pages/playlist.less | 93 ---- public/less/pages/signup.less | 17 - public/less/utils/angular.less | 7 - public/less/utils/utils.less | 64 --- public/less/utils/validation.less | 7 - public/less/variables.dark.less | 342 ------------- public/less/variables.dark.scss | 41 +- public/less/variables.light.less | 359 ------------- public/less/variables.light.scss | 23 +- tasks/options/sass.js | 4 +- 74 files changed, 31 insertions(+), 7060 deletions(-) delete mode 100644 public/less/base/base.less delete mode 100644 public/less/base/code.less delete mode 100644 public/less/base/fonts.less delete mode 100644 public/less/base/forms.less delete mode 100644 public/less/base/normalize.less delete mode 100644 public/less/base/type.less delete mode 100644 public/less/bootstrap/grid.less delete mode 100644 public/less/bootstrap/responsive-1200px-min.less delete mode 100644 public/less/bootstrap/responsive-767px-max.less delete mode 100644 public/less/bootstrap/responsive-768px-979px.less delete mode 100644 public/less/bootstrap/responsive-utilities.less delete mode 100644 public/less/bootstrap/responsive.less delete mode 100644 public/less/components/alerts.less delete mode 100644 public/less/components/buttons.less delete mode 100644 public/less/components/color_picker.less delete mode 100644 public/less/components/dashboard.less delete mode 100644 public/less/components/dropdown.less delete mode 100644 public/less/components/filter-controls.less delete mode 100644 public/less/components/filter-list.less delete mode 100644 public/less/components/filter-table.less delete mode 100644 public/less/components/footer.less delete mode 100644 public/less/components/gf-form.less delete mode 100644 public/less/components/gfbox.less delete mode 100644 public/less/components/infobox.less delete mode 100644 public/less/components/modals.less delete mode 100644 public/less/components/navbar.less delete mode 100644 public/less/components/navs.less delete mode 100644 public/less/components/old_stuff.less delete mode 100644 public/less/components/pagination.less delete mode 100644 public/less/components/panel_dashlist.less delete mode 100644 public/less/components/panel_graph.less delete mode 100644 public/less/components/panel_singlestat.less delete mode 100644 public/less/components/panel_table.less delete mode 100644 public/less/components/popovers.less delete mode 100644 public/less/components/query_editor.less delete mode 100644 public/less/components/scrollbar.less delete mode 100644 public/less/components/search.less delete mode 100644 public/less/components/shortcuts.less delete mode 100644 public/less/components/sidemenu.less delete mode 100644 public/less/components/submenu.less delete mode 100644 public/less/components/tables_lists.less delete mode 100644 public/less/components/tabs.less delete mode 100644 public/less/components/tags.less delete mode 100644 public/less/components/tagsinput.less delete mode 100644 public/less/components/tightform.less delete mode 100644 public/less/components/timepicker.less delete mode 100644 public/less/components/tooltip.less delete mode 100644 public/less/components/typeahead.less delete mode 100644 public/less/grafana-responsive.less delete mode 100644 public/less/grafana.dark.less delete mode 100644 public/less/grafana.less delete mode 100644 public/less/grafana.light.less delete mode 100644 public/less/layout/page.less delete mode 100644 public/less/mixins/buttons.less delete mode 100644 public/less/mixins/mixins.less delete mode 100644 public/less/pages/admin.less delete mode 100644 public/less/pages/alerting.less delete mode 100644 public/less/pages/apps.less delete mode 100644 public/less/pages/login.less delete mode 100644 public/less/pages/playlist.less delete mode 100644 public/less/pages/signup.less delete mode 100644 public/less/utils/angular.less delete mode 100644 public/less/utils/utils.less delete mode 100644 public/less/utils/validation.less delete mode 100644 public/less/variables.dark.less delete mode 100644 public/less/variables.light.less diff --git a/public/less/base/base.less b/public/less/base/base.less deleted file mode 100644 index d10711b48f3..00000000000 --- a/public/less/base/base.less +++ /dev/null @@ -1,28 +0,0 @@ -html { - height: 100%; -} - -body { - height: 100%; - margin: 0; - font-family: @baseFontFamily; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @textColor; - background-color: @bodyBackground; -} - - -// Links -// ------------------------- - -a { - color: @linkColor; - text-decoration: none; -} - -a:hover, -a:focus { - color: @linkColorHover; -} - diff --git a/public/less/base/code.less b/public/less/base/code.less deleted file mode 100644 index ebbacc9d733..00000000000 --- a/public/less/base/code.less +++ /dev/null @@ -1,52 +0,0 @@ -// -// Code (inline and blocK) -// -------------------------------------------------- - - -// Inline and block code styles -code, -pre { - .font-family-monospace(); - font-size: @baseFontSize - 2; - background-color: @codeTagBackground; - color: @textColor; - border: 1px solid darken(@codeTagBackground, 15%); - padding: 2px; -} - -// Inline code -code { - color: #d14; - background-color: #f7f7f9; - border: 1px solid #e1e1e8; - white-space: nowrap; -} - -// Blocks of code -pre { - display: block; - margin: 0 0 @baseLineHeight / 2; - font-size: @baseFontSize - 1; // 14px to 13px - line-height: @baseLineHeight; - word-break: break-all; - word-wrap: break-word; - white-space: pre; - white-space: pre-wrap; - background-color: #f5f5f5; - - // Make prettyprint styles more spaced out for readability - &.prettyprint { - margin-bottom: @baseLineHeight; - } - - // Account for some code outputs that place code tags in pre tags - code { - padding: 0; - color: inherit; - white-space: pre; - white-space: pre-wrap; - background-color: transparent; - border: 0; - } -} - diff --git a/public/less/base/fonts.less b/public/less/base/fonts.less deleted file mode 100644 index 61ff672465b..00000000000 --- a/public/less/base/fonts.less +++ /dev/null @@ -1,168 +0,0 @@ -@font-face { - font-family: 'grafana-icons'; - src: url('../fonts/grafana-icons.eot?h6rv8b'); - src: url('../fonts/grafana-icons.eot?h6rv8b#iefix') format('embedded-opentype'), - url('../fonts/grafana-icons.ttf?h6rv8b') format('truetype'), - url('../fonts/grafana-icons.woff?h6rv8b') format('woff'), - url('../fonts/grafana-icons.svg?h6rv8b#grafana-icons') format('svg'); - font-weight: normal; - font-style: normal; -} - -.icon-gf { - /* use !important to prevent issues with browser extensions that change fonts */ - font-family: 'grafana-icons' !important; - speak: none; - font-style: normal; - font-weight: normal; - font-variant: normal; - text-transform: none; - line-height: 1; - - /* Better Font Rendering =========== */ - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-gf-raintank_wordmark:before { - content: "\e600"; -} -.icon-gf-raintank_icn:before { - content: "\e601"; -} -.icon-gf-raintank_r-icn:before { - content: "\e905"; -} -.icon-gf-check-alt:before { - content: "\e603"; -} -.icon-gf-check:before { - content: "\e604"; -} -.icon-gf-collector:before { - content: "\e605"; -} -.icon-gf-dashboard:before { - content: "\e606"; -} -.icon-gf-panel:before { - content: "\e904"; -} -.icon-gf-datasources:before { - content: "\e607"; -} -.icon-gf-endpoint-tiny:before { - content: "\e608"; -} -.icon-gf-endpoint:before { - content: "\e609"; -} -.icon-gf-filter:before { - content: "\e60a"; -} -.icon-gf-status:before { - content: "\e60b"; -} -.icon-gf-monitoring:before { - content: "\e60c"; -} -.icon-gf-monitoring-tiny:before { - content: "\e620"; -} -.icon-gf-jump-to-dashboard:before { - content: "\e60d"; -} -.icon-gf-warn:before { - content: "\e60e"; -} -.icon-gf-nodata:before { - content: "\e60f"; -} -.icon-gf-critical:before { - content: "\e610"; -} -.icon-gf-online:before { - content: "\e611"; -} -.icon-gf-event-error:before { - content: "\e623"; -} -.icon-gf-event:before { - content: "\e624"; -} -.icon-gf-private-collector:before { - content: "\e612"; -} -.icon-gf-alert:before { - content: "\e61f"; -} -.icon-gf-alert-disabled:before { - content: "\e621"; -} -.icon-gf-refresh:before { - content: "\e613"; -} -.icon-gf-save:before { - content: "\e614"; -} -.icon-gf-settings:before { - content: "\e615"; -} -.icon-gf-share:before { - content: "\e616"; -} -.icon-gf-star:before { - content: "\e617"; -} -.icon-gf-search:before { - content: "\e618"; -} -.icon-gf-tag-add:before { - content: "\e619"; -} -.icon-gf-tag-remove:before { - content: "\e61a"; -} -.icon-gf-video:before { - content: "\e61b"; -} -.icon-gf-bulk_action:before { - content: "\e61c"; -} -.icon-gf-users:before { - content: "\e622"; -} -.icon-gf-globe:before { - content: "\e61d"; -} -.icon-gf-snapshot:before { - content: "\e61e"; -} -.icon-gf-play-grafana-icon:before { - content: "\e629"; -} -.icon-gf-grafana-icon:before { - content: "\e625"; -} -.icon-gf-email:before { - content: "\e628"; -} -.icon-gf-stopwatch:before { - content: "\e626"; -} -.icon-gf-skull:before { - content: "\e900"; -} -.icon-gf-probe:before { - content: "\e901"; -} -.icon-gf-apps:before { - content: "\e902"; -} -.icon-gf-litmus:before { - content: "\e627"; -} -.icon-gf-grafana_wordmark:before { - content: "\e903"; -} - diff --git a/public/less/base/forms.less b/public/less/base/forms.less deleted file mode 100644 index 1e4e6b74c26..00000000000 --- a/public/less/base/forms.less +++ /dev/null @@ -1,294 +0,0 @@ -// -// Forms -// -------------------------------------------------- - - -// GENERAL STYLES -// -------------- - -// Make all forms have space below them -form { - margin: 0 0 @baseLineHeight; -} - -fieldset { - padding: 0; - margin: 0; - border: 0; -} - -// Groups of fields with labels on top (legends) -legend { - display: block; - width: 100%; - padding: 0; - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; - line-height: @baseLineHeight * 2; - color: @grayDark; - border: 0; - border-bottom: 1px solid #e5e5e5; - - // Small - small { - font-size: @baseLineHeight * .75; - color: @grayLight; - } -} - -// Set font for forms -label, -input, -button, -select, -textarea { - .font-shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here -} -input, -button, -select, -textarea { - font-family: @baseFontFamily; // And only set font-family here for those that need it (note the missing label element) -} - -// Identify controls by their labels -label { - display: block; - margin-bottom: 5px; -} - -// Form controls -// ------------------------- - -// Shared size and type resets -select, -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - display: inline-block; - height: @baseLineHeight; - padding: 4px 6px; - font-size: @baseFontSize; - line-height: @baseLineHeight; - color: @inputText; - vertical-align: top; -} - -// Reset appearance properties for textual inputs and textarea -// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) -input, -textarea, -.uneditable-input { - width: 206px; // plus 12px padding and 2px border -} -// Reset height since textareas have rows -textarea { - height: auto; -} - -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - background-color: @inputBackground; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border linear .2s, box-shadow linear .2s"); - - // Focus state - &:focus { - border-color: rgba(82,168,236, .8); - outline: 0; - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; -} - -// Reset width of input images, buttons, radios, checkboxes -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; // Override of generic input selector -} - -// Set the height of select and file controls to match text inputs -select, -input[type="file"] { - height: @inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - line-height: @inputHeight; -} - -// Make select elements obey height by applying a border -select { - width: 220px; // default input width + 10px of padding that doesn't get applied - border: 1px solid @inputBorder; - background-color: @inputBackground; // Chrome on Linux and Mobile Safari need background-color -} - -// Make multiple select elements height not fixed -select[multiple], -select[size] { - height: auto; -} - -// Focus for select, file, radio, and checkbox -select:focus, -input[type="file"]:focus, -input[type="radio"]:focus, -input[type="checkbox"]:focus { - .tab-focus(); -} - -// Placeholder -// ------------------------- - -// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector -input, -textarea { - .placeholder(); -} - - -// INPUT SIZES -// ----------- - -// General classes for quick sizes -.input-mini { width: 60px; } -.input-small { width: 90px; } -.input-medium { width: 150px; } -.input-large { width: 210px; } -.input-xlarge { width: 270px; } -.input-xxlarge { width: 530px; } - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid sizes -#grid > .input(@gridColumnWidth, @gridGutterWidth); - -// DISABLED STATE -// -------------- - -// Disabled and read-only inputs -input[disabled], -select[disabled], -textarea[disabled], -input[readonly], -select[readonly], -textarea[readonly] { - cursor: not-allowed; - background-color: @inputDisabledBackground; -} - -// Explicitly reset the colors here -input[type="radio"][disabled], -input[type="checkbox"][disabled], -input[type="radio"][readonly], -input[type="checkbox"][readonly] { - background-color: transparent; -} - - -// HTML5 invalid states -// Shares styles with the .control-group.error above -input:focus:invalid, -textarea:focus:invalid, -select:focus:invalid { - color: #b94a48; - border-color: #ee5f5b; - &:focus { - border-color: darken(#ee5f5b, 10%); - @shadow: 0 0 6px lighten(#ee5f5b, 20%); - .box-shadow(@shadow); - } -} - -input[type=text].input-fluid { - width: 100%; - box-sizing: border-box; - padding: 10px; - font-size: 16px; - -moz-box-sizing: border-box; - height: 100%; -} - -input[type="checkbox"].cr1 { - display: none; -} - -.editor-option label.cr1 { - display: inline-block; - margin: 5px 0 1px 0; -} - -label.cr1 { - display: inline-block; - height: 19px; - position: relative; - clear: none; - text-indent: 2px; - margin: 0 0 0px 0; - padding: 0 0 0 20px; - vertical-align: top; - background: url(@checkboxImageUrl) left top no-repeat; - cursor:pointer; -} - -input[type="checkbox"]:checked+label { - background: url(@checkboxImageUrl) 0px -21px no-repeat; -} - -.gf-fluid-input { - border: none; - display: block; - overflow: hidden; - padding-right: 10px; - input[type=text] { - width: 100%; - padding: 5px 6px; - height: 100%; - box-sizing: border-box; - } - textarea { - width: 100%; - padding: 5px 6px; - height: 100%; - box-sizing: border-box; - } -} - diff --git a/public/less/base/normalize.less b/public/less/base/normalize.less deleted file mode 100644 index 93dd4521727..00000000000 --- a/public/less/base/normalize.less +++ /dev/null @@ -1,425 +0,0 @@ -/*! normalize.css commit fe56763 | MIT License | github.com/necolas/normalize.css */ - -// -// 1. Set default font family to sans-serif. -// 2. Prevent iOS and IE text size adjust after device orientation change, -// without disabling user zoom. -// - -html { - font-family: sans-serif; // 1 - -ms-text-size-adjust: 100%; // 2 - -webkit-text-size-adjust: 100%; // 2 -} - -// -// Remove default margin. -// - -body { - margin: 0; -} - -// HTML5 display definitions -// ========================================================================== - -// -// Correct `block` display not defined for any HTML5 element in IE 8/9. -// Correct `block` display not defined for `details` or `summary` in IE 10/11 -// and Firefox. -// Correct `block` display not defined for `main` in IE 11. -// - -article, -aside, -details, -figcaption, -figure, -footer, -header, -main, -menu, -nav, -section, -summary { - display: block; -} - -// -// 1. Correct `inline-block` display not defined in IE 8/9. -// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. -// - -audio, -canvas, -progress, -video { - display: inline-block; // 1 - vertical-align: baseline; // 2 -} - -// -// Prevent modern browsers from displaying `audio` without controls. -// Remove excess height in iOS 5 devices. -// - -audio:not([controls]) { - display: none; - height: 0; -} - -// -// Address `[hidden]` styling not present in IE 8/9/10. -// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. -// - -[hidden], -template { - display: none; -} - -// Links -// ========================================================================== - -// -// Remove the gray background color from active links in IE 10. -// - -a { - background-color: transparent; -} - -// -// Improve readability of focused elements when they are also in an -// active/hover state. -// - -a { - &:active { - outline: 0; - } - &:hover { - outline: 0; - } -} - -// Text-level semantics -// ========================================================================== - -// -// Address styling not present in IE 8/9/10/11, Safari, and Chrome. -// - -abbr[title] { - border-bottom: 1px dotted; -} - -// -// Address style set to `bolder` in Firefox 4+, Safari, and Chrome. -// - -b, -strong { - font-weight: bold; -} - -// -// Address styling not present in Safari and Chrome. -// - -dfn { - font-style: italic; -} - -// -// Address variable `h1` font-size and margin within `section` and `article` -// contexts in Firefox 4+, Safari, and Chrome. -// - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -// -// Address styling not present in IE 8/9. -// - -mark { - background: #ff0; - color: #000; -} - -// -// Address inconsistent and variable font size in all browsers. -// - -small { - font-size: 80%; -} - -// -// Prevent `sub` and `sup` affecting `line-height` in all browsers. -// - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sup { - top: -0.5em; -} - -sub { - bottom: -0.25em; -} - -// Embedded content -// ========================================================================== - -// -// Remove border when inside `a` element in IE 8/9/10. -// - -img { - border: 0; -} - -// -// Correct overflow not hidden in IE 9/10/11. -// - -svg:not(:root) { - overflow: hidden; -} - -// Grouping content -// ========================================================================== - -// -// Address margin not present in IE 8/9 and Safari. -// - -figure { - margin: 1em 40px; -} - -// -// Address differences between Firefox and other browsers. -// - -hr { - box-sizing: content-box; - height: 0; -} - -// -// Contain overflow in all browsers. -// - -pre { - overflow: auto; -} - -// -// Address odd `em`-unit font size rendering in all browsers. -// - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; - font-size: 1em; -} - -// Forms -// ========================================================================== - -// -// Known limitation: by default, Chrome and Safari on OS X allow very limited -// styling of `select`, unless a `border` property is set. -// - -// -// 1. Correct color not being inherited. -// Known issue: affects color of disabled elements. -// 2. Correct font properties not being inherited. -// 3. Address margins set differently in Firefox 4+, Safari, and Chrome. -// - -button, -input, -optgroup, -select, -textarea { - color: inherit; // 1 - font: inherit; // 2 - margin: 0; // 3 -} - -// -// Address `overflow` set to `hidden` in IE 8/9/10/11. -// - -button { - overflow: visible; -} - -// -// Address inconsistent `text-transform` inheritance for `button` and `select`. -// All other form control elements do not inherit `text-transform` values. -// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. -// Correct `select` style inheritance in Firefox. -// - -button, -select { - text-transform: none; -} - -// -// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` -// and `video` controls. -// 2. Correct inability to style clickable `input` types in iOS. -// 3. Improve usability and consistency of cursor style between image-type -// `input` and others. -// - -button, -html input[type="button"], // 1 -input[type="reset"], -input[type="submit"] { - -webkit-appearance: button; // 2 - cursor: pointer; // 3 -} - -// -// Re-set default cursor for disabled elements. -// - -button[disabled], -html input[disabled] { - cursor: default; -} - -// -// Remove inner padding and border in Firefox 4+. -// - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -// -// Address Firefox 4+ setting `line-height` on `input` using `!important` in -// the UA stylesheet. -// - -input { - line-height: normal; -} - -// -// It's recommended that you don't attempt to style these elements. -// Firefox's implementation doesn't respect box-sizing, padding, or width. -// -// 1. Address box sizing set to `content-box` in IE 8/9/10. -// 2. Remove excess padding in IE 8/9/10. -// - -input[type="checkbox"], -input[type="radio"] { - box-sizing: border-box; // 1 - padding: 0; // 2 -} - -// -// Fix the cursor style for Chrome's increment/decrement buttons. For certain -// `font-size` values of the `input`, it causes the cursor style of the -// decrement button to change from `default` to `text`. -// - -input[type="number"]::-webkit-inner-spin-button, -input[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -// -// Address `appearance` set to `searchfield` in Safari and Chrome. -// - -input[type="search"] { - -webkit-appearance: textfield; -} - -// -// Remove inner padding and search cancel button in Safari and Chrome on OS X. -// Safari (but not Chrome) clips the cancel button when the search input has -// padding (and `textfield` appearance). -// - -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} - -// -// Define consistent border, margin, and padding. -// - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -// -// 1. Correct `color` not being inherited in IE 8/9/10/11. -// 2. Remove padding so people aren't caught out if they zero out fieldsets. -// - -legend { - border: 0; // 1 - padding: 0; // 2 -} - -// -// Remove default vertical scrollbar in IE 8/9/10/11. -// - -textarea { - overflow: auto; -} - -// -// Don't inherit the `font-weight` (applied by a rule above). -// NOTE: the default cannot safely be changed in Chrome and Safari on OS X. -// - -optgroup { - font-weight: bold; -} - -// Tables -// ========================================================================== - -// -// Remove most spacing between table cells. -// - -table { - border-collapse: collapse; - border-spacing: 0; -} - -td, -th { - padding: 0; -} diff --git a/public/less/base/type.less b/public/less/base/type.less deleted file mode 100644 index f75e52d0f90..00000000000 --- a/public/less/base/type.less +++ /dev/null @@ -1,243 +0,0 @@ -// -// Typography -// -------------------------------------------------- - - -// Body text -// ------------------------- - -p { - margin: 0 0 @baseLineHeight / 2; -} -.lead { - margin-bottom: @baseLineHeight; - font-size: @baseFontSize * 1.5; - font-weight: 200; - line-height: @baseLineHeight * 1.5; -} - -// Emphasis & misc - -// ------------------------- - -// Ex: 14px base font * 85% = about 12px -.small, small { font-size: 85%; } -.large { font-size: 120%; } - -strong { font-weight: bold; } -em { font-style: italic; color: @headingsColor; } -cite { font-style: normal; } - -// Utility classes -.muted { color: @grayLight; } -a.muted:hover, -a.muted:focus { color: darken(@grayLight, 10%); } - -.text-warning { color: @warningText; } -a.text-warning:hover, -a.text-warning:focus { color: darken(@warningText, 10%); } - -.text-error { color: @errorText; } -a.text-error:hover, -a.text-error:focus { color: darken(@errorText, 10%); } - -.text-info { color: @infoText; } -a.text-info:hover, -a.text-info:focus { color: darken(@infoText, 10%); } - -.text-success { color: @successText; } -a.text-success:hover, -a.text-success:focus { color: darken(@successText, 10%); } -a { cursor: pointer; } - -.text-left { text-align: left; } -.text-right { text-align: right; } -.text-center { text-align: center; } - - -// Headings -// ------------------------- - -h1, h2, h3, h4, h5, h6 { - margin: (@baseLineHeight / 2) 0; - font-family: @headingsFontFamily; - font-weight: @headingsFontWeight; - line-height: @baseLineHeight; - color: @headingsColor; - text-rendering: optimizelegibility; // Fix the character spacing for headings - font-style: @headingsFontStyle; - small { - font-weight: normal; - line-height: 1; - color: @grayLight; - } -} - -h1, -h2, -h3 { line-height: @baseLineHeight * 2; } - -h1 { font-size: @baseFontSize * 2.00; } // ~38px -h2 { font-size: @baseFontSize * 1.75; } // ~32px -h3 { font-size: @baseFontSize * 1.50; } // ~24px -h4 { font-size: @baseFontSize * 1.25; } // ~18px -h5 { font-size: @baseFontSize; } -h6 { font-size: @baseFontSize * 0.85; } // ~12px - -h1 small { font-size: @baseFontSize * 1.75; } // ~24px -h2 small { font-size: @baseFontSize * 1.25; } // ~18px -h3 small { font-size: @baseFontSize; } -h4 small { font-size: @baseFontSize; } - - -// Lists -// -------------------------------------------------- - -// Unordered and Ordered lists -ul, ol { - padding: 0; - margin: 0 0 @baseLineHeight / 2 25px; -} -ul ul, -ul ol, -ol ol, -ol ul { - margin-bottom: 0; -} -li { - line-height: @baseLineHeight; -} - -// Remove default list styles -ul.unstyled, -ol.unstyled { - margin-left: 0; - list-style: none; -} - -// Single-line list items -ul.inline, -ol.inline { - margin-left: 0; - list-style: none; - > li { - display: inline-block; - padding-left: 5px; - padding-right: 5px; - } -} - -// Description Lists -dl { - margin-bottom: @baseLineHeight; -} -dt, -dd { - line-height: @baseLineHeight; -} -dt { - font-weight: bold; -} -dd { - margin-left: @baseLineHeight / 2; -} - -// MISC -// ---- - -// Horizontal rules -hr { - margin: @baseLineHeight 0; - border: 0; - border-top: 1px solid @hrBorder; - border-bottom: 1px solid @white; -} - -// Abbreviations and acronyms -abbr[title], -// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 -abbr[data-original-title] { - cursor: help; - border-bottom: 1px dotted @grayLight; -} -abbr.initialism { - font-size: 90%; - text-transform: uppercase; -} - -// Blockquotes -blockquote { - padding: 0 0 0 15px; - margin: 0 0 @baseLineHeight; - border-left: 5px solid @grayLighter; - p { - margin-bottom: 0; - font-size: @baseFontSize * 1.25; - font-weight: 300; - line-height: 1.25; - } - small { - display: block; - line-height: @baseLineHeight; - color: @grayLight; - &:before { - content: '\2014 \00A0'; - } - } - - // Float right with text-align: right - &.pull-right { - float: right; - padding-right: 15px; - padding-left: 0; - border-right: 5px solid @grayLighter; - border-left: 0; - p, - small { - text-align: right; - } - small { - &:before { - content: ''; - } - &:after { - content: '\00A0 \2014'; - } - } - } -} - -// Quotes -q:before, -q:after, -blockquote:before, -blockquote:after { - content: ""; -} - -// Addresses -address { - display: block; - margin-bottom: @baseLineHeight; - font-style: normal; - line-height: @baseLineHeight; -} - -a.external-link { - color: @blue; - text-decoration: underline; -} - - -.link { - color: @linkColor; - cursor: pointer; -} - -.link:hover { - color: @linkColorHover; -} - -.pointer { - cursor: pointer; -} diff --git a/public/less/bootstrap/grid.less b/public/less/bootstrap/grid.less deleted file mode 100644 index 750d2035149..00000000000 --- a/public/less/bootstrap/grid.less +++ /dev/null @@ -1,21 +0,0 @@ -// -// Grid system -// -------------------------------------------------- - - -// Fixed (940px) -#grid > .core(@gridColumnWidth, @gridGutterWidth); - -// Fluid (940px) -#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); - -// Reset utility classes due to specificity -[class*="span"].hide, -.row-fluid [class*="span"].hide { - display: none; -} - -[class*="span"].pull-right, -.row-fluid [class*="span"].pull-right { - float: right; -} diff --git a/public/less/bootstrap/responsive-1200px-min.less b/public/less/bootstrap/responsive-1200px-min.less deleted file mode 100644 index 4f35ba6ca23..00000000000 --- a/public/less/bootstrap/responsive-1200px-min.less +++ /dev/null @@ -1,28 +0,0 @@ -// -// Responsive: Large desktop and up -// -------------------------------------------------- - - -@media (min-width: 1200px) { - - // Fixed grid - #grid > .core(@gridColumnWidth1200, @gridGutterWidth1200); - - // Fluid grid - #grid > .fluid(@fluidGridColumnWidth1200, @fluidGridGutterWidth1200); - - // Input grid - #grid > .input(@gridColumnWidth1200, @gridGutterWidth1200); - - // Thumbnails - .thumbnails { - margin-left: -@gridGutterWidth1200; - } - .thumbnails > li { - margin-left: @gridGutterWidth1200; - } - .row-fluid .thumbnails { - margin-left: 0; - } - -} diff --git a/public/less/bootstrap/responsive-767px-max.less b/public/less/bootstrap/responsive-767px-max.less deleted file mode 100644 index a074bc9d69d..00000000000 --- a/public/less/bootstrap/responsive-767px-max.less +++ /dev/null @@ -1,176 +0,0 @@ -// -// Responsive: Landscape phone to desktop/tablet -// -------------------------------------------------- - - -@media (max-width: 767px) { - - // TYPOGRAPHY - // ---------- - // Reset horizontal dl - .dl-horizontal { - dt { - float: none; - clear: none; - width: auto; - text-align: left; - } - dd { - margin-left: 0; - } - } - - // GRID & CONTAINERS - // ----------------- - // Remove width from containers - .container { - width: auto; - } - // Fluid rows - .row-fluid { - width: 100%; - } - // Undo negative margin on rows and thumbnails - .row, - .thumbnails { - margin-left: 0; - } - .thumbnails > li { - float: none; - margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present - } - // Make all grid-sized elements block level again - [class*="span"], - .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing - .row-fluid [class*="span"] { - float: none; - display: block; - width: 100%; - margin-left: 0; - .box-sizing(border-box); - } - .span12, - .row-fluid .span12 { - width: 100%; - .box-sizing(border-box); - } - .row-fluid [class*="offset"]:first-child { - margin-left: 0; - } - - // FORM FIELDS - // ----------- - // Make span* classes full width - .input-large, - .input-xlarge, - .input-xxlarge, - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - .input-block-level(); - } - // But don't let it screw up prepend/append inputs - .input-prepend input, - .input-append input, - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - display: inline-block; // redeclare so they don't wrap to new lines - width: auto; - } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } - - // Modals - .modal { - position: fixed; - top: 20px; - left: 20px; - right: 20px; - width: auto; - margin: 0; - &.fade { top: -100px; } - &.fade.in { top: 20px; } - } - -} - - - -// UP TO LANDSCAPE PHONE -// --------------------- - -@media (max-width: 480px) { - - // Smooth out the collapsing/expanding nav - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); // activate the GPU - } - - // Block level the page header small tag for readability - .page-header h1 small { - display: block; - line-height: @baseLineHeight; - } - - // Update checkboxes for iOS - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - - // Remove the horizontal form styles - .form-horizontal { - .control-label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: 10px; - padding-right: 10px; - } - } - - // Medias - // Reset float and spacing to stack - .media .pull-left, - .media .pull-right { - float: none; - display: block; - margin-bottom: 10px; - } - // Remove side margins since we stack instead of indent - .media-object { - margin-right: 0; - margin-left: 0; - } - - // Modals - .modal { - top: 10px; - left: 10px; - right: 10px; - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - - // Carousel - .carousel-caption { - position: static; - } - -} diff --git a/public/less/bootstrap/responsive-768px-979px.less b/public/less/bootstrap/responsive-768px-979px.less deleted file mode 100644 index 8e8c486a069..00000000000 --- a/public/less/bootstrap/responsive-768px-979px.less +++ /dev/null @@ -1,19 +0,0 @@ -// -// Responsive: Tablet to desktop -// -------------------------------------------------- - - -@media (min-width: 768px) and (max-width: 979px) { - - // Fixed grid - #grid > .core(@gridColumnWidth768, @gridGutterWidth768); - - // Fluid grid - #grid > .fluid(@fluidGridColumnWidth768, @fluidGridGutterWidth768); - - // Input grid - #grid > .input(@gridColumnWidth768, @gridGutterWidth768); - - // No need to reset .thumbnails here since it's the same @gridGutterWidth - -} diff --git a/public/less/bootstrap/responsive-utilities.less b/public/less/bootstrap/responsive-utilities.less deleted file mode 100644 index bf43e8ef739..00000000000 --- a/public/less/bootstrap/responsive-utilities.less +++ /dev/null @@ -1,59 +0,0 @@ -// -// Responsive: Utility classes -// -------------------------------------------------- - - -// IE10 Metro responsive -// Required for Windows 8 Metro split-screen snapping with IE10 -// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ -@-ms-viewport{ - width: device-width; -} - -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} - -// Visibility utilities - -// For desktops -.visible-phone { display: none !important; } -.visible-tablet { display: none !important; } -.hidden-phone { } -.hidden-tablet { } -.hidden-desktop { display: none !important; } -.visible-desktop { display: inherit !important; } - -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } - // Show - .visible-tablet { display: inherit !important; } - // Hide - .hidden-tablet { display: none !important; } -} - -// Phones only -@media (max-width: 767px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } -} - -// Print utilities -.visible-print { display: none !important; } -.hidden-print { } - -@media print { - .visible-print { display: inherit !important; } - .hidden-print { display: none !important; } -} diff --git a/public/less/bootstrap/responsive.less b/public/less/bootstrap/responsive.less deleted file mode 100644 index 64788eaf1b9..00000000000 --- a/public/less/bootstrap/responsive.less +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Bootstrap Responsive v2.3.2 - * - * Copyright 2013 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world by @mdo and @fat. - */ - - -// Responsive.less -// For phone and tablet devices -// ------------------------------------------------------------- - - -// REPEAT VARIABLES & MIXINS -// ------------------------- -// Required since we compile the responsive stuff separately - -@import "../mixins/mixins.less"; -@import "responsive-utilities.less"; -@import "responsive-1200px-min.less"; -@import "responsive-768px-979px.less"; -@import "responsive-767px-max.less"; - - diff --git a/public/less/components/alerts.less b/public/less/components/alerts.less deleted file mode 100644 index 6824697326c..00000000000 --- a/public/less/components/alerts.less +++ /dev/null @@ -1,68 +0,0 @@ -// -// Alerts -// -------------------------------------------------- - - -// Base styles -// ------------------------- - -.alert { - padding: 8px 35px 13px 14px; - margin-bottom: @baseLineHeight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: @warningBackground; - position: relative; - color: @white; - text-shadow: 0 1px 0 rgba(0,0,0,.5); - border-radius: 2px; -} - -// Alternate styles -// ------------------------- - -.alert-success { - background-color: @successBackground; -} - -.alert-danger, -.alert-error { - background-color: @errorBackground; -} -.alert-info { - background-color: @infoBackground; -} -.alert-warning { - background-color: @warningBackground; -} - -.page-alert-list { - z-index: 8000; - min-width: 300px; - max-width: 300px; - position: fixed; - right: 20px; - top: 56px; -} - -.alert-close { - position: absolute; - top: -4px; - right: -2px; - width: 18px; - height: 18px; - padding: 0; - background: @white; - border-radius: 50%; - border: none; - font-size: 1.1rem; - color: @grayDarker; - .fa { - position: relative; - top: -2px; - } -} - -.alert-title { - font-weight: @fontWeightSemi; - padding-bottom: 2px; -} diff --git a/public/less/components/buttons.less b/public/less/components/buttons.less deleted file mode 100644 index 1e08400b821..00000000000 --- a/public/less/components/buttons.less +++ /dev/null @@ -1,102 +0,0 @@ -// -// Buttons -// -------------------------------------------------- - -// Base styles -// -------------------------------------------------- - -// Core -.btn { - display: inline-block; - padding: 8px 12px; - margin-right: 10px; - font-size: @baseFontSize; - line-height: @baseLineHeight; - text-align: center; - vertical-align: middle; - cursor: pointer; - border: none; - - .buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); - .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); - - // Hover/focus state - &:hover, - &:focus { - text-decoration: none; - } - - // Focus state for keyboard and accessibility - &:focus { - .tab-focus(); - } - - // Active state - &.active, - &:active { - background-image: none; - } - - // Disabled state - &.disabled, - &[disabled] { - cursor: default; - background-image: none; - .opacity(65); - } -} - -// Button Sizes -// -------------------------------------------------- - -// Large -.btn-large { - padding: 6px 20px; - font-size: @fontSizeLarge; -} - -.btn-small { - padding: 2px 10px; - font-size: @fontSizeSmall; -} - -.btn-mini { - padding: 2px 6px; - margin-right: 0; - margin-right: 0; - font-size: @fontSizeMini; -} - -// Set the backgrounds -// ------------------------- -.btn-primary { - .buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight); -} -// Warning appears are orange -.btn-warning { - .buttonBackground(@btnWarningBackground, @btnWarningBackgroundHighlight); -} -// Danger and error appear as red -.btn-danger { - .buttonBackground(@btnDangerBackground, @btnDangerBackgroundHighlight); -} -// Success appears as green -.btn-success { - .buttonBackground(@btnSuccessBackground, @btnSuccessBackgroundHighlight); -} -// Info appears as a neutral blue -.btn-info { - .buttonBackground(@btnInfoBackground, @btnInfoBackgroundHighlight); -} -// Inverse appears as dark gray -.btn-inverse { - .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight, @btnInverseText); - box-shadow: none; - border: 1px solid @grafanaTargetFuncHightlight; -} - -.btn-text { - color: @btnText; - margin: 0; - vertical-align: middle; -} diff --git a/public/less/components/color_picker.less b/public/less/components/color_picker.less deleted file mode 100644 index a9e599ef2b5..00000000000 --- a/public/less/components/color_picker.less +++ /dev/null @@ -1,37 +0,0 @@ - -.sp-replacer { - background: inherit; - border: none; - color: inherit; - padding: 0; -} - -.sp-replacer:hover, .sp-replacer.sp-active { - border-color: inherit; - color: inherit; -} - -.sp-container { - border-radius: 0; - background-color: @heroUnitBackground; - border: none; - padding: 0; -} - -.sp-palette-container, .sp-picker-container { - border: none; -} - -.sp-dd { - display: none; -} - -.sp-preview { - position: relative; - width: 15px; - height: 15px; - border: none; - margin-right: 5px; - float: left; - z-index: 0; -} diff --git a/public/less/components/dashboard.less b/public/less/components/dashboard.less deleted file mode 100644 index cc19bf0a1b6..00000000000 --- a/public/less/components/dashboard.less +++ /dev/null @@ -1,285 +0,0 @@ -.template-variable { - color: @variable; -} - -.grafana-row { - margin-bottom: 5px; -} - -.row-tab { - .dropdown-menu-right { - top: 0; - left: 33px; - } -} - -.row-tab-button { - padding: 0px; - cursor: pointer; - vertical-align: middle; - width: 30px; - height: 30px; - text-align: center; - display: inline-block; - line-height: 30px; - background: @btnSuccessBackground; - color: rgba(255,255,255,.90); -} - -.row-button { - width: 24px; - float: left; - cursor: pointer; - line-height: 31px; - background-color: @blueDark; -} - -.row-text { - white-space: nowrap; - text-transform: uppercase; - font-weight: bold; - font-size: 0.9em; - text-align: center; - line-height: 31px; - height: 31px; -} - -.row-close { - padding: 0px; - margin: 0px; - background: @grafanaPanelBackground; - text-align: center; -} - -.row-close-buttons { - position: absolute; - left: 0; -} - -.row-open { - margin-top: 5px; - left: -28px; - position: absolute; - z-index: 100; - transition: .10s left; - transition-delay: .10s; - - &:hover { - left: -12px; - } -} - - -.row-control-inner { - padding:0px; - margin:0px; - position:relative; -} - -.hide-controls { - padding: 0; - .row-tab { - display: none; - } - .add-row-panel-hint { - display: none; - } -} - -.playlist-active { - .add-row-panel-hint, - .dashnav-refresh-action, - .dashnav-zoom-out, - .dashnav-action-icons { - display: none; - } - - .grafana-menu-stop-playlist { - display: list-item; - } -} - -div.flot-text { - color: @textColor !important; -} - -.panel { - display: inline-block; - float: left; - vertical-align: top; - position: relative; -} - -.panel-margin { - margin: 5px; - display: block; -} - -.panel-container { - background-color: @grafanaPanelBackground; - position: relative; - border: @grafanaPanelBorder; - &:hover { - .panel-actions { - display: block; - } - } - - &.panel-transparent { - background-color: transparent; - border: none; - } -} - -.panel-content { - padding: 0px 10px 5px 10px; -} - -.panel-title-container { - min-height: 5px; - padding-top: 4px; - cursor: pointer; -} - -.panel-title { - border: 0px; - font-weight: @fontWeightSemi; - position: relative; - cursor: pointer; - width: 100%; - display: block; -} - -.panel-links-btn { - margin-left: 10px; - display: none; -} - -.panel-loading { - position:absolute; - top: -3px; - right: 0px; - z-index: 800; -} - -.panel-header { - text-align: center; -} - -.panel-error { - color: @white; - position: absolute; - left: 0; - padding: 0px 17px 6px 5px; - top: 0; - z-index: 10; - i { - position: relative; - top: -2px; - } -} - -.panel-error-arrow { - width: 0; - height: 0; - position: absolute; - border-left: 31px solid transparent; - border-right: 30px solid transparent; - border-bottom: 27px solid @grafanaPanelBackground; - left: 0; - bottom: 0; -} - -.panel-fullscreen { - .panel-title-container { - padding: 8px; - } -} - -.panel-full-edit { - margin-top: 20px; - margin-bottom: 20px; -} - -.panel-menu { - z-index: 500; - position: absolute; - background: @grafanaTargetFuncBackground; - border: 1px solid black; - - .panel-menu-row { - white-space: nowrap; - border-bottom: 1px solid black; - &:last-child { - border-bottom: none; - } - } - - .panel-menu-link, .panel-menu-icon { - padding: 5px 10px; - } - - .panel-menu-link { - display: inline-block; - border-right: 1px solid black; - &:last-child { - border: none; - } - } - - .dropdown-menu { - text-align: left; - } -} - -.panel-highlight { - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)"); -} - -.on-drag-hover { - .panel-container { - .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 5px rgba(82,168,236, 0.8)"); - } -} - -.panel-drop-zone { - display: none; - .panel-container { - border: 1px solid @grayDark; - } -} - -.panel-time-info { - font-weight: bold; - float: right; - margin-right: 15px; - color: @blue; - font-size: 85%; - position: absolute; - top: 0; - right: 0; -} - -.resize-panel-handle { - cursor: se-resize; - position: absolute; - bottom: 0; - right: 0; - width: 15px; - height: 15px; - display: block; -} - -.dashboard-header { - font-family: "grafana-icons"; - font-size: 22px; - text-align: center; - span { - display: inline-block; - border: none; - border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); - border-image-slice: 1; - border-bottom: 2px solid transparent; - padding: 1.2rem .2rem .4rem .2rem; - } -} diff --git a/public/less/components/dropdown.less b/public/less/components/dropdown.less deleted file mode 100644 index 94944d38168..00000000000 --- a/public/less/components/dropdown.less +++ /dev/null @@ -1,236 +0,0 @@ -// -// Dropdown menus -// -------------------------------------------------- - - -// Use the .menu class on any
    • element within the topbar or ul.tabs and you'll get some superfancy dropdowns -.dropup, -.dropdown { - position: relative; -} -.dropdown-toggle { - // The caret makes the toggle a bit too tall in IE7 - *margin-bottom: -3px; -} -.dropdown-toggle:active, -.open .dropdown-toggle { - outline: 0; -} - -// Dropdown arrow/caret -// -------------------- -.caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: top; - border-top: 4px solid @black; - border-right: 4px solid transparent; - border-left: 4px solid transparent; - content: ""; -} - -// Place the caret -.dropdown .caret { - margin-top: 8px; - margin-left: 2px; -} - -// The dropdown menu (ul) -// ---------------------- -.dropdown-menu { - position: absolute; - top: 100%; - left: 0; - z-index: @zindexDropdown; - display: none; // none by default, but block on "open" of the menu - float: left; - min-width: 140px; - padding: 5px 0; - margin: 2px 0 0; // override default ul - list-style: none; - background-color: @dropdownBackground; - border: 1px solid #ccc; // Fallback for IE7-8 - border: 1px solid @dropdownBorder; - - // Aligns the dropdown menu to right - &.pull-right { - right: 0; - left: auto; - } - - // Links within the dropdown menu - > li > a { - display: block; - padding: 3px 20px 3px 15px; - clear: both; - font-weight: normal; - line-height: @baseLineHeight; - color: @dropdownLinkColor; - white-space: nowrap; - - i { - padding-right: 5px; - color: @linkColorDisabled; - } - } -} - -// Hover/Focus state -// ----------- -.dropdown-menu > li > a:hover, -.dropdown-menu > li > a:focus, -.dropdown-submenu:hover > a, -.dropdown-submenu:focus > a { - text-decoration: none; - color: @dropdownLinkColorHover; - background-color: @grafanaListHighlight; -} - -// Active state -// ------------ -.dropdown-menu > .active > a, -.dropdown-menu > .active > a:hover, -.dropdown-menu > .active > a:focus { - color: @dropdownLinkColorActive; - text-decoration: none; - outline: 0; - background-color: @grafanaListHighlight; -} - -// Disabled state -// -------------- -// Gray out text and ensure the hover/focus state remains gray -.dropdown-menu > .disabled > a, -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - color: @grayLight; -} -// Nuke hover/focus effects -.dropdown-menu > .disabled > a:hover, -.dropdown-menu > .disabled > a:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - cursor: default; -} - -// Open state for the dropdown -// --------------------------- -.open { - & > .dropdown-menu { - display: block; - } -} - -// Backdrop to catch body clicks on mobile, etc. -// --------------------------- -.dropdown-backdrop { - position: fixed; - left: 0; - right: 0; - bottom: 0; - top: 0; - z-index: @zindexDropdown - 10; -} - -// Right aligned dropdowns -// --------------------------- -.pull-right > .dropdown-menu { - right: 0; - left: auto; -} - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// ------------------------------------------------------ -// Just add .dropup after the standard .dropdown class and you're set, bro. -// TODO: abstract this so that the navbar fixed styles are not placed here? -.dropup, -.navbar-fixed-bottom .dropdown { - // Reverse the caret - .caret { - border-top: 0; - border-bottom: 4px solid @black; - content: ""; - } - // Different positioning for bottom up menu - .dropdown-menu { - top: auto; - bottom: 100%; - margin-bottom: 1px; - } -} - -// Sub menus -// --------------------------- -.dropdown-submenu { - position: relative; -} -// Default dropdowns -.dropdown-submenu > .dropdown-menu { - top: 0; - left: 100%; - margin-top: -6px; - margin-left: -1px; - .border-radius(0 6px 6px 6px); -} -.dropdown-submenu:hover > .dropdown-menu { - display: block; -} - -// Dropups -.dropup .dropdown-submenu > .dropdown-menu { - top: auto; - bottom: 0; - margin-top: 0; - margin-bottom: -2px; - .border-radius(5px 5px 5px 0); -} - -// Caret to indicate there is a submenu -.dropdown-submenu > a:after { - display: block; - content: " "; - float: right; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; - border-width: 5px 0 5px 5px; - border-left-color: darken(@dropdownBackground, 20%); - margin-top: 5px; - margin-right: -10px; -} -.dropdown-submenu:hover > a:after { - border-left-color: @dropdownLinkColorHover; -} - -// Left aligned submenus -.dropdown-submenu.pull-left { - // Undo the float - // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere. - float: none; - - // Positioning the submenu - > .dropdown-menu { - left: -100%; - margin-left: 10px; - .border-radius(6px 0 6px 6px); - } -} - -// Tweak nav headers -// ----------------- -// Increase padding from 15px to 20px on sides -.dropdown .dropdown-menu .nav-header { - padding-left: 20px; - padding-right: 20px; -} - -// Typeahead -// --------- -.typeahead { - z-index: 1051; - margin-top: 2px; // give it some space to breathe - .border-radius(@baseBorderRadius); -} diff --git a/public/less/components/filter-controls.less b/public/less/components/filter-controls.less deleted file mode 100644 index 287bebe3757..00000000000 --- a/public/less/components/filter-controls.less +++ /dev/null @@ -1,37 +0,0 @@ -// ========================================================================== -// FILTER CONTROLS -// ========================================================================== - - - -// Filters -// -------------------------------------------------------------------------- - -.filter-controls-filters { - display: inline-block; - margin-bottom: 40px; -} - -.tab-pane > .filter-controls-filters { - margin-top: 20px; -} - - - -// Actions -// -------------------------------------------------------------------------- - -.filter-controls-actions { - margin: 0 0 10px; - padding: 0; - list-style: none; -} - -.filter-controls-actions > li { - display: inline-block; - margin-right: 10px; -} - -.filter-controls-actions-selected { - text-transform: uppercase; -} diff --git a/public/less/components/filter-list.less b/public/less/components/filter-list.less deleted file mode 100644 index 2e9ea259d0f..00000000000 --- a/public/less/components/filter-list.less +++ /dev/null @@ -1,142 +0,0 @@ -// ========================================================================== -// FILTER LIST -// ========================================================================== - - - -// List -// -------------------------------------------------------------------------- - -.filter-list { - margin: 0; - padding: 0; - list-style: none; -} - -.filter-list > li { - padding: 10px; - margin-bottom: 2px; - background: @grafanaPanelBackground; - - &:last-child { - margin: 0; - } -} - - - -// Card -// -------------------------------------------------------------------------- - -.filter-list-card { - display: table; - width: 100%; - margin: 0; - padding: 0; - list-style: none; -} - -.filter-list-card > li { - display: table-cell; - vertical-align: top; -} - -.filter-list-card-select { - width: 23px; - padding-right: 5px; -} - -.filter-list-card-title { - display: block; - font-size: 16px; - font-weight: normal; -} - -.filter-list-card-image { - width: 50px; - padding: 5px 50px 5px 5px; -} - - -.filter-list-card-status { - color: #777; - font-size: 12px; -} - -.filter-list-card-state { - display: inline-block; - padding: 5px 0 0 28px; - background: 0 bottom no-repeat; - background-size: 24px auto; - font-size: 14px; - text-transform: uppercase; - - &.online { - background-image: url('/img/online.svg'); - color: @online; - } - - &.warn { - background-image: url('/img/warn-tiny.svg'); - color: @warn; - } - - &.critical { - background-image: url('/img/critical.svg'); - color: @critical; - } -} - -.filter-list-card-controls { - float: right; -} - -.filter-list-card-links, -.filter-list-card-config, -.filter-list-card-expand { - display: inline-block; - vertical-align: middle; -} - -.filter-list-card-link { - display: block; - color: #777; - text-align: right; - - > a { - color: #777; - } -} - -.filter-list-card-config { - padding: 8px 8px 8px 16px; - color: #777; - font-size: 25px; - - > a { - color: #777; - } -} - -.filter-list-card-expand { - width: 20px; - padding: 8px 0 8px 8px; - color: #aaa; - font-size: 30px; - text-align: center; - cursor: pointer; -} - -.filter-list-card-details { - padding: 20px 0 0 30px; -} - -.filter-list-card-details-heading { - font-weight: normal; - - > a { - float: right; - color: @blue; - font-size: 12px; - } -} diff --git a/public/less/components/filter-table.less b/public/less/components/filter-table.less deleted file mode 100644 index 5db53f1f46b..00000000000 --- a/public/less/components/filter-table.less +++ /dev/null @@ -1,57 +0,0 @@ -// ========================================================================== -// FILTER TABLE -// ========================================================================== - - - -// Table -// -------------------------------------------------------------------------- - -.filter-table * { - box-sizing: border-box; -} - -.filter-table { - width: 100%; - border-collapse: collapse; - // table-layout: fixed; -} - -.filter-table tr { - background: @grafanaListBackground; - border-bottom: 2px solid @pageBackground; -} - -.filter-table th { - width: auto; - padding: 10px 15px 10px 0; - text-align: left; - - &:first-child { - padding-left: 15px; - } -} - -.filter-table td { - padding: 15px 15px 15px 0; - - &:first-child { - padding-left: 15px; - } -} - -.filter-table .ellipsis { - display: block; - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -.filter-table .expanded { - border-color: @grafanaPanelBackground; -} - -.filter-table .expanded > td { - padding-bottom: 0; -} diff --git a/public/less/components/footer.less b/public/less/components/footer.less deleted file mode 100644 index 9c25c837b3f..00000000000 --- a/public/less/components/footer.less +++ /dev/null @@ -1,9 +0,0 @@ -.grafana-version-info { - position: absolute; - bottom: 2px; - left: 3px; - font-size: 80%; - color: darken(@gray, 25%); - a { color: darken(@gray, 25%); } -} - diff --git a/public/less/components/gf-form.less b/public/less/components/gf-form.less deleted file mode 100644 index 50f8a87eaec..00000000000 --- a/public/less/components/gf-form.less +++ /dev/null @@ -1,71 +0,0 @@ -.gf-form { - margin-top: 3px; - margin-right: 3px; - display: inline-block; - - .checkbox-label { - display: inline; - padding: 8px 7px 8px 4px; - } - .cr1 { - margin-left: 8px; - } -} - -.gf-form-group { - margin-bottom: 20px; -} - -.gf-form-flow { - float: left; - margin-right: 20px; -} - -.gf-form-button-row { - margin-top: 20px; - margin-bottom: 10px; -} - -.gf-form-label { - background-color: @labelBackground; - display: inline-block; - padding: 8px 7px; - .small; -} - -[type=text], -[type=email], -[type=number], -[type=password], { - &.gf-form-input { - border: none; - margin: 0px; - border-radius: 0; - padding: 8px 6px; - height: 100%; - box-sizing: border-box; - font-size: 15px; - } -} - -input[type=checkbox].gf-form-checkbox { - margin: 0; -} - -select.gf-form-input { - padding: 2px 3px; - font-size: 15px; - box-sizing: content-box; -} - -.gf-size-xs { width: 60px; } -.gf-size-s { width: 80px; } -.gf-size-ms { width: 100px;} -.gf-size-m { width: 110px; } -.gf-size-l { width: 120px; } -.gf-size-xl { width: 150px; } -.gf-size-xxl { width: 200px; } -.gf-size-xxxl { width: 300px; } -.gf-size-auto { width: auto; } - - diff --git a/public/less/components/gf-form.scss b/public/less/components/gf-form.scss index 78f42e4a68d..9cf4c1a2def 100644 --- a/public/less/components/gf-form.scss +++ b/public/less/components/gf-form.scss @@ -30,7 +30,7 @@ background-color: $labelBackground; display: inline-block; padding: 8px 7px; - @include small; + font-size: $fontSizeSmall; } [type=text], diff --git a/public/less/components/gfbox.less b/public/less/components/gfbox.less deleted file mode 100644 index 2fc7aeef562..00000000000 --- a/public/less/components/gfbox.less +++ /dev/null @@ -1,69 +0,0 @@ -.gf-box { - margin: 10px 5px; - background-color: @grafanaPanelBackground; - position: relative; - border: 1px solid @grafanaTargetFuncBackground; -} - -.gf-box-no-margin { - margin: 0; -} - -.gf-box-header-close-btn { - float: right; - padding: 0; - margin: 0; - background-color: transparent; - border: none; - padding: 8px; - i { - font-size: 120%; - } - color: @textColor; - &:hover { - color: @white; - } -} - -.gf-box-header-save-btn { - padding: 7px 0; - float: right; - color: @grayLight; - font-style: italic; -} - -.gf-box-body { - padding: 20px; - min-height: 150px; -} - -.gf-box-footer { - overflow: hidden; -} - -.gf-box-header { - border-bottom: 1px solid @grafanaTargetFuncBackground; - overflow: hidden; - background-color: @grafanaTargetBackground; - .tabs { - float: left; - } - .nav { - margin: 0; - } -} - -.gf-box-title { - padding-right: 20px; - padding-left: 10px; - float: left; - color: @linkColor; - font-size: 18px; - font-weight: normal; - line-height: 38px; - margin: 0; - .fa { - padding: 0 8px 0 5px; - color: @textColor; - } -} diff --git a/public/less/components/infobox.less b/public/less/components/infobox.less deleted file mode 100644 index be446e9eb8a..00000000000 --- a/public/less/components/infobox.less +++ /dev/null @@ -1,20 +0,0 @@ -.grafana-info-box:before { - content: "\f05a"; - font-family:'FontAwesome'; - position: absolute; - top: -8px; - left: -8px; - font-size: 20px; - color: @blue; -} - -.grafana-info-box { - position: relative; - padding: 5px 15px; - background-color: @grafanaTargetBackground; - border: 1px solid @grafanaTargetBorder; - h5 { - margin-top: 5px; - } -} - diff --git a/public/less/components/modals.less b/public/less/components/modals.less deleted file mode 100644 index 5e4d730494f..00000000000 --- a/public/less/components/modals.less +++ /dev/null @@ -1,149 +0,0 @@ -// -// Modals -// -------------------------------------------------- - -// Background -.modal-backdrop { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @zindexModalBackdrop; - background-color: @black; -} - -.modal-backdrop, -.modal-backdrop.fade.in { - .opacity(70); -} - -// Base modal -.modal { - position: fixed; - z-index: @zindexModal; - width: 100%; - background-color: @grafanaPanelBackground; - .box-shadow(0 3px 7px rgba(0,0,0,0.3)); - .background-clip(padding-box); - outline: none; - - max-width: 800px; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; - top: 20%; -} - -.modal-header { - padding: 9px 15px; - border-bottom: 1px solid @grafanaPanelBackground; -} - -// Body (where all modal content resides) -.modal-body { - position: relative; - overflow-y: auto; -} - -// Remove bottom margin if need be -.modal-form { - margin-bottom: 0; -} - -// Footer (for actions) -.modal-footer { - padding: 14px 15px 15px; - border-top: 1px solid @grafanaPanelBackground; - background-color: @grafanaPanelBackground; - text-align: right; // right align buttons - .clearfix(); // clear it in case folks use .pull-* classes on buttons -} - -.modal-no-header { - border: 1px solid @grafanaTargetFuncBackground; - text-align: center; - - h3 { - margin-top: 30px; - } - - .modal-close { - float: right; - font-size: 140%; - padding: 10px; - } - - .modal-tagline { - font-size: 16px; - } -} - -.confirm-modal { - max-width: 500px; - - .confirm-modal-icon { - padding-top: 41px; - font-size: 280%; - color: @green; - padding-bottom: 20px; - } - - .confirm-modal-title { - font-size: 18px; - color: @linkColor; - margin-bottom: 15px; - } - - .confirm-modal-buttons { - margin-top: 35px; - margin-bottom: 35px; - button { - margin-right: 5px - } - } -} - -.share-modal-body { - text-align: center; - padding: 10px 0; - - .tight-form { - text-align: left; - } - - .share-modal-options { - margin: 11px 20px 33px 20px; - } - - .share-modal-big-icon { - .fa, .icon-gf { - font-size: 70px; - } - } - - .share-snapshot-info-text { - margin: 10px 105px; - strong { - color: @headingsColor; - font-weight: 500; - } - } - - .share-snapshot-header { - margin: 20px 0 22px 0; - } - - .tight-form { - text-align: left; - } - - .share-snapshot-link { - max-width: 716px; - white-space: nowrap; - overflow: hidden; - display: block; - text-overflow: ellipsis; - } -} diff --git a/public/less/components/navbar.less b/public/less/components/navbar.less deleted file mode 100644 index 4a1d0861060..00000000000 --- a/public/less/components/navbar.less +++ /dev/null @@ -1,178 +0,0 @@ - - -.navbar { - overflow: visible; - position: relative; - z-index: 110; -} - -.navbar-inner { - min-height: @navbarHeight; - padding-right: 20px; - background-color: @navbarBackground; - border-bottom: @navbarBorder; - - .clearfix(); -} - -.navbar .nav { - position: relative; - left: 0; - float: left; - margin: 0 10px 0 0; -} - -.nav { - display: block; -} - -.navbar .nav.pull-right { - float: right; // redeclare due to specificity - margin-right: 0; // remove margin on float right nav -} - -.navbar .nav > li { - float: left; -} - -// Links -.navbar .nav > li > a { - float: none; - padding: 17px 13px 13px; - color: @navbarLinkColor; - text-decoration: none; - - .fa { font-size: 115%; } -} - -// Hover/focus -.navbar .nav > li > a:focus, -.navbar .nav > li > a:hover { - background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active - color: @navbarLinkColorHover; - text-decoration: none; -} - -// Active nav items -.navbar .nav > .active > a, -.navbar .nav > .active > a:hover, -.navbar .nav > .active > a:focus { - color: @navbarLinkColorActive; - text-decoration: none; - background-color: @navbarLinkBackgroundActive; -} - - -.fa.top-nav-breadcrumb-icon { - margin: 18px 0 6px 5px; - float: left; - font-size: 120%; - color: @textColor; -} - -.top-nav-btn { - display: block; - position: relative; - float: left; - margin: 0; - font-size: 1.4em; - border-right: 1px solid @grafanaTargetBorder; - - .fa-caret-down { - font-size: 55%; - position: absolute; - right: 8px; - top: 23px; - margin-right: 2px; - } - - a { - color: darken(@linkColor, 5%); - background-color: @navbarButtonBackground; - display: inline-block; - &:hover { - background: @navbarButtonBackgroundHighlight; - color: @linkColor; - // border-bottom: 1px solid @blue; - } - } -} - -.top-nav-menu-btn { - a { - padding: 7px 20px 6px 13px; - } - img { - width: 30px; - position: relative; - } - .top-nav-logo-background { - display: inline-block; - border: 1px solid @bodyBackground; - padding: 4px; - border-radius: 50%; - background: @iconContainerBackground; - width: 30px; - height: 30px; - } - .icon-gf-grafana_wordmark { - font-size: 21px; - position: relative; - top: 4px; - padding-left: 5px; - display: none; - } -} - -.dashnav-dashboards-btn { - a { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - display: block; - padding: 16px 17px 16px 13px; - } - - .fa-th-large { - position: relative; - top: 2px; - } - - .icon-gf { - position: relative; - top: 2px; - font-size: 20px; - line-height: 8px; - } -} - -.dashboard-title { - padding: 0px 6px 5px 5px; - font-size: 17px; -} - -.top-nav-icon { - margin: 5px 0px 0 11px; - line-height: 41px; - float: left; -} - -.top-nav-section { - display: block; - float: left; - padding: 19px 9px 8px 0; - font-weight: bold; - i { - padding-left: 8px; - } -} - -.top-nav-title { - display: block; - float: left; - font-size: 17px; - padding: 18px 10px 10px 13px; - color: @linkColor; -} - - diff --git a/public/less/components/navs.less b/public/less/components/navs.less deleted file mode 100644 index 1c1426d99cf..00000000000 --- a/public/less/components/navs.less +++ /dev/null @@ -1,200 +0,0 @@ -// -// Navs -// -------------------------------------------------- - - -// BASE CLASS -// ---------- - -.nav { - margin-left: 0; - margin-bottom: @baseLineHeight; - list-style: none; -} - -// Make links block level -.nav > li > a { - display: block; -} -.nav > li > a:hover, -.nav > li > a:focus { - text-decoration: none; - background-color: @grayLighter; -} - -// Redeclare pull classes because of specifity -.nav > .pull-right { - float: right; -} - -// Nav headers (for dropdowns and lists) -.nav-header { - display: block; - padding: 3px 15px; - font-size: 11px; - font-weight: bold; - line-height: @baseLineHeight; - color: @grayLight; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; -} -// Space them out when they follow another list item (link) -.nav li + .nav-header { - margin-top: 9px; -} - - - -// NAV LIST -// -------- - -.nav-list { - padding-left: 15px; - padding-right: 15px; - margin-bottom: 0; -} -.nav-list > li > a, -.nav-list .nav-header { - margin-left: -15px; - margin-right: -15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.nav-list > li > a { - padding: 3px 15px; -} -.nav-list > .active > a, -.nav-list > .active > a:hover, -.nav-list > .active > a:focus { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: @linkColor; -} -.nav-list [class^="icon-"], -.nav-list [class*=" icon-"] { - margin-right: 2px; -} - -// TABS AND PILLS -// ------------- - -// Common styles -.nav-tabs, -.nav-pills { - .clearfix(); -} -.nav-tabs > li, -.nav-pills > li { - float: left; -} -.nav-tabs > li > a, -.nav-pills > li > a { - padding-right: 12px; - padding-left: 12px; - margin-right: 2px; - line-height: 14px; // keeps the overall height an even number -} - -// TABS -// ---- - -// Give the tabs something to sit on -.nav-tabs { - border-bottom: 1px solid #ddd; -} -// Make the list-items overlay the bottom border -.nav-tabs > li { - margin-bottom: -1px; -} -// Actual tabs (as links) -.nav-tabs > li > a { - padding-top: 8px; - padding-bottom: 8px; - line-height: @baseLineHeight; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover, - &:focus { - border-color: @grayLighter @grayLighter #ddd; - } -} -// Active state, and it's :hover/:focus to override normal :hover/:focus -.nav-tabs > .active > a, -.nav-tabs > .active > a:hover, -.nav-tabs > .active > a:focus { - color: @gray; - background-color: @bodyBackground; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} - - -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: @linkColor; - border-bottom-color: @linkColor; - margin-top: 6px; -} -.nav .dropdown-toggle:hover .caret, -.nav .dropdown-toggle:focus .caret { - border-top-color: @linkColorHover; - border-bottom-color: @linkColorHover; -} -/* move down carets for tabs */ -.nav-tabs .dropdown-toggle .caret { - margin-top: 8px; -} - -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: @gray; - border-bottom-color: @gray; -} - -// Active:hover/:focus dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover, -.nav > .dropdown.active > a:focus { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover, -.nav > li.dropdown.open.active > a:focus { - color: @white; - background-color: @grayLight; - border-color: @grayLight; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret, -.nav li.dropdown.open a:focus .caret { - border-top-color: @white; - border-bottom-color: @white; - .opacity(100); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover, -.tabs-stacked .open > a:focus { - border-color: @grayLight; -} - -// Show/hide tabbable areas -.tab-content > .tab-pane { - display: none; -} - -.tab-content > .active { - display: block; -} diff --git a/public/less/components/old_stuff.less b/public/less/components/old_stuff.less deleted file mode 100644 index eae5eb558ce..00000000000 --- a/public/less/components/old_stuff.less +++ /dev/null @@ -1,20 +0,0 @@ - -div.editor-row { - vertical-align: top; -} - -div.editor-row div.section { - margin-right: 20px; - vertical-align: top; - display: inline-block; -} - -div.editor-option { - vertical-align: top; - display: inline-block; - margin-right: 10px; -} - -div.editor-option label { - display: block; -} diff --git a/public/less/components/pagination.less b/public/less/components/pagination.less deleted file mode 100644 index 6e292e5ab37..00000000000 --- a/public/less/components/pagination.less +++ /dev/null @@ -1,113 +0,0 @@ -.pagination { -} - -.pagination ul { - display: inline-block; - margin-left: 0; - margin-bottom: 0; - .border-radius(@baseBorderRadius); - .box-shadow(0 1px 2px rgba(0,0,0,.05)); -} -.pagination ul > li { - display: inline; // Remove list-style and block-level defaults -} -.pagination ul > li > a, -.pagination ul > li > span { - float: left; // Collapse white-space - padding: 4px 12px; - line-height: @baseLineHeight; - text-decoration: none; - background-color: @paginationBackground; - border: 1px solid @paginationBorder; - border-left-width: 0; -} -.pagination ul > li > a:hover, -.pagination ul > li > a:focus, -.pagination ul > .active > a, -.pagination ul > .active > span { - background-color: @paginationActiveBackground; -} -.pagination ul > .active > a, -.pagination ul > .active > span { - color: @grayLight; - cursor: default; -} -.pagination ul > .disabled > span, -.pagination ul > .disabled > a, -.pagination ul > .disabled > a:hover, -.pagination ul > .disabled > a:focus { - color: @grayLight; - background-color: transparent; - cursor: default; -} -.pagination ul > li:first-child > a, -.pagination ul > li:first-child > span { - border-left-width: 1px; - .border-left-radius(@baseBorderRadius); -} -.pagination ul > li:last-child > a, -.pagination ul > li:last-child > span { - .border-right-radius(@baseBorderRadius); -} - - -// Alignment -// -------------------------------------------------- - -.pagination-centered { - text-align: center; -} -.pagination-right { - text-align: right; -} - - -// Sizing -// -------------------------------------------------- - -// Large -.pagination-large { - ul > li > a, - ul > li > span { - padding: @paddingLarge; - font-size: @fontSizeLarge; - } - ul > li:first-child > a, - ul > li:first-child > span { - .border-left-radius(@borderRadiusLarge); - } - ul > li:last-child > a, - ul > li:last-child > span { - .border-right-radius(@borderRadiusLarge); - } -} - -// Small and mini -.pagination-mini, -.pagination-small { - ul > li:first-child > a, - ul > li:first-child > span { - .border-left-radius(@borderRadiusSmall); - } - ul > li:last-child > a, - ul > li:last-child > span { - .border-right-radius(@borderRadiusSmall); - } -} - -// Small -.pagination-small { - ul > li > a, - ul > li > span { - padding: @paddingSmall; - font-size: @fontSizeSmall; - } -} -// Mini -.pagination-mini { - ul > li > a, - ul > li > span { - padding: @paddingMini; - font-size: @fontSizeMini; - } -} diff --git a/public/less/components/panel_dashlist.less b/public/less/components/panel_dashlist.less deleted file mode 100644 index 03fddf83de1..00000000000 --- a/public/less/components/panel_dashlist.less +++ /dev/null @@ -1,22 +0,0 @@ -.dashlist-item { - -} - -.dashlist-link { - display: block; - margin: 5px; - padding: 7px; - background-color: @grafanaTargetBackground; - border: 1px solid @grafanaTargetBorder; - .fa { - float: right; - padding-top: 3px; - } - .fa-star { - color: @orange; - } - - &:hover { - background-color: @grafanaTargetFuncBackground; - } -} diff --git a/public/less/components/panel_graph.less b/public/less/components/panel_graph.less deleted file mode 100644 index dfef812811c..00000000000 --- a/public/less/components/panel_graph.less +++ /dev/null @@ -1,298 +0,0 @@ -.graph-canvas-wrapper { - position: relative; - cursor: crosshair; -} - -.histogram-chart { - position: relative; -} - -.datapoints-warning { - pointer: none; - position: absolute; - top: 50%; - left: 50%; - z-index: 10; - margin-top: -50px; - margin-left: -100px; - width: 200px; - text-align: center; - cursor: auto; - padding: 10px; -} - -.graph-legend { - margin: 0 20px; - text-align: center; - - .popover-content { - padding: 0; - } -} - -.graph-legend-icon { - position: relative; - padding-right: 4px; - top: 1px; -} - -.graph-legend-icon, -.graph-legend-alias, -.graph-legend-value { - float: left; - white-space: nowrap; - font-size: 85%; - text-align: left; - &.current:before { - content: "Current: " - } - &.max:before { - content: "Max: " - } - &.min:before { - content: "Min: " - } - &.total:before { - content: "Total: " - } - &.avg:before { - content: "Avg: " - } -} - -.graph-legend-icon .fa { - font-size: 135%; - position: relative; - top: 1px; -} - -.graph-legend-series { - float: left; - white-space: nowrap; - padding-left: 10px; - padding-top: 6px; -} - -.graph-legend-value { - padding-left: 6px; -} - -.graph-legend-table { - width: 100%; - margin: 0; - - .graph-legend-series { - display: table-row; - float: none; - padding-left: 0; - &.pull-right { - float: none; - } - } - - td, .graph-legend-alias, .graph-legend-icon, .graph-legend-value { - float: none; - display: table-cell; - white-space: nowrap; - padding: 2px 10px; - text-align: right; - } - - .graph-legend-icon { - width: 5px; - padding: 0; - top: 0; - .fa { - top: 4px; - } - } - - .graph-legend-value { - padding-left: 15px; - } - - .graph-legend-alias { - padding-left: 7px; - text-align: left; - width: 95%; - } - - .graph-legend-series:nth-child(odd) { - background-color: @grafanaListAccent; - } - - .graph-legend-value { - &.current, &.max, &.min, &.total, &.avg { - &:before { - content: ''; - } - } - } - - th { - text-align: right; - padding: 0px 10px 1px 0; - font-weight: bold; - color: @blue; - font-size: 85%; - white-space: nowrap; - } -} - -.graph-legend-rightside { - - &.graph-wrapper { - display: table; - width: 100%; - } - - .graph-canvas-wrapper { - display: table-cell; - width: 100%; - position: relative; - } - - .graph-legend-wrapper { - display: table-cell; - vertical-align: top; - position: relative; - left: 4px; - } - - .graph-legend { - margin: 0; - } - - .graph-legend-series { - display: block; - padding-left: 0px; - } - - .graph-legend-table .graph-legend-series { - display: table-row; - } -} - -.graph-legend-series-hidden { - a { - color: @linkColorDisabled; - } -} - -.graph-legend-popover { - width: 200px; - min-height: 100px; - label { - display: inline-block; - } - .btn { - padding: 1px 3px; - margin-right: 0px; - line-height: initial; - } - .close { - margin-right: 5px; - color: @linkColor; - opacity: 0.7; - text-shadow: none; - } - .editor-row { - padding: 5px; - } -} - -.annotation-tags { - color: @purple; -} - -.graph-series-override { - input { - float: left; - margin-right: 10px; - } - .graph-series-override-option { - float: left; - padding: 2px 6px; - } - .graph-series-override-selector { - float: left; - } -} - -.graph-tooltip { - white-space: nowrap; - - .graph-tooltip-time { - text-align: center; - font-weight: @fontWeightSemi; - position: relative; - top: -3px; - } - - .tone-down { - opacity: 0.7; - } - - .label-tag { - margin-right: 4px; - margin-top: 8px; - } - - .graph-tooltip-list-item { - display: table-row; - } - - .graph-tooltip-series-name { - display: table-cell; - } - - .graph-tooltip-value { - display: table-cell; - font-weight: bold; - padding-left: 10px; - text-align: right; - } -} - -.left-yaxis-label { - top: 50%; - left: -5px; - transform: rotate(-90deg); - -o-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -moz-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - transform-origin: left top; - -o-transform-origin: left top; - -ms-transform-origin: left top; - -moz-transform-origin: left top; - -webkit-transform-origin: left top; -} - -.right-yaxis-label { - top: 50%; - right: -5px; - - -webkit-transform: rotate(90deg); - -webkit-transform-origin: right top; - -moz-transform: rotate(90deg); - -moz-transform-origin: right top; - -ms-transform: rotate(90deg); - -ms-transform-origin: right top; - -o-transform: rotate(90deg); - -o-transform-origin: right top; - transform: rotate(90deg); - transform-origin: right top; -} - -.axisLabel { - color: @textColor; - font-size: @fontSizeSmall; - position: absolute; - text-align: center; - font-size: 12px; -} - -.graph-legend-fixed-height { - overflow-y: scroll; -} diff --git a/public/less/components/panel_singlestat.less b/public/less/components/panel_singlestat.less deleted file mode 100644 index 368be2b3538..00000000000 --- a/public/less/components/panel_singlestat.less +++ /dev/null @@ -1,51 +0,0 @@ -.singlestat-panel { - position: relative; - display: table; - width: 100%; -} - -.singlestat-panel-value-container { - padding: 20px; - display: table-cell; - vertical-align: middle; - text-align: center; - position: relative; - z-index: 1; - font-size: 3em; - font-weight: bold; -} - -.singlestat-panel-prefix { - padding-right: 20px; -} - -.singlestat-panel-table { - width: 100%; - td { - padding: 5px 10px; - white-space: nowrap; - text-align: right; - border-bottom: 1px solid @grafanaListBorderBottom; - } - - th { - text-align: right; - padding: 5px 10px; - font-weight: bold; - color: @blue - } - - td:first-child { - text-align: left; - } - - tr:nth-child(odd) td { - background-color: @grafanaListAccent; - } - - tr:last-child td { - border: none; - } -} - - diff --git a/public/less/components/panel_table.less b/public/less/components/panel_table.less deleted file mode 100644 index 51b7449c7a8..00000000000 --- a/public/less/components/panel_table.less +++ /dev/null @@ -1,101 +0,0 @@ -.table-panel-wrapper { - .panel-content { - padding: 0; - } - .panel-title-container { - padding-bottom: 4px; - } -} - -.table-panel-scroll { - overflow: auto; -} - -.table-panel-container { - padding-top: 2.2em; - position: relative; -} - -.table-panel-footer { - text-align: center; - font-size: 90%; - line-height: 2px; - - ul { - position: relative; - display: inline-block; - margin-left: 0; - margin-bottom: 0; - } - ul > li { - display: inline; // Remove list-style and block-level defaults - } - ul > li > a { - float: left; // Collapse white-space - padding: 4px 12px; - text-decoration: none; - border-left-width: 0; - - &:hover { - background-color: @grafanaTargetFuncBackground; - } - - &.active { - font-weight: bold; - color: @blue; - } - } -} - -.table-panel-table { - width: 100%; - border-collapse: collapse; - - th { - padding: 0; - - &:first-child { - .table-panel-table-header-inner { - padding-left: 15px; - } - } - } - - td { - padding: 0.45em 0 0.45em 1.1em; - border-bottom: 2px solid @bodyBackground; - border-right: 2px solid @bodyBackground; - - &:first-child { - padding-left: 15px; - } - &:last-child { - border-right: none; - } - } -} - -.table-panel-header-bg { - background: @grafanaListAccent; - border-top: 2px solid @bodyBackground; - border-bottom: 2px solid @bodyBackground; - height: 2.0em; - position: absolute; - top: 0; - right: 0; - left: 0; -} - -.table-panel-table-header-inner { - padding: 0.45em 0 0.45em 1.1em; - text-align: left; - color: @blue; - position: absolute; - top: 0; -} - -.table-panel-width-hack { - visibility: hidden; - height: 0px; - line-height: 0px; -} diff --git a/public/less/components/popovers.less b/public/less/components/popovers.less deleted file mode 100644 index 0d4516b080c..00000000000 --- a/public/less/components/popovers.less +++ /dev/null @@ -1,128 +0,0 @@ -// -// Popovers -// -------------------------------------------------- - - -.popover { - position: absolute; - top: 0; - left: 0; - z-index: @zindexPopover; - display: none; - max-width: 480px; - padding: 1px; - text-align: left; // Reset given new insertion method - background-color: @popoverBackground; - background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.2); - .box-shadow(0 5px 10px rgba(0,0,0,.2)); - - // Overrides for proper insertion - white-space: normal; - - // Offset the popover to account for the popover arrow - &.top { margin-top: -10px; } - &.right { margin-left: 10px; } - &.bottom { margin-top: 10px; } - &.left { margin-left: -10px; } -} - -.popover-title { - margin: 0; // reset heading margin - padding: 8px 14px; - font-size: 14px; - font-weight: normal; - line-height: 18px; - background-color: @popoverTitleBackground; - - &:empty { - display: none; - } -} - -.popover-content { - padding: 9px 14px; -} - -// Arrows -// -// .arrow is outer, .arrow:after is inner - -.popover .arrow, -.popover .arrow:after { - position: absolute; - display: block; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.popover .arrow { - border-width: @popoverArrowOuterWidth; -} -.popover .arrow:after { - border-width: @popoverArrowWidth; - content: ""; -} - -.popover { - &.top .arrow { - left: 50%; - margin-left: -@popoverArrowOuterWidth; - border-bottom-width: 0; - border-top-color: #999; // IE8 fallback - border-top-color: @popoverArrowOuterColor; - bottom: -@popoverArrowOuterWidth; - &:after { - bottom: 1px; - margin-left: -@popoverArrowWidth; - border-bottom-width: 0; - border-top-color: @popoverArrowColor; - } - } - &.right .arrow { - top: 50%; - left: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-left-width: 0; - border-right-color: #999; // IE8 fallback - border-right-color: @popoverArrowOuterColor; - &:after { - left: 1px; - bottom: -@popoverArrowWidth; - border-left-width: 0; - border-right-color: @popoverArrowColor; - } - } - &.bottom .arrow { - left: 50%; - margin-left: -@popoverArrowOuterWidth; - border-top-width: 0; - border-bottom-color: #999; // IE8 fallback - border-bottom-color: @popoverArrowOuterColor; - top: -@popoverArrowOuterWidth; - &:after { - top: 1px; - margin-left: -@popoverArrowWidth; - border-top-width: 0; - border-bottom-color: @popoverArrowColor; - } - } - - &.left .arrow { - top: 50%; - right: -@popoverArrowOuterWidth; - margin-top: -@popoverArrowOuterWidth; - border-right-width: 0; - border-left-color: #999; // IE8 fallback - border-left-color: @popoverArrowOuterColor; - &:after { - right: 1px; - border-right-width: 0; - border-left-color: @popoverArrowColor; - bottom: -@popoverArrowWidth; - } - } - -} diff --git a/public/less/components/query_editor.less b/public/less/components/query_editor.less deleted file mode 100644 index de7df012c46..00000000000 --- a/public/less/components/query_editor.less +++ /dev/null @@ -1,16 +0,0 @@ -.query-keyword { - font-weight: bold; - color: @blue; -} - -.query-segment-key { - border-right: none; - padding-right: 1px; -} - -.query-segment-operator { - padding-right: 1px; - border-right: none; - color: @orange; -} - diff --git a/public/less/components/scrollbar.less b/public/less/components/scrollbar.less deleted file mode 100644 index 8c9d13303c8..00000000000 --- a/public/less/components/scrollbar.less +++ /dev/null @@ -1,41 +0,0 @@ -// -// Srollbars -// - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar:hover { - height: 8px; -} - -::-webkit-scrollbar-button:start:decrement, -::-webkit-scrollbar-button:end:increment { display: none; } -::-webkit-scrollbar-button:horizontal:decrement { display: none; } -::-webkit-scrollbar-button:horizontal:increment { display: none; } -::-webkit-scrollbar-button:vertical:decrement { display: none; } -::-webkit-scrollbar-button:vertical:increment { display: none; } -::-webkit-scrollbar-button:horizontal:decrement:active { background-image: none; } -::-webkit-scrollbar-button:horizontal:increment:active { background-image: none; } -::-webkit-scrollbar-button:vertical:decrement:active { background-image: none; } -::-webkit-scrollbar-button:vertical:increment:active {background-image: none; } -::-webkit-scrollbar-track-piece { background-color: transparent; } - -::-webkit-scrollbar-thumb:vertical { - height: 50px; - background: -webkit-gradient(linear, left top, right top, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); - border: 1px solid @scrollbarBorder; - border-top: 1px solid @scrollbarBorder; - border-left: 1px solid @scrollbarBorder; -} - -::-webkit-scrollbar-thumb:horizontal { - width: 50px; - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @scrollbarBackground), color-stop(100%, @scrollbarBackground2)); - border: 1px solid @scrollbarBorder; - border-top: 1px solid @scrollbarBorder; - border-left: 1px solid @scrollbarBorder; -} - diff --git a/public/less/components/search.less b/public/less/components/search.less deleted file mode 100644 index 0cf4c8a20f3..00000000000 --- a/public/less/components/search.less +++ /dev/null @@ -1,107 +0,0 @@ -.search-container { - left: 72px; - top: 39px; - margin: 16px 0 0 2px; - z-index: 1000; - position: absolute; - width: 700px; - box-shadow: @searchShadow; - padding: 10px; - background-color: @grafanaPanelBackground; - border: @grafanaPanelBorder; - - .label-tag { - margin-left: 6px; - font-size: 11px; - padding: 2px 6px; - } -} - -// Search -.search-field-wrapper { - padding-bottom: 10px; - input { - width: 100%; - padding: 8px 8px; - height: 100%; - box-sizing: border-box; - } - button { - margin: 0 4px 0 0; - } - > span { - display: block; - overflow: hidden; - } -} - -.search-results-container { - height: 450px; - overflow: auto; - display: block; - line-height: 28px; - - .search-item:hover, .search-item.selected { - background-color: @grafanaListHighlight; - } - - .selected { - .search-result-tag { - opacity: 0.70; - color: white; - } - } - - .fa-star, .fa-star-o { - padding-left: 13px; - } - - .fa-star { - color: @orange; - } - - .search-result-link { - color: @grafanaListMainLinkColor; - .fa { - padding-right: 10px; - } - } - - .search-item { - display: block; - padding: 3px 10px; - white-space: nowrap; - background-color: @grafanaListBackground; - margin-bottom: 4px; - .search-result-icon:before { - content: "\f009"; - } - - &.search-item-dash-home .search-result-icon:before { - content: "\f015"; - } - } - - .search-result-tags { - float: right; - } - - .search-result-actions { - float: right; - padding-left: 20px; - } -} - -.search-switches { - position: absolute; - top: 19px; - right: 21px; -} - -.search-button-row { - padding-top: 20px; - button, a { - margin-right: 10px; - } -} - diff --git a/public/less/components/shortcuts.less b/public/less/components/shortcuts.less deleted file mode 100644 index ed639b6292c..00000000000 --- a/public/less/components/shortcuts.less +++ /dev/null @@ -1,6 +0,0 @@ -.shortcut-table { - td { padding: 3px; } - th:last-child { text-align: left; } - td:first-child { text-align: right; } -} - diff --git a/public/less/components/sidemenu.less b/public/less/components/sidemenu.less deleted file mode 100644 index 946799b76d8..00000000000 --- a/public/less/components/sidemenu.less +++ /dev/null @@ -1,220 +0,0 @@ -@sideMenuWidth: 220px; - -.sidemenu-canvas { - position: relative; -} - -.sidemenu-wrapper { - position: absolute; - top: 52px; - left: 0; - width: @sideMenuWidth; - background-color: @bodyBackground; - z-index: 101; - transform: translate3d(0, -100%, 0); - visibility: hidden; - - a:focus { - text-decoration: none; - } -} - -.sidemenu-open { - .sidemenu-wrapper { - visibility: visible; - transform: translate3d(0, 0, 0); - transition: all 0.2s; - } -} - -.sidemenu-pinned { - .sidemenu-wrapper { - min-height: 100%; - } - .dashboard-container { - padding-left: @sideMenuWidth; - } - .page-container { - margin-left: 195px; - padding-left: 77px; - } - .top-nav-menu-btn { - a { - background-color: @pageBackground; - padding-right: 67px; - padding-left: 22px; - } - .icon-gf-grafana_wordmark { - display: inline-block; - } - .fa { - display: none; - } - } - .sidemenu-org { - box-shadow: none; - } - .search-container { - left: auto; - } -} - -.sidemenu { - font-weight: @baseFontWeight; - list-style: none; - margin: 0; - padding: 0; - - li { - position: relative; - - &:hover { - .dropdown-menu { - display: block; - top: 0px; - left: @sideMenuWidth; - background-color: @bodyBackground; - } - } - } -} - -.sidemenu-main-link { - font-size: 16px; -} - -.sidemenu-item-text { - width: 110px; - display: inline-block; - vertical-align: middle; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.icon-circle { - width: 40px; - height: 40px; - display: inline-block; - i { - color: @linkColor; - opacity: .7; - position: relative; - left: 7px; - top: 5px; - font-size: 150%; - } - img { - left: 7px; - position: relative; - } -} - -.sidemenu-item { - color: @linkColor; - line-height: 47px; - padding: 0px 10px 0px 10px; - display: block; - - &:hover { - background-color: @sideMenuBackgroundHighlight; - } - - .sidemenu-item-text { - padding-left: 11px; - } - - img { - border-radius: 50%; - width: 28px; - height: 28px; - box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05); - } -} - -.sidemenu-section-tagline { - font-style: italic; - line-height: 10px; -} - -.sidemenu-section-text-wrapper { - padding-top: 4px; -} - -.sidemenu-org-section .dropdown-menu-title { - margin: 0 10px 0 6px; - padding: 7px 0 7px; - overflow: hidden; - color: @dropdownTitle; -} - -.sidemenu-org-section .dropdown-menu-title > span { - display: inline-block; - position: relative; - - &:after { - display: block; - position: absolute; - top: 50%; - right: 0; - left: 100%; - width: 200px; - height: 1px; - margin-left: 5px; - background: @dropdownDivider; - content: ''; - } -} - -.sidemenu-org { - padding: 17px 10px 15px 14px; - box-sizing: border-box; - cursor: pointer; - &:hover { - background-color: @sideMenuBackgroundHighlight; - } - display: table; - position: relative; - width: 100%; -} - -.sidemenu .fa-caret-right { - position: absolute; - top: 38%; - right: 25px; - font-size: 14px; - color: @linkColor; -} - -.sidemenu-org-avatar, -.sidemenu-org-details { - display: table-cell; - vertical-align: top; -} - -.sidemenu-org-avatar { - width: 44px; -} - -.sidemenu-org-avatar > img { - width: 40px; - height: 40px; - border-radius: 50%; - position: absolute; -} - -.sidemenu-org-details { - padding-left: 10px; - color: @linkColor; -} - -.sidemenu-org-name { - display: block; - font-size: 13px; - color: @linkColorDisabled; -} - -.sidemenu-org-user { - display: block; -} - diff --git a/public/less/components/submenu.less b/public/less/components/submenu.less deleted file mode 100644 index 1b5eb887adc..00000000000 --- a/public/less/components/submenu.less +++ /dev/null @@ -1,133 +0,0 @@ -.submenu-controls { - margin: 10px 5px; - font-size: 16px; -} - -.annotation-disabled, .annotation-disabled a { - color: @linkColorDisabled; -} - -.annotation-segment { - label.cr1 { - margin-left: 5px; - } - padding: 8px 7px; -} - -.submenu-item { - margin-right: 20px; - display: inline-block; - border-radius: 3px; - background-color: @grafanaPanelBackground; - border: @grafanaPanelBorder; - margin-right: 10px; - display: inline-block; - - .fa-caret-down { - font-size: 75%; - position: relative; - top: 1px; - } -} - -.variable-value-link { - font-size: 16px; - padding-right: 10px; - .label-tag { - margin: 0 5px; - } -} - -.variable-link-wrapper { - display: inline-block; - position: relative; -} - -.variable-value-dropdown { - position: absolute; - top: 47px; - min-width: 150px; - max-height: 400px; - min-height: 150px; - overflow-y: auto; - overflow-x: hidden; - background-color: @dropdownBackground; - box-shadow: 0 0 25px 0 rgba(0,0,0,0.4); - z-index: 1000; - font-size: @baseFontSize; - border-radius: 3px 3px 0 0; - border: 1px solid @grafanaTargetFuncBackground; - - &.multi { - .selected { - .variable-option-icon{ - background: url(@checkboxImageUrl) 0px -18px no-repeat; - } - } - } - - &.single { - .variable-option-icon { - display: none; - } - .selected { - background-color: @grafanaTargetFuncHightlight; - } - } -} - -.variable-options-wrapper { - display: table; - width: 100%; -} - -.variable-options-column { - max-height: 350px; - display: table-cell; - line-height: 26px; - &:nth-child(2) { - border-left: 1px solid @grafanaTargetFuncBackground; - } -} - -.variable-option-tag, -.variable-option, -.variable-options-column-header { - display: block; - padding: 2px 27px 0 8px; - position: relative; - white-space: nowrap; - min-width: 115px; -} - -.variable-options-column-header { - padding-top: 5px; - padding-bottom: 5px; - margin-bottom: 5px; - &.many-selected { - .variable-option-icon { - background: url(@checkboxImageUrl) 0px -36px no-repeat; - } - } -} - -.variable-option-icon { - display: inline-block; - width: 24px; - height: 18px; - position: relative; - top: 4px; - background: url(@checkboxImageUrl) left top no-repeat; -} - -.variable-option { - &:hover, &.highlighted { - background-color: @blueDark; - } -} - -.dash-nav-link { - padding: 8px 7px; - display: inline-block; - color: @textColor; -} diff --git a/public/less/components/tables_lists.less b/public/less/components/tables_lists.less deleted file mode 100644 index f0c7275ffe1..00000000000 --- a/public/less/components/tables_lists.less +++ /dev/null @@ -1,43 +0,0 @@ -.grafana-options-table { - width: 100%; - - th { - text-align: left; - padding: 5px 10px; - border-bottom: 4px solid @grafanaPanelBackground; - } - - tr td { - background-color: @grafanaListBackground; - padding: 5px 10px; - white-space: nowrap; - border-bottom: 4px solid @grafanaPanelBackground; - &.nobg { - background-color: transparent; - } - } - - .max-width-btns { - padding-right: 0px; - .btn { - box-sizing: border-box; - width: 100%; - } - } -} - -.max-width { - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - white-space: nowrap; -} - -.grafana-list-item { - display: block; - padding: 1px 10px; - line-height: 34px; - background-color: @grafanaTargetBackground; - margin-bottom: 4px; - cursor: pointer; -} diff --git a/public/less/components/tabs.less b/public/less/components/tabs.less deleted file mode 100644 index 8301eef15bb..00000000000 --- a/public/less/components/tabs.less +++ /dev/null @@ -1,40 +0,0 @@ - -.nav-tabs-alt { - border-bottom: @grafanaTriggerBorder; - padding-left: 10px; - margin: 0 0 10px 0; - - & > li > a { - color: darken(@linkColor, 20%); - } - - li > a:hover { - border-bottom: none; - } - - li.active > a, - li.active > a:focus, - li.active > a:hover { - .border-radius(3px); - border: @grafanaTriggerBorder; - background-color: transparent; - border-bottom: 1px solid @grafanaPanelBackground; - color: @linkColor; - } - - li.disabled > a { - color: @textColor; - } - - .open .dropdown-toggle { - background-color: #060606; - border-color: transparent; - } - - .tab-content { - padding: 10px; - background-color: @grafanaPanelBackground; - } -} - - diff --git a/public/less/components/tags.less b/public/less/components/tags.less deleted file mode 100644 index 7b2af7ef30c..00000000000 --- a/public/less/components/tags.less +++ /dev/null @@ -1,39 +0,0 @@ -// Base classes -.label, -.badge { - display: inline-block; - padding: 2px 4px; - font-size: @baseFontSize * .846; - font-weight: bold; - line-height: 14px; // ensure proper line-height if floated - color: @white; - vertical-align: baseline; - white-space: nowrap; - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: @grayLight; -} - - -// Labels & Badges -.label-tag { - background-color: @purple; - color: darken(@white, 5%); - white-space: nowrap; - border-radius: 3px; - text-shadow: none; - font-size: 13px; - padding: 2px 6px; - border-width: 1px; - border-style: solid; - .icon-tag { - position: relative; - top: 1px; - padding-right: 4px; - } -} - -.label-tag:hover { - opacity: 0.85; - background-color: darken(@purple, 10%); -} - diff --git a/public/less/components/tagsinput.less b/public/less/components/tagsinput.less deleted file mode 100644 index 44fa35ffbe8..00000000000 --- a/public/less/components/tagsinput.less +++ /dev/null @@ -1,39 +0,0 @@ -.bootstrap-tagsinput { - display: inline-block; - padding: 0 0 0 6px; - vertical-align: middle; - max-width: 100%; - line-height: 22px; - background-color: @inputBackground; - - input { - border: none; - border-right: 1px solid @grafanaTargetSegmentBorder; - margin: 0px; - border-radius: 0; - padding: 8px 6px; - height: 100%; - width: 5rem; - box-sizing: border-box; - } - - .tag { - margin-right: 2px; - color: white; - - [data-role="remove"] { - margin-left:8px; - cursor:pointer; - &:after{ - content: "x"; - padding:0px 2px; - } - &:hover { - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - &:active { - box-shadow: inset 0 3px 5px rgba(0,0,0,0.125); - } - } - } - } -} diff --git a/public/less/components/tightform.less b/public/less/components/tightform.less deleted file mode 100644 index a58fa80b652..00000000000 --- a/public/less/components/tightform.less +++ /dev/null @@ -1,236 +0,0 @@ -.tight-form { - border-top: 1px solid @grafanaTargetBorder; - border-left: 1px solid @grafanaTargetBorder; - border-right: 1px solid @grafanaTargetBorder; - background: @grafanaTargetBackground; - - &.last { - border-bottom: 1px solid @grafanaTargetBorder; - } - - &.borderless { - background: transparent; - border: none; - } - - .checkbox-label { - display: inline; - padding-right: 4px; - margin-bottom: 0; - } -} - -.tight-form-container-no-item-borders { - border: 1px solid @grafanaTargetBorder; - border-bottom: none; - - .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input { - border: none; - } -} - - -.spaced-form { - .tight-form { - margin: 7px 0; - } -} - -.borderless { - .tight-form-item, - .tight-form-input { - border: none; - } -} - -.tight-form-container { - border-bottom: 1px solid @grafanaTargetBorder; -} - -.tight-form-btn { - padding: 7px 12px; -} - -.tight-form-list { - list-style: none; - margin: 0; - >li { - float: left; - } -} - -.tight-form-flex-wrapper { - display: flex; - flex-direction: row; - float: none !important; -} - -.grafana-metric-options { - margin-top: 25px; -} - -.tight-form-item { - padding: 8px 7px; - display: inline-block; - font-weight: normal; - border-right: 1px solid @grafanaTargetSegmentBorder; - color: @grafanaTargetColor; - display: inline-block; - - .has-open-function & { - padding-top: 25px; - } - - .tight-form-disabled & { - color: @grafanaTargetColorHide; - } - - &:hover, &:focus { - text-decoration: none; - } - - &a:hover { - background: @grafanaTargetFuncBackground; - } - - &.last { - border-right: none; - } -} - - -.tight-form-item-icon { - i { - width: 15px; - text-align: center; - display: inline-block; - } -} - -.tight-form-func { - background: @grafanaTargetFuncBackground; - > a { - color: @grafanaTargetColor; - } - > a:hover { - color: @linkColor; - } - - &.show-function-controls { - padding-top: 5px; - min-width: 100px; - text-align: center; - } -} - -input[type=text].tight-form-func-param { - background: transparent; - border: none; - margin: 0; - padding: 0; -} - -input[type=text].tight-form-clear-input { - padding: 8px 7px; - border: none; - margin: 0px; - background: transparent; - color: @grafanaTargetColor; - border-radius: 0; - border-right: 1px solid @grafanaTargetSegmentBorder; -} - -[type=text], -[type=email], -[type=number], -[type=password] { - &.tight-form-input { - border: none; - border-right: 1px solid @grafanaTargetSegmentBorder; - margin: 0px; - border-radius: 0; - padding: 8px 6px; - height: 100%; - box-sizing: border-box; - &.last { - border-right: none; - } - } -} - -input[type=checkbox].tight-form-checkbox { - margin: 0; -} - -.tight-form-textarea { - height: 200px; - margin: 0; - box-sizing: border-box; -} - -select.tight-form-input { - border: none; - border-right: 1px solid @grafanaTargetSegmentBorder; - margin: 0px; - border-radius: 0; - height: 36px; - padding: 9px 3px; - &.last { - border-right: none; - } -} - -.tight-form-func-controls { - display: none; - text-align: center; - - .fa-arrow-left { - float: left; - position: relative; - top: 2px; - } - .fa-arrow-right { - float: right; - position: relative; - top: 2px; - } - .fa-remove { - margin-left: 10px; - } -} - -.tight-form-radio { - input[type=radio] { - margin: 0; - } - label { - display: inline; - } -} - -.tight-form-section { - margin-bottom: 20px; - margin-right: 40px; - vertical-align: top; - display: inline-block; - .tight-form { - margin-left: 20px; - } -} - -.tight-form-align { - padding-left: 66px; -} - -.tight-form-item-large { width: 115px; } -.tight-form-item-xlarge { width: 150px; } -.tight-form-item-xxlarge { width: 200px; } - -.tight-form-input.tight-form-item-xxlarge { - width: 215px; -} - -.tight-form-inner-box { - margin: 20px 0 20px 148px; - display: inline-block; -} diff --git a/public/less/components/timepicker.less b/public/less/components/timepicker.less deleted file mode 100644 index 3eabb32bb1e..00000000000 --- a/public/less/components/timepicker.less +++ /dev/null @@ -1,107 +0,0 @@ -.nav.gf-timepicker-nav { - margin-right: 0; -} - -.timepicker-timestring { - font-weight: normal; -} - -.gf-timepicker-nav-btn { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.gf-timepicker-dropdown { - margin: -5px -10px 10px 5px; - padding: 10px 20px; - float: right; - background-color: @grafanaPanelBackground; - .box-shadow(@navbarDropdownShadow); -} - -.gf-timepicker-absolute-section { - width: 300px; - float: left; - border-right: @grafanaTriggerBorder; - padding: 0 0 0 20px; - select { - width: 183px; - margin-bottom: 0; - } -} - -.gf-timepicker-btn-apply { - margin: 0 0 0 15px; -} - -.gf-timepicker-utc { - background-color: @grafanaTargetFuncBackground; - color: @orange; - font-size: 75%; - padding: 3px; - border-radius: 2px; - font-weight: bold; - margin-left: 4px; -} - -.gf-timepicker-relative-section { - padding: 0 20px 0 30px; - min-height: 258px; - float: left; - ul { - list-style: none; - float: left; - margin: 0 30px 10px 0px; - li { - line-height: 22px; - } - li.active { - border-bottom: 1px solid @blue; - margin: 3px 0; - font-weight: bold; - } - } -} - -.gf-timepicker-component { - margin-bottom: 10px; - button.btn-sm { - .buttonBackground(@btnInverseBackground, @btnInverseBackgroundHighlight); - background-image: none; - border: none; - padding: 6px 9px; - color: @textColor; - &.active span { - color: @blue; - font-weight: bold; - } - .text-info { - color: @orange; - font-weight: bold; - } - } -} - -.faMixin { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.glyphicon-chevron-right:before { - .faMixin; - content: "\f054"; -} - -.glyphicon-chevron-left:before { - .faMixin; - content: "\f053"; -} - -.input-datetime-format { - color: @linkColorDisabled -} diff --git a/public/less/components/timepicker.scss b/public/less/components/timepicker.scss index 8a232ddc779..d703e78e329 100644 --- a/public/less/components/timepicker.scss +++ b/public/less/components/timepicker.scss @@ -83,25 +83,6 @@ } } -.faMixin { - display: inline-block; - font: normal normal normal 14px/1 FontAwesome; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.glyphicon-chevron-right:before { - @include faMixin; - content: "\f054"; -} - -.glyphicon-chevron-left:before { - @include faMixin; - content: "\f053"; -} - .input-datetime-format { color: $linkColorDisabled } diff --git a/public/less/components/tooltip.less b/public/less/components/tooltip.less deleted file mode 100644 index 03be011f72a..00000000000 --- a/public/less/components/tooltip.less +++ /dev/null @@ -1,102 +0,0 @@ -// -// Tooltips -// -------------------------------------------------- - - -// Base class -.tooltip { - position: absolute; - z-index: @zindexTooltip; - display: block; - visibility: visible; - font-size: 11px; - line-height: 1.4; - .opacity(0); - &.in { .opacity(100); } - &.top { margin-top: -3px; padding: 5px 0; } - &.right { margin-left: 3px; padding: 0 5px; } - &.bottom { margin-top: 3px; padding: 5px 0; } - &.left { margin-left: -3px; padding: 0 5px; } -} - -// Wrapper for the tooltip content -.tooltip-inner { - max-width: 400px; - padding: 8px; - color: @tooltipColor; - text-align: center; - text-decoration: none; - background-color: @tooltipBackground; - .border-radius(@baseBorderRadius); -} - -// Arrows -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} -.tooltip { - &.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth @tooltipArrowWidth 0; - border-top-color: @tooltipArrowColor; - } - &.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth @tooltipArrowWidth @tooltipArrowWidth 0; - border-right-color: @tooltipArrowColor; - } - &.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -@tooltipArrowWidth; - border-width: @tooltipArrowWidth 0 @tooltipArrowWidth @tooltipArrowWidth; - border-left-color: @tooltipArrowColor; - } - &.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -@tooltipArrowWidth; - border-width: 0 @tooltipArrowWidth @tooltipArrowWidth; - border-bottom-color: @tooltipArrowColor; - } -} - -.grafana-tooltip { - position : absolute; - top: -1000; - left: 0; - color: @tooltipColor; - padding: 10px; - font-size: 11pt; - font-weight : 200; - background-color: @tooltipBackground; - border-radius: 5px; - z-index: 9999; - max-width: 800px; - max-height: 600px; - overflow: hidden; - line-height: 14px; - a { - color: @tooltipLinkColor; - } -} - -.grafana-tooltip hr { - padding: 2px; - color: #c8c8c8; - margin: 0px; - border-bottom: 0px solid #c8c8c8; -} - -.grafana-tip { - padding-left: 5px; -} - diff --git a/public/less/components/tooltip.scss b/public/less/components/tooltip.scss index 3d0e2a7b16a..72dc441c875 100644 --- a/public/less/components/tooltip.scss +++ b/public/less/components/tooltip.scss @@ -12,7 +12,7 @@ font-size: 11px; line-height: 1.4; @include opacity(0); - &.in { .opacity(100); } + &.in { @include opacity(100); } &.top { margin-top: -3px; padding: 5px 0; } &.right { margin-left: 3px; padding: 0 5px; } &.bottom { margin-top: 3px; padding: 5px 0; } diff --git a/public/less/components/typeahead.less b/public/less/components/typeahead.less deleted file mode 100644 index 6d63ed05a99..00000000000 --- a/public/less/components/typeahead.less +++ /dev/null @@ -1,11 +0,0 @@ - -// typeahead max height -.typeahead { - max-height: 300px; - overflow-y: auto; -} - -.typeahead strong { - color: @yellow; -} - diff --git a/public/less/grafana-responsive.less b/public/less/grafana-responsive.less deleted file mode 100644 index 0431bb3dcae..00000000000 --- a/public/less/grafana-responsive.less +++ /dev/null @@ -1,127 +0,0 @@ -@import "variables.dark.less"; -@import "bootstrap/responsive.less"; - -@gridColumnWidth: 70px; -@gridGutterWidth: 10px; - -@gridColumnWidth768: 52px; -@gridGutterWidth768: 10px; - -@gridColumnWidth1200: 90px; -@gridGutterWidth1200: 10px; - -// Fluid grid -// ------------------------- -@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); -@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); - -// 1200px min -@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); -@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); - -// 768px-979px -@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); -@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); - -@screen-xs: 320px; -@screen-sm: 768px; -@screen-md: 992px; -@screen-lg: 1200px; - -@screen-xs-max: (@screen-sm - 1); -@screen-sm-max: (@screen-md - 1); -@screen-md-max: (@screen-lg - 1); - -@breakpoint-xs-up: ~"only screen and (min-width: @{screen-xs})"; -@breakpoint-xs: ~"only screen and (min-width: @{screen-xs}) and (max-width: @{screen-xs-max})"; -@breakpoint-sm-up: ~"only screen and (min-width: @{screen-sm})"; -@breakpoint-sm: ~"only screen and (min-width: @{screen-sm}) and (max-width: @{screen-sm-max})"; -@breakpoint-md-up: ~"only screen and (min-width: @{screen-md})"; -@breakpoint-md: ~"only screen and (min-width: @{screen-md}) and (max-width: @{screen-md-max})"; -@breakpoint-lg: ~"only screen and (min-width: @{screen-lg})"; - -.dashnav-back-to-dashboard { - display: none; -} - -// Media queries -// --------------------- -@media @breakpoint-xs { - div.panel { - width: 100% !important; - padding: 0px !important; - } - .panel-margin { - margin-right: 0; - margin-left: 0; - } - body { - padding: 0; - } - .dashnav-dashboards-btn a { - max-width: 200px; - } - .gf-timepicker-nav-btn { - max-width: 120px; - } - .dashnav-zoom-out, - .dashnav-action-icons { - display: none; - } - .page-container { - padding: 10px 20px; - } -} - -// form styles -@media @breakpoint-sm-up { - .gf-size-m { width: 120px; } - .gf-size-l { width: 150px; } - .gf-size-xl { width: 200px; } - .gf-size-xxl { width: 300px; } - .gf-size-xxxl { width: 400px; } -} - -@media @breakpoint-sm-up { - .dashnav-dashboards-btn a { - max-width: 200px; - } - .gf-timepicker-nav-btn { - max-width: 120px; - } - .panel-in-fullscreen { - .dashnav-action-icons { - display: none; - } - .dashnav-back-to-dashboard { - display: block; - } - } -} - -@media @breakpoint-md-up { - .dashnav-dashboards-btn a { - max-width: 290px; - } - .gf-timepicker-nav-btn { - max-width: 250px; - } - .dashnav-zoom-out { - display: block; - } -} - -@media @breakpoint-lg { - .panel-in-fullscreen { - .dashnav-action-icons { - display: block; - } - } - - .dashnav-dashboards-btn a { - max-width: none; - } - .gf-timepicker-nav-btn { - max-width: none; - } -} diff --git a/public/less/grafana.dark.less b/public/less/grafana.dark.less deleted file mode 100644 index e922d47f91c..00000000000 --- a/public/less/grafana.dark.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "variables.dark.less"; -@import "grafana.less"; diff --git a/public/less/grafana.less b/public/less/grafana.less deleted file mode 100644 index 6a3facc4206..00000000000 --- a/public/less/grafana.less +++ /dev/null @@ -1,69 +0,0 @@ - -// BASE -@import "./base/normalize.less"; -@import "./base/base.less"; -@import "./base/type.less"; -@import "./base/forms.less"; -@import "./base/fonts.less"; -@import "./base/code.less"; - -// UTILS -@import "./utils/utils.less"; -@import "./utils/validation.less"; -@import "./utils/angular.less"; - -// MIXINS -@import "./mixins/mixins.less"; -@import "./mixins/buttons.less"; - -// LAYOUTS -// @import "./bootstrap/grid.less"; -@import "./layout/page.less"; - -// COMPONENTS -@import "./components/panel_graph.less"; -@import "./components/submenu.less"; -@import "./components/panel_dashlist.less"; -@import "./components/panel_singlestat.less"; -@import "./components/panel_table.less"; -@import "./components/tagsinput.less"; -@import "./components/tables_lists.less"; -@import "./components/search.less"; -@import "./components/dashboard.less"; -@import "./components/tightform.less"; -@import "./components/gf-form.less"; -@import "./components/sidemenu.less"; -@import "./components/navbar.less"; -@import "./components/gfbox.less"; -@import "./components/pagination.less"; -@import "./components/tabs.less"; -@import "./components/timepicker.less"; -@import "./components/filter-controls.less"; -@import "./components/filter-list.less"; -@import "./components/filter-table.less"; -@import "./components/scrollbar.less"; -@import "./components/old_stuff.less"; -@import "./components/navbar.less"; -@import "./components/popovers.less"; -@import "./components/alerts.less"; -@import "./components/typeahead.less"; -@import "./components/tags.less"; -@import "./components/modals.less"; -@import "./components/dropdown.less"; -@import "./components/color_picker.less"; -@import "./components/tooltip.less"; -@import "./components/buttons.less"; -@import "./components/footer.less"; -@import "./components/infobox.less"; -@import "./components/shortcuts.less"; -@import "./components/query_editor.less"; -@import "./components/navs.less"; - -// PAGES -@import "./pages/login.less"; -@import "./pages/playlist.less"; -@import "./pages/admin.less"; -@import "./pages/alerting.less"; -@import "./pages/apps.less"; -@import "./pages/signup.less"; - diff --git a/public/less/grafana.light.less b/public/less/grafana.light.less deleted file mode 100644 index 57824198630..00000000000 --- a/public/less/grafana.light.less +++ /dev/null @@ -1,2 +0,0 @@ -@import "variables.light.less"; -@import "grafana.less"; diff --git a/public/less/grafana.scss b/public/less/grafana.scss index 3d8de05687f..f994c9a194d 100644 --- a/public/less/grafana.scss +++ b/public/less/grafana.scss @@ -1,4 +1,8 @@ +// MIXINS +@import "./mixins/mixins.scss"; +@import "./mixins/buttons.scss"; + // BASE @import "./base/normalize.scss"; @import "./base/base.scss"; @@ -12,10 +16,6 @@ @import "./utils/validation.scss"; @import "./utils/angular.scss"; -// MIXINS -@import "./mixins/mixins.scss"; -@import "./mixins/buttons.scss"; - // LAYOUTS // @import "./bootstrap/grid.scss"; @import "./layout/page.scss"; diff --git a/public/less/layout/page.less b/public/less/layout/page.less deleted file mode 100644 index 11b37da2f96..00000000000 --- a/public/less/layout/page.less +++ /dev/null @@ -1,71 +0,0 @@ -.grafana-app { - display: block; - height: 100%; -} - -.dashboard-container { - padding: 5px 5px; - width: 100%; - box-sizing: border-box; -} - -.main-view { - // background-image: url(/img/grafana_pattern.png); - // background-position: 100% -550px; - // background-repeat: no-repeat; - height: 100%; -} - -.page-dashboard { - .main-view { - background-image: none; - } -} - -.page-container { - background-color: @pageBackground; - position: relative; - padding: 25px 56px 10px 56px; - max-width: 1060px; - margin-left: 0; - height: 100%; -} - - -.page-header { - padding: 10px 0 39px 0px; - - display: flex; - justify-content: space-between; - align-items: center; - display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ - display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ - display: -ms-flexbox; /* TWEENER - IE 10 */ - display: -webkit-flex; /* NEW - Chrome */ - flex-wrap: wrap-reverse; - background: transparent url(../img/page_header_line.png) no-repeat left 60px; - h1 { - font-style: italic; - } -} - -.admin-page { - max-width: 800px; - margin-left: 10px; - .gf-box { - margin-top: 0; - } - .gf-box-body { - min-height: 0; - } - h2 { - margin-left: 15px; - margin-bottom: 0px; - font-size: @fontSizeLarge; - color: @textColor; - i { - padding-right: 6px; - } - } -} - diff --git a/public/less/mixins/buttons.less b/public/less/mixins/buttons.less deleted file mode 100644 index de055f918e8..00000000000 --- a/public/less/mixins/buttons.less +++ /dev/null @@ -1,18 +0,0 @@ - -// Button backgrounds -// ------------------ -.buttonBackground(@startColor, @endColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - .gradientBar(@startColor, @endColor, @textColor, @textShadow); - - box-shadow: inset 0 -4px rgba(0,0,0,0.3); - - // in these cases the gradient won't cover the background, so we override - &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { - color: @textColor; - background-image: none; - background-color: darken(@endColor, 2%); - } -} - - diff --git a/public/less/mixins/mixins.less b/public/less/mixins/mixins.less deleted file mode 100644 index b7215a034fa..00000000000 --- a/public/less/mixins/mixins.less +++ /dev/null @@ -1,484 +0,0 @@ -// -// Mixins -// -------------------------------------------------- - - -// UTILITY MIXINS -// -------------------------------------------------- - -// Clearfix -// -------- -// For clearing floats like a boss h5bp.com/q -.clearfix { - *zoom: 1; - &:before, - &:after { - display: table; - content: ""; - // Fixes Opera/contenteditable bug: - // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952 - line-height: 0; - } - &:after { - clear: both; - } -} - -.tab-focus() { -} - -// Center-align a block level element -// ---------------------------------- -.center-block() { - display: block; - margin-left: auto; - margin-right: auto; -} - -// Sizing shortcuts -// ------------------------- -.size(@height, @width) { - width: @width; - height: @height; -} - -.square(@size) { - .size(@size, @size); -} - -// Placeholder text -// ------------------------- -.placeholder(@color: @placeholderText) { - &:-moz-placeholder { - color: @color; - } - &:-ms-input-placeholder { - color: @color; - } - &::-webkit-input-placeholder { - color: @color; - } -} - -// Text overflow -// ------------------------- -// Requires inline-block or block for proper styling -.text-overflow() { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -// CSS image replacement -// ------------------------- -// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757 -.hide-text { - font: 0/0 a; - color: transparent; - text-shadow: none; - background-color: transparent; - border: 0; -} - - -// FONTS -// -------------------------------------------------- - -.font-family-serif() { - font-family: @serifFontFamily; -} -.font-family-sans-serif() { - font-family: @sansFontFamily; -} -.font-family-monospace() { - font-family: @monoFontFamily; -} -.font-shorthand(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - font-size: @size; - font-weight: @weight; - line-height: @lineHeight; -} -.font-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - .font-family-serif(); - .font-shorthand(@size, @weight, @lineHeight); -} -.font-sans-serif(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - .font-family-sans-serif(); - .font-shorthand(@size, @weight, @lineHeight); -} -.monospace(@size: @baseFontSize, @weight: normal, @lineHeight: @baseLineHeight) { - .font-family-monospace; - .font-shorthand(@size, @weight, @lineHeight); -} - - -// FORMS -// -------------------------------------------------- - -// Block level inputs -.input-block-level { - display: block; - width: 100%; - min-height: @inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) - .box-sizing(border-box); // Makes inputs behave like true block-level elements -} - - -// CSS3 PROPERTIES -// -------------------------------------------------- - -// Border Radius -.border-radius(@radius) { - -webkit-border-radius: @radius; - -moz-border-radius: @radius; - border-radius: @radius; -} - -// Single Corner Border Radius -.border-top-left-radius(@radius) { - -webkit-border-top-left-radius: @radius; - -moz-border-radius-topleft: @radius; - border-top-left-radius: @radius; -} -.border-top-right-radius(@radius) { - -webkit-border-top-right-radius: @radius; - -moz-border-radius-topright: @radius; - border-top-right-radius: @radius; -} -.border-bottom-right-radius(@radius) { - -webkit-border-bottom-right-radius: @radius; - -moz-border-radius-bottomright: @radius; - border-bottom-right-radius: @radius; -} -.border-bottom-left-radius(@radius) { - -webkit-border-bottom-left-radius: @radius; - -moz-border-radius-bottomleft: @radius; - border-bottom-left-radius: @radius; -} - -// Single Side Border Radius -.border-top-radius(@radius) { - .border-top-right-radius(@radius); - .border-top-left-radius(@radius); -} -.border-right-radius(@radius) { - .border-top-right-radius(@radius); - .border-bottom-right-radius(@radius); -} -.border-bottom-radius(@radius) { - .border-bottom-right-radius(@radius); - .border-bottom-left-radius(@radius); -} -.border-left-radius(@radius) { - .border-top-left-radius(@radius); - .border-bottom-left-radius(@radius); -} - -// Drop shadows -.box-shadow(@shadow) { - box-shadow: @shadow; -} - -// Transitions -.transition(@transition) { - transition: @transition; -} - -.transition-delay(@transition-delay) { - transition-delay: @transition-delay; -} - -.transition-duration(@transition-duration) { - transition-duration: @transition-duration; -} - -// Transformations -.rotate(@degrees) { - transform: rotate(@degrees); -} - -.scale(@ratio) { - transform: scale(@ratio); -} - -.translate(@x, @y) { - transform: translate(@x, @y); -} - -.skew(@x, @y) { - transform: skew(@x, @y); - -webkit-backface-visibility: hidden; // See https://github.com/twbs/bootstrap/issues/5319 -} - -.translate3d(@x, @y, @z) { - transform: translate3d(@x, @y, @z); -} - -.backface-visibility(@visibility){ - backface-visibility: @visibility; -} -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" -.background-clip(@clip) { - background-clip: @clip; -} - -// Background sizing -.background-size(@size) { - background-size: @size; -} - -// Box sizing -.box-sizing(@boxmodel) { - box-sizing: @boxmodel; -} - -// User select -// For selecting text on the page -.user-select(@select) { - user-select: @select; -} - -// Resize anything -.resizable(@direction) { - resize: @direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - -// CSS3 Content Columns -.content-columns(@columnCount, @columnGap: @gridGutterWidth) { - -webkit-column-count: @columnCount; - -moz-column-count: @columnCount; - column-count: @columnCount; - -webkit-column-gap: @columnGap; - -moz-column-gap: @columnGap; - column-gap: @columnGap; -} - -// Optional hyphenation -.hyphens(@mode: auto) { - word-wrap: break-word; - -webkit-hyphens: @mode; - -moz-hyphens: @mode; - -ms-hyphens: @mode; - -o-hyphens: @mode; - hyphens: @mode; -} - -// Opacity -.opacity(@opacity) { - opacity: @opacity / 100; -} - -// BACKGROUNDS -// -------------------------------------------------- - -// Add an alphatransparency value to any background or border color (via Elyse Holladay) -#translucent { - .background(@color: @white, @alpha: 1) { - background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - } - .border(@color: @white, @alpha: 1) { - border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); - .background-clip(padding-box); - } -} - -// Gradient Bar Colors for buttons and alerts -.gradientBar(@primaryColor, @secondaryColor, @textColor: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - color: @textColor; - text-shadow: @textShadow; - #gradient > .vertical(@primaryColor, @secondaryColor); - border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); - border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); -} - -// Gradients -#gradient { - .horizontal(@startColor: #555, @endColor: #333) { - background-color: @endColor; - background-image: linear-gradient(to right, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - } - .vertical(@startColor: #555, @endColor: #333) { - background-color: mix(@startColor, @endColor, 60%); - background-image: linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10 - background-repeat: repeat-x; - } - .directional(@startColor: #555, @endColor: #333, @deg: 45deg) { - background-color: @endColor; - background-repeat: repeat-x; - background-image: linear-gradient(@deg, @startColor, @endColor); // Standard, IE10 - } - .horizontal-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: linear-gradient(to right, @startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - } - .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { - background-color: mix(@midColor, @endColor, 80%); - background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); - background-repeat: no-repeat; - } - - .radial(@innerColor: #555, @outerColor: #333) { - background-color: @outerColor; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(@innerColor), to(@outerColor)); - background-image: -webkit-radial-gradient(circle, @innerColor, @outerColor); - background-image: -moz-radial-gradient(circle, @innerColor, @outerColor); - background-image: -o-radial-gradient(circle, @innerColor, @outerColor); - background-repeat: no-repeat; - } - - .striped(@color: #555, @angle: 45deg) { - background-color: @color; - background-image: linear-gradient(@angle, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); - } -} - -// Grid System -// ----------- - -// Centered container element -.container-fixed() { - margin-right: auto; - margin-left: auto; - .clearfix(); -} - -.makeColumn(@columns: 1, @offset: 0) { - float: left; - margin-left: (@gridColumnWidth * @offset) + (@gridGutterWidth * (@offset - 1)) + (@gridGutterWidth * 2); - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); -} - -// The Grid -#grid { - - .core (@gridColumnWidth, @gridGutterWidth) { - - .spanX (@index) when (@index > 0) { - .span@{index} { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - .offset@{index} { .offset(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns + 1)); - } - - .span (@columns) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - - .row { - margin-left: @gridGutterWidth * -1; - .clearfix(); - } - - [class*="span"] { - float: left; - min-height: 1px; // prevent collapsing columns - margin-left: @gridGutterWidth; - } - - // Set the container width, and override it for fixed navbars in media queries - .container, - .navbar-static-top .container, - .navbar-fixed-top .container, - .navbar-fixed-bottom .container { .span(@gridColumns); } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - - } - - .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { - - .spanX (@index) when (@index > 0) { - .span@{index} { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .offsetX (@index) when (@index > 0) { - .offset@{index} { .offset(@index); } - .offset@{index}:first-child { .offsetFirstChild(@index); } - .offsetX(@index - 1); - } - .offsetX (0) {} - - .offset (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth*2); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + (@fluidGridGutterWidth*2) - (.5 / @gridRowWidth * 100 * 1%); - } - - .offsetFirstChild (@columns) { - margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) + (@fluidGridGutterWidth); - *margin-left: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%) + @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - - .span (@columns) { - width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); - *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%); - } - - .row-fluid { - width: 100%; - .clearfix(); - [class*="span"] { - .input-block-level(); - float: left; - margin-left: @fluidGridGutterWidth; - *margin-left: @fluidGridGutterWidth - (.5 / @gridRowWidth * 100 * 1%); - } - [class*="span"]:first-child { - margin-left: 0; - } - - // Space grid-sized controls properly if multiple per line - .controls-row [class*="span"] + [class*="span"] { - margin-left: @fluidGridGutterWidth; - } - - // generate .spanX and .offsetX - .spanX (@gridColumns); - .offsetX (@gridColumns); - } - - } - - .input(@gridColumnWidth, @gridGutterWidth) { - - .spanX (@index) when (@index > 0) { - input.span@{index}, textarea.span@{index}, .uneditable-input.span@{index} { .span(@index); } - .spanX(@index - 1); - } - .spanX (0) {} - - .span(@columns) { - width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 14; - } - - input, - textarea, - .uneditable-input { - margin-left: 0; // override margin-left from core grid system - } - - // Space grid-sized controls properly if multiple per line - .controls-row [class*="span"] + [class*="span"] { - margin-left: @gridGutterWidth; - } - - // generate .spanX - .spanX (@gridColumns); - - } -} diff --git a/public/less/mixins/mixins.scss b/public/less/mixins/mixins.scss index ecbdc0288e9..980e3ad9284 100644 --- a/public/less/mixins/mixins.scss +++ b/public/less/mixins/mixins.scss @@ -7,6 +7,11 @@ } } +// Box sizing +@mixin box-sizing($boxmodel) { + box-sizing: $boxmodel; +} + @mixin tab-focus() { // Default outline: thin dotted; @@ -221,11 +226,6 @@ background-size: $size; } -// Box sizing -@mixin box-sizing($boxmodel) { - box-sizing: $boxmodel; -} - // User select // For selecting text on the page @mixin user-select($select) { diff --git a/public/less/pages/admin.less b/public/less/pages/admin.less deleted file mode 100644 index 5345e4242fc..00000000000 --- a/public/less/pages/admin.less +++ /dev/null @@ -1,10 +0,0 @@ - -.admin-settings-section { - color: @variable; - font-weight: bold; -} - -td.admin-settings-key { - padding-left: 20px; -} - diff --git a/public/less/pages/alerting.less b/public/less/pages/alerting.less deleted file mode 100644 index 9054584e23e..00000000000 --- a/public/less/pages/alerting.less +++ /dev/null @@ -1,42 +0,0 @@ -.copy-query { - display: block; - width: 30px; - height: 36px; - margin: 0; - padding: 0; - border: 0; - background: transparent url(/img/CopyQuery.png) 50% 50% no-repeat; - cursor: pointer; -} - -.alert-state { - display: inline-block; - padding-left: 30px; - background: 0 50% no-repeat; - background-size: 20px auto; -} - -.alert-state-online { - background-image: url('/img/online.svg'); -} - -.alert-state-warning { - background-image: url('/img/warn-tiny.svg'); -} - -.alert-state-critical { - background-image: url('/img/critical.svg'); -} - -.alert-notify-emails { - width: 400px; - border-right: 1px solid @black; -} - -.alert-notify-emails .bootstrap-tagsinput { - width: 394px; // offset for 8px left padding and border width -} - -.alert-notify-emails .bootstrap-tagsinput input { - border: 0; -} diff --git a/public/less/pages/apps.less b/public/less/pages/apps.less deleted file mode 100644 index de8ad65b83c..00000000000 --- a/public/less/pages/apps.less +++ /dev/null @@ -1,26 +0,0 @@ - -.app-edit-logo-box { - padding: 1.2rem; - background: @grafanaPanelBackground; - text-align: center; - img { - max-width: 7rem; - } - margin-right: 2rem; -} - -.app-edit-links { - list-style: none; - margin: 0 0 0 2rem; - - li { - background: @grafanaPanelBackground; - margin-top: 4px; - padding: 0.2rem 1rem; - } -} - -.app-edit-description { - font-style: italic; - margin-bottom: 1.5rem; -} diff --git a/public/less/pages/login.less b/public/less/pages/login.less deleted file mode 100644 index 4c38d6221c4..00000000000 --- a/public/less/pages/login.less +++ /dev/null @@ -1,169 +0,0 @@ - -.login-form { - width: 50%; - float: left; - margin-left: 25%; - margin-right: 25%; - padding-top: 25px; -} - -.login-box { - width: 700px; - margin: 70px auto 0 auto; -} - -.login-box-logo { - text-align: center; - img { - width: 125px; - } - .icon-gf-grafana_wordmark { - color: @linkColor; - position: relative; - top: -90px; - font-size: 3rem; - text-shadow: 3px 3px 5px black; - } -} - -.login-inner-box { - background: @grafanaPanelBackground; -} - -.login-tab-header { - background: @grafanaTargetBackground; - text-align: center; -} - -.btn-login-tab { - background: transparent; - border: none; - font-size: 15px; - padding: 10px 10px; - - &.active { - background: darken(@grafanaTargetBackground, 5%); - color: @white; - } - - font-weight: bold; - display: inline-block; - width: 170px; - color: @textColor; -} - -.password-strength { - display: block; - width: 15%; - overflow: visible; - white-space: nowrap; - padding-top: 3px; - color: darken(@textColor, 20%); - border-top: 3px solid @red; - &.password-strength-ok { - width: 40%; - border-top: 3px solid lighten(@yellow, 10%); - } - &.password-strength-good { - width: 100%; - border-top: 3px solid lighten(@green, 10%); - } -} - -.login-submit-button-row { - text-align: center; - margin-top: 30px; - button { - padding: 14px 23px; - font-size: 16px; - font-weight: bold; - min-width: 150px; - display: inline-block; - border: 1px solid lighten(@btnInverseBackground, 10%); - } -} - -.login-oauth { - margin-bottom: 15px; - - .btn { - margin: 5px; - } - - .btn-google { - background: #dd4b39; - color: white; - } - - .btn-github { - background: #555; - color: white; - } -} - -.password-recovery { - background: @grafanaTargetBackground; - margin-top: 10px; - padding: 10px; - a { - color: @grayLight; - } -} - -.login-divider { - float: left; - width: 50%; - margin: 5px 25% 25px 25%; - - .login-divider-line { - width: 100%; - height: 10px; - border-bottom: 1px solid @gray; - - .login-divider-text { - background-color: @grayDarker; - color: @grayLight; - padding: 0 10px; - } - } -} - -.signup-page-background { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - background-image: url(../img/background_tease.jpg); - opacity: 0.3; - z-index: -1; -} - -.invite-box { - text-align: center; - border: 1px solid @grafanaTargetFuncBackground; - background-color: @grafanaPanelBackground; - width: 800px; - margin-left: auto; - margin-right: auto; - - .tight-form { - text-align: left; - } - - h3 { - margin-top: 30px; - } - - .modal-close { - float: right; - font-size: 140%; - padding: 10px; - } - - .modal-tagline { - font-size: 16px; - } -} diff --git a/public/less/pages/playlist.less b/public/less/pages/playlist.less deleted file mode 100644 index 16e3ebaaafa..00000000000 --- a/public/less/pages/playlist.less +++ /dev/null @@ -1,93 +0,0 @@ -.playlist-search-container { - // margin: 15px; - z-index: 1000; - position: relative; - width: 700px; - box-shadow: 0px 0px 55px 0px black; - background-color: @grafanaPanelBackground; - - .label-tag { - margin-left: 6px; - font-size: 11px; - padding: 2px 6px; - } -} - -.playlist-search-switches { - position: absolute; - top: 8px; - right: 11px; -} - -.playlist-search-field-wrapper { - input { - width: 100%; - padding: 8px 8px; - height: 100%; - box-sizing: border-box; - } - button { - margin: 0 4px 0 0; - } - > span { - display: block; - overflow: hidden; - } -} - -.playlist-search-results-container { - min-height: 100px; - overflow: auto; - display: block; - line-height: 28px; - - .search-item:hover, .search-item.selected { - background-color: @grafanaListHighlight; - } - - .selected { - .search-result-tag { - opacity: 0.70; - color: white; - } - } - - .fa-star, .fa-star-o { - padding-left: 13px; - } - - .fa-star { - color: @orange; - } - - .search-result-link { - color: @grafanaListMainLinkColor; - .fa { - padding-right: 10px; - } - } - - .search-item { - display: block; - padding: 3px 10px; - white-space: nowrap; - background-color: @grafanaListBackground; - margin-bottom: 4px; - .search-result-icon:before { - content: "\f009"; - } - - &.search-item-dash-home .search-result-icon:before { - content: "\f015"; - } - } - - .search-result-tags { - float: right; - } - - .search-result-actions { - float: right; - padding-left: 20px; - } -} diff --git a/public/less/pages/signup.less b/public/less/pages/signup.less deleted file mode 100644 index 7b2b0b0e84a..00000000000 --- a/public/less/pages/signup.less +++ /dev/null @@ -1,17 +0,0 @@ -.signup-page-container { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - height: 100%; - width: 100%; - background-image: url(/img/background_tease.jpg); - - .signup-logo-container { - width: 150px; - margin: 0 auto; - padding: 80px 0; - } -} - diff --git a/public/less/utils/angular.less b/public/less/utils/angular.less deleted file mode 100644 index 1519b249920..00000000000 --- a/public/less/utils/angular.less +++ /dev/null @@ -1,7 +0,0 @@ - - -[ng\:cloak], [ng-cloak], .ng-cloak { - display: none !important; -} - - diff --git a/public/less/utils/utils.less b/public/less/utils/utils.less deleted file mode 100644 index d493bbdebdf..00000000000 --- a/public/less/utils/utils.less +++ /dev/null @@ -1,64 +0,0 @@ -.highlight-word { - color: @orange; -} - -// Close icons -// -------------------------------------------------- -.close { - float: right; - font-size: 20px; - font-weight: bold; - line-height: @baseLineHeight; - color: @black; - text-shadow: 0 1px 0 rgba(255,255,255,1); - .opacity(20); - &:hover, - &:focus { - color: @black; - text-decoration: none; - cursor: pointer; - .opacity(40); - } -} - -// Additional properties for button version -// iOS requires the button element instead of an anchor tag. -// If you want the anchor version, it requires `href="#"`. -button.close { - padding: 0; - cursor: pointer; - background: transparent; - border: 0; - -webkit-appearance: none; -} - -// -// Utility classes -// -------------------------------------------------- - - -// Quick floats -.pull-right { - float: right; -} -.pull-left { - float: left; -} - -// Toggling content -.hide { - display: none; -} -.show { - display: block; -} - -// Visibility -.invisible { - visibility: hidden; -} - -// For Affix plugin -.affix { - position: fixed; -} diff --git a/public/less/utils/validation.less b/public/less/utils/validation.less deleted file mode 100644 index cdc9e45ac4c..00000000000 --- a/public/less/utils/validation.less +++ /dev/null @@ -1,7 +0,0 @@ -input[type=text].ng-dirty.ng-invalid { - box-shadow: inset 0 0px 7px @red; -} - -form input.ng-invalid { - color: @errorText; -} diff --git a/public/less/variables.dark.less b/public/less/variables.dark.less deleted file mode 100644 index 9303f017496..00000000000 --- a/public/less/variables.dark.less +++ /dev/null @@ -1,342 +0,0 @@ -// Global values -// -------------------------------------------------- - - -// Grays -// ------------------------- -@black: #000; -@gray: #bbb; -@grayDark: #262626; -@grayDarker: #1f1f1f; - -@grayLight: #ADAFAE; -@grayLighter: #BBBFC2; -@white: #fff; - -// Accent colors -// ------------------------- -@blue: #33B5E5; -@blueDark: #005f81; -@green: #669900; -@red: #CC3900; -@yellow: #ECBB13; -@orange: #FF8800; -@pink: #FF4444; -@purple: #9933CC; -@variable: #32D1DF; - -// Status colors -// ------------------------- -@online: #10a345; -@warn: #ffc03c; -@critical: #ed2e18; - -// grafana Variables -// ------------------------- -@grafanaPanelBackground: @grayDarker; -@grafanaPanelBorder: solid 1px @grayDark; -@grafanaTriggerBorder: solid 1px #555; - -// Graphite Target Editor -@grafanaTargetBorder: @black; -@grafanaTargetBackground: @grayDark; -@grafanaTargetColor: #c8c8c8; -@grafanaTargetColorHide: darken(#c8c8c8, 25%); -@grafanaTargetSegmentBorder: #050505; - -@grafanaTargetFuncBackground: #333; -@grafanaTargetFuncHightlight: #444; - -@grafanaSelectBackground: @grafanaTargetFuncBackground; - -@modalBackground: @black; -@codeTagBackground: #444; - -// Scaffolding -// ------------------------- -@bodyBackground: rgb(20,20,20); -@pageBackground: @grayDarker; -@textColor: @grayLighter; - -// Links -// ------------------------- -@linkColor: darken(@white,11%); -@linkColorDisabled: darken(@linkColor,30%); -@linkColorHover: @white; - - -// Typography -// ------------------------- -@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -@serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; - -@baseFontSize: 14px; -@baseFontWeight: 400; -@baseFontFamily: @sansFontFamily; -@baseLineHeight: 20px; -@altFontFamily: @serifFontFamily; -@fontWeightSemi: 600; - -@headingsFontFamily: inherit; // empty to use BS default, @baseFontFamily -@headingsFontWeight: 400; // instead of browser default, bold -@headingsFontStyle: normal; -@headingsColor: darken(@white,11%); // empty to use BS default, @textColor -@inputText: @grayLight; - - -// Component sizing -// ------------------------- -// Based on 14px font-size and 20px line-height - -@fontSizeLarge: @baseFontSize * 1.25; // ~18px -@fontSizeSmall: @baseFontSize * 0.85; // ~12px -@fontSizeMini: @baseFontSize * 0.75; // ~11px - -@paddingLarge: 11px 19px; // 44px -@paddingSmall: 2px 10px; // 26px -@paddingMini: 0px 6px; // 22px - -@baseBorderRadius: 3px; -@borderRadiusLarge: 4px; -@borderRadiusSmall: 2px; - -// Lists -@grafanaListBackground: @grayDark; -@grafanaListAccent: lighten(@grayDarker, 2%); -@grafanaListBorderTop: @grayDark; -@grafanaListBorderBottom: @black; -@grafanaListHighlight: #333; -@grafanaListMainLinkColor: @textColor; - -// Scrollbars -@scrollbarBackground: #3a3a3a; -@scrollbarBackground2: #3a3a3a; -@scrollbarBorder: black; - -// Tables -// ------------------------- -@tableBackground: transparent; // overall background-color -@tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping -@tableBackgroundHover: @grayDark; // for hover -@tableBorder: @grayDark; // table and cell border - -// Buttons -// ------------------------- -@btnBackground: @grayDark; -@btnBackgroundHighlight: darken(@grayLight, 15%); -@btnBackgroundShadow: darken(@grayLight, 15%); -@btnBorder: #bbb; - -@btnPrimaryBackground: @blueDark; -@btnPrimaryBackgroundHighlight: lighten(@blueDark, 5%); - -@btnInfoBackground: lighten(@purple, 3%); -@btnInfoBackgroundHighlight: darken(@purple, 3%); - -@btnSuccessBackground: lighten(@green, 3%); -@btnSuccessBackgroundHighlight: darken(@green, 3%); - -@btnWarningBackground: lighten(@orange, 3%); -@btnWarningBackgroundHighlight: darken(@orange, 3%); - -@btnDangerBackground: lighten(@red, 3%); -@btnDangerBackgroundHighlight: darken(@red, 3%); - -@btnInverseBackground: @grayDark; -@btnInverseBackgroundHighlight: lighten(@grayDark, 1%); -@btnInverseText: @textColor; -@btnInverseBorder: #333; - -@btnText: @gray; - -@iconContainerBackground: @black; -@iconContainerBackgroundHighlight: lighten(@black, 5%); -@iconContainerBorder: 1px solid transparent; -@iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); - - -// Forms -// ------------------------- -@inputBackground: lighten(@grayDark,5%); -@inputBorder: lighten(@grayDark,5%); -@inputBorderRadius: @baseBorderRadius; -@inputDisabledBackground: #555; -@formActionsBackground: transparent; -@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border -@labelBackground: @grayDark; - - -// Sidemenu -// ------------------------- -@sideMenuTopShadow: @navbarDropdownShadow; -@sideMenuBackground: @grayDark; -@sideMenuBackgroundHighlight: lighten(@grayDark, 4%); -@sideMenuShadow: 0 0 35px 0 @bodyBackground; - -// Search -@searchShadow: 0 0 35px 0 @bodyBackground; - -// Dropdowns -// ------------------------- -@dropdownBackground: @heroUnitBackground; -@dropdownBorder: rgba(0,0,0,.2); -@dropdownDividerTop: transparent; -@dropdownDividerBottom: #444; -@dropdownDivider: @dropdownDividerBottom; -@dropdownTitle: @linkColorDisabled; - -@dropdownLinkColor: @textColor; -@dropdownLinkColorHover: @white; -@dropdownLinkColorActive: @white; - -@dropdownLinkBackgroundActive: @blueDark; -@dropdownLinkBackgroundHover: @blueDark; - - - -// COMPONENT VARIABLES -// -------------------------------------------------- - - -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -@zindexDropdown: 1000; -@zindexPopover: 1010; -@zindexTooltip: 1020; -@zindexFixedNavbar: 1030; -@zindexModalBackdrop: 1040; -@zindexModal: 1050; - -// Sprite icons path -// ------------------------- -@iconSpritePath: "../img/glyphicons-halflings.png"; -@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; - - -// Input placeholder text color -// ------------------------- -@placeholderText: darken(@textColor, 25%); - - -// Hr border color -// ------------------------- -@hrBorder: @grayDark; - - -// Horizontal forms & lists -// ------------------------- -@horizontalComponentOffset: 180px; - - -// Wells -// ------------------------- -@wellBackground: #131517; - - -// Navbar -// ------------------------- -@navbarCollapseWidth: 979px; -@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; - -@navbarHeight: 52px; -@navbarBackgroundHighlight: @grayDark; -@navbarBackground: @grayDark; -@navbarBorder: 1px solid @bodyBackground; - -@navbarText: @grayLight; -@navbarLinkColor: @grayLight; -@navbarLinkColorHover: @white; -@navbarLinkColorActive: @navbarLinkColorHover; -@navbarLinkBackgroundHover: transparent; -@navbarLinkBackgroundActive: @navbarBackground; -@navbarBrandColor: @linkColor; -@navbarDropdownShadow: inset 0px 4px 10px -4px @bodyBackground; - -@navbarButtonBackground: lighten(@navbarBackground, 3%); -@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%); - -// Pagination -// ------------------------- -@paginationBackground: @bodyBackground; -@paginationBorder: transparent; -@paginationActiveBackground: @blue; - - -// Hero unit -// ------------------------- -@heroUnitBackground: @grayDark; -@heroUnitHeadingColor: inherit; -@heroUnitLeadColor: inherit; - - -// Form states and alerts -// ------------------------- -@warningText: darken(#c09853, 10%); -@warningBackground: @orange; - -@errorText: #b94a48; -@errorBackground: @btnDangerBackground; - -@successText: #468847; -@successBackground: @btnSuccessBackground; - -@infoText: @blueDark; -@infoBackground: @btnInfoBackground; - -// Tooltips and popovers -// ------------------------- -@tooltipColor: @white; -@tooltipBackground: rgb(58, 57, 57); -@tooltipArrowWidth: 5px; -@tooltipArrowColor: @tooltipBackground; -@tooltipLinkColor: @linkColor; - -@popoverBackground: @heroUnitBackground; -@popoverArrowWidth: 10px; -@popoverArrowColor: @popoverBackground; -@popoverTitleBackground: @popoverBackground; - -// Special enhancement for popovers -@popoverArrowOuterWidth: @popoverArrowWidth + 1; -@popoverArrowOuterColor: rgba(0,0,0,.25); - -// images -@checkboxImageUrl: '../img/checkbox.png'; - -// GRID -// -------------------------------------------------- - - -// Default 940px grid -// ------------------------- -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - -// 1200px min -@gridColumnWidth1200: 70px; -@gridGutterWidth1200: 30px; -@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); - -// 768px-979px -@gridColumnWidth768: 42px; -@gridGutterWidth768: 20px; -@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); - - -// Fluid grid -// ------------------------- -@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); -@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); - -// 1200px min -@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); -@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); - -// 768px-979px -@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); -@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); diff --git a/public/less/variables.dark.scss b/public/less/variables.dark.scss index 7237b386e7f..4268b6147f0 100644 --- a/public/less/variables.dark.scss +++ b/public/less/variables.dark.scss @@ -155,6 +155,11 @@ $iconContainerBackgroundHighlight: lighten($black, 5%); $iconContainerBorder: 1px solid transparent; $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); +// Hero unit +// ------------------------- +$heroUnitBackground: $grayDark; +$heroUnitHeadingColor: inherit; +$heroUnitLeadColor: inherit; // Forms // ------------------------- @@ -167,13 +172,6 @@ $inputHeight: $baseLineHeight + 10px; // base line-height + 8p $labelBackground: $grayDark; -// Sidemenu -// ------------------------- -$sideMenuTopShadow: $navbarDropdownShadow; -$sideMenuBackground: $grayDark; -$sideMenuBackgroundHighlight: lighten($grayDark, 4%); -$sideMenuShadow: 0 0 35px 0 $bodyBackground; - // Search $searchShadow: 0 0 35px 0 $bodyBackground; @@ -194,7 +192,6 @@ $dropdownLinkBackgroundActive: $blueDark; $dropdownLinkBackgroundHover: $blueDark; - // COMPONENT VARIABLES // -------------------------------------------------- @@ -210,13 +207,6 @@ $zindexFixedNavbar: 1030; $zindexModalBackdrop: 1040; $zindexModal: 1050; -// Sprite icons path -// ------------------------- -$iconSpritePath: "../img/glyphicons-halflings.png"; -$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; - - -// Input placeholder text color // ------------------------- $placeholderText: darken($textColor, 25%); @@ -235,12 +225,6 @@ $horizontalComponentOffset: 180px; // ------------------------- $wellBackground: #131517; - -// Navbar -// ------------------------- -$navbarCollapseWidth: 979px; -$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; - $navbarHeight: 52px; $navbarBackgroundHighlight: $grayDark; $navbarBackground: $grayDark; @@ -258,20 +242,19 @@ $navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); +// Sidemenu +// ------------------------- +$sideMenuTopShadow: $navbarDropdownShadow; +$sideMenuBackground: $grayDark; +$sideMenuBackgroundHighlight: lighten($grayDark, 4%); +$sideMenuShadow: 0 0 35px 0 $bodyBackground; + // Pagination // ------------------------- $paginationBackground: $bodyBackground; $paginationBorder: transparent; $paginationActiveBackground: $blue; - -// Hero unit -// ------------------------- -$heroUnitBackground: $grayDark; -$heroUnitHeadingColor: inherit; -$heroUnitLeadColor: inherit; - - // Form states and alerts // ------------------------- $warningText: darken(#c09853, 10%); diff --git a/public/less/variables.light.less b/public/less/variables.light.less deleted file mode 100644 index 29236f734a9..00000000000 --- a/public/less/variables.light.less +++ /dev/null @@ -1,359 +0,0 @@ -// Cosmo 2.3.2 -// Variables -// -------------------------------------------------- - - -// Global values -// -------------------------------------------------- - - -// Grays -// ------------------------- -@black: #000; -@grayDarker: lighten(#000, 11.5%); // #222 -@grayDark: lighten(#000, 20%); // #333 -@gray: lighten(#000, 33.5%); // #555 -@grayLight: lighten(#000, 60%); // #999 -@grayLighter: lighten(#000, 97.5%); // #eee -@white: #fff; - - -// Accent colors -// ------------------------- -@blueOrig: #007FFF; -@blue: #2AB2E4; -@blueDark: #75CAEB; -@green: #28B62C; -@red: #FF4136; -@yellow: #FF851B; -@orange: #FF7518; -@pink: #E671B8; -@purple: #9954BB; -@variable: #2AB2E4; - -// Status colors -// ------------------------- -@online: #01A64F; -@warn: #F79520; -@critical: #EC2128; - -// grafana Variables -// ------------------------- -@grafanaPanelBackground: @grayLighter; -@grafanaPanelBorder: solid 1px #ddd; -@grafanaTriggerBorder: solid 1px @grayLight; - -// Submenu -@submenuBackground: rgb(218, 217, 217); -@submenuBorder: @white; - -// Tabs -@fullEditBorder: @grayLighter; - -// Graphite Target Editor -@grafanaTargetBorder: #ddd; -@grafanaTargetBackground: #efefef; -@grafanaTargetColor: @textColor; -@grafanaTargetColorHide: lighten(@textColor, 25%); -@grafanaTargetSegmentBorder: #ddd; - -@grafanaTargetFuncBackground: darken(@grafanaTargetBackground, 5%); -@grafanaTargetFuncHightlight: darken(@grafanaTargetBackground, 10%); - -@grafanaSelectBackground: @grafanaTargetFuncBackground; - -@modalBackground: @bodyBackground; -@codeTagBackground: #ddd; - -// Scaffolding -// ------------------------- -@bodyBackground: #EFEFEF; -@pageBackground: @white; -@textColor: @gray; - -// Links -// ------------------------- -@linkColor: @gray; -@linkColorDisabled: lighten(@linkColor,30%); -@linkColorHover: darken(@linkColor, 20%); - -// Typography -// ------------------------- -@sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -@serifFontFamily: Georgia, "Times New Roman", Times, serif; -@monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; - -@baseFontSize: 14px; -@baseFontWeight: 400; -@fontWeightSemi: 600; -@baseFontFamily: @sansFontFamily; -@baseLineHeight: 20px; -@altFontFamily: @serifFontFamily; - -@headingsFontFamily: inherit; // inherit. empty to use BS default, @baseFontFamily -@headingsFontWeight: normal; // instead of browser default, bold -@headingsFontStyle: normal; -@headingsColor: @textColor; // empty to use BS default, @textColor - - -// Component sizing -// ------------------------- -// Based on 14px font-size and 20px line-height - -@fontSizeLarge: @baseFontSize * 1.25; // ~18px -@fontSizeSmall: @baseFontSize * 0.85; // ~12px -@fontSizeMini: @baseFontSize * 0.75; // ~11px - -@paddingLarge: 22px 30px; // 66px -@paddingSmall: 2px 10px; // 26px -@paddingMini: 2px 6px; // 24px - -@baseBorderRadius: 3px; -@borderRadiusLarge: 4px; -@borderRadiusSmall: 2px; - -// Lists -@grafanaListBackground: darken(@grayLighter,5%); -@grafanaListAccent: darken(@grayLighter,8%); -@grafanaListBorderTop: #eee; -@grafanaListBorderBottom: #eee; -@grafanaListHighlight: darken(@grayLighter,10%); -@grafanaListHighlightContrast: #ddd; -@grafanaListMainLinkColor: @textColor; - - -// Tables -// ------------------------- -@tableBackground: transparent; // overall background-color -@tableBackgroundAccent: #f9f9f9; // for striping -@tableBackgroundHover: #E8F8FD; // for hover -@tableBorder: #ddd; // table and cell border - -// Scrollbars -@scrollbarBackground: @grayLighter; -@scrollbarBackground2: @grayLighter; -@scrollbarBorder: @grayLight; - -// Buttons -// ------------------------- -@btnBackground: @grayLighter; -@btnBackgroundHighlight: darken(@grayLighter, 15%); -@btnBorder: #bbb; - -@btnPrimaryBackground: lighten(@blue, 3%); -@btnPrimaryBackgroundHighlight: darken(@blue, 3%); - -@btnInfoBackground: lighten(@purple, 3%); -@btnInfoBackgroundHighlight: darken(@purple, 3%); - -@btnSuccessBackground: lighten(@green, 3%); -@btnSuccessBackgroundHighlight: darken(@green, 3%); - -@btnWarningBackground: lighten(@orange, 3%); -@btnWarningBackgroundHighlight: darken(@orange, 3%); - -@btnDangerBackground: lighten(@red, 3%); -@btnDangerBackgroundHighlight: darken(@red, 3%); - -@btnInverseBackground: @grayLighter; -@btnInverseBackgroundHighlight: darken(@grayLighter, 5%); -@btnInverseText: @black; -@btnInverseBorder: @grayLight; - -@btnText: @grayLighter; - -@iconContainerBackground: @white; -@iconContainerBackgroundHighlight: lighten(@white, 5%); -@iconContainerBorder: 1px solid rgba(0,0,0, 0.05); -@iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); - - -// Forms -// ------------------------- -@inputBackground: @white; -@inputBorder: @grayLight; -@inputBorderRadius: @baseBorderRadius; -@inputDisabledBackground: @grayLighter; -@formActionsBackground: #f5f5f5; -@inputHeight: @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border -@inputText: #020202; -@labelBackground: #f8f8f8; - - -// Sidemenu -// ------------------------- -@sideMenuBackground: @grafanaPanelBackground; -@sideMenuBackgroundHighlight: darken(@sideMenuBackground, 4%); - -// search -@searchShadow: 0 5px 30px 0 lighten(@grayLight, 30%); - -// Dropdowns -// ------------------------- -@dropdownBackground: @white; -@dropdownBorder: @grafanaTargetBorder; -@dropdownDividerTop: #e5e5e5; -@dropdownDividerBottom: @white; -@dropdownDivider: @dropdownDividerTop; -@dropdownTitle: #333; - -@dropdownLinkColor: @grayDark; -@dropdownLinkColorHover: @white; -@dropdownLinkColorActive: @white; - -@dropdownLinkBackgroundActive: @blue; -@dropdownLinkBackgroundHover: @blue; - - -// COMPONENT VARIABLES -// -------------------------------------------------- - - -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -@zindexDropdown: 1000; -@zindexPopover: 1010; -@zindexTooltip: 1030; -@zindexFixedNavbar: 1030; -@zindexModalBackdrop: 1040; -@zindexModal: 1050; - - -// Sprite icons path -// ------------------------- -@iconSpritePath: "../img/glyphicons-halflings.png"; -@iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; - - -// Input placeholder text color -// ------------------------- -@placeholderText: @grayLight; - - -// Hr border color -// ------------------------- -@hrBorder: @grayLighter; - - -// Horizontal forms & lists -// ------------------------- -@horizontalComponentOffset: 180px; - - -// Wells -// ------------------------- -@wellBackground: @grayLighter; - - -// Navbar -// ------------------------- -@navbarCollapseWidth: 979px; -@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1; - -@navbarHeight: 52px; -@navbarBackgroundHighlight: #f8f8f8; -@navbarBackground: #f8f8f8; -@navbarBorder: 1px solid @grafanaTargetBorder; - -@navbarText: #666; -@navbarLinkColor: #666; -@navbarLinkColorHover: #333; -@navbarLinkColorActive: #555; -@navbarLinkBackgroundHover: transparent; -@navbarLinkBackgroundActive: darken(@navbarBackground, 6.5%); -@navbarDropdownShadow: inset 0px 4px 7px -4px darken(@bodyBackground, 20%); - -@navbarBrandColor: @navbarLinkColor; - -@navbarButtonBackground: lighten(@navbarBackground, 3%); -@navbarButtonBackgroundHighlight: lighten(@navbarBackground, 5%); - - -// Pagination -// ------------------------- -@paginationBackground: @grayLight; -@paginationBorder: transparent; -@paginationActiveBackground: @blue; - - -// Hero unit -// ------------------------- -@heroUnitBackground: @grayLighter; -@heroUnitHeadingColor: inherit; -@heroUnitLeadColor: inherit; - - -// Form states and alerts -// ------------------------- -@warningText: lighten(@orange, 10%); -@warningBackground: @orange; -@warningBorder: transparent; - -@errorText: lighten(@red, 10%); -@errorBackground: @red; -@errorBorder: transparent; - -@successText: lighten(@green, 10%); -@successBackground: @green; -@successBorder: transparent; - -@infoText: lighten(@purple,10%); -@infoBackground: @purple; -@infoBorder: transparent; - - -// Tooltips and popovers -// ------------------------- -@tooltipColor: @white; -@tooltipBackground: @grayDark; -@tooltipArrowWidth: 5px; -@tooltipArrowColor: @tooltipBackground; -@tooltipLinkColor: darken(@white,11%); - -@popoverBackground: @white; -@popoverArrowWidth: 15px; -@popoverArrowColor: @white; -@popoverTitleBackground: @white; - -// Special enhancement for popovers -@popoverArrowOuterWidth: @popoverArrowWidth + 1; -@popoverArrowOuterColor: rgba(0,0,0,.25); - -// images -@checkboxImageUrl: '../img/checkbox_white.png'; - -// GRID -// -------------------------------------------------- - -// Default 940px grid -// ------------------------- -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - -// 1200px min -@gridColumnWidth1200: 70px; -@gridGutterWidth1200: 30px; -@gridRowWidth1200: (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1)); - -// 768px-979px -@gridColumnWidth768: 42px; -@gridGutterWidth768: 20px; -@gridRowWidth768: (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1)); - - -// Fluid grid -// ------------------------- -@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth); -@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth); - -// 1200px min -@fluidGridColumnWidth1200: percentage(@gridColumnWidth1200/@gridRowWidth1200); -@fluidGridGutterWidth1200: percentage(@gridGutterWidth1200/@gridRowWidth1200); - -// 768px-979px -@fluidGridColumnWidth768: percentage(@gridColumnWidth768/@gridRowWidth768); -@fluidGridGutterWidth768: percentage(@gridGutterWidth768/@gridRowWidth768); diff --git a/public/less/variables.light.scss b/public/less/variables.light.scss index 5cc0908e42e..5e83dc65672 100644 --- a/public/less/variables.light.scss +++ b/public/less/variables.light.scss @@ -43,13 +43,16 @@ $grafanaPanelBackground: $grayLighter; $grafanaPanelBorder: solid 1px #ddd; $grafanaTriggerBorder: solid 1px $grayLight; +// Scaffolding +// ------------------------- +$bodyBackground: #EFEFEF; +$pageBackground: $white; +$textColor: $gray; + // Submenu $submenuBackground: rgb(218, 217, 217); $submenuBorder: $white; -// Tabs -$fullEditBorder: $grayLighter; - // Graphite Target Editor $grafanaTargetBorder: #ddd; $grafanaTargetBackground: #efefef; @@ -65,12 +68,6 @@ $grafanaSelectBackground: $grafanaTargetFuncBackground; $modalBackground: $bodyBackground; $codeTagBackground: #ddd; -// Scaffolding -// ------------------------- -$bodyBackground: #EFEFEF; -$pageBackground: $white; -$textColor: $gray; - // Links // ------------------------- $linkColor: $gray; @@ -221,12 +218,6 @@ $zindexModalBackdrop: 1040; $zindexModal: 1050; -// Sprite icons path -// ------------------------- -$iconSpritePath: "../img/glyphicons-halflings.png"; -$iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; - - // Input placeholder text color // ------------------------- $placeholderText: $grayLight; @@ -249,8 +240,6 @@ $wellBackground: $grayLighter; // Navbar // ------------------------- -$navbarCollapseWidth: 979px; -$navbarCollapseDesktopWidth: $navbarCollapseWidth + 1; $navbarHeight: 52px; $navbarBackgroundHighlight: #f8f8f8; diff --git a/tasks/options/sass.js b/tasks/options/sass.js index 38e72f28a98..3218e99e078 100644 --- a/tasks/options/sass.js +++ b/tasks/options/sass.js @@ -4,8 +4,8 @@ module.exports = function(config) { src:{ options: {}, files: { - "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss", - "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss", + "<%= genDir %>/css/grafana.dark.min.css": "<%= srcDir %>/less/grafana.dark.scss", + "<%= genDir %>/css/grafana.light.min.css": "<%= srcDir %>/less/grafana.light.scss", } } }; From 30ddfc7a287e9da6843f627a6412eea29452a500 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 16:09:05 +0100 Subject: [PATCH 071/444] ux(): fix for dashboard header --- public/less/components/dashboard.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/public/less/components/dashboard.scss b/public/less/components/dashboard.scss index bea7058d87d..3f297688be8 100644 --- a/public/less/components/dashboard.scss +++ b/public/less/components/dashboard.scss @@ -276,10 +276,12 @@ div.flot-text { text-align: center; span { display: inline-block; - border: none; border-image: linear-gradient(to right, rgba(255,213,0,1) 0%, rgba(255,68,0,1) 99%, rgba(255,68,0,1) 100%); border-image-slice: 1; + border-top: 0; + border-right: 0; + border-left: 0; border-bottom: 2px solid transparent; - padding: 1.2rem .2rem .4rem .2rem; + padding: 1.2rem .5rem .4rem .5rem; } } From 746257710b7adc3825cbe5aa7b21b76dade3440b Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 16:11:37 +0100 Subject: [PATCH 072/444] fix(cli): align code with core grafana --- pkg/cmd/grafana-cli/commands/commands.go | 2 ++ pkg/cmd/grafana-cli/commands/install_command.go | 6 +++--- pkg/cmd/grafana-cli/commands/listremote_command.go | 4 ++-- pkg/cmd/grafana-cli/commands/remove_command.go | 4 ++-- pkg/cmd/grafana-cli/commands/upgrade_all_command.go | 10 +++++----- pkg/cmd/grafana-cli/main.go | 5 +++-- pkg/cmd/grafana-cli/version/version.go | 5 ----- 7 files changed, 17 insertions(+), 19 deletions(-) delete mode 100644 pkg/cmd/grafana-cli/version/version.go diff --git a/pkg/cmd/grafana-cli/commands/commands.go b/pkg/cmd/grafana-cli/commands/commands.go index 7854e45b77a..55e9a771480 100644 --- a/pkg/cmd/grafana-cli/commands/commands.go +++ b/pkg/cmd/grafana-cli/commands/commands.go @@ -3,6 +3,7 @@ package commands import ( "github.com/codegangsta/cli" "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" + "os" ) func runCommand(command func(commandLine CommandLine) error) func(context *cli.Context) { @@ -13,6 +14,7 @@ func runCommand(command func(commandLine CommandLine) error) func(context *cli.C log.Errorf("%v\n\n", err) cmd.ShowHelp() + os.Exit(1) } else { log.Info("Restart grafana after installing plugins . \n") } diff --git a/pkg/cmd/grafana-cli/commands/install_command.go b/pkg/cmd/grafana-cli/commands/install_command.go index f3de4cfb5d6..6c7970147aa 100644 --- a/pkg/cmd/grafana-cli/commands/install_command.go +++ b/pkg/cmd/grafana-cli/commands/install_command.go @@ -6,7 +6,7 @@ import ( "errors" "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" - services "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" + s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" "io" "io/ioutil" "net/http" @@ -49,7 +49,7 @@ func installCommand(c CommandLine) error { } func InstallPlugin(pluginName, pluginFolder, version string) error { - plugin, err := services.GetPlugin(pluginName) + plugin, err := s.GetPlugin(pluginName) if err != nil { return err } @@ -74,7 +74,7 @@ func InstallPlugin(pluginName, pluginFolder, version string) error { log.Info("Installed %s successfully ✔\n", plugin.Id) } - res := services.ReadPlugin(pluginFolder, pluginName) + res := s.ReadPlugin(pluginFolder, pluginName) for _, v := range res.Dependency.Plugins { log.Infof("Installing Dependency: %s\n", v.Id) diff --git a/pkg/cmd/grafana-cli/commands/listremote_command.go b/pkg/cmd/grafana-cli/commands/listremote_command.go index 5adda217be1..cf535a0498e 100644 --- a/pkg/cmd/grafana-cli/commands/listremote_command.go +++ b/pkg/cmd/grafana-cli/commands/listremote_command.go @@ -2,11 +2,11 @@ package commands import ( "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" - "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" + s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" ) func listremoteCommand(c CommandLine) error { - plugin, err := services.ListAllPlugins() + plugin, err := s.ListAllPlugins() if err != nil { return err diff --git a/pkg/cmd/grafana-cli/commands/remove_command.go b/pkg/cmd/grafana-cli/commands/remove_command.go index 86a3ccc9809..1235d257ab6 100644 --- a/pkg/cmd/grafana-cli/commands/remove_command.go +++ b/pkg/cmd/grafana-cli/commands/remove_command.go @@ -19,14 +19,14 @@ func removeCommand(c CommandLine) error { plugin := c.Args().First() log.Info("plugin: " + plugin + "\n") if plugin == "" { - return errors.New("Missing which plugin parameter") + return errors.New("Missing plugin parameter") } log.Infof("plugins : \n%v\n", localPlugins) for _, p := range localPlugins { - log.Infof("is %s == %s ? %v", p.Id, c.Args().First(), p.Id == c.Args().First()) if p.Id == c.Args().First() { + log.Infof("removing plugin %s", p.Id) removePlugin(pluginPath, p.Id) } } diff --git a/pkg/cmd/grafana-cli/commands/upgrade_all_command.go b/pkg/cmd/grafana-cli/commands/upgrade_all_command.go index 04d6cea840a..6c1e0182f51 100644 --- a/pkg/cmd/grafana-cli/commands/upgrade_all_command.go +++ b/pkg/cmd/grafana-cli/commands/upgrade_all_command.go @@ -3,7 +3,7 @@ package commands import ( "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" - services "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" + s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" "github.com/hashicorp/go-version" ) @@ -30,9 +30,9 @@ func ShouldUpgrade(installed string, remote m.Plugin) bool { func upgradeAllCommand(c CommandLine) error { pluginDir := c.GlobalString("path") - localPlugins := services.GetLocalPlugins(pluginDir) + localPlugins := s.GetLocalPlugins(pluginDir) - remotePlugins, err := services.ListAllPlugins() + remotePlugins, err := s.ListAllPlugins() if err != nil { return err @@ -51,9 +51,9 @@ func upgradeAllCommand(c CommandLine) error { } for _, p := range pluginsToUpgrade { - log.Infof("lets upgrade %v \n", p) + log.Infof("Upgrading %v \n", p.Id) - services.RemoveInstalledPlugin(pluginDir, p.Id) + s.RemoveInstalledPlugin(pluginDir, p.Id) InstallPlugin(p.Id, pluginDir, "") } diff --git a/pkg/cmd/grafana-cli/main.go b/pkg/cmd/grafana-cli/main.go index a04d1511397..938cfcc284a 100644 --- a/pkg/cmd/grafana-cli/main.go +++ b/pkg/cmd/grafana-cli/main.go @@ -5,11 +5,12 @@ import ( "github.com/codegangsta/cli" "github.com/grafana/grafana/pkg/cmd/grafana-cli/commands" "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" - "github.com/grafana/grafana/pkg/cmd/grafana-cli/version" "os" "runtime" ) +var version = "master" + func getGrafanaPluginPath() string { //TODO: try to get path from os:env GF_PLUGIN_FOLDER @@ -28,7 +29,7 @@ func main() { app.Name = "Grafana cli" app.Author = "raintank" app.Email = "https://github.com/grafana/grafana" - app.Version = version.Version + app.Version = version app.Flags = []cli.Flag{ cli.StringFlag{ Name: "path", diff --git a/pkg/cmd/grafana-cli/version/version.go b/pkg/cmd/grafana-cli/version/version.go deleted file mode 100644 index 2a0eddf9859..00000000000 --- a/pkg/cmd/grafana-cli/version/version.go +++ /dev/null @@ -1,5 +0,0 @@ -package version - -var ( - Version = "0.0.2" -) From 1e891f434d5ef0738dcd80bd7f98224fcb6ecabc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 16:44:23 +0100 Subject: [PATCH 073/444] move to sass is starting to work --- public/less/base/base.scss | 16 ++++++++++++---- public/less/components/navbar.scss | 1 - tasks/default_task.js | 2 +- tasks/options/concat.js | 4 ++-- tasks/options/sass.js | 4 ++-- tasks/options/watch.js | 2 +- 6 files changed, 18 insertions(+), 11 deletions(-) diff --git a/public/less/base/base.scss b/public/less/base/base.scss index 1556ee1d534..928ecb857ec 100644 --- a/public/less/base/base.scss +++ b/public/less/base/base.scss @@ -19,10 +19,18 @@ body { a { color: $linkColor; text-decoration: none; + + &:hover, + &:focus { + color: $linkColorHover; + text-decoration: none; + } + + &:focus { + @include tab-focus(); + } } -a:hover, -a:focus { - color: $linkColorHover; +img { + vertical-align: middle; } - diff --git a/public/less/components/navbar.scss b/public/less/components/navbar.scss index 92aaf8b2176..24f28d06812 100644 --- a/public/less/components/navbar.scss +++ b/public/less/components/navbar.scss @@ -11,7 +11,6 @@ padding-right: 20px; background-color: $navbarBackground; border-bottom: $navbarBorder; - @include clearfix(); } diff --git a/tasks/default_task.js b/tasks/default_task.js index 033acb3921e..3ec98fc660f 100644 --- a/tasks/default_task.js +++ b/tasks/default_task.js @@ -2,7 +2,7 @@ module.exports = function(grunt) { 'use strict'; - grunt.registerTask('css', ['less', 'concat:cssDark', 'concat:cssLight']); + grunt.registerTask('css', ['sass', 'concat:cssDark', 'concat:cssLight']); grunt.registerTask('default', [ 'jscs', 'jshint', diff --git a/tasks/options/concat.js b/tasks/options/concat.js index 521db4d9f39..59042fc26b0 100644 --- a/tasks/options/concat.js +++ b/tasks/options/concat.js @@ -6,7 +6,7 @@ module.exports = function(config) { src: [ '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', - '<%= genDir %>/css/bootstrap.dark.min.css', + '<%= genDir %>/css/grafana.dark.css', '<%= genDir %>/vendor/css/font-awesome.min.css' ], dest: '<%= genDir %>/css/grafana.dark.min.css' @@ -16,7 +16,7 @@ module.exports = function(config) { src: [ '<%= genDir %>/vendor/css/timepicker.css', '<%= genDir %>/vendor/css/spectrum.css', - '<%= genDir %>/css/bootstrap.light.min.css', + '<%= genDir %>/css/grafana.light.css', '<%= genDir %>/vendor/css/font-awesome.min.css' ], dest: '<%= genDir %>/css/grafana.light.min.css' diff --git a/tasks/options/sass.js b/tasks/options/sass.js index 3218e99e078..38e72f28a98 100644 --- a/tasks/options/sass.js +++ b/tasks/options/sass.js @@ -4,8 +4,8 @@ module.exports = function(config) { src:{ options: {}, files: { - "<%= genDir %>/css/grafana.dark.min.css": "<%= srcDir %>/less/grafana.dark.scss", - "<%= genDir %>/css/grafana.light.min.css": "<%= srcDir %>/less/grafana.light.scss", + "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss", + "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss", } } }; diff --git a/tasks/options/watch.js b/tasks/options/watch.js index 8e02bb2a509..3d4ed5ac02c 100644 --- a/tasks/options/watch.js +++ b/tasks/options/watch.js @@ -23,7 +23,7 @@ module.exports = function(config, grunt) { if (/(\.scss)$/.test(filepath)) { grunt.task.run('clean:css'); - grunt.task.run('sass'); + grunt.task.run('css'); } if (/(\.ts)$/.test(filepath)) { From 83bf63641c3dec4e834141c7a5cf966ccea6cd6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 16:55:39 +0100 Subject: [PATCH 074/444] ux(): mini light theme fix --- public/less/base/forms.scss | 1 + public/less/variables.light.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/public/less/base/forms.scss b/public/less/base/forms.scss index 644c77980b2..5d106278b4d 100644 --- a/public/less/base/forms.scss +++ b/public/less/base/forms.scss @@ -117,6 +117,7 @@ input[type="tel"], input[type="color"], .uneditable-input { background-color: $inputBackground; + border: 1px solid $inputBorder; @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @include transition("border linear .2s, box-shadow linear .2s"); diff --git a/public/less/variables.light.scss b/public/less/variables.light.scss index 5e83dc65672..b1553064457 100644 --- a/public/less/variables.light.scss +++ b/public/less/variables.light.scss @@ -168,7 +168,7 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); // Forms // ------------------------- $inputBackground: $white; -$inputBorder: $grayLight; +$inputBorder: $grayLighter; $inputBorderRadius: $baseBorderRadius; $inputDisabledBackground: $grayLighter; $formActionsBackground: #f5f5f5; From 43b91ea0d6fa6e4d886c309a1b5912cbf25d41ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 17:07:46 +0100 Subject: [PATCH 075/444] ux(saas): renamed scss partial files to have underscore before --- public/less/_grafana.scss | 69 +++++++++++++++ ...riables.dark.scss => _variables.dark.scss} | 0 ...ables.light.scss => _variables.light.scss} | 0 public/less/base/{base.scss => _base.scss} | 0 public/less/base/{code.scss => _code.scss} | 0 public/less/base/{fonts.scss => _fonts.scss} | 0 public/less/base/{forms.scss => _forms.scss} | 0 .../base/{normalize.scss => _normalize.scss} | 0 public/less/base/{type.scss => _type.scss} | 0 .../components/{alerts.scss => _alerts.scss} | 0 .../{buttons.scss => _buttons.scss} | 0 .../{color_picker.scss => _color_picker.scss} | 0 .../{dashboard.scss => _dashboard.scss} | 0 .../{dropdown.scss => _dropdown.scss} | 0 ...er-controls.scss => _filter-controls.scss} | 0 .../{filter-list.scss => _filter-list.scss} | 0 .../{filter-table.scss => _filter-table.scss} | 0 .../components/{footer.scss => _footer.scss} | 0 .../{gf-form.scss => _gf-form.scss} | 0 .../components/{gfbox.scss => _gfbox.scss} | 0 .../{infobox.scss => _infobox.scss} | 0 .../components/{modals.scss => _modals.scss} | 0 .../components/{navbar.scss => _navbar.scss} | 0 .../less/components/{navs.scss => _navs.scss} | 0 .../{old_stuff.scss => _old_stuff.scss} | 0 .../{pagination.scss => _pagination.scss} | 0 ...nel_dashlist.scss => _panel_dashlist.scss} | 0 .../{panel_graph.scss => _panel_graph.scss} | 0 ...singlestat.scss => _panel_singlestat.scss} | 0 .../{panel_table.scss => _panel_table.scss} | 0 .../{popovers.scss => _popovers.scss} | 0 .../{query_editor.scss => _query_editor.scss} | 0 .../{scrollbar.scss => _scrollbar.scss} | 0 .../components/{search.scss => _search.scss} | 0 .../{shortcuts.scss => _shortcuts.scss} | 0 .../{sidemenu.scss => _sidemenu.scss} | 0 .../{submenu.scss => _submenu.scss} | 0 .../{tables_lists.scss => _tables_lists.scss} | 0 .../less/components/{tabs.scss => _tabs.scss} | 0 .../less/components/{tags.scss => _tags.scss} | 0 .../{tagsinput.scss => _tagsinput.scss} | 0 .../{tightform.scss => _tightform.scss} | 0 .../{timepicker.scss => _timepicker.scss} | 0 .../{tooltip.scss => _tooltip.scss} | 0 .../{typeahead.scss => _typeahead.scss} | 0 public/less/grafana.dark.scss | 4 +- public/less/grafana.light.scss | 4 +- public/less/grafana.scss | 69 --------------- public/less/layout/{page.scss => _page.scss} | 0 public/less/mixins/_breakpoints.scss | 86 +++++++++++++++++++ .../mixins/{buttons.scss => _buttons.scss} | 0 .../less/mixins/{mixins.scss => _mixins.scss} | 0 public/less/pages/{admin.scss => _admin.scss} | 0 .../pages/{alerting.scss => _alerting.scss} | 0 public/less/pages/{apps.scss => _apps.scss} | 0 public/less/pages/{login.scss => _login.scss} | 0 .../pages/{playlist.scss => _playlist.scss} | 0 .../less/pages/{signup.scss => _signup.scss} | 0 .../utils/{angular.scss => _angular.scss} | 0 public/less/utils/{utils.scss => _utils.scss} | 0 .../{validation.scss => _validation.scss} | 0 61 files changed, 159 insertions(+), 73 deletions(-) create mode 100644 public/less/_grafana.scss rename public/less/{variables.dark.scss => _variables.dark.scss} (100%) rename public/less/{variables.light.scss => _variables.light.scss} (100%) rename public/less/base/{base.scss => _base.scss} (100%) rename public/less/base/{code.scss => _code.scss} (100%) rename public/less/base/{fonts.scss => _fonts.scss} (100%) rename public/less/base/{forms.scss => _forms.scss} (100%) rename public/less/base/{normalize.scss => _normalize.scss} (100%) rename public/less/base/{type.scss => _type.scss} (100%) rename public/less/components/{alerts.scss => _alerts.scss} (100%) rename public/less/components/{buttons.scss => _buttons.scss} (100%) rename public/less/components/{color_picker.scss => _color_picker.scss} (100%) rename public/less/components/{dashboard.scss => _dashboard.scss} (100%) rename public/less/components/{dropdown.scss => _dropdown.scss} (100%) rename public/less/components/{filter-controls.scss => _filter-controls.scss} (100%) rename public/less/components/{filter-list.scss => _filter-list.scss} (100%) rename public/less/components/{filter-table.scss => _filter-table.scss} (100%) rename public/less/components/{footer.scss => _footer.scss} (100%) rename public/less/components/{gf-form.scss => _gf-form.scss} (100%) rename public/less/components/{gfbox.scss => _gfbox.scss} (100%) rename public/less/components/{infobox.scss => _infobox.scss} (100%) rename public/less/components/{modals.scss => _modals.scss} (100%) rename public/less/components/{navbar.scss => _navbar.scss} (100%) rename public/less/components/{navs.scss => _navs.scss} (100%) rename public/less/components/{old_stuff.scss => _old_stuff.scss} (100%) rename public/less/components/{pagination.scss => _pagination.scss} (100%) rename public/less/components/{panel_dashlist.scss => _panel_dashlist.scss} (100%) rename public/less/components/{panel_graph.scss => _panel_graph.scss} (100%) rename public/less/components/{panel_singlestat.scss => _panel_singlestat.scss} (100%) rename public/less/components/{panel_table.scss => _panel_table.scss} (100%) rename public/less/components/{popovers.scss => _popovers.scss} (100%) rename public/less/components/{query_editor.scss => _query_editor.scss} (100%) rename public/less/components/{scrollbar.scss => _scrollbar.scss} (100%) rename public/less/components/{search.scss => _search.scss} (100%) rename public/less/components/{shortcuts.scss => _shortcuts.scss} (100%) rename public/less/components/{sidemenu.scss => _sidemenu.scss} (100%) rename public/less/components/{submenu.scss => _submenu.scss} (100%) rename public/less/components/{tables_lists.scss => _tables_lists.scss} (100%) rename public/less/components/{tabs.scss => _tabs.scss} (100%) rename public/less/components/{tags.scss => _tags.scss} (100%) rename public/less/components/{tagsinput.scss => _tagsinput.scss} (100%) rename public/less/components/{tightform.scss => _tightform.scss} (100%) rename public/less/components/{timepicker.scss => _timepicker.scss} (100%) rename public/less/components/{tooltip.scss => _tooltip.scss} (100%) rename public/less/components/{typeahead.scss => _typeahead.scss} (100%) delete mode 100644 public/less/grafana.scss rename public/less/layout/{page.scss => _page.scss} (100%) create mode 100644 public/less/mixins/_breakpoints.scss rename public/less/mixins/{buttons.scss => _buttons.scss} (100%) rename public/less/mixins/{mixins.scss => _mixins.scss} (100%) rename public/less/pages/{admin.scss => _admin.scss} (100%) rename public/less/pages/{alerting.scss => _alerting.scss} (100%) rename public/less/pages/{apps.scss => _apps.scss} (100%) rename public/less/pages/{login.scss => _login.scss} (100%) rename public/less/pages/{playlist.scss => _playlist.scss} (100%) rename public/less/pages/{signup.scss => _signup.scss} (100%) rename public/less/utils/{angular.scss => _angular.scss} (100%) rename public/less/utils/{utils.scss => _utils.scss} (100%) rename public/less/utils/{validation.scss => _validation.scss} (100%) diff --git a/public/less/_grafana.scss b/public/less/_grafana.scss new file mode 100644 index 00000000000..dd896261c93 --- /dev/null +++ b/public/less/_grafana.scss @@ -0,0 +1,69 @@ + +// MIXINS +@import "./mixins/_mixins.scss"; +@import "./mixins/_buttons.scss"; + +// BASE +@import "./base/_normalize.scss"; +@import "./base/_base.scss"; +@import "./base/_type.scss"; +@import "./base/_forms.scss"; +@import "./base/_fonts.scss"; +@import "./base/_code.scss"; + +// UTILS +@import "./utils/_utils.scss"; +@import "./utils/_validation.scss"; +@import "./utils/_angular.scss"; + +// LAYOUTS +// @import "./bootstrap/grid.scss"; +@import "./layout/_page.scss"; + +// COMPONENTS +@import "./components/_panel_graph.scss"; +@import "./components/_submenu.scss"; +@import "./components/_panel_dashlist.scss"; +@import "./components/_panel_singlestat.scss"; +@import "./components/_panel_table.scss"; +@import "./components/_tagsinput.scss"; +@import "./components/_tables_lists.scss"; +@import "./components/_search.scss"; +@import "./components/_dashboard.scss"; +@import "./components/_tightform.scss"; +@import "./components/_gf-form.scss"; +@import "./components/_sidemenu.scss"; +@import "./components/_navbar.scss"; +@import "./components/_gfbox.scss"; +@import "./components/_pagination.scss"; +@import "./components/_tabs.scss"; +@import "./components/_timepicker.scss"; +@import "./components/_filter-controls.scss"; +@import "./components/_filter-list.scss"; +@import "./components/_filter-table.scss"; +@import "./components/_scrollbar.scss"; +@import "./components/_old_stuff.scss"; +@import "./components/_navbar.scss"; +@import "./components/_popovers.scss"; +@import "./components/_alerts.scss"; +@import "./components/_typeahead.scss"; +@import "./components/_tags.scss"; +@import "./components/_modals.scss"; +@import "./components/_dropdown.scss"; +@import "./components/_color_picker.scss"; +@import "./components/_tooltip.scss"; +@import "./components/_buttons.scss"; +@import "./components/_footer.scss"; +@import "./components/_infobox.scss"; +@import "./components/_shortcuts.scss"; +@import "./components/_query_editor.scss"; +@import "./components/_navs.scss"; + +// PAGES +@import "./pages/_login.scss"; +@import "./pages/_playlist.scss"; +@import "./pages/_admin.scss"; +@import "./pages/_alerting.scss"; +@import "./pages/_apps.scss"; +@import "./pages/_signup.scss"; + diff --git a/public/less/variables.dark.scss b/public/less/_variables.dark.scss similarity index 100% rename from public/less/variables.dark.scss rename to public/less/_variables.dark.scss diff --git a/public/less/variables.light.scss b/public/less/_variables.light.scss similarity index 100% rename from public/less/variables.light.scss rename to public/less/_variables.light.scss diff --git a/public/less/base/base.scss b/public/less/base/_base.scss similarity index 100% rename from public/less/base/base.scss rename to public/less/base/_base.scss diff --git a/public/less/base/code.scss b/public/less/base/_code.scss similarity index 100% rename from public/less/base/code.scss rename to public/less/base/_code.scss diff --git a/public/less/base/fonts.scss b/public/less/base/_fonts.scss similarity index 100% rename from public/less/base/fonts.scss rename to public/less/base/_fonts.scss diff --git a/public/less/base/forms.scss b/public/less/base/_forms.scss similarity index 100% rename from public/less/base/forms.scss rename to public/less/base/_forms.scss diff --git a/public/less/base/normalize.scss b/public/less/base/_normalize.scss similarity index 100% rename from public/less/base/normalize.scss rename to public/less/base/_normalize.scss diff --git a/public/less/base/type.scss b/public/less/base/_type.scss similarity index 100% rename from public/less/base/type.scss rename to public/less/base/_type.scss diff --git a/public/less/components/alerts.scss b/public/less/components/_alerts.scss similarity index 100% rename from public/less/components/alerts.scss rename to public/less/components/_alerts.scss diff --git a/public/less/components/buttons.scss b/public/less/components/_buttons.scss similarity index 100% rename from public/less/components/buttons.scss rename to public/less/components/_buttons.scss diff --git a/public/less/components/color_picker.scss b/public/less/components/_color_picker.scss similarity index 100% rename from public/less/components/color_picker.scss rename to public/less/components/_color_picker.scss diff --git a/public/less/components/dashboard.scss b/public/less/components/_dashboard.scss similarity index 100% rename from public/less/components/dashboard.scss rename to public/less/components/_dashboard.scss diff --git a/public/less/components/dropdown.scss b/public/less/components/_dropdown.scss similarity index 100% rename from public/less/components/dropdown.scss rename to public/less/components/_dropdown.scss diff --git a/public/less/components/filter-controls.scss b/public/less/components/_filter-controls.scss similarity index 100% rename from public/less/components/filter-controls.scss rename to public/less/components/_filter-controls.scss diff --git a/public/less/components/filter-list.scss b/public/less/components/_filter-list.scss similarity index 100% rename from public/less/components/filter-list.scss rename to public/less/components/_filter-list.scss diff --git a/public/less/components/filter-table.scss b/public/less/components/_filter-table.scss similarity index 100% rename from public/less/components/filter-table.scss rename to public/less/components/_filter-table.scss diff --git a/public/less/components/footer.scss b/public/less/components/_footer.scss similarity index 100% rename from public/less/components/footer.scss rename to public/less/components/_footer.scss diff --git a/public/less/components/gf-form.scss b/public/less/components/_gf-form.scss similarity index 100% rename from public/less/components/gf-form.scss rename to public/less/components/_gf-form.scss diff --git a/public/less/components/gfbox.scss b/public/less/components/_gfbox.scss similarity index 100% rename from public/less/components/gfbox.scss rename to public/less/components/_gfbox.scss diff --git a/public/less/components/infobox.scss b/public/less/components/_infobox.scss similarity index 100% rename from public/less/components/infobox.scss rename to public/less/components/_infobox.scss diff --git a/public/less/components/modals.scss b/public/less/components/_modals.scss similarity index 100% rename from public/less/components/modals.scss rename to public/less/components/_modals.scss diff --git a/public/less/components/navbar.scss b/public/less/components/_navbar.scss similarity index 100% rename from public/less/components/navbar.scss rename to public/less/components/_navbar.scss diff --git a/public/less/components/navs.scss b/public/less/components/_navs.scss similarity index 100% rename from public/less/components/navs.scss rename to public/less/components/_navs.scss diff --git a/public/less/components/old_stuff.scss b/public/less/components/_old_stuff.scss similarity index 100% rename from public/less/components/old_stuff.scss rename to public/less/components/_old_stuff.scss diff --git a/public/less/components/pagination.scss b/public/less/components/_pagination.scss similarity index 100% rename from public/less/components/pagination.scss rename to public/less/components/_pagination.scss diff --git a/public/less/components/panel_dashlist.scss b/public/less/components/_panel_dashlist.scss similarity index 100% rename from public/less/components/panel_dashlist.scss rename to public/less/components/_panel_dashlist.scss diff --git a/public/less/components/panel_graph.scss b/public/less/components/_panel_graph.scss similarity index 100% rename from public/less/components/panel_graph.scss rename to public/less/components/_panel_graph.scss diff --git a/public/less/components/panel_singlestat.scss b/public/less/components/_panel_singlestat.scss similarity index 100% rename from public/less/components/panel_singlestat.scss rename to public/less/components/_panel_singlestat.scss diff --git a/public/less/components/panel_table.scss b/public/less/components/_panel_table.scss similarity index 100% rename from public/less/components/panel_table.scss rename to public/less/components/_panel_table.scss diff --git a/public/less/components/popovers.scss b/public/less/components/_popovers.scss similarity index 100% rename from public/less/components/popovers.scss rename to public/less/components/_popovers.scss diff --git a/public/less/components/query_editor.scss b/public/less/components/_query_editor.scss similarity index 100% rename from public/less/components/query_editor.scss rename to public/less/components/_query_editor.scss diff --git a/public/less/components/scrollbar.scss b/public/less/components/_scrollbar.scss similarity index 100% rename from public/less/components/scrollbar.scss rename to public/less/components/_scrollbar.scss diff --git a/public/less/components/search.scss b/public/less/components/_search.scss similarity index 100% rename from public/less/components/search.scss rename to public/less/components/_search.scss diff --git a/public/less/components/shortcuts.scss b/public/less/components/_shortcuts.scss similarity index 100% rename from public/less/components/shortcuts.scss rename to public/less/components/_shortcuts.scss diff --git a/public/less/components/sidemenu.scss b/public/less/components/_sidemenu.scss similarity index 100% rename from public/less/components/sidemenu.scss rename to public/less/components/_sidemenu.scss diff --git a/public/less/components/submenu.scss b/public/less/components/_submenu.scss similarity index 100% rename from public/less/components/submenu.scss rename to public/less/components/_submenu.scss diff --git a/public/less/components/tables_lists.scss b/public/less/components/_tables_lists.scss similarity index 100% rename from public/less/components/tables_lists.scss rename to public/less/components/_tables_lists.scss diff --git a/public/less/components/tabs.scss b/public/less/components/_tabs.scss similarity index 100% rename from public/less/components/tabs.scss rename to public/less/components/_tabs.scss diff --git a/public/less/components/tags.scss b/public/less/components/_tags.scss similarity index 100% rename from public/less/components/tags.scss rename to public/less/components/_tags.scss diff --git a/public/less/components/tagsinput.scss b/public/less/components/_tagsinput.scss similarity index 100% rename from public/less/components/tagsinput.scss rename to public/less/components/_tagsinput.scss diff --git a/public/less/components/tightform.scss b/public/less/components/_tightform.scss similarity index 100% rename from public/less/components/tightform.scss rename to public/less/components/_tightform.scss diff --git a/public/less/components/timepicker.scss b/public/less/components/_timepicker.scss similarity index 100% rename from public/less/components/timepicker.scss rename to public/less/components/_timepicker.scss diff --git a/public/less/components/tooltip.scss b/public/less/components/_tooltip.scss similarity index 100% rename from public/less/components/tooltip.scss rename to public/less/components/_tooltip.scss diff --git a/public/less/components/typeahead.scss b/public/less/components/_typeahead.scss similarity index 100% rename from public/less/components/typeahead.scss rename to public/less/components/_typeahead.scss diff --git a/public/less/grafana.dark.scss b/public/less/grafana.dark.scss index 2dbd9475e24..24341125549 100644 --- a/public/less/grafana.dark.scss +++ b/public/less/grafana.dark.scss @@ -1,2 +1,2 @@ -@import "variables.dark.scss"; -@import "grafana.scss"; +@import "_variables.dark.scss"; +@import "_grafana.scss"; diff --git a/public/less/grafana.light.scss b/public/less/grafana.light.scss index bc9b18e52fe..f44df3ec9a0 100644 --- a/public/less/grafana.light.scss +++ b/public/less/grafana.light.scss @@ -1,2 +1,2 @@ -@import "variables.light.scss"; -@import "grafana.scss"; +@import "_variables.light.scss"; +@import "_grafana.scss"; diff --git a/public/less/grafana.scss b/public/less/grafana.scss deleted file mode 100644 index f994c9a194d..00000000000 --- a/public/less/grafana.scss +++ /dev/null @@ -1,69 +0,0 @@ - -// MIXINS -@import "./mixins/mixins.scss"; -@import "./mixins/buttons.scss"; - -// BASE -@import "./base/normalize.scss"; -@import "./base/base.scss"; -@import "./base/type.scss"; -@import "./base/forms.scss"; -@import "./base/fonts.scss"; -@import "./base/code.scss"; - -// UTILS -@import "./utils/utils.scss"; -@import "./utils/validation.scss"; -@import "./utils/angular.scss"; - -// LAYOUTS -// @import "./bootstrap/grid.scss"; -@import "./layout/page.scss"; - -// COMPONENTS -@import "./components/panel_graph.scss"; -@import "./components/submenu.scss"; -@import "./components/panel_dashlist.scss"; -@import "./components/panel_singlestat.scss"; -@import "./components/panel_table.scss"; -@import "./components/tagsinput.scss"; -@import "./components/tables_lists.scss"; -@import "./components/search.scss"; -@import "./components/dashboard.scss"; -@import "./components/tightform.scss"; -@import "./components/gf-form.scss"; -@import "./components/sidemenu.scss"; -@import "./components/navbar.scss"; -@import "./components/gfbox.scss"; -@import "./components/pagination.scss"; -@import "./components/tabs.scss"; -@import "./components/timepicker.scss"; -@import "./components/filter-controls.scss"; -@import "./components/filter-list.scss"; -@import "./components/filter-table.scss"; -@import "./components/scrollbar.scss"; -@import "./components/old_stuff.scss"; -@import "./components/navbar.scss"; -@import "./components/popovers.scss"; -@import "./components/alerts.scss"; -@import "./components/typeahead.scss"; -@import "./components/tags.scss"; -@import "./components/modals.scss"; -@import "./components/dropdown.scss"; -@import "./components/color_picker.scss"; -@import "./components/tooltip.scss"; -@import "./components/buttons.scss"; -@import "./components/footer.scss"; -@import "./components/infobox.scss"; -@import "./components/shortcuts.scss"; -@import "./components/query_editor.scss"; -@import "./components/navs.scss"; - -// PAGES -@import "./pages/login.scss"; -@import "./pages/playlist.scss"; -@import "./pages/admin.scss"; -@import "./pages/alerting.scss"; -@import "./pages/apps.scss"; -@import "./pages/signup.scss"; - diff --git a/public/less/layout/page.scss b/public/less/layout/_page.scss similarity index 100% rename from public/less/layout/page.scss rename to public/less/layout/_page.scss diff --git a/public/less/mixins/_breakpoints.scss b/public/less/mixins/_breakpoints.scss new file mode 100644 index 00000000000..a868833b45e --- /dev/null +++ b/public/less/mixins/_breakpoints.scss @@ -0,0 +1,86 @@ +// Breakpoint viewport sizes and media queries. +// +// Breakpoints are defined as a map of (name: minimum width), order from small to large: +// +// (xs: 0, sm: 544px, md: 768px) +// +// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default. + +// Name of the next breakpoint, or null for the last breakpoint. +// +// >> breakpoint-next(sm) +// md +// >> breakpoint-next(sm, (xs: 0, sm: 544px, md: 768px)) +// md +// >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) +// md +@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} + +// Minimum breakpoint width. Null for the smallest (first) breakpoint. +// +// >> breakpoint-min(sm, (xs: 0, sm: 544px, md: 768px)) +// 544px +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} + +// Maximum breakpoint width. Null for the largest (last) breakpoint. +// The maximum value is calculated as the minimum of the next one less 0.1. +// +// >> breakpoint-max(sm, (xs: 0, sm: 544px, md: 768px)) +// 767px +@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - 1px, null); +} + +// Media of at least the minimum breakpoint width. No query for the smallest breakpoint. +// Makes the @content apply to the given breakpoint and wider. +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} + +// Media of at most the maximum breakpoint width. No query for the largest breakpoint. +// Makes the @content apply to the given breakpoint and narrower. +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } @else { + @content; + } +} + +// Media between the breakpoint's minimum and maximum widths. +// No minimum for the smallest breakpoint, and no maximum for the largest one. +// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. +@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { + @include media-breakpoint-up($name, $breakpoints) { + @include media-breakpoint-down($name, $breakpoints) { + @content; + } + } +} + +// Media that spans multiple breakpoint widths. +// Makes the @content apply between the min and max breakpoints +@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { + @include media-breakpoint-up($lower, $breakpoints) { + @include media-breakpoint-down($upper, $breakpoints) { + @content; + } + } +} diff --git a/public/less/mixins/buttons.scss b/public/less/mixins/_buttons.scss similarity index 100% rename from public/less/mixins/buttons.scss rename to public/less/mixins/_buttons.scss diff --git a/public/less/mixins/mixins.scss b/public/less/mixins/_mixins.scss similarity index 100% rename from public/less/mixins/mixins.scss rename to public/less/mixins/_mixins.scss diff --git a/public/less/pages/admin.scss b/public/less/pages/_admin.scss similarity index 100% rename from public/less/pages/admin.scss rename to public/less/pages/_admin.scss diff --git a/public/less/pages/alerting.scss b/public/less/pages/_alerting.scss similarity index 100% rename from public/less/pages/alerting.scss rename to public/less/pages/_alerting.scss diff --git a/public/less/pages/apps.scss b/public/less/pages/_apps.scss similarity index 100% rename from public/less/pages/apps.scss rename to public/less/pages/_apps.scss diff --git a/public/less/pages/login.scss b/public/less/pages/_login.scss similarity index 100% rename from public/less/pages/login.scss rename to public/less/pages/_login.scss diff --git a/public/less/pages/playlist.scss b/public/less/pages/_playlist.scss similarity index 100% rename from public/less/pages/playlist.scss rename to public/less/pages/_playlist.scss diff --git a/public/less/pages/signup.scss b/public/less/pages/_signup.scss similarity index 100% rename from public/less/pages/signup.scss rename to public/less/pages/_signup.scss diff --git a/public/less/utils/angular.scss b/public/less/utils/_angular.scss similarity index 100% rename from public/less/utils/angular.scss rename to public/less/utils/_angular.scss diff --git a/public/less/utils/utils.scss b/public/less/utils/_utils.scss similarity index 100% rename from public/less/utils/utils.scss rename to public/less/utils/_utils.scss diff --git a/public/less/utils/validation.scss b/public/less/utils/_validation.scss similarity index 100% rename from public/less/utils/validation.scss rename to public/less/utils/_validation.scss From 47644f275557bcd6f2108f0812adb2911eaad450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 17:14:02 +0100 Subject: [PATCH 076/444] ux(): restored dropdown divider class --- public/less/components/_dropdown.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/public/less/components/_dropdown.scss b/public/less/components/_dropdown.scss index b9ad1574bb1..fbf75b6e2b0 100644 --- a/public/less/components/_dropdown.scss +++ b/public/less/components/_dropdown.scss @@ -59,6 +59,14 @@ left: auto; } + .divider { + height: 1px; + margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px + overflow: hidden; + background-color: $dropdownDividerTop; + border-bottom: 1px solid $dropdownDividerBottom; + } + // Links within the dropdown menu > li > a { display: block; From 18079aacedeb156593c3c5c7933d0f42e0ca19d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 17:15:54 +0100 Subject: [PATCH 077/444] ux(sass): restored label colors --- public/less/components/_tags.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/public/less/components/_tags.scss b/public/less/components/_tags.scss index c0aa1bd23a5..0eda40f9a08 100644 --- a/public/less/components/_tags.scss +++ b/public/less/components/_tags.scss @@ -37,3 +37,24 @@ background-color: darken($purple, 10%); } + +// Colors +// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) +.label, +.badge { + // Important (red) + &-important { background-color: $errorText; } + &-important[href] { background-color: darken($errorText, 10%); } + // Warnings (orange) + &-warning { background-color: $orange; } + &-warning[href] { background-color: darken($orange, 10%); } + // Success (green) + &-success { background-color: $successText; } + &-success[href] { background-color: darken($successText, 10%); } + // Info (turquoise) + &-info { background-color: $infoText; } + &-info[href] { background-color: darken($infoText, 10%); } + // Inverse (black) + &-inverse { background-color: $grayDark; } + &-inverse[href] { background-color: darken($grayDark, 10%); } +} From bc4c71a7c66efc12778ec859d636870bfe0151a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 18:04:45 +0100 Subject: [PATCH 078/444] ux(sass): added bootstrap 4 grid and breakpoint system --- .../features/playlist/partials/playlist.html | 59 +++++---- .../playlist/partials/playlist_search.html | 42 +++---- public/less/_grafana.scss | 115 +++++++++--------- public/less/_grid-variables.scss | 36 ++++++ public/less/base/_grid.scss | 32 +++++ public/less/mixins/_grid-framework.scss | 47 +++++++ public/less/mixins/_grid.scss | 75 ++++++++++++ public/less/utils/_flex.scss | 32 +++++ 8 files changed, 330 insertions(+), 108 deletions(-) create mode 100644 public/less/_grid-variables.scss create mode 100644 public/less/base/_grid.scss create mode 100644 public/less/mixins/_grid-framework.scss create mode 100644 public/less/mixins/_grid.scss create mode 100644 public/less/utils/_flex.scss diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 54600ecc9f4..d52506cc5a7 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -18,35 +18,34 @@
-
-
Add dashboards
-
- +
+
+
Add dashboards
+
+ +
-
+
Search results ({{ctrl.filteredDashboards.length}})
- - - - - -
- {{playlistItem.title}} - - -
-
-
-
-
+
+ + + + + +
+ {{playlistItem.title}} + + +
+
@@ -56,7 +55,8 @@
-
+ +
Added dashboards
@@ -89,13 +89,10 @@
- - Save - Cancel - + Save + Cancel
diff --git a/public/app/features/playlist/partials/playlist_search.html b/public/app/features/playlist/partials/playlist_search.html index e3005c1b74b..12b3d563820 100644 --- a/public/app/features/playlist/partials/playlist_search.html +++ b/public/app/features/playlist/partials/playlist_search.html @@ -2,25 +2,25 @@ - -
- - - - starred - | - - - tags - - - | - - - - {{tagName}} - - - -
+
+ + + + starred + | + + + tags + + + | + + + + {{tagName}} + + + +
+ diff --git a/public/less/_grafana.scss b/public/less/_grafana.scss index dd896261c93..84d74c18ff6 100644 --- a/public/less/_grafana.scss +++ b/public/less/_grafana.scss @@ -1,69 +1,72 @@ +@import "grid-variables"; // MIXINS -@import "./mixins/_mixins.scss"; -@import "./mixins/_buttons.scss"; +@import "mixins/mixins"; +@import "mixins/buttons"; +@import "mixins/breakpoints"; +@import "mixins/grid"; +@import "mixins/grid-framework"; // BASE -@import "./base/_normalize.scss"; -@import "./base/_base.scss"; -@import "./base/_type.scss"; -@import "./base/_forms.scss"; -@import "./base/_fonts.scss"; -@import "./base/_code.scss"; +@import "base/normalize"; +@import "base/base"; +@import "base/type"; +@import "base/forms"; +@import "base/fonts"; +@import "base/grid"; // UTILS -@import "./utils/_utils.scss"; -@import "./utils/_validation.scss"; -@import "./utils/_angular.scss"; +@import "utils/utils"; +@import "utils/validation"; +@import "utils/angular"; // LAYOUTS -// @import "./bootstrap/grid.scss"; -@import "./layout/_page.scss"; +@import "layout/page"; // COMPONENTS -@import "./components/_panel_graph.scss"; -@import "./components/_submenu.scss"; -@import "./components/_panel_dashlist.scss"; -@import "./components/_panel_singlestat.scss"; -@import "./components/_panel_table.scss"; -@import "./components/_tagsinput.scss"; -@import "./components/_tables_lists.scss"; -@import "./components/_search.scss"; -@import "./components/_dashboard.scss"; -@import "./components/_tightform.scss"; -@import "./components/_gf-form.scss"; -@import "./components/_sidemenu.scss"; -@import "./components/_navbar.scss"; -@import "./components/_gfbox.scss"; -@import "./components/_pagination.scss"; -@import "./components/_tabs.scss"; -@import "./components/_timepicker.scss"; -@import "./components/_filter-controls.scss"; -@import "./components/_filter-list.scss"; -@import "./components/_filter-table.scss"; -@import "./components/_scrollbar.scss"; -@import "./components/_old_stuff.scss"; -@import "./components/_navbar.scss"; -@import "./components/_popovers.scss"; -@import "./components/_alerts.scss"; -@import "./components/_typeahead.scss"; -@import "./components/_tags.scss"; -@import "./components/_modals.scss"; -@import "./components/_dropdown.scss"; -@import "./components/_color_picker.scss"; -@import "./components/_tooltip.scss"; -@import "./components/_buttons.scss"; -@import "./components/_footer.scss"; -@import "./components/_infobox.scss"; -@import "./components/_shortcuts.scss"; -@import "./components/_query_editor.scss"; -@import "./components/_navs.scss"; +@import "components/panel_graph.scss"; +@import "components/submenu.scss"; +@import "components/panel_dashlist.scss"; +@import "components/panel_singlestat.scss"; +@import "components/panel_table.scss"; +@import "components/tagsinput.scss"; +@import "components/tables_lists.scss"; +@import "components/search.scss"; +@import "components/dashboard.scss"; +@import "components/tightform.scss"; +@import "components/gf-form.scss"; +@import "components/sidemenu.scss"; +@import "components/navbar.scss"; +@import "components/gfbox.scss"; +@import "components/pagination.scss"; +@import "components/tabs.scss"; +@import "components/timepicker.scss"; +@import "components/filter-controls.scss"; +@import "components/filter-list.scss"; +@import "components/filter-table.scss"; +@import "components/scrollbar.scss"; +@import "components/old_stuff.scss"; +@import "components/navbar.scss"; +@import "components/popovers.scss"; +@import "components/alerts.scss"; +@import "components/typeahead.scss"; +@import "components/tags.scss"; +@import "components/modals.scss"; +@import "components/dropdown.scss"; +@import "components/color_picker.scss"; +@import "components/tooltip.scss"; +@import "components/buttons.scss"; +@import "components/footer.scss"; +@import "components/infobox.scss"; +@import "components/shortcuts.scss"; +@import "components/query_editor.scss"; +@import "components/navs.scss"; // PAGES -@import "./pages/_login.scss"; -@import "./pages/_playlist.scss"; -@import "./pages/_admin.scss"; -@import "./pages/_alerting.scss"; -@import "./pages/_apps.scss"; -@import "./pages/_signup.scss"; +@import "pages/login.scss"; +@import "pages/playlist.scss"; +@import "pages/admin.scss"; +@import "pages/alerting.scss"; +@import "pages/apps.scss"; +@import "pages/signup.scss"; diff --git a/public/less/_grid-variables.scss b/public/less/_grid-variables.scss new file mode 100644 index 00000000000..a362b11b49a --- /dev/null +++ b/public/less/_grid-variables.scss @@ -0,0 +1,36 @@ + + +// Grid breakpoints +// +// Define the minimum and maximum dimensions at which your layout will change, +// adapting to different screen sizes, for use in media queries. + +$grid-breakpoints: ( + xs: 0, + sm: 544px, + md: 768px, + lg: 992px, + xl: 1200px +) !default; + + +// Grid containers +// +// Define the maximum width of `.container` for different screen sizes. + +$container-max-widths: ( + sm: 576px, + md: 720px, + lg: 940px, + xl: 1140px +) !default; + +// Grid columns +// +// Set the number of columns and specify the width of the gutters. + +$grid-columns: 12 !default; +$grid-gutter-width: 30px !default; + +$enable-flex: false; + diff --git a/public/less/base/_grid.scss b/public/less/base/_grid.scss new file mode 100644 index 00000000000..32cd79f0094 --- /dev/null +++ b/public/less/base/_grid.scss @@ -0,0 +1,32 @@ + +// Container widths +// +// Set the container width, and override it for fixed navbars in media queries. + +.container { + @include make-container(); + @include make-container-max-widths(); +} + +// Fluid container +// +// Utilizes the mixin meant for fixed width containers, but without any defined +// width for fluid, full width layouts. + +.container-fluid { + @include make-container(); +} + +// Row +// +// Rows contain and clear the floats of your columns. + +.row { + @include make-row(); +} + +// Columns +// +// Common styles for small and large grid columns + +@include make-grid-columns(); diff --git a/public/less/mixins/_grid-framework.scss b/public/less/mixins/_grid-framework.scss new file mode 100644 index 00000000000..15d1e6bdf86 --- /dev/null +++ b/public/less/mixins/_grid-framework.scss @@ -0,0 +1,47 @@ +// Framework grid generation +// +// Used only by Bootstrap to generate the correct number of grid classes given +// any value of `$grid-columns`. + +@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) { + $breakpoint-counter: 0; + @each $breakpoint in map-keys($breakpoints) { + $breakpoint-counter: ($breakpoint-counter + 1); + @include media-breakpoint-up($breakpoint, $breakpoints) { + @if $enable-flex { + .col-#{$breakpoint} { + position: relative; + flex-basis: 0; + flex-grow: 1; + max-width: 100%; + min-height: 1px; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); + } + } + + @for $i from 1 through $columns { + .col-#{$breakpoint}-#{$i} { + @include make-col($i, $columns); + } + } + + @each $modifier in (pull, push) { + @for $i from 0 through $columns { + .#{$modifier}-#{$breakpoint}-#{$i} { + @include make-col-modifier($modifier, $i, $columns) + } + } + } + + // `$columns - 1` because offsetting by the width of an entire row isn't possible + @for $i from 0 through ($columns - 1) { + @if $breakpoint-counter != 1 or $i != 0 { // Avoid emitting useless .col-xs-offset-0 + .offset-#{$breakpoint}-#{$i} { + @include make-col-modifier(offset, $i, $columns) + } + } + } + } + } +} diff --git a/public/less/mixins/_grid.scss b/public/less/mixins/_grid.scss new file mode 100644 index 00000000000..6e67f92cd39 --- /dev/null +++ b/public/less/mixins/_grid.scss @@ -0,0 +1,75 @@ +/// Grid system +// +// Generate semantic grid columns with these mixins. + +@mixin make-container($gutter: $grid-gutter-width) { + margin-left: auto; + margin-right: auto; + padding-left: ($gutter / 2); + padding-right: ($gutter / 2); + @if not $enable-flex { + @include clearfix(); + } +} + + +// For each breakpoint, define the maximum width of the container in a media query +@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) { + @each $breakpoint, $container-max-width in $max-widths { + @include media-breakpoint-up($breakpoint, $breakpoints) { + max-width: $container-max-width; + } + } +} + +@mixin make-row($gutter: $grid-gutter-width) { + @if $enable-flex { + display: flex; + flex-wrap: wrap; + } @else { + @include clearfix(); + } + margin-left: ($gutter / -2); + margin-right: ($gutter / -2); +} + +@mixin make-col($size, $columns: $grid-columns) { + position: relative; + min-height: 1px; + padding-right: ($grid-gutter-width / 2); + padding-left: ($grid-gutter-width / 2); + + @if $enable-flex { + flex: 0 0 percentage($size / $columns); + // Add a `max-width` to ensure content within each column does not blow out + // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari + // do not appear to require this. + max-width: percentage($size / $columns); + } @else { + float: left; + width: percentage($size / $columns); + } +} + +@mixin make-col-offset($size, $columns: $grid-columns) { + margin-left: percentage($size / $columns); +} + +@mixin make-col-push($size, $columns: $grid-columns) { + left: if($size > 0, percentage($size / $columns), auto); +} + +@mixin make-col-pull($size, $columns: $grid-columns) { + right: if($size > 0, percentage($size / $columns), auto); +} + +@mixin make-col-modifier($type, $size, $columns) { + // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626) + @if $type == push { + @include make-col-push($size, $columns); + } @else if $type == pull { + @include make-col-pull($size, $columns); + } @else if $type == offset { + @include make-col-offset($size, $columns); + } +} diff --git a/public/less/utils/_flex.scss b/public/less/utils/_flex.scss new file mode 100644 index 00000000000..bcf2c2fa2a5 --- /dev/null +++ b/public/less/utils/_flex.scss @@ -0,0 +1,32 @@ +@if $enable-flex { + @each $breakpoint in map-keys($grid-breakpoints) { + // Flex column reordering + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-first { order: -1; } + .flex-#{$breakpoint}-last { order: 1; } + } + + // Alignment for every item + @include media-breakpoint-up($breakpoint) { + .flex-items-#{$breakpoint}-top { align-items: flex-start; } + .flex-items-#{$breakpoint}-middle { align-items: center; } + .flex-items-#{$breakpoint}-bottom { align-items: flex-end; } + } + + // Alignment per item + @include media-breakpoint-up($breakpoint) { + .flex-#{$breakpoint}-top { align-self: flex-start; } + .flex-#{$breakpoint}-middle { align-self: center; } + .flex-#{$breakpoint}-bottom { align-self: flex-end; } + } + + // Horizontal alignment of item + @include media-breakpoint-up($breakpoint) { + .flex-items-#{$breakpoint}-left { justify-content: flex-start; } + .flex-items-#{$breakpoint}-center { justify-content: center; } + .flex-items-#{$breakpoint}-right { justify-content: flex-end; } + .flex-items-#{$breakpoint}-around { justify-content: space-around; } + .flex-items-#{$breakpoint}-between { justify-content: space-between; } + } + } +} From 9045be0c122a188d10405502c816732791220cb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 18:17:06 +0100 Subject: [PATCH 079/444] ux(sass): rename less folder to sass --- public/sass/.scss-lint.yml | 533 ++++++++++++++++++ public/{less => sass}/_grafana.scss | 0 public/{less => sass}/_grid-variables.scss | 0 public/{less => sass}/_variables.dark.scss | 0 public/{less => sass}/_variables.light.scss | 0 public/{less => sass}/base/_base.scss | 0 public/{less => sass}/base/_code.scss | 0 public/{less => sass}/base/_fonts.scss | 0 public/{less => sass}/base/_forms.scss | 0 public/{less => sass}/base/_grid.scss | 0 public/{less => sass}/base/_normalize.scss | 0 public/{less => sass}/base/_type.scss | 0 public/{less => sass}/bootstrap/grid.scss | 0 .../bootstrap/responsive-1200px-min.scss | 0 .../bootstrap/responsive-767px-max.scss | 0 .../bootstrap/responsive-768px-979px.scss | 0 .../bootstrap/responsive-utilities.scss | 0 .../{less => sass}/bootstrap/responsive.scss | 0 public/{less => sass}/components/_alerts.scss | 0 .../{less => sass}/components/_buttons.scss | 0 .../components/_color_picker.scss | 0 .../{less => sass}/components/_dashboard.scss | 0 .../{less => sass}/components/_dropdown.scss | 0 .../components/_filter-controls.scss | 0 .../components/_filter-list.scss | 0 .../components/_filter-table.scss | 0 public/{less => sass}/components/_footer.scss | 0 .../{less => sass}/components/_gf-form.scss | 0 public/{less => sass}/components/_gfbox.scss | 0 .../{less => sass}/components/_infobox.scss | 0 public/{less => sass}/components/_modals.scss | 0 public/{less => sass}/components/_navbar.scss | 0 public/{less => sass}/components/_navs.scss | 0 .../{less => sass}/components/_old_stuff.scss | 0 .../components/_pagination.scss | 0 .../components/_panel_dashlist.scss | 0 .../components/_panel_graph.scss | 0 .../components/_panel_singlestat.scss | 0 .../components/_panel_table.scss | 0 .../{less => sass}/components/_popovers.scss | 0 .../components/_query_editor.scss | 0 .../{less => sass}/components/_scrollbar.scss | 0 public/{less => sass}/components/_search.scss | 0 .../{less => sass}/components/_shortcuts.scss | 0 .../{less => sass}/components/_sidemenu.scss | 0 .../{less => sass}/components/_submenu.scss | 0 .../components/_tables_lists.scss | 0 public/{less => sass}/components/_tabs.scss | 0 public/{less => sass}/components/_tags.scss | 0 .../{less => sass}/components/_tagsinput.scss | 0 .../{less => sass}/components/_tightform.scss | 0 .../components/_timepicker.scss | 0 .../{less => sass}/components/_tooltip.scss | 0 .../{less => sass}/components/_typeahead.scss | 0 public/{less => sass}/grafana-responsive.scss | 0 public/{less => sass}/grafana.dark.scss | 0 public/{less => sass}/grafana.light.scss | 0 public/{less => sass}/layout/_page.scss | 0 .../{less => sass}/mixins/_breakpoints.scss | 0 public/{less => sass}/mixins/_buttons.scss | 0 .../mixins/_grid-framework.scss | 0 public/{less => sass}/mixins/_grid.scss | 0 public/{less => sass}/mixins/_mixins.scss | 0 public/{less => sass}/pages/_admin.scss | 0 public/{less => sass}/pages/_alerting.scss | 0 public/{less => sass}/pages/_apps.scss | 0 public/{less => sass}/pages/_login.scss | 0 public/{less => sass}/pages/_playlist.scss | 0 public/{less => sass}/pages/_signup.scss | 0 public/{less => sass}/utils/_angular.scss | 0 public/{less => sass}/utils/_flex.scss | 0 public/{less => sass}/utils/_utils.scss | 0 public/{less => sass}/utils/_validation.scss | 0 tasks/options/sass.js | 4 +- tasks/options/scsslint.js | 12 + 75 files changed, 547 insertions(+), 2 deletions(-) create mode 100644 public/sass/.scss-lint.yml rename public/{less => sass}/_grafana.scss (100%) rename public/{less => sass}/_grid-variables.scss (100%) rename public/{less => sass}/_variables.dark.scss (100%) rename public/{less => sass}/_variables.light.scss (100%) rename public/{less => sass}/base/_base.scss (100%) rename public/{less => sass}/base/_code.scss (100%) rename public/{less => sass}/base/_fonts.scss (100%) rename public/{less => sass}/base/_forms.scss (100%) rename public/{less => sass}/base/_grid.scss (100%) rename public/{less => sass}/base/_normalize.scss (100%) rename public/{less => sass}/base/_type.scss (100%) rename public/{less => sass}/bootstrap/grid.scss (100%) rename public/{less => sass}/bootstrap/responsive-1200px-min.scss (100%) rename public/{less => sass}/bootstrap/responsive-767px-max.scss (100%) rename public/{less => sass}/bootstrap/responsive-768px-979px.scss (100%) rename public/{less => sass}/bootstrap/responsive-utilities.scss (100%) rename public/{less => sass}/bootstrap/responsive.scss (100%) rename public/{less => sass}/components/_alerts.scss (100%) rename public/{less => sass}/components/_buttons.scss (100%) rename public/{less => sass}/components/_color_picker.scss (100%) rename public/{less => sass}/components/_dashboard.scss (100%) rename public/{less => sass}/components/_dropdown.scss (100%) rename public/{less => sass}/components/_filter-controls.scss (100%) rename public/{less => sass}/components/_filter-list.scss (100%) rename public/{less => sass}/components/_filter-table.scss (100%) rename public/{less => sass}/components/_footer.scss (100%) rename public/{less => sass}/components/_gf-form.scss (100%) rename public/{less => sass}/components/_gfbox.scss (100%) rename public/{less => sass}/components/_infobox.scss (100%) rename public/{less => sass}/components/_modals.scss (100%) rename public/{less => sass}/components/_navbar.scss (100%) rename public/{less => sass}/components/_navs.scss (100%) rename public/{less => sass}/components/_old_stuff.scss (100%) rename public/{less => sass}/components/_pagination.scss (100%) rename public/{less => sass}/components/_panel_dashlist.scss (100%) rename public/{less => sass}/components/_panel_graph.scss (100%) rename public/{less => sass}/components/_panel_singlestat.scss (100%) rename public/{less => sass}/components/_panel_table.scss (100%) rename public/{less => sass}/components/_popovers.scss (100%) rename public/{less => sass}/components/_query_editor.scss (100%) rename public/{less => sass}/components/_scrollbar.scss (100%) rename public/{less => sass}/components/_search.scss (100%) rename public/{less => sass}/components/_shortcuts.scss (100%) rename public/{less => sass}/components/_sidemenu.scss (100%) rename public/{less => sass}/components/_submenu.scss (100%) rename public/{less => sass}/components/_tables_lists.scss (100%) rename public/{less => sass}/components/_tabs.scss (100%) rename public/{less => sass}/components/_tags.scss (100%) rename public/{less => sass}/components/_tagsinput.scss (100%) rename public/{less => sass}/components/_tightform.scss (100%) rename public/{less => sass}/components/_timepicker.scss (100%) rename public/{less => sass}/components/_tooltip.scss (100%) rename public/{less => sass}/components/_typeahead.scss (100%) rename public/{less => sass}/grafana-responsive.scss (100%) rename public/{less => sass}/grafana.dark.scss (100%) rename public/{less => sass}/grafana.light.scss (100%) rename public/{less => sass}/layout/_page.scss (100%) rename public/{less => sass}/mixins/_breakpoints.scss (100%) rename public/{less => sass}/mixins/_buttons.scss (100%) rename public/{less => sass}/mixins/_grid-framework.scss (100%) rename public/{less => sass}/mixins/_grid.scss (100%) rename public/{less => sass}/mixins/_mixins.scss (100%) rename public/{less => sass}/pages/_admin.scss (100%) rename public/{less => sass}/pages/_alerting.scss (100%) rename public/{less => sass}/pages/_apps.scss (100%) rename public/{less => sass}/pages/_login.scss (100%) rename public/{less => sass}/pages/_playlist.scss (100%) rename public/{less => sass}/pages/_signup.scss (100%) rename public/{less => sass}/utils/_angular.scss (100%) rename public/{less => sass}/utils/_flex.scss (100%) rename public/{less => sass}/utils/_utils.scss (100%) rename public/{less => sass}/utils/_validation.scss (100%) create mode 100644 tasks/options/scsslint.js diff --git a/public/sass/.scss-lint.yml b/public/sass/.scss-lint.yml new file mode 100644 index 00000000000..925f3c4b0f1 --- /dev/null +++ b/public/sass/.scss-lint.yml @@ -0,0 +1,533 @@ +# Default application configuration that all configurations inherit from. +scss_files: + - "**/*.scss" + +plugin_directories: ['.scss-linters'] + +# List of gem names to load custom linters from (make sure they are already +# installed) +plugin_gems: [] + +# Default severity of all linters. +severity: warning + +linters: + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + + BemDepth: + enabled: false + max_elements: 1 + + BorderZero: + enabled: true + convention: zero # or `none` + + ChainedClasses: + enabled: false + + ColorKeyword: + enabled: true + + ColorVariable: + enabled: false + + Comment: + enabled: true + exclude: + - _normalize.scss + - bootstrap.scss + style: silent + + DebugStatement: + enabled: true + + DeclarationOrder: + enabled: false + + DisableLinterReason: + enabled: false + + DuplicateProperty: + enabled: true + + ElsePlacement: + enabled: true + style: same_line # or 'new_line' + + EmptyLineBetweenBlocks: + enabled: false + ignore_single_line_blocks: true + + EmptyRule: + enabled: true + + ExtendDirective: + enabled: false + + FinalNewline: + enabled: true + present: true + + HexLength: + enabled: true + style: short # or 'long' + + HexNotation: + enabled: true + style: lowercase # or 'uppercase' + + HexValidation: + enabled: true + + IdSelector: + enabled: true + + ImportantRule: + enabled: true + + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + + Indentation: + enabled: true + allow_non_nested_indentation: false + character: space # or 'tab' + width: 2 + + LeadingZero: + enabled: true + style: exclude_zero # or 'include_zero' + + MergeableSelector: + enabled: false + force_nesting: true + + NameFormat: + enabled: true + allow_leading_underscore: true + convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern + + NestingDepth: + enabled: true + max_depth: 4 + ignore_parent_selectors: false + + PlaceholderInExtend: + enabled: false + + PropertyCount: + enabled: false + include_nested: false + max_properties: 10 + + PropertySortOrder: + enabled: true + ignore_unspecified: false + min_properties: 2 + separate_groups: false + order: + - position + - top + - right + - bottom + - left + - z-index + - -webkit-box-sizing + - -moz-box-sizing + - box-sizing + - display + - flex + - flex-align + - flex-basis + - flex-direction + - flex-flow + - flex-grow + - flex-order + - flex-pack + - float + - width + - min-width + - max-width + - height + - min-height + - max-height + - padding + - padding-top + - padding-right + - padding-bottom + - padding-left + - margin + - margin-top + - margin-right + - margin-bottom + - margin-left + - overflow + - overflow-x + - overflow-y + - -webkit-overflow-scrolling + - -ms-overflow-x + - -ms-overflow-y + - -ms-overflow-style + - clip + - clear + - font + - font-family + - font-size + - font-style + - font-weight + - font-variant + - font-size-adjust + - font-stretch + - font-effect + - font-emphasize + - font-emphasize-position + - font-emphasize-style + - font-smooth + - -webkit-hyphens + - -moz-hyphens + - hyphens + - line-height + - color + - text-align + - -webkit-text-align-last + - -moz-text-align-last + - -ms-text-align-last + - text-align-last + - text-emphasis + - text-emphasis-color + - text-emphasis-style + - text-emphasis-position + - text-decoration + - text-indent + - text-justify + - text-outline + - -ms-text-overflow + - text-overflow + - text-overflow-ellipsis + - text-overflow-mode + - text-shadow + - text-transform + - text-wrap + - -webkit-text-size-adjust + - -ms-text-size-adjust + - letter-spacing + - -ms-word-break + - word-break + - word-spacing + - -ms-word-wrap + - word-wrap + - -moz-tab-size + - -o-tab-size + - tab-size + - white-space + - vertical-align + - list-style + - list-style-position + - list-style-type + - list-style-image + - pointer-events + - -ms-touch-action + - touch-action + - cursor + - visibility + - zoom + - table-layout + - empty-cells + - caption-side + - border-spacing + - border-collapse + - content + - quotes + - counter-reset + - counter-increment + - resize + - -webkit-user-select + - -moz-user-select + - -ms-user-select + - -o-user-select + - user-select + - nav-index + - nav-up + - nav-right + - nav-down + - nav-left + - background + - background-color + - background-image + - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient + - filter:progid:DXImageTransform.Microsoft.gradient + - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader + - filter + - background-repeat + - background-attachment + - background-position + - background-position-x + - background-position-y + - -webkit-background-clip + - -moz-background-clip + - background-clip + - background-origin + - -webkit-background-size + - -moz-background-size + - -o-background-size + - background-size + - border + - border-color + - border-style + - border-width + - border-top + - border-top-color + - border-top-style + - border-top-width + - border-right + - border-right-color + - border-right-style + - border-right-width + - border-bottom + - border-bottom-color + - border-bottom-style + - border-bottom-width + - border-left + - border-left-color + - border-left-style + - border-left-width + - border-radius + - border-top-left-radius + - border-top-right-radius + - border-bottom-right-radius + - border-bottom-left-radius + - -webkit-border-image + - -moz-border-image + - -o-border-image + - border-image + - -webkit-border-image-source + - -moz-border-image-source + - -o-border-image-source + - border-image-source + - -webkit-border-image-slice + - -moz-border-image-slice + - -o-border-image-slice + - border-image-slice + - -webkit-border-image-width + - -moz-border-image-width + - -o-border-image-width + - border-image-width + - -webkit-border-image-outset + - -moz-border-image-outset + - -o-border-image-outset + - border-image-outset + - -webkit-border-image-repeat + - -moz-border-image-repeat + - -o-border-image-repeat + - border-image-repeat + - outline + - outline-width + - outline-style + - outline-color + - outline-offset + - -webkit-box-shadow + - -moz-box-shadow + - box-shadow + - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity + - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha + - opacity + - -ms-interpolation-mode + - -webkit-transition + - -moz-transition + - -ms-transition + - -o-transition + - transition + - -webkit-transition-delay + - -moz-transition-delay + - -ms-transition-delay + - -o-transition-delay + - transition-delay + - -webkit-transition-timing-function + - -moz-transition-timing-function + - -ms-transition-timing-function + - -o-transition-timing-function + - transition-timing-function + - -webkit-transition-duration + - -moz-transition-duration + - -ms-transition-duration + - -o-transition-duration + - transition-duration + - -webkit-transition-property + - -moz-transition-property + - -ms-transition-property + - -o-transition-property + - transition-property + - -webkit-transform + - -moz-transform + - -ms-transform + - -o-transform + - transform + - -webkit-transform-origin + - -moz-transform-origin + - -ms-transform-origin + - -o-transform-origin + - transform-origin + - -webkit-animation + - -moz-animation + - -ms-animation + - -o-animation + - animation + - -webkit-animation-name + - -moz-animation-name + - -ms-animation-name + - -o-animation-name + - animation-name + - -webkit-animation-duration + - -moz-animation-duration + - -ms-animation-duration + - -o-animation-duration + - animation-duration + - -webkit-animation-play-state + - -moz-animation-play-state + - -ms-animation-play-state + - -o-animation-play-state + - animation-play-state + - -webkit-animation-timing-function + - -moz-animation-timing-function + - -ms-animation-timing-function + - -o-animation-timing-function + - animation-timing-function + - -webkit-animation-delay + - -moz-animation-delay + - -ms-animation-delay + - -o-animation-delay + - animation-delay + - -webkit-animation-iteration-count + - -moz-animation-iteration-count + - -ms-animation-iteration-count + - -o-animation-iteration-count + - animation-iteration-count + - -webkit-animation-direction + - -moz-animation-direction + - -ms-animation-direction + - -o-animation-direction + + + PropertySpelling: + enabled: true + extra_properties: [] + disabled_properties: [] + + PropertyUnits: + enabled: true + global: [ + 'ch', 'em', 'ex', 'rem', # Font-relative lengths + 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths + 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths + 'deg', 'grad', 'rad', 'turn', # Angle + 'ms', 's', # Duration + 'Hz', 'kHz', # Frequency + 'dpi', 'dpcm', 'dppx', # Resolution + '%'] # Other + properties: {} + + PseudoElement: + enabled: true + + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + + SelectorDepth: + enabled: true + max_depth: 4 + + SelectorFormat: + enabled: false + convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern + + Shorthand: + enabled: true + allowed_shorthands: [1, 2, 3] + + SingleLinePerProperty: + enabled: false + allow_single_line_rule_sets: true + + SingleLinePerSelector: + enabled: false + + SpaceAfterComma: + enabled: false + style: one_space # or 'no_space', or 'at_least_one_space' + + SpaceAfterPropertyColon: + enabled: true + style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned' + + SpaceAfterPropertyName: + enabled: true + + SpaceAfterVariableName: + enabled: true + + SpaceAroundOperator: + enabled: true + style: one_space # or 'at_least_one_space', or 'no_space' + + SpaceBeforeBrace: + enabled: true + style: space # or 'new_line' + allow_single_line_padding: false + + SpaceBetweenParens: + enabled: true + spaces: 0 + + StringQuotes: + enabled: true + style: double_quotes # or double_quotes + + TrailingSemicolon: + enabled: true + + TrailingWhitespace: + enabled: true + + TrailingZero: + enabled: false + + TransitionAll: + enabled: false + + UnnecessaryMantissa: + enabled: true + + UnnecessaryParentReference: + enabled: true + + UrlFormat: + enabled: true + + UrlQuotes: + enabled: true + + VariableForProperty: + enabled: false + properties: [] + + VendorPrefix: + enabled: true + identifier_list: base + additional_identifiers: [] + excluded_identifiers: [] + exclude: + - _normalize.scss + + ZeroUnit: + enabled: true + + Compass::*: + enabled: false diff --git a/public/less/_grafana.scss b/public/sass/_grafana.scss similarity index 100% rename from public/less/_grafana.scss rename to public/sass/_grafana.scss diff --git a/public/less/_grid-variables.scss b/public/sass/_grid-variables.scss similarity index 100% rename from public/less/_grid-variables.scss rename to public/sass/_grid-variables.scss diff --git a/public/less/_variables.dark.scss b/public/sass/_variables.dark.scss similarity index 100% rename from public/less/_variables.dark.scss rename to public/sass/_variables.dark.scss diff --git a/public/less/_variables.light.scss b/public/sass/_variables.light.scss similarity index 100% rename from public/less/_variables.light.scss rename to public/sass/_variables.light.scss diff --git a/public/less/base/_base.scss b/public/sass/base/_base.scss similarity index 100% rename from public/less/base/_base.scss rename to public/sass/base/_base.scss diff --git a/public/less/base/_code.scss b/public/sass/base/_code.scss similarity index 100% rename from public/less/base/_code.scss rename to public/sass/base/_code.scss diff --git a/public/less/base/_fonts.scss b/public/sass/base/_fonts.scss similarity index 100% rename from public/less/base/_fonts.scss rename to public/sass/base/_fonts.scss diff --git a/public/less/base/_forms.scss b/public/sass/base/_forms.scss similarity index 100% rename from public/less/base/_forms.scss rename to public/sass/base/_forms.scss diff --git a/public/less/base/_grid.scss b/public/sass/base/_grid.scss similarity index 100% rename from public/less/base/_grid.scss rename to public/sass/base/_grid.scss diff --git a/public/less/base/_normalize.scss b/public/sass/base/_normalize.scss similarity index 100% rename from public/less/base/_normalize.scss rename to public/sass/base/_normalize.scss diff --git a/public/less/base/_type.scss b/public/sass/base/_type.scss similarity index 100% rename from public/less/base/_type.scss rename to public/sass/base/_type.scss diff --git a/public/less/bootstrap/grid.scss b/public/sass/bootstrap/grid.scss similarity index 100% rename from public/less/bootstrap/grid.scss rename to public/sass/bootstrap/grid.scss diff --git a/public/less/bootstrap/responsive-1200px-min.scss b/public/sass/bootstrap/responsive-1200px-min.scss similarity index 100% rename from public/less/bootstrap/responsive-1200px-min.scss rename to public/sass/bootstrap/responsive-1200px-min.scss diff --git a/public/less/bootstrap/responsive-767px-max.scss b/public/sass/bootstrap/responsive-767px-max.scss similarity index 100% rename from public/less/bootstrap/responsive-767px-max.scss rename to public/sass/bootstrap/responsive-767px-max.scss diff --git a/public/less/bootstrap/responsive-768px-979px.scss b/public/sass/bootstrap/responsive-768px-979px.scss similarity index 100% rename from public/less/bootstrap/responsive-768px-979px.scss rename to public/sass/bootstrap/responsive-768px-979px.scss diff --git a/public/less/bootstrap/responsive-utilities.scss b/public/sass/bootstrap/responsive-utilities.scss similarity index 100% rename from public/less/bootstrap/responsive-utilities.scss rename to public/sass/bootstrap/responsive-utilities.scss diff --git a/public/less/bootstrap/responsive.scss b/public/sass/bootstrap/responsive.scss similarity index 100% rename from public/less/bootstrap/responsive.scss rename to public/sass/bootstrap/responsive.scss diff --git a/public/less/components/_alerts.scss b/public/sass/components/_alerts.scss similarity index 100% rename from public/less/components/_alerts.scss rename to public/sass/components/_alerts.scss diff --git a/public/less/components/_buttons.scss b/public/sass/components/_buttons.scss similarity index 100% rename from public/less/components/_buttons.scss rename to public/sass/components/_buttons.scss diff --git a/public/less/components/_color_picker.scss b/public/sass/components/_color_picker.scss similarity index 100% rename from public/less/components/_color_picker.scss rename to public/sass/components/_color_picker.scss diff --git a/public/less/components/_dashboard.scss b/public/sass/components/_dashboard.scss similarity index 100% rename from public/less/components/_dashboard.scss rename to public/sass/components/_dashboard.scss diff --git a/public/less/components/_dropdown.scss b/public/sass/components/_dropdown.scss similarity index 100% rename from public/less/components/_dropdown.scss rename to public/sass/components/_dropdown.scss diff --git a/public/less/components/_filter-controls.scss b/public/sass/components/_filter-controls.scss similarity index 100% rename from public/less/components/_filter-controls.scss rename to public/sass/components/_filter-controls.scss diff --git a/public/less/components/_filter-list.scss b/public/sass/components/_filter-list.scss similarity index 100% rename from public/less/components/_filter-list.scss rename to public/sass/components/_filter-list.scss diff --git a/public/less/components/_filter-table.scss b/public/sass/components/_filter-table.scss similarity index 100% rename from public/less/components/_filter-table.scss rename to public/sass/components/_filter-table.scss diff --git a/public/less/components/_footer.scss b/public/sass/components/_footer.scss similarity index 100% rename from public/less/components/_footer.scss rename to public/sass/components/_footer.scss diff --git a/public/less/components/_gf-form.scss b/public/sass/components/_gf-form.scss similarity index 100% rename from public/less/components/_gf-form.scss rename to public/sass/components/_gf-form.scss diff --git a/public/less/components/_gfbox.scss b/public/sass/components/_gfbox.scss similarity index 100% rename from public/less/components/_gfbox.scss rename to public/sass/components/_gfbox.scss diff --git a/public/less/components/_infobox.scss b/public/sass/components/_infobox.scss similarity index 100% rename from public/less/components/_infobox.scss rename to public/sass/components/_infobox.scss diff --git a/public/less/components/_modals.scss b/public/sass/components/_modals.scss similarity index 100% rename from public/less/components/_modals.scss rename to public/sass/components/_modals.scss diff --git a/public/less/components/_navbar.scss b/public/sass/components/_navbar.scss similarity index 100% rename from public/less/components/_navbar.scss rename to public/sass/components/_navbar.scss diff --git a/public/less/components/_navs.scss b/public/sass/components/_navs.scss similarity index 100% rename from public/less/components/_navs.scss rename to public/sass/components/_navs.scss diff --git a/public/less/components/_old_stuff.scss b/public/sass/components/_old_stuff.scss similarity index 100% rename from public/less/components/_old_stuff.scss rename to public/sass/components/_old_stuff.scss diff --git a/public/less/components/_pagination.scss b/public/sass/components/_pagination.scss similarity index 100% rename from public/less/components/_pagination.scss rename to public/sass/components/_pagination.scss diff --git a/public/less/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss similarity index 100% rename from public/less/components/_panel_dashlist.scss rename to public/sass/components/_panel_dashlist.scss diff --git a/public/less/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss similarity index 100% rename from public/less/components/_panel_graph.scss rename to public/sass/components/_panel_graph.scss diff --git a/public/less/components/_panel_singlestat.scss b/public/sass/components/_panel_singlestat.scss similarity index 100% rename from public/less/components/_panel_singlestat.scss rename to public/sass/components/_panel_singlestat.scss diff --git a/public/less/components/_panel_table.scss b/public/sass/components/_panel_table.scss similarity index 100% rename from public/less/components/_panel_table.scss rename to public/sass/components/_panel_table.scss diff --git a/public/less/components/_popovers.scss b/public/sass/components/_popovers.scss similarity index 100% rename from public/less/components/_popovers.scss rename to public/sass/components/_popovers.scss diff --git a/public/less/components/_query_editor.scss b/public/sass/components/_query_editor.scss similarity index 100% rename from public/less/components/_query_editor.scss rename to public/sass/components/_query_editor.scss diff --git a/public/less/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss similarity index 100% rename from public/less/components/_scrollbar.scss rename to public/sass/components/_scrollbar.scss diff --git a/public/less/components/_search.scss b/public/sass/components/_search.scss similarity index 100% rename from public/less/components/_search.scss rename to public/sass/components/_search.scss diff --git a/public/less/components/_shortcuts.scss b/public/sass/components/_shortcuts.scss similarity index 100% rename from public/less/components/_shortcuts.scss rename to public/sass/components/_shortcuts.scss diff --git a/public/less/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss similarity index 100% rename from public/less/components/_sidemenu.scss rename to public/sass/components/_sidemenu.scss diff --git a/public/less/components/_submenu.scss b/public/sass/components/_submenu.scss similarity index 100% rename from public/less/components/_submenu.scss rename to public/sass/components/_submenu.scss diff --git a/public/less/components/_tables_lists.scss b/public/sass/components/_tables_lists.scss similarity index 100% rename from public/less/components/_tables_lists.scss rename to public/sass/components/_tables_lists.scss diff --git a/public/less/components/_tabs.scss b/public/sass/components/_tabs.scss similarity index 100% rename from public/less/components/_tabs.scss rename to public/sass/components/_tabs.scss diff --git a/public/less/components/_tags.scss b/public/sass/components/_tags.scss similarity index 100% rename from public/less/components/_tags.scss rename to public/sass/components/_tags.scss diff --git a/public/less/components/_tagsinput.scss b/public/sass/components/_tagsinput.scss similarity index 100% rename from public/less/components/_tagsinput.scss rename to public/sass/components/_tagsinput.scss diff --git a/public/less/components/_tightform.scss b/public/sass/components/_tightform.scss similarity index 100% rename from public/less/components/_tightform.scss rename to public/sass/components/_tightform.scss diff --git a/public/less/components/_timepicker.scss b/public/sass/components/_timepicker.scss similarity index 100% rename from public/less/components/_timepicker.scss rename to public/sass/components/_timepicker.scss diff --git a/public/less/components/_tooltip.scss b/public/sass/components/_tooltip.scss similarity index 100% rename from public/less/components/_tooltip.scss rename to public/sass/components/_tooltip.scss diff --git a/public/less/components/_typeahead.scss b/public/sass/components/_typeahead.scss similarity index 100% rename from public/less/components/_typeahead.scss rename to public/sass/components/_typeahead.scss diff --git a/public/less/grafana-responsive.scss b/public/sass/grafana-responsive.scss similarity index 100% rename from public/less/grafana-responsive.scss rename to public/sass/grafana-responsive.scss diff --git a/public/less/grafana.dark.scss b/public/sass/grafana.dark.scss similarity index 100% rename from public/less/grafana.dark.scss rename to public/sass/grafana.dark.scss diff --git a/public/less/grafana.light.scss b/public/sass/grafana.light.scss similarity index 100% rename from public/less/grafana.light.scss rename to public/sass/grafana.light.scss diff --git a/public/less/layout/_page.scss b/public/sass/layout/_page.scss similarity index 100% rename from public/less/layout/_page.scss rename to public/sass/layout/_page.scss diff --git a/public/less/mixins/_breakpoints.scss b/public/sass/mixins/_breakpoints.scss similarity index 100% rename from public/less/mixins/_breakpoints.scss rename to public/sass/mixins/_breakpoints.scss diff --git a/public/less/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss similarity index 100% rename from public/less/mixins/_buttons.scss rename to public/sass/mixins/_buttons.scss diff --git a/public/less/mixins/_grid-framework.scss b/public/sass/mixins/_grid-framework.scss similarity index 100% rename from public/less/mixins/_grid-framework.scss rename to public/sass/mixins/_grid-framework.scss diff --git a/public/less/mixins/_grid.scss b/public/sass/mixins/_grid.scss similarity index 100% rename from public/less/mixins/_grid.scss rename to public/sass/mixins/_grid.scss diff --git a/public/less/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss similarity index 100% rename from public/less/mixins/_mixins.scss rename to public/sass/mixins/_mixins.scss diff --git a/public/less/pages/_admin.scss b/public/sass/pages/_admin.scss similarity index 100% rename from public/less/pages/_admin.scss rename to public/sass/pages/_admin.scss diff --git a/public/less/pages/_alerting.scss b/public/sass/pages/_alerting.scss similarity index 100% rename from public/less/pages/_alerting.scss rename to public/sass/pages/_alerting.scss diff --git a/public/less/pages/_apps.scss b/public/sass/pages/_apps.scss similarity index 100% rename from public/less/pages/_apps.scss rename to public/sass/pages/_apps.scss diff --git a/public/less/pages/_login.scss b/public/sass/pages/_login.scss similarity index 100% rename from public/less/pages/_login.scss rename to public/sass/pages/_login.scss diff --git a/public/less/pages/_playlist.scss b/public/sass/pages/_playlist.scss similarity index 100% rename from public/less/pages/_playlist.scss rename to public/sass/pages/_playlist.scss diff --git a/public/less/pages/_signup.scss b/public/sass/pages/_signup.scss similarity index 100% rename from public/less/pages/_signup.scss rename to public/sass/pages/_signup.scss diff --git a/public/less/utils/_angular.scss b/public/sass/utils/_angular.scss similarity index 100% rename from public/less/utils/_angular.scss rename to public/sass/utils/_angular.scss diff --git a/public/less/utils/_flex.scss b/public/sass/utils/_flex.scss similarity index 100% rename from public/less/utils/_flex.scss rename to public/sass/utils/_flex.scss diff --git a/public/less/utils/_utils.scss b/public/sass/utils/_utils.scss similarity index 100% rename from public/less/utils/_utils.scss rename to public/sass/utils/_utils.scss diff --git a/public/less/utils/_validation.scss b/public/sass/utils/_validation.scss similarity index 100% rename from public/less/utils/_validation.scss rename to public/sass/utils/_validation.scss diff --git a/tasks/options/sass.js b/tasks/options/sass.js index 38e72f28a98..f96970740a0 100644 --- a/tasks/options/sass.js +++ b/tasks/options/sass.js @@ -4,8 +4,8 @@ module.exports = function(config) { src:{ options: {}, files: { - "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/less/grafana.dark.scss", - "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/less/grafana.light.scss", + "<%= genDir %>/css/grafana.dark.css": "<%= srcDir %>/sass/grafana.dark.scss", + "<%= genDir %>/css/grafana.light.css": "<%= srcDir %>/sass/grafana.light.scss", } } }; diff --git a/tasks/options/scsslint.js b/tasks/options/scsslint.js new file mode 100644 index 00000000000..86e2d8555ed --- /dev/null +++ b/tasks/options/scsslint.js @@ -0,0 +1,12 @@ +module.exports = function(config) { + return { + options: { + bundleExec: true, + config: 'public/sass/.scss-lint.yml', + reporterOutput: null + }, + core: { + src: ['public/sass/**/*.scss', '!public/sass/base/_normalize.scss'] + } + }; +}; From ea9ac0d2d2947410b81499212a2fbfb83cc58d6f Mon Sep 17 00:00:00 2001 From: bergquist Date: Mon, 15 Feb 2016 18:32:36 +0100 Subject: [PATCH 080/444] chore(cli): improve unittests --- .../commands/commandstest/fake_ioutil.go | 4 +- pkg/cmd/grafana-cli/commands/ls_command.go | 17 +-- .../grafana-cli/commands/ls_command_test.go | 103 +++++++++++++----- pkg/cmd/grafana-cli/services/io_util.go | 4 +- 4 files changed, 82 insertions(+), 46 deletions(-) diff --git a/pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go b/pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go index e6715a5ea77..6c8f6bdb57c 100644 --- a/pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go +++ b/pkg/cmd/grafana-cli/commands/commandstest/fake_ioutil.go @@ -11,7 +11,7 @@ type FakeIoUtil struct { } func (util *FakeIoUtil) Stat(path string) (os.FileInfo, error) { - return FakeFileInfo{IsDirectory: util.FakeIsDirectory}, nil + return &FakeFileInfo{IsDirectory: util.FakeIsDirectory}, nil } func (util *FakeIoUtil) RemoveAll(path string) error { @@ -30,7 +30,7 @@ type FakeFileInfo struct { IsDirectory bool } -func (ffi FakeFileInfo) IsDir() bool { +func (ffi *FakeFileInfo) IsDir() bool { return ffi.IsDirectory } diff --git a/pkg/cmd/grafana-cli/commands/ls_command.go b/pkg/cmd/grafana-cli/commands/ls_command.go index b12213799cc..f863bc4b72b 100644 --- a/pkg/cmd/grafana-cli/commands/ls_command.go +++ b/pkg/cmd/grafana-cli/commands/ls_command.go @@ -7,22 +7,15 @@ import ( s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" ) -var getPlugins func(path string) []m.InstalledPlugin +var ls_getPlugins func(path string) []m.InstalledPlugin = s.GetLocalPlugins -var GetStat m.IoUtil - -func init() { - getPlugins = s.GetLocalPlugins - GetStat = s.IoUtil -} - -func validateCommand(pluginDir string) error { +var validateLsCommmand = func(pluginDir string) error { if pluginDir == "" { return errors.New("missing path flag") } log.Info("plugindir: " + pluginDir + "\n") - pluginDirInfo, err := GetStat.Stat(pluginDir) + pluginDirInfo, err := s.IoHelper.Stat(pluginDir) if err != nil { return errors.New("missing path flag") @@ -37,11 +30,11 @@ func validateCommand(pluginDir string) error { func lsCommand(c CommandLine) error { pluginDir := c.GlobalString("path") - if err := validateCommand(pluginDir); err != nil { + if err := validateLsCommmand(pluginDir); err != nil { return err } - for _, plugin := range getPlugins(pluginDir) { + for _, plugin := range ls_getPlugins(pluginDir) { log.Infof("plugin: %s @ %s \n", plugin.Name, plugin.Info.Version) } diff --git a/pkg/cmd/grafana-cli/commands/ls_command_test.go b/pkg/cmd/grafana-cli/commands/ls_command_test.go index 55553c4fd99..fa49375234d 100644 --- a/pkg/cmd/grafana-cli/commands/ls_command_test.go +++ b/pkg/cmd/grafana-cli/commands/ls_command_test.go @@ -1,47 +1,90 @@ package commands import ( - "testing" - + "errors" "github.com/grafana/grafana/pkg/cmd/grafana-cli/commands/commandstest" s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" . "github.com/smartystreets/goconvey/convey" + "testing" ) func TestMissingPath(t *testing.T) { - Convey("Missing path", t, func() { - commandLine := &commandstest.FakeCommandLine{ - CliArgs: []string{"ls"}, - GlobalFlags: &commandstest.FakeFlagger{ - Data: map[string]interface{}{ - "path": "", - }, - }, - } - s.IoHelper = &commandstest.FakeIoUtil{} + var org = validateLsCommmand - Convey("should return error", func() { - err := lsCommand(commandLine) - So(err, ShouldNotBeNil) + Convey("ls command", t, func() { + validateLsCommmand = org + + Convey("Missing path", func() { + commandLine := &commandstest.FakeCommandLine{ + CliArgs: []string{"ls"}, + GlobalFlags: &commandstest.FakeFlagger{ + Data: map[string]interface{}{ + "path": "", + }, + }, + } + s.IoHelper = &commandstest.FakeIoUtil{} + + Convey("should return error", func() { + err := lsCommand(commandLine) + So(err, ShouldNotBeNil) + }) }) - }) - Convey("Path is not a directory", t, func() { - commandLine := &commandstest.FakeCommandLine{ - CliArgs: []string{"ls"}, - GlobalFlags: &commandstest.FakeFlagger{ - Data: map[string]interface{}{ - "path": "/var/lib/grafana/plugins", + Convey("Path is not a directory", func() { + commandLine := &commandstest.FakeCommandLine{ + CliArgs: []string{"ls"}, + GlobalFlags: &commandstest.FakeFlagger{ + Data: map[string]interface{}{ + "path": "/var/lib/grafana/plugins", + }, }, - }, - } - GetStat = &commandstest.FakeIoUtil{ - FakeIsDirectory: false, - } + } - Convey("should return error", func() { - err := lsCommand(commandLine) - So(err, ShouldNotBeNil) + s.IoHelper = &commandstest.FakeIoUtil{ + FakeIsDirectory: false, + } + + Convey("should return error", func() { + err := lsCommand(commandLine) + So(err, ShouldNotBeNil) + }) + }) + + Convey("can override validateLsCommand", func() { + commandLine := &commandstest.FakeCommandLine{ + CliArgs: []string{"ls"}, + GlobalFlags: &commandstest.FakeFlagger{ + Data: map[string]interface{}{ + "path": "/var/lib/grafana/plugins", + }, + }, + } + + validateLsCommmand = func(pluginDir string) error { + return errors.New("dummie error") + } + + Convey("should return error", func() { + err := lsCommand(commandLine) + So(err.Error(), ShouldEqual, "dummie error") + }) + }) + + Convey("Validate that validateLsCommand is reset", func() { + commandLine := &commandstest.FakeCommandLine{ + CliArgs: []string{"ls"}, + GlobalFlags: &commandstest.FakeFlagger{ + Data: map[string]interface{}{ + "path": "/var/lib/grafana/plugins", + }, + }, + } + + Convey("should return error", func() { + err := lsCommand(commandLine) + So(err.Error(), ShouldNotEqual, "dummie error") + }) }) }) } diff --git a/pkg/cmd/grafana-cli/services/io_util.go b/pkg/cmd/grafana-cli/services/io_util.go index c3be33af199..07629a655d8 100644 --- a/pkg/cmd/grafana-cli/services/io_util.go +++ b/pkg/cmd/grafana-cli/services/io_util.go @@ -1,12 +1,12 @@ package services import ( - m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" + //m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" "io/ioutil" "os" ) -var IoUtil m.IoUtil = IoUtilImp{} +//var IoUtils m.IoUtil = IoUtilImp{} type IoUtilImp struct { } From 594ab0e2b5922a6fc7ecc29560bc86e400009f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 18:44:49 +0100 Subject: [PATCH 081/444] ux(sass): restored missing clearfix class --- public/sass/utils/_utils.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 497142956a8..9d74bf12741 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -1,3 +1,7 @@ +.clearfix { + @include clearfix(); +} + .highlight-word { color: $orange; } From 6fc2b6969715873ef0e115ea9e6e61fb0c70a3a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 19:04:35 +0100 Subject: [PATCH 082/444] ux(sass): restored old responsive rules --- public/sass/_grafana.scss | 87 +++++++++---------- public/sass/_old_responsive.scss | 84 ++++++++++++++++++ public/sass/grafana-responsive.scss | 127 ---------------------------- 3 files changed, 128 insertions(+), 170 deletions(-) create mode 100644 public/sass/_old_responsive.scss delete mode 100644 public/sass/grafana-responsive.scss diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 84d74c18ff6..40e6eeb78d0 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -24,49 +24,50 @@ @import "layout/page"; // COMPONENTS -@import "components/panel_graph.scss"; -@import "components/submenu.scss"; -@import "components/panel_dashlist.scss"; -@import "components/panel_singlestat.scss"; -@import "components/panel_table.scss"; -@import "components/tagsinput.scss"; -@import "components/tables_lists.scss"; -@import "components/search.scss"; -@import "components/dashboard.scss"; -@import "components/tightform.scss"; -@import "components/gf-form.scss"; -@import "components/sidemenu.scss"; -@import "components/navbar.scss"; -@import "components/gfbox.scss"; -@import "components/pagination.scss"; -@import "components/tabs.scss"; -@import "components/timepicker.scss"; -@import "components/filter-controls.scss"; -@import "components/filter-list.scss"; -@import "components/filter-table.scss"; -@import "components/scrollbar.scss"; -@import "components/old_stuff.scss"; -@import "components/navbar.scss"; -@import "components/popovers.scss"; -@import "components/alerts.scss"; -@import "components/typeahead.scss"; -@import "components/tags.scss"; -@import "components/modals.scss"; -@import "components/dropdown.scss"; -@import "components/color_picker.scss"; -@import "components/tooltip.scss"; -@import "components/buttons.scss"; -@import "components/footer.scss"; -@import "components/infobox.scss"; -@import "components/shortcuts.scss"; -@import "components/query_editor.scss"; -@import "components/navs.scss"; +@import "components/panel_graph"; +@import "components/submenu"; +@import "components/panel_dashlist"; +@import "components/panel_singlestat"; +@import "components/panel_table"; +@import "components/tagsinput"; +@import "components/tables_lists"; +@import "components/search"; +@import "components/dashboard"; +@import "components/tightform"; +@import "components/gf-form"; +@import "components/sidemenu"; +@import "components/navbar"; +@import "components/gfbox"; +@import "components/pagination"; +@import "components/tabs"; +@import "components/timepicker"; +@import "components/filter-controls"; +@import "components/filter-list"; +@import "components/filter-table"; +@import "components/scrollbar"; +@import "components/old_stuff"; +@import "components/navbar"; +@import "components/popovers"; +@import "components/alerts"; +@import "components/typeahead"; +@import "components/tags"; +@import "components/modals"; +@import "components/dropdown"; +@import "components/color_picker"; +@import "components/tooltip"; +@import "components/buttons"; +@import "components/footer"; +@import "components/infobox"; +@import "components/shortcuts"; +@import "components/query_editor"; +@import "components/navs"; // PAGES -@import "pages/login.scss"; -@import "pages/playlist.scss"; -@import "pages/admin.scss"; -@import "pages/alerting.scss"; -@import "pages/apps.scss"; -@import "pages/signup.scss"; +@import "pages/login"; +@import "pages/playlist"; +@import "pages/admin"; +@import "pages/alerting"; +@import "pages/apps"; +@import "pages/signup"; +@import "old_responsive"; diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss new file mode 100644 index 00000000000..724f9179208 --- /dev/null +++ b/public/sass/_old_responsive.scss @@ -0,0 +1,84 @@ + +.dashnav-back-to-dashboard { + display: none; +} + +// Media queries +// --------------------- +@include media-breakpoint-down(sm) { + div.panel { + width: 100% !important; + padding: 0px !important; + } + .panel-margin { + margin-right: 0; + margin-left: 0; + } + body { + padding: 0; + } + .dashnav-dashboards-btn a { + max-width: 200px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .dashnav-zoom-out, + .dashnav-action-icons { + display: none; + } + .page-container { + padding: 10px 20px; + } +} + +// form styles +@include media-breakpoint-up(md) { + .gf-size-m { width: 120px; } + .gf-size-l { width: 150px; } + .gf-size-xl { width: 200px; } + .gf-size-xxl { width: 300px; } + .gf-size-xxxl { width: 400px; } + + .dashnav-dashboards-btn a { + max-width: 180px; + } + .gf-timepicker-nav-btn { + max-width: 120px; + } + .panel-in-fullscreen { + .dashnav-action-icons { + display: none; + } + .dashnav-back-to-dashboard { + display: block; + } + } +} + +@include media-breakpoint-up(lg) { + .dashnav-dashboards-btn a { + max-width: 290px; + } + .gf-timepicker-nav-btn { + max-width: 240px; + } + .dashnav-zoom-out { + display: block; + } +} + +@include media-breakpoint-up(xl) { + .panel-in-fullscreen { + .dashnav-action-icons { + display: block; + } + } + + .dashnav-dashboards-btn a { + max-width: none; + } + .gf-timepicker-nav-btn { + max-width: none; + } +} diff --git a/public/sass/grafana-responsive.scss b/public/sass/grafana-responsive.scss deleted file mode 100644 index 051a801f215..00000000000 --- a/public/sass/grafana-responsive.scss +++ /dev/null @@ -1,127 +0,0 @@ -@import "variables.dark.scss"; -@import "bootstrap/responsive.scss"; - -$gridColumnWidth: 70px; -$gridGutterWidth: 10px; - -$gridColumnWidth768: 52px; -$gridGutterWidth768: 10px; - -$gridColumnWidth1200: 90px; -$gridGutterWidth1200: 10px; - -// Fluid grid -// ------------------------- -$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); -$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); - -// 1200px min -$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); -$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); - -// 768px-979px -$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); -$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); - -$screen-xs: 320px; -$screen-sm: 768px; -$screen-md: 992px; -$screen-lg: 1200px; - -$screen-xs-max: ($screen-sm - 1); -$screen-sm-max: ($screen-md - 1); -$screen-md-max: ($screen-lg - 1); - -$breakpoint-xs-up: "only screen and (min-width: #{$screen-xs})"; -$breakpoint-xs: "only screen and (min-width: #{$screen-xs}) and (max-width: #{$screen-xs-max})"; -$breakpoint-sm-up: "only screen and (min-width: #{$screen-sm})"; -$breakpoint-sm: "only screen and (min-width: #{$screen-sm}) and (max-width: #{$screen-sm-max})"; -$breakpoint-md-up: "only screen and (min-width: #{$screen-md})"; -$breakpoint-md: "only screen and (min-width: #{$screen-md}) and (max-width: #{$screen-md-max})"; -$breakpoint-lg: "only screen and (min-width: #{$screen-lg})"; - -.dashnav-back-to-dashboard { - display: none; -} - -// Media queries -// --------------------- -@media $breakpoint-xs { - div.panel { - width: 100% !important; - padding: 0px !important; - } - .panel-margin { - margin-right: 0; - margin-left: 0; - } - body { - padding: 0; - } - .dashnav-dashboards-btn a { - max-width: 200px; - } - .gf-timepicker-nav-btn { - max-width: 120px; - } - .dashnav-zoom-out, - .dashnav-action-icons { - display: none; - } - .page-container { - padding: 10px 20px; - } -} - -// form styles -@media $breakpoint-sm-up { - .gf-size-m { width: 120px; } - .gf-size-l { width: 150px; } - .gf-size-xl { width: 200px; } - .gf-size-xxl { width: 300px; } - .gf-size-xxxl { width: 400px; } -} - -@media $breakpoint-sm-up { - .dashnav-dashboards-btn a { - max-width: 200px; - } - .gf-timepicker-nav-btn { - max-width: 120px; - } - .panel-in-fullscreen { - .dashnav-action-icons { - display: none; - } - .dashnav-back-to-dashboard { - display: block; - } - } -} - -@media $breakpoint-md-up { - .dashnav-dashboards-btn a { - max-width: 290px; - } - .gf-timepicker-nav-btn { - max-width: 250px; - } - .dashnav-zoom-out { - display: block; - } -} - -@media $breakpoint-lg { - .panel-in-fullscreen { - .dashnav-action-icons { - display: block; - } - } - - .dashnav-dashboards-btn a { - max-width: none; - } - .gf-timepicker-nav-btn { - max-width: none; - } -} From 422decde3b05d2ea471fabd8524776fa40ef6542 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 22:24:28 +0100 Subject: [PATCH 083/444] ux(): trying out flexbox for new form styles --- public/app/core/directives/misc.js | 3 +- .../features/datasources/partials/edit.html | 9 +-- .../datasources/partials/http_settings.html | 25 +++------ .../app/features/org/partials/orgDetails.html | 54 +++++++++--------- public/sass/_grid-variables.scss | 10 ++++ public/sass/_old_responsive.scss | 6 -- public/sass/base/_forms.scss | 1 - public/sass/components/_gf-form.scss | 55 ++++++++++++++----- 8 files changed, 93 insertions(+), 70 deletions(-) diff --git a/public/app/core/directives/misc.js b/public/app/core/directives/misc.js index 1f96422d49e..d9bd7a38f0c 100644 --- a/public/app/core/directives/misc.js +++ b/public/app/core/directives/misc.js @@ -69,7 +69,8 @@ function (angular, coreModule, kbn) { ' '; template = template + label; - elem.replaceWith($compile(angular.element(template))(scope)); + elem.addClass('gf-form-checkbox'); + elem.html($compile(angular.element(template))(scope)); } }; }); diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 8a0dc0f4e0a..b5bb0337546 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -13,16 +13,13 @@
- Name - -
-
+ Name +
-
- Type + Type
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 91d4b46a363..8035fa45527 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -3,13 +3,12 @@
- Url - + Url +
-
- + Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request @@ -17,31 +16,25 @@
- + Http Auth -
- - - Tip for with credentials - -
+
- + User - +
-
- + Passord - +
diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 1aa6046a28c..a5f6c9305e7 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -8,8 +8,8 @@
- Name - + Name +
@@ -20,33 +20,37 @@

Address

-
- Address1 - +
+
+ Address1 + +
+
+ Address2 + +
-
- Address2 - -
-
-
- City - +
+
+ City + +
+
+ Postal code + +
-
- Postal code - -
-
-
- State - -
-
- Country - +
+
+ State + +
+
+ Country + +
diff --git a/public/sass/_grid-variables.scss b/public/sass/_grid-variables.scss index a362b11b49a..7e80b5fda21 100644 --- a/public/sass/_grid-variables.scss +++ b/public/sass/_grid-variables.scss @@ -34,3 +34,13 @@ $grid-gutter-width: 30px !default; $enable-flex: false; +$form-sizes: ( + xs: 60px, + sm: 80px, + md: 120px, + lg: 150px, + xl: 200px, + xxl: 300px, + xxxl: 400px +) !default; + diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 724f9179208..7da5f5c20be 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -34,12 +34,6 @@ // form styles @include media-breakpoint-up(md) { - .gf-size-m { width: 120px; } - .gf-size-l { width: 150px; } - .gf-size-xl { width: 200px; } - .gf-size-xxl { width: 300px; } - .gf-size-xxxl { width: 400px; } - .dashnav-dashboards-btn a { max-width: 180px; } diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index 5d106278b4d..efeeaa538b1 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -54,7 +54,6 @@ textarea { // Identify controls by their labels label { display: block; - margin-bottom: 5px; } // Form controls diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 9cf4c1a2def..e5c9680124f 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,12 +1,18 @@ +$gf-form-margin: 4px; + .gf-form { - margin-top: 3px; - margin-right: 3px; - display: inline-block; + margin-top: $gf-form-margin; + margin-right: $gf-form-margin; + display: flex; + flex-direction: row; + align-items: center; .checkbox-label { display: inline; + cursor: pointer; padding: 8px 7px 8px 4px; } + .cr1 { margin-left: 8px; } @@ -16,9 +22,15 @@ margin-bottom: 20px; } -.gf-form-flow { - float: left; - margin-right: 20px; +.gf-form-inline { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-content: flex-start; + + .gf-form { + flex-grow: 1; + } } .gf-form-button-row { @@ -27,10 +39,16 @@ } .gf-form-label { + flex-shrink: 0; background-color: $labelBackground; - display: inline-block; + display: block; padding: 8px 7px; font-size: $fontSizeSmall; + margin-right: $gf-form-margin; +} + +.gf-form-checkbox { + flex-shrink: 0; } [type=text], @@ -45,6 +63,9 @@ height: 100%; box-sizing: border-box; font-size: 15px; + display: block; + width: 100%; + margin-right: $gf-form-margin; } } @@ -56,16 +77,20 @@ select.gf-form-input { padding: 2px 3px; font-size: 15px; box-sizing: content-box; + display: block; + width: 100%; + margin-right: $gf-form-margin; +} + +@each $size, $value in $form-sizes { + .gf-size-#{$size} { width: $value; } + + .gf-size-max-#{$size} { + max-width: $value; + } } -.gf-size-xs { width: 60px; } -.gf-size-s { width: 80px; } -.gf-size-ms { width: 100px;} -.gf-size-m { width: 110px; } -.gf-size-l { width: 120px; } -.gf-size-xl { width: 150px; } -.gf-size-xxl { width: 200px; } -.gf-size-xxxl { width: 300px; } .gf-size-auto { width: auto; } +.gf-size-max { width: 100%; } From 262a03667ef0e84d8cf4edc7059f31fde739166d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 15 Feb 2016 22:37:48 +0100 Subject: [PATCH 084/444] ux(): updated some forms with the new flexbox based classes --- .../datasources/partials/http_settings.html | 2 +- .../features/profile/partials/profile.html | 20 +++++++------------ public/sass/components/_gf-form.scss | 5 +++-- 3 files changed, 11 insertions(+), 16 deletions(-) diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 8035fa45527..ffbba17865e 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -8,7 +8,7 @@
- + Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 9ce7589a864..6d50a7eff4b 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -10,25 +10,19 @@

Preferences

- Name - + Name +
-
-
- Email - + Email +
-
-
- Username - + Username +
-
-
- UI Theme + UI Theme
diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index e5c9680124f..ec67c6011c1 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -67,6 +67,7 @@ $gf-form-margin: 4px; width: 100%; margin-right: $gf-form-margin; } + &.gf-size-auto { width: auto; } } input[type=checkbox].gf-form-checkbox { @@ -80,6 +81,7 @@ select.gf-form-input { display: block; width: 100%; margin-right: $gf-form-margin; + &.gf-size-auto { width: auto; } } @each $size, $value in $form-sizes { @@ -90,7 +92,6 @@ select.gf-form-input { } } -.gf-size-auto { width: auto; } .gf-size-max { width: 100%; } - +.gf-size-auto { width: auto; } From 14312d225c223963f41f2b19bccba356fd91e6a0 Mon Sep 17 00:00:00 2001 From: Marcus Kempe Date: Mon, 15 Feb 2016 19:02:41 +0100 Subject: [PATCH 085/444] Added exporting graph data to CSV with series.alias in columns. --- public/app/core/utils/file_export.ts | 35 ++++++++++++++++++++++++ public/app/plugins/panel/graph/module.ts | 5 ++++ 2 files changed, 40 insertions(+) diff --git a/public/app/core/utils/file_export.ts b/public/app/core/utils/file_export.ts index ad203f58495..944b6ae8a80 100644 --- a/public/app/core/utils/file_export.ts +++ b/public/app/core/utils/file_export.ts @@ -14,6 +14,41 @@ export function exportSeriesListToCsv(seriesList) { saveSaveBlob(text, 'grafana_data_export.csv'); }; +export function exportSeriesListToCsvColumns(seriesList) { + var text = 'Time;'; + // add header + _.each(seriesList, function(series) { + text += series.alias + ';'; + }); + text = text.substring(0,text.length-1); + text += '\n'; + + // process data + var dataArr = [[]]; + var sIndex = 1; + _.each(seriesList, function(series) { + var cIndex = 0; + dataArr.push([]); + _.each(series.datapoints, function(dp) { + dataArr[0][cIndex] = new Date(dp[1]).toISOString(); + dataArr[sIndex][cIndex] = dp[0]; + cIndex++; + }); + sIndex++; + }); + + // make text + for (var i = 0; i < dataArr[0].length; i++) { + text += dataArr[0][i] + ';'; + for (var j = 1; j < dataArr.length; j++) { + text += dataArr[j][i] + ';'; + } + text = text.substring(0,text.length-1); + text += '\n'; + } + saveSaveBlob(text, 'grafana_data_export.csv'); +}; + export function exportTableDataToCsv(table) { var text = ''; // add header diff --git a/public/app/plugins/panel/graph/module.ts b/public/app/plugins/panel/graph/module.ts index b1d48d98649..8f3e178b37c 100644 --- a/public/app/plugins/panel/graph/module.ts +++ b/public/app/plugins/panel/graph/module.ts @@ -126,6 +126,7 @@ class GraphCtrl extends MetricsPanelCtrl { getExtendedMenu() { var menu = super.getExtendedMenu(); menu.push({text: 'Export CSV', click: 'ctrl.exportCsv()'}); + menu.push({text: 'Export CSV (series2columns)', click: 'ctrl.exportCsvColumns()'}); menu.push({text: 'Toggle legend', click: 'ctrl.toggleLegend()'}); return menu; } @@ -295,6 +296,10 @@ class GraphCtrl extends MetricsPanelCtrl { exportCsv() { fileExport.exportSeriesListToCsv(this.seriesList); } + + exportCsvColumns() { + fileExport.exportSeriesListToCsvColumns(this.seriesList); + } } export {GraphCtrl, GraphCtrl as PanelCtrl} From 3fd6ae597d8bc47bfec691a20637c8d61ccf56e1 Mon Sep 17 00:00:00 2001 From: Dmitry Smirnov Date: Sat, 13 Feb 2016 11:01:03 +1100 Subject: [PATCH 086/444] minor spelling corrections Signed-off-by: Dmitry Smirnov --- pkg/api/signup.go | 2 +- pkg/login/ldap.go | 2 +- pkg/middleware/auth_proxy.go | 2 +- pkg/plugins/plugins.go | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/pkg/api/signup.go b/pkg/api/signup.go index 767b9801154..9a6ade52f82 100644 --- a/pkg/api/signup.go +++ b/pkg/api/signup.go @@ -102,7 +102,7 @@ func SignUpStep2(c *middleware.Context, form dtos.SignUpStep2Form) Response { return ApiError(500, "Failed to query database for invites", err) } - apiResponse := util.DynMap{"message": "User sign up completed succesfully", "code": "redirect-to-landing-page"} + apiResponse := util.DynMap{"message": "User sign up completed successfully", "code": "redirect-to-landing-page"} for _, invite := range invitesQuery.Result { if ok, rsp := applyUserInvite(user, invite, false); !ok { return rsp diff --git a/pkg/login/ldap.go b/pkg/login/ldap.go index 24c6a99a8f5..ef611ed358f 100644 --- a/pkg/login/ldap.go +++ b/pkg/login/ldap.go @@ -35,7 +35,7 @@ func (a *ldapAuther) Dial() error { return err } else { if !certPool.AppendCertsFromPEM(pem) { - return errors.New("Failed to append CA certficate " + caCertFile) + return errors.New("Failed to append CA certificate " + caCertFile) } } } diff --git a/pkg/middleware/auth_proxy.go b/pkg/middleware/auth_proxy.go index d5218b09dda..648c3319305 100644 --- a/pkg/middleware/auth_proxy.go +++ b/pkg/middleware/auth_proxy.go @@ -20,7 +20,7 @@ func initContextWithAuthProxy(ctx *Context) bool { query := getSignedInUserQueryForProxyAuth(proxyHeaderValue) if err := bus.Dispatch(query); err != nil { if err != m.ErrUserNotFound { - ctx.Handle(500, "Failed find user specifed in auth proxy header", err) + ctx.Handle(500, "Failed to find user specified in auth proxy header", err) return true } diff --git a/pkg/plugins/plugins.go b/pkg/plugins/plugins.go index e4a8f52b259..a8a1c6b5a2f 100644 --- a/pkg/plugins/plugins.go +++ b/pkg/plugins/plugins.go @@ -149,7 +149,7 @@ func (scanner *PluginScanner) loadPluginJson(pluginJsonFilePath string) error { var loader PluginLoader if pluginGoType, exists := PluginTypes[pluginCommon.Type]; !exists { - return errors.New("Unkown plugin type " + pluginCommon.Type) + return errors.New("Unknown plugin type " + pluginCommon.Type) } else { loader = reflect.New(reflect.TypeOf(pluginGoType)).Interface().(PluginLoader) } From 41b775561a677f57024ca75d9cac5000bf279dbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 07:57:58 +0100 Subject: [PATCH 087/444] ux(): datasource form tweaks --- .../datasources/partials/http_settings.html | 4 +- .../features/profile/partials/password.html | 20 ++--- .../elasticsearch/partials/config.html | 86 +++++++------------ public/sass/_grafana.scss | 2 - public/sass/_variables.dark.scss | 2 +- .../{_grid-variables.scss => _variables.scss} | 0 public/sass/grafana.dark.scss | 5 +- public/sass/grafana.light.scss | 5 +- 8 files changed, 48 insertions(+), 76 deletions(-) rename public/sass/{_grid-variables.scss => _variables.scss} (100%) diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index ffbba17865e..f12e3b4e4c7 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -1,7 +1,8 @@ -

Http settings

+

Http settings

+
Url @@ -13,7 +14,6 @@
-
diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index fd5aaa82065..fda68d2751d 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -2,27 +2,25 @@
- -

Change password

+
+

Change password

+
- Old Password - + Old Password +
-
- New Password - + New Password +
-
- Confirm Password - + Confirm Password +
-
diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html index 05df80143e3..6190ee8ebe6 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/config.html @@ -1,64 +1,38 @@ -

Elasticsearch details

+
+

Elasticsearch details

+ +
+
+ Index name + +
+ +
+ Pattern + +
+
+ +
+ Time field name + +
+ +
+ Version + +
-
-
    -
  • - Index name -
    • -
  • - -
    • -
  • - Pattern -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Time field name -
    • -
  • - -
    • -
-
-
-
-
    -
  • - Version -
    • -
  • - -
    • -
-
-
+
+

Default query settings

-

Default query settings

- -
-
    -
  • - Group by time interval -
    • -
  • - -
    • -
  • - -
    • -
-
+
+ Group by time interval + +
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 40e6eeb78d0..ddc27cf352e 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -1,5 +1,3 @@ -@import "grid-variables"; - // MIXINS @import "mixins/mixins"; @import "mixins/buttons"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 4268b6147f0..fd8f4327dac 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -34,7 +34,7 @@ $critical: #ed2e18; // grafana Variables // ------------------------- $grafanaPanelBackground: $grayDarker; -$grafanaPanelBorder: solid 1px $grayDark; +$grafanaPanelBorder: solid 1px $grayDark; $grafanaTriggerBorder: solid 1px #555; // Graphite Target Editor diff --git a/public/sass/_grid-variables.scss b/public/sass/_variables.scss similarity index 100% rename from public/sass/_grid-variables.scss rename to public/sass/_variables.scss diff --git a/public/sass/grafana.dark.scss b/public/sass/grafana.dark.scss index 24341125549..53193d213e6 100644 --- a/public/sass/grafana.dark.scss +++ b/public/sass/grafana.dark.scss @@ -1,2 +1,3 @@ -@import "_variables.dark.scss"; -@import "_grafana.scss"; +@import "variables"; +@import "variables.dark"; +@import "grafana"; diff --git a/public/sass/grafana.light.scss b/public/sass/grafana.light.scss index f44df3ec9a0..e03d24470e6 100644 --- a/public/sass/grafana.light.scss +++ b/public/sass/grafana.light.scss @@ -1,2 +1,3 @@ -@import "_variables.light.scss"; -@import "_grafana.scss"; +@import "variables"; +@import "variables.light"; +@import "grafana"; From 058c905432adac2e4a7c3fb1ff69575d6b358ebf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 08:17:08 +0100 Subject: [PATCH 088/444] ux(sass): variable renaming --- public/sass/_variables.dark.scss | 74 ++++++++++++------------- public/sass/_variables.light.scss | 59 ++++++++++---------- public/sass/base/_forms.scss | 4 +- public/sass/base/_type.scss | 14 ++--- public/sass/components/_alerts.scss | 2 +- public/sass/components/_buttons.scss | 2 +- public/sass/components/_dashboard.scss | 4 +- public/sass/components/_dropdown.scss | 2 +- public/sass/components/_gfbox.scss | 2 +- public/sass/components/_navs.scss | 12 ++-- public/sass/components/_pagination.scss | 4 +- public/sass/components/_submenu.scss | 2 +- public/sass/components/_tags.scss | 6 +- public/sass/pages/_login.scss | 6 +- 14 files changed, 96 insertions(+), 97 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index fd8f4327dac..f157f6b3979 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -6,17 +6,17 @@ // ------------------------- $black: #000; $gray: #bbb; -$grayDark: #262626; -$grayDarker: #1f1f1f; +$gray-dark: #262626; +$gray-darker: #1f1f1f; -$grayLight: #ADAFAE; -$grayLighter: #BBBFC2; +$gray-light: #ADAFAE; +$gray-lighter: #BBBFC2; $white: #fff; // Accent colors // ------------------------- $blue: #33B5E5; -$blueDark: #005f81; +$blue-dark: #005f81; $green: #669900; $red: #CC3900; $yellow: #ECBB13; @@ -33,13 +33,13 @@ $critical: #ed2e18; // grafana Variables // ------------------------- -$grafanaPanelBackground: $grayDarker; -$grafanaPanelBorder: solid 1px $grayDark; +$grafanaPanelBackground: $gray-darker; +$grafanaPanelBorder: solid 1px $gray-dark; $grafanaTriggerBorder: solid 1px #555; // Graphite Target Editor $grafanaTargetBorder: $black; -$grafanaTargetBackground: $grayDark; +$grafanaTargetBackground: $gray-dark; $grafanaTargetColor: #c8c8c8; $grafanaTargetColorHide: darken(#c8c8c8, 25%); $grafanaTargetSegmentBorder: #050505; @@ -55,8 +55,8 @@ $codeTagBackground: #444; // Scaffolding // ------------------------- $bodyBackground: rgb(20,20,20); -$pageBackground: $grayDarker; -$textColor: $grayLighter; +$pageBackground: $gray-darker; +$textColor: $gray-lighter; // Links // ------------------------- @@ -82,7 +82,7 @@ $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily $headingsFontWeight: 400; // instead of browser default, bold $headingsFontStyle: normal; $headingsColor: darken($white,11%); // empty to use BS default, $textColor -$inputText: $grayLight; +$inputText: $gray-light; // Component sizing @@ -102,9 +102,9 @@ $borderRadiusLarge: 4px; $borderRadiusSmall: 2px; // Lists -$grafanaListBackground: $grayDark; -$grafanaListAccent: lighten($grayDarker, 2%); -$grafanaListBorderTop: $grayDark; +$grafanaListBackground: $gray-dark; +$grafanaListAccent: lighten($gray-darker, 2%); +$grafanaListBorderTop: $gray-dark; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; $grafanaListMainLinkColor: $textColor; @@ -118,18 +118,18 @@ $scrollbarBorder: black; // ------------------------- $tableBackground: transparent; // overall background-color $tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping -$tableBackgroundHover: $grayDark; // for hover -$tableBorder: $grayDark; // table and cell border +$tableBackgroundHover: $gray-dark; // for hover +$tableBorder: $gray-dark; // table and cell border // Buttons // ------------------------- -$btnBackground: $grayDark; -$btnBackgroundHighlight: darken($grayLight, 15%); -$btnBackgroundShadow: darken($grayLight, 15%); +$btnBackground: $gray-dark; +$btnBackgroundHighlight: darken($gray-light, 15%); +$btnBackgroundShadow: darken($gray-light, 15%); $btnBorder: #bbb; -$btnPrimaryBackground: $blueDark; -$btnPrimaryBackgroundHighlight: lighten($blueDark, 5%); +$btnPrimaryBackground: $blue-dark; +$btnPrimaryBackgroundHighlight: lighten($blue-dark, 5%); $btnInfoBackground: lighten($purple, 3%); $btnInfoBackgroundHighlight: darken($purple, 3%); @@ -143,8 +143,8 @@ $btnWarningBackgroundHighlight: darken($orange, 3%); $btnDangerBackground: lighten($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%); -$btnInverseBackground: $grayDark; -$btnInverseBackgroundHighlight: lighten($grayDark, 1%); +$btnInverseBackground: $gray-dark; +$btnInverseBackgroundHighlight: lighten($gray-dark, 1%); $btnInverseText: $textColor; $btnInverseBorder: #333; @@ -157,19 +157,19 @@ $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); // Hero unit // ------------------------- -$heroUnitBackground: $grayDark; +$heroUnitBackground: $gray-dark; $heroUnitHeadingColor: inherit; $heroUnitLeadColor: inherit; // Forms // ------------------------- -$inputBackground: lighten($grayDark,5%); -$inputBorder: lighten($grayDark,5%); +$inputBackground: lighten($gray-dark,5%); +$inputBorder: lighten($gray-dark,5%); $inputBorderRadius: $baseBorderRadius; $inputDisabledBackground: #555; $formActionsBackground: transparent; $inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border -$labelBackground: $grayDark; +$labelBackground: $gray-dark; // Search @@ -188,8 +188,8 @@ $dropdownLinkColor: $textColor; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; -$dropdownLinkBackgroundActive: $blueDark; -$dropdownLinkBackgroundHover: $blueDark; +$dropdownLinkBackgroundActive: $blue-dark; +$dropdownLinkBackgroundHover: $blue-dark; // COMPONENT VARIABLES @@ -213,7 +213,7 @@ $placeholderText: darken($textColor, 25%); // Hr border color // ------------------------- -$hrBorder: $grayDark; +$hrBorder: $gray-dark; // Horizontal forms & lists @@ -226,12 +226,12 @@ $horizontalComponentOffset: 180px; $wellBackground: #131517; $navbarHeight: 52px; -$navbarBackgroundHighlight: $grayDark; -$navbarBackground: $grayDark; +$navbarBackgroundHighlight: $gray-dark; +$navbarBackground: $gray-dark; $navbarBorder: 1px solid $bodyBackground; -$navbarText: $grayLight; -$navbarLinkColor: $grayLight; +$navbarText: $gray-light; +$navbarLinkColor: $gray-light; $navbarLinkColorHover: $white; $navbarLinkColorActive: $navbarLinkColorHover; $navbarLinkBackgroundHover: transparent; @@ -245,8 +245,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Sidemenu // ------------------------- $sideMenuTopShadow: $navbarDropdownShadow; -$sideMenuBackground: $grayDark; -$sideMenuBackgroundHighlight: lighten($grayDark, 4%); +$sideMenuBackground: $gray-dark; +$sideMenuBackgroundHighlight: lighten($gray-dark, 4%); $sideMenuShadow: 0 0 35px 0 $bodyBackground; // Pagination @@ -266,7 +266,7 @@ $errorBackground: $btnDangerBackground; $successText: #468847; $successBackground: $btnSuccessBackground; -$infoText: $blueDark; +$infoText: $blue-dark; $infoBackground: $btnInfoBackground; // Tooltips and popovers diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index b1553064457..24b2e18ce0d 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -10,19 +10,18 @@ // Grays // ------------------------- $black: #000; -$grayDarker: lighten(#000, 11.5%); // #222 -$grayDark: lighten(#000, 20%); // #333 +$gray-darker: lighten(#000, 11.5%); // #222 +$gray-dark: lighten(#000, 20%); // #333 $gray: lighten(#000, 33.5%); // #555 -$grayLight: lighten(#000, 60%); // #999 -$grayLighter: lighten(#000, 97.5%); // #eee +$gray-light: lighten(#000, 60%); // #999 +$gray-lighter: lighten(#000, 97.5%); // #eee $white: #fff; // Accent colors // ------------------------- -$blueOrig: #007FFF; $blue: #2AB2E4; -$blueDark: #75CAEB; +$blue-dark: #75CAEB; $green: #28B62C; $red: #FF4136; $yellow: #FF851B; @@ -39,9 +38,9 @@ $critical: #EC2128; // grafana Variables // ------------------------- -$grafanaPanelBackground: $grayLighter; +$grafanaPanelBackground: $gray-lighter; $grafanaPanelBorder: solid 1px #ddd; -$grafanaTriggerBorder: solid 1px $grayLight; +$grafanaTriggerBorder: solid 1px $gray-light; // Scaffolding // ------------------------- @@ -110,11 +109,11 @@ $borderRadiusLarge: 4px; $borderRadiusSmall: 2px; // Lists -$grafanaListBackground: darken($grayLighter,5%); -$grafanaListAccent: darken($grayLighter,8%); +$grafanaListBackground: darken($gray-lighter,5%); +$grafanaListAccent: darken($gray-lighter,8%); $grafanaListBorderTop: #eee; $grafanaListBorderBottom: #eee; -$grafanaListHighlight: darken($grayLighter,10%); +$grafanaListHighlight: darken($gray-lighter,10%); $grafanaListHighlightContrast: #ddd; $grafanaListMainLinkColor: $textColor; @@ -127,14 +126,14 @@ $tableBackgroundHover: #E8F8FD; // for hover $tableBorder: #ddd; // table and cell border // Scrollbars -$scrollbarBackground: $grayLighter; -$scrollbarBackground2: $grayLighter; -$scrollbarBorder: $grayLight; +$scrollbarBackground: $gray-lighter; +$scrollbarBackground2: $gray-lighter; +$scrollbarBorder: $gray-light; // Buttons // ------------------------- -$btnBackground: $grayLighter; -$btnBackgroundHighlight: darken($grayLighter, 15%); +$btnBackground: $gray-lighter; +$btnBackgroundHighlight: darken($gray-lighter, 15%); $btnBorder: #bbb; $btnPrimaryBackground: lighten($blue, 3%); @@ -152,12 +151,12 @@ $btnWarningBackgroundHighlight: darken($orange, 3%); $btnDangerBackground: lighten($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%); -$btnInverseBackground: $grayLighter; -$btnInverseBackgroundHighlight: darken($grayLighter, 5%); +$btnInverseBackground: $gray-lighter; +$btnInverseBackgroundHighlight: darken($gray-lighter, 5%); $btnInverseText: $black; -$btnInverseBorder: $grayLight; +$btnInverseBorder: $gray-light; -$btnText: $grayLighter; +$btnText: $gray-lighter; $iconContainerBackground: $white; $iconContainerBackgroundHighlight: lighten($white, 5%); @@ -168,9 +167,9 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); // Forms // ------------------------- $inputBackground: $white; -$inputBorder: $grayLighter; +$inputBorder: $gray-lighter; $inputBorderRadius: $baseBorderRadius; -$inputDisabledBackground: $grayLighter; +$inputDisabledBackground: $gray-lighter; $formActionsBackground: #f5f5f5; $inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $inputText: #020202; @@ -183,7 +182,7 @@ $sideMenuBackground: $grafanaPanelBackground; $sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); // search -$searchShadow: 0 5px 30px 0 lighten($grayLight, 30%); +$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%); // Dropdowns // ------------------------- @@ -194,7 +193,7 @@ $dropdownDividerBottom: $white; $dropdownDivider: $dropdownDividerTop; $dropdownTitle: #333; -$dropdownLinkColor: $grayDark; +$dropdownLinkColor: $gray-dark; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; @@ -220,12 +219,12 @@ $zindexModal: 1050; // Input placeholder text color // ------------------------- -$placeholderText: $grayLight; +$placeholderText: $gray-light; // Hr border color // ------------------------- -$hrBorder: $grayLighter; +$hrBorder: $gray-lighter; // Horizontal forms & lists @@ -235,7 +234,7 @@ $horizontalComponentOffset: 180px; // Wells // ------------------------- -$wellBackground: $grayLighter; +$wellBackground: $gray-lighter; // Navbar @@ -262,14 +261,14 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Pagination // ------------------------- -$paginationBackground: $grayLight; +$paginationBackground: $gray-light; $paginationBorder: transparent; $paginationActiveBackground: $blue; // Hero unit // ------------------------- -$heroUnitBackground: $grayLighter; +$heroUnitBackground: $gray-lighter; $heroUnitHeadingColor: inherit; $heroUnitLeadColor: inherit; @@ -296,7 +295,7 @@ $infoBorder: transparent; // Tooltips and popovers // ------------------------- $tooltipColor: $white; -$tooltipBackground: $grayDark; +$tooltipBackground: $gray-dark; $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; $tooltipLinkColor: darken($white,11%); diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index efeeaa538b1..0dd71b6e000 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -25,14 +25,14 @@ legend { margin-bottom: $baseLineHeight; font-size: $baseFontSize * 1.5; line-height: $baseLineHeight * 2; - color: $grayDark; + color: $gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; // Small small { font-size: $baseLineHeight * .75; - color: $grayLight; + color: $gray-light; } } diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index f834bbf5ca6..5ada0c3b35d 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -29,9 +29,9 @@ em { font-style: italic; color: $headingsColor; } cite { font-style: normal; } // Utility classes -.muted { color: $grayLight; } +.muted { color: $gray-light; } a.muted:hover, -a.muted:focus { color: darken($grayLight, 10%); } +a.muted:focus { color: darken($gray-light, 10%); } .text-warning { color: $warningText; } a.text-warning:hover, @@ -69,7 +69,7 @@ h1, h2, h3, h4, h5, h6 { small { font-weight: normal; line-height: 1; - color: $grayLight; + color: $gray-light; } } @@ -172,7 +172,7 @@ abbr[title], // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted $grayLight; + border-bottom: 1px dotted $gray-light; } abbr.initialism { font-size: 90%; @@ -183,7 +183,7 @@ abbr.initialism { blockquote { padding: 0 0 0 15px; margin: 0 0 $baseLineHeight; - border-left: 5px solid $grayLighter; + border-left: 5px solid $gray-lighter; p { margin-bottom: 0; font-size: $baseFontSize * 1.25; @@ -193,7 +193,7 @@ blockquote { small { display: block; line-height: $baseLineHeight; - color: $grayLight; + color: $gray-light; &:before { content: '\2014 \00A0'; } @@ -204,7 +204,7 @@ blockquote { float: right; padding-right: 15px; padding-left: 0; - border-right: 5px solid $grayLighter; + border-right: 5px solid $gray-lighter; border-left: 0; p, small { diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index b6a79ae8a53..914543d9852 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -55,7 +55,7 @@ border-radius: 50%; border: none; font-size: 1.1rem; - color: $grayDarker; + color: $gray-darker; .fa { position: relative; top: -2px; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index b6a0b986b37..af06fd3c627 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -17,7 +17,7 @@ cursor: pointer; border: none; - @include buttonBackground($btnBackground, $btnBackgroundHighlight, $grayDark, 0 1px 1px rgba(255,255,255,.75)); + @include buttonBackground($btnBackground, $btnBackgroundHighlight, $gray-dark, 0 1px 1px rgba(255,255,255,.75)); @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); // Hover/focus state diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 3f297688be8..2ce928c955c 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -31,7 +31,7 @@ float: left; cursor: pointer; line-height: 31px; - background-color: $blueDark; + background-color: $blue-dark; } .row-text { @@ -245,7 +245,7 @@ div.flot-text { .panel-drop-zone { display: none; .panel-container { - border: 1px solid $grayDark; + border: 1px solid $gray-dark; } } diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index fbf75b6e2b0..35252c418ae 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -112,7 +112,7 @@ .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { - color: $grayLight; + color: $gray-light; } // Nuke hover/focus effects .dropdown-menu > .disabled > a:hover, diff --git a/public/sass/components/_gfbox.scss b/public/sass/components/_gfbox.scss index 544bbe11f1d..aae6f7402d0 100644 --- a/public/sass/components/_gfbox.scss +++ b/public/sass/components/_gfbox.scss @@ -28,7 +28,7 @@ .gf-box-header-save-btn { padding: 7px 0; float: right; - color: $grayLight; + color: $gray-light; font-style: italic; } diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss index 8e67bd677f2..c105d234ae0 100644 --- a/public/sass/components/_navs.scss +++ b/public/sass/components/_navs.scss @@ -19,7 +19,7 @@ .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; - background-color: $grayLighter; + background-color: $gray-lighter; } // Redeclare pull classes because of specifity @@ -34,7 +34,7 @@ font-size: 11px; font-weight: bold; line-height: $baseLineHeight; - color: $grayLight; + color: $gray-light; text-shadow: 0 1px 0 rgba(255,255,255,.5); text-transform: uppercase; } @@ -114,7 +114,7 @@ @include border-radius(4px 4px 0 0); &:hover, &:focus { - border-color: $grayLighter $grayLighter #ddd; + border-color: $gray-lighter $gray-lighter #ddd; } } // Active state, and it's :hover/:focus to override normal :hover/:focus @@ -172,8 +172,8 @@ .nav > li.dropdown.open.active > a:hover, .nav > li.dropdown.open.active > a:focus { color: $white; - background-color: $grayLight; - border-color: $grayLight; + background-color: $gray-light; + border-color: $gray-light; } .nav li.dropdown.open .caret, .nav li.dropdown.open.active .caret, @@ -187,7 +187,7 @@ // Dropdowns in stacked tabs .tabs-stacked .open > a:hover, .tabs-stacked .open > a:focus { - border-color: $grayLight; + border-color: $gray-light; } // Show/hide tabbable areas diff --git a/public/sass/components/_pagination.scss b/public/sass/components/_pagination.scss index 7d67a980cf6..c95fff0126c 100644 --- a/public/sass/components/_pagination.scss +++ b/public/sass/components/_pagination.scss @@ -29,14 +29,14 @@ } .pagination ul > .active > a, .pagination ul > .active > span { - color: $grayLight; + color: $gray-light; cursor: default; } .pagination ul > .disabled > span, .pagination ul > .disabled > a, .pagination ul > .disabled > a:hover, .pagination ul > .disabled > a:focus { - color: $grayLight; + color: $gray-light; background-color: transparent; cursor: default; } diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index b4a7154aee5..1d88a669904 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -122,7 +122,7 @@ .variable-option { &:hover, &.highlighted { - background-color: $blueDark; + background-color: $blue-dark; } } diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss index 0eda40f9a08..80be64a9b05 100644 --- a/public/sass/components/_tags.scss +++ b/public/sass/components/_tags.scss @@ -10,7 +10,7 @@ vertical-align: baseline; white-space: nowrap; text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: $grayLight; + background-color: $gray-light; } @@ -55,6 +55,6 @@ &-info { background-color: $infoText; } &-info[href] { background-color: darken($infoText, 10%); } // Inverse (black) - &-inverse { background-color: $grayDark; } - &-inverse[href] { background-color: darken($grayDark, 10%); } + &-inverse { background-color: $gray-dark; } + &-inverse[href] { background-color: darken($gray-dark, 10%); } } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index a0f2188b4f2..b79260522f8 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -106,7 +106,7 @@ margin-top: 10px; padding: 10px; a { - color: $grayLight; + color: $gray-light; } } @@ -121,8 +121,8 @@ border-bottom: 1px solid $gray; .login-divider-text { - background-color: $grayDarker; - color: $grayLight; + background-color: $gray-darker; + color: $gray-light; padding: 0 10px; } } From 1cd3985913e742f0a0e3c7afb1d21debf6676806 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 08:30:37 +0100 Subject: [PATCH 089/444] ux(sass): variable renaming --- public/sass/_variables.dark.scss | 17 +++++++++-------- public/sass/_variables.light.scss | 17 +++++++++-------- public/sass/components/_dashboard.scss | 8 ++++---- public/sass/components/_filter-list.scss | 2 +- public/sass/components/_filter-table.scss | 2 +- public/sass/components/_gfbox.scss | 2 +- public/sass/components/_modals.scss | 8 ++++---- public/sass/components/_search.scss | 4 ++-- public/sass/components/_submenu.scss | 4 ++-- public/sass/components/_tables_lists.scss | 4 ++-- public/sass/components/_tabs.scss | 8 ++++---- public/sass/components/_timepicker.scss | 4 ++-- public/sass/pages/_apps.scss | 4 ++-- public/sass/pages/_login.scss | 4 ++-- public/sass/pages/_playlist.scss | 2 +- 15 files changed, 46 insertions(+), 44 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index f157f6b3979..300f30a514b 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -6,17 +6,17 @@ // ------------------------- $black: #000; $gray: #bbb; -$gray-dark: #262626; -$gray-darker: #1f1f1f; +$gray-dark: #262626; +$gray-darker: #1f1f1f; -$gray-light: #ADAFAE; -$gray-lighter: #BBBFC2; +$gray-light: #ADAFAE; +$gray-lighter: #BBBFC2; $white: #fff; // Accent colors // ------------------------- $blue: #33B5E5; -$blue-dark: #005f81; +$blue-dark: #005f81; $green: #669900; $red: #CC3900; $yellow: #ECBB13; @@ -33,9 +33,10 @@ $critical: #ed2e18; // grafana Variables // ------------------------- -$grafanaPanelBackground: $gray-darker; -$grafanaPanelBorder: solid 1px $gray-dark; -$grafanaTriggerBorder: solid 1px #555; +$panel-bg: $gray-darker; +$panel-border: solid 1px $gray-dark; + +$divider-border-color: #555; // Graphite Target Editor $grafanaTargetBorder: $black; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 24b2e18ce0d..15170fe82f6 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -10,11 +10,11 @@ // Grays // ------------------------- $black: #000; -$gray-darker: lighten(#000, 11.5%); // #222 -$gray-dark: lighten(#000, 20%); // #333 +$gray-darker: lighten(#000, 11.5%); // #222 +$gray-dark: lighten(#000, 20%); // #333 $gray: lighten(#000, 33.5%); // #555 -$gray-light: lighten(#000, 60%); // #999 -$gray-lighter: lighten(#000, 97.5%); // #eee +$gray-light: lighten(#000, 60%); // #999 +$gray-lighter: lighten(#000, 97.5%); // #eee $white: #fff; @@ -38,9 +38,10 @@ $critical: #EC2128; // grafana Variables // ------------------------- -$grafanaPanelBackground: $gray-lighter; -$grafanaPanelBorder: solid 1px #ddd; -$grafanaTriggerBorder: solid 1px $gray-light; +$panel-bg: $gray-lighter; +$panel-border: solid 1px #ddd; + +$divider-border-color: $gray-light; // Scaffolding // ------------------------- @@ -178,7 +179,7 @@ $labelBackground: #f8f8f8; // Sidemenu // ------------------------- -$sideMenuBackground: $grafanaPanelBackground; +$sideMenuBackground: $panel-bg; $sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); // search diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 2ce928c955c..ef6842f6605 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -47,7 +47,7 @@ .row-close { padding: 0px; margin: 0px; - background: $grafanaPanelBackground; + background: $panel-bg; text-align: center; } @@ -116,9 +116,9 @@ div.flot-text { } .panel-container { - background-color: $grafanaPanelBackground; + background-color: $panel-bg; position: relative; - border: $grafanaPanelBorder; + border: $panel-border; &:hover { .panel-actions { display: block; @@ -185,7 +185,7 @@ div.flot-text { position: absolute; border-left: 31px solid transparent; border-right: 30px solid transparent; - border-bottom: 27px solid $grafanaPanelBackground; + border-bottom: 27px solid $panel-bg; left: 0; bottom: 0; } diff --git a/public/sass/components/_filter-list.scss b/public/sass/components/_filter-list.scss index 73f8057b686..045f4115dbc 100644 --- a/public/sass/components/_filter-list.scss +++ b/public/sass/components/_filter-list.scss @@ -16,7 +16,7 @@ .filter-list > li { padding: 10px; margin-bottom: 2px; - background: $grafanaPanelBackground; + background: $panel-bg; &:last-child { margin: 0; diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss index 28fcefb1b3d..75546af29a1 100644 --- a/public/sass/components/_filter-table.scss +++ b/public/sass/components/_filter-table.scss @@ -49,7 +49,7 @@ } .filter-table .expanded { - border-color: $grafanaPanelBackground; + border-color: $panel-bg; } .filter-table .expanded > td { diff --git a/public/sass/components/_gfbox.scss b/public/sass/components/_gfbox.scss index aae6f7402d0..d1d85ad98a1 100644 --- a/public/sass/components/_gfbox.scss +++ b/public/sass/components/_gfbox.scss @@ -1,6 +1,6 @@ .gf-box { margin: 10px 5px; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; position: relative; border: 1px solid $grafanaTargetFuncBackground; } diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 6165766e80f..a7a96956667 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -23,7 +23,7 @@ position: fixed; z-index: $zindexModal; width: 100%; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); @include background-clip(padding-box); outline: none; @@ -38,7 +38,7 @@ .modal-header { padding: 9px 15px; - border-bottom: 1px solid $grafanaPanelBackground; + border-bottom: 1px solid $panel-bg; } // Body (where all modal content resides) @@ -55,8 +55,8 @@ // Footer (for actions) .modal-footer { padding: 14px 15px 15px; - border-top: 1px solid $grafanaPanelBackground; - background-color: $grafanaPanelBackground; + border-top: 1px solid $panel-bg; + background-color: $panel-bg; text-align: right; // right align buttons @include clearfix(); // clear it in case folks use .pull-* classes on buttons } diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 1a117f252b9..ced2963f414 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -7,8 +7,8 @@ width: 700px; box-shadow: $searchShadow; padding: 10px; - background-color: $grafanaPanelBackground; - border: $grafanaPanelBorder; + background-color: $panel-bg; + border: $panel-border; .label-tag { margin-left: 6px; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 1d88a669904..46c5f08554e 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -18,8 +18,8 @@ margin-right: 20px; display: inline-block; border-radius: 3px; - background-color: $grafanaPanelBackground; - border: $grafanaPanelBorder; + background-color: $panel-bg; + border: $panel-border; margin-right: 10px; display: inline-block; diff --git a/public/sass/components/_tables_lists.scss b/public/sass/components/_tables_lists.scss index f6d1edf35bc..30983225585 100644 --- a/public/sass/components/_tables_lists.scss +++ b/public/sass/components/_tables_lists.scss @@ -4,14 +4,14 @@ th { text-align: left; padding: 5px 10px; - border-bottom: 4px solid $grafanaPanelBackground; + border-bottom: 4px solid $panel-bg; } tr td { background-color: $grafanaListBackground; padding: 5px 10px; white-space: nowrap; - border-bottom: 4px solid $grafanaPanelBackground; + border-bottom: 4px solid $panel-bg; &.nobg { background-color: transparent; } diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 792314df2d3..ba12f9df549 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,6 +1,6 @@ .nav-tabs-alt { - border-bottom: $grafanaTriggerBorder; + border-bottom: 1px solid $divider-border-color; padding-left: 10px; margin: 0 0 10px 0; @@ -16,9 +16,9 @@ li.active > a:focus, li.active > a:hover { @include border-radius(3px); - border: $grafanaTriggerBorder; + border: 1px solid $divider-border-color; background-color: transparent; - border-bottom: 1px solid $grafanaPanelBackground; + border-bottom: 1px solid $panel-bg; color: $linkColor; } @@ -33,7 +33,7 @@ .tab-content { padding: 10px; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; } } diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index d703e78e329..275d4a336a0 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -16,14 +16,14 @@ margin: -5px -10px 10px 5px; padding: 10px 20px; float: right; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; @include box-shadow($navbarDropdownShadow); } .gf-timepicker-absolute-section { width: 300px; float: left; - border-right: $grafanaTriggerBorder; + border-right: 1px solid $divider-border-color; padding: 0 0 0 20px; select { width: 183px; diff --git a/public/sass/pages/_apps.scss b/public/sass/pages/_apps.scss index 35e4f8522cd..73959edf50b 100644 --- a/public/sass/pages/_apps.scss +++ b/public/sass/pages/_apps.scss @@ -1,7 +1,7 @@ .app-edit-logo-box { padding: 1.2rem; - background: $grafanaPanelBackground; + background: $panel-bg; text-align: center; img { max-width: 7rem; @@ -14,7 +14,7 @@ margin: 0 0 0 2rem; li { - background: $grafanaPanelBackground; + background: $panel-bg; margin-top: 4px; padding: 0.2rem 1rem; } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index b79260522f8..f4a3458d038 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -27,7 +27,7 @@ } .login-inner-box { - background: $grafanaPanelBackground; + background: $panel-bg; } .login-tab-header { @@ -144,7 +144,7 @@ .invite-box { text-align: center; border: 1px solid $grafanaTargetFuncBackground; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; width: 800px; margin-left: auto; margin-right: auto; diff --git a/public/sass/pages/_playlist.scss b/public/sass/pages/_playlist.scss index 782d49d584d..ac17cb02d94 100644 --- a/public/sass/pages/_playlist.scss +++ b/public/sass/pages/_playlist.scss @@ -4,7 +4,7 @@ position: relative; width: 700px; box-shadow: 0px 0px 55px 0px black; - background-color: $grafanaPanelBackground; + background-color: $panel-bg; .label-tag { margin-left: 6px; From 36f4f1d0f3563a4a14b06433bed444af05942bf5 Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 16 Feb 2016 08:47:26 +0100 Subject: [PATCH 090/444] fix(cli): add new executables to gitignore --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index 2cd3623cf83..1c8a89215da 100644 --- a/.gitignore +++ b/.gitignore @@ -34,3 +34,5 @@ fig.yml profile.cov /grafana .notouch +/pkg/cmd/grafana-cli/grafana-cli +/pkg/cmd/grafana-server/grafana-server From 4131d8b57a1af78fb06706e2ce1012e22d7e60ce Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 16 Feb 2016 08:49:27 +0100 Subject: [PATCH 091/444] feat(cli): add command for upgrading one plugin --- pkg/cmd/grafana-cli/commands/commands.go | 8 +++--- .../grafana-cli/commands/install_command.go | 7 ++--- .../grafana-cli/commands/upgrade_command.go | 28 +++++++++++++++++-- pkg/cmd/grafana-cli/services/io_util.go | 3 -- pkg/cmd/grafana-cli/services/services.go | 14 ++++++---- 5 files changed, 42 insertions(+), 18 deletions(-) diff --git a/pkg/cmd/grafana-cli/commands/commands.go b/pkg/cmd/grafana-cli/commands/commands.go index 55e9a771480..67e9f945cfd 100644 --- a/pkg/cmd/grafana-cli/commands/commands.go +++ b/pkg/cmd/grafana-cli/commands/commands.go @@ -16,7 +16,7 @@ func runCommand(command func(commandLine CommandLine) error) func(context *cli.C cmd.ShowHelp() os.Exit(1) } else { - log.Info("Restart grafana after installing plugins . \n") + log.Info("\nRestart grafana after installing plugins . \n\n") } } } @@ -24,7 +24,7 @@ func runCommand(command func(commandLine CommandLine) error) func(context *cli.C var Commands = []cli.Command{ { Name: "install", - Usage: "installs a plugin", + Usage: "install ", Action: runCommand(installCommand), }, { Name: "list-remote", @@ -32,7 +32,7 @@ var Commands = []cli.Command{ Action: runCommand(listremoteCommand), }, { Name: "upgrade", - Usage: "upgrades one plugin", + Usage: "upgrade ", Action: runCommand(upgradeCommand), }, { Name: "upgrade-all", @@ -44,7 +44,7 @@ var Commands = []cli.Command{ Action: runCommand(lsCommand), }, { Name: "remove", - Usage: "removes installed plugin", + Usage: "remove ", Action: runCommand(removeCommand), }, } diff --git a/pkg/cmd/grafana-cli/commands/install_command.go b/pkg/cmd/grafana-cli/commands/install_command.go index 6c7970147aa..1d085cad89e 100644 --- a/pkg/cmd/grafana-cli/commands/install_command.go +++ b/pkg/cmd/grafana-cli/commands/install_command.go @@ -71,15 +71,14 @@ func InstallPlugin(pluginName, pluginFolder, version string) error { err = downloadFile(plugin.Id, pluginFolder, downloadURL) if err == nil { - log.Info("Installed %s successfully ✔\n", plugin.Id) + log.Infof("Installed %v successfully ✔\n", plugin.Id) } - res := s.ReadPlugin(pluginFolder, pluginName) + res, _ := s.ReadPlugin(pluginFolder, pluginName) for _, v := range res.Dependency.Plugins { - log.Infof("Installing Dependency: %s\n", v.Id) - InstallPlugin(v.Id, pluginFolder, "") + log.Infof("Installed Dependency: %v ✔\n", v.Id) } return err diff --git a/pkg/cmd/grafana-cli/commands/upgrade_command.go b/pkg/cmd/grafana-cli/commands/upgrade_command.go index df9581b3dc3..5a4fe477c9b 100644 --- a/pkg/cmd/grafana-cli/commands/upgrade_command.go +++ b/pkg/cmd/grafana-cli/commands/upgrade_command.go @@ -1,9 +1,33 @@ package commands import ( - "errors" + s "github.com/grafana/grafana/pkg/cmd/grafana-cli/services" ) func upgradeCommand(c CommandLine) error { - return errors.New("Not yet Implemented") + pluginDir := c.GlobalString("path") + pluginName := c.Args().First() + + localPlugin, err := s.ReadPlugin(pluginDir, pluginName) + + if err != nil { + return err + } + + remotePlugins, err2 := s.ListAllPlugins() + + if err2 != nil { + return err2 + } + + for _, v := range remotePlugins.Plugins { + if localPlugin.Id == v.Id { + if ShouldUpgrade(localPlugin.Info.Version, v) { + s.RemoveInstalledPlugin(pluginDir, pluginName) + return InstallPlugin(localPlugin.Id, pluginDir, "") + } + } + } + + return nil } diff --git a/pkg/cmd/grafana-cli/services/io_util.go b/pkg/cmd/grafana-cli/services/io_util.go index 07629a655d8..b1f1c140e2c 100644 --- a/pkg/cmd/grafana-cli/services/io_util.go +++ b/pkg/cmd/grafana-cli/services/io_util.go @@ -1,13 +1,10 @@ package services import ( - //m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" "io/ioutil" "os" ) -//var IoUtils m.IoUtil = IoUtilImp{} - type IoUtilImp struct { } diff --git a/pkg/cmd/grafana-cli/services/services.go b/pkg/cmd/grafana-cli/services/services.go index dba14d13d2d..d5051a623a3 100644 --- a/pkg/cmd/grafana-cli/services/services.go +++ b/pkg/cmd/grafana-cli/services/services.go @@ -4,6 +4,7 @@ import ( "encoding/json" "errors" "github.com/franela/goreq" + "github.com/grafana/grafana/pkg/cmd/grafana-cli/log" m "github.com/grafana/grafana/pkg/cmd/grafana-cli/models" "path" ) @@ -22,7 +23,7 @@ func ListAllPlugins() (m.PluginRepo, error) { return resp, nil } -func ReadPlugin(pluginDir, pluginName string) m.InstalledPlugin { +func ReadPlugin(pluginDir, pluginName string) (m.InstalledPlugin, error) { pluginDataPath := path.Join(pluginDir, pluginName, "plugin.json") pluginData, _ := IoHelper.ReadFile(pluginDataPath) @@ -34,24 +35,27 @@ func ReadPlugin(pluginDir, pluginName string) m.InstalledPlugin { } if res.Id == "" { - res.Id = res.Name + return m.InstalledPlugin{}, errors.New("could not read find plugin " + pluginName) } - return res + return res, nil } func GetLocalPlugins(pluginDir string) []m.InstalledPlugin { result := make([]m.InstalledPlugin, 0) files, _ := IoHelper.ReadDir(pluginDir) for _, f := range files { - res := ReadPlugin(pluginDir, f.Name()) - result = append(result, res) + res, err := ReadPlugin(pluginDir, f.Name()) + if err == nil { + result = append(result, res) + } } return result } func RemoveInstalledPlugin(pluginPath, id string) error { + log.Infof("Removing plugin: %v\n", id) return IoHelper.RemoveAll(path.Join(pluginPath, id)) } From b0673175957fd6c07fe5013645e9c5808f2c43b7 Mon Sep 17 00:00:00 2001 From: Utkarsh Bhatnagar Date: Tue, 16 Feb 2016 00:19:11 -0800 Subject: [PATCH 092/444] Typo in contributing.md --- CONTRIBUTING.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3e7b20ce9c1..aaf01cd3280 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,6 +1,6 @@ Follow the setup guide in README.md -### Rebuild frontend assts on source change +### Rebuild frontend assets on source change ``` grunt && grunt watch ``` @@ -15,5 +15,3 @@ grunt karma:dev grunt test godep go test -v ./pkg/... ``` - - From 48c5e26acdf2b88294447c54c6600916a9b48bca Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 16 Feb 2016 09:33:54 +0100 Subject: [PATCH 093/444] docs(changelog): add info about cli tool --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0e0721e4182..eb76150c21f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ * **InfluxDB**: Support for policy selection in query editor, closes [#2018](https://github.com/grafana/grafana/issues/2018) * **Snapshots UI**: Dashboard snapshots list can be managed through UI, closes[#1984](https://github.com/grafana/grafana/issues/1984) * **Prometheus**: Prometheus annotation support, closes[#2883](https://github.com/grafana/grafana/pull/2883) +* **Cli**: New cli tool for downloading and updating plugins ### Breaking changes * **Plugin API**: Both datasource and panel plugin api (and plugin.json schema) have been updated, requiring an update to plugins. See [plugin api](https://github.com/grafana/grafana/blob/master/public/app/plugins/plugin_api.md) for more info. From febad7b1d72e046c28c2d219ef1a8cb46abdbbf8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 09:42:46 +0100 Subject: [PATCH 094/444] ux(saas): variable renaming --- public/sass/_variables.dark.scss | 121 ++++++++++++-------- public/sass/_variables.light.scss | 98 ++++++++-------- public/sass/base/_base.scss | 8 +- public/sass/base/_code.scss | 6 +- public/sass/base/_type.scss | 4 +- public/sass/components/_buttons.scss | 4 +- public/sass/components/_dashboard.scss | 4 +- public/sass/components/_dropdown.scss | 2 +- public/sass/components/_filter-table.scss | 2 +- public/sass/components/_gfbox.scss | 12 +- public/sass/components/_infobox.scss | 4 +- public/sass/components/_modals.scss | 4 +- public/sass/components/_navbar.scss | 12 +- public/sass/components/_navs.scss | 12 +- public/sass/components/_pagination.scss | 2 +- public/sass/components/_panel_dashlist.scss | 6 +- public/sass/components/_panel_graph.scss | 6 +- public/sass/components/_panel_table.scss | 10 +- public/sass/components/_sidemenu.scss | 16 +-- public/sass/components/_submenu.scss | 10 +- public/sass/components/_tables_lists.scss | 2 +- public/sass/components/_tabs.scss | 6 +- public/sass/components/_tagsinput.scss | 2 +- public/sass/components/_tightform.scss | 44 ++++--- public/sass/components/_timepicker.scss | 6 +- public/sass/layout/_page.scss | 6 +- public/sass/mixins/_buttons.scss | 6 +- public/sass/mixins/_mixins.scss | 10 +- public/sass/pages/_login.scss | 14 +-- 29 files changed, 227 insertions(+), 212 deletions(-) diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 300f30a514b..dd1669f32fc 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -31,66 +31,70 @@ $online: #10a345; $warn: #ffc03c; $critical: #ed2e18; -// grafana Variables -// ------------------------- -$panel-bg: $gray-darker; -$panel-border: solid 1px $gray-dark; - -$divider-border-color: #555; - -// Graphite Target Editor -$grafanaTargetBorder: $black; -$grafanaTargetBackground: $gray-dark; -$grafanaTargetColor: #c8c8c8; -$grafanaTargetColorHide: darken(#c8c8c8, 25%); -$grafanaTargetSegmentBorder: #050505; - -$grafanaTargetFuncBackground: #333; -$grafanaTargetFuncHightlight: #444; - -$grafanaSelectBackground: $grafanaTargetFuncBackground; - -$modalBackground: $black; -$codeTagBackground: #444; - // Scaffolding // ------------------------- -$bodyBackground: rgb(20,20,20); -$pageBackground: $gray-darker; -$textColor: $gray-lighter; +$body-bg: rgb(20,20,20); +$page-bg: $gray-darker; +$text-color: $gray-lighter; // Links // ------------------------- -$linkColor: darken($white,11%); -$linkColorDisabled: darken($linkColor,30%); -$linkColorHover: $white; - +$link-color: darken($white,11%); +$link-color-disabled: darken($link-color,30%); +$link-color-hover: $white; // Typography // ------------------------- -$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -$serifFontFamily: Georgia, "Times New Roman", Times, serif; -$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; + +$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; +$font-family-base: $font-family-sans-serif !default; + +$font-size-root: 14px !default; + +$font-size-base: 1rem !default; +$font-size-lg: 1.25rem !default; +$font-size-sm: .875rem !default; +$font-size-xs: .75rem !default; + +$line-height-base: 1.5 !default; + +$font-size-h1: 2.5rem !default; +$font-size-h2: 2rem !default; +$font-size-h3: 1.75rem !default; +$font-size-h4: 1.5rem !default; +$font-size-h5: 1.25rem !default; +$font-size-h6: 1rem !default; + +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; + +$display1-weight: 300 !default; +$display2-weight: 300 !default; +$display3-weight: 300 !default; +$display4-weight: 300 !default; $baseFontSize: 14px; $baseFontWeight: 400; -$baseFontFamily: $sansFontFamily; +$baseFontFamily: $font-family-sans-serif; $baseLineHeight: 20px; -$altFontFamily: $serifFontFamily; +$altFontFamily: $font-family-serif; $fontWeightSemi: 600; $headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily $headingsFontWeight: 400; // instead of browser default, bold $headingsFontStyle: normal; -$headingsColor: darken($white,11%); // empty to use BS default, $textColor +$headingsColor: darken($white,11%); // empty to use BS default, $text-color $inputText: $gray-light; - // Component sizing // ------------------------- // Based on 14px font-size and 20px line-height -$fontSizeLarge: $baseFontSize * 1.25; // ~18px +$font-size-lg: $baseFontSize * 1.25; // ~18px $fontSizeSmall: $baseFontSize * 0.85; // ~12px $fontSizeMini: $baseFontSize * 0.75; // ~11px @@ -102,13 +106,32 @@ $baseBorderRadius: 3px; $borderRadiusLarge: 4px; $borderRadiusSmall: 2px; + +// Panel +// ------------------------- +$panel-bg: $gray-darker; +$panel-border: solid 1px $gray-dark; + +$divider-border-color: #555; + +// Graphite Target Editor +$tight-form-border: #050505; +$tight-form-bg: $gray-dark; + +$tight-form-func-bg: #333; +$tight-form-func-highlight-bg: #444; + +$modal-background: $black; +$code-tag-bg: #444; + + // Lists $grafanaListBackground: $gray-dark; $grafanaListAccent: lighten($gray-darker, 2%); $grafanaListBorderTop: $gray-dark; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; -$grafanaListMainLinkColor: $textColor; +$grafanaListMainLinkColor: $text-color; // Scrollbars $scrollbarBackground: #3a3a3a; @@ -146,7 +169,7 @@ $btnDangerBackgroundHighlight: darken($red, 3%); $btnInverseBackground: $gray-dark; $btnInverseBackgroundHighlight: lighten($gray-dark, 1%); -$btnInverseText: $textColor; +$btnInverseText: $link-color; $btnInverseBorder: #333; $btnText: $gray; @@ -174,7 +197,7 @@ $labelBackground: $gray-dark; // Search -$searchShadow: 0 0 35px 0 $bodyBackground; +$searchShadow: 0 0 35px 0 $body-bg; // Dropdowns // ------------------------- @@ -183,9 +206,9 @@ $dropdownBorder: rgba(0,0,0,.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; $dropdownDivider: $dropdownDividerBottom; -$dropdownTitle: $linkColorDisabled; +$dropdownTitle: $link-color-disabled; -$dropdownLinkColor: $textColor; +$dropdownLinkColor: $text-color; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; @@ -209,7 +232,7 @@ $zindexModalBackdrop: 1040; $zindexModal: 1050; // ------------------------- -$placeholderText: darken($textColor, 25%); +$placeholderText: darken($text-color, 25%); // Hr border color @@ -229,7 +252,7 @@ $wellBackground: #131517; $navbarHeight: 52px; $navbarBackgroundHighlight: $gray-dark; $navbarBackground: $gray-dark; -$navbarBorder: 1px solid $bodyBackground; +$navbarBorder: 1px solid $body-bg; $navbarText: $gray-light; $navbarLinkColor: $gray-light; @@ -237,8 +260,8 @@ $navbarLinkColorHover: $white; $navbarLinkColorActive: $navbarLinkColorHover; $navbarLinkBackgroundHover: transparent; $navbarLinkBackgroundActive: $navbarBackground; -$navbarBrandColor: $linkColor; -$navbarDropdownShadow: inset 0px 4px 10px -4px $bodyBackground; +$navbarBrandColor: $link-color; +$navbarDropdownShadow: inset 0px 4px 10px -4px $body-bg; $navbarButtonBackground: lighten($navbarBackground, 3%); $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); @@ -248,11 +271,11 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); $sideMenuTopShadow: $navbarDropdownShadow; $sideMenuBackground: $gray-dark; $sideMenuBackgroundHighlight: lighten($gray-dark, 4%); -$sideMenuShadow: 0 0 35px 0 $bodyBackground; +$sideMenuShadow: 0 0 35px 0 $body-bg; // Pagination // ------------------------- -$paginationBackground: $bodyBackground; +$paginationBackground: $body-bg; $paginationBorder: transparent; $paginationActiveBackground: $blue; @@ -276,7 +299,7 @@ $tooltipColor: $white; $tooltipBackground: rgb(58, 57, 57); $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; -$tooltipLinkColor: $linkColor; +$tooltipLinkColor: $link-color; $popoverBackground: $heroUnitBackground; $popoverArrowWidth: 10px; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 15170fe82f6..580297b3c22 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -36,68 +36,64 @@ $online: #01A64F; $warn: #F79520; $critical: #EC2128; -// grafana Variables -// ------------------------- -$panel-bg: $gray-lighter; -$panel-border: solid 1px #ddd; - -$divider-border-color: $gray-light; - // Scaffolding // ------------------------- -$bodyBackground: #EFEFEF; -$pageBackground: $white; -$textColor: $gray; + +$body-bg: rgb(20,20,20); +$page-bg: $gray-darker; +$text-color: $gray-lighter; + +// Links +// ------------------------- +$link-color: $gray; +$link-color-disabled: lighten($link-color,30%); +$link-color-hover: darken($link-color, 20%); + +// Typography +// ------------------------- +$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; + +$baseFontSize: 14px; +$baseFontWeight: 400; +$fontWeightSemi: 600; +$baseFontFamily: $font-family-sans-serif; +$baseLineHeight: 20px; +$altFontFamily: $font-family-serif; + +$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily +$headingsFontWeight: normal; // instead of browser default, bold +$headingsFontStyle: normal; +$headingsColor: $text-color; // empty to use BS default, $text-color + +// Panel +// ------------------------- + +$panel-bg: $gray-lighter; +$panel-border: solid 1px #ddd; + +$divider-border-color: $gray-light; // Submenu $submenuBackground: rgb(218, 217, 217); $submenuBorder: $white; // Graphite Target Editor -$grafanaTargetBorder: #ddd; -$grafanaTargetBackground: #efefef; -$grafanaTargetColor: $textColor; -$grafanaTargetColorHide: lighten($textColor, 25%); -$grafanaTargetSegmentBorder: #ddd; +$tight-form-border: #ddd; +$tight-form-bg: #efefef; -$grafanaTargetFuncBackground: darken($grafanaTargetBackground, 5%); -$grafanaTargetFuncHightlight: darken($grafanaTargetBackground, 10%); - -$grafanaSelectBackground: $grafanaTargetFuncBackground; - -$modalBackground: $bodyBackground; -$codeTagBackground: #ddd; - -// Links -// ------------------------- -$linkColor: $gray; -$linkColorDisabled: lighten($linkColor,30%); -$linkColorHover: darken($linkColor, 20%); - -// Typography -// ------------------------- -$sansFontFamily: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -$serifFontFamily: Georgia, "Times New Roman", Times, serif; -$monoFontFamily: Menlo, Monaco, Consolas, "Courier New", monospace; - -$baseFontSize: 14px; -$baseFontWeight: 400; -$fontWeightSemi: 600; -$baseFontFamily: $sansFontFamily; -$baseLineHeight: 20px; -$altFontFamily: $serifFontFamily; - -$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily -$headingsFontWeight: normal; // instead of browser default, bold -$headingsFontStyle: normal; -$headingsColor: $textColor; // empty to use BS default, $textColor +$tight-form-func-bg: darken($tight-form-bg, 5%); +$tight-form-func-highlight-bg: darken($tight-form-bg, 10%); +$modal-background: $body-bg; +$code-tag-bg: #ddd; // Component sizing // ------------------------- // Based on 14px font-size and 20px line-height -$fontSizeLarge: $baseFontSize * 1.25; // ~18px +$font-size-lg: $baseFontSize * 1.25; // ~18px $fontSizeSmall: $baseFontSize * 0.85; // ~12px $fontSizeMini: $baseFontSize * 0.75; // ~11px @@ -116,7 +112,7 @@ $grafanaListBorderTop: #eee; $grafanaListBorderBottom: #eee; $grafanaListHighlight: darken($gray-lighter,10%); $grafanaListHighlightContrast: #ddd; -$grafanaListMainLinkColor: $textColor; +$grafanaListMainLinkColor: $text-color; // Tables @@ -188,7 +184,7 @@ $searchShadow: 0 5px 30px 0 lighten($gray-light, 30%); // Dropdowns // ------------------------- $dropdownBackground: $white; -$dropdownBorder: $grafanaTargetBorder; +$dropdownBorder: $tight-form-border; $dropdownDividerTop: #e5e5e5; $dropdownDividerBottom: $white; $dropdownDivider: $dropdownDividerTop; @@ -244,7 +240,7 @@ $wellBackground: $gray-lighter; $navbarHeight: 52px; $navbarBackgroundHighlight: #f8f8f8; $navbarBackground: #f8f8f8; -$navbarBorder: 1px solid $grafanaTargetBorder; +$navbarBorder: 1px solid $tight-form-border; $navbarText: #666; $navbarLinkColor: #666; @@ -252,7 +248,7 @@ $navbarLinkColorHover: #333; $navbarLinkColorActive: #555; $navbarLinkBackgroundHover: transparent; $navbarLinkBackgroundActive: darken($navbarBackground, 6.5%); -$navbarDropdownShadow: inset 0px 4px 7px -4px darken($bodyBackground, 20%); +$navbarDropdownShadow: inset 0px 4px 7px -4px darken($body-bg, 20%); $navbarBrandColor: $navbarLinkColor; diff --git a/public/sass/base/_base.scss b/public/sass/base/_base.scss index 928ecb857ec..ef8f243d07d 100644 --- a/public/sass/base/_base.scss +++ b/public/sass/base/_base.scss @@ -8,8 +8,8 @@ body { font-family: $baseFontFamily; font-size: $baseFontSize; line-height: $baseLineHeight; - color: $textColor; - background-color: $bodyBackground; + color: $text-color; + background-color: $body-bg; } @@ -17,12 +17,12 @@ body { // ------------------------- a { - color: $linkColor; + color: $link-color; text-decoration: none; &:hover, &:focus { - color: $linkColorHover; + color: $link-color-hover; text-decoration: none; } diff --git a/public/sass/base/_code.scss b/public/sass/base/_code.scss index c345da0db5d..df3887d338e 100644 --- a/public/sass/base/_code.scss +++ b/public/sass/base/_code.scss @@ -8,9 +8,9 @@ code, pre { @include font-family-monospace(); font-size: $baseFontSize - 2; - background-color: $codeTagBackground; - color: $textColor; - border: 1px solid darken($codeTagBackground, 15%); + background-color: $code-tag-bg; + color: $text-color; + border: 1px solid darken($code-tag-bg, 15%); padding: 2px; } diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 5ada0c3b35d..6910d3a795d 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -244,12 +244,12 @@ a.external-link { .link { - color: $linkColor; + color: $link-color; cursor: pointer; } .link:hover { - color: $linkColorHover; + color: $link-color-hover; } .pointer { diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index af06fd3c627..4435e641eba 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -52,7 +52,7 @@ // Large .btn-large { padding: 6px 20px; - font-size: $fontSizeLarge; + font-size: $font-size-lg; } .btn-small { @@ -92,7 +92,7 @@ .btn-inverse { @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText); box-shadow: none; - border: 1px solid $grafanaTargetFuncHightlight; + border: 1px solid $tight-form-func-highlight-bg; } .btn-text { diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index ef6842f6605..e50ed83a464 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -100,7 +100,7 @@ } div.flot-text { - color: $textColor !important; + color: $text-color !important; } .panel { @@ -204,7 +204,7 @@ div.flot-text { .panel-menu { z-index: 500; position: absolute; - background: $grafanaTargetFuncBackground; + background: $tight-form-func-bg; border: 1px solid black; .panel-menu-row { diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 35252c418ae..3f3d7290d1e 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -79,7 +79,7 @@ i { padding-right: 5px; - color: $linkColorDisabled; + color: $link-color-disabled; } } } diff --git a/public/sass/components/_filter-table.scss b/public/sass/components/_filter-table.scss index 75546af29a1..67ea8327c0c 100644 --- a/public/sass/components/_filter-table.scss +++ b/public/sass/components/_filter-table.scss @@ -19,7 +19,7 @@ .filter-table tr { background: $grafanaListBackground; - border-bottom: 2px solid $pageBackground; + border-bottom: 2px solid $page-bg; } .filter-table th { diff --git a/public/sass/components/_gfbox.scss b/public/sass/components/_gfbox.scss index d1d85ad98a1..50f64cde6a6 100644 --- a/public/sass/components/_gfbox.scss +++ b/public/sass/components/_gfbox.scss @@ -2,7 +2,7 @@ margin: 10px 5px; background-color: $panel-bg; position: relative; - border: 1px solid $grafanaTargetFuncBackground; + border: 1px solid $tight-form-func-bg; } .gf-box-no-margin { @@ -19,7 +19,7 @@ i { font-size: 120%; } - color: $textColor; + color: $text-color; &:hover { color: $white; } @@ -42,9 +42,9 @@ } .gf-box-header { - border-bottom: 1px solid $grafanaTargetFuncBackground; + border-bottom: 1px solid $tight-form-func-bg; overflow: hidden; - background-color: $grafanaTargetBackground; + background-color: $tight-form-bg; .tabs { float: left; } @@ -57,13 +57,13 @@ padding-right: 20px; padding-left: 10px; float: left; - color: $linkColor; + color: $link-color; font-size: 18px; font-weight: normal; line-height: 38px; margin: 0; .fa { padding: 0 8px 0 5px; - color: $textColor; + color: $text-color; } } diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index 82fd07633bb..02ec05fba53 100644 --- a/public/sass/components/_infobox.scss +++ b/public/sass/components/_infobox.scss @@ -11,8 +11,8 @@ .grafana-info-box { position: relative; padding: 5px 15px; - background-color: $grafanaTargetBackground; - border: 1px solid $grafanaTargetBorder; + background-color: $tight-form-bg; + border: 1px solid $tight-form-border; h5 { margin-top: 5px; } diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index a7a96956667..0b524fcf76f 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -62,7 +62,7 @@ } .modal-no-header { - border: 1px solid $grafanaTargetFuncBackground; + border: 1px solid $tight-form-func-bg; text-align: center; h3 { @@ -92,7 +92,7 @@ .confirm-modal-title { font-size: 18px; - color: $linkColor; + color: $link-color; margin-bottom: 15px; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 24f28d06812..9c0a548749e 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -66,7 +66,7 @@ margin: 18px 0 6px 5px; float: left; font-size: 120%; - color: $textColor; + color: $text-color; } .top-nav-btn { @@ -75,7 +75,7 @@ float: left; margin: 0; font-size: 1.4em; - border-right: 1px solid $grafanaTargetBorder; + border-right: 1px solid $tight-form-border; .fa-caret-down { font-size: 55%; @@ -86,12 +86,12 @@ } a { - color: darken($linkColor, 5%); + color: darken($link-color, 5%); background-color: $navbarButtonBackground; display: inline-block; &:hover { background: $navbarButtonBackgroundHighlight; - color: $linkColor; + color: $link-color; // border-bottom: 1px solid $blue; } } @@ -107,7 +107,7 @@ } .top-nav-logo-background { display: inline-block; - border: 1px solid $bodyBackground; + border: 1px solid $body-bg; padding: 4px; border-radius: 50%; background: $iconContainerBackground; @@ -171,7 +171,7 @@ float: left; font-size: 17px; padding: 18px 10px 10px 13px; - color: $linkColor; + color: $link-color; } diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss index c105d234ae0..14861537633 100644 --- a/public/sass/components/_navs.scss +++ b/public/sass/components/_navs.scss @@ -67,7 +67,7 @@ .nav-list > .active > a:focus { color: $white; text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: $linkColor; + background-color: $link-color; } .nav-list [class^="icon-"], .nav-list [class*=" icon-"] { @@ -122,7 +122,7 @@ .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { color: $gray; - background-color: $bodyBackground; + background-color: $body-bg; border: 1px solid #ddd; border-bottom-color: transparent; cursor: default; @@ -133,14 +133,14 @@ // ------------------------- // Make carets use linkColor to start .nav .dropdown-toggle .caret { - border-top-color: $linkColor; - border-bottom-color: $linkColor; + border-top-color: $link-color; + border-bottom-color: $link-color; margin-top: 6px; } .nav .dropdown-toggle:hover .caret, .nav .dropdown-toggle:focus .caret { - border-top-color: $linkColorHover; - border-bottom-color: $linkColorHover; + border-top-color: $link-color-hover; + border-bottom-color: $link-color-hover; } /* move down carets for tabs */ .nav-tabs .dropdown-toggle .caret { diff --git a/public/sass/components/_pagination.scss b/public/sass/components/_pagination.scss index c95fff0126c..505c84ce7df 100644 --- a/public/sass/components/_pagination.scss +++ b/public/sass/components/_pagination.scss @@ -70,7 +70,7 @@ ul > li > a, ul > li > span { padding: $paddingLarge; - font-size: $fontSizeLarge; + font-size: $font-size-lg; } ul > li:first-child > a, ul > li:first-child > span { diff --git a/public/sass/components/_panel_dashlist.scss b/public/sass/components/_panel_dashlist.scss index 4847d41d144..f00b59735c1 100644 --- a/public/sass/components/_panel_dashlist.scss +++ b/public/sass/components/_panel_dashlist.scss @@ -6,8 +6,8 @@ display: block; margin: 5px; padding: 7px; - background-color: $grafanaTargetBackground; - border: 1px solid $grafanaTargetBorder; + background-color: $tight-form-bg; + border: 1px solid $tight-form-border; .fa { float: right; padding-top: 3px; @@ -17,6 +17,6 @@ } &:hover { - background-color: $grafanaTargetFuncBackground; + background-color: $tight-form-func-bg; } } diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index e527507bef5..17f4bceea0f 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -175,7 +175,7 @@ .graph-legend-series-hidden { a { - color: $linkColorDisabled; + color: $link-color-disabled; } } @@ -192,7 +192,7 @@ } .close { margin-right: 5px; - color: $linkColor; + color: $link-color; opacity: 0.7; text-shadow: none; } @@ -286,7 +286,7 @@ } .axisLabel { - color: $textColor; + color: $text-color; font-size: $fontSizeSmall; position: absolute; text-align: center; diff --git a/public/sass/components/_panel_table.scss b/public/sass/components/_panel_table.scss index ad30d3d0d64..ec0c73e2ec7 100644 --- a/public/sass/components/_panel_table.scss +++ b/public/sass/components/_panel_table.scss @@ -37,7 +37,7 @@ border-left-width: 0; &:hover { - background-color: $grafanaTargetFuncBackground; + background-color: $tight-form-func-bg; } &.active { @@ -63,8 +63,8 @@ td { padding: 0.45em 0 0.45em 1.1em; - border-bottom: 2px solid $bodyBackground; - border-right: 2px solid $bodyBackground; + border-bottom: 2px solid $body-bg; + border-right: 2px solid $body-bg; &:first-child { padding-left: 15px; @@ -77,8 +77,8 @@ .table-panel-header-bg { background: $grafanaListAccent; - border-top: 2px solid $bodyBackground; - border-bottom: 2px solid $bodyBackground; + border-top: 2px solid $body-bg; + border-bottom: 2px solid $body-bg; height: 2.0em; position: absolute; top: 0; diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index ec6c23fc984..a8dd1f02d2f 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -9,7 +9,7 @@ $sideMenuWidth: 220px; top: 52px; left: 0; width: $sideMenuWidth; - background-color: $bodyBackground; + background-color: $body-bg; z-index: 101; transform: translate3d(0, -100%, 0); visibility: hidden; @@ -40,7 +40,7 @@ $sideMenuWidth: 220px; } .top-nav-menu-btn { a { - background-color: $pageBackground; + background-color: $page-bg; padding-right: 67px; padding-left: 22px; } @@ -73,7 +73,7 @@ $sideMenuWidth: 220px; display: block; top: 0px; left: $sideMenuWidth; - background-color: $bodyBackground; + background-color: $body-bg; } } } @@ -97,7 +97,7 @@ $sideMenuWidth: 220px; height: 40px; display: inline-block; i { - color: $linkColor; + color: $link-color; opacity: .7; position: relative; left: 7px; @@ -111,7 +111,7 @@ $sideMenuWidth: 220px; } .sidemenu-item { - color: $linkColor; + color: $link-color; line-height: 47px; padding: 0px 10px 0px 10px; display: block; @@ -183,7 +183,7 @@ $sideMenuWidth: 220px; top: 38%; right: 25px; font-size: 14px; - color: $linkColor; + color: $link-color; } .sidemenu-org-avatar, @@ -205,13 +205,13 @@ $sideMenuWidth: 220px; .sidemenu-org-details { padding-left: 10px; - color: $linkColor; + color: $link-color; } .sidemenu-org-name { display: block; font-size: 13px; - color: $linkColorDisabled; + color: $link-color-disabled; } .sidemenu-org-user { diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 46c5f08554e..ed00de860f7 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -4,7 +4,7 @@ } .annotation-disabled, .annotation-disabled a { - color: $linkColorDisabled; + color: $link-color-disabled; } .annotation-segment { @@ -56,7 +56,7 @@ z-index: 1000; font-size: $baseFontSize; border-radius: 3px 3px 0 0; - border: 1px solid $grafanaTargetFuncBackground; + border: 1px solid $tight-form-func-bg; &.multi { .selected { @@ -71,7 +71,7 @@ display: none; } .selected { - background-color: $grafanaTargetFuncHightlight; + background-color: $tight-form-func-highlight-bg; } } } @@ -86,7 +86,7 @@ display: table-cell; line-height: 26px; &:nth-child(2) { - border-left: 1px solid $grafanaTargetFuncBackground; + border-left: 1px solid $tight-form-func-bg; } } @@ -129,5 +129,5 @@ .dash-nav-link { padding: 8px 7px; display: inline-block; - color: $textColor; + color: $text-color; } diff --git a/public/sass/components/_tables_lists.scss b/public/sass/components/_tables_lists.scss index 30983225585..6787ef2869e 100644 --- a/public/sass/components/_tables_lists.scss +++ b/public/sass/components/_tables_lists.scss @@ -37,7 +37,7 @@ display: block; padding: 1px 10px; line-height: 34px; - background-color: $grafanaTargetBackground; + background-color: $tight-form-bg; margin-bottom: 4px; cursor: pointer; } diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index ba12f9df549..f01933927b5 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -5,7 +5,7 @@ margin: 0 0 10px 0; & > li > a { - color: darken($linkColor, 20%); + color: darken($link-color, 20%); } li > a:hover { @@ -19,11 +19,11 @@ border: 1px solid $divider-border-color; background-color: transparent; border-bottom: 1px solid $panel-bg; - color: $linkColor; + color: $link-color; } li.disabled > a { - color: $textColor; + color: $text-color; } .open .dropdown-toggle { diff --git a/public/sass/components/_tagsinput.scss b/public/sass/components/_tagsinput.scss index 3bfdb5547c8..4425311e01b 100644 --- a/public/sass/components/_tagsinput.scss +++ b/public/sass/components/_tagsinput.scss @@ -8,7 +8,7 @@ input { border: none; - border-right: 1px solid $grafanaTargetSegmentBorder; + border-right: 1px solid $tight-form-border; margin: 0px; border-radius: 0; padding: 8px 6px; diff --git a/public/sass/components/_tightform.scss b/public/sass/components/_tightform.scss index e1df5f2ae71..1afbadbb63c 100644 --- a/public/sass/components/_tightform.scss +++ b/public/sass/components/_tightform.scss @@ -1,11 +1,11 @@ .tight-form { - border-top: 1px solid $grafanaTargetBorder; - border-left: 1px solid $grafanaTargetBorder; - border-right: 1px solid $grafanaTargetBorder; - background: $grafanaTargetBackground; + border-top: 1px solid $tight-form-border; + border-left: 1px solid $tight-form-border; + border-right: 1px solid $tight-form-border; + background: $tight-form-bg; &.last { - border-bottom: 1px solid $grafanaTargetBorder; + border-bottom: 1px solid $tight-form-border; } &.borderless { @@ -21,7 +21,7 @@ } .tight-form-container-no-item-borders { - border: 1px solid $grafanaTargetBorder; + border: 1px solid $tight-form-border; border-bottom: none; .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input { @@ -44,7 +44,7 @@ } .tight-form-container { - border-bottom: 1px solid $grafanaTargetBorder; + border-bottom: 1px solid $tight-form-border; } .tight-form-btn { @@ -73,16 +73,19 @@ padding: 8px 7px; display: inline-block; font-weight: normal; - border-right: 1px solid $grafanaTargetSegmentBorder; - color: $grafanaTargetColor; + border-right: 1px solid $tight-form-border; display: inline-block; + color: $text-color; .has-open-function & { padding-top: 25px; } .tight-form-disabled & { - color: $grafanaTargetColorHide; + color: $link-color-disabled; + a { + color: $link-color-disabled; + } } &:hover, &:focus { @@ -90,7 +93,7 @@ } &a:hover { - background: $grafanaTargetFuncBackground; + background: $tight-form-func-bg; } &.last { @@ -108,14 +111,8 @@ } .tight-form-func { - background: $grafanaTargetFuncBackground; - > a { - color: $grafanaTargetColor; - } - > a:hover { - color: $linkColor; - } - + background: $tight-form-func-bg; + &.show-function-controls { padding-top: 5px; min-width: 100px; @@ -134,10 +131,9 @@ input[type=text].tight-form-clear-input { padding: 8px 7px; border: none; margin: 0px; - background: transparent; - color: $grafanaTargetColor; + background: transparent; border-radius: 0; - border-right: 1px solid $grafanaTargetSegmentBorder; + border-right: 1px solid $tight-form-border; } [type=text], @@ -146,7 +142,7 @@ input[type=text].tight-form-clear-input { [type=password] { &.tight-form-input { border: none; - border-right: 1px solid $grafanaTargetSegmentBorder; + border-right: 1px solid $tight-form-border; margin: 0px; border-radius: 0; padding: 8px 6px; @@ -170,7 +166,7 @@ input[type=checkbox].tight-form-checkbox { select.tight-form-input { border: none; - border-right: 1px solid $grafanaTargetSegmentBorder; + border-right: 1px solid $tight-form-border; margin: 0px; border-radius: 0; height: 36px; diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index 275d4a336a0..5230ca5f525 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -36,7 +36,7 @@ } .gf-timepicker-utc { - background-color: $grafanaTargetFuncBackground; + background-color: $tight-form-func-bg; color: $orange; font-size: 75%; padding: 3px; @@ -71,7 +71,7 @@ background-image: none; border: none; padding: 6px 9px; - color: $textColor; + color: $text-color; &.active span { color: $blue; font-weight: bold; @@ -84,5 +84,5 @@ } .input-datetime-format { - color: $linkColorDisabled + color: $link-color-disabled } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index de28297b319..42c2c49a535 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -23,7 +23,7 @@ } .page-container { - background-color: $pageBackground; + background-color: $page-bg; position: relative; padding: 25px 56px 10px 56px; max-width: 1060px; @@ -61,8 +61,8 @@ h2 { margin-left: 15px; margin-bottom: 0px; - font-size: $fontSizeLarge; - color: $textColor; + font-size: $font-size-lg; + color: $text-color; i { padding-right: 6px; } diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss index 6d7def7e2dc..0e64f0dec73 100644 --- a/public/sass/mixins/_buttons.scss +++ b/public/sass/mixins/_buttons.scss @@ -1,15 +1,15 @@ // Button backgrounds // ------------------ -@mixin buttonBackground($startColor, $endColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { +@mixin buttonBackground($startColor, $endColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { // gradientBar will set the background to a pleasing blend of these, to support IE<=9 - @include gradientBar($startColor, $endColor, $textColor, $textShadow); + @include gradientBar($startColor, $endColor, $text-color, $textShadow); box-shadow: inset 0 -4px rgba(0,0,0,0.3); // in these cases the gradient won't cover the background, so we override &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { - color: $textColor; + color: $text-color; background-image: none; background-color: darken($endColor, 2%); } diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index 980e3ad9284..ded17c0288a 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -78,15 +78,15 @@ // -------------------------------------------------- @mixin font-family-serif() { - font-family: $serifFontFamily; + font-family: $font-family-serif; } @mixin font-family-sans-serif() { - font-family: $sansFontFamily; + font-family: $font-family-sans-serif; } @mixin font-family-monospace() { - font-family: $monoFontFamily; + font-family: $font-family-monospace; } @mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { @@ -278,8 +278,8 @@ } // Gradient Bar Colors for buttons and alerts -@mixin gradientBar($primaryColor, $secondaryColor, $textColor: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { - color: $textColor; +@mixin gradientBar($primaryColor, $secondaryColor, $text-color: #fff, $textShadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: $text-color; text-shadow: $textShadow; @include gradient-vertical($primaryColor, $secondaryColor); border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index f4a3458d038..09fcfde56fb 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -18,7 +18,7 @@ width: 125px; } .icon-gf-grafana_wordmark { - color: $linkColor; + color: $link-color; position: relative; top: -90px; font-size: 3rem; @@ -31,7 +31,7 @@ } .login-tab-header { - background: $grafanaTargetBackground; + background: $tight-form-bg; text-align: center; } @@ -42,14 +42,14 @@ padding: 10px 10px; &.active { - background: darken($grafanaTargetBackground, 5%); + background: darken($tight-form-bg, 5%); color: $white; } font-weight: bold; display: inline-block; width: 170px; - color: $textColor; + color: $text-color; } .password-strength { @@ -58,7 +58,7 @@ overflow: visible; white-space: nowrap; padding-top: 3px; - color: darken($textColor, 20%); + color: darken($text-color, 20%); border-top: 3px solid $red; &.password-strength-ok { width: 40%; @@ -102,7 +102,7 @@ } .password-recovery { - background: $grafanaTargetBackground; + background: $tight-form-bg; margin-top: 10px; padding: 10px; a { @@ -143,7 +143,7 @@ .invite-box { text-align: center; - border: 1px solid $grafanaTargetFuncBackground; + border: 1px solid $tight-form-func-bg; background-color: $panel-bg; width: 800px; margin-left: auto; From 6f794b7d11448ef1d4de8cfd0125da9c793abcbf Mon Sep 17 00:00:00 2001 From: Utkarsh Bhatnagar Date: Tue, 16 Feb 2016 00:43:48 -0800 Subject: [PATCH 095/444] Adding gofmt test run to contributing.md --- CONTRIBUTING.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index aaf01cd3280..a7ea4d0177a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,6 +10,11 @@ grunt && grunt watch grunt karma:dev ``` +### Rerun tests for backend assets before commit +``` +test -z "$(gofmt -s -l . | grep -v Godeps/_workspace/src/ | tee /dev/stderr)" +``` + ### Run tests before commit ``` grunt test From 86ef33f84f12afc76eee72b829da99eda07b2fd4 Mon Sep 17 00:00:00 2001 From: Utkarsh Bhatnagar Date: Tue, 16 Feb 2016 00:45:07 -0800 Subject: [PATCH 096/444] fixed language --- CONTRIBUTING.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a7ea4d0177a..e79741bbe6c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -10,12 +10,12 @@ grunt && grunt watch grunt karma:dev ``` -### Rerun tests for backend assets before commit +### Run tests for backend assets before commit ``` test -z "$(gofmt -s -l . | grep -v Godeps/_workspace/src/ | tee /dev/stderr)" ``` -### Run tests before commit +### Run tests for frontend assets before commit ``` grunt test godep go test -v ./pkg/... From 6a7e9134a50bd73fa61b06ef72b5b46d7e6713ea Mon Sep 17 00:00:00 2001 From: bergquist Date: Tue, 16 Feb 2016 10:09:26 +0100 Subject: [PATCH 097/444] fix(renderer): add .exe for phantomjs on windows closes #3657 --- CHANGELOG.md | 1 + pkg/components/renderer/renderer.go | 9 ++++++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index eb76150c21f..acefeaec860 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -26,6 +26,7 @@ * **InfluxDB**: Fix for InfluxDB and table panel when using Format As Table and having group by time, fixes [#3928](https://github.com/grafana/grafana/issues/3928) * **Panel Time shift**: Fix for panel time range and using dashboard times liek `Today` and `This Week`, fixes [#3941](https://github.com/grafana/grafana/issues/3941) * **Row repeat**: Repeated rows will now appear next to each other and not by the bottom of the dashboard, fixes [#3942](https://github.com/grafana/grafana/issues/3942) +* **Png renderer**: Fix for phantomjs path on windows, fixes [#3657](https://github.com/grafana/grafana/issues/3657) # 2.6.1 (unrelased, 2.6.x branch) diff --git a/pkg/components/renderer/renderer.go b/pkg/components/renderer/renderer.go index 1cff3e0ac17..d72ceca9c3d 100644 --- a/pkg/components/renderer/renderer.go +++ b/pkg/components/renderer/renderer.go @@ -5,6 +5,7 @@ import ( "os" "os/exec" "path/filepath" + "runtime" "time" "github.com/grafana/grafana/pkg/log" @@ -21,7 +22,13 @@ type RenderOpts struct { func RenderToPng(params *RenderOpts) (string, error) { log.Info("PhantomRenderer::renderToPng url %v", params.Url) - binPath, _ := filepath.Abs(filepath.Join(setting.PhantomDir, "phantomjs")) + + var executable = "phantomjs" + if runtime.GOOS == "windows" { + executable = executable + ".exe" + } + + binPath, _ := filepath.Abs(filepath.Join(setting.PhantomDir, executable)) scriptPath, _ := filepath.Abs(filepath.Join(setting.PhantomDir, "render.js")) pngPath, _ := filepath.Abs(filepath.Join(setting.ImagesDir, util.GetRandomString(20))) pngPath = pngPath + ".png" From 7c917156eee01048660531b6e2f16b26ee7039ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 10:42:06 +0100 Subject: [PATCH 098/444] ux(sass): variable refactoring --- .../dashboard/timepicker/timepicker.html | 2 +- public/sass/_grafana.scss | 5 +- public/sass/_variables.dark.scss | 84 +---- public/sass/_variables.light.scss | 50 ++- public/sass/_variables.scss | 119 ++++++ public/sass/base/_base.scss | 36 -- public/sass/base/_code.scss | 10 +- public/sass/base/_forms.scss | 20 +- public/sass/base/_reboot.scss | 349 ++++++++++++++++++ public/sass/base/_type.scss | 135 ++++--- .../sass/bootstrap/responsive-767px-max.scss | 2 +- public/sass/components/_alerts.scss | 8 +- public/sass/components/_buttons.scss | 8 +- public/sass/components/_dashboard.scss | 2 +- public/sass/components/_dropdown.scss | 4 +- public/sass/components/_gf-form.scss | 2 +- public/sass/components/_modals.scss | 2 +- public/sass/components/_navbar.scss | 7 +- public/sass/components/_navs.scss | 10 +- public/sass/components/_pagination.scss | 6 +- public/sass/components/_panel_graph.scss | 4 +- public/sass/components/_sidemenu.scss | 1 - public/sass/components/_submenu.scss | 2 +- public/sass/components/_tags.scss | 2 +- public/sass/mixins/_hover.scss | 59 +++ public/sass/mixins/_mixins.scss | 8 +- public/sass/utils/_utils.scss | 2 +- 27 files changed, 706 insertions(+), 233 deletions(-) delete mode 100644 public/sass/base/_base.scss create mode 100644 public/sass/base/_reboot.scss create mode 100644 public/sass/mixins/_hover.scss diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index 10a1d6820a3..008f4a149ce 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -1,6 +1,6 @@
    -
  • +
  • Zoom Out diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index ddc27cf352e..0922e8f0b0d 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -4,10 +4,12 @@ @import "mixins/breakpoints"; @import "mixins/grid"; @import "mixins/grid-framework"; +@import "mixins/hover"; + // BASE @import "base/normalize"; -@import "base/base"; +@import "base/reboot"; @import "base/type"; @import "base/forms"; @import "base/fonts"; @@ -44,7 +46,6 @@ @import "components/filter-table"; @import "components/scrollbar"; @import "components/old_stuff"; -@import "components/navbar"; @import "components/popovers"; @import "components/alerts"; @import "components/typeahead"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index dd1669f32fc..5fb7fcb982e 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -35,77 +35,26 @@ $critical: #ed2e18; // ------------------------- $body-bg: rgb(20,20,20); $page-bg: $gray-darker; +$body-color: $gray-lighter; $text-color: $gray-lighter; // Links // ------------------------- -$link-color: darken($white,11%); +$link-color: darken($white,11%); $link-color-disabled: darken($link-color,30%); -$link-color-hover: $white; +$link-hover-color: $white; // Typography // ------------------------- +$headings-color: darken($white,11%); +$abbr-border-color: $gray-light !default; -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-serif: Georgia, "Times New Roman", Times, serif; -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; -$font-family-base: $font-family-sans-serif !default; +$text-muted: darken($link-color,30%); -$font-size-root: 14px !default; - -$font-size-base: 1rem !default; -$font-size-lg: 1.25rem !default; -$font-size-sm: .875rem !default; -$font-size-xs: .75rem !default; - -$line-height-base: 1.5 !default; - -$font-size-h1: 2.5rem !default; -$font-size-h2: 2rem !default; -$font-size-h3: 1.75rem !default; -$font-size-h4: 1.5rem !default; -$font-size-h5: 1.25rem !default; -$font-size-h6: 1rem !default; - -$display1-size: 6rem !default; -$display2-size: 5.5rem !default; -$display3-size: 4.5rem !default; -$display4-size: 3.5rem !default; - -$display1-weight: 300 !default; -$display2-weight: 300 !default; -$display3-weight: 300 !default; -$display4-weight: 300 !default; - -$baseFontSize: 14px; -$baseFontWeight: 400; -$baseFontFamily: $font-family-sans-serif; -$baseLineHeight: 20px; -$altFontFamily: $font-family-serif; -$fontWeightSemi: 600; - -$headingsFontFamily: inherit; // empty to use BS default, $baseFontFamily -$headingsFontWeight: 400; // instead of browser default, bold -$headingsFontStyle: normal; -$headingsColor: darken($white,11%); // empty to use BS default, $text-color -$inputText: $gray-light; - -// Component sizing -// ------------------------- -// Based on 14px font-size and 20px line-height - -$font-size-lg: $baseFontSize * 1.25; // ~18px -$fontSizeSmall: $baseFontSize * 0.85; // ~12px -$fontSizeMini: $baseFontSize * 0.75; // ~11px - -$paddingLarge: 11px 19px; // 44px -$paddingSmall: 2px 10px; // 26px -$paddingMini: 0px 6px; // 22px - -$baseBorderRadius: 3px; -$borderRadiusLarge: 4px; -$borderRadiusSmall: 2px; +$blockquote-small-color: $gray-light !default; +$blockquote-border-color: $gray-lighter !default; +$hr-border-color: rgba(0,0,0,.1) !default; // Panel // ------------------------- @@ -140,10 +89,10 @@ $scrollbarBorder: black; // Tables // ------------------------- -$tableBackground: transparent; // overall background-color -$tableBackgroundAccent: rgba(100, 100, 100, 0.3); // for striping -$tableBackgroundHover: $gray-dark; // for hover -$tableBorder: $gray-dark; // table and cell border +$table-bg: transparent; // overall background-color +$table-bg-accent: rgba(100, 100, 100, 0.3); // for striping +$table-bg-hover: $gray-dark; // for hover +$table-border: $gray-dark; // table and cell border // Buttons // ------------------------- @@ -190,9 +139,10 @@ $heroUnitLeadColor: inherit; $inputBackground: lighten($gray-dark,5%); $inputBorder: lighten($gray-dark,5%); $inputBorderRadius: $baseBorderRadius; +$inputText: $gray-light; $inputDisabledBackground: #555; $formActionsBackground: transparent; -$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $labelBackground: $gray-dark; @@ -281,8 +231,8 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$warningText: darken(#c09853, 10%); -$warningBackground: $orange; +$state-warning-text: darken(#c09853, 10%); +$state-warning-bg: $orange; $errorText: #b94a48; $errorBackground: $btnDangerBackground; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 580297b3c22..02631edda52 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -39,33 +39,27 @@ $critical: #EC2128; // Scaffolding // ------------------------- -$body-bg: rgb(20,20,20); -$page-bg: $gray-darker; -$text-color: $gray-lighter; +$body-bg: rgb(20,20,20); +$page-bg: $gray-darker; +$body-color: $gray-lighter; +$text-color: $gray-lighter; // Links // ------------------------- $link-color: $gray; $link-color-disabled: lighten($link-color,30%); -$link-color-hover: darken($link-color, 20%); +$link-hover-color: darken($link-color, 20%); // Typography // ------------------------- -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-serif: Georgia, "Times New Roman", Times, serif; -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; +$headings-color: $text-color; +$abbr-border-color: $gray-light !default; +$text-muted: darken($link-color,30%); -$baseFontSize: 14px; -$baseFontWeight: 400; -$fontWeightSemi: 600; -$baseFontFamily: $font-family-sans-serif; -$baseLineHeight: 20px; -$altFontFamily: $font-family-serif; +$blockquote-small-color: $gray-light !default; +$blockquote-border-color: $gray-lighter !default; -$headingsFontFamily: inherit; // inherit. empty to use BS default, $baseFontFamily -$headingsFontWeight: normal; // instead of browser default, bold -$headingsFontStyle: normal; -$headingsColor: $text-color; // empty to use BS default, $text-color +$hr-border-color: rgba(0,0,0,.1) !default; // Panel // ------------------------- @@ -93,9 +87,9 @@ $code-tag-bg: #ddd; // ------------------------- // Based on 14px font-size and 20px line-height -$font-size-lg: $baseFontSize * 1.25; // ~18px -$fontSizeSmall: $baseFontSize * 0.85; // ~12px -$fontSizeMini: $baseFontSize * 0.75; // ~11px +$font-size-lg: $font-size-base * 1.25; // ~18px +$font-size-sm: $font-size-base * 0.85; // ~12px +$font-size-xs: $font-size-base * 0.75; // ~11px $paddingLarge: 22px 30px; // 66px $paddingSmall: 2px 10px; // 26px @@ -117,10 +111,12 @@ $grafanaListMainLinkColor: $text-color; // Tables // ------------------------- -$tableBackground: transparent; // overall background-color -$tableBackgroundAccent: #f9f9f9; // for striping -$tableBackgroundHover: #E8F8FD; // for hover -$tableBorder: #ddd; // table and cell border +$table-bg: transparent; // overall background-color +$table-bg-accent: #f9f9f9; // for striping +$table-bg-hover: #E8F8FD; // for hover +$table-bg-active: $table-bg-hover !default; +$table-border: #ddd; // table and cell border + // Scrollbars $scrollbarBackground: $gray-lighter; @@ -168,7 +164,7 @@ $inputBorder: $gray-lighter; $inputBorderRadius: $baseBorderRadius; $inputDisabledBackground: $gray-lighter; $formActionsBackground: #f5f5f5; -$inputHeight: $baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border +$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border $inputText: #020202; $labelBackground: #f8f8f8; @@ -272,8 +268,8 @@ $heroUnitLeadColor: inherit; // Form states and alerts // ------------------------- -$warningText: lighten($orange, 10%); -$warningBackground: $orange; +$state-warning-text: lighten($orange, 10%); +$state-warning-bg: $orange; $warningBorder: transparent; $errorText: lighten($red, 10%); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 7e80b5fda21..9e48afbefa3 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -1,5 +1,48 @@ +// Options +// +// Quickly modify global styling by enabling or disabling optional features. + +$enable-flex: false !default; +$enable-rounded: true !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: false !default; +$enable-hover-media-query: false !default; +$enable-grid-classes: true !default; +$enable-print-styles: true !default; + + +// Spacing +// +// Control the default styling of most Bootstrap elements by modifying these +// variables. Mostly focused on spacing. + +$spacer: 1rem !default; +$spacer-x: $spacer !default; +$spacer-y: $spacer !default; +$spacers: ( + 0: ( + x: 0, + y: 0 + ), + 1: ( + x: $spacer-x, + y: $spacer-y + ), + 2: ( + x: ($spacer-x * 1.5), + y: ($spacer-y * 1.5) + ), + 3: ( + x: ($spacer-x * 3), + y: ($spacer-y * 3) + ) +) !default; +$border-width: 1px !default; + + // Grid breakpoints // // Define the minimum and maximum dimensions at which your layout will change, @@ -44,3 +87,79 @@ $form-sizes: ( xxxl: 400px ) !default; + +// Typography +// ------------------------- + +$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; +$font-family-base: $font-family-sans-serif !default; + +$font-size-root: 14px !default; + +$font-size-base: 1rem !default; +$font-size-lg: 1.25rem !default; +$font-size-sm: .875rem !default; +$font-size-xs: .75rem !default; + +$line-height-base: 1.5 !default; +$font-weight-semi-bold: 600; + +$font-size-h1: 2.5rem !default; +$font-size-h2: 2rem !default; +$font-size-h3: 1.75rem !default; +$font-size-h4: 1.5rem !default; +$font-size-h5: 1.25rem !default; +$font-size-h6: 1rem !default; + +$display1-size: 6rem !default; +$display2-size: 5.5rem !default; +$display3-size: 4.5rem !default; +$display4-size: 3.5rem !default; + +$display1-weight: 400 !default; +$display2-weight: 400 !default; +$display3-weight: 400 !default; +$display4-weight: 400 !default; + +$lead-font-size: 1.25rem !default; +$lead-font-weight: 300 !default; + +$headings-margin-bottom: ($spacer / 2) !default; +$headings-font-family: inherit !default; +$headings-font-weight: 400 !default; +$headings-line-height: 1.1 !default; + +$blockquote-font-size: ($font-size-base * 1.25) !default; +$blockquote-border-width: .25rem !default; + +$hr-border-width: $border-width !default; + +$dt-font-weight: bold !default; + +$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; +$nested-kbd-font-weight: bold !default; + +$list-inline-padding: 5px !default; + + +$paddingLarge: 11px 19px; // 44px +$paddingSmall: 2px 10px; // 26px +$paddingMini: 0px 6px; // 22px + +$baseBorderRadius: 3px; +$borderRadiusLarge: 4px; +$borderRadiusSmall: 2px; + +// Links +// ------------------------- +$link-decoration: none !default; +$link-hover-decoration: none !default; + +// Tables +// +// Customizes the `.table` component with basic values, each used across all table variations. + +$table-cell-padding: .75rem !default; +$table-sm-cell-padding: .3rem !default; \ No newline at end of file diff --git a/public/sass/base/_base.scss b/public/sass/base/_base.scss deleted file mode 100644 index ef8f243d07d..00000000000 --- a/public/sass/base/_base.scss +++ /dev/null @@ -1,36 +0,0 @@ -html { - height: 100%; -} - -body { - height: 100%; - margin: 0; - font-family: $baseFontFamily; - font-size: $baseFontSize; - line-height: $baseLineHeight; - color: $text-color; - background-color: $body-bg; -} - - -// Links -// ------------------------- - -a { - color: $link-color; - text-decoration: none; - - &:hover, - &:focus { - color: $link-color-hover; - text-decoration: none; - } - - &:focus { - @include tab-focus(); - } -} - -img { - vertical-align: middle; -} diff --git a/public/sass/base/_code.scss b/public/sass/base/_code.scss index df3887d338e..db7a8cfab18 100644 --- a/public/sass/base/_code.scss +++ b/public/sass/base/_code.scss @@ -7,7 +7,7 @@ code, pre { @include font-family-monospace(); - font-size: $baseFontSize - 2; + font-size: $font-size-base - 2; background-color: $code-tag-bg; color: $text-color; border: 1px solid darken($code-tag-bg, 15%); @@ -25,9 +25,9 @@ code { // Blocks of code pre { display: block; - margin: 0 0 $baseLineHeight / 2; - font-size: $baseFontSize - 1; // 14px to 13px - line-height: $baseLineHeight; + margin: 0 0 $line-height-base / 2; + font-size: $font-size-base - 1; // 14px to 13px + line-height: $line-height-base; word-break: break-all; word-wrap: break-word; white-space: pre; @@ -36,7 +36,7 @@ pre { // Make prettyprint styles more spaced out for readability &.prettyprint { - margin-bottom: $baseLineHeight; + margin-bottom: $line-height-base; } // Account for some code outputs that place code tags in pre tags diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index 0dd71b6e000..441f0341f27 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -8,7 +8,7 @@ // Make all forms have space below them form { - margin: 0 0 $baseLineHeight; + margin: 0 0 $line-height-base; } fieldset { @@ -22,16 +22,16 @@ legend { display: block; width: 100%; padding: 0; - margin-bottom: $baseLineHeight; - font-size: $baseFontSize * 1.5; - line-height: $baseLineHeight * 2; + margin-bottom: $line-height-base; + font-size: $font-size-base * 1.5; + line-height: $line-height-base * 2; color: $gray-dark; border: 0; border-bottom: 1px solid #e5e5e5; // Small small { - font-size: $baseLineHeight * .75; + font-size: $line-height-base * .75; color: $gray-light; } } @@ -42,13 +42,13 @@ input, button, select, textarea { - @include font-shorthand($baseFontSize,normal,$baseLineHeight); // Set size, weight, line-height here + @include font-shorthand($font-size-base,normal,$line-height-base); // Set size, weight, line-height here } input, button, select, textarea { - font-family: $baseFontFamily; // And only set font-family here for those that need it (note the missing label element) + font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element) } // Identify controls by their labels @@ -78,10 +78,10 @@ input[type="tel"], input[type="color"], .uneditable-input { display: inline-block; - height: $baseLineHeight; + height: $line-height-base; padding: 4px 6px; - font-size: $baseFontSize; - line-height: $baseLineHeight; + font-size: $font-size-base; + line-height: $line-height-base; color: $inputText; vertical-align: top; } diff --git a/public/sass/base/_reboot.scss b/public/sass/base/_reboot.scss new file mode 100644 index 00000000000..646a92d549e --- /dev/null +++ b/public/sass/base/_reboot.scss @@ -0,0 +1,349 @@ +// scss-lint:disable ImportantRule, QualifyingElement, DuplicateProperty + +// Reboot +// +// Global resets to common HTML elements and more for easier usage by Bootstrap. +// Adds additional rules on top of Normalize.css, including several overrides. + + +// Reset the box-sizing +// +// Change from `box-sizing: content-box` to `border-box` so that when you add +// `padding` or `border`s to an element, the overall declared `width` does not +// change. For example, `width: 100px;` will always be `100px` despite the +// `border: 10px solid red;` and `padding: 20px;`. +// +// Heads up! This reset may cause conflicts with some third-party widgets. For +// recommendations on resolving such conflicts, see +// http://getbootstrap.com/getting-started/#third-box-sizing. +// +// Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ + +html { + box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + + +// Make viewport responsive +// +// @viewport is needed because IE 10+ doesn't honor in +// some cases. See http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/. +// Eventually @viewport will replace . +// +// However, `device-width` is broken on IE 10 on Windows (Phone) 8, +// (see http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ and https://github.com/twbs/bootstrap/issues/10497) +// and the fix for that involves a snippet of JavaScript to sniff the user agent +// and apply some conditional CSS. +// +// See http://getbootstrap.com/getting-started/#support-ie10-width for the relevant hack. +// +// Wrap `@viewport` with `@at-root` for when folks do a nested import (e.g., +// `.class-name { @import "bootstrap"; }`). +@at-root { + @-ms-viewport { width: device-width; } +} + + +// +// Reset HTML, body, and more +// + +html { + // Sets a specific default `font-size` for user with `rem` type scales. + font-size: $font-size-root; + // As a side-effect of setting the @viewport above, + // IE11 & Edge make the scrollbar overlap the content and automatically hide itself when not in use. + // Unfortunately, the auto-showing of the scrollbar is sometimes too sensitive, + // thus making it hard to click on stuff near the right edge of the page. + // So we add this style to force IE11 & Edge to use a "normal", non-overlapping, non-auto-hiding scrollbar. + // See https://github.com/twbs/bootstrap/issues/18543 + -ms-overflow-style: scrollbar; + // Changes the default tap highlight to be completely transparent in iOS. + -webkit-tap-highlight-color: rgba(0,0,0,0); + height: 100%; +} + +body { + // Make the `body` use the `font-size-root` + font-family: $font-family-base; + font-size: $font-size-base; + line-height: $line-height-base; + // Go easy on the eyes and use something other than `#000` for text + color: $body-color; + // By default, `` has no `background-color` so we set one as a best practice. + background-color: $body-bg; + height: 100%; +} + +// Suppress the focus outline on elements that cannot be accessed via keyboard. +// This prevents an unwanted focus outline from appearing around elements that +// might still respond to pointer events. +// +// Credit: https://github.com/suitcss/base +[tabindex="-1"]:focus { + outline: none !important; +} + + +// +// Typography +// + +// Remove top margins from headings +// +// By default, `

    `-`

    ` all receive top and bottom margins. We nuke the top +// margin for easier control within type scales as it avoids margin collapsing. +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: .5rem; +} + +// Reset margins on paragraphs +// +// Similarly, the top margin on `

    `s get reset. However, we also reset the +// bottom margin to use `rem` units instead of `em`. +p { + margin-top: 0; + margin-bottom: 1rem; +} + +// Abbreviations and acronyms +abbr[title], +// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 +abbr[data-original-title] { + cursor: help; + border-bottom: 1px dotted $abbr-border-color; +} + +address { + margin-bottom: 1rem; + font-style: normal; + line-height: inherit; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: 1rem; +} + +ol ol, +ul ul, +ol ul, +ul ol { + margin-bottom: 0; +} + +dt { + font-weight: $dt-font-weight; +} + +dd { + margin-bottom: .5rem; + margin-left: 0; // Undo browser default +} + +blockquote { + margin: 0 0 1rem; +} + + +// +// Links +// + +a { + color: $link-color; + text-decoration: $link-decoration; + + @include hover-focus { + color: $link-hover-color; + text-decoration: $link-hover-decoration; + } + + &:focus { + @include tab-focus(); + } +} + + +// +// Code +// + +pre { + // Remove browser default top margin + margin-top: 0; + // Reset browser default of `1em` to use `rem`s + margin-bottom: 1rem; +} + + +// +// Figures +// + +figure { + // Normalize adds `margin` to `figure`s as browsers apply it inconsistently. + // We reset that to create a better flow in-page. + margin: 0 0 1rem; +} + + +// +// Images +// + +img { + // By default, ``s are `inline-block`. This assumes that, and vertically + // centers them. This won't apply should you reset them to `block` level. + vertical-align: middle; + // Note: ``s are deliberately not made responsive by default. + // For the rationale behind this, see the comments on the `.img-fluid` class. +} + + +// iOS "clickable elements" fix for role="button" +// +// Fixes "clickability" issue (and more generally, the firing of events such as focus as well) +// for traditionally non-focusable elements with role="button" +// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile + +[role="button"] { + cursor: pointer; +} + + +// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property. +// +// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11 +// DON'T remove the click delay when `` is present. +// However, they DO support removing the click delay via `touch-action: manipulation`. +// See: +// * http://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch +// * http://caniuse.com/#feat=css-touch-action +// * http://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay + +a, +area, +button, +[role="button"], +input, +label, +select, +summary, +textarea { + touch-action: manipulation; +} + + +// +// Tables +// + +table { + // Reset for nesting within parents with `background-color`. + background-color: $table-bg; +} + +caption { + padding-top: $table-cell-padding; + padding-bottom: $table-cell-padding; + color: $text-muted; + text-align: left; + caption-side: bottom; +} + +th { + // Centered by default, but left-align-ed to match the `td`s below. + text-align: left; +} + + +// +// Forms +// + +label { + // Allow labels to use `margin` for spacing. + display: inline-block; + margin-bottom: .5rem; +} + +// Work around a Firefox/IE bug where the transparent `button` background +// results in a loss of the default `button` focus styles. +// +// Credit: https://github.com/suitcss/base/ +button:focus { + outline: 1px dotted; + outline: 5px auto -webkit-focus-ring-color; +} + +input, +button, +select, +textarea { + // Remove all `margin`s so our classes don't have to do it themselves. + margin: 0; + // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are + // properly inherited. However, `line-height` isn't addressed there. Using this + // ensures we don't need to unnecessarily redeclare the global font stack. + line-height: inherit; + // iOS adds rounded borders by default + border-radius: 0; +} + +textarea { + // Textareas should really only resize vertically so they don't break their (horizontal) containers. + resize: vertical; +} + +fieldset { + // Chrome and Firefox set a `min-width: min-content;` on fieldsets, + // so we reset that to ensure it behaves more like a standard block element. + // See https://github.com/twbs/bootstrap/issues/12359. + min-width: 0; + // Reset the default outline behavior of fieldsets so they don't affect page layout. + padding: 0; + margin: 0; + border: 0; +} + +legend { + // Reset the entire legend element to match the `fieldset` + display: block; + width: 100%; + padding: 0; + margin-bottom: .5rem; + font-size: 1.5rem; + line-height: inherit; +// border: 0; +} + +input[type="search"] { + // This overrides the extra rounded corners on search inputs in iOS so that our + // `.form-control` class can properly style them. Note that this cannot simply + // be added to `.form-control` as it's not specific enough. For details, see + // https://github.com/twbs/bootstrap/issues/11586. + -webkit-appearance: none; +} + +// todo: needed? +output { + display: inline-block; +// font-size: $font-size-base; +// line-height: $line-height; +// color: $input-color; +} + +// Always hide an element with the `hidden` HTML attribute (from PureCSS). +[hidden] { + display: none !important; +} diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 6910d3a795d..60a02755fe7 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -7,13 +7,13 @@ // ------------------------- p { - margin: 0 0 $baseLineHeight / 2; + margin: 0 0 $line-height-base / 2; } .lead { - margin-bottom: $baseLineHeight; - font-size: $baseFontSize * 1.5; + margin-bottom: $line-height-base; + font-size: $font-size-base * 1.5; font-weight: 200; - line-height: $baseLineHeight * 1.5; + line-height: $line-height-base * 1.5; } // Emphasis & misc @@ -21,11 +21,9 @@ p { // ------------------------- // Ex: 14px base font * 85% = about 12px -.small, small { font-size: 85%; } -.large { font-size: 120%; } - +small { font-size: 85%; } strong { font-weight: bold; } -em { font-style: italic; color: $headingsColor; } +em { font-style: italic; color: $headings-color; } cite { font-style: normal; } // Utility classes @@ -33,9 +31,9 @@ cite { font-style: normal; } a.muted:hover, a.muted:focus { color: darken($gray-light, 10%); } -.text-warning { color: $warningText; } +.text-warning { color: $state-warning-text; } a.text-warning:hover, -a.text-warning:focus { color: darken($warningText, 10%); } +a.text-warning:focus { color: darken($state-warning-text, 10%); } .text-error { color: $errorText; } a.text-error:hover, @@ -54,40 +52,77 @@ a { cursor: pointer; } .text-right { text-align: right; } .text-center { text-align: center; } - +// // Headings -// ------------------------- +// -h1, h2, h3, h4, h5, h6 { - margin: ($baseLineHeight / 2) 0; - font-family: $headingsFontFamily; - font-weight: $headingsFontWeight; - line-height: $baseLineHeight; - color: $headingsColor; - text-rendering: optimizelegibility; // Fix the character spacing for headings - font-style: $headingsFontStyle; - small { - font-weight: normal; - line-height: 1; - color: $gray-light; - } +h1, h2, h3, h4, h5, h6, +.h1, .h2, .h3, .h4, .h5, .h6 { + margin-bottom: $headings-margin-bottom; + font-family: $headings-font-family; + font-weight: $headings-font-weight; + line-height: $headings-line-height; + color: $headings-color; } -h1, -h2, -h3 { line-height: $baseLineHeight * 2; } +h1, .h1 { font-size: $font-size-h1; } +h2, .h2 { font-size: $font-size-h2; } +h3, .h3 { font-size: $font-size-h3; } +h4, .h4 { font-size: $font-size-h4; } +h5, .h5 { font-size: $font-size-h5; } +h6, .h6 { font-size: $font-size-h6; } -h1 { font-size: $baseFontSize * 2.00; } // ~38px -h2 { font-size: $baseFontSize * 1.75; } // ~32px -h3 { font-size: $baseFontSize * 1.50; } // ~24px -h4 { font-size: $baseFontSize * 1.25; } // ~18px -h5 { font-size: $baseFontSize; } -h6 { font-size: $baseFontSize * 0.85; } // ~12px +.lead { + font-size: $lead-font-size; + font-weight: $lead-font-weight; +} -h1 small { font-size: $baseFontSize * 1.75; } // ~24px -h2 small { font-size: $baseFontSize * 1.25; } // ~18px -h3 small { font-size: $baseFontSize; } -h4 small { font-size: $baseFontSize; } +// Type display classes +.display-1 { + font-size: $display1-size; + font-weight: $display1-weight; +} +.display-2 { + font-size: $display2-size; + font-weight: $display2-weight; +} +.display-3 { + font-size: $display3-size; + font-weight: $display3-weight; +} +.display-4 { + font-size: $display4-size; + font-weight: $display4-weight; +} + + +// +// Horizontal rules +// + +hr { + margin-top: $spacer-y; + margin-bottom: $spacer-y; + border: 0; + border-top: $hr-border-width solid $hr-border-color; +} + + +// +// Emphasis +// + +small, +.small { + font-size: 80%; + font-weight: normal; +} + +mark, +.mark { + padding: .2em; + background-color: $state-warning-bg; +} // Lists @@ -96,7 +131,7 @@ h4 small { font-size: $baseFontSize; } // Unordered and Ordered lists ul, ol { padding: 0; - margin: 0 0 $baseLineHeight / 2 25px; + margin: 0 0 $line-height-base / 2 25px; } ul ul, ul ol, @@ -105,7 +140,7 @@ ol ul { margin-bottom: 0; } li { - line-height: $baseLineHeight; + line-height: $line-height-base; } // Remove default list styles @@ -129,17 +164,17 @@ ol.inline { // Description Lists dl { - margin-bottom: $baseLineHeight; + margin-bottom: $line-height-base; } dt, dd { - line-height: $baseLineHeight; + line-height: $line-height-base; } dt { font-weight: bold; } dd { - margin-left: $baseLineHeight / 2; + margin-left: $line-height-base / 2; } // Horizontal layout (like forms) .dl-horizontal { @@ -161,7 +196,7 @@ dd { // Horizontal rules hr { - margin: $baseLineHeight 0; + margin: $line-height-base 0; border: 0; border-top: 1px solid $hrBorder; border-bottom: 1px solid $white; @@ -182,17 +217,17 @@ abbr.initialism { // Blockquotes blockquote { padding: 0 0 0 15px; - margin: 0 0 $baseLineHeight; + margin: 0 0 $line-height-base; border-left: 5px solid $gray-lighter; p { margin-bottom: 0; - font-size: $baseFontSize * 1.25; + font-size: $font-size-base * 1.25; font-weight: 300; line-height: 1.25; } small { display: block; - line-height: $baseLineHeight; + line-height: $line-height-base; color: $gray-light; &:before { content: '\2014 \00A0'; @@ -232,9 +267,9 @@ blockquote:after { // Addresses address { display: block; - margin-bottom: $baseLineHeight; + margin-bottom: $line-height-base; font-style: normal; - line-height: $baseLineHeight; + line-height: $line-height-base; } a.external-link { @@ -249,7 +284,7 @@ a.external-link { } .link:hover { - color: $link-color-hover; + color: $link-hover-color; } .pointer { diff --git a/public/sass/bootstrap/responsive-767px-max.scss b/public/sass/bootstrap/responsive-767px-max.scss index 5c01855cbc2..37d9c11e700 100644 --- a/public/sass/bootstrap/responsive-767px-max.scss +++ b/public/sass/bootstrap/responsive-767px-max.scss @@ -96,7 +96,7 @@ // Block level the page header small tag for readability .page-header h1 small { display: block; - line-height: $baseLineHeight; + line-height: $line-height-base; } // Update checkboxes for iOS diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 914543d9852..9dca45f7c49 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -8,9 +8,9 @@ .alert { padding: 8px 35px 13px 14px; - margin-bottom: $baseLineHeight; + margin-bottom: $line-height-base; text-shadow: 0 1px 0 rgba(255,255,255,.5); - background-color: $warningBackground; + background-color: $state-warning-bg; position: relative; color: $white; text-shadow: 0 1px 0 rgba(0,0,0,.5); @@ -32,7 +32,7 @@ background-color: $infoBackground; } .alert-warning { - background-color: $warningBackground; + background-color: $state-warning-bg; } .page-alert-list { @@ -63,6 +63,6 @@ } .alert-title { - font-weight: $fontWeightSemi; + font-weight: $font-weight-semi-bold; padding-bottom: 2px; } diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 4435e641eba..47d74b8dc89 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -10,8 +10,8 @@ display: inline-block; padding: 8px 12px; margin-right: 10px; - font-size: $baseFontSize; - line-height: $baseLineHeight; + font-size: $font-size-base; + line-height: $line-height-base; text-align: center; vertical-align: middle; cursor: pointer; @@ -57,14 +57,14 @@ .btn-small { padding: 2px 10px; - font-size: $fontSizeSmall; + font-size: $font-size-sm; } .btn-mini { padding: 2px 6px; margin-right: 0; margin-right: 0; - font-size: $fontSizeMini; + font-size: $font-size-xs; } // Set the backgrounds diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index e50ed83a464..c7232dcb26e 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -143,7 +143,7 @@ div.flot-text { .panel-title { border: 0px; - font-weight: $fontWeightSemi; + font-weight: $font-weight-semi-bold; position: relative; cursor: pointer; width: 100%; diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 3f3d7290d1e..7f1d0bedff3 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -61,7 +61,7 @@ .divider { height: 1px; - margin: (($baseLineHeight / 2) - 1) 1px; // 8px 1px + margin: (($line-height-base / 2) - 1) 1px; // 8px 1px overflow: hidden; background-color: $dropdownDividerTop; border-bottom: 1px solid $dropdownDividerBottom; @@ -73,7 +73,7 @@ padding: 3px 20px 3px 15px; clear: both; font-weight: normal; - line-height: $baseLineHeight; + line-height: $line-height-base; color: $dropdownLinkColor; white-space: nowrap; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index ec67c6011c1..a52fed03057 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -43,7 +43,7 @@ $gf-form-margin: 4px; background-color: $labelBackground; display: block; padding: 8px 7px; - font-size: $fontSizeSmall; + font-size: $font-size-sm; margin-right: $gf-form-margin; } diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 0b524fcf76f..435e46f9634 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -126,7 +126,7 @@ .share-snapshot-info-text { margin: 10px 105px; strong { - color: $headingsColor; + color: $headings-color; font-weight: 500; } } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 9c0a548749e..9b0f8df4a0a 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -104,6 +104,7 @@ img { width: 30px; position: relative; + top: -2px; } .top-nav-logo-background { display: inline-block; @@ -111,8 +112,8 @@ padding: 4px; border-radius: 50%; background: $iconContainerBackground; - width: 30px; - height: 30px; + width: 40px; + height: 40px; } .icon-gf-grafana_wordmark { font-size: 21px; @@ -129,7 +130,7 @@ overflow: hidden; white-space: nowrap; display: block; - padding: 16px 17px 16px 13px; + padding: 11px 17px 12px 13px; } .fa-th-large { diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss index 14861537633..2087feef823 100644 --- a/public/sass/components/_navs.scss +++ b/public/sass/components/_navs.scss @@ -8,7 +8,7 @@ .nav { margin-left: 0; - margin-bottom: $baseLineHeight; + margin-bottom: $line-height-base; list-style: none; } @@ -33,7 +33,7 @@ padding: 3px 15px; font-size: 11px; font-weight: bold; - line-height: $baseLineHeight; + line-height: $line-height-base; color: $gray-light; text-shadow: 0 1px 0 rgba(255,255,255,.5); text-transform: uppercase; @@ -109,7 +109,7 @@ .nav-tabs > li > a { padding-top: 8px; padding-bottom: 8px; - line-height: $baseLineHeight; + line-height: $line-height-base; border: 1px solid transparent; @include border-radius(4px 4px 0 0); &:hover, @@ -139,8 +139,8 @@ } .nav .dropdown-toggle:hover .caret, .nav .dropdown-toggle:focus .caret { - border-top-color: $link-color-hover; - border-bottom-color: $link-color-hover; + border-top-color: $link-hover-color; + border-bottom-color: $link-hover-color; } /* move down carets for tabs */ .nav-tabs .dropdown-toggle .caret { diff --git a/public/sass/components/_pagination.scss b/public/sass/components/_pagination.scss index 505c84ce7df..0b87172551b 100644 --- a/public/sass/components/_pagination.scss +++ b/public/sass/components/_pagination.scss @@ -15,7 +15,7 @@ .pagination ul > li > span { float: left; // Collapse white-space padding: 4px 12px; - line-height: $baseLineHeight; + line-height: $line-height-base; text-decoration: none; background-color: $paginationBackground; border: 1px solid $paginationBorder; @@ -100,7 +100,7 @@ ul > li > a, ul > li > span { padding: $paddingSmall; - font-size: $fontSizeSmall; + font-size: $font-size-sm; } } // Mini @@ -108,6 +108,6 @@ ul > li > a, ul > li > span { padding: $paddingMini; - font-size: $fontSizeMini; + font-size: $font-size-xs; } } diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index 17f4bceea0f..2a85d9195ab 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -224,7 +224,7 @@ .graph-tooltip-time { text-align: center; - font-weight: $fontWeightSemi; + font-weight: $font-weight-semi-bold; position: relative; top: -3px; } @@ -287,7 +287,7 @@ .axisLabel { color: $text-color; - font-size: $fontSizeSmall; + font-size: $font-size-sm; position: absolute; text-align: center; font-size: 12px; diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index a8dd1f02d2f..3198a3190f4 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -60,7 +60,6 @@ $sideMenuWidth: 220px; } .sidemenu { - font-weight: $baseFontWeight; list-style: none; margin: 0; padding: 0; diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index ed00de860f7..a3d9ac5e886 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -54,7 +54,7 @@ background-color: $dropdownBackground; box-shadow: 0 0 25px 0 rgba(0,0,0,0.4); z-index: 1000; - font-size: $baseFontSize; + font-size: $font-size-base; border-radius: 3px 3px 0 0; border: 1px solid $tight-form-func-bg; diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss index 80be64a9b05..7932a20a6bb 100644 --- a/public/sass/components/_tags.scss +++ b/public/sass/components/_tags.scss @@ -3,7 +3,7 @@ .badge { display: inline-block; padding: 2px 4px; - font-size: $baseFontSize * .846; + font-size: $font-size-base * .846; font-weight: bold; line-height: 14px; // ensure proper line-height if floated color: $white; diff --git a/public/sass/mixins/_hover.scss b/public/sass/mixins/_hover.scss new file mode 100644 index 00000000000..3a11254e847 --- /dev/null +++ b/public/sass/mixins/_hover.scss @@ -0,0 +1,59 @@ +@mixin hover { + @if $enable-hover-media-query { + // See Media Queries Level 4: http://drafts.csswg.org/mediaqueries/#hover + // Currently shimmed by https://github.com/twbs/mq4-hover-shim + @media (hover: hover) { + &:hover { @content } + } + } + @else { + &:hover { @content } + } +} + +@mixin hover-focus { + @if $enable-hover-media-query { + &:focus { @content } + @include hover { @content } + } + @else { + &:focus, + &:hover { + @content + } + } +} + +@mixin plain-hover-focus { + @if $enable-hover-media-query { + &, + &:focus { + @content + } + @include hover { @content } + } + @else { + &, + &:focus, + &:hover { + @content + } + } +} + +@mixin hover-focus-active { + @if $enable-hover-media-query { + &:focus, + &:active { + @content + } + @include hover { @content } + } + @else { + &:focus, + &:active, + &:hover { + @content + } + } +} diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index ded17c0288a..34135fd1d07 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -89,23 +89,23 @@ font-family: $font-family-monospace; } -@mixin font-shorthand($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { +@mixin font-shorthand($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) { font-size: $size; font-weight: $weight; line-height: $lineHeight; } -@mixin font-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { +@mixin font-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) { @include font-family-serif(); @include font-shorthand($size, $weight, $lineHeight); } -@mixin font-sans-serif($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { +@mixin font-sans-serif($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) { @include font-family-sans-serif(); @include font-shorthand($size, $weight, $lineHeight); } -@mixin monospace($size: $baseFontSize, $weight: normal, $lineHeight: $baseLineHeight) { +@mixin monospace($size: $font-size-base, $weight: normal, $lineHeight: $line-height-base) { @include font-family-monospace; @include font-shorthand($size, $weight, $lineHeight); } diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 9d74bf12741..70c39ecbb34 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -12,7 +12,7 @@ float: right; font-size: 20px; font-weight: bold; - line-height: $baseLineHeight; + line-height: $line-height-base; color: $black; text-shadow: 0 1px 0 rgba(255,255,255,1); @include opacity(20); From b05939ec9a7eff16bd8aa045ba5dba2ec980b094 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 12:15:09 +0100 Subject: [PATCH 099/444] ux(sass): work on sass variables, getting messy --- .../datasources/partials/http_settings.html | 10 +- .../features/profile/partials/profile.html | 59 ++++----- public/sass/_grafana.scss | 2 +- public/sass/_variables.dark.scss | 92 +++++--------- public/sass/_variables.light.scss | 86 ++++--------- public/sass/_variables.scss | 57 +++++++-- public/sass/base/_forms.scss | 59 +++++++-- public/sass/base/_type.scss | 8 -- public/sass/components/_color_picker.scss | 2 +- public/sass/components/_dropdown.scss | 3 +- public/sass/components/_gf-form.scss | 92 ++++++++------ public/sass/components/_pagination.scss | 113 ------------------ public/sass/components/_tagsinput.scss | 2 +- public/sass/components/_tooltip.scss | 3 +- public/sass/layout/_page.scss | 3 +- public/sass/mixins/_forms.scss | 73 +++++++++++ public/sass/mixins/_mixins.scss | 2 +- 17 files changed, 315 insertions(+), 351 deletions(-) delete mode 100644 public/sass/components/_pagination.scss create mode 100644 public/sass/mixins/_forms.scss diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index f12e3b4e4c7..23680ebb9a7 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -4,19 +4,19 @@

    Http settings

    - Url + Url
    - + Access Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request
    - + Http Auth @@ -24,14 +24,14 @@
    - + User
    - + Passord diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 6d50a7eff4b..c5e1780ef70 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -10,19 +10,19 @@

    Preferences

    - Name + Name
    - Email + Email
    - Username + Username
    - UI Theme + UI Theme
    @@ -36,29 +36,30 @@ Change Password
    -

    Organizations

    -
- - - - - - - - - - - - - - -
NameRole
{{org.name}}{{org.role}} - - Current - - - Select - -
-
+
+

Organizations

+ + + + + + + + + + + + + + + +
NameRole
{{org.name}}{{org.role}} + + Current + + + Select + +
+
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 0922e8f0b0d..7af990353bf 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -5,6 +5,7 @@ @import "mixins/grid"; @import "mixins/grid-framework"; @import "mixins/hover"; +@import "mixins/forms"; // BASE @@ -38,7 +39,6 @@ @import "components/sidemenu"; @import "components/navbar"; @import "components/gfbox"; -@import "components/pagination"; @import "components/tabs"; @import "components/timepicker"; @import "components/filter-controls"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 5fb7fcb982e..d62eed99bb0 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -25,6 +25,11 @@ $pink: #FF4444; $purple: #9933CC; $variable: #32D1DF; +$brand-primary: $blue-dark; +$brand-success: $green; +$brand-warning: $orange; +$brand-danger: $red; + // Status colors // ------------------------- $online: #10a345; @@ -46,9 +51,8 @@ $link-hover-color: $white; // Typography // ------------------------- -$headings-color: darken($white,11%); +$headings-color: darken($white,11%); $abbr-border-color: $gray-light !default; - $text-muted: darken($link-color,30%); $blockquote-small-color: $gray-light !default; @@ -56,31 +60,34 @@ $blockquote-border-color: $gray-lighter !default; $hr-border-color: rgba(0,0,0,.1) !default; +// Components +$component-active-color: #fff !default; +$component-active-bg: $brand-primary !default; + // Panel // ------------------------- $panel-bg: $gray-darker; $panel-border: solid 1px $gray-dark; -$divider-border-color: #555; +$divider-border-color: #555; // Graphite Target Editor $tight-form-border: #050505; $tight-form-bg: $gray-dark; - + $tight-form-func-bg: #333; $tight-form-func-highlight-bg: #444; $modal-background: $black; $code-tag-bg: #444; - // Lists -$grafanaListBackground: $gray-dark; -$grafanaListAccent: lighten($gray-darker, 2%); +$grafanaListBackground: $gray-dark; +$grafanaListAccent: lighten($gray-darker, 2%); $grafanaListBorderTop: $gray-dark; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; -$grafanaListMainLinkColor: $text-color; +$grafanaListMainLinkColor: $text-color; // Scrollbars $scrollbarBackground: #3a3a3a; @@ -128,22 +135,19 @@ $iconContainerBackgroundHighlight: lighten($black, 5%); $iconContainerBorder: 1px solid transparent; $iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); -// Hero unit -// ------------------------- -$heroUnitBackground: $gray-dark; -$heroUnitHeadingColor: inherit; -$heroUnitLeadColor: inherit; - // Forms // ------------------------- -$inputBackground: lighten($gray-dark,5%); -$inputBorder: lighten($gray-dark,5%); -$inputBorderRadius: $baseBorderRadius; -$inputText: $gray-light; -$inputDisabledBackground: #555; -$formActionsBackground: transparent; -$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border -$labelBackground: $gray-dark; +$input-bg: lighten($gray-dark,5%); +$input-bg-disabled: #555; + +$input-color: $gray-light; +$input-border-color: lighten($gray-dark,5%); +$input-btn-border-width: 1px; +$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; +$input-border-focus: $input-border-color !default; +$input-box-shadow-focus: rgba(102,175,233,.6) !default; +$input-color-placeholder: #999 !default; +$input-label-bg: $gray-dark; // Search @@ -151,7 +155,7 @@ $searchShadow: 0 0 35px 0 $body-bg; // Dropdowns // ------------------------- -$dropdownBackground: $heroUnitBackground; +$dropdownBackground: $gray-dark; $dropdownBorder: rgba(0,0,0,.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -185,11 +189,6 @@ $zindexModal: 1050; $placeholderText: darken($text-color, 25%); -// Hr border color -// ------------------------- -$hrBorder: $gray-dark; - - // Horizontal forms & lists // ------------------------- $horizontalComponentOffset: 180px; @@ -251,7 +250,7 @@ $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; $tooltipLinkColor: $link-color; -$popoverBackground: $heroUnitBackground; +$popoverBackground: $dropdownBackground; $popoverArrowWidth: 10px; $popoverArrowColor: $popoverBackground; $popoverTitleBackground: $popoverBackground; @@ -262,38 +261,3 @@ $popoverArrowOuterColor: rgba(0,0,0,.25); // images $checkboxImageUrl: '../img/checkbox.png'; - -// GRID -// -------------------------------------------------- - - -// Default 940px grid -// ------------------------- -$gridColumns: 12; -$gridColumnWidth: 60px; -$gridGutterWidth: 20px; -$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); - -// 1200px min -$gridColumnWidth1200: 70px; -$gridGutterWidth1200: 30px; -$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); - -// 768px-979px -$gridColumnWidth768: 42px; -$gridGutterWidth768: 20px; -$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); - - -// Fluid grid -// ------------------------- -$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); -$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); - -// 1200px min -$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); -$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); - -// 768px-979px -$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); -$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 02631edda52..1898f06fd39 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -30,6 +30,11 @@ $pink: #E671B8; $purple: #9954BB; $variable: #2AB2E4; +$brand-primary: $blue-dark; +$brand-success: $green; +$brand-warning: $orange; +$brand-danger: $red; + // Status colors // ------------------------- $online: #01A64F; @@ -53,7 +58,7 @@ $link-hover-color: darken($link-color, 20%); // Typography // ------------------------- $headings-color: $text-color; -$abbr-border-color: $gray-light !default; +$abbr-border-color: $gray-light !default; $text-muted: darken($link-color,30%); $blockquote-small-color: $gray-light !default; @@ -61,9 +66,13 @@ $blockquote-border-color: $gray-lighter !default; $hr-border-color: rgba(0,0,0,.1) !default; +// Components +$component-active-color: #fff !default; +$component-active-bg: $brand-primary !default; + // Panel // ------------------------- - + $panel-bg: $gray-lighter; $panel-border: solid 1px #ddd; @@ -83,22 +92,6 @@ $tight-form-func-highlight-bg: darken($tight-form-bg, 10%); $modal-background: $body-bg; $code-tag-bg: #ddd; -// Component sizing -// ------------------------- -// Based on 14px font-size and 20px line-height - -$font-size-lg: $font-size-base * 1.25; // ~18px -$font-size-sm: $font-size-base * 0.85; // ~12px -$font-size-xs: $font-size-base * 0.75; // ~11px - -$paddingLarge: 22px 30px; // 66px -$paddingSmall: 2px 10px; // 26px -$paddingMini: 2px 6px; // 24px - -$baseBorderRadius: 3px; -$borderRadiusLarge: 4px; -$borderRadiusSmall: 2px; - // Lists $grafanaListBackground: darken($gray-lighter,5%); $grafanaListAccent: darken($gray-lighter,8%); @@ -159,15 +152,17 @@ $iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); // Forms // ------------------------- -$inputBackground: $white; -$inputBorder: $gray-lighter; -$inputBorderRadius: $baseBorderRadius; -$inputDisabledBackground: $gray-lighter; -$formActionsBackground: #f5f5f5; -$inputHeight: $line-height-base + 10px; // base line-height + 8px vertical padding + 2px top/bottom border -$inputText: #020202; -$labelBackground: #f8f8f8; +$input-bg: $white; +$input-bg-disabled: $gray-lighter; +$input-color: #020202; +$input-border-color: $gray-lighter; +$input-btn-border-width: 1px; +$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; +$input-border-focus: #66afe9 !default; +$input-box-shadow-focus: rgba(102,175,233,.6) !default; +$input-color-placeholder: #999 !default; +$input-label-bg: #f8f8f8; // Sidemenu // ------------------------- @@ -259,13 +254,6 @@ $paginationBorder: transparent; $paginationActiveBackground: $blue; -// Hero unit -// ------------------------- -$heroUnitBackground: $gray-lighter; -$heroUnitHeadingColor: inherit; -$heroUnitLeadColor: inherit; - - // Form states and alerts // ------------------------- $state-warning-text: lighten($orange, 10%); @@ -305,36 +293,4 @@ $popoverArrowOuterColor: rgba(0,0,0,.25); // images $checkboxImageUrl: '../img/checkbox_white.png'; -// GRID -// -------------------------------------------------- -// Default 940px grid -// ------------------------- -$gridColumns: 12; -$gridColumnWidth: 60px; -$gridGutterWidth: 20px; -$gridRowWidth: ($gridColumns * $gridColumnWidth) + ($gridGutterWidth * ($gridColumns - 1)); - -// 1200px min -$gridColumnWidth1200: 70px; -$gridGutterWidth1200: 30px; -$gridRowWidth1200: ($gridColumns * $gridColumnWidth1200) + ($gridGutterWidth1200 * ($gridColumns - 1)); - -// 768px-979px -$gridColumnWidth768: 42px; -$gridGutterWidth768: 20px; -$gridRowWidth768: ($gridColumns * $gridColumnWidth768) + ($gridGutterWidth768 * ($gridColumns - 1)); - - -// Fluid grid -// ------------------------- -$fluidGridColumnWidth: percentage($gridColumnWidth/$gridRowWidth); -$fluidGridGutterWidth: percentage($gridGutterWidth/$gridRowWidth); - -// 1200px min -$fluidGridColumnWidth1200: percentage($gridColumnWidth1200/$gridRowWidth1200); -$fluidGridGutterWidth1200: percentage($gridGutterWidth1200/$gridRowWidth1200); - -// 768px-979px -$fluidGridColumnWidth768: percentage($gridColumnWidth768/$gridRowWidth768); -$fluidGridGutterWidth768: percentage($gridGutterWidth768/$gridRowWidth768); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 9e48afbefa3..85666374912 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -106,11 +106,11 @@ $font-size-xs: .75rem !default; $line-height-base: 1.5 !default; $font-weight-semi-bold: 600; -$font-size-h1: 2.5rem !default; -$font-size-h2: 2rem !default; -$font-size-h3: 1.75rem !default; -$font-size-h4: 1.5rem !default; -$font-size-h5: 1.25rem !default; +$font-size-h1: 2.0rem !default; +$font-size-h2: 1.75rem !default; +$font-size-h3: 1.50rem !default; +$font-size-h4: 1.30rem !default; +$font-size-h5: 1.20rem !default; $font-size-h6: 1rem !default; $display1-size: 6rem !default; @@ -143,14 +143,19 @@ $nested-kbd-font-weight: bold !default; $list-inline-padding: 5px !default; +// Components +// +// Define common padding and border radius sizes and more. -$paddingLarge: 11px 19px; // 44px -$paddingSmall: 2px 10px; // 26px -$paddingMini: 0px 6px; // 22px +$line-height-lg: (4 / 3) !default; +$line-height-sm: 1.5 !default; -$baseBorderRadius: 3px; -$borderRadiusLarge: 4px; -$borderRadiusSmall: 2px; +$border-radius: 0.0rem !default; +$border-radius-lg: 0.3rem !default; +$border-radius-sm: 0.2rem !default; + +$caret-width: .3em !default; +$caret-width-lg: $caret-width !default; // Links // ------------------------- @@ -162,4 +167,32 @@ $link-hover-decoration: none !default; // Customizes the `.table` component with basic values, each used across all table variations. $table-cell-padding: .75rem !default; -$table-sm-cell-padding: .3rem !default; \ No newline at end of file +$table-sm-cell-padding: .3rem !default; + +// Forms +$input-padding-x: .75rem !default; +$input-padding-y: .5rem !default; +$input-line-height: 1.25 !default; + +$input-border-radius: $border-radius !default; +$input-border-radius-lg: $border-radius-lg !default; +$input-border-radius-sm: $border-radius-sm !default; + +$input-padding-x-sm: .5rem !default; +$input-padding-y-sm: .25rem !default; + +$input-padding-x-lg: 1.5rem !default; +$input-padding-y-lg: .75rem !default; + +$input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)) !default; +$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default; +$input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)) !default; + +$form-group-margin-bottom: $spacer-y !default; + +$cursor-disabled: not-allowed !default; + +// Form validation icons +$form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; +$form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; +$form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index 441f0341f27..b3d65bc3614 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -78,11 +78,11 @@ input[type="tel"], input[type="color"], .uneditable-input { display: inline-block; - height: $line-height-base; + height: $input-height; + line-height: $input-line-height; padding: 4px 6px; font-size: $font-size-base; - line-height: $line-height-base; - color: $inputText; + color: $input-color; vertical-align: top; } @@ -115,8 +115,8 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - background-color: $inputBackground; - border: 1px solid $inputBorder; + background-color: $input-bg; + border: 1px solid $input-border-color; @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); @include transition("border linear .2s, box-shadow linear .2s"); @@ -149,15 +149,15 @@ input[type="checkbox"] { // Set the height of select and file controls to match text inputs select, input[type="file"] { - height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */ - line-height: $inputHeight; + height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */ + line-height: $input-height; } // Make select elements obey height by applying a border select { width: 220px; // default input width + 10px of padding that doesn't get applied - border: 1px solid $inputBorder; - background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color + border: 1px solid $input-border-color; + background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color } // Make multiple select elements height not fixed @@ -183,7 +183,6 @@ textarea { @include placeholder(); } - // INPUT SIZES // ----------- @@ -209,7 +208,7 @@ input[readonly], select[readonly], textarea[readonly] { cursor: not-allowed; - background-color: $inputDisabledBackground; + background-color: $input-bg-disabled; } // Explicitly reset the colors here @@ -288,3 +287,41 @@ input[type="checkbox"]:checked+label { box-sizing: border-box; } } + +// Form control feedback states +// +// Apply contextual and semantic states to individual form controls. + +.form-control-success, +.form-control-warning, +.form-control-danger { + padding-right: ($input-padding-x * 3); + background-repeat: no-repeat; + background-position: center right ($input-height / 4); + background-size: ($input-height / 2) ($input-height / 2); +} + +// Form validation states +.has-success { + @include form-control-validation($brand-success); + + .form-control-success { + background-image: $form-icon-success; + } +} + +.has-warning { + @include form-control-validation($brand-warning); + + .form-control-warning { + background-image: $form-icon-warning; + } +} + +.has-danger { + @include form-control-validation($brand-danger); + + .form-control-danger { + background-image: $form-icon-danger; + } +} diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 60a02755fe7..0cd1871edd0 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -194,14 +194,6 @@ dd { // MISC // ---- -// Horizontal rules -hr { - margin: $line-height-base 0; - border: 0; - border-top: 1px solid $hrBorder; - border-bottom: 1px solid $white; -} - // Abbreviations and acronyms abbr[title], // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 diff --git a/public/sass/components/_color_picker.scss b/public/sass/components/_color_picker.scss index bc3c11aed0c..9e8adfd6226 100644 --- a/public/sass/components/_color_picker.scss +++ b/public/sass/components/_color_picker.scss @@ -13,7 +13,7 @@ .sp-container { border-radius: 0; - background-color: $heroUnitBackground; + background-color: $dropdownBackground; border: none; padding: 0; } diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 7f1d0bedff3..546f8b1c168 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -239,6 +239,5 @@ // --------- .typeahead { z-index: 1051; - margin-top: 2px; // give it some space to breathe - @include border-radius($baseBorderRadius); + margin-top: 2px; // give it some space to breathe } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index a52fed03057..a9a319a64f1 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -19,7 +19,10 @@ $gf-form-margin: 4px; } .gf-form-group { - margin-bottom: 20px; + h3, h2, h4 { + margin-top: $spacer * 2; + margin-bottom: $spacer * 1; + } } .gf-form-inline { @@ -40,7 +43,7 @@ $gf-form-margin: 4px; .gf-form-label { flex-shrink: 0; - background-color: $labelBackground; + background-color: $input-label-bg; display: block; padding: 8px 7px; font-size: $font-size-sm; @@ -51,39 +54,6 @@ $gf-form-margin: 4px; flex-shrink: 0; } -[type=text], -[type=email], -[type=number], -[type=password], { - &.gf-form-input { - border: none; - margin: 0px; - border-radius: 0; - padding: 8px 6px; - height: 100%; - box-sizing: border-box; - font-size: 15px; - display: block; - width: 100%; - margin-right: $gf-form-margin; - } - &.gf-size-auto { width: auto; } -} - -input[type=checkbox].gf-form-checkbox { - margin: 0; -} - -select.gf-form-input { - padding: 2px 3px; - font-size: 15px; - box-sizing: content-box; - display: block; - width: 100%; - margin-right: $gf-form-margin; - &.gf-size-auto { width: auto; } -} - @each $size, $value in $form-sizes { .gf-size-#{$size} { width: $value; } @@ -95,3 +65,55 @@ select.gf-form-input { .gf-size-max { width: 100%; } .gf-size-auto { width: auto; } + +select, +[type=text], +[type=email], +[type=number], +[type=password] { + &.gf-form-input { + display: block; + width: 100%; + padding: $input-padding-y $input-padding-x; + font-size: $font-size-base; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + background-image: none; + background-clip: padding-box; + border: $input-btn-border-width solid $input-border-color; + @include border-radius($input-border-radius); + @include box-shadow($input-box-shadow); + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + + // Unstyle the caret on `` +// element gets special love because it's special, and that's a fact! + +@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) { + #{$parent} { + height: $input-height; + padding: $padding-y $padding-x; + font-size: $font-size; + line-height: $line-height; + @include border-radius($border-radius); + } + + select#{$parent} { + height: $input-height; + line-height: $input-height; + } + + textarea#{$parent}, + select[multiple]#{$parent} { + height: auto; + } +} diff --git a/public/sass/mixins/_mixins.scss b/public/sass/mixins/_mixins.scss index 34135fd1d07..2c33ea82daa 100644 --- a/public/sass/mixins/_mixins.scss +++ b/public/sass/mixins/_mixins.scss @@ -118,7 +118,7 @@ .input-block-level { display: block; width: 100%; - min-height: $inputHeight; // Make inputs at least the height of their button counterpart (base line-height + padding + border) + min-height: $input-line-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border) @include box-sizing(border-box); // Makes inputs behave like true block-level elements } From 008a031493e25b3dfe44204da33a43585e4753f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 14:07:41 +0100 Subject: [PATCH 100/444] ux(sass): fixes and tweaks --- public/app/core/components/navbar/navbar.html | 37 +++-- public/app/core/components/navbar/navbar.ts | 1 + .../app/features/org/partials/orgDetails.html | 3 +- .../app/features/org/partials/orgUsers.html | 10 +- public/sass/_old_responsive.scss | 2 +- public/sass/_variables.dark.scss | 1 - public/sass/_variables.scss | 6 +- public/sass/base/_forms.scss | 143 ++++++++---------- public/sass/components/_gf-form.scss | 82 +++++----- public/sass/components/_navbar.scss | 2 +- public/sass/components/_navs.scss | 141 ++--------------- public/sass/components/_tabs.scss | 5 +- public/sass/components/_tightform.scss | 6 +- public/sass/layout/_page.scss | 5 +- 14 files changed, 149 insertions(+), 295 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index aeb2c8b04fd..41757d54cc1 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,22 +1,19 @@ -
-
-
- - - - - - - -
- - -
- - -
- -
+
+
+ + + + + + +
-
+ +
+ + +
+ +
+
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 044c2579820..9332f43542c 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -25,6 +25,7 @@ export function navbarDirective() { }, link: function(scope, elem, attrs, ctrl) { ctrl.icon = attrs.icon; + elem.addClass('navbar'); } }; } diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index a5f6c9305e7..dcac1de7935 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -17,9 +17,10 @@
-

Address

+

Address

+
Address1 diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index e765be865d4..d6845f6f327 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -2,15 +2,13 @@
-
- - - -

Organization users

-
+
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 7da5f5c20be..71bc420c4f5 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -28,7 +28,7 @@ display: none; } .page-container { - padding: 10px 20px; + padding: ($spacer * 1) ($spacer * 2); } } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index d62eed99bb0..c2557fc9a65 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -105,7 +105,6 @@ $table-border: $gray-dark; // table and cell border // ------------------------- $btnBackground: $gray-dark; $btnBackgroundHighlight: darken($gray-light, 15%); -$btnBackgroundShadow: darken($gray-light, 15%); $btnBorder: #bbb; $btnPrimaryBackground: $blue-dark; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 85666374912..6a18034273f 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -78,8 +78,8 @@ $grid-gutter-width: 30px !default; $enable-flex: false; $form-sizes: ( - xs: 60px, - sm: 80px, + xs: 80px, + sm: 100px, md: 120px, lg: 150px, xl: 200px, @@ -172,7 +172,7 @@ $table-sm-cell-padding: .3rem !default; // Forms $input-padding-x: .75rem !default; $input-padding-y: .5rem !default; -$input-line-height: 1.25 !default; +$input-line-height: 1.25rem !default; $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index b3d65bc3614..edc73cfcfd6 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -6,17 +6,6 @@ // GENERAL STYLES // -------------- -// Make all forms have space below them -form { - margin: 0 0 $line-height-base; -} - -fieldset { - padding: 0; - margin: 0; - border: 0; -} - // Groups of fields with labels on top (legends) legend { display: block; @@ -56,84 +45,69 @@ label { display: block; } -// Form controls -// ------------------------- +// // Form controls +// // ------------------------- +// +// // Shared size and type resets +// select, +// textarea, +// input[type="text"], +// input[type="password"], +// input[type="datetime"], +// input[type="datetime-local"], +// input[type="date"], +// input[type="month"], +// input[type="time"], +// input[type="week"], +// input[type="number"], +// input[type="email"], +// input[type="url"], +// input[type="search"], +// input[type="tel"], +// input[type="color"], +// .uneditable-input { +// display: inline-block; +// height: $input-height; +// line-height: $input-line-height; +// padding: 4px 6px; +// font-size: $font-size-base; +// color: $input-color; +// vertical-align: top; +// } -// Shared size and type resets -select, -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - display: inline-block; - height: $input-height; - line-height: $input-line-height; - padding: 4px 6px; - font-size: $font-size-base; - color: $input-color; - vertical-align: top; -} - -// Reset appearance properties for textual inputs and textarea -// Declare width for legacy (can't be on input[type=*] selectors or it's too specific) -input, -textarea, -.uneditable-input { - width: 206px; // plus 12px padding and 2px border -} // Reset height since textareas have rows textarea { height: auto; } -// Everything else -textarea, -input[type="text"], -input[type="password"], -input[type="datetime"], -input[type="datetime-local"], -input[type="date"], -input[type="month"], -input[type="time"], -input[type="week"], -input[type="number"], -input[type="email"], -input[type="url"], -input[type="search"], -input[type="tel"], -input[type="color"], -.uneditable-input { - background-color: $input-bg; - border: 1px solid $input-border-color; - @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - @include transition("border linear .2s, box-shadow linear .2s"); - - // Focus state - &:focus { - border-color: rgba(82,168,236, .8); - outline: 0; - @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); - } -} - -// Position radios and checkboxes better -input[type="radio"], -input[type="checkbox"] { - margin: 4px 0 0; - line-height: normal; -} +// // Everything else +// textarea, +// input[type="text"], +// input[type="password"], +// input[type="datetime"], +// input[type="datetime-local"], +// input[type="date"], +// input[type="month"], +// input[type="time"], +// input[type="week"], +// input[type="number"], +// input[type="email"], +// input[type="url"], +// input[type="search"], +// input[type="tel"], +// input[type="color"] { +// background-color: $input-bg; +// border: 1px solid $input-border-color; +// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); +// @include transition("border linear .2s, box-shadow linear .2s"); +// +// // Focus state +// &:focus { +// border-color: rgba(82,168,236, .8); +// outline: 0; +// @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); +// } +// } // Reset width of input images, buttons, radios, checkboxes input[type="file"], @@ -207,7 +181,7 @@ textarea[disabled], input[readonly], select[readonly], textarea[readonly] { - cursor: not-allowed; + cursor: $cursor-disabled; background-color: $input-bg-disabled; } @@ -216,6 +190,7 @@ input[type="radio"][disabled], input[type="checkbox"][disabled], input[type="radio"][readonly], input[type="checkbox"][readonly] { + cursor: $cursor-disabled; background-color: transparent; } diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index a9a319a64f1..94b89e04336 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -42,12 +42,15 @@ $gf-form-margin: 4px; } .gf-form-label { + padding: $input-padding-y $input-padding-x; + line-height: $input-line-height; flex-shrink: 0; + background-color: $input-label-bg; display: block; - padding: 8px 7px; font-size: $font-size-sm; margin-right: $gf-form-margin; + border: $input-btn-border-width solid transparent; } .gf-form-checkbox { @@ -65,53 +68,46 @@ $gf-form-margin: 4px; .gf-size-max { width: 100%; } .gf-size-auto { width: auto; } +.gf-form-input { + display: block; + width: 100%; + padding: $input-padding-y $input-padding-x; + font-size: $font-size-base; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + background-image: none; + background-clip: padding-box; + border: $input-btn-border-width solid $input-border-color; + @include border-radius($input-border-radius); + @include box-shadow($input-box-shadow); + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -select, -[type=text], -[type=email], -[type=number], -[type=password] { - &.gf-form-input { - display: block; - width: 100%; - padding: $input-padding-y $input-padding-x; - font-size: $font-size-base; - line-height: $input-line-height; - color: $input-color; - background-color: $input-bg; - background-image: none; - background-clip: padding-box; - border: $input-btn-border-width solid $input-border-color; - @include border-radius($input-border-radius); - @include box-shadow($input-box-shadow); - transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; + // Unstyle the caret on ``s in IE10+. - &::-ms-expand { - background-color: transparent; - border: 0; - } + // Customize the `:focus` state to imitate native WebKit styles. + @include form-control-focus(); - // Customize the `:focus` state to imitate native WebKit styles. - @include form-control-focus(); + // Placeholder + &::placeholder { + color: $input-color-placeholder; + // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. + opacity: 1; + } - // Placeholder - &::placeholder { - color: $input-color-placeholder; - // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526. - opacity: 1; - } + &:disabled, + &[readonly] { + background-color: $input-bg-disabled; + // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. + opacity: 1; + } - &:disabled, - &[readonly] { - background-color: $input-bg-disabled; - // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655. - opacity: 1; - } - - &:disabled { - cursor: $cursor-disabled; - } + &:disabled { + cursor: $cursor-disabled; } &.gf-size-auto { width: auto; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 9b0f8df4a0a..ebed9c1bca8 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -1,6 +1,6 @@ - .navbar { + display: block; overflow: visible; position: relative; z-index: 110; diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss index 2087feef823..0d904d4d8a8 100644 --- a/public/sass/components/_navs.scss +++ b/public/sass/components/_navs.scss @@ -16,78 +16,23 @@ .nav > li > a { display: block; } -.nav > li > a:hover, -.nav > li > a:focus { - text-decoration: none; - background-color: $gray-lighter; -} // Redeclare pull classes because of specifity .nav > .pull-right { float: right; } -// Nav headers (for dropdowns and lists) -.nav-header { - display: block; - padding: 3px 15px; - font-size: 11px; - font-weight: bold; - line-height: $line-height-base; - color: $gray-light; - text-shadow: 0 1px 0 rgba(255,255,255,.5); - text-transform: uppercase; -} -// Space them out when they follow another list item (link) -.nav li + .nav-header { - margin-top: 9px; -} - - - -// NAV LIST -// -------- - -.nav-list { - padding-left: 15px; - padding-right: 15px; - margin-bottom: 0; -} -.nav-list > li > a, -.nav-list .nav-header { - margin-left: -15px; - margin-right: -15px; - text-shadow: 0 1px 0 rgba(255,255,255,.5); -} -.nav-list > li > a { - padding: 3px 15px; -} -.nav-list > .active > a, -.nav-list > .active > a:hover, -.nav-list > .active > a:focus { - color: $white; - text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: $link-color; -} -.nav-list [class^="icon-"], -.nav-list [class*=" icon-"] { - margin-right: 2px; -} - // TABS AND PILLS // ------------- // Common styles -.nav-tabs, -.nav-pills { +.nav-tabs { @include clearfix(); } -.nav-tabs > li, -.nav-pills > li { +.nav-tabs > li { float: left; } -.nav-tabs > li > a, -.nav-pills > li > a { +.nav-tabs > li > a { padding-right: 12px; padding-left: 12px; margin-right: 2px; @@ -99,12 +44,16 @@ // Give the tabs something to sit on .nav-tabs { - border-bottom: 1px solid #ddd; + border-bottom: 1px solid $divider-border-color; + padding-left: 10px; + margin: 0 0 10px 0; } + // Make the list-items overlay the bottom border .nav-tabs > li { margin-bottom: -1px; } + // Actual tabs (as links) .nav-tabs > li > a { padding-top: 8px; @@ -114,80 +63,18 @@ @include border-radius(4px 4px 0 0); &:hover, &:focus { - border-color: $gray-lighter $gray-lighter #ddd; + border-color: $divider-border-color; } } // Active state, and it's :hover/:focus to override normal :hover/:focus .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { - color: $gray; - background-color: $body-bg; - border: 1px solid #ddd; - border-bottom-color: transparent; - cursor: default; -} - - -// Default dropdown links -// ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: $link-color; - border-bottom-color: $link-color; - margin-top: 6px; -} -.nav .dropdown-toggle:hover .caret, -.nav .dropdown-toggle:focus .caret { - border-top-color: $link-hover-color; - border-bottom-color: $link-hover-color; -} -/* move down carets for tabs */ -.nav-tabs .dropdown-toggle .caret { - margin-top: 8px; -} - -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: $gray; - border-bottom-color: $gray; -} - -// Active:hover/:focus dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover, -.nav > .dropdown.active > a:focus { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover, -.nav > li.dropdown.open.active > a:focus { - color: $white; - background-color: $gray-light; - border-color: $gray-light; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret, -.nav li.dropdown.open a:focus .caret { - border-top-color: $white; - border-bottom-color: $white; - @include opacity(100); -} - -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover, -.tabs-stacked .open > a:focus { - border-color: $gray-light; + @include border-radius(3px); + border: 1px solid $divider-border-color; + background-color: transparent; + border-bottom: 1px solid $panel-bg; + color: $link-color; } // Show/hide tabbable areas diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index f01933927b5..7535d9f44b3 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,8 +1,5 @@ .nav-tabs-alt { - border-bottom: 1px solid $divider-border-color; - padding-left: 10px; - margin: 0 0 10px 0; & > li > a { color: darken($link-color, 20%); @@ -16,7 +13,7 @@ li.active > a:focus, li.active > a:hover { @include border-radius(3px); - border: 1px solid $divider-border-color; + border: 1px solid $divider-border-color; background-color: transparent; border-bottom: 1px solid $panel-bg; color: $link-color; diff --git a/public/sass/components/_tightform.scss b/public/sass/components/_tightform.scss index 1afbadbb63c..efbdd71710e 100644 --- a/public/sass/components/_tightform.scss +++ b/public/sass/components/_tightform.scss @@ -112,7 +112,7 @@ .tight-form-func { background: $tight-form-func-bg; - + &.show-function-controls { padding-top: 5px; min-width: 100px; @@ -131,7 +131,7 @@ input[type=text].tight-form-clear-input { padding: 8px 7px; border: none; margin: 0px; - background: transparent; + background: transparent; border-radius: 0; border-right: 1px solid $tight-form-border; } @@ -141,6 +141,7 @@ input[type=text].tight-form-clear-input { [type=number], [type=password] { &.tight-form-input { + background-color: $input-bg; border: none; border-right: 1px solid $tight-form-border; margin: 0px; @@ -167,6 +168,7 @@ input[type=checkbox].tight-form-checkbox { select.tight-form-input { border: none; border-right: 1px solid $tight-form-border; + background-color: $input-bg; margin: 0px; border-radius: 0; height: 36px; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 4c492b83731..40969799141 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -25,10 +25,11 @@ .page-container { background-color: $page-bg; position: relative; - padding: 25px 56px 10px 56px; + padding: ($spacer * 2) ($spacer * 4); max-width: 1060px; margin-left: 0; - height: 100%; + //min-height: 100%; + padding-bottom: $spacer * 5; } .page-header { From c97dbf390e2e3bfc775035e2ce1ff1272650bedf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 14:39:45 +0100 Subject: [PATCH 101/444] ux(): fixed invite box --- public/app/features/org/partials/invite.html | 79 ++++++++------------ public/sass/_grafana.scss | 1 + public/sass/_variables.dark.scss | 12 --- public/sass/_variables.light.scss | 12 --- public/sass/_variables.scss | 15 +++- public/sass/components/_dropdown.scss | 6 +- public/sass/components/_modals.scss | 4 +- public/sass/components/_popovers.scss | 2 +- public/sass/components/_tooltip.scss | 4 +- public/sass/utils/_spacings.scss | 39 ++++++++++ 10 files changed, 94 insertions(+), 80 deletions(-) create mode 100644 public/sass/utils/_spacings.scss diff --git a/public/app/features/org/partials/invite.html b/public/app/features/org/partials/invite.html index 6b3c1afffaf..30a92fe80cb 100644 --- a/public/app/features/org/partials/invite.html +++ b/public/app/features/org/partials/invite.html @@ -4,56 +4,44 @@ -

- Invite Users -

+
+

+ Invite Users +

-
- Send invite or add existing Grafana users to the organization - {{contextSrv.user.orgName}} -
+
+ Send invite or add existing Grafana users to the organization + {{contextSrv.user.orgName}} +
-
-
+
+
- -
-
-
-
    -
  • - Email or Username -
    • -
  • - -
    • -
  • - Name -
    • -
  • - -
    • - -
  • - Role -
    • -
  • - -
    • -
  • - - - -
    • -
    -
+ +
+
+ Email or Username + +
+
+ Name + +
+
+ Role + +
+
+ + +
+ Invite another -
+
@@ -61,10 +49,7 @@
Cancel -
-
- + +
- - diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 7af990353bf..0a635ede623 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -20,6 +20,7 @@ @import "utils/utils"; @import "utils/validation"; @import "utils/angular"; +@import "utils/spacings"; // LAYOUTS @import "layout/page"; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index c2557fc9a65..505945c1a68 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -172,18 +172,6 @@ $dropdownLinkBackgroundHover: $blue-dark; // COMPONENT VARIABLES // -------------------------------------------------- - -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -$zindexDropdown: 1000; -$zindexPopover: 1010; -$zindexTooltip: 1020; -$zindexFixedNavbar: 1030; -$zindexModalBackdrop: 1040; -$zindexModal: 1050; - // ------------------------- $placeholderText: darken($text-color, 25%); diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 1898f06fd39..a1cbaf63798 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -193,18 +193,6 @@ $dropdownLinkBackgroundHover: $blue; // -------------------------------------------------- -// Z-index master list -// ------------------------- -// Used for a bird's eye view of components dependent on the z-axis -// Try to avoid customizing these :) -$zindexDropdown: 1000; -$zindexPopover: 1010; -$zindexTooltip: 1030; -$zindexFixedNavbar: 1030; -$zindexModalBackdrop: 1040; -$zindexModal: 1050; - - // Input placeholder text color // ------------------------- $placeholderText: $gray-light; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 6a18034273f..ae954d40c0a 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -171,7 +171,7 @@ $table-sm-cell-padding: .3rem !default; // Forms $input-padding-x: .75rem !default; -$input-padding-y: .5rem !default; +$input-padding-y: .6rem !default; $input-line-height: 1.25rem !default; $input-border-radius: $border-radius !default; @@ -196,3 +196,16 @@ $cursor-disabled: not-allowed !default; $form-icon-success: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%235cb85c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E") !default; $form-icon-warning: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23f0ad4e' d='M4.4 5.324h-.8v-2.46h.8zm0 1.42h-.8V5.89h.8zM3.76.63L.04 7.075c-.115.2.016.425.26.426h7.397c.242 0 .372-.226.258-.426C6.726 4.924 5.47 2.79 4.253.63c-.113-.174-.39-.174-.494 0z'/%3E%3C/svg%3E") !default; $form-icon-danger: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23d9534f' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23d9534f' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E") !default; + +// Z-index master list +// ------------------------- +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +$zindex-dropdown: 1000; +$zindex-popover: 1010; +$zindex-tooltip: 1020; +$zindex-navbar-fixed: 1030; +$zindex-modal-backdrop: 1040; +$zindex-modal: 1050; + + diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 546f8b1c168..af2888be739 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -42,7 +42,7 @@ position: absolute; top: 100%; left: 0; - z-index: $zindexDropdown; + z-index: $zindex-dropdown; display: none; // none by default, but block on "open" of the menu float: left; min-width: 140px; @@ -139,7 +139,7 @@ right: 0; bottom: 0; top: 0; - z-index: $zindexDropdown - 10; + z-index: $zindex-dropdown - 10; } // Right aligned dropdowns @@ -239,5 +239,5 @@ // --------- .typeahead { z-index: 1051; - margin-top: 2px; // give it some space to breathe + margin-top: 2px; // give it some space to breathe } diff --git a/public/sass/components/_modals.scss b/public/sass/components/_modals.scss index 435e46f9634..6a13a3df164 100644 --- a/public/sass/components/_modals.scss +++ b/public/sass/components/_modals.scss @@ -9,7 +9,7 @@ right: 0; bottom: 0; left: 0; - z-index: $zindexModalBackdrop; + z-index: $zindex-modal-backdrop; background-color: $black; } @@ -21,7 +21,7 @@ // Base modal .modal { position: fixed; - z-index: $zindexModal; + z-index: $zindex-modal; width: 100%; background-color: $panel-bg; @include box-shadow(0 3px 7px rgba(0,0,0,0.3)); diff --git a/public/sass/components/_popovers.scss b/public/sass/components/_popovers.scss index cf9ea93b80b..b426450d118 100644 --- a/public/sass/components/_popovers.scss +++ b/public/sass/components/_popovers.scss @@ -7,7 +7,7 @@ position: absolute; top: 0; left: 0; - z-index: $zindexPopover; + z-index: $zindex-popover; display: none; max-width: 480px; padding: 1px; diff --git a/public/sass/components/_tooltip.scss b/public/sass/components/_tooltip.scss index 7b0349bc7cb..e70e1010bf1 100644 --- a/public/sass/components/_tooltip.scss +++ b/public/sass/components/_tooltip.scss @@ -6,7 +6,7 @@ // Base class .tooltip { position: absolute; - z-index: $zindexTooltip; + z-index: $zindex-tooltip; display: block; visibility: visible; font-size: 11px; @@ -26,7 +26,7 @@ color: $tooltipColor; text-align: center; text-decoration: none; - background-color: $tooltipBackground; + background-color: $tooltipBackground; } // Arrows diff --git a/public/sass/utils/_spacings.scss b/public/sass/utils/_spacings.scss new file mode 100644 index 00000000000..cd543c8c90b --- /dev/null +++ b/public/sass/utils/_spacings.scss @@ -0,0 +1,39 @@ +// Margin and Padding + +.m-x-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +@each $prop, $abbrev in (margin: m, padding: p) { + @each $size, $lengths in $spacers { + $length-x: map-get($lengths, x); + $length-y: map-get($lengths, y); + + .#{$abbrev}-a-#{$size} { #{$prop}: $length-y $length-x !important; } // a = All sides + .#{$abbrev}-t-#{$size} { #{$prop}-top: $length-y !important; } + .#{$abbrev}-r-#{$size} { #{$prop}-right: $length-x !important; } + .#{$abbrev}-b-#{$size} { #{$prop}-bottom: $length-y !important; } + .#{$abbrev}-l-#{$size} { #{$prop}-left: $length-x !important; } + + // Axes + .#{$abbrev}-x-#{$size} { + #{$prop}-right: $length-x !important; + #{$prop}-left: $length-x !important; + } + .#{$abbrev}-y-#{$size} { + #{$prop}-top: $length-y !important; + #{$prop}-bottom: $length-y !important; + } + } +} + +// Positioning + +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} From 5a67ca255fd896bdf9ffe2b6fd045db5b962da3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 15:03:33 +0100 Subject: [PATCH 102/444] ux(): fixes to light theme --- .../app/features/dashboard/timepicker/timepicker.html | 2 +- public/sass/_variables.light.scss | 11 ++++++----- public/sass/_variables.scss | 2 +- public/sass/base/_type.scss | 2 +- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/public/app/features/dashboard/timepicker/timepicker.html b/public/app/features/dashboard/timepicker/timepicker.html index 008f4a149ce..609b5905983 100644 --- a/public/app/features/dashboard/timepicker/timepicker.html +++ b/public/app/features/dashboard/timepicker/timepicker.html @@ -1,6 +1,6 @@
    -
  • +
  • Zoom Out diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index a1cbaf63798..8d0e133f168 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -15,6 +15,7 @@ $gray-dark: lighten(#000, 20%); // #333 $gray: lighten(#000, 33.5%); // #555 $gray-light: lighten(#000, 60%); // #999 $gray-lighter: lighten(#000, 97.5%); // #eee +$gray-lightest: lighten(#000, 98.5%); // #eee $white: #fff; @@ -44,10 +45,10 @@ $critical: #EC2128; // Scaffolding // ------------------------- -$body-bg: rgb(20,20,20); -$page-bg: $gray-darker; -$body-color: $gray-lighter; -$text-color: $gray-lighter; +$body-bg: #EFEFEF; +$page-bg: $gray-lightest; +$body-color: $gray; +$text-color: $gray; // Links // ------------------------- @@ -73,7 +74,7 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-lighter; +$panel-bg: $gray-lighter; $panel-border: solid 1px #ddd; $divider-border-color: $gray-light; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index ae954d40c0a..0a643f0a0a2 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -172,7 +172,7 @@ $table-sm-cell-padding: .3rem !default; // Forms $input-padding-x: .75rem !default; $input-padding-y: .6rem !default; -$input-line-height: 1.25rem !default; +$input-line-height: 1.35rem !default; $input-border-radius: $border-radius !default; $input-border-radius-lg: $border-radius-lg !default; diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index 0cd1871edd0..b2281c6c578 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -114,7 +114,7 @@ hr { small, .small { - font-size: 80%; + font-size: 85%; font-weight: normal; } From 4ab3542c881d61ccb3159d61a1c5702241e6378b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 15:12:20 +0100 Subject: [PATCH 103/444] ux(): fixes --- public/sass/base/_forms.scss | 67 +++---------------- .../vendor/tagsinput/bootstrap-tagsinput.js | 3 +- 2 files changed, 10 insertions(+), 60 deletions(-) diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index edc73cfcfd6..e65206471ad 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -25,6 +25,7 @@ legend { } } +// Reset height since textareas have rows // Set font for forms label, input, @@ -45,70 +46,18 @@ label { display: block; } -// // Form controls -// // ------------------------- -// -// // Shared size and type resets -// select, -// textarea, -// input[type="text"], -// input[type="password"], -// input[type="datetime"], -// input[type="datetime-local"], -// input[type="date"], -// input[type="month"], -// input[type="time"], -// input[type="week"], -// input[type="number"], -// input[type="email"], -// input[type="url"], -// input[type="search"], -// input[type="tel"], -// input[type="color"], -// .uneditable-input { -// display: inline-block; -// height: $input-height; -// line-height: $input-line-height; -// padding: 4px 6px; -// font-size: $font-size-base; -// color: $input-color; -// vertical-align: top; -// } +input, +select { + background-color: $input-bg; + color: $input-color; + border: none; + box-shadow: none; +} -// Reset height since textareas have rows textarea { height: auto; } -// // Everything else -// textarea, -// input[type="text"], -// input[type="password"], -// input[type="datetime"], -// input[type="datetime-local"], -// input[type="date"], -// input[type="month"], -// input[type="time"], -// input[type="week"], -// input[type="number"], -// input[type="email"], -// input[type="url"], -// input[type="search"], -// input[type="tel"], -// input[type="color"] { -// background-color: $input-bg; -// border: 1px solid $input-border-color; -// @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); -// @include transition("border linear .2s, box-shadow linear .2s"); -// -// // Focus state -// &:focus { -// border-color: rgba(82,168,236, .8); -// outline: 0; -// @include box-shadow("inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)"); -// } -// } - // Reset width of input images, buttons, radios, checkboxes input[type="file"], input[type="image"], diff --git a/public/vendor/tagsinput/bootstrap-tagsinput.js b/public/vendor/tagsinput/bootstrap-tagsinput.js index 5c8e25a5761..b3a3c3bc386 100644 --- a/public/vendor/tagsinput/bootstrap-tagsinput.js +++ b/public/vendor/tagsinput/bootstrap-tagsinput.js @@ -35,7 +35,8 @@ this.inputSize = Math.max(1, this.placeholderText.length); this.$container = $('
    '); - this.$input = $('').appendTo(this.$container); + this.$input = $('').appendTo(this.$container); this.$element.after(this.$container); From 9accb962aaea45ca7a710adc3485324cdaf4e3f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 16 Feb 2016 15:21:07 +0100 Subject: [PATCH 104/444] ux(sass): temp fix for dashboard edit tabs --- public/sass/_variables.scss | 4 ++-- public/sass/components/_navs.scss | 27 +++++++++++++++++++++++++++ 2 files changed, 29 insertions(+), 2 deletions(-) diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 0a643f0a0a2..9a9eb264220 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -91,7 +91,7 @@ $form-sizes: ( // Typography // ------------------------- -$font-family-sans-serif: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; $font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-base: $font-family-sans-serif !default; @@ -127,7 +127,7 @@ $lead-font-size: 1.25rem !default; $lead-font-weight: 300 !default; $headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: inherit !default; +$headings-font-family: "Open Sans" !default; $headings-font-weight: 400 !default; $headings-line-height: 1.1 !default; diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss index 0d904d4d8a8..3f381922697 100644 --- a/public/sass/components/_navs.scss +++ b/public/sass/components/_navs.scss @@ -56,6 +56,7 @@ // Actual tabs (as links) .nav-tabs > li > a { + color: $text-color; padding-top: 8px; padding-bottom: 8px; line-height: $line-height-base; @@ -64,8 +65,10 @@ &:hover, &:focus { border-color: $divider-border-color; + color: $link-color; } } + // Active state, and it's :hover/:focus to override normal :hover/:focus .nav-tabs > .active > a, .nav-tabs > .active > a:hover, @@ -85,3 +88,27 @@ .tab-content > .active { display: block; } + +// temp hack +.modal-body, .gf-box { + .nav-tabs { + border-bottom: none; + } + + .nav-tabs > li > a { + border: none; + border-radius: 0; + &:hover, + &:focus { + border-bottom: 1px solid $blue; + } + } + + .nav-tabs > .active > a, + .nav-tabs > .active > a:hover, + .nav-tabs > .active > a:focus { + border: none; + border-bottom: 1px solid $blue; + color: $link-color; + } +} From 45e232ef62bfa0b83b7cc7de20cc78cbbf77df77 Mon Sep 17 00:00:00 2001 From: Matt Toback Date: Tue, 16 Feb 2016 16:32:09 -0500 Subject: [PATCH 105/444] Added a calc to make the page height 100%. Well supported, verified on caniuse --- public/sass/layout/_page.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 40969799141..40e8cc71ec7 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -28,7 +28,7 @@ padding: ($spacer * 2) ($spacer * 4); max-width: 1060px; margin-left: 0; - //min-height: 100%; + min-height: calc(100% - 54px); padding-bottom: $spacer * 5; } From 807c052fea05c4e9b5f9aa4631cda2b2f744ee20 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Wed, 17 Feb 2016 11:38:39 +0900 Subject: [PATCH 106/444] (cloudwatch) fix dimension template replace in legend --- public/app/plugins/datasource/cloudwatch/datasource.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index c77e9f95bd6..b621d30c81c 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -310,7 +310,13 @@ function (angular, _, moment, dateMath) { namespace: templateSrv.replace(options.namespace), metric: templateSrv.replace(options.metricName), }; - _.extend(aliasData, options.dimensions); + var aliasDimensions = {}; + _.each(_.keys(options.dimensions), function(origKey) { + var key = templateSrv.replace(origKey); + var value = templateSrv.replace(options.dimensions[origKey]); + aliasDimensions[key] = value; + }); + _.extend(aliasData, aliasDimensions); var periodMs = options.period * 1000; return _.map(options.statistics, function(stat) { From f28eec8be3f7c9bc5c71ca4f22e44b5eb19a28a8 Mon Sep 17 00:00:00 2001 From: Mitsuhiro Tanda Date: Wed, 17 Feb 2016 11:59:53 +0900 Subject: [PATCH 107/444] (cloudwatch) fix template replace with panel repeat --- .../plugins/datasource/cloudwatch/datasource.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/public/app/plugins/datasource/cloudwatch/datasource.js b/public/app/plugins/datasource/cloudwatch/datasource.js index b621d30c81c..a2e6469014d 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.js +++ b/public/app/plugins/datasource/cloudwatch/datasource.js @@ -58,7 +58,7 @@ function (angular, _, moment, dateMath) { var result = []; _.each(allResponse, function(response, index) { - var metrics = transformMetricData(response, options.targets[index]); + var metrics = transformMetricData(response, options.targets[index], options.scopedVars); result = result.concat(metrics); }); @@ -302,18 +302,18 @@ function (angular, _, moment, dateMath) { return this.defaultRegion; }; - function transformMetricData(md, options) { + function transformMetricData(md, options, scopedVars) { var aliasRegex = /\{\{(.+?)\}\}/g; var aliasPattern = options.alias || '{{metric}}_{{stat}}'; var aliasData = { - region: templateSrv.replace(options.region), - namespace: templateSrv.replace(options.namespace), - metric: templateSrv.replace(options.metricName), + region: templateSrv.replace(options.region, scopedVars), + namespace: templateSrv.replace(options.namespace, scopedVars), + metric: templateSrv.replace(options.metricName, scopedVars), }; var aliasDimensions = {}; _.each(_.keys(options.dimensions), function(origKey) { - var key = templateSrv.replace(origKey); - var value = templateSrv.replace(options.dimensions[origKey]); + var key = templateSrv.replace(origKey, scopedVars); + var value = templateSrv.replace(options.dimensions[origKey], scopedVars); aliasDimensions[key] = value; }); _.extend(aliasData, aliasDimensions); From 8193d50da7253708af913deb0c5d407b7d4db0d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 17 Feb 2016 13:46:18 +0100 Subject: [PATCH 108/444] ux(): updated graph form styles --- public/app/partials/panelgeneral.html | 85 +++++++++++---------------- public/sass/_variables.scss | 2 +- public/sass/components/_gf-form.scss | 9 +-- 3 files changed, 39 insertions(+), 57 deletions(-) diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index b8823e5658a..1feef74fbf6 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -1,61 +1,42 @@ -
    -
    -
    General options
    -
    -
      -
    • - Title -
      • -
    • - -
      • -
    • - Span -
      • -
    • - -
      • -
    • - Height -
      • -
    • - -
      • -
    • - - - -
      • -
    -
    +
    +
    +
    + Title + +
    +
    + Span + +
    +
    + Height + +
    +
    +
    -
    -
    Templating options
    -
    -
      -
    • - Repeat Panel -
      • -
    • - -
      • -
    • - Min span -
      • -
    • - -
      • -
    -
    + +
    +
    + Repeat Panel + +
    +
    + Min span +
    +
    +
    +
    + diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 9a9eb264220..ba12137ec94 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -127,7 +127,7 @@ $lead-font-size: 1.25rem !default; $lead-font-weight: 300 !default; $headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: "Open Sans" !default; +$headings-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; $headings-font-weight: 400 !default; $headings-line-height: 1.1 !default; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 94b89e04336..cbaf5c07f93 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,4 +1,4 @@ -$gf-form-margin: 4px; +$gf-form-margin: 0.4rem; .gf-form { margin-top: $gf-form-margin; @@ -31,14 +31,14 @@ $gf-form-margin: 4px; flex-wrap: wrap; align-content: flex-start; - .gf-form { + .gf-form-flex { flex-grow: 1; } } .gf-form-button-row { - margin-top: 20px; - margin-bottom: 10px; + margin-top: $spacer * 2; + margin-bottom: $spacer; } .gf-form-label { @@ -61,6 +61,7 @@ $gf-form-margin: 4px; .gf-size-#{$size} { width: $value; } .gf-size-max-#{$size} { + flex-grow: 1; max-width: $value; } } From b5d4a678d43e0307f3885ebb45efe4a7fc8e4487 Mon Sep 17 00:00:00 2001 From: Trent White Date: Wed, 17 Feb 2016 12:55:57 -0500 Subject: [PATCH 109/444] pinned sidebar min-height fix --- public/sass/components/_sidemenu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 3198a3190f4..960099cd9fa 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -29,7 +29,7 @@ $sideMenuWidth: 220px; .sidemenu-pinned { .sidemenu-wrapper { - min-height: 100%; + min-height: calc(100% - 54px); } .dashboard-container { padding-left: $sideMenuWidth; From 5d7d165be5253751a81fad753530ac07f5c882c5 Mon Sep 17 00:00:00 2001 From: Dieter Plaetinck Date: Wed, 17 Feb 2016 17:43:13 +1100 Subject: [PATCH 110/444] allow setting level on logger. performance workaround, see https://github.com/grafana/grafana/issues/4055 --- pkg/log/log.go | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/pkg/log/log.go b/pkg/log/log.go index 6855f512d96..f6d6ce74def 100644 --- a/pkg/log/log.go +++ b/pkg/log/log.go @@ -35,6 +35,15 @@ func NewLogger(bufLen int64, mode, config string) { } } +// this helps you work around the performance annoyance mentioned in +// https://github.com/grafana/grafana/issues/4055 +// until we refactor this library completely +func Level(level LogLevel) { + for i := range loggers { + loggers[i].level = level + } +} + func Trace(format string, v ...interface{}) { for _, logger := range loggers { logger.Trace(format, v...) From 08c1def8b76749c7368790dc275328d8319ad1df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 18 Feb 2016 09:44:40 +0100 Subject: [PATCH 111/444] ux(): minor update --- public/app/partials/panelgeneral.html | 8 +++----- public/sass/_variables.dark.scss | 20 ++++++++++---------- 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/public/app/partials/panelgeneral.html b/public/app/partials/panelgeneral.html index 1feef74fbf6..7beb6d54911 100644 --- a/public/app/partials/panelgeneral.html +++ b/public/app/partials/panelgeneral.html @@ -8,11 +8,9 @@ Span
    -
    - Height - -
    -
    +
    + Height +
    diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 505945c1a68..3484d4584cb 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -40,8 +40,8 @@ $critical: #ed2e18; // ------------------------- $body-bg: rgb(20,20,20); $page-bg: $gray-darker; -$body-color: $gray-lighter; -$text-color: $gray-lighter; +$body-color: $gray-lighter; +$text-color: $gray-lighter; // Links // ------------------------- @@ -51,9 +51,9 @@ $link-hover-color: $white; // Typography // ------------------------- -$headings-color: darken($white,11%); -$abbr-border-color: $gray-light !default; -$text-muted: darken($link-color,30%); +$headings-color: darken($white,11%); +$abbr-border-color: $gray-light !default; +$text-muted: darken($link-color,30%); $blockquote-small-color: $gray-light !default; $blockquote-border-color: $gray-lighter !default; @@ -66,13 +66,13 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-darker; -$panel-border: solid 1px $gray-dark; +$panel-bg: $gray-darker; +$panel-border: solid 1px $gray-dark; $divider-border-color: #555; // Graphite Target Editor -$tight-form-border: #050505; +$tight-form-border: #050505; $tight-form-bg: $gray-dark; $tight-form-func-bg: #333; @@ -82,8 +82,8 @@ $modal-background: $black; $code-tag-bg: #444; // Lists -$grafanaListBackground: $gray-dark; -$grafanaListAccent: lighten($gray-darker, 2%); +$grafanaListBackground: $gray-dark; +$grafanaListAccent: lighten($gray-darker, 2%); $grafanaListBorderTop: $gray-dark; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; From 63ca9f6f5a7149d770a79c06b1d0c01c3a641c1e Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 18 Feb 2016 11:08:13 +0100 Subject: [PATCH 112/444] fix(legend): only add overflow scroll when needed In firefox the scrollbar is always show when setting overflow: scroll. This commit makes sure the overflow setting is only applied when needed. closes #4049 --- public/app/plugins/panel/graph/legend.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/public/app/plugins/panel/graph/legend.js b/public/app/plugins/panel/graph/legend.js index a09bbbb6cb1..fb2c590034d 100644 --- a/public/app/plugins/panel/graph/legend.js +++ b/public/app/plugins/panel/graph/legend.js @@ -90,14 +90,6 @@ function (angular, _, $) { } function render() { - if (panel.legend.rightSide) { - var panelheight = scope.ctrl.height || scope.ctrl.panel.height || scope.ctrl.row.height; - $container.css("height", panelheight); - $container.toggleClass('graph-legend-fixed-height', true); - } else { - $container.css("height", ""); - } - if (firstRender) { elem.append($container); $container.on('click', '.graph-legend-icon', openColorSelector); @@ -184,6 +176,19 @@ function (angular, _, $) { html += '
    '; $container.append($(html)); } + + var legendContainerHeight = $container.parent().height(); + var legendHeight = $container.height(); + + if (panel.legend.rightSide && legendHeight >= legendContainerHeight) { + $container.toggleClass('graph-legend-fixed-height', true); + } + + if (panel.legend.rightSide) { + $container.css("height", scope.ctrl.height || scope.ctrl.panel.height || scope.ctrl.row.height); + } else { + $container.css("height", ""); + } } } }; From f4908b63151d3819e083540d11d7ab0b40a571a2 Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 18 Feb 2016 11:19:29 +0100 Subject: [PATCH 113/444] feat(panel): disable span options in fullscreen closes #4018 --- public/app/features/panel/panel_menu.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/public/app/features/panel/panel_menu.js b/public/app/features/panel/panel_menu.js index 0489489af8e..1e55e567f35 100644 --- a/public/app/features/panel/panel_menu.js +++ b/public/app/features/panel/panel_menu.js @@ -35,8 +35,10 @@ function (angular, $, _) { if (ctrl.dashboard.meta.canEdit) { template += '
    '; template += '
    '; - template += ''; - template += ''; + if (!ctrl.dashboard.meta.fullscreen) { + template += ''; + template += ''; + } template += ''; template += '
    '; template += '
    '; From 3003a8cb6e18fb9c197c5abeb446ba69c41c1653 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 18 Feb 2016 12:16:47 +0100 Subject: [PATCH 114/444] ux(sass): a lot of polish on headings and margins, ONLY USE bottom margins, othewise margin collapse causes issues --- .../features/datasources/partials/edit.html | 3 +- .../datasources/partials/http_settings.html | 2 +- .../features/datasources/partials/list.html | 8 +- .../app/features/org/partials/orgApiKeys.html | 87 +++++++++---------- .../app/features/org/partials/orgDetails.html | 36 ++++---- .../features/profile/partials/password.html | 6 +- .../features/profile/partials/profile.html | 6 +- .../elasticsearch/partials/config.html | 7 +- public/sass/_grafana.scss | 12 +-- public/sass/_variables.scss | 34 +++++--- public/sass/components/_buttons.scss | 55 ++++++------ public/sass/components/_gf-form.scss | 19 ++-- public/sass/components/_navbar.scss | 8 +- public/sass/components/_navs.scss | 3 +- public/sass/layout/_page.scss | 10 ++- public/sass/mixins/_buttons.scss | 6 ++ 16 files changed, 157 insertions(+), 145 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index b5bb0337546..5b2869c5cd9 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -38,7 +38,7 @@
    -
    +
    Cancel
    -
    diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html index 23680ebb9a7..37b1d3241ca 100644 --- a/public/app/features/datasources/partials/http_settings.html +++ b/public/app/features/datasources/partials/http_settings.html @@ -1,7 +1,7 @@
    -

    Http settings

    +

    Http settings

    Url diff --git a/public/app/features/datasources/partials/list.html b/public/app/features/datasources/partials/list.html index 6f2ea468b82..e66df175435 100644 --- a/public/app/features/datasources/partials/list.html +++ b/public/app/features/datasources/partials/list.html @@ -25,8 +25,8 @@ Name Url - - + + @@ -45,13 +45,13 @@ - + Edit - + diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 091cd318f4c..e2480ce2e18 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -2,54 +2,49 @@
    -
    -

    - API Keys -

    - -
    -
      -
    • - Add a key -
      • -
    • - -
      • -
    • - Role -
      • -
    • - -
      • -
    - - -
    - -
    - - - - - - - - - - - - - - - - -
    NameRole
    {{t.name}}{{t.role}} - - - -
    +
    +

    API Keys

    +

    Add new

    +
    +
    +
    + Add a key + +
    +
    + Role + +
    +
    + +
    +
    +
    + +

    Existing Keys

    + + + + + + + + + + + + + + + +
    NameRole
    {{t.name}}{{t.role}} + + + +
    + diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index dcac1de7935..3691c9025f5 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -6,21 +6,23 @@

    Preferences

    +

    General

    -
    - Name - -
    - -
    - +
    +
    + Name + +
    +
    + +
    -
    -

    Address

    +

    Address

    +
    Address1 @@ -59,16 +61,16 @@
    +

    Admin Pages

    -

    Users

    - Manage +
    +
    + Users & Roles +
    +
    + API Keys +
    - -
    -

    API Keys

    - Manage -
    -
    diff --git a/public/app/features/profile/partials/password.html b/public/app/features/profile/partials/password.html index fda68d2751d..f2dca0b7015 100644 --- a/public/app/features/profile/partials/password.html +++ b/public/app/features/profile/partials/password.html @@ -8,17 +8,17 @@
    - Old Password + Old Password
    - New Password + New Password
    - Confirm Password + Confirm Password
    diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index c5e1780ef70..bdca386ce46 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -7,7 +7,7 @@
    -

    Preferences

    +

    Preferences

    Name @@ -31,13 +31,13 @@
    +

    Password

    -

    Password

    Change Password
    +

    Organizations

    -

    Organizations

    diff --git a/public/app/plugins/datasource/elasticsearch/partials/config.html b/public/app/plugins/datasource/elasticsearch/partials/config.html index 6190ee8ebe6..e5a0e6f2e0c 100644 --- a/public/app/plugins/datasource/elasticsearch/partials/config.html +++ b/public/app/plugins/datasource/elasticsearch/partials/config.html @@ -1,9 +1,9 @@ -
    -

    Elasticsearch details

    +

    Elasticsearch details

    +
    Index name @@ -28,9 +28,8 @@
    +

    Default query settings

    -

    Default query settings

    -
    Group by time interval diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 0a635ede623..79d4b7e1b34 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -26,6 +26,12 @@ @import "layout/page"; // COMPONENTS +@import "components/buttons"; +@import "components/navs"; +@import "components/tabs"; +@import "components/alerts"; +@import "components/tooltip"; +@import "components/tags"; @import "components/panel_graph"; @import "components/submenu"; @import "components/panel_dashlist"; @@ -40,7 +46,6 @@ @import "components/sidemenu"; @import "components/navbar"; @import "components/gfbox"; -@import "components/tabs"; @import "components/timepicker"; @import "components/filter-controls"; @import "components/filter-list"; @@ -48,19 +53,14 @@ @import "components/scrollbar"; @import "components/old_stuff"; @import "components/popovers"; -@import "components/alerts"; @import "components/typeahead"; -@import "components/tags"; @import "components/modals"; @import "components/dropdown"; @import "components/color_picker"; -@import "components/tooltip"; -@import "components/buttons"; @import "components/footer"; @import "components/infobox"; @import "components/shortcuts"; @import "components/query_editor"; -@import "components/navs"; // PAGES @import "pages/login"; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index ba12137ec94..aff7cce94af 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -78,13 +78,13 @@ $grid-gutter-width: 30px !default; $enable-flex: false; $form-sizes: ( - xs: 80px, - sm: 100px, - md: 120px, - lg: 150px, - xl: 200px, - xxl: 300px, - xxxl: 400px + xs: 5.7rem, + sm: 7rem, + md: 8.5rem, + lg: 10rem, + xl: 14rem, + xxl: 21rem, + xxxl: 28rem ) !default; @@ -135,12 +135,7 @@ $blockquote-font-size: ($font-size-base * 1.25) !default; $blockquote-border-width: .25rem !default; $hr-border-width: $border-width !default; - $dt-font-weight: bold !default; - -$kbd-box-shadow: inset 0 -.1rem 0 rgba(0,0,0,.25) !default; -$nested-kbd-font-weight: bold !default; - $list-inline-padding: 5px !default; // Components @@ -208,4 +203,19 @@ $zindex-navbar-fixed: 1030; $zindex-modal-backdrop: 1040; $zindex-modal: 1050; +// Buttons +// + +$btn-padding-x: 1rem !default; +$btn-padding-y: .6rem !default; +$btn-line-height: 1.25 !default; +$btn-font-weight: normal !default; + +$btn-padding-x-sm: .5rem !default; +$btn-padding-y-sm: .25rem !default; + +$btn-padding-x-lg: 1.5rem !default; +$btn-padding-y-lg: .75rem !default; + +$btn-border-radius: 1px; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 47d74b8dc89..9fe32a29f9f 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -8,41 +8,43 @@ // Core .btn { display: inline-block; - padding: 8px 12px; - margin-right: 10px; + font-weight: $btn-font-weight; + line-height: $btn-line-height; font-size: $font-size-base; - line-height: $line-height-base; text-align: center; vertical-align: middle; cursor: pointer; border: none; - @include buttonBackground($btnBackground, $btnBackgroundHighlight, $gray-dark, 0 1px 1px rgba(255,255,255,.75)); - @include box-shadow("inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); + @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-border-radius); - // Hover/focus state - &:hover, - &:focus { + &, + &:active, + &.active { + &:focus, + &.focus { + @include tab-focus(); + } + } + + @include hover-focus { + text-decoration: none; + } + &.focus { text-decoration: none; } - // Focus state for keyboard and accessibility - &:focus { - @include tab-focus(); - } - - // Active state - &.active, - &:active { + &:active, + &.active { background-image: none; + outline: 0; } - // Disabled state &.disabled, - &[disabled] { - cursor: default; - background-image: none; - @include opacity(65); + &:disabled { + cursor: $cursor-disabled; + opacity: .65; + @include box-shadow(none); } } @@ -51,20 +53,15 @@ // Large .btn-large { - padding: 6px 20px; - font-size: $font-size-lg; + @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-border-radius); } .btn-small { - padding: 2px 10px; - font-size: $font-size-sm; + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius); } .btn-mini { - padding: 2px 6px; - margin-right: 0; - margin-right: 0; - font-size: $font-size-xs; + @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius); } // Set the backgrounds diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index cbaf5c07f93..eeb5ea0e340 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,7 +1,7 @@ $gf-form-margin: 0.4rem; .gf-form { - margin-top: $gf-form-margin; + margin-bottom: $gf-form-margin; margin-right: $gf-form-margin; display: flex; flex-direction: row; @@ -19,10 +19,7 @@ $gf-form-margin: 0.4rem; } .gf-form-group { - h3, h2, h4 { - margin-top: $spacer * 2; - margin-bottom: $spacer * 1; - } + margin-bottom: $spacer * 1.5; } .gf-form-inline { @@ -37,8 +34,10 @@ $gf-form-margin: 0.4rem; } .gf-form-button-row { - margin-top: $spacer * 2; - margin-bottom: $spacer; + margin-top: $spacer * 1.5; + a, button { + margin-right: $spacer; + } } .gf-form-label { @@ -114,3 +113,9 @@ $gf-form-margin: 0.4rem; &.gf-size-auto { width: auto; } } +.gf-form-btn { + padding: $input-padding-y $input-padding-x; + line-height: $input-line-height; + flex-shrink: 0; + flex-grow: 0; +} diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index ebed9c1bca8..0779b345576 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -8,7 +8,7 @@ .navbar-inner { min-height: $navbarHeight; - padding-right: 20px; + padding-right: $spacer; background-color: $navbarBackground; border-bottom: $navbarBorder; @include clearfix(); @@ -18,11 +18,6 @@ position: relative; left: 0; float: left; - margin: 0 10px 0 0; -} - -.nav { - display: block; } .navbar .nav.pull-right { @@ -175,4 +170,3 @@ color: $link-color; } - diff --git a/public/sass/components/_navs.scss b/public/sass/components/_navs.scss index 3f381922697..938288e8953 100644 --- a/public/sass/components/_navs.scss +++ b/public/sass/components/_navs.scss @@ -7,8 +7,7 @@ // ---------- .nav { - margin-left: 0; - margin-bottom: $line-height-base; + margin: 0; list-style: none; } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 40e8cc71ec7..410d5f509dc 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -33,7 +33,7 @@ } .page-header { - padding: 10px 0 39px 0px; + padding: $spacer 0 $spacer * 2.5; display: flex; justify-content: space-between; @@ -44,13 +44,19 @@ display: -webkit-flex; /* NEW - Chrome */ flex-wrap: wrap-reverse; background: transparent url(../img/page_header_line.png) no-repeat left 60px; + h1 { font-style: italic; } - margin-bottom: 2rem; } +.page-heading { + font-size: 1.25rem; + margin-top: 0; + margin-bottom: $spacer * 0.6; +} + .admin-page { max-width: 800px; margin-left: 10px; diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss index 0e64f0dec73..3999fafa05e 100644 --- a/public/sass/mixins/_buttons.scss +++ b/public/sass/mixins/_buttons.scss @@ -16,3 +16,9 @@ } +// Button sizes +@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { + padding: $padding-y $padding-x; + font-size: $font-size; + @include border-radius($border-radius); +} From 22fac874737e9a71db3bd1fd6c6ae5951d9a0249 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 18 Feb 2016 12:28:49 +0100 Subject: [PATCH 115/444] added little more spacing between sections --- public/sass/components/_gf-form.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index eeb5ea0e340..c47b432e189 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -19,7 +19,7 @@ $gf-form-margin: 0.4rem; } .gf-form-group { - margin-bottom: $spacer * 1.5; + margin-bottom: $spacer * 2.5; } .gf-form-inline { From 653d4b1d6aa541179953f92aa1bbd744ee8bfa3c Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 18 Feb 2016 12:53:43 +0100 Subject: [PATCH 116/444] chore(docs): remove old http api docs --- docs/sources/reference/http_api.md | 1534 ---------------------------- 1 file changed, 1534 deletions(-) delete mode 100644 docs/sources/reference/http_api.md diff --git a/docs/sources/reference/http_api.md b/docs/sources/reference/http_api.md deleted file mode 100644 index 70431565741..00000000000 --- a/docs/sources/reference/http_api.md +++ /dev/null @@ -1,1534 +0,0 @@ ----- -page_title: HTTP API -page_description: Grafana HTTP API Reference -page_keywords: grafana, admin, http, api, documentation ---- - -# HTTP API Reference - -The Grafana backend exposes an HTTP API, the same API is used by the frontend to do everything from saving -dashboards, creating users and updating data sources. - -## Authorization - -### Tokens - -Currently you can authenticate via an `API Token` or via a `Session cookie` (acquired using regular login or oauth). - -### Basic Auth - -If basic auth is enabled (it is enabled by default) you can authenticate your HTTP request via -standard basic auth. - -curl example: -``` -?curl http://admin:admin@localhost:3000/api/org -{"id":1,"name":"Main Org."} -``` - -### Create API Token - -Open the sidemenu and click the organization dropdown and select the `API Keys` option. - -![](/img/v2/orgdropdown_api_keys.png) - -You use the token in all requests in the `Authorization` header, like this: - -**Example**: - - GET http://your.grafana.com/api/dashboards/db/mydash HTTP/1.1 - Accept: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -The `Authorization` header value should be `Bearer `. - -## Dashboards - -### Create / Update dashboard - -`POST /api/dashboards/db` - -Creates a new dashboard or updates an existing dashboard. - -**Example Request for new dashboard**: - - POST /api/dashboards/db HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "dashboard": { - "id": null, - "title": "Production Overview", - "tags": [ "templated" ], - "timezone": "browser", - "rows": [ - { - } - ], - "schemaVersion": 6, - "version": 0 - }, - "overwrite": false - } - -JSON Body schema: - -- **dashboard** – The complete dashboard model, id = null to create a new dashboard. -- **overwrite** – Set to true if you want to overwrite existing dashboard with newer version or with same dashboard title. - -**Example Response**: - - HTTP/1.1 200 OK - Content-Type: application/json; charset=UTF-8 - Content-Length: 78 - - { - "slug": "production-overview", - "status": "success", - "version": 1 - } - -Status Codes: - -- **200** – Created -- **400** – Errors (invalid json, missing or invalid fields, etc) -- **401** – Unauthorized -- **412** – Precondition failed - -The **412** status code is used when a newer dashboard already exists (newer, its version is greater than the version that was sent). The -same status code is also used if another dashboard exists with the same title. The response body will look like this: - - HTTP/1.1 412 Precondition Failed - Content-Type: application/json; charset=UTF-8 - Content-Length: 97 - - { - "message": "The dashboard has been changed by someone else", - "status": "version-mismatch" - } - -In in case of title already exists the `status` property will be `name-exists`. - -### Get dashboard - -`GET /api/dashboards/db/:slug` - -Will return the dashboard given the dashboard slug. Slug is the url friendly version of the dashboard title. - -**Example Request**: - - GET /api/dashboards/db/production-overview HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "meta": { - "isStarred": false, - "slug": "production-overview" - }, - "model": { - "id": null, - "title": "Production Overview", - "tags": [ "templated" ], - "timezone": "browser", - "rows": [ - { - } - ], - "schemaVersion": 6, - "version": 0 - } - } - -### Delete dashboard - -`DELETE /api/dashboards/db/:slug` - -The above will delete the dashboard with the specified slug. The slug is the url friendly (unique) version of the dashboard title. - -**Example Request**: - - DELETE /api/dashboards/db/test HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"title": "Test"} - -### Gets the home dashboard - -`GET /api/dashboards/home` - -Will return the home dashboard. - -**Example Request**: - - GET /api/dashboards/home HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "meta": { - "isHome":true, - "canSave":false, - "canEdit":false, - "canStar":false, - "slug":"", - "expires":"0001-01-01T00:00:00Z", - "created":"0001-01-01T00:00:00Z" - }, - "dashboard": { - "editable":false, - "hideControls":true, - "nav":[ - { - "enable":false, - "type":"timepicker" - } - ], - "rows": [ - { - - } - ], - "style":"dark", - "tags":[], - "templating":{ - "list":[ - ] - }, - "time":{ - }, - "timezone":"browser", - "title":"Home", - "version":5 - } - } - -### Tags for Dashboard - - -`GET /api/dashboards/tags` - -Get all tabs of dashboards - -**Example Request**: - - GET /api/dashboards/home HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "term":"tag1", - "count":1 - }, - { - "term":"tag2", - "count":4 - } - ] - -### Dashboard from JSON file - -`GET /file/:file` - -### Search Dashboards - -`GET /api/search/` - -Status Codes: - -- **query** – Search Query -- **tags** – Tags to use -- **starred** – Flag indicating if only starred Dashboards should be returned -- **tagcloud** - Flag indicating if a tagcloud should be returned - -**Example Request**: - - GET /api/search?query=MyDashboard&starred=true&tag=prod HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id":1, - "title":"Production Overview", - "uri":"db/production-overview", - "type":"dash-db", - "tags":[], - "isStarred":false - } - ] - -## Data sources - -### Get all datasources - -`GET /api/datasources` - -**Example Request**: - - GET /api/datasources HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id":1, - "orgId":1, - "name":"datasource_elastic", - "type":"elasticsearch", - "access":"proxy", - "url":"http://mydatasource.com", - "password":"", - "user":"", - "database":"grafana-dash", - "basicAuth":false, - "basicAuthUser":"", - "basicAuthPassword":"", - "isDefault":false, - "jsonData":null - } - ] - -### Get a single data sources by Id - -`GET /api/datasources/:datasourceId` - -**Example Request**: - - GET /api/datasources/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "orgId":1, - "name":"test_datasource", - "type":"graphite", - "access":"proxy", - "url":"http://mydatasource.com", - "password":"", - "user":"", - "database":"", - "basicAuth":false, - "basicAuthUser":"", - "basicAuthPassword":"", - "isDefault":false, - "jsonData":null - } - -### Create data source - -`POST /api/datasources` - -**Example Request**: - - POST /api/datasources HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"test_datasource", - "type":"graphite", - "url":"http://mydatasource.com", - "access":"proxy", - "basicAuth":false - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"id":1,"message":"Datasource added"} - -### Update an existing data source - -`PUT /api/datasources/:datasourceId` - -**Example Request**: - - PUT /api/datasources/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "id":1, - "orgId":1, - "name":"test_datasource", - "type":"graphite", - "access":"proxy", - "url":"http://mydatasource.com", - "password":"", - "user":"", - "database":"", - "basicAuth":true, - "basicAuthUser":"basicuser", - "basicAuthPassword":"basicuser", - "isDefault":false, - "jsonData":null - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Datasource updated"} - -### Delete an existing data source - -`DELETE /api/datasources/:datasourceId` - -**Example Request**: - - DELETE /api/datasources/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Data source deleted"} - -### Available data source types - -`GET /api/datasources/plugins` - -**Example Request**: - - GET /api/datasources/plugins HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "grafana":{ - "metrics":true,"module":"plugins/datasource/grafana/datasource", - "name":"Grafana (for testing)", - "partials":{ - "query":"app/plugins/datasource/grafana/partials/query.editor.html" - }, - "pluginType":"datasource", - "serviceName":"GrafanaDatasource", - "type":"grafana" - } - } - -## Data source proxy calls - -`GET /api/datasources/proxy/:datasourceId/*` - -Proxies all calls to the actual datasource. - -## Organisation - -### Get current Organisation - -`GET /api/org` - -**Example Request**: - - GET /api/org HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "name":"Main Org." - } - -### Get Organisation by Id - -`GET /api/orgs/:orgId` - -**Example Request**: - - GET /api/orgs/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "name":"Main Org.", - "address":{ - "address1":"", - "address2":"", - "city":"", - "zipCode":"", - "state":"", - "country":"" - } - } - -### Get Organisation by Name - -`GET /api/orgs/name/:orgName` - -**Example Request**: - - GET /api/orgs/name/Main%20Org%2E HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "id":1, - "name":"Main Org.", - "address":{ - "address1":"", - "address2":"", - "city":"", - "zipCode":"", - "state":"", - "country":"" - } - } - -### Update current Organisation - -`PUT /api/org` - -**Example Request**: - - PUT /api/org HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"Main Org." - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization updated"} - - -### Get all users within the actual organisation - -`GET /api/org/users` - -**Example Request**: - - GET /api/org/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "orgId":1, - "userId":1, - "email":"admin@mygraf.com", - "login":"admin", - "role":"Admin" - } - ] - -### Add a new user to the actual organisation - -`POST /api/org/users` - -Adds a global user to the actual organisation. - -**Example Request**: - - POST /api/org/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "role": "Admin", - "loginOrEmail": "admin" - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User added to organization"} - -### Updates the given user - -`PATCH /api/org/users/:userId` - -**Example Request**: - - PATCH /api/org/users/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "role": "Viewer", - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization user updated"} - - -### Delete user in actual organisation - -`DELETE /api/org/users/:userId` - -**Example Request**: - - DELETE /api/org/users/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User removed from organization"} - - -## Organisations - -### Search all Organisations - -`GET /api/orgs` - -**Example Request**: - - GET /api/orgs HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id":1, - "name":"Main Org." - } - ] - -### Update Organisation - -`PUT /api/orgs/:orgId` - -Update Organisation, fields *Adress 1*, *Adress 2*, *City* are not implemented yet. - -**Example Request**: - - PUT /api/orgs/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"Main Org 2." - } - - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization updated"} - -### Get Users in Organisation - -`GET /api/orgs/:orgId/users` - -**Example Request**: - - GET /api/orgs/1/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - [ - { - "orgId":1, - "userId":1, - "email":"admin@mygraf.com", - "login":"admin", - "role":"Admin" - } - ] - -### Add User in Organisation - -`POST /api/orgs/:orgId/users` - -**Example Request**: - - POST /api/orgs/1/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "loginOrEmail":"user", - "role":"Viewer" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User added to organization"} - -### Update Users in Organisation - -`PATCH /api/orgs/:orgId/users/:userId` - -**Example Request**: - - PATCH /api/orgs/1/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "role":"Admin" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Organization user updated"} - -### Delete User in Organisation - -`DELETE /api/orgs/:orgId/users/:userId` - -**Example Request**: - - DELETE /api/orgs/1/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User removed from organization"} - -## Users - -### Search Users - -`GET /api/users` - -**Example Request**: - - GET /api/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "id": 1, - "name": "Admin", - "login": "admin", - "email": "admin@mygraf.com", - "isAdmin": true - }, - { - "id": 2, - "name": "User", - "login": "user", - "email": "user@mygraf.com", - "isAdmin": false - } - ] - -### Get single user by Id - -`GET /api/users/:id` - -**Example Request**: - - GET /api/users/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "email": "user@mygraf.com" - "name": "admin", - "login": "admin", - "theme": "light", - "orgId": 1, - "isGrafanaAdmin": true - } - -### User Update - -`PUT /api/users/:id` - -**Example Request**: - - PUT /api/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "email":"user@mygraf.com", - "name":"User2", - "login":"user", - "theme":"light" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User updated"} - - -### Get Organisations for user - -`GET /api/users/:id/orgs` - -**Example Request**: - - GET /api/users/1/orgs HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "orgId":1, - "name":"Main Org.", - "role":"Admin" - } - ] - -## User - -### Actual User - -`GET /api/user` - -**Example Request**: - - GET /api/user HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "email":"admin@mygraf.com", - "name":"Admin", - "login":"admin", - "theme":"light", - "orgId":1, - "isGrafanaAdmin":true - } - -### Change Password - -`PUT /api/user/password` - -Changes the password for the user - -**Example Request**: - - PUT /api/user/password HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "oldPassword": "old_password", - "newPassword": "new_password", - "confirmNew": "confirm_new_password" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"User password changed"} - -### Switch user context - -`POST /api/user/using/:organisationId` - -Switch user context to the given organisation. - -**Example Request**: - - POST /api/user/using/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Active organization changed"} - -### Organisations of the actual User - -`GET /api/user/orgs` - -Return a list of all organisations of the current user. - -**Example Request**: - - GET /api/user/orgs HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - [ - { - "orgId":1, - "name":"Main Org.", - "role":"Admin" - } - ] - -### Star a dashboard - -`POST /api/user/stars/dashboard/:dashboardId` - -Stars the given Dashboard for the actual user. - -**Example Request**: - - POST /api/user/stars/dashboard/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Dashboard starred!"} - -### Unstar a dashboard - -`DELETE /api/user/stars/dashboard/:dashboardId` - -Deletes the starring of the given Dashboard for the actual user. - -**Example Request**: - - DELETE /api/user/stars/dashboard/1 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Dashboard unstarred"} - - -## Snapshots - -### Create new snapshot - -`POST /api/snapshots` - -**Example Request**: - - POST /api/snapshots HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "dashboard": { - "editable":false, - "hideControls":true, - "nav":[ - { - "enable":false, - "type":"timepicker" - } - ], - "rows": [ - { - - } - ], - "style":"dark", - "tags":[], - "templating":{ - "list":[ - ] - }, - "time":{ - }, - "timezone":"browser", - "title":"Home", - "version":5 - }, - "expires": 3600 - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - { - "deleteKey":"XXXXXXX", - "deleteUrl":"myurl/dashboard/snapshot/XXXXXXX", - "key":"YYYYYYY", - "url":"myurl/dashboard/snapshot/YYYYYYY" - } - -Keys: - -- **deleteKey** – Key generated to delete the snapshot -- **key** – Key generated to share the dashboard - -### Get Snapshot by Id - -`GET /api/snapshots/:key` - -**Example Request**: - - GET /api/snapshots/YYYYYYY HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "meta":{ - "isSnapshot":true, - "type":"snapshot", - "canSave":false, - "canEdit":false, - "canStar":false, - "slug":"", - "expires":"2200-13-32T25:23:23+02:00", - "created":"2200-13-32T28:24:23+02:00" - }, - "dashboard": { - "editable":false, - "hideControls":true, - "nav":[ - { - "enable":false, - "type":"timepicker" - } - ], - "rows": [ - { - - } - ], - "style":"dark", - "tags":[], - "templating":{ - "list":[ - ] - }, - "time":{ - }, - "timezone":"browser", - "title":"Home", - "version":5 - } - } - -### Delete Snapshot by Id - -`GET /api/snapshots-delete/:key` - -**Example Request**: - - GET /api/snapshots/YYYYYYY HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message":"Snapshot deleted. It might take an hour before it's cleared from a CDN cache."} - - -## Frontend Settings - -### Get Settings - -`GET /api/frontend/settings` - -**Example Request**: - - GET /api/frontend/settings HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "allowOrgCreate":true, - "appSubUrl":"", - "buildInfo":{ - "buildstamp":xxxxxx, - "commit":"vyyyy", - "version":"zzzzz" - }, - "datasources":{ - "datasourcename":{ - "index":"grafana-dash", - "meta":{ - "annotations":true, - "module":"plugins/datasource/grafana/datasource", - "name":"Grafana", - "partials":{ - "annotations":"app/plugins/datasource/grafana/partials/annotations.editor.html", - "config":"app/plugins/datasource/grafana/partials/config.html" - }, - "pluginType":"datasource", - "serviceName":"Grafana", - "type":"grafanasearch" - } - } - }, - "defaultDatasource": "Grafana" - } - -## Login - -### Renew session based on remember cookie - -`GET /api/login/ping` - -**Example Request**: - - GET /api/login/ping HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"message": "Logged in"} - -## Admin - -### Settings - -`GET /api/admin/settings` - -**Example Request**: - - GET /api/admin/settings - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "DEFAULT": - { - "app_mode":"production"}, - "analytics": - { - "google_analytics_ua_id":"", - "reporting_enabled":"false" - }, - "auth.anonymous":{ - "enabled":"true", - "org_name":"Main Org.", - "org_role":"Viewer" - }, - "auth.basic":{ - "enabled":"false" - }, - "auth.github":{ - "allow_sign_up":"false", - "allowed_domains":"", - "allowed_organizations":"", - "api_url":"https://api.github.com/user", - "auth_url":"https://github.com/login/oauth/authorize", - "client_id":"some_id", - "client_secret":"************", - "enabled":"false", - "scopes":"user:email", - "team_ids":"", - "token_url":"https://github.com/login/oauth/access_token" - }, - "auth.google":{ - "allow_sign_up":"false","allowed_domains":"", - "api_url":"https://www.googleapis.com/oauth2/v1/userinfo", - "auth_url":"https://accounts.google.com/o/oauth2/auth", - "client_id":"some_client_id", - "client_secret":"************", - "enabled":"false", - "scopes":"https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email", - "token_url":"https://accounts.google.com/o/oauth2/token" - }, - "auth.ldap":{ - "config_file":"/etc/grafana/ldap.toml", - "enabled":"false" - }, - "auth.proxy":{ - "auto_sign_up":"true", - "enabled":"false", - "header_name":"X-WEBAUTH-USER", - "header_property":"username" - }, - "dashboards.json":{ - "enabled":"false", - "path":"/var/lib/grafana/dashboards" - }, - "database":{ - "host":"127.0.0.1:0000", - "name":"grafana", - "password":"************", - "path":"grafana.db", - "ssl_mode":"disable", - "type":"sqlite3", - "user":"root" - }, - "emails":{ - "templates_pattern":"emails/*.html", - "welcome_email_on_sign_up":"false" - }, - "event_publisher":{ - "enabled":"false", - "exchange":"grafana_events", - "rabbitmq_url":"amqp://localhost/" - }, - "log":{ - "buffer_len":"10000", - "level":"Info", - "mode":"file" - }, - "log.console":{ - "level":"" - }, - "log.file":{ - "daily_rotate":"true", - "file_name":"", - "level":"", - "log_rotate":"true", - "max_days":"7", - "max_lines":"1000000", - "max_lines_shift":"28", - "max_size_shift":"" - }, - "paths":{ - "data":"/tsdb/grafana", - "logs":"/logs/apps/grafana"}, - "security":{ - "admin_password":"************", - "admin_user":"admin", - "cookie_remember_name":"grafana_remember", - "cookie_username":"grafana_user", - "disable_gravatar":"false", - "login_remember_days":"7", - "secret_key":"************" - }, - "server":{ - "cert_file":"", - "cert_key":"", - "domain":"mygraf.com", - "enable_gzip":"false", - "enforce_domain":"false", - "http_addr":"127.0.0.1", - "http_port":"0000", - "protocol":"http", - "root_url":"%(protocol)s://%(domain)s:%(http_port)s/", - "router_logging":"true", - "static_root_path":"public" - }, - "session":{ - "cookie_name":"grafana_sess", - "cookie_secure":"false", - "gc_interval_time":"", - "provider":"file", - "provider_config":"sessions", - "session_life_time":"86400" - }, - "smtp":{ - "cert_file":"", - "enabled":"false", - "from_address":"admin@grafana.localhost", - "host":"localhost:25", - "key_file":"", - "password":"************", - "skip_verify":"false", - "user":""}, - "users":{ - "allow_org_create":"true", - "allow_sign_up":"false", - "auto_assign_org":"true", - "auto_assign_org_role":"Viewer" - } - } - -### Grafana Stats - -`GET /api/admin/stats` - -**Example Request**: - - GET /api/admin/stats - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - { - "user_count":2, - "org_count":1, - "dashboard_count":4, - "db_snapshot_count":2, - "db_tag_count":6, - "data_source_count":1, - "playlist_count":1, - "starred_db_count":2, - "grafana_admin_count":2 - } - -### Global Users - -`POST /api/admin/users` - -Create new user - -**Example Request**: - - POST /api/admin/users HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - - { - "name":"User", - "email":"user@graf.com", - "login":"user", - "password":"userpassword" - } - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"id":5,"message":"User created"} - -### Password for User - -`PUT /api/admin/users/:id/password` - -Change password for specific user - -**Example Request**: - - PUT /api/admin/users/2/password HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {"password":"userpassword"} - -### Permissions - -`PUT /api/admin/users/:id/permissions` - -**Example Request**: - - PUT /api/admin/users/2/permissions HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {message: "User permissions updated"} - -### Delete global User - -`DELETE /api/admin/users/:id` - -**Example Request**: - - DELETE /api/admin/users/2 HTTP/1.1 - Accept: application/json - Content-Type: application/json - Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk - -**Example Response**: - - HTTP/1.1 200 - Content-Type: application/json - - {message: "User deleted"} From d183c11e69e168adafc580c6b2c189649f74d2df Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 18 Feb 2016 13:09:50 +0100 Subject: [PATCH 117/444] feat(cloudwatch): add more metrics for Route53 Thank you https://github.com/aruetten for helping us find the new metrics closes #4053 --- pkg/api/cloudwatch/metrics.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/api/cloudwatch/metrics.go b/pkg/api/cloudwatch/metrics.go index b4321791926..a4e97cdb347 100644 --- a/pkg/api/cloudwatch/metrics.go +++ b/pkg/api/cloudwatch/metrics.go @@ -61,7 +61,7 @@ func init() { "AWS/OpsWorks": {"cpu_idle", "cpu_nice", "cpu_system", "cpu_user", "cpu_waitio", "load_1", "load_5", "load_15", "memory_buffers", "memory_cached", "memory_free", "memory_swap", "memory_total", "memory_used", "procs"}, "AWS/Redshift": {"CPUUtilization", "DatabaseConnections", "HealthStatus", "MaintenanceMode", "NetworkReceiveThroughput", "NetworkTransmitThroughput", "PercentageDiskSpaceUsed", "ReadIOPS", "ReadLatency", "ReadThroughput", "WriteIOPS", "WriteLatency", "WriteThroughput"}, "AWS/RDS": {"BinLogDiskUsage", "CPUUtilization", "CPUCreditUsage", "CPUCreditBalance", "DatabaseConnections", "DiskQueueDepth", "FreeableMemory", "FreeStorageSpace", "ReplicaLag", "SwapUsage", "ReadIOPS", "WriteIOPS", "ReadLatency", "WriteLatency", "ReadThroughput", "WriteThroughput", "NetworkReceiveThroughput", "NetworkTransmitThroughput"}, - "AWS/Route53": {"HealthCheckStatus", "HealthCheckPercentageHealthy"}, + "AWS/Route53": {"HealthCheckStatus", "HealthCheckPercentageHealthy", "ConnectionTime", "SSLHandshakeTime", "TimeToFirstByte"}, "AWS/SNS": {"NumberOfMessagesPublished", "PublishSize", "NumberOfNotificationsDelivered", "NumberOfNotificationsFailed"}, "AWS/SQS": {"NumberOfMessagesSent", "SentMessageSize", "NumberOfMessagesReceived", "NumberOfEmptyReceives", "NumberOfMessagesDeleted", "ApproximateNumberOfMessagesDelayed", "ApproximateNumberOfMessagesVisible", "ApproximateNumberOfMessagesNotVisible"}, "AWS/S3": {"BucketSizeBytes", "NumberOfObjects"}, From cae975cb39519b03570c5aa08c13326fd57eb2ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 18 Feb 2016 14:44:36 +0100 Subject: [PATCH 118/444] ux(): fixed login, signup, signup step2 and invite views --- .../app/features/org/partials/orgUsers.html | 1 + public/app/partials/login.html | 65 ++++--------- public/app/partials/signup_invited.html | 85 +++++------------ public/app/partials/signup_step2.html | 93 ++++++------------- public/sass/_variables.dark.scss | 1 - public/sass/_variables.light.scss | 3 +- public/sass/_variables.scss | 1 + public/sass/components/_buttons.scss | 21 ++++- public/sass/components/_gf-form.scss | 1 + public/sass/mixins/_buttons.scss | 47 ++++++++++ public/sass/pages/_login.scss | 34 ++++--- 11 files changed, 163 insertions(+), 189 deletions(-) diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 229b341c775..e2f88613e8d 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -77,6 +77,7 @@
    +
    diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 0cdd6c790c1..3880f2c1989 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -17,47 +17,23 @@
    -
    - -
    Grafana version: {{buildInfo.version}}, commit: {{buildInfo.commit}}, build date: {{buildInfo.buildstamp | date: 'yyyy-MM-dd HH:mm:ss' }}
    -
    +
    + diff --git a/public/app/partials/signup_invited.html b/public/app/partials/signup_invited.html index ead9b9c0317..9eadd6218d3 100644 --- a/public/app/partials/signup_invited.html +++ b/public/app/partials/signup_invited.html @@ -6,7 +6,8 @@ + + +
      +
    • + ${{color.name}} + {{color.value}} +
      • +
    +     + -

    Colors

    -
      -
    • - ${{color.name}} - {{color.value}} -
      • -
    +
    + + + + + + +
    + + +
    + + +
    +     + + +
+ diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 3880f2c1989..6f437a02824 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -33,7 +33,7 @@
-
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index ea2f604a687..b9d7cb21178 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -20,14 +20,14 @@ $blue-dark: #005f81; $green: #669900; $red: #CC3900; $yellow: #ECBB13; -$orange: #FF8800; $pink: #FF4444; $purple: #9933CC; $variable: #32D1DF; +$orange: #FF8800; -$brand-primary: $blue-dark; +$brand-primary: $orange; $brand-success: $green; -$brand-warning: $orange; +$brand-warning: $brand-primary; $brand-danger: $red; // Status colors @@ -103,21 +103,18 @@ $table-border: $gray-dark; // table and cell border // Buttons // ------------------------- -$btnBackground: $gray-dark; -$btnBackgroundHighlight: darken($gray-light, 15%); -$btnBorder: #bbb; -$btnPrimaryBackground: $blue-dark; -$btnPrimaryBackgroundHighlight: lighten($blue-dark, 5%); +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); $btnInfoBackground: lighten($purple, 3%); $btnInfoBackgroundHighlight: darken($purple, 3%); -$btnSuccessBackground: lighten($green, 3%); $btnSuccessBackgroundHighlight: darken($green, 3%); +$btnSuccessBackground: lighten($green, 3%); -$btnWarningBackground: lighten($orange, 3%); -$btnWarningBackgroundHighlight: darken($orange, 3%); +$btnWarningBackground: $brand-warning; +$btnWarningBackgroundHighlight: lighten($brand-warning, 8%); $btnDangerBackground: lighten($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%); @@ -216,8 +213,8 @@ $paginationActiveBackground: $blue; // Form states and alerts // ------------------------- -$state-warning-text: darken(#c09853, 10%); -$state-warning-bg: $orange; +$state-warning-text: darken(#c09853, 10%); +$state-warning-bg: $brand-warning; $errorText: #b94a48; $errorBackground: $btnDangerBackground; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index ec1dc230277..32fd60ed06f 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -23,7 +23,7 @@ $white: #fff; // Accent colors // ------------------------- $blue: #2AB2E4; -$blue-dark: #75CAEB; +$blue-dark: #75CAEB; $green: #28B62C; $red: #FF4136; $yellow: #FF851B; @@ -32,7 +32,7 @@ $pink: #E671B8; $purple: #9954BB; $variable: #2AB2E4; -$brand-primary: $blue-dark; +$brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; $brand-danger: $red; @@ -124,8 +124,8 @@ $btnBackground: $gray-lighter; $btnBackgroundHighlight: darken($gray-lighter, 15%); $btnBorder: #bbb; -$btnPrimaryBackground: lighten($blue, 3%); -$btnPrimaryBackgroundHighlight: darken($blue, 3%); +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 10%); $btnInfoBackground: lighten($purple, 3%); $btnInfoBackgroundHighlight: darken($purple, 3%); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 4825b204472..b5324a19944 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -218,7 +218,7 @@ $btn-padding-y-sm: .25rem !default; $btn-padding-x-lg: 1.5rem !default; $btn-padding-y-lg: .75rem !default; -$btn-border-radius: 1px; +$btn-border-radius: 3px; // sidemenu $side-menu-width: 15rem; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 8fc6e18fbbf..5a03350aeaa 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -67,7 +67,7 @@ // Set the backgrounds // ------------------------- .btn-primary { - @include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); + @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); } // Warning appears are orange .btn-warning { @@ -93,7 +93,7 @@ } .btn-outline-primary { - @include button-outline-variant($btnPrimaryBackground); + @include button-outline-variant($btn-primary-bg); } .btn-outline-secondary { @include button-outline-variant($btnInverseBackground); diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss index 7932a20a6bb..1fc1ef08575 100644 --- a/public/sass/components/_tags.scss +++ b/public/sass/components/_tags.scss @@ -38,23 +38,3 @@ } -// Colors -// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute) -.label, -.badge { - // Important (red) - &-important { background-color: $errorText; } - &-important[href] { background-color: darken($errorText, 10%); } - // Warnings (orange) - &-warning { background-color: $orange; } - &-warning[href] { background-color: darken($orange, 10%); } - // Success (green) - &-success { background-color: $successText; } - &-success[href] { background-color: darken($successText, 10%); } - // Info (turquoise) - &-info { background-color: $infoText; } - &-info[href] { background-color: darken($infoText, 10%); } - // Inverse (black) - &-inverse { background-color: $gray-dark; } - &-inverse[href] { background-color: darken($gray-dark, 10%); } -} diff --git a/public/sass/mixins/_buttons.scss b/public/sass/mixins/_buttons.scss index 15070fe6ef8..f77adc859c3 100644 --- a/public/sass/mixins/_buttons.scss +++ b/public/sass/mixins/_buttons.scss @@ -9,7 +9,7 @@ &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] { color: $text-color; background-image: none; - background-color: darken($endColor, 2%); + background-color: $startColor; } } @@ -18,7 +18,7 @@ @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { padding: $padding-y $padding-x; font-size: $font-size; - box-shadow: inset 0 (-$padding-y/2) rgba(0,0,0,0.2); + //box-shadow: inset 0 (-$padding-y/3) rgba(0,0,0,0.15); @include border-radius($border-radius); } diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index 06680886e9d..c4326ac0e0c 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -14,6 +14,13 @@ .color-card-page-bg { background-color: $page-bg; } .color-card-gray { background-color: $gray; } +.style-guide-button-list { + padding: $spacer; + button { + margin: 0 $spacer $spacer 0; + } +} + // define("areas/styleguide/static/script/app/colors", [], function() { // "use strict"; // var a = function(a) { diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 70c39ecbb34..cc4989f57e5 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -3,7 +3,7 @@ } .highlight-word { - color: $orange; + color: $brand-primary; } // Close icons From cacf14a41e7a904895faf4781fd83fda3c353554 Mon Sep 17 00:00:00 2001 From: Robert McLeod Date: Fri, 19 Feb 2016 16:00:51 +1300 Subject: [PATCH 126/444] Fixed bug that wasn't showing the StaticRootPath when validation failed --- pkg/setting/setting.go | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index 3de0e4b558f..803f293a33f 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -386,7 +386,7 @@ func validateStaticRootPath() error { return nil } - return errors.New("Failed to detect generated css or javascript files in static root (%s), have you executed default grunt task?") + return fmt.Errorf("Failed to detect generated css or javascript files in static root (%s), have you executed default grunt task?", StaticRootPath) } func NewConfigContext(args *CommandLineArgs) error { From 4c3048964d5f575974b7f54161abe9e0b694e2ad Mon Sep 17 00:00:00 2001 From: Robert McLeod Date: Fri, 19 Feb 2016 16:09:40 +1300 Subject: [PATCH 127/444] removed unused import: errors --- pkg/setting/setting.go | 1 - 1 file changed, 1 deletion(-) diff --git a/pkg/setting/setting.go b/pkg/setting/setting.go index 803f293a33f..1dee4445816 100644 --- a/pkg/setting/setting.go +++ b/pkg/setting/setting.go @@ -6,7 +6,6 @@ package setting import ( "bytes" "encoding/json" - "errors" "fmt" "net/url" "os" From d769f6c0841a95f411b78cf54ab50de510301c0c Mon Sep 17 00:00:00 2001 From: bergquist Date: Thu, 18 Feb 2016 18:59:50 +0100 Subject: [PATCH 128/444] ux(timepicker): fix css for the timepicker --- .../dashboard/timepicker/dropdown.html | 47 ++++++++++++------- public/sass/_grafana.scss | 1 + .../base/_font_awesome.scss} | 0 public/sass/components/_timepicker.scss | 39 +++++++++++++-- 4 files changed, 67 insertions(+), 20 deletions(-) rename public/{vendor/css/font-awesome.min.css => sass/base/_font_awesome.scss} (100%) diff --git a/public/app/features/dashboard/timepicker/dropdown.html b/public/app/features/dashboard/timepicker/dropdown.html index 30074770e45..a9fdf1ff404 100644 --- a/public/app/features/dashboard/timepicker/dropdown.html +++ b/public/app/features/dashboard/timepicker/dropdown.html @@ -1,37 +1,52 @@

Time range

+ -
- - +
+
+ +
+
+ +
+ -
- - +
+
+ +
+
+ +
- - - + + +
+
+ +
+
+ +
+
+
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 2c3ba19125b..9bc924ec79d 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -15,6 +15,7 @@ @import "base/forms"; @import "base/fonts"; @import "base/grid"; +@import "base/font_awesome"; // UTILS @import "utils/utils"; diff --git a/public/vendor/css/font-awesome.min.css b/public/sass/base/_font_awesome.scss similarity index 100% rename from public/vendor/css/font-awesome.min.css rename to public/sass/base/_font_awesome.scss diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index 5230ca5f525..777730834ab 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -21,10 +21,10 @@ } .gf-timepicker-absolute-section { - width: 300px; + width: 290px; float: left; border-right: 1px solid $divider-border-color; - padding: 0 0 0 20px; + padding: 0 10px; select { width: 183px; margin-bottom: 0; @@ -47,7 +47,7 @@ .gf-timepicker-relative-section { padding: 0 20px 0 30px; - min-height: 258px; + min-height: 237px; float: left; ul { list-style: none; @@ -66,11 +66,14 @@ .gf-timepicker-component { margin-bottom: 10px; + td { + padding: 1px; + } button.btn-sm { @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); background-image: none; border: none; - padding: 6px 9px; + padding: 6px 10px; color: $text-color; &.active span { color: $blue; @@ -86,3 +89,31 @@ .input-datetime-format { color: $link-color-disabled } + +.fa { + display: inline-block; + font: normal normal normal 14px/1 FontAwesome; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.fa-chevron-left:before { + content: "\f053"; +} +.fa-chevron-right:before { + content: "\f054"; +} + +.glyphicon-chevron-right { + + @extend .fa; + @extend .fa-chevron-right; +} + +.glyphicon-chevron-left { + + @extend .fa; + @extend .fa-chevron-left; +} From c21b353042087d582f4d654c8727671221cfbe63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Feb 2016 12:26:39 +0100 Subject: [PATCH 129/444] ux(): color/grays palate refactoring --- package.json | 5 +- public/sass/_variables.dark.scss | 95 +++++++++--------- public/sass/_variables.light.scss | 129 ++++++++++++------------- public/sass/_variables.scss | 6 +- public/sass/base/_forms.scss | 4 +- public/sass/base/_type.scss | 12 +-- public/sass/components/_alerts.scss | 2 +- public/sass/components/_dashboard.scss | 2 +- public/sass/components/_dropdown.scss | 7 +- public/sass/components/_footer.scss | 4 +- public/sass/components/_gfbox.scss | 2 +- public/sass/components/_sidemenu.scss | 8 +- public/sass/components/_tags.scss | 2 +- public/sass/pages/_login.scss | 10 +- public/sass/pages/_styleguide.scss | 11 +-- 15 files changed, 151 insertions(+), 148 deletions(-) diff --git a/package.json b/package.json index 0c31f9e2616..04a41301a77 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "grunt-karma": "~0.12.1", "grunt-ng-annotate": "^1.0.1", "grunt-notify": "^0.4.3", + "grunt-sass": "^1.1.0", "grunt-string-replace": "~1.2.1", "grunt-systemjs-builder": "^0.2.5", "grunt-tslint": "^3.0.1", @@ -51,9 +52,9 @@ "phantomjs": "^1.9.19", "reflect-metadata": "0.1.2", "rxjs": "5.0.0-beta.0", + "sass-lint": "^1.5.0", "systemjs": "0.19.20", - "zone.js": "0.5.10", - "grunt-sass": "^1.1.0" + "zone.js": "0.5.10" }, "engines": { "node": "0.4.x", diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index b9d7cb21178..f4a0bb9d0ef 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -6,12 +6,22 @@ // ------------------------- $black: #000; -$gray: #bbb; -$gray-dark: #262626; -$gray-darker: #1f1f1f; -$gray-light: #ADAFAE; -$gray-lighter: #BBBFC2; -$white: #fff; +// ------------------------- +$black: #000; +$dark-1: #141414; // (body) +$dark-2: #1f1d1d; // ($gray-darker) +$dark-3: #262626; // ($gray-dark) +$dark-4: #333333; +$dark-5: #444444; +$gray-1: #555555; +$gray-2: #6e7580; +$gray-3: #b3b3b3; +$gray-4: #cfd4d9; +$gray-5: #e8edf0; +$gray-6: #f7f9fa; +$gray-7: #fbfbfb; + +$white: #fff; // Accent colors // ------------------------- @@ -38,10 +48,10 @@ $critical: #ed2e18; // Scaffolding // ------------------------- -$body-bg: rgb(20,20,20); -$page-bg: $gray-darker; -$body-color: $gray-lighter; -$text-color: $gray-lighter; +$body-bg: rgb(20,20,20); +$page-bg: $dark-2; +$body-color: $gray-4; +$text-color: $gray-4; // Links // ------------------------- @@ -52,11 +62,11 @@ $link-hover-color: $white; // Typography // ------------------------- $headings-color: darken($white,11%); -$abbr-border-color: $gray-light !default; -$text-muted: darken($link-color,30%); +$abbr-border-color: $gray-3 !default; +$text-muted: darken($link-color,30%); -$blockquote-small-color: $gray-light !default; -$blockquote-border-color: $gray-lighter !default; +$blockquote-small-color: $gray-3 !default; +$blockquote-border-color: $gray-4 !default; $hr-border-color: rgba(0,0,0,.1) !default; @@ -66,25 +76,25 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-darker; -$panel-border: solid 1px $gray-dark; +$panel-bg: $dark-2; +$panel-border: solid 1px $dark-3; -$divider-border-color: #555; +$divider-border-color: #555; // Graphite Target Editor $tight-form-border: #050505; -$tight-form-bg: $gray-dark; +$tight-form-bg: $dark-3; -$tight-form-func-bg: #333; -$tight-form-func-highlight-bg: #444; +$tight-form-func-bg: #333; +$tight-form-func-highlight-bg: #444; $modal-background: $black; $code-tag-bg: #444; // Lists -$grafanaListBackground: $gray-dark; -$grafanaListAccent: lighten($gray-darker, 2%); -$grafanaListBorderTop: $gray-dark; +$grafanaListBackground: $dark-3; +$grafanaListAccent: lighten($dark-2, 2%); +$grafanaListBorderTop: $dark-3; $grafanaListBorderBottom: $black; $grafanaListHighlight: #333; $grafanaListMainLinkColor: $text-color; @@ -98,8 +108,8 @@ $scrollbarBorder: black; // ------------------------- $table-bg: transparent; // overall background-color $table-bg-accent: rgba(100, 100, 100, 0.3); // for striping -$table-bg-hover: $gray-dark; // for hover -$table-border: $gray-dark; // table and cell border +$table-bg-hover: $dark-3; // for hover +$table-border: $dark-3; // table and cell border // Buttons // ------------------------- @@ -119,30 +129,27 @@ $btnWarningBackgroundHighlight: lighten($brand-warning, 8%); $btnDangerBackground: lighten($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%); -$btnInverseBackground: $gray-dark; -$btnInverseBackgroundHighlight: lighten($gray-dark, 1%); +$btnInverseBackground: $dark-3; +$btnInverseBackgroundHighlight: lighten($dark-3, 1%); $btnInverseText: $link-color; $btnInverseBorder: #333; -$btnText: $gray; +$btnText: $gray-3; -$iconContainerBackground: $black; -$iconContainerBackgroundHighlight: lighten($black, 5%); -$iconContainerBorder: 1px solid transparent; -$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05); +$iconContainerBackground: $black; // Forms // ------------------------- -$input-bg: lighten($gray-dark,5%); +$input-bg: lighten($dark-3,5%); $input-bg-disabled: #555; -$input-color: $gray-light; -$input-border-color: lighten($gray-dark,5%); +$input-color: $gray-4; +$input-border-color: lighten($dark-2,5%); $input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; $input-border-focus: $input-border-color !default; $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: #999 !default; -$input-label-bg: $gray-dark; +$input-label-bg: $dark-3; // Search @@ -150,7 +157,7 @@ $searchShadow: 0 0 35px 0 $body-bg; // Dropdowns // ------------------------- -$dropdownBackground: $gray-dark; +$dropdownBackground: $dark-3; $dropdownBorder: rgba(0,0,0,.2); $dropdownDividerTop: transparent; $dropdownDividerBottom: #444; @@ -182,12 +189,12 @@ $horizontalComponentOffset: 180px; $wellBackground: #131517; $navbarHeight: 52px; -$navbarBackgroundHighlight: $gray-dark; -$navbarBackground: $gray-dark; +$navbarBackgroundHighlight: $dark-3; +$navbarBackground: $dark-3; $navbarBorder: 1px solid $body-bg; -$navbarText: $gray-light; -$navbarLinkColor: $gray-light; +$navbarText: $gray-4; +$navbarLinkColor: $gray-4; $navbarLinkColorHover: $white; $navbarLinkColorActive: $navbarLinkColorHover; $navbarLinkBackgroundHover: transparent; @@ -200,10 +207,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Sidemenu // ------------------------- -$sideMenuTopShadow: $navbarDropdownShadow; -$sideMenuBackground: $gray-dark; -$sideMenuBackgroundHighlight: lighten($gray-dark, 4%); -$sideMenuShadow: 0 0 35px 0 $body-bg; +$side-menu-bg: $dark-3; +$side-menu-item-hover-bg: $dark-4; // Pagination // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 32fd60ed06f..2a779767356 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -10,15 +10,23 @@ // Grays // ------------------------- $black: #000; -$gray-darker: lighten(#000, 11.5%); // #222 -$gray-dark: lighten(#000, 20%); // #333 -$gray: lighten(#000, 33.5%); // #555 -$gray-light: lighten(#000, 60%); // #999 -$gray-light2: lighten(#000, 70%); // #999 -$gray-lighter: lighten(#000, 96.5%); // #eee -$gray-lightest: lighten(#000, 98%); // #eee -$white: #fff; +// ------------------------- +$black: #000; +$dark-1: #141414; // (body) +$dark-2: #1f1d1d; // ($gray-darker) +$dark-3: #262626; // ($gray-dark) +$dark-4: #333333; +$dark-5: #444444; +$gray-1: #555555; +$gray-2: #7B7B7B; +$gray-3: #b3b3b3; +$gray-4: #D8D9DA; +$gray-5: #ECECEC; +$gray-6: #f4f5f8; +$gray-7: #fbfbfb; + +$white: #fff; // Accent colors // ------------------------- @@ -48,23 +56,23 @@ $critical: #EC2128; $body-bg: $white; $page-bg: $white; -$body-color: $gray; -$text-color: $gray; +$body-color: $gray-1; +$text-color: $gray-1; // Links // ------------------------- -$link-color: $gray; +$link-color: $gray-1; $link-color-disabled: lighten($link-color,30%); $link-hover-color: darken($link-color, 20%); // Typography // ------------------------- $headings-color: $text-color; -$abbr-border-color: $gray-light !default; +$abbr-border-color: $gray-2 !default; $text-muted: darken($link-color,30%); -$blockquote-small-color: $gray-light !default; -$blockquote-border-color: $gray-lighter !default; +$blockquote-small-color: $gray-2 !default; +$blockquote-border-color: $gray-3 !default; $hr-border-color: rgba(0,0,0,.1) !default; @@ -75,31 +83,27 @@ $component-active-bg: $brand-primary !default; // Panel // ------------------------- -$panel-bg: $gray-lightest; -$panel-border: solid 1px $gray-lighter; +$panel-bg: $gray-7; +$panel-border: solid 1px $gray-6; -$divider-border-color: $gray-light; - -// Submenu -$submenuBackground: rgb(218, 217, 217); -$submenuBorder: $white; +$divider-border-color: $gray-2; // Graphite Target Editor -$tight-form-border: #ddd; -$tight-form-bg: #efefef; +$tight-form-border: $gray-4; +$tight-form-bg: $gray-6; -$tight-form-func-bg: darken($tight-form-bg, 5%); -$tight-form-func-highlight-bg: darken($tight-form-bg, 10%); +$tight-form-func-bg: $gray-5; +$tight-form-func-highlight-bg: $gray-6; -$modal-background: $body-bg; -$code-tag-bg: #ddd; +$modal-background: $body-bg; +$code-tag-bg: #ddd; // Lists -$grafanaListBackground: darken($gray-lighter,5%); -$grafanaListAccent: darken($gray-lighter,8%); +$grafanaListBackground: darken($gray-3,5%); +$grafanaListAccent: darken($gray-3,8%); $grafanaListBorderTop: #eee; $grafanaListBorderBottom: #eee; -$grafanaListHighlight: darken($gray-lighter,10%); +$grafanaListHighlight: darken($gray-3,10%); $grafanaListHighlightContrast: #ddd; $grafanaListMainLinkColor: $text-color; @@ -114,14 +118,14 @@ $table-border: #ddd; // table and cell border // Scrollbars -$scrollbarBackground: $gray-lighter; -$scrollbarBackground2: $gray-lighter; -$scrollbarBorder: $gray-light; +$scrollbarBackground: $gray-3; +$scrollbarBackground2: $gray-3; +$scrollbarBorder: $gray-2; // Buttons // ------------------------- -$btnBackground: $gray-lighter; -$btnBackgroundHighlight: darken($gray-lighter, 15%); +$btnBackground: $gray-3; +$btnBackgroundHighlight: darken($gray-3, 15%); $btnBorder: #bbb; $btn-primary-bg: $brand-primary; @@ -139,50 +143,45 @@ $btnWarningBackgroundHighlight: darken($orange, 3%); $btnDangerBackground: lighten($red, 3%); $btnDangerBackgroundHighlight: darken($red, 3%); -$btnInverseBackground: $gray-lighter; -$btnInverseBackgroundHighlight: darken($gray-lighter, 5%); -$btnInverseText: $black; -$btnInverseBorder: $gray-light; +$btnInverseBackground: $gray-5; +$btnInverseBackgroundHighlight: darken($gray-5, 5%); +$btnInverseText: $dark-4; -$btnText: $gray-lighter; - -$iconContainerBackground: $white; -$iconContainerBackgroundHighlight: lighten($white, 5%); -$iconContainerBorder: 1px solid rgba(0,0,0, 0.05); -$iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05); +$btnText: $gray-3; +$iconContainerBackground: $white; // Forms // ------------------------- -$input-bg: $white; -$input-bg-disabled: $gray-lighter; +$input-bg: $gray-7; +$input-bg-disabled: $gray-5; -$input-color: #020202; -$input-border-color: $gray-lighter; -$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default; -$input-border-focus: #66afe9 !default; -$input-box-shadow-focus: rgba(102,175,233,.6) !default; -$input-color-placeholder: #999 !default; -$input-label-bg: #f8f8f8; +$input-color: $dark-3; +$input-border-color: $gray-5; +$input-box-shadow: none; +$input-border-focus: $blue !default; +$input-box-shadow-focus: $blue !default; +$input-color-placeholder: $gray-4 !default; +$input-label-bg: $gray-5; // Sidemenu // ------------------------- -$sideMenuBackground: $panel-bg; -$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%); +$side-menu-bg: $body-bg; +$side-menu-item-hover-bg: $gray-6; // search -$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%); +$searchShadow: 0 5px 30px 0 lighten($gray-2, 30%); // Dropdowns // ------------------------- $dropdownBackground: $white; $dropdownBorder: $tight-form-border; -$dropdownDividerTop: #e5e5e5; +$dropdownDividerTop: $gray-6; $dropdownDividerBottom: $white; $dropdownDivider: $dropdownDividerTop; -$dropdownTitle: #333; +$dropdownTitle: $dark-5; -$dropdownLinkColor: $gray-dark; +$dropdownLinkColor: $dark-3; $dropdownLinkColorHover: $white; $dropdownLinkColorActive: $white; @@ -196,12 +195,12 @@ $dropdownLinkBackgroundHover: $blue; // Input placeholder text color // ------------------------- -$placeholderText: $gray-light; +$placeholderText: $gray-2; // Hr border color // ------------------------- -$hrBorder: $gray-lighter; +$hrBorder: $gray-3; // Horizontal forms & lists @@ -211,7 +210,7 @@ $horizontalComponentOffset: 180px; // Wells // ------------------------- -$wellBackground: $gray-lighter; +$wellBackground: $gray-3; // Navbar @@ -238,7 +237,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Pagination // ------------------------- -$paginationBackground: $gray-light; +$paginationBackground: $gray-2; $paginationBorder: transparent; $paginationActiveBackground: $blue; @@ -265,7 +264,7 @@ $infoBorder: transparent; // Tooltips and popovers // ------------------------- $tooltipColor: $white; -$tooltipBackground: $gray-dark; +$tooltipBackground: $gray-4; $tooltipArrowWidth: 5px; $tooltipArrowColor: $tooltipBackground; $tooltipLinkColor: darken($white,11%); diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index b5324a19944..b6bb37db783 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -127,7 +127,7 @@ $lead-font-size: 1.25rem !default; $lead-font-weight: 300 !default; $headings-margin-bottom: ($spacer / 2) !default; -$headings-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; +$headings-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; $headings-font-weight: 400 !default; $headings-line-height: 1.1 !default; @@ -145,9 +145,9 @@ $list-inline-padding: 5px !default; $line-height-lg: (4 / 3) !default; $line-height-sm: 1.5 !default; -$border-radius: 0.0rem !default; +$border-radius: 0.2rem !default; $border-radius-lg: 0.3rem !default; -$border-radius-sm: 0.2rem !default; +$border-radius-sm: 0.1rem !default; $caret-width: .3em !default; $caret-width-lg: $caret-width !default; diff --git a/public/sass/base/_forms.scss b/public/sass/base/_forms.scss index e65206471ad..396f1f9b099 100644 --- a/public/sass/base/_forms.scss +++ b/public/sass/base/_forms.scss @@ -14,14 +14,14 @@ legend { margin-bottom: $line-height-base; font-size: $font-size-base * 1.5; line-height: $line-height-base * 2; - color: $gray-dark; + color: $gray-3; border: 0; border-bottom: 1px solid #e5e5e5; // Small small { font-size: $line-height-base * .75; - color: $gray-light; + color: $gray-2; } } diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index b2281c6c578..bf4045daa1d 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -27,9 +27,9 @@ em { font-style: italic; color: $headings-color; } cite { font-style: normal; } // Utility classes -.muted { color: $gray-light; } +.muted { color: $gray-2; } a.muted:hover, -a.muted:focus { color: darken($gray-light, 10%); } +a.muted:focus { color: darken($gray-2, 10%); } .text-warning { color: $state-warning-text; } a.text-warning:hover, @@ -199,7 +199,7 @@ abbr[title], // Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 abbr[data-original-title] { cursor: help; - border-bottom: 1px dotted $gray-light; + border-bottom: 1px dotted $gray-2; } abbr.initialism { font-size: 90%; @@ -210,7 +210,7 @@ abbr.initialism { blockquote { padding: 0 0 0 15px; margin: 0 0 $line-height-base; - border-left: 5px solid $gray-lighter; + border-left: 5px solid $gray-3; p { margin-bottom: 0; font-size: $font-size-base * 1.25; @@ -220,7 +220,7 @@ blockquote { small { display: block; line-height: $line-height-base; - color: $gray-light; + color: $gray-2; &:before { content: '\2014 \00A0'; } @@ -231,7 +231,7 @@ blockquote { float: right; padding-right: 15px; padding-left: 0; - border-right: 5px solid $gray-lighter; + border-right: 5px solid $gray-3; border-left: 0; p, small { diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss index 9dca45f7c49..2290386fc88 100644 --- a/public/sass/components/_alerts.scss +++ b/public/sass/components/_alerts.scss @@ -55,7 +55,7 @@ border-radius: 50%; border: none; font-size: 1.1rem; - color: $gray-darker; + color: $gray-2; .fa { position: relative; top: -2px; diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index c7232dcb26e..777d364123f 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -245,7 +245,7 @@ div.flot-text { .panel-drop-zone { display: none; .panel-container { - border: 1px solid $gray-dark; + border: 1px solid $dark-3; } } diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index af2888be739..76bc840b3d9 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -46,7 +46,6 @@ display: none; // none by default, but block on "open" of the menu float: left; min-width: 140px; - padding: 5px 0; margin: 2px 0 0; // override default ul list-style: none; background-color: $dropdownBackground; @@ -92,7 +91,7 @@ .dropdown-submenu:focus > a { text-decoration: none; color: $dropdownLinkColorHover; - background-color: $grafanaListHighlight; + background-color: $dropdownLinkBackgroundHover; } // Active state @@ -103,7 +102,7 @@ color: $dropdownLinkColorActive; text-decoration: none; outline: 0; - background-color: $grafanaListHighlight; + background-color: $dropdownLinkBackgroundHover; } // Disabled state @@ -112,7 +111,7 @@ .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { - color: $gray-light; + color: $gray-2; } // Nuke hover/focus effects .dropdown-menu > .disabled > a:hover, diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index 302fd8ee142..9f2674980b0 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -3,7 +3,7 @@ bottom: 2px; left: 3px; font-size: 80%; - color: darken($gray, 25%); - a { color: darken($gray, 25%); } + color: darken($gray-1, 25%); + a { color: darken($gray-1, 25%); } } diff --git a/public/sass/components/_gfbox.scss b/public/sass/components/_gfbox.scss index 4dadfcf9e14..b4e31a2397d 100644 --- a/public/sass/components/_gfbox.scss +++ b/public/sass/components/_gfbox.scss @@ -28,7 +28,7 @@ .gf-box-header-save-btn { padding: 7px 0; float: right; - color: $gray-light; + color: $gray-2; font-style: italic; } diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index e4f94fd1715..8063bbaa2c9 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -7,7 +7,7 @@ top: 52px; left: 0; width: $side-menu-width; - background-color: $body-bg; + background-color: $side-menu-bg; z-index: 101; transform: translate3d(0, -100%, 0); visibility: hidden; @@ -68,7 +68,7 @@ display: block; top: 0px; left: $side-menu-width; - background-color: $body-bg; + background-color: $side-menu-bg; } } } @@ -112,7 +112,7 @@ display: block; &:hover { - background-color: $sideMenuBackgroundHighlight; + background-color: $side-menu-item-hover-bg; } .sidemenu-item-text { @@ -166,7 +166,7 @@ box-sizing: border-box; cursor: pointer; &:hover { - background-color: $sideMenuBackgroundHighlight; + background-color: $side-menu-item-hover-bg; } display: table; position: relative; diff --git a/public/sass/components/_tags.scss b/public/sass/components/_tags.scss index 1fc1ef08575..605713b7552 100644 --- a/public/sass/components/_tags.scss +++ b/public/sass/components/_tags.scss @@ -10,7 +10,7 @@ vertical-align: baseline; white-space: nowrap; text-shadow: 0 -1px 0 rgba(0,0,0,.25); - background-color: $gray-light; + background-color: $gray-1; } diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 94a32c91f7f..0d17b3a53b0 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -105,7 +105,7 @@ margin-top: 10px; padding: 10px; a { - color: $gray-light; + color: $gray-2; } } @@ -117,11 +117,11 @@ .login-divider-line { width: 100%; height: 10px; - border-bottom: 1px solid $gray; + border-bottom: 1px solid $gray-1; .login-divider-text { - background-color: $gray-darker; - color: $gray-light; + background-color: $dark-3; + color: $gray-2; padding: 0 10px; } } @@ -168,7 +168,7 @@ } @include media-breakpoint-up(md) { - .login-box-logo { + .login-box-logo { img { width: 125px; } diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index c4326ac0e0c..3aed004a7f6 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -1,10 +1,9 @@ .style-guide-color-card { list-style: none; - margin: 0 $spacer $spacer 0; - float: left; - padding: $spacer*2; - width: 20rem; - border-radius: 0.5rem; + margin: 0; + padding: $spacer; + width: 100%; + text-align: center; text-shadow: 0 0 8px #fff; color: $black; font-size: $font-size-sm; @@ -12,7 +11,7 @@ .color-card-body-bg { background-color: $body-bg; } .color-card-page-bg { background-color: $page-bg; } -.color-card-gray { background-color: $gray; } +.color-card-gray { background-color: $gray-1; } .style-guide-button-list { padding: $spacer; From 317f2d043f450ed93f898f341302693585829b46 Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 19 Feb 2016 13:53:29 +0100 Subject: [PATCH 130/444] ux(playlist): migrate to new stylesheet --- .../features/playlist/partials/playlist.html | 36 +++++++++---------- public/sass/pages/_playlist.scss | 1 - 2 files changed, 17 insertions(+), 20 deletions(-) diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index d52506cc5a7..98c5098824d 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -2,25 +2,25 @@
-

New Playlist

-

Edit Playlist

- -

Name and interval

+
+

New Playlist

+

Edit Playlist

+
- Name - + Name +
- Interval - + Interval +
-
-
-
Add dashboards
+
+
+
Add dashboards
@@ -28,8 +28,8 @@
-
-
Search results ({{ctrl.filteredDashboards.length}})
+
+
Search results ({{ctrl.filteredDashboards.length + ctrl.filteredTags.length}})
@@ -44,7 +44,8 @@
-
+
+
@@ -53,10 +54,9 @@
-
-
+
Added dashboards
@@ -88,12 +88,10 @@
-
+
Save Cancel
- -
diff --git a/public/sass/pages/_playlist.scss b/public/sass/pages/_playlist.scss index ac17cb02d94..cbe94593f0a 100644 --- a/public/sass/pages/_playlist.scss +++ b/public/sass/pages/_playlist.scss @@ -1,5 +1,4 @@ .playlist-search-container { - // margin: 15px; z-index: 1000; position: relative; width: 700px; From ab7bbd5a44dbeea302c1af471b20e57fdaec5469 Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 19 Feb 2016 14:08:23 +0100 Subject: [PATCH 131/444] ux(datasource): align name and http settings --- public/app/features/datasources/partials/edit.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 5b2869c5cd9..53612650389 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -13,13 +13,13 @@
- Name + Name
- Type + Type
From 6590e6fae8a4c117d6c7d2baf092ed1ec05cf19f Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 19 Feb 2016 14:16:17 +0100 Subject: [PATCH 132/444] feat(panel-menu): remove duplicate in fullscreen closes #4064 --- public/app/features/panel/panel_ctrl.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 96b1a6d9d4d..87fdb2390fa 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -96,7 +96,9 @@ export class PanelCtrl { let menu = []; menu.push({text: 'View', click: 'ctrl.viewPanel(); dismiss();'}); menu.push({text: 'Edit', click: 'ctrl.editPanel(); dismiss();', role: 'Editor'}); - menu.push({text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); + if (!this.fullscreen) { // duplication is not supported in fullscreen mode + menu.push({ text: 'Duplicate', click: 'ctrl.duplicate()', role: 'Editor' }); + } menu.push({text: 'Share', click: 'ctrl.sharePanel(); dismiss();'}); return menu; } From 4a062b6d00ee33a317678bb2d0ce3c16e78d29df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Feb 2016 14:21:57 +0100 Subject: [PATCH 133/444] ux(): colors refactoring --- .../features/datasources/partials/edit.html | 2 +- public/sass/_variables.dark.scss | 34 +++++----- public/sass/_variables.light.scss | 68 +++++++++---------- public/sass/_variables.scss | 8 +-- public/sass/components/_buttons.scss | 30 ++++---- public/sass/components/_dashboard.scss | 2 +- public/sass/components/_navbar.scss | 4 +- public/sass/components/_timepicker.scss | 2 +- public/sass/pages/_login.scss | 2 +- 9 files changed, 72 insertions(+), 80 deletions(-) diff --git a/public/app/features/datasources/partials/edit.html b/public/app/features/datasources/partials/edit.html index 53612650389..5c8a6492bb1 100644 --- a/public/app/features/datasources/partials/edit.html +++ b/public/app/features/datasources/partials/edit.html @@ -44,7 +44,7 @@ - Cancel + Cancel diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index f4a0bb9d0ef..fa185a27abf 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -117,26 +117,25 @@ $table-border: $dark-3; // table and cell border $btn-primary-bg: $brand-primary; $btn-primary-bg-hl: lighten($brand-primary, 8%); -$btnInfoBackground: lighten($purple, 3%); -$btnInfoBackgroundHighlight: darken($purple, 3%); +$btn-info-bg: lighten($purple, 3%); +$btn-info-bg-hl: darken($purple, 3%); -$btnSuccessBackgroundHighlight: darken($green, 3%); -$btnSuccessBackground: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); +$btn-success-bg: lighten($green, 3%); -$btnWarningBackground: $brand-warning; -$btnWarningBackgroundHighlight: lighten($brand-warning, 8%); +$btn-warning-bg: $brand-warning; +$btn-warning-bg-hl: lighten($brand-warning, 8%); -$btnDangerBackground: lighten($red, 3%); -$btnDangerBackgroundHighlight: darken($red, 3%); +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); -$btnInverseBackground: $dark-3; -$btnInverseBackgroundHighlight: lighten($dark-3, 1%); -$btnInverseText: $link-color; -$btnInverseBorder: #333; +$btn-inverse-bg: $dark-3; +$btn-inverse-bg-hl: lighten($dark-3, 1%); +$btn-inverse-text-color: $link-color; -$btnText: $gray-3; +$btn-link-color: $gray-3; -$iconContainerBackground: $black; +$iconContainerBackground: $black; // Forms // ------------------------- @@ -151,7 +150,6 @@ $input-box-shadow-focus: rgba(102,175,233,.6) !default; $input-color-placeholder: #999 !default; $input-label-bg: $dark-3; - // Search $searchShadow: 0 0 35px 0 $body-bg; @@ -222,13 +220,13 @@ $state-warning-text: darken(#c09853, 10%); $state-warning-bg: $brand-warning; $errorText: #b94a48; -$errorBackground: $btnDangerBackground; +$errorBackground: $btn-danger-bg; $successText: #468847; -$successBackground: $btnSuccessBackground; +$successBackground: $btn-success-bg; $infoText: $blue-dark; -$infoBackground: $btnInfoBackground; +$infoBackground: $btn-info-bg; // Tooltips and popovers // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 2a779767356..16a85acdc7b 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -62,22 +62,22 @@ $text-color: $gray-1; // Links // ------------------------- $link-color: $gray-1; -$link-color-disabled: lighten($link-color,30%); +$link-color-disabled: lighten($link-color, 30%); $link-hover-color: darken($link-color, 20%); // Typography // ------------------------- -$headings-color: $text-color; +$headings-color: $text-color; $abbr-border-color: $gray-2 !default; -$text-muted: darken($link-color,30%); +$text-muted: darken($link-color,30%); $blockquote-small-color: $gray-2 !default; $blockquote-border-color: $gray-3 !default; -$hr-border-color: rgba(0,0,0,.1) !default; +$hr-border-color: $dark-3 !default; // Components -$component-active-color: #fff !default; +$component-active-color: $white !default; $component-active-bg: $brand-primary !default; // Panel @@ -96,58 +96,52 @@ $tight-form-func-bg: $gray-5; $tight-form-func-highlight-bg: $gray-6; $modal-background: $body-bg; -$code-tag-bg: #ddd; +$code-tag-bg: $dark-5; // Lists -$grafanaListBackground: darken($gray-3,5%); -$grafanaListAccent: darken($gray-3,8%); -$grafanaListBorderTop: #eee; -$grafanaListBorderBottom: #eee; -$grafanaListHighlight: darken($gray-3,10%); -$grafanaListHighlightContrast: #ddd; +$grafanaListBackground: $gray-6; +$grafanaListAccent: $gray-5; +$grafanaListBorderTop: $gray-3; +$grafanaListBorderBottom: $gray-3; +$grafanaListHighlight: $gray-5; $grafanaListMainLinkColor: $text-color; // Tables // ------------------------- $table-bg: transparent; // overall background-color -$table-bg-accent: #f9f9f9; // for striping -$table-bg-hover: #E8F8FD; // for hover +$table-bg-accent: $gray-5; // for striping +$table-bg-hover: $gray-5; // for hover $table-bg-active: $table-bg-hover !default; -$table-border: #ddd; // table and cell border - +$table-border: $gray-3; // table and cell border // Scrollbars -$scrollbarBackground: $gray-3; -$scrollbarBackground2: $gray-3; -$scrollbarBorder: $gray-2; +$scrollbarBackground: $gray-5; +$scrollbarBackground2: $gray-5; +$scrollbarBorder: $gray-4; // Buttons // ------------------------- -$btnBackground: $gray-3; -$btnBackgroundHighlight: darken($gray-3, 15%); -$btnBorder: #bbb; +$btn-primary-bg: $brand-primary; +$btn-primary-bg-hl: lighten($brand-primary, 8%); -$btn-primary-bg: $brand-primary; -$btn-primary-bg-hl: lighten($brand-primary, 10%); +$btn-info-bg: lighten($purple, 3%); +$btn-info-bg-hl: darken($purple, 3%); -$btnInfoBackground: lighten($purple, 3%); -$btnInfoBackgroundHighlight: darken($purple, 3%); +$btn-success-bg: lighten($green, 3%); +$btn-success-bg-hl: darken($green, 3%); -$btnSuccessBackground: lighten($green, 3%); -$btnSuccessBackgroundHighlight: darken($green, 3%); +$btn-warning-bg: lighten($orange, 3%); +$btn-warning-bg-hl: darken($orange, 3%); -$btnWarningBackground: lighten($orange, 3%); -$btnWarningBackgroundHighlight: darken($orange, 3%); +$btn-danger-bg: lighten($red, 3%); +$btn-danger-bg-hl: darken($red, 3%); -$btnDangerBackground: lighten($red, 3%); -$btnDangerBackgroundHighlight: darken($red, 3%); +$btn-inverse-bg: $gray-5; +$btn-inverse-bg-hl: darken($gray-5, 5%); +$btn-inverse-text-color: $dark-4; -$btnInverseBackground: $gray-5; -$btnInverseBackgroundHighlight: darken($gray-5, 5%); -$btnInverseText: $dark-4; - -$btnText: $gray-3; +$btn-link-color: $gray-1; $iconContainerBackground: $white; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index b6bb37db783..85e97fda5c6 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -91,10 +91,10 @@ $form-sizes: ( // Typography // ------------------------- -$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; -$font-family-serif: Georgia, "Times New Roman", Times, serif; -$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; -$font-family-base: $font-family-sans-serif !default; +$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, "Times New Roman", Times, serif; +$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; +$font-family-base: $font-family-sans-serif !default; $font-size-root: 14px !default; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 5a03350aeaa..4f71e2075bb 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -64,6 +64,10 @@ @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-xs, $btn-border-radius); } +.btn-link { + color: $btn-link-color; +} + // Set the backgrounds // ------------------------- .btn-primary { @@ -71,23 +75,23 @@ } // Warning appears are orange .btn-warning { - @include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); + @include buttonBackground($btn-warning-bg, $btn-warning-bg-hl); } // Danger and error appear as red .btn-danger { - @include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); + @include buttonBackground($btn-danger-bg, $btn-danger-bg-hl); } // Success appears as green .btn-success { - @include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); + @include buttonBackground($btn-success-bg, $btn-success-bg-hl); } // Info appears as a neutral blue .btn-info { - @include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); + @include buttonBackground($btn-info-bg, $btn-info-bg-hl); } // Inverse appears as dark gray .btn-inverse { - @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight, $btnInverseText); + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); box-shadow: none; border: 1px solid $tight-form-func-highlight-bg; } @@ -96,23 +100,19 @@ @include button-outline-variant($btn-primary-bg); } .btn-outline-secondary { - @include button-outline-variant($btnInverseBackground); + @include button-outline-variant($btn-inverse-bg); } .btn-outline-info { - @include button-outline-variant($btnInfoBackground); + @include button-outline-variant($btn-info-bg); } .btn-outline-success { - @include button-outline-variant($btnSuccessBackground); + @include button-outline-variant($btn-success-bg); } .btn-outline-warning { - @include button-outline-variant($btnWarningBackground); + @include button-outline-variant($btn-warning-bg); } .btn-outline-danger { - @include button-outline-variant($btnDangerBackground); + @include button-outline-variant($btn-danger-bg); } -.btn-text { - color: $btnText; - margin: 0; - vertical-align: middle; -} + diff --git a/public/sass/components/_dashboard.scss b/public/sass/components/_dashboard.scss index 777d364123f..9b23484bdb4 100644 --- a/public/sass/components/_dashboard.scss +++ b/public/sass/components/_dashboard.scss @@ -22,7 +22,7 @@ text-align: center; display: inline-block; line-height: 30px; - background: $btnSuccessBackground; + background: $btn-success-bg; color: rgba(255,255,255,.90); } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 0779b345576..44faa9d9112 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -142,8 +142,8 @@ } .dashboard-title { - padding: 0px 6px 5px 5px; - font-size: 17px; + padding: 0 0.4rem 0 0.5rem; + font-size: $font-size-lg; } .top-nav-icon { diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index 777730834ab..d4a2eb42e9b 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -70,7 +70,7 @@ padding: 1px; } button.btn-sm { - @include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); + @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl); background-image: none; border: none; padding: 6px 10px; diff --git a/public/sass/pages/_login.scss b/public/sass/pages/_login.scss index 0d17b3a53b0..3f3bb020263 100644 --- a/public/sass/pages/_login.scss +++ b/public/sass/pages/_login.scss @@ -78,7 +78,7 @@ font-weight: bold; min-width: 150px; display: inline-block; - border: 1px solid lighten($btnInverseBackground, 10%); + border: 1px solid lighten($btn-inverse-bg, 10%); } } From afb62638a821f7ce881067abdc891d08d20d2a1d Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 19 Feb 2016 15:02:10 +0100 Subject: [PATCH 134/444] ux(import): convert to new css format --- .../features/dashboard/partials/import.html | 91 ++++++++----------- 1 file changed, 40 insertions(+), 51 deletions(-) diff --git a/public/app/features/dashboard/partials/import.html b/public/app/features/dashboard/partials/import.html index f2bb97649af..15988bb55cd 100644 --- a/public/app/features/dashboard/partials/import.html +++ b/public/app/features/dashboard/partials/import.html @@ -2,62 +2,51 @@
-
-

+
+

Import file Load dashboard from local .json file -

+

+
-
-
-
-
-
- -
+
+
+
+ +
+ +
+ Migrate dashboards + Import dashboards from Elasticsearch or InfluxDB +
+ +
+
+
Dashboard source
+
+ +
+
+
- -

- Migrate dashboards - Import dashboards from Elasticsearch or InfluxDB -

- -
-
    -
  • - Dashboard source -
    • -
  • - -
    • -
  • - -
    • -
    -
-
- -
-
-
{{infoText}}
- -
-
- - - - -
{{dash.name}} - {{dash.info}} -
-
- -
- -
-
+ +
{{infoText}}
+
+
+ + + + + +
{{dash.name}} + {{dash.info}} +
+
+
+ +
+
From c78669353f7668813ad82212b81d957586b9320c Mon Sep 17 00:00:00 2001 From: bergquist Date: Fri, 19 Feb 2016 15:19:01 +0100 Subject: [PATCH 135/444] ux(playlist): migrate playlists page to new styles --- .../features/playlist/partials/playlists.html | 88 +++++++++---------- 1 file changed, 43 insertions(+), 45 deletions(-) diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html index d9dff8e2266..d790de40069 100644 --- a/public/app/features/playlist/partials/playlists.html +++ b/public/app/features/playlist/partials/playlists.html @@ -1,51 +1,49 @@ - +
-
- - - - New Playlist - - +

Saved playlists

- - - - - - - - - - - - - - - - - -
NameStart url
- {{playlist.name}} - - playlists/play/{{playlist.id}} - - - - Play - - - - - Edit - - - - - -
- + + + New Playlist +
+ + + + + + + + + + + + + + + + + +
NameStart url
+ {{playlist.name}} + + playlists/play/{{playlist.id}} + + + + Play + + + + + Edit + + + + + +
+
From d0d21ba9a60500c41b862d114cb677756da2088e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Feb 2016 15:29:43 +0100 Subject: [PATCH 136/444] ux(): updated orange color and fixed sidemenu background on dark theme --- package.json | 1 + public/sass/_variables.dark.scss | 4 ++-- public/sass/_variables.light.scss | 2 +- public/sass/pages/_styleguide.scss | 6 +++--- 4 files changed, 7 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 04a41301a77..f47a59799e3 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "dependencies": { "es5-shim": "^4.4.1", "grunt-jscs": "~1.5.x", + "grunt-sass-lint": "^0.1.0", "grunt-sync": "^0.4.1", "karma-sinon": "^1.0.3", "lodash": "^2.4.1", diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index fa185a27abf..f94cab08b43 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -33,7 +33,7 @@ $yellow: #ECBB13; $pink: #FF4444; $purple: #9933CC; $variable: #32D1DF; -$orange: #FF8800; +$orange: #dF7518; $brand-primary: $orange; $brand-success: $green; @@ -205,7 +205,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%); // Sidemenu // ------------------------- -$side-menu-bg: $dark-3; +$side-menu-bg: $body-bg; $side-menu-item-hover-bg: $dark-4; // Pagination diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 16a85acdc7b..e2c8fb06c8a 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -35,7 +35,7 @@ $blue-dark: #75CAEB; $green: #28B62C; $red: #FF4136; $yellow: #FF851B; -$orange: #FF7518; +$orange: #Ff7941; $pink: #E671B8; $purple: #9954BB; $variable: #2AB2E4; diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss index 3aed004a7f6..dd8c0775c8b 100644 --- a/public/sass/pages/_styleguide.scss +++ b/public/sass/pages/_styleguide.scss @@ -1,9 +1,9 @@ .style-guide-color-card { list-style: none; - margin: 0; + margin: 0; padding: $spacer; - width: 100%; - text-align: center; + width: 100%; + text-align: left; text-shadow: 0 0 8px #fff; color: $black; font-size: $font-size-sm; From fbe422008a5c1777abf7b28a071d9567edb2285d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 19 Feb 2016 15:58:26 +0100 Subject: [PATCH 137/444] ux(): began work on sasslint --- public/sass/.sass-lint.yml | 33 ++ public/sass/.scss-lint.yml | 533 ------------------ public/sass/_grafana.scss | 1 - public/sass/bootstrap/grid.scss | 21 - .../sass/bootstrap/responsive-1200px-min.scss | 28 - .../sass/bootstrap/responsive-767px-max.scss | 161 ------ .../bootstrap/responsive-768px-979px.scss | 19 - .../sass/bootstrap/responsive-utilities.scss | 59 -- public/sass/bootstrap/responsive.scss | 27 - tasks/options/sasslint.js | 10 + tasks/options/scsslint.js | 12 - 11 files changed, 43 insertions(+), 861 deletions(-) create mode 100644 public/sass/.sass-lint.yml delete mode 100644 public/sass/.scss-lint.yml delete mode 100644 public/sass/bootstrap/grid.scss delete mode 100644 public/sass/bootstrap/responsive-1200px-min.scss delete mode 100644 public/sass/bootstrap/responsive-767px-max.scss delete mode 100644 public/sass/bootstrap/responsive-768px-979px.scss delete mode 100644 public/sass/bootstrap/responsive-utilities.scss delete mode 100644 public/sass/bootstrap/responsive.scss create mode 100644 tasks/options/sasslint.js delete mode 100644 tasks/options/scsslint.js diff --git a/public/sass/.sass-lint.yml b/public/sass/.sass-lint.yml new file mode 100644 index 00000000000..a0016f966ee --- /dev/null +++ b/public/sass/.sass-lint.yml @@ -0,0 +1,33 @@ +files: + include: '**/*.s+(a|c)ss' + ignore: + +rules: + empty-line-between-blocks: 0 + no-empty-rulesets: 1 + # Consistency Rules + # extends-before-mixins: 1 + # extends-before-declarations: 1 + # mixins-before-declarations: 1 + # Require an empty line between blocks + # final-newline: 1 + # no-ids: 1 + # indentation: 0 + # leading-zero: 1 + # name-format: 0 + # nesting-depth: 1 + # placeholder-in-extend: 1 + # property-sort-order: 1 + # property-spelling: 0 + # shorthand: 1 + # one-declaration-per-line: 1 + # single-line-per-selector: 1 + # space-after-comma: 1 + # # Space surrounding colons + # space-before-colon: 1 + # space-after-colon: 1 + # + # space-before-brace: 1 + # + # space-between-parens: 1 + # trailing-semicolon: 1 diff --git a/public/sass/.scss-lint.yml b/public/sass/.scss-lint.yml deleted file mode 100644 index 925f3c4b0f1..00000000000 --- a/public/sass/.scss-lint.yml +++ /dev/null @@ -1,533 +0,0 @@ -# Default application configuration that all configurations inherit from. -scss_files: - - "**/*.scss" - -plugin_directories: ['.scss-linters'] - -# List of gem names to load custom linters from (make sure they are already -# installed) -plugin_gems: [] - -# Default severity of all linters. -severity: warning - -linters: - BangFormat: - enabled: true - space_before_bang: true - space_after_bang: false - - BemDepth: - enabled: false - max_elements: 1 - - BorderZero: - enabled: true - convention: zero # or `none` - - ChainedClasses: - enabled: false - - ColorKeyword: - enabled: true - - ColorVariable: - enabled: false - - Comment: - enabled: true - exclude: - - _normalize.scss - - bootstrap.scss - style: silent - - DebugStatement: - enabled: true - - DeclarationOrder: - enabled: false - - DisableLinterReason: - enabled: false - - DuplicateProperty: - enabled: true - - ElsePlacement: - enabled: true - style: same_line # or 'new_line' - - EmptyLineBetweenBlocks: - enabled: false - ignore_single_line_blocks: true - - EmptyRule: - enabled: true - - ExtendDirective: - enabled: false - - FinalNewline: - enabled: true - present: true - - HexLength: - enabled: true - style: short # or 'long' - - HexNotation: - enabled: true - style: lowercase # or 'uppercase' - - HexValidation: - enabled: true - - IdSelector: - enabled: true - - ImportantRule: - enabled: true - - ImportPath: - enabled: true - leading_underscore: false - filename_extension: false - - Indentation: - enabled: true - allow_non_nested_indentation: false - character: space # or 'tab' - width: 2 - - LeadingZero: - enabled: true - style: exclude_zero # or 'include_zero' - - MergeableSelector: - enabled: false - force_nesting: true - - NameFormat: - enabled: true - allow_leading_underscore: true - convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern - - NestingDepth: - enabled: true - max_depth: 4 - ignore_parent_selectors: false - - PlaceholderInExtend: - enabled: false - - PropertyCount: - enabled: false - include_nested: false - max_properties: 10 - - PropertySortOrder: - enabled: true - ignore_unspecified: false - min_properties: 2 - separate_groups: false - order: - - position - - top - - right - - bottom - - left - - z-index - - -webkit-box-sizing - - -moz-box-sizing - - box-sizing - - display - - flex - - flex-align - - flex-basis - - flex-direction - - flex-flow - - flex-grow - - flex-order - - flex-pack - - float - - width - - min-width - - max-width - - height - - min-height - - max-height - - padding - - padding-top - - padding-right - - padding-bottom - - padding-left - - margin - - margin-top - - margin-right - - margin-bottom - - margin-left - - overflow - - overflow-x - - overflow-y - - -webkit-overflow-scrolling - - -ms-overflow-x - - -ms-overflow-y - - -ms-overflow-style - - clip - - clear - - font - - font-family - - font-size - - font-style - - font-weight - - font-variant - - font-size-adjust - - font-stretch - - font-effect - - font-emphasize - - font-emphasize-position - - font-emphasize-style - - font-smooth - - -webkit-hyphens - - -moz-hyphens - - hyphens - - line-height - - color - - text-align - - -webkit-text-align-last - - -moz-text-align-last - - -ms-text-align-last - - text-align-last - - text-emphasis - - text-emphasis-color - - text-emphasis-style - - text-emphasis-position - - text-decoration - - text-indent - - text-justify - - text-outline - - -ms-text-overflow - - text-overflow - - text-overflow-ellipsis - - text-overflow-mode - - text-shadow - - text-transform - - text-wrap - - -webkit-text-size-adjust - - -ms-text-size-adjust - - letter-spacing - - -ms-word-break - - word-break - - word-spacing - - -ms-word-wrap - - word-wrap - - -moz-tab-size - - -o-tab-size - - tab-size - - white-space - - vertical-align - - list-style - - list-style-position - - list-style-type - - list-style-image - - pointer-events - - -ms-touch-action - - touch-action - - cursor - - visibility - - zoom - - table-layout - - empty-cells - - caption-side - - border-spacing - - border-collapse - - content - - quotes - - counter-reset - - counter-increment - - resize - - -webkit-user-select - - -moz-user-select - - -ms-user-select - - -o-user-select - - user-select - - nav-index - - nav-up - - nav-right - - nav-down - - nav-left - - background - - background-color - - background-image - - -ms-filter:\\'progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.gradient - - filter:progid:DXImageTransform.Microsoft.AlphaImageLoader - - filter - - background-repeat - - background-attachment - - background-position - - background-position-x - - background-position-y - - -webkit-background-clip - - -moz-background-clip - - background-clip - - background-origin - - -webkit-background-size - - -moz-background-size - - -o-background-size - - background-size - - border - - border-color - - border-style - - border-width - - border-top - - border-top-color - - border-top-style - - border-top-width - - border-right - - border-right-color - - border-right-style - - border-right-width - - border-bottom - - border-bottom-color - - border-bottom-style - - border-bottom-width - - border-left - - border-left-color - - border-left-style - - border-left-width - - border-radius - - border-top-left-radius - - border-top-right-radius - - border-bottom-right-radius - - border-bottom-left-radius - - -webkit-border-image - - -moz-border-image - - -o-border-image - - border-image - - -webkit-border-image-source - - -moz-border-image-source - - -o-border-image-source - - border-image-source - - -webkit-border-image-slice - - -moz-border-image-slice - - -o-border-image-slice - - border-image-slice - - -webkit-border-image-width - - -moz-border-image-width - - -o-border-image-width - - border-image-width - - -webkit-border-image-outset - - -moz-border-image-outset - - -o-border-image-outset - - border-image-outset - - -webkit-border-image-repeat - - -moz-border-image-repeat - - -o-border-image-repeat - - border-image-repeat - - outline - - outline-width - - outline-style - - outline-color - - outline-offset - - -webkit-box-shadow - - -moz-box-shadow - - box-shadow - - filter:progid:DXImageTransform.Microsoft.Alpha(Opacity - - -ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha - - opacity - - -ms-interpolation-mode - - -webkit-transition - - -moz-transition - - -ms-transition - - -o-transition - - transition - - -webkit-transition-delay - - -moz-transition-delay - - -ms-transition-delay - - -o-transition-delay - - transition-delay - - -webkit-transition-timing-function - - -moz-transition-timing-function - - -ms-transition-timing-function - - -o-transition-timing-function - - transition-timing-function - - -webkit-transition-duration - - -moz-transition-duration - - -ms-transition-duration - - -o-transition-duration - - transition-duration - - -webkit-transition-property - - -moz-transition-property - - -ms-transition-property - - -o-transition-property - - transition-property - - -webkit-transform - - -moz-transform - - -ms-transform - - -o-transform - - transform - - -webkit-transform-origin - - -moz-transform-origin - - -ms-transform-origin - - -o-transform-origin - - transform-origin - - -webkit-animation - - -moz-animation - - -ms-animation - - -o-animation - - animation - - -webkit-animation-name - - -moz-animation-name - - -ms-animation-name - - -o-animation-name - - animation-name - - -webkit-animation-duration - - -moz-animation-duration - - -ms-animation-duration - - -o-animation-duration - - animation-duration - - -webkit-animation-play-state - - -moz-animation-play-state - - -ms-animation-play-state - - -o-animation-play-state - - animation-play-state - - -webkit-animation-timing-function - - -moz-animation-timing-function - - -ms-animation-timing-function - - -o-animation-timing-function - - animation-timing-function - - -webkit-animation-delay - - -moz-animation-delay - - -ms-animation-delay - - -o-animation-delay - - animation-delay - - -webkit-animation-iteration-count - - -moz-animation-iteration-count - - -ms-animation-iteration-count - - -o-animation-iteration-count - - animation-iteration-count - - -webkit-animation-direction - - -moz-animation-direction - - -ms-animation-direction - - -o-animation-direction - - - PropertySpelling: - enabled: true - extra_properties: [] - disabled_properties: [] - - PropertyUnits: - enabled: true - global: [ - 'ch', 'em', 'ex', 'rem', # Font-relative lengths - 'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths - 'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths - 'deg', 'grad', 'rad', 'turn', # Angle - 'ms', 's', # Duration - 'Hz', 'kHz', # Frequency - 'dpi', 'dpcm', 'dppx', # Resolution - '%'] # Other - properties: {} - - PseudoElement: - enabled: true - - QualifyingElement: - enabled: true - allow_element_with_attribute: false - allow_element_with_class: false - allow_element_with_id: false - - SelectorDepth: - enabled: true - max_depth: 4 - - SelectorFormat: - enabled: false - convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern - - Shorthand: - enabled: true - allowed_shorthands: [1, 2, 3] - - SingleLinePerProperty: - enabled: false - allow_single_line_rule_sets: true - - SingleLinePerSelector: - enabled: false - - SpaceAfterComma: - enabled: false - style: one_space # or 'no_space', or 'at_least_one_space' - - SpaceAfterPropertyColon: - enabled: true - style: at_least_one_space # or 'no_space', or 'at_least_one_space', or 'aligned' - - SpaceAfterPropertyName: - enabled: true - - SpaceAfterVariableName: - enabled: true - - SpaceAroundOperator: - enabled: true - style: one_space # or 'at_least_one_space', or 'no_space' - - SpaceBeforeBrace: - enabled: true - style: space # or 'new_line' - allow_single_line_padding: false - - SpaceBetweenParens: - enabled: true - spaces: 0 - - StringQuotes: - enabled: true - style: double_quotes # or double_quotes - - TrailingSemicolon: - enabled: true - - TrailingWhitespace: - enabled: true - - TrailingZero: - enabled: false - - TransitionAll: - enabled: false - - UnnecessaryMantissa: - enabled: true - - UnnecessaryParentReference: - enabled: true - - UrlFormat: - enabled: true - - UrlQuotes: - enabled: true - - VariableForProperty: - enabled: false - properties: [] - - VendorPrefix: - enabled: true - identifier_list: base - additional_identifiers: [] - excluded_identifiers: [] - exclude: - - _normalize.scss - - ZeroUnit: - enabled: true - - Compass::*: - enabled: false diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 9bc924ec79d..250721500e9 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -7,7 +7,6 @@ @import "mixins/hover"; @import "mixins/forms"; - // BASE @import "base/normalize"; @import "base/reboot"; diff --git a/public/sass/bootstrap/grid.scss b/public/sass/bootstrap/grid.scss deleted file mode 100644 index 15b89a8703e..00000000000 --- a/public/sass/bootstrap/grid.scss +++ /dev/null @@ -1,21 +0,0 @@ -// -// Grid system -// -------------------------------------------------- - - -// Fixed (940px) -#grid > .core($gridColumnWidth, $gridGutterWidth); - -// Fluid (940px) -#grid > .fluid($fluidGridColumnWidth, $fluidGridGutterWidth); - -// Reset utility classes due to specificity -[class*="span"].hide, -.row-fluid [class*="span"].hide { - display: none; -} - -[class*="span"].pull-right, -.row-fluid [class*="span"].pull-right { - float: right; -} diff --git a/public/sass/bootstrap/responsive-1200px-min.scss b/public/sass/bootstrap/responsive-1200px-min.scss deleted file mode 100644 index 8b85385d84f..00000000000 --- a/public/sass/bootstrap/responsive-1200px-min.scss +++ /dev/null @@ -1,28 +0,0 @@ -// -// Responsive: Large desktop and up -// -------------------------------------------------- - - -@media (min-width: 1200px) { - - // Fixed grid - #grid > .core($gridColumnWidth1200, $gridGutterWidth1200); - - // Fluid grid - #grid > .fluid($fluidGridColumnWidth1200, $fluidGridGutterWidth1200); - - // Input grid - #grid > .input($gridColumnWidth1200, $gridGutterWidth1200); - - // Thumbnails - .thumbnails { - margin-left: -$gridGutterWidth1200; - } - .thumbnails > li { - margin-left: $gridGutterWidth1200; - } - .row-fluid .thumbnails { - margin-left: 0; - } - -} diff --git a/public/sass/bootstrap/responsive-767px-max.scss b/public/sass/bootstrap/responsive-767px-max.scss deleted file mode 100644 index 37d9c11e700..00000000000 --- a/public/sass/bootstrap/responsive-767px-max.scss +++ /dev/null @@ -1,161 +0,0 @@ -// -// Responsive: Landscape phone to desktop/tablet -// -------------------------------------------------- - - -@media (max-width: 767px) { - - // GRID & CONTAINERS - // ----------------- - // Remove width from containers - .container { - width: auto; - } - // Fluid rows - .row-fluid { - width: 100%; - } - // Undo negative margin on rows and thumbnails - .row, - .thumbnails { - margin-left: 0; - } - .thumbnails > li { - float: none; - margin-left: 0; // Reset the default margin for all li elements when no .span* classes are present - } - // Make all grid-sized elements block level again - [class*="span"], - .uneditable-input[class*="span"], // Makes uneditable inputs full-width when using grid sizing - .row-fluid [class*="span"] { - float: none; - display: block; - width: 100%; - margin-left: 0; - @include box-sizing(border-box); - } - .span12, - .row-fluid .span12 { - width: 100%; - @include box-sizing(border-box); - } - .row-fluid [class*="offset"]:first-child { - margin-left: 0; - } - - // FORM FIELDS - // ----------- - // Make span* classes full width - .input-large, - .input-xlarge, - .input-xxlarge, - input[class*="span"], - select[class*="span"], - textarea[class*="span"], - .uneditable-input { - @mixin input-block-level(); - } - // But don't let it screw up prepend/append inputs - .input-prepend input, - .input-append input, - .input-prepend input[class*="span"], - .input-append input[class*="span"] { - display: inline-block; // redeclare so they don't wrap to new lines - width: auto; - } - .controls-row [class*="span"] + [class*="span"] { - margin-left: 0; - } - - // Modals - .modal { - position: fixed; - top: 20px; - left: 20px; - right: 20px; - width: auto; - margin: 0; - &.fade { top: -100px; } - &.fade.in { top: 20px; } - } - -} - - - -// UP TO LANDSCAPE PHONE -// --------------------- - -@media (max-width: 480px) { - - // Smooth out the collapsing/expanding nav - .nav-collapse { - -webkit-transform: translate3d(0, 0, 0); // activate the GPU - } - - // Block level the page header small tag for readability - .page-header h1 small { - display: block; - line-height: $line-height-base; - } - - // Update checkboxes for iOS - input[type="checkbox"], - input[type="radio"] { - border: 1px solid #ccc; - } - - // Remove the horizontal form styles - .form-horizontal { - .control-label { - float: none; - width: auto; - padding-top: 0; - text-align: left; - } - // Move over all input controls and content - .controls { - margin-left: 0; - } - // Move the options list down to align with labels - .control-list { - padding-top: 0; // has to be padding because margin collaspes - } - // Move over buttons in .form-actions to align with .controls - .form-actions { - padding-left: 10px; - padding-right: 10px; - } - } - - // Medias - // Reset float and spacing to stack - .media .pull-left, - .media .pull-right { - float: none; - display: block; - margin-bottom: 10px; - } - // Remove side margins since we stack instead of indent - .media-object { - margin-right: 0; - margin-left: 0; - } - - // Modals - .modal { - top: 10px; - left: 10px; - right: 10px; - } - .modal-header .close { - padding: 10px; - margin: -10px; - } - - // Carousel - .carousel-caption { - position: static; - } - -} diff --git a/public/sass/bootstrap/responsive-768px-979px.scss b/public/sass/bootstrap/responsive-768px-979px.scss deleted file mode 100644 index cef846699c3..00000000000 --- a/public/sass/bootstrap/responsive-768px-979px.scss +++ /dev/null @@ -1,19 +0,0 @@ -// -// Responsive: Tablet to desktop -// -------------------------------------------------- - - -@media (min-width: 768px) and (max-width: 979px) { - - // Fixed grid - #grid > .core($gridColumnWidth768, $gridGutterWidth768); - - // Fluid grid - #grid > .fluid($fluidGridColumnWidth768, $fluidGridGutterWidth768); - - // Input grid - #grid > .input($gridColumnWidth768, $gridGutterWidth768); - - // No need to reset .thumbnails here since it's the same $gridGutterWidth - -} diff --git a/public/sass/bootstrap/responsive-utilities.scss b/public/sass/bootstrap/responsive-utilities.scss deleted file mode 100644 index eca42571a89..00000000000 --- a/public/sass/bootstrap/responsive-utilities.scss +++ /dev/null @@ -1,59 +0,0 @@ -// -// Responsive: Utility classes -// -------------------------------------------------- - - -// IE10 Metro responsive -// Required for Windows 8 Metro split-screen snapping with IE10 -// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ -$-ms-viewport{ - width: device-width; -} - -// Hide from screenreaders and browsers -// Credit: HTML5 Boilerplate -.hidden { - display: none; - visibility: hidden; -} - -// Visibility utilities - -// For desktops -.visible-phone { display: none !important; } -.visible-tablet { display: none !important; } -.hidden-phone { } -.hidden-tablet { } -.hidden-desktop { display: none !important; } -.visible-desktop { display: inherit !important; } - -// Tablets & small desktops only -@media (min-width: 768px) and (max-width: 979px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important ; } - // Show - .visible-tablet { display: inherit !important; } - // Hide - .hidden-tablet { display: none !important; } -} - -// Phones only -@media (max-width: 767px) { - // Hide everything else - .hidden-desktop { display: inherit !important; } - .visible-desktop { display: none !important; } - // Show - .visible-phone { display: inherit !important; } // Use inherit to restore previous behavior - // Hide - .hidden-phone { display: none !important; } -} - -// Print utilities -.visible-print { display: none !important; } -.hidden-print { } - -@media print { - .visible-print { display: inherit !important; } - .hidden-print { display: none !important; } -} diff --git a/public/sass/bootstrap/responsive.scss b/public/sass/bootstrap/responsive.scss deleted file mode 100644 index 8f4888f23d5..00000000000 --- a/public/sass/bootstrap/responsive.scss +++ /dev/null @@ -1,27 +0,0 @@ -/*! - * Bootstrap Responsive v2.3.2 - * - * Copyright 2013 Twitter, Inc - * Licensed under the Apache License v2.0 - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Designed and built with all the love in the world by $mdo and $fat. - */ - - -// Responsive.scss -// For phone and tablet devices -// ------------------------------------------------------------- - - -// REPEAT VARIABLES & MIXINS -// ------------------------- -// Required since we compile the responsive stuff separately - -@import "../mixins/mixins.scss"; -@import "responsive-utilities.scss"; -@import "responsive-1200px-min.scss"; -@import "responsive-768px-979px.scss"; -@import "responsive-767px-max.scss"; - - diff --git a/tasks/options/sasslint.js b/tasks/options/sasslint.js new file mode 100644 index 00000000000..d16dad714a3 --- /dev/null +++ b/tasks/options/sasslint.js @@ -0,0 +1,10 @@ +module.exports = function(config) { + 'use strict'; + + return { + options: { + configFile: 'public/sass/.sass-lint.yml', + }, + target: ['public/sass/**/*.scss', '!public/sass/base/_normalize.scss'] + }; +}; diff --git a/tasks/options/scsslint.js b/tasks/options/scsslint.js deleted file mode 100644 index 86e2d8555ed..00000000000 --- a/tasks/options/scsslint.js +++ /dev/null @@ -1,12 +0,0 @@ -module.exports = function(config) { - return { - options: { - bundleExec: true, - config: 'public/sass/.scss-lint.yml', - reporterOutput: null - }, - core: { - src: ['public/sass/**/*.scss', '!public/sass/base/_normalize.scss'] - } - }; -}; From 02ac7a4001c99a17ecdf5a5a116f5aac479553c4 Mon Sep 17 00:00:00 2001 From: marknmel Date: Fri, 19 Feb 2016 10:05:01 -0500 Subject: [PATCH 138/444] Update kbn.js data rate for Mbits has typo - should be megabits/sec - not megabites/sec --- public/app/core/utils/kbn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index fbb854148f9..1f827dcbb80 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -595,7 +595,7 @@ function($, _) { {text: 'bytes/sec', value: 'Bps'}, {text: 'kilobites/sec', value: 'Kbits'}, {text: 'kilobytes/sec', value: 'KBs'}, - {text: 'megabites/sec', value: 'Mbits'}, + {text: 'megabits/sec', value: 'Mbits'}, {text: 'megabytes/sec', value: 'MBs'}, {text: 'gigabytes/sec', value: 'GBs'}, {text: 'gigabites/sec', value: 'Gbits'}, From 2c0b191ef532d515a77e486a11cdae8a1eaa5aaa Mon Sep 17 00:00:00 2001 From: marknmel Date: Fri, 19 Feb 2016 10:24:49 -0500 Subject: [PATCH 139/444] Updated typos - Kilobits, Megabits and Gigabits Update typos - Kilobits, Megabits and Gigabits - not Kilobites, Megabites, or Gigabites --- public/app/core/utils/kbn.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/app/core/utils/kbn.js b/public/app/core/utils/kbn.js index 1f827dcbb80..97f2f10f799 100644 --- a/public/app/core/utils/kbn.js +++ b/public/app/core/utils/kbn.js @@ -593,12 +593,12 @@ function($, _) { {text: 'packets/sec', value: 'pps'}, {text: 'bits/sec', value: 'bps'}, {text: 'bytes/sec', value: 'Bps'}, - {text: 'kilobites/sec', value: 'Kbits'}, + {text: 'kilobits/sec', value: 'Kbits'}, {text: 'kilobytes/sec', value: 'KBs'}, {text: 'megabits/sec', value: 'Mbits'}, {text: 'megabytes/sec', value: 'MBs'}, {text: 'gigabytes/sec', value: 'GBs'}, - {text: 'gigabites/sec', value: 'Gbits'}, + {text: 'gigabits/sec', value: 'Gbits'}, ] }, { From 49507ea377f21976e9cafbb80370e588cd9682b3 Mon Sep 17 00:00:00 2001 From: Matt Toback Date: Fri, 19 Feb 2016 14:09:48 -0500 Subject: [PATCH 140/444] Beginnings of changes --- public/sass/_variables.scss | 12 ++++++++---- public/sass/components/_gf-form.scss | 10 ++++++---- 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 85e97fda5c6..4fe5be63434 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -61,7 +61,7 @@ $grid-breakpoints: ( // // Define the maximum width of `.container` for different screen sizes. -$container-max-widths: ( +$container-max-widths: (tork sm: 576px, md: 720px, lg: 940px, @@ -170,9 +170,13 @@ $input-padding-y: .6rem !default; $input-line-height: 1.35rem !default; $input-btn-border-width: 1px; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-border-radius: 0 $border-radius $border-radius 0 !default; +$input-border-radius-lg: 0 $border-radius-lg $border-radius-lg 0 !default; +$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; + +$label-border-radius: $border-radius 0 0 $border-radius !default; +$label-border-radius-lg: $border-radius-lg 0 0 $border-radius-lg !default; +$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; $input-padding-x-sm: .5rem !default; $input-padding-y-sm: .25rem !default; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index d3ab196dd30..e300f4aa304 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,4 +1,5 @@ -$gf-form-margin: 0.4rem; +$gf-form-margin: 0.2rem; +$gf-form-label-margin: 0.2rem; .gf-form { margin-bottom: $gf-form-margin; @@ -49,8 +50,9 @@ $gf-form-margin: 0.4rem; background-color: $input-label-bg; display: block; font-size: $font-size-sm; - margin-right: $gf-form-margin; + margin-right: $gf-form-label-margin; border: $input-btn-border-width solid transparent; + @include border-radius($label-border-radius-sm); } .gf-form-checkbox { @@ -79,8 +81,8 @@ $gf-form-margin: 0.4rem; background-color: $input-bg; background-image: none; background-clip: padding-box; - border: $input-btn-border-width solid $input-border-color; - @include border-radius($input-border-radius); + border: $input-btn-border-width solid transparent; + @include border-radius($input-border-radius-sm); @include box-shadow($input-box-shadow); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; From bd0357b637b7b95d6e7818bf6cdde293048887a3 Mon Sep 17 00:00:00 2001 From: Trent White Date: Fri, 19 Feb 2016 17:34:09 -0500 Subject: [PATCH 141/444] added angular gradient to page and login. Tweaked header underline to not be so heavy. Tweaked stacked logo on login. Created an alternative to avatar when there's no connection to gravatar - could use work, but I think you get the idea. --- public/app/core/components/sidemenu/sidemenu.html | 3 ++- public/app/partials/login.html | 2 +- public/sass/_variables.dark.scss | 2 ++ public/sass/_variables.light.scss | 6 ++++-- public/sass/components/_dashboard.scss | 2 +- public/sass/components/_sidemenu.scss | 9 +++++++++ public/sass/layout/_page.scss | 7 +++++-- public/sass/pages/_login.scss | 15 +++++++++++++-- 8 files changed, 37 insertions(+), 9 deletions(-) diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index f4221367fdf..66ee0b6d8b9 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -3,7 +3,8 @@
  • - + + ?
    {{ctrl.user.name}} diff --git a/public/app/partials/login.html b/public/app/partials/login.html index 6f437a02824..b7aa340bfed 100644 --- a/public/app/partials/login.html +++ b/public/app/partials/login.html @@ -1,4 +1,4 @@ -
    +