-
Notifications
You must be signed in to change notification settings - Fork 486
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.
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
Fixes #1467 - Send useful filter label item data through components to Management Toolbar #1470
Changes from 8 commits
2ad2cad
512cc71
6068bf1
9f71be1
69bca0d
9f6a208
096cd82
777a784
32a21cf
bdebd19
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<li class="tbar-item"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Category: Label 3</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span></div></li> | ||
<div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Category: Label 3</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="icons.svg#times" /></svg></button></span></span></div> | ||
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<li class="tbar-item"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li> | ||
<li class="tbar-item"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Here too, see |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +1 @@ | ||
<nav class="tbar tbar-inline-xs-down subnav-tbar subnav-tbar-primary"><div class="container-fluid container-fluid-max-xl"><ul class="tbar-nav tbar-nav-wrap"><li class="tbar-item"><div class="tbar-section"><span class="component-text text-truncate-inline"><span class="text-truncate">10-results-for-my search</span></span></div></li><li class="tbar-item"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></li><li class="tbar-item"><div class="tbar-section"><a class=" component-link tbar-link"href="url">clear</a></div></li></ul></div></nav> | ||
<nav class="tbar tbar-inline-xs-down subnav-tbar subnav-tbar-primary"><div class="container-fluid container-fluid-max-xl"><ul class="tbar-nav tbar-nav-wrap"><li class="tbar-item"><div class="tbar-section"><span class="component-text text-truncate-inline"><span class="text-truncate">10-results-for-my search</span></span></div></li><li class="tbar-item"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 1</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li><li class="tbar-item tbar-item-expand"><div class="tbar-section"><div class="null"><span class="label label-dismissible component-label tbar-label"><span class="label-item label-item-expand"><div class="label-section">Label 2</div></span><span class="label-item label-item-after"><button class="btn close"aria-label="close"type="button"><svg class="lexicon-icon lexicon-icon-times"focusable="false"role="presentation"><use xlink:href="spritemap.svg#times" /></svg></button></span></span></div></div></li><li class="tbar-item"><div class="tbar-section"><a class=" component-link tbar-link"href="url">clear</a></div></li></ul></div></nav> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,91 @@ | ||
import 'clay-label'; | ||
import {Config} from 'metal-state'; | ||
import ClayComponent from 'clay-component'; | ||
import Soy from 'metal-soy'; | ||
|
||
import templates from './ClayFilterLabel.soy.js'; | ||
|
||
/** | ||
* Metal ClayFilterLabel component. | ||
* @extends ClayComponent | ||
*/ | ||
class ClayFilterLabel extends ClayComponent { | ||
/** | ||
* Continues the propagation of the filter label close clicked event | ||
* @param {!Event} event | ||
* @private | ||
* @return {Boolean} If the event has been prevented or not. | ||
*/ | ||
_handleFilterLabelCloseClicked(event) { | ||
return !this.emit({ | ||
name: 'filterLabelCloseClicked', | ||
originalEvent: event, | ||
}); | ||
} | ||
} | ||
|
||
/** | ||
* State definition. | ||
* @static | ||
* @type {!Object} | ||
*/ | ||
ClayFilterLabel.STATE = { | ||
/** | ||
* Flag to indicate if the label is closeable. | ||
* @default false | ||
* @instance | ||
* @memberof ClayLabel | ||
* @type {?bool} | ||
*/ | ||
closeable: Config.bool().value(false), | ||
|
||
/** | ||
* Data to add to the element. | ||
* @default undefined | ||
* @instance | ||
* @memberof ClayLabel | ||
* @type {?object} | ||
*/ | ||
data: Config.object(), | ||
|
||
/** | ||
* Data to add pass to label component. | ||
* @default undefined | ||
* @instance | ||
* @memberof ClayLabel | ||
* @type {?object} | ||
*/ | ||
filterData: Config.object(), | ||
|
||
/** | ||
* CSS classes to be applied to the element. | ||
* @default undefined | ||
* @instance | ||
* @memberof ClayLabel | ||
* @type {?(string|undefined)} | ||
*/ | ||
elementClasses: Config.string(), | ||
|
||
/** | ||
* The label of the badge element. | ||
* @default undefined | ||
* @instance | ||
* @memberof ClayLabel | ||
* @type {?(html|string|undefined)} | ||
*/ | ||
label: Config.any().required(), | ||
|
||
/** | ||
* The path to the SVG spritemap file containing the icons. | ||
* @default undefined | ||
* @instance | ||
* @memberof ClayLabel | ||
* @type {?(string|undefined)} | ||
*/ | ||
spritemap: Config.string().required(), | ||
}; | ||
|
||
Soy.register(ClayFilterLabel, templates); | ||
|
||
export {ClayFilterLabel}; | ||
export default ClayFilterLabel; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
import './ClayFilterLabel'; | ||
import 'clay-button'; | ||
import 'clay-label'; | ||
import 'clay-link'; | ||
import './ClayFilterLabel.soy.js'; | ||
import {Config} from 'metal-state'; | ||
import ClayComponent from 'clay-component'; | ||
import defineWebComponent from 'metal-web-component'; | ||
|
@@ -37,6 +37,9 @@ class ClayResultsBar extends ClayComponent { | |
*/ | ||
_handleFilterLabelCloseClicked(event) { | ||
return !this.emit({ | ||
data: { | ||
label: this.filterLabels[event.target.data.labelId], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I think we will likely need more than the label value, as that can be localized or who know what else. We would be better off passing down the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That is already the entire label object. |
||
}, | ||
name: 'filterLabelCloseClicked', | ||
originalEvent: event, | ||
}); | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This snapshot seems weird :D