diff --git a/images/zero-state-arrow-collections.png b/images/zero-state-arrow-collections.png new file mode 100644 index 00000000000..1527ad19f56 Binary files /dev/null and b/images/zero-state-arrow-collections.png differ diff --git a/src/home/index.jade b/src/home/index.jade index aac9b92e134..ed324f00970 100644 --- a/src/home/index.jade +++ b/src/home/index.jade @@ -1,4 +1,7 @@ .page .content.with-sidebar div(data-hook='collection-subview') + div.report-zero-state(data-hook='report-zero-state') + img(src='images/zero-state-arrow-collections.png', width="110") + span Choose a collection to analyze div(data-hook='sidebar') diff --git a/src/home/index.js b/src/home/index.js index fbcf275f6c9..66882d383de 100644 --- a/src/home/index.js +++ b/src/home/index.js @@ -15,6 +15,17 @@ var HomeView = View.extend({ type: 'string', allowNull: true, default: null + }, + showZeroState: { + type: 'boolean', + default: true + } + }, + bindings: { + showZeroState: { + hook: 'report-zero-state', + type: 'booleanClass', + no: 'hidden' } }, initialize: function() { @@ -46,6 +57,7 @@ var HomeView = View.extend({ this.ns = model.getId(); this.updateTitle(model); + this.showZeroState = false; app.navigate(format('schema/%s', model.getId()), { silent: true }); diff --git a/src/home/index.less b/src/home/index.less index aa9e9f9c967..589012c4eac 100644 --- a/src/home/index.less +++ b/src/home/index.less @@ -52,6 +52,20 @@ border-bottom: @caret-width-base solid transparent; } +.report-zero-state { + margin: 124px 0 0 20px; + + img { + margin-bottom: 7px; + } + span { + font-size: 24px; + color: @gray4; + font-weight: 200; + margin-left: 15px; + } +} + .collection-view { header { padding: 12px 20px;