github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #6162 from jbudz/design/nav

Browse source 
[visualize, dashboard] Move action icons
This commit is contained in:
Jonathan Budzenski 2016-02-10 12:07:57 -06:00
commit 40a21b9bc1
6 changed files with 132 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

112
src/plugins/kibana/public/dashboard/index.html
View file

@ -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"
@ -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">

14
src/plugins/kibana/public/dashboard/styles/main.less
View file

@ -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 {
@ -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 {

2
src/plugins/kibana/public/discover/styles/main.less
View file

@ -6,7 +6,7 @@
padding-bottom: 0;
}
navbar[name="discover-search"] {
padding-bottom: 5px;
padding-bottom: 10px;
}
}

109
src/plugins/kibana/public/visualize/editor/editor.html
View file

@ -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()"
@ -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">

12
src/plugins/kibana/public/visualize/editor/styles/_editor.less
View file

@ -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();

6
test/support/pages/visualize_page.js
View file

@ -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();
},
@ -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);
@ -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');