From 72ef16fd515d0393d9910e486c2b98cf55d997ef Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 25 Jan 2016 19:23:09 -0700 Subject: [PATCH 01/18] [uiExports][chrome] support uiExports.links --- src/plugins/kibana/index.js | 34 ++++++++++++++++++- src/ui/index.js | 2 +- src/ui/public/chrome/api/apps.js | 6 ++-- src/ui/public/chrome/api/nav.js | 22 +++++++++--- .../directives/app_switcher/app_switcher.html | 2 +- src/ui/ui_app.js | 19 ++++++++--- src/ui/ui_exports.js | 17 +++++++--- src/ui/ui_nav_link.js | 16 +++++++++ src/ui/ui_nav_link_collection.js | 29 ++++++++++++++++ 9 files changed, 127 insertions(+), 20 deletions(-) create mode 100644 src/ui/ui_nav_link.js create mode 100644 src/ui/ui_nav_link_collection.js diff --git a/src/plugins/kibana/index.js b/src/plugins/kibana/index.js index 5f128990282bb..c5b6578b61072 100644 --- a/src/plugins/kibana/index.js +++ b/src/plugins/kibana/index.js @@ -14,6 +14,7 @@ module.exports = function (kibana) { uiExports: { app: { title: 'Kibana', + listed: false, description: 'the kibana you know and love', //icon: 'plugins/kibana/settings/sections/about/barcode.svg', main: 'plugins/kibana/kibana', @@ -30,8 +31,39 @@ module.exports = function (kibana) { return { kbnDefaultAppId: config.get('kibana.defaultAppId') }; + }, + }, + + links: [ + { + title: 'Discover', + order: -1003, + url: '/app/kibana#/discover', + description: 'interactively explore your data', + icon: 'plugins/kibana/settings/sections/about/barcode.svg', + }, + { + title: 'Visualize', + order: -1002, + url: '/app/kibana#/visualize', + description: 'design data visualizations', + icon: 'plugins/kibana/settings/sections/about/barcode.svg', + }, + { + title: 'Dashboard', + order: -1001, + url: '/app/kibana#/dashboard', + description: 'compose visualizations for much win', + icon: 'plugins/kibana/settings/sections/about/barcode.svg', + }, + { + title: 'Settings', + order: 1000, + url: '/app/kibana#/settings', + description: 'define index patterns, change config, and more', + icon: 'plugins/kibana/settings/sections/about/barcode.svg', } - } + ] }, init: function (server, options) { diff --git a/src/ui/index.js b/src/ui/index.js index 4bdf12b7870f9..1b57cfe617ff8 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -71,7 +71,7 @@ module.exports = async (kbnServer, server, config) => { server.decorate('reply', 'renderApp', function (app) { const payload = { app: app, - nav: uiExports.apps, + nav: uiExports.navLinks.inOrder, version: kbnServer.version, buildNum: config.get('pkg.buildNum'), buildSha: config.get('pkg.buildSha'), diff --git a/src/ui/public/chrome/api/apps.js b/src/ui/public/chrome/api/apps.js index 35342d660f654..65f1f5af5df5a 100644 --- a/src/ui/public/chrome/api/apps.js +++ b/src/ui/public/chrome/api/apps.js @@ -3,8 +3,8 @@ const { resolve } = require('url'); module.exports = function (chrome, internals) { - if (internals.app) { - internals.app.url = resolve(window.location.href, internals.app.url); + if (internals.app && internals.app.navLink) { + internals.app.navLink.url = resolve(window.location.href, internals.app.navLink.url); } internals.appUrlStore = internals.appUrlStore || window.sessionStorage; @@ -35,7 +35,7 @@ module.exports = function (chrome, internals) { }; chrome.getAppUrl = function () { - return get(internals, ['app', 'url']); + return get(internals, ['app', 'navLink', 'url']); }; chrome.getInjected = function (name, def) { diff --git a/src/ui/public/chrome/api/nav.js b/src/ui/public/chrome/api/nav.js index 3290010911513..068d992c2e4e0 100644 --- a/src/ui/public/chrome/api/nav.js +++ b/src/ui/public/chrome/api/nav.js @@ -34,12 +34,24 @@ export default function (chrome, internals) { }); }; - internals.trackPossibleSubUrl = function (url) { - for (const link of internals.nav) { - if (startsWith(url, link.url)) { - link.lastSubUrl = url; - internals.appUrlStore.setItem(`lastSubUrl:${link.url}`, url); + internals.navTrackers = []; + chrome.addNavigationTracker = function (url, handler) { + internals.navTrackers.push({ + url, handler + }); + }; + + internals.trackPossibleSubUrl = function (url, persist) { + for (const tracker of internals.navTrackers) { + if (startsWith(url, tracker.url)) { + if (persist) { + tracker.lastSubUrl = url; + internals.appUrlStore.setItem(`lastSubUrl:${tracker.url}`, url); + } + tracker.active = true; } + + tracker.handler(tracker.active, tracker.lastSubUrl); } }; diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/app_switcher/app_switcher.html index 7613cb03142b4..89ae849628bc3 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.html @@ -1,7 +1,7 @@
{ + const id = plugin.id; for (let spec of [].concat(specs || [])) { - let app = this.apps.new(_.defaults({}, spec, { - id: plugin.id, - urlBasePath: this.urlBasePath - })); + const app = this.apps.new({ id, ...spec }); plugin.apps.add(app); } }; + case 'link': + case 'links': + return (plugin, spec) => { + for (const spec of [].concat(spec || [])) { + this.navLinks.new(spec); + } + }; + case 'visTypes': case 'fieldFormats': case 'spyModes': diff --git a/src/ui/ui_nav_link.js b/src/ui/ui_nav_link.js new file mode 100644 index 0000000000000..742d4e5f95a42 --- /dev/null +++ b/src/ui/ui_nav_link.js @@ -0,0 +1,16 @@ +var _ = require('lodash'); +var { join } = require('path'); + +export default class UiNavLink { + constructor(uiExports, spec) { + this.title = spec.title; + this.order = spec.order || 0; + this.url = `${uiExports.urlBasePath || ''}${spec.url}`; + this.description = spec.description; + this.icon = spec.icon; + } + + toJSON() { + return _.pick(this, ['title', 'url', 'order', 'description', 'icon']); + } +} diff --git a/src/ui/ui_nav_link_collection.js b/src/ui/ui_nav_link_collection.js new file mode 100644 index 0000000000000..8ea1b282947c9 --- /dev/null +++ b/src/ui/ui_nav_link_collection.js @@ -0,0 +1,29 @@ +import _ from 'lodash'; +import UiNavLink from './ui_nav_link'; +import Collection from '../utils/Collection'; + +let inOrderCache = Symbol('inOrder'); + +module.exports = class UiNavLinkCollection extends Collection { + + constructor(uiExports, parent) { + super(); + this.uiExports = uiExports; + } + + new(spec) { + let link = new UiNavLink(this.uiExports, spec); + this[inOrderCache] = null; + this.add(link); + return link; + } + + get inOrder() { + if (!this[inOrderCache]) { + this[inOrderCache] = _.sortBy([...this], 'order'); + } + + return this[inOrderCache]; + } + +}; From 517bf717028ef1b220c8c7a3e7c947caddb5c33e Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 25 Jan 2016 20:22:31 -0700 Subject: [PATCH 02/18] [tabs] persist last urls to sessionStorage --- src/plugins/kibana/public/kibana.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/plugins/kibana/public/kibana.js b/src/plugins/kibana/public/kibana.js index 2d059cc972c81..2a9e8f1204c30 100644 --- a/src/plugins/kibana/public/kibana.js +++ b/src/plugins/kibana/public/kibana.js @@ -36,7 +36,7 @@ chrome .setNavBackground('#222222') .setTabDefaults({ resetWhenActive: true, - lastUrlStore: window.sessionStore, + lastUrlStore: window.sessionStorage, activeIndicatorColor: '#656a76' }) .setTabs([ From 6892bfa6502bb5916ff85def69c6795837a89295 Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 25 Jan 2016 20:23:26 -0700 Subject: [PATCH 03/18] [appSwitcher] allow hash-based navigation by default, disable on status page --- src/plugins/statusPage/public/statusPage.js | 5 ++ .../directives/app_switcher/app_switcher.js | 60 +++++++++++-------- 2 files changed, 40 insertions(+), 25 deletions(-) diff --git a/src/plugins/statusPage/public/statusPage.js b/src/plugins/statusPage/public/statusPage.js index 38fc86a24a80a..d17b3acdd6d47 100644 --- a/src/plugins/statusPage/public/statusPage.js +++ b/src/plugins/statusPage/public/statusPage.js @@ -54,3 +54,8 @@ var chrome = require('ui/chrome') ui.refresh(); }); + +require('ui/modules').get('kibana') +.config(function (appSwitcherEnsureNavigationProvider) { + appSwitcherEnsureNavigationProvider.forceNavigation(true); +}); diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.js b/src/ui/public/chrome/directives/app_switcher/app_switcher.js index 70571d2f31f2a..0ee4e69a9afc3 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.js +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.js @@ -6,14 +6,45 @@ var DomLocationProvider = require('ui/domLocation'); require('ui/modules') .get('kibana') +.provider('appSwitcherEnsureNavigation', function () { + var forceNavigation = false; + + this.forceNavigation = function (val) { + forceNavigation = !!val; + }; + + this.$get = ['Private', function (Private) { + var domLocation = Private(DomLocationProvider); + + return function (event) { + if (!forceNavigation || event.isDefaultPrevented() || event.altKey || event.metaKey || event.ctrlKey) { + return; + } + + var toParsed = parse(event.delegateTarget.href); + var fromParsed = parse(domLocation.href); + var sameProto = toParsed.protocol === fromParsed.protocol; + var sameHost = toParsed.host === fromParsed.host; + var samePath = toParsed.path === fromParsed.path; + + if (sameProto && sameHost && samePath) { + toParsed.hash && domLocation.reload(); + + // event.preventDefault() keeps the browser from seeing the new url as an update + // and even setting window.location does not mimic that behavior, so instead + // we use stopPropagation() to prevent angular from seeing the click and + // starting a digest cycle/attempting to handle it in the router. + event.stopPropagation(); + } + }; + }]; +}) .directive('appSwitcher', function () { return { restrict: 'E', template: require('./app_switcher.html'), controllerAs: 'switcher', - controller: function ($scope, Private) { - var domLocation = Private(DomLocationProvider); - + controller: function ($scope, appSwitcherEnsureNavigation) { // since we render this in an isolate scope we can't "require: ^chrome", but // rather than remove all helpfull checks we can just check here. if (!$scope.chrome || !$scope.chrome.getNavLinks) { @@ -24,28 +55,7 @@ require('ui/modules') // links don't cause full-navigation events in certain scenarios // so we force them when needed - this.ensureNavigation = function (event, app) { - if (event.isDefaultPrevented() || event.altKey || event.metaKey || event.ctrlKey) { - return; - } - - var toParsed = parse(event.delegateTarget.href); - var fromParsed = parse(domLocation.href); - var sameProto = toParsed.protocol === fromParsed.protocol; - var sameHost = toParsed.host === fromParsed.host; - var samePath = toParsed.path === fromParsed.path; - - if (sameProto && sameHost && samePath) { - toParsed.hash && domLocation.reload(); - - // event.preventDefault() keeps the browser from seeing the new url as an update - // and even setting window.location does not mimic that behavior, so instead - // we use stopPropagation() to prevent angular from seeing the click and - // starting a digest cycle/attempting to handle it in the router. - event.stopPropagation(); - } - }; - + this.ensureNavigation = appSwitcherEnsureNavigation; } }; }); From 1f372bfed1b8e20058f7b678bd119e59465eb652 Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 25 Jan 2016 20:42:53 -0700 Subject: [PATCH 04/18] [appSwitcher] when tabs match links, use their last Url --- src/ui/public/chrome/api/nav.js | 56 ++++++++++--------- src/ui/public/chrome/directives/kbn_chrome.js | 2 +- src/ui/ui_app.js | 10 +++- 3 files changed, 39 insertions(+), 29 deletions(-) diff --git a/src/ui/public/chrome/api/nav.js b/src/ui/public/chrome/api/nav.js index 068d992c2e4e0..00a0941417bd5 100644 --- a/src/ui/public/chrome/api/nav.js +++ b/src/ui/public/chrome/api/nav.js @@ -1,4 +1,4 @@ -const { startsWith, isString } = require('lodash'); +const { startsWith, isString, find } = require('lodash'); import { parse, format } from 'url'; export default function (chrome, internals) { @@ -6,10 +6,6 @@ export default function (chrome, internals) { return internals.nav; }; - chrome.getLastSubUrlFor = function (url) { - return internals.appUrlStore.getItem(`lastSubUrl:${url}`); - }; - chrome.getBasePath = function () { return internals.basePath || ''; }; @@ -34,38 +30,46 @@ export default function (chrome, internals) { }); }; - internals.navTrackers = []; - chrome.addNavigationTracker = function (url, handler) { - internals.navTrackers.push({ - url, handler - }); - }; + function lastSubUrlKey(link) { + return `lastSubUrl:${link.url}`; + } + + function setLastUrl(link, url) { + link.lastSubUrl = url; + internals.appUrlStore.setItem(lastSubUrlKey(link), url); + } + + function refreshLastUrl(link) { + link.lastSubUrl = internals.appUrlStore.getItem(lastSubUrlKey(link)); + } - internals.trackPossibleSubUrl = function (url, persist) { - for (const tracker of internals.navTrackers) { - if (startsWith(url, tracker.url)) { - if (persist) { - tracker.lastSubUrl = url; - internals.appUrlStore.setItem(`lastSubUrl:${tracker.url}`, url); - } - tracker.active = true; + internals.trackPossibleSubUrl = function (url) { + for (const link of internals.nav) { + link.active = startsWith(url, link.url); + + if (link.active) { + setLastUrl(link, url); + continue; + } + + const matchingTab = find(internals.tabs, { rootUrl: link.url }); + if (matchingTab) { + setLastUrl(link, matchingTab.getLastUrl()); + continue; } - tracker.handler(tracker.active, tracker.lastSubUrl); + refreshLastUrl(link); } }; internals.nav.forEach(link => { // convert all link urls to absolute urls - var a = document.createElement('a'); a.setAttribute('href', link.url); link.url = a.href; - link.lastSubUrl = chrome.getLastSubUrlFor(link.url); - - if (link.url === chrome.getAppUrl()) { - link.active = true; - } }); + // simulate a possible change in url to initialize the + // link.active and link.lastUrl properties + internals.trackPossibleSubUrl(document.location.href); }; diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js index d6e9ddeed4a43..363a65a8e2768 100644 --- a/src/ui/public/chrome/directives/kbn_chrome.js +++ b/src/ui/public/chrome/directives/kbn_chrome.js @@ -35,8 +35,8 @@ export default function (chrome, internals) { const onRouteChange = function () { let { href } = window.location; let persist = chrome.getVisible(); - internals.trackPossibleSubUrl(href); internals.tabs.consumeRouteUpdate(href, persist); + internals.trackPossibleSubUrl(href); }; $rootScope.$on('$routeChangeSuccess', onRouteChange); diff --git a/src/ui/ui_app.js b/src/ui/ui_app.js index b6f6e2fa1fc76..b7ebd3c0ebcd1 100644 --- a/src/ui/ui_app.js +++ b/src/ui/ui_app.js @@ -17,17 +17,23 @@ class UiApp { this.title = this.spec.title; this.description = this.spec.description; this.icon = this.spec.icon; - this.hidden = this.spec.hidden; + this.hidden = !!this.spec.hidden; this.listed = this.spec.listed == null ? !this.hidden : this.spec.listed; this.templateName = this.spec.templateName || 'ui_app'; - if (this.listed) { + if (!this.hidden) { + // any non-hidden app has a url, so it gets a "navLink" this.navLink = this.uiExports.navLinks.new({ title: this.title, description: this.description, icon: this.icon, url: this.spec.url || `/app/${this.id}` }); + + if (!this.listed) { + // unlisted apps remove their navLinks from the uiExports collection though + this.uiExports.navLinks.delete(this.navLink); + } } if (this.spec.autoload) { From 0b56954ad3d81f56076b0f865535a8e6dc88b212 Mon Sep 17 00:00:00 2001 From: spalger Date: Mon, 25 Jan 2016 20:58:23 -0700 Subject: [PATCH 05/18] [chrome] fix broken test --- src/ui/public/chrome/api/__tests__/apps.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ui/public/chrome/api/__tests__/apps.js b/src/ui/public/chrome/api/__tests__/apps.js index ddb53ada7186e..c9813960cd65f 100644 --- a/src/ui/public/chrome/api/__tests__/apps.js +++ b/src/ui/public/chrome/api/__tests__/apps.js @@ -86,11 +86,11 @@ describe('Chrome API :: apps', function () { describe('#getAppUrl()', function () { it('returns the resolved url of the current app', function () { const chrome = {}; - const app = { url: '/foo' }; + const app = { navLink: { url: '/foo' } }; setup(chrome, { app }); const a = document.createElement('a'); - a.setAttribute('href', app.url); + a.setAttribute('href', app.navLink.url); expect(chrome.getAppUrl()).to.equal(a.href); }); From f5ff46a766f2b5a5dcf157f0720ab935f0a4ace3 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 26 Jan 2016 12:33:59 -0700 Subject: [PATCH 06/18] [chrome/tab] ignore lastUrls that have different basePaths --- src/ui/public/chrome/Tab.js | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/ui/public/chrome/Tab.js b/src/ui/public/chrome/Tab.js index cceb65008087f..f3cfd05e2456e 100644 --- a/src/ui/public/chrome/Tab.js +++ b/src/ui/public/chrome/Tab.js @@ -1,6 +1,7 @@ const _ = require('lodash'); const reEsc = require('lodash').escapeRegExp; const { parse, format } = require('url'); +const notify = require('ui/notify'); const urlJoin = (a, b) => { if (!b) return a; @@ -28,7 +29,16 @@ export default class Tab { this.lastUrlStoreKey = `lastUrl:${this.id}`; this.lastUrlStore = spec.lastUrlStore; - this.lastUrl = this.lastUrlStore ? this.lastUrlStore.getItem(this.lastUrlStoreKey) : null; + + this.lastUrl = null; + if (this.lastUrlStore) { + this.lastUrl = this.lastUrlStore.getItem(this.lastUrlStoreKey); + if (this.lastUrl && !this.lastUrl.startsWith(this.rootUrl)) { + notify.log(`Found invalid lastUrl for tab with root url ${this.rootUrl}: "${this.lastUrl}"`); + this.lastUrl = null; + this.lastUrlStore.removeItem(this.lastUrlStoreKey); + } + } } href() { @@ -54,7 +64,8 @@ export default class Tab { let lastUrl = this.getLastUrl(); if (!lastUrl.startsWith(rootUrl)) { - throw new Error(`Tab "${id}" has invalid root "${rootUrl}" for last url "${lastUrl}"`); + notify.log(`Tab "${id}" has invalid root "${rootUrl}" for last url "${lastUrl}"`); + lastUrl = rootUrl; } return lastUrl.slice(rootUrl.length); From 8f4b48f10110ce4870387126d7b567f52613324d Mon Sep 17 00:00:00 2001 From: spalger Date: Fri, 29 Jan 2016 17:35:34 -0700 Subject: [PATCH 07/18] [chrome/Tab] fix tests --- src/ui/public/chrome/__tests__/Tab.js | 34 +++++++++++++------ .../public/chrome/__tests__/_TabFakeStore.js | 1 + 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/ui/public/chrome/__tests__/Tab.js b/src/ui/public/chrome/__tests__/Tab.js index b25995730ec20..fd6003b847086 100644 --- a/src/ui/public/chrome/__tests__/Tab.js +++ b/src/ui/public/chrome/__tests__/Tab.js @@ -1,5 +1,6 @@ const Tab = require('../Tab'); const expect = require('expect.js'); +const sinon = require('auto-release-sinon'); const TabFakeStore = require('./_TabFakeStore'); describe('Chrome Tab', function () { @@ -89,13 +90,24 @@ describe('Chrome Tab', function () { it('discovers the lastUrl', function () { const lastUrlStore = new TabFakeStore(); const tab = new Tab({ id: 'foo', lastUrlStore }); - expect(tab.lastUrl).to.not.equal('bar'); + expect(tab.lastUrl).to.not.equal('/foo/bar'); - tab.setLastUrl('bar'); - expect(tab.lastUrl).to.equal('bar'); + tab.setLastUrl('/foo/bar'); + expect(tab.lastUrl).to.equal('/foo/bar'); const tab2 = new Tab({ id: 'foo', lastUrlStore }); - expect(tab2.lastUrl).to.equal('bar'); + expect(tab2.lastUrl).to.equal('/foo/bar'); + }); + + it('logs a warning about last urls that do not match the rootUrl', function () { + const lastUrlStore = new TabFakeStore(); + const tab = new Tab({ id: 'foo', baseUrl: '/bar', lastUrlStore }); + tab.setLastUrl('/bar/foo/1'); + + const stub = sinon.stub(console, 'log'); + const tab2 = new Tab({ id: 'foo', baseUrl: '/baz', lastUrlStore }); + sinon.assert.calledOnce(stub); + expect(tab2.lastUrl).to.equal(null); }); }); @@ -167,14 +179,14 @@ describe('Chrome Tab', function () { expect(tab.getLastPath()).to.equal('/index'); }); - it('throws an error if the lastUrl does not extend the root url', function () { - expect(function () { - const baseUrl = 'http://local:5601/app/visualize#'; - const tab = new Tab({ baseUrl }); + it('logs a warning if the lastUrl does not extend the root url', function () { + const baseUrl = 'http://local:5601/app/visualize#'; + const tab = new Tab({ baseUrl }); + sinon.stub(console, 'log'); - tab.setLastUrl('http://local:5601/'); - tab.getLastPath(); - }).to.throwError(/invalid.*root/); + tab.setLastUrl('http://local:5601/'); + tab.getLastPath(); + sinon.assert.calledOnce(console.log);// eslint-disable-line no-console }); }); diff --git a/src/ui/public/chrome/__tests__/_TabFakeStore.js b/src/ui/public/chrome/__tests__/_TabFakeStore.js index 1b8ab81602259..a678440d14b78 100644 --- a/src/ui/public/chrome/__tests__/_TabFakeStore.js +++ b/src/ui/public/chrome/__tests__/_TabFakeStore.js @@ -4,6 +4,7 @@ export default class TabFakeStore { constructor() { this[store] = new Map(); } getItem(k) { return this[store].get(k); } setItem(k, v) { return this[store].set(k, v); } + removeItem(k) { return this[store].delete(k); } getKeys() { return [ ...this[store].keys() ]; } getValues() { return [ ...this[store].values() ]; } } From eef94c74810cdbdf2c35f06749162344c156d27f Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 2 Feb 2016 11:59:19 -0700 Subject: [PATCH 08/18] [appSwitcher] es6-ify --- .../directives/app_switcher/app_switcher.js | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.js b/src/ui/public/chrome/directives/app_switcher/app_switcher.js index 0ee4e69a9afc3..61cc71d0bd278 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.js +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.js @@ -1,31 +1,31 @@ -var parse = require('url').parse; -var bindKey = require('lodash').bindKey; +import { parse } from 'url'; +import { bindKey } from 'lodash'; require('../app_switcher/app_switcher.less'); -var DomLocationProvider = require('ui/domLocation'); +const DomLocationProvider = require('ui/domLocation'); require('ui/modules') .get('kibana') .provider('appSwitcherEnsureNavigation', function () { - var forceNavigation = false; + let forceNavigation = false; this.forceNavigation = function (val) { forceNavigation = !!val; }; this.$get = ['Private', function (Private) { - var domLocation = Private(DomLocationProvider); + const domLocation = Private(DomLocationProvider); return function (event) { if (!forceNavigation || event.isDefaultPrevented() || event.altKey || event.metaKey || event.ctrlKey) { return; } - var toParsed = parse(event.delegateTarget.href); - var fromParsed = parse(domLocation.href); - var sameProto = toParsed.protocol === fromParsed.protocol; - var sameHost = toParsed.host === fromParsed.host; - var samePath = toParsed.path === fromParsed.path; + const toParsed = parse(event.delegateTarget.href); + const fromParsed = parse(domLocation.href); + const sameProto = toParsed.protocol === fromParsed.protocol; + const sameHost = toParsed.host === fromParsed.host; + const samePath = toParsed.path === fromParsed.path; if (sameProto && sameHost && samePath) { toParsed.hash && domLocation.reload(); @@ -44,7 +44,7 @@ require('ui/modules') restrict: 'E', template: require('./app_switcher.html'), controllerAs: 'switcher', - controller: function ($scope, appSwitcherEnsureNavigation) { + controller($scope, appSwitcherEnsureNavigation) { // since we render this in an isolate scope we can't "require: ^chrome", but // rather than remove all helpfull checks we can just check here. if (!$scope.chrome || !$scope.chrome.getNavLinks) { From 5de1094ed72795a5fc07a469be2a9a8fb85278e1 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 2 Feb 2016 12:00:00 -0700 Subject: [PATCH 09/18] [chrome/api/apps] use path getter rather than multiple checks --- src/ui/public/chrome/api/apps.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/public/chrome/api/apps.js b/src/ui/public/chrome/api/apps.js index 65f1f5af5df5a..53f689f38a8e4 100644 --- a/src/ui/public/chrome/api/apps.js +++ b/src/ui/public/chrome/api/apps.js @@ -3,7 +3,7 @@ const { resolve } = require('url'); module.exports = function (chrome, internals) { - if (internals.app && internals.app.navLink) { + if (get(internals, 'app.navLink.url')) { internals.app.navLink.url = resolve(window.location.href, internals.app.navLink.url); } From b5ca05141301131b5f622562220be8f2214b407f Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 2 Feb 2016 12:00:38 -0700 Subject: [PATCH 10/18] [ui/UiApp] dress like a cool kid --- src/ui/ui_app.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/ui/ui_app.js b/src/ui/ui_app.js index b7ebd3c0ebcd1..9e138aae1a6d8 100644 --- a/src/ui/ui_app.js +++ b/src/ui/ui_app.js @@ -1,4 +1,4 @@ -import _ from 'lodash'; +import { chain, get, noop, once, pick } from 'lodash'; import { join } from 'path'; import UiNavLink from './ui_nav_link'; @@ -44,15 +44,15 @@ class UiApp { } // once this resolves, no reason to run it again - this.getModules = _.once(this.getModules); + this.getModules = once(this.getModules); // variables that are injected into the browser, must serialize to JSON - this.getInjectedVars = this.spec.injectVars || _.noop; + this.getInjectedVars = this.spec.injectVars || noop; } getModules() { - return _.chain([ - this.uiExports.find(_.get(this, 'spec.uses', [])), + return chain([ + this.uiExports.find(get(this, 'spec.uses', [])), this.uiExports.find(['chromeNavControls']), ]) .flatten() @@ -62,7 +62,7 @@ class UiApp { } toJSON() { - return _.pick(this, ['id', 'title', 'description', 'icon', 'main', 'navLink']); + return pick(this, ['id', 'title', 'description', 'icon', 'main', 'navLink']); } } From bc4dce1e466a24b62ffc6f3e98c8f870b07dd8b0 Mon Sep 17 00:00:00 2001 From: spalger Date: Tue, 2 Feb 2016 12:01:24 -0700 Subject: [PATCH 11/18] [ui/uiNav*] es6-ify --- src/ui/ui_nav_link.js | 6 +++--- src/ui/ui_nav_link_collection.js | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/ui/ui_nav_link.js b/src/ui/ui_nav_link.js index 742d4e5f95a42..503a31073834b 100644 --- a/src/ui/ui_nav_link.js +++ b/src/ui/ui_nav_link.js @@ -1,5 +1,5 @@ -var _ = require('lodash'); -var { join } = require('path'); +import { pick } from 'lodash'; +import { join } from 'path'; export default class UiNavLink { constructor(uiExports, spec) { @@ -11,6 +11,6 @@ export default class UiNavLink { } toJSON() { - return _.pick(this, ['title', 'url', 'order', 'description', 'icon']); + return pick(this, ['title', 'url', 'order', 'description', 'icon']); } } diff --git a/src/ui/ui_nav_link_collection.js b/src/ui/ui_nav_link_collection.js index 8ea1b282947c9..c88bf897b242f 100644 --- a/src/ui/ui_nav_link_collection.js +++ b/src/ui/ui_nav_link_collection.js @@ -1,10 +1,10 @@ -import _ from 'lodash'; +import { sortBy } from 'lodash'; import UiNavLink from './ui_nav_link'; import Collection from '../utils/Collection'; -let inOrderCache = Symbol('inOrder'); +const inOrderCache = Symbol('inOrder'); -module.exports = class UiNavLinkCollection extends Collection { +export default class UiNavLinkCollection extends Collection { constructor(uiExports, parent) { super(); @@ -12,7 +12,7 @@ module.exports = class UiNavLinkCollection extends Collection { } new(spec) { - let link = new UiNavLink(this.uiExports, spec); + const link = new UiNavLink(this.uiExports, spec); this[inOrderCache] = null; this.add(link); return link; @@ -20,7 +20,7 @@ module.exports = class UiNavLinkCollection extends Collection { get inOrder() { if (!this[inOrderCache]) { - this[inOrderCache] = _.sortBy([...this], 'order'); + this[inOrderCache] = sortBy([...this], 'order'); } return this[inOrderCache]; From a75df517ef4359138ccf65edbcf601d0586c3391 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Mon, 8 Feb 2016 16:50:03 -0700 Subject: [PATCH 12/18] Change svg to be inkscape compatible --- src/ui/public/images/kibana.svg | 104 +++++++++++++++++++++++++++++++- 1 file changed, 103 insertions(+), 1 deletion(-) diff --git a/src/ui/public/images/kibana.svg b/src/ui/public/images/kibana.svg index dfb45b1544b7b..571e84de4855e 100644 --- a/src/ui/public/images/kibana.svg +++ b/src/ui/public/images/kibana.svg @@ -1 +1,103 @@ -Kibana-Full-Logo \ No newline at end of file + + + + + + image/svg+xml + + Kibana-Full-Logo + + + + + + + + Kibana-Full-Logo + + + + + + + + + + + + + From 0a1b5165d63283ca8e05640d9a376e9e0633bde5 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Mon, 8 Feb 2016 16:50:23 -0700 Subject: [PATCH 13/18] Add padding around logo --- src/plugins/kibana/public/kibana.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/kibana/public/kibana.js b/src/plugins/kibana/public/kibana.js index ada2082a54178..a061137ee6524 100644 --- a/src/plugins/kibana/public/kibana.js +++ b/src/plugins/kibana/public/kibana.js @@ -30,8 +30,8 @@ routes chrome .setBrand({ - 'logo': 'url(' + kibanaLogoUrl + ') center / 160px 70px no-repeat #e8488b', - 'smallLogo': 'url(' + kibanaLogoUrl + ') center / 160px 70px no-repeat #e8488b' + 'logo': 'url(' + kibanaLogoUrl + ') 6px 10px / 140px 50px no-repeat #e8488b', + 'smallLogo': 'url(' + kibanaLogoUrl + ') 6px 10px / 140px 50px no-repeat #e8488b' }) .setNavBackground('#222222') .setTabDefaults({ From 3abd1252fcc89a909d9b7dd58b91e8b03b9c19a0 Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Mon, 8 Feb 2016 16:50:54 -0700 Subject: [PATCH 14/18] Add drop shadow, hover effect, center icons vertically --- .../directives/app_switcher/app_switcher.html | 2 +- .../directives/app_switcher/app_switcher.less | 23 ++++++++++++++----- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/app_switcher/app_switcher.html index 7613cb03142b4..5269163aacbe6 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.html @@ -10,7 +10,7 @@ data-test-subj="appLink">
-
{{ link.title[0] }}
+
{{ link.title[0] }}
{{ link.title }}
 diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less index f6ad38223eda1..6a04a8ef0f15f 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -5,8 +5,9 @@ @as-open-width: 170px; @as-closed-width: 53px; @app-icon-height: 30px; -@transition-time: .65s; -@transition-delay: .2s; +@transition-time: .35s; +@transition-delay: .1s; +@app-links-wrapper-background: #3caed2; body { overflow-x: hidden; } @@ -17,7 +18,7 @@ body { overflow-x: hidden; } top: 0; bottom: 0; z-index: 0; - background-color: #3caed2; + background-color: @app-links-wrapper-background; overflow: hidden; transition: width @transition-time; transition-delay: @transition-delay; @@ -36,7 +37,7 @@ body { overflow-x: hidden; } width: @as-open-width; list-style-type: none; &.kibana { - background: url("~ui/images/kibana.svg") center / 160px 70px no-repeat #e8488b; + background: url("~ui/images/kibana.svg") 6px 10px / 140px 50px no-repeat #e8488b; } } .bottom-apps { @@ -46,6 +47,7 @@ body { overflow-x: hidden; } } .app-wrapper { .real-flex-parent(); + box-shadow: -4px 0px 3px rgba(0,0,0,0.2); position: absolute; transition: transform @transition-time; transition-delay: @transition-delay; @@ -67,13 +69,20 @@ body { overflow-x: hidden; } .app-link { width: @as-open-width; height: @app-icon-height; + line-height: @app-icon-height; + > a { display: block; height: 100%; color: #fff; } + + &:hover { + background-color: lighten(@app-links-wrapper-background, 7.5%); + } .app-icon { float: left; + font-weight: bold; text-align: center; font-size: 1.7em; display: inline-block; @@ -81,6 +90,7 @@ body { overflow-x: hidden; } width: @as-closed-width; background-position: center; background-size: contain; + background-repeat: no-repeat; > i { } } @@ -90,12 +100,13 @@ body { overflow-x: hidden; } display: inline-block; float: right; font-size: 0.9em; - text-align: center; + text-align: left; + padding-left: 3px; line-height: @app-icon-height; } &.active { - background-color: #73c6e0; + background-color: lighten(@app-links-wrapper-background, 10%); > a { color: #333; text-decoration: none; From e106eb9382a128843842da31597f72d275fabe0a Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Mon, 8 Feb 2016 16:54:49 -0700 Subject: [PATCH 15/18] Move logo text up. Reduce width of sidebar to 160px --- .../directives/app_switcher/app_switcher.less | 2 +- src/ui/public/images/kibana.svg | 35 +++++++++++-------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less index 6a04a8ef0f15f..48f6d4e515813 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -2,7 +2,7 @@ @import (reference) "~ui/styles/variables"; // as - App Switcher -@as-open-width: 170px; +@as-open-width: 160px; @as-closed-width: 53px; @app-icon-height: 30px; @transition-time: .35s; diff --git a/src/ui/public/images/kibana.svg b/src/ui/public/images/kibana.svg index 571e84de4855e..435adefaf46fc 100644 --- a/src/ui/public/images/kibana.svg +++ b/src/ui/public/images/kibana.svg @@ -73,31 +73,38 @@ transform="translate(-408.94 -254.5)" id="path15" /> + style="font-style:normal;font-weight:normal;font-size:33.04906845px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:0.92528737;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" + id="text4159" + transform="translate(0,-13.509761)"> + style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Titillium;-inkscape-font-specification:'Titillium Semi-Bold';fill:#ffffff;fill-opacity:0.92528737" + id="path4891" + inkscape:connector-curvature="0" /> + style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Titillium;-inkscape-font-specification:'Titillium Semi-Bold';fill:#ffffff;fill-opacity:0.92528737" + id="path4893" + inkscape:connector-curvature="0" /> + style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Titillium;-inkscape-font-specification:'Titillium Semi-Bold';fill:#ffffff;fill-opacity:0.92528737" + id="path4895" + inkscape:connector-curvature="0" /> + style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Titillium;-inkscape-font-specification:'Titillium Semi-Bold';fill:#ffffff;fill-opacity:0.92528737" + id="path4897" + inkscape:connector-curvature="0" /> + style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Titillium;-inkscape-font-specification:'Titillium Semi-Bold';fill:#ffffff;fill-opacity:0.92528737" + id="path4899" + inkscape:connector-curvature="0" /> + style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-family:Titillium;-inkscape-font-specification:'Titillium Semi-Bold';fill:#ffffff;fill-opacity:0.92528737" + id="path4901" + inkscape:connector-curvature="0" /> From d8312934f9b5077bb8c3c5a389229c15ab4effe9 Mon Sep 17 00:00:00 2001 From: Chris Cowan Date: Mon, 8 Feb 2016 17:00:35 -0700 Subject: [PATCH 16/18] Adding svgs and CSS for nav --- src/plugins/kibana/index.js | 8 ++++---- .../kibana/public/assets/dashboard.svg | 4 ++++ src/plugins/kibana/public/assets/discover.svg | 3 +++ src/plugins/kibana/public/assets/logout.svg | 3 +++ src/plugins/kibana/public/assets/search.svg | 4 ++++ src/plugins/kibana/public/assets/settings.svg | 4 ++++ .../kibana/public/assets/visualize.svg | 3 +++ .../directives/app_switcher/app_switcher.html | 4 ++-- .../directives/app_switcher/app_switcher.less | 20 ++++++++++++++++--- 9 files changed, 44 insertions(+), 9 deletions(-) create mode 100755 src/plugins/kibana/public/assets/dashboard.svg create mode 100755 src/plugins/kibana/public/assets/discover.svg create mode 100755 src/plugins/kibana/public/assets/logout.svg create mode 100755 src/plugins/kibana/public/assets/search.svg create mode 100755 src/plugins/kibana/public/assets/settings.svg create mode 100755 src/plugins/kibana/public/assets/visualize.svg diff --git a/src/plugins/kibana/index.js b/src/plugins/kibana/index.js index c5b6578b61072..789f2212c7d8a 100644 --- a/src/plugins/kibana/index.js +++ b/src/plugins/kibana/index.js @@ -40,28 +40,28 @@ module.exports = function (kibana) { order: -1003, url: '/app/kibana#/discover', description: 'interactively explore your data', - icon: 'plugins/kibana/settings/sections/about/barcode.svg', + icon: 'plugins/kibana/assets/discover.svg', }, { title: 'Visualize', order: -1002, url: '/app/kibana#/visualize', description: 'design data visualizations', - icon: 'plugins/kibana/settings/sections/about/barcode.svg', + icon: 'plugins/kibana/assets/visualize.svg', }, { title: 'Dashboard', order: -1001, url: '/app/kibana#/dashboard', description: 'compose visualizations for much win', - icon: 'plugins/kibana/settings/sections/about/barcode.svg', + icon: 'plugins/kibana/assets/dashboard.svg', }, { title: 'Settings', order: 1000, url: '/app/kibana#/settings', description: 'define index patterns, change config, and more', - icon: 'plugins/kibana/settings/sections/about/barcode.svg', + icon: 'plugins/kibana/assets/settings.svg', } ] }, diff --git a/src/plugins/kibana/public/assets/dashboard.svg b/src/plugins/kibana/public/assets/dashboard.svg new file mode 100755 index 0000000000000..083918d1c51b0 --- /dev/null +++ b/src/plugins/kibana/public/assets/dashboard.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/plugins/kibana/public/assets/discover.svg b/src/plugins/kibana/public/assets/discover.svg new file mode 100755 index 0000000000000..7b923b7c8aad2 --- /dev/null +++ b/src/plugins/kibana/public/assets/discover.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/plugins/kibana/public/assets/logout.svg b/src/plugins/kibana/public/assets/logout.svg new file mode 100755 index 0000000000000..123ceceaef10e --- /dev/null +++ b/src/plugins/kibana/public/assets/logout.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/plugins/kibana/public/assets/search.svg b/src/plugins/kibana/public/assets/search.svg new file mode 100755 index 0000000000000..1e4ffb6c1b4fc --- /dev/null +++ b/src/plugins/kibana/public/assets/search.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/plugins/kibana/public/assets/settings.svg b/src/plugins/kibana/public/assets/settings.svg new file mode 100755 index 0000000000000..7bbbce4ac0874 --- /dev/null +++ b/src/plugins/kibana/public/assets/settings.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/src/plugins/kibana/public/assets/visualize.svg b/src/plugins/kibana/public/assets/visualize.svg new file mode 100755 index 0000000000000..a1cde5a166481 --- /dev/null +++ b/src/plugins/kibana/public/assets/visualize.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/app_switcher/app_switcher.html index 89ae849628bc3..1d9c625a3ecc2 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.html @@ -9,8 +9,8 @@ ng-href="{{ link.active ? link.url : (link.lastSubUrl || link.url) }}" data-test-subj="appLink"> -
-
{{ link.title[0] }}
+
+
{{ link.title[0] }}
{{ link.title }}
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less index f6ad38223eda1..5ab1b3a6463f2 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -79,18 +79,32 @@ body { overflow-x: hidden; } display: inline-block; height: @app-icon-height; width: @as-closed-width; - background-position: center; - background-size: contain; + background-color: @white; + mask-position: center; + mask-size: 60% 60%; + mask-repeat: no-repeat; > i { } } + .app-icon-missing { + float: left; + text-align: center; + font-size: 1.7em; + display: inline-block; + height: @app-icon-height; + width: @as-closed-width; + background-position: center; + background-size: contain; + background-repeat: no-repeat; + } + .app-title { width: calc(@as-open-width - @as-closed-width); display: inline-block; float: right; font-size: 0.9em; - text-align: center; + text-align: left; line-height: @app-icon-height; } From 3100a2ff2eb905c2b282213166182c4b3c2c0c1e Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Tue, 9 Feb 2016 09:18:54 -0700 Subject: [PATCH 17/18] Add flex container inside app-wrapper, attach shadow to that --- src/ui/public/chrome/chrome.html | 82 ++++++++++--------- .../directives/app_switcher/app_switcher.less | 6 +- 2 files changed, 47 insertions(+), 41 deletions(-) diff --git a/src/ui/public/chrome/chrome.html b/src/ui/public/chrome/chrome.html index f3c9ff4e06682..a1a2364f80be1 100644 --- a/src/ui/public/chrome/chrome.html +++ b/src/ui/public/chrome/chrome.html @@ -43,51 +43,53 @@
- - - - + + -
+
+
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less index d178bf48174a1..13db3bcd43c97 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -47,7 +47,6 @@ body { overflow-x: hidden; } } .app-wrapper { .real-flex-parent(); - box-shadow: -4px 0px 3px rgba(0,0,0,0.2); position: absolute; transition: transform @transition-time; transition-delay: @transition-delay; @@ -59,6 +58,11 @@ body { overflow-x: hidden; } margin: 0 auto; background-color: #fff; + &-panel { + .flex-parent(@shrink: 0); + box-shadow: -4px 0px 3px rgba(0,0,0,0.2); + } + .navbar-right { margin-right: 0; } From e7c98c07db64fec740aac291e24f22e3f9da075b Mon Sep 17 00:00:00 2001 From: Rashid Khan Date: Tue, 9 Feb 2016 10:09:13 -0700 Subject: [PATCH 18/18] Fix icons in firefox --- .../directives/app_switcher/app_switcher.html | 2 +- .../directives/app_switcher/app_switcher.less | 13 +++++++++---- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.html b/src/ui/public/chrome/directives/app_switcher/app_switcher.html index 1d9c625a3ecc2..382e35b8a4023 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.html +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.html @@ -9,7 +9,7 @@ ng-href="{{ link.active ? link.url : (link.lastSubUrl || link.url) }}" data-test-subj="appLink"> -
+
{{ link.title[0] }}
{{ link.title }}
diff --git a/src/ui/public/chrome/directives/app_switcher/app_switcher.less b/src/ui/public/chrome/directives/app_switcher/app_switcher.less index 13db3bcd43c97..643ef969c7418 100644 --- a/src/ui/public/chrome/directives/app_switcher/app_switcher.less +++ b/src/ui/public/chrome/directives/app_switcher/app_switcher.less @@ -84,20 +84,22 @@ body { overflow-x: hidden; } &:hover { background-color: lighten(@app-links-wrapper-background, 7.5%); } + .app-icon { float: left; + filter: invert(100%); font-weight: bold; text-align: center; font-size: 1.7em; display: inline-block; height: @app-icon-height; width: @as-closed-width; - background-color: @white; - mask-position: center; - mask-size: 60% 60%; - mask-repeat: no-repeat; > i { } + + > img { + height: 20px; + } } .app-icon-missing { @@ -128,6 +130,9 @@ body { overflow-x: hidden; } color: #333; text-decoration: none; } + img { + filter: invert(100%); + } } }