Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[visualize, dashboard] Move action icons #6162

Merged
merged 5 commits into from
Feb 10, 2016
Merged

[visualize, dashboard] Move action icons #6162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4304d58
[dashboard] Move nav buttons to icons
jbudz Feb 5, 2016
f4c3b9b
[visualize] Move nav buttons to icons
jbudz Feb 5, 2016
ba5b57e
[nav] Increase padding below search
jbudz Feb 8, 2016
70f5f99
[tests] Remove ng-scope from visualize action selector
jbudz Feb 9, 2016
74e67f0
[visualize] Remove tab container top border
jbudz Feb 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 53 additions & 59 deletions src/plugins/kibana/public/dashboard/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,56 @@
<div dashboard-app class="app-container dashboard-container">
<navbar ng-show="chrome.getVisible()" name="dashboard">
<navbar name="dashboard-options">
<div class="button-group dashboard-actions" role="toolbar">
<button ng-click="newDashboard()"
aria-label="New Dashboard">
<span>New</span>
</button>
<button
aria-label="Save Dashboard"
aria-haspopup="false"
aria-expanded="{{ configTemplate.is('save') }}"
ng-class="{active: configTemplate.is('save')}"
ng-click="configTemplate.toggle('save');">
<span>Save</span>
</button>
<button
aria-label="Load Saved Dashboard"
aria-haspopup="false"
aria-expanded="{{ configTemplate.is('load') }}"
ng-class="{active: configTemplate.is('load')}"
ng-click="configTemplate.toggle('load');">
<span>Open</span>
</button>
<button
aria-label="Share Dashboard"
aria-haspopup="false"
aria-expanded="{{ configTemplate.is('share') }}"
ng-class="{active: configTemplate.is('share')}"
ng-click="configTemplate.toggle('share');">
<span>Share</span>
</button>
<button
aria-label="Add Visualization"
aria-haspopup="false"
aria-expanded="{{ configTemplate.is('pickVis') }}"
ng-class="{active: configTemplate.is('pickVis')}"
ng-click="configTemplate.toggle('pickVis');">
<span>Add visualization</span>
</button>
<button
aria-label="Options"
aria-haspopup="false"
aria-expanded="{{ configTemplate.is('options') }}"
ng-class="{active: configTemplate.is('options')}"
ng-click="configTemplate.toggle('options');">
<span>Options</span>
</button>
</div>
</navbar>

<config config-template="configTemplate" config-object="opts"></config>

<navbar ng-show="chrome.getVisible()" name="dashboard-search">
<span class="name" ng-if="dash.id" ng-bind="::dash.title" tooltip="{{::dash.title}}"></span>

<form name="queryInput"
Expand Down Expand Up @@ -29,66 +80,9 @@
</div>

</form>

<div class="button-group" role="toolbar">
<kbn-tooltip text="New Dashboard" placement="bottom" append-to-body="1">
<button ng-click="newDashboard()" aria-label="New Dashboard"><i aria-hidden="true" class="fa fa-file-new-o"></i></button>
</kbn-tooltip>
<kbn-tooltip text="Save Dashboard" placement="bottom" append-to-body="1">
<button
aria-label="Save Dashboard"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('save') }}"
ng-class="{active: configTemplate.is('save')}"
ng-click="configTemplate.toggle('save');">
<i aria-hidden="true" class="fa fa-save"></i>
</button>
</kbn-tooltip>
<kbn-tooltip text="Load Saved Dashboard" placement="bottom" append-to-body="1">
<button
aria-label="Load Saved Dashboard"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('load') }}"
ng-class="{active: configTemplate.is('load')}"
ng-click="configTemplate.toggle('load');">
<i aria-hidden="true" class="fa fa-folder-open-o"></i>
</button>
</kbn-tooltip>
<kbn-tooltip text="Share" placement="bottom" append-to-body="1">
<button
aria-label="Share Dashboard"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('share') }}"
ng-class="{active: configTemplate.is('share')}"
ng-click="configTemplate.toggle('share');">
<i aria-hidden="true" class="fa fa-external-link"></i>
</button>
</kbn-tooltip>
<kbn-tooltip text="Add Visualization" placement="bottom" append-to-body="1">
<button
aria-label="Add Visualization"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('pickVis') }}"
ng-class="{active: configTemplate.is('pickVis')}"
ng-click="configTemplate.toggle('pickVis');">
<i aria-hidden="true" class="fa fa-plus-circle"></i>
</button>
</kbn-tooltip>
<kbn-tooltip text="Options" placement="bottom" append-to-body="1">
<button
aria-label="Options"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('options') }}"
ng-class="{active: configTemplate.is('options')}"
ng-click="configTemplate.toggle('options');">
<i aria-hidden="true" class="fa fa-gear"></i>
</button>
</kbn-tooltip>
</div>
<div class="button-group"></div>
</navbar>

<config config-template="configTemplate" config-object="opts"></config>

<filter-bar state="state"></filter-bar>

<div ng-show="!state.panels.length" class="text-center start-screen">
Expand Down
14 changes: 12 additions & 2 deletions src/plugins/kibana/public/dashboard/styles/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,12 @@

.tab-dashboard {
background-color: @dashboard-bg;
navbar[name="dashboard-options"] {
padding-bottom: 0;
}
navbar[name="dashboard-search"] {
padding-bottom: 10px;
}
}

dashboard-grid {
Expand Down Expand Up @@ -119,8 +125,12 @@ dashboard-grid {
}
}

.dashboard-panel-picker > li.list-group-item {
border-top: 0px;
.dashboard-actions {
margin-left: auto;
}

.dashboard-panel-picker > .list-group-item {
border-top: 0;
}

.dashboard-load {
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/kibana/public/discover/styles/main.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
padding-bottom: 0;
}
navbar[name="discover-search"] {
padding-bottom: 5px;
padding-bottom: 10px;
}
}

Expand Down
109 changes: 51 additions & 58 deletions src/plugins/kibana/public/visualize/editor/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,54 @@
<div ng-controller="VisEditor" class="vis-editor vis-type-{{ vis.type.name }}">
<navbar ng-if="chrome.getVisible()" name="visualize">
<navbar ng-if="chrome.getVisible()" name="visualize-options">
<div class="button-group vis-editor-actions">
<button ng-click="startOver()" aria-label="New Visualization">
<span>New</span>
</button>
<!-- normal save -->
<button
ng-class="{active: configTemplate.is('save')}"
ng-click="configTemplate.toggle('save')"
ng-if="!editableVis.dirty"
aria-expanded="{{ configTemplate.is('save') }}"
aria-label="Save Visualization">
<span>Save</span>
</button>

<!-- save stub with tooltip -->
<button disabled ng-if="editableVis.dirty" tooltip="Apply or Discard your changes before saving" aria-label="Apply or Discard your changes before saving">
<span>Save</span>
</button>
<button
ng-class="{active: configTemplate.is('load')}"
ng-click="configTemplate.toggle('load')"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('load') }}"
aria-label="Load Saved Visualization">
<span>Load</span>
</button>
<button
ng-class="{active: configTemplate.is('share')}"
ng-click="configTemplate.toggle('share')"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('share') }}"
aria-label="Share Visualization">
<span>Share</span>
</button>
<button
ng-click="fetch()"
aria-label="Refresh">
<span>Refresh</span>
</button>
</div>
</navbar>

<config
ng-if="chrome.getVisible()"
config-template="configTemplate"
config-object="conf">
</config>

<navbar ng-if="chrome.getVisible()" name="visualize-search">
<div class="fill bitty-modal-container">
<div ng-if="vis.type.requiresSearch && $state.linked && !unlinking"
ng-dblclick="unlink()"
Expand Down Expand Up @@ -62,65 +111,9 @@
</div>
</form>
</div>

<div class="button-group">
<kbn-tooltip text="New Visualization" placement="bottom" append-to-body="1">
<button ng-click="startOver()" aria-label="New Visualization"><i aria-hidden="true" class="fa fa-file-new-o"></i></button>
</kbn-tooltip>

<kbn-tooltip text="Save Visualization" placement="bottom" append-to-body="1">
<!-- normal save -->
<button
ng-class="{active: configTemplate.is('save')}"
ng-click="configTemplate.toggle('save')"
ng-if="!editableVis.dirty"
aria-expanded="{{ configTemplate.is('save') }}"
aria-label="Save Visualization">
<i aria-hidden="true" class="fa fa-save"></i>
</button>

<!-- save stub with tooltip -->
<button disabled ng-if="editableVis.dirty" tooltip="Apply or Discard your changes before saving" aria-label="Apply or Discard your changes before saving">
<i aria-hidden="true" class="fa fa-save"></i>
</button>
</kbn-tooltip>

<kbn-tooltip text="Load Saved Visualization" placement="bottom" append-to-body="1">
<button
ng-class="{active: configTemplate.is('load')}"
ng-click="configTemplate.toggle('load')"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('load') }}"
aria-label="Load Saved Visualization">
<i aria-hidden="true" class="fa fa-folder-open-o"></i>
</button>
</kbn-tooltip>
<kbn-tooltip text="Share Visualization" placement="bottom" append-to-body="1">
<button
ng-class="{active: configTemplate.is('share')}"
ng-click="configTemplate.toggle('share')"
aria-haspopup="true"
aria-expanded="{{ configTemplate.is('share') }}"
aria-label="Share Visualization">
<i aria-hidden="true" class="fa fa-external-link"></i>
</button>
</kbn-tooltip>
<kbn-tooltip text="Refresh" placement="bottom" append-to-body="1">
<button
ng-click="fetch()"
aria-label="Refresh">
<i aria-hidden="true" class="fa fa-refresh"></i>
</button>
</kbn-tooltip>
</div>
<div class="button-group"></div>
</navbar>

<config
ng-if="chrome.getVisible()"
config-template="configTemplate"
config-object="conf">
</config>

<filter-bar state="state"></filter-bar>

<div class="vis-editor-content">
Expand Down
12 changes: 12 additions & 0 deletions src/plugins/kibana/public/visualize/editor/styles/_editor.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,18 @@
}
}

navbar[name="visualize-options"] {
padding-bottom: 0;
}

navbar[name="visualize-search"] {
padding-bottom: 10px;
}

&-actions {
margin-left: auto;
}

&-content {
.flex-parent();

Expand Down
6 changes: 3 additions & 3 deletions test/support/pages/visualize_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ define(function (require) {
clickNewVisualization: function clickNewVisualization() {
return this.remote
.setFindTimeout(defaultTimeout)
.findByCssSelector('button.ng-scope[aria-label="New Visualization"]')
.findByCssSelector('button[aria-label="New Visualization"]')
.click();
},

Expand All @@ -298,7 +298,7 @@ define(function (require) {
var self = this;
return this.remote
.setFindTimeout(defaultTimeout)
.findByCssSelector('button.ng-scope[aria-label="Save Visualization"]')
.findByCssSelector('button[aria-label="Save Visualization"]')
.click()
.then(function () {
return common.sleep(1000);
Expand Down Expand Up @@ -332,7 +332,7 @@ define(function (require) {
var self = this;
return this.remote
.setFindTimeout(defaultTimeout)
.findByCssSelector('button.ng-scope[aria-label="Load Saved Visualization"]')
.findByCssSelector('button[aria-label="Load Saved Visualization"]')
.click()
.then(function findVizByLinkedText() {
common.debug('Load Saved Vis button clicked');
Expand Down