[visualize] Move nav buttons to icons

This commit is contained in:
Jonathan Budzenski 2016-02-05 10:45:39 -06:00
parent 4304d5830c
commit f4c3b9b6f4
2 changed files with 63 additions and 58 deletions

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

View file

@ -55,6 +55,18 @@
}
}
navbar[name="visualize-options"] {
padding-bottom: 0;
}
navbar[name="visualize-search"] {
padding-bottom: 5px;
}
&-actions {
margin-left: auto;
}
&-content {
.flex-parent();