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

Design Changes to Visualize Legend #6169

Merged
merged 8 commits into from
Feb 11, 2016
Merged

Design Changes to Visualize Legend #6169

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8f9d8b3
css changes to the legend
stormpython Feb 9, 2016
680e0bf
removing inline style, adding color to font awesome icon
stormpython Feb 10, 2016
e712612
fixing broken tests
stormpython Feb 10, 2016
da2725d
Merge remote-tracking branch 'upstream/feature/design' into legend
stormpython Feb 10, 2016
400a31c
removing legend from Discover page, also removing functional tests fo…
stormpython Feb 10, 2016
d5c0829
removing legend tests
stormpython Feb 10, 2016
fc4cf84
removing the word , making open/close icon inline with the legend list
stormpython Feb 11, 2016
552bc63
reducing the size of the legend icon
stormpython Feb 11, 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
2 changes: 1 addition & 1 deletion src/plugins/kibana/public/discover/directives/timechart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ uiModules
const init = function () {
// This elem should already have a height/width
const myChart = new vislib.Chart(elem[0], {

addLegend: false
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. We already have an addLegend parameter that isn't used due to @rashidkpc changes to the legend. On the discover page, we don't need the legend and therefore adding the option for addLegend back is an easy way to remove it.

});

$scope.$watch('data', function (data) {
Expand Down
22 changes: 13 additions & 9 deletions src/ui/public/vislib/styles/_legend.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,17 @@ visualize-legend {
flex-direction: row;
}

.legend-title {
display: flex;
flex-direction: row;

i {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

icons are one of the slower css selectors, is there a class or something else you could use?

color: #BEBEBE;
}
}

.legend-col-wrapper {
.flex-parent(0, 0, auto);
flex-direction: row;
z-index: 10;
min-height: 0;
overflow: hidden;
Expand All @@ -24,26 +32,24 @@ visualize-legend {
background-color: @sidebar-hover-bg;
}

background-color: @sidebar-bg;
font-size: 10px;
height: 30px;
padding: 8px 3px;
border-bottom-left-radius: @border-radius-small;
padding-left: 5px;
padding-right: 5px;
font-size: 14px;
}

.column-labels {
text-align: right;
}

.legend-ul {
border-left: 1px solid @sidebar-bg;
width: 150px;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
color: @legend-item-color;
list-style-type: none;
padding: 0;
padding-top: 10px;
margin-bottom: 0;
visibility: visible;
min-height: 0;
Expand Down Expand Up @@ -116,5 +122,3 @@ visualize-legend {
.legend-value:hover {
cursor: pointer;
}


2 changes: 1 addition & 1 deletion src/ui/public/visualize/visualize.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <h4>No results found</h4>
ng-style="loadingStyle"
ng-class="{ loading: vis.type.requiresSearch && searchSource.activeFetchCount > 0 }"
class="visualize-chart"></div>
<visualize-legend></visualize-legend>
<visualize-legend ng-show="vis.params.addLegend"></visualize-legend>
</div>
<!-- <pre>{{chartData | json}}</pre> -->
<visualize-spy ng-if="vis.type.requiresSearch && showSpyPanel"></visualize-spy>
9 changes: 6 additions & 3 deletions src/ui/public/visualize/visualize_legend.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<div class="legend-col-wrapper" ng-if="labels.length">
<div ng-click="toggleLegend()" class="legend-toggle">
<i class="fa" ng-class="open ? 'fa-chevron-right' : 'fa-chevron-left'"></i>
<div class="legend-title">
<span>Legend</span>
<div ng-click="toggleLegend()" class="legend-toggle">
<i class="fa" ng-class="open ? 'fa-chevron-circle-right' : 'fa-chevron-circle-left'"></i>
</div>
</div>
<ul class="legend-ul" ng-show="open">

Expand Down Expand Up @@ -38,4 +41,4 @@

</li>
</ul>
</div>
</div>
37 changes: 0 additions & 37 deletions test/functional/apps/discover/_collapse_expand.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,43 +49,6 @@ define(function (require) {
.catch(common.handleError(this));
});


bdd.describe('legend', function () {

bdd.it('should initially be collapsed', function () {
return discoverPage.getLegendWidth()
.then(function (actualwidth) {
common.debug('collapsed legend width = ' + actualwidth);
expect(actualwidth < 20).to.be(true);
})
.catch(common.handleError(this));
});

bdd.it('should expand when clicked', function () {
return discoverPage.clickLegendExpand()
.then(function () {
return discoverPage.getLegendWidth();
})
.then(function (actualwidth) {
common.debug('expanded legend width = ' + actualwidth);
expect(actualwidth > 140).to.be(true);
})
.catch(common.handleError(this));
});

bdd.it('should collapse when clicked', function () {
return discoverPage.clickLegendCollapse()
.then(function () {
return discoverPage.getLegendWidth();
})
.then(function (actualwidth) {
expect(actualwidth < 20).to.be(true);
})
.catch(common.handleError(this));
});

});

bdd.describe('field data', function () {

bdd.it('should initially be expanded', function () {
Expand Down
18 changes: 0 additions & 18 deletions test/support/pages/discover_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,24 +213,6 @@ define(function (require) {
.getProperty('value');
},

clickLegendExpand: function clickLegendExpand() {
return thisTime
.findByCssSelector('.fa-chevron-left')
.click();
},

clickLegendCollapse: function clickLegendCollapse() {
return thisTime
.findByCssSelector('div.legend-toggle > i.fa-chevron-right')
.click();
},

getLegendWidth: function getLegendWidth() {
return thisTime
.findByCssSelector('.legend-col-wrapper')
.getProperty('clientWidth');
},

clickSidebarExpand: function clickSidebarExpand() {
return thisTime
.findByCssSelector('.chevron-cont')
Expand Down