-
Notifications
You must be signed in to change notification settings - Fork 4
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
fix: switch back link to use link icon #156
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -133,10 +133,6 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) { | |
visibility: hidden; | ||
} | ||
|
||
d2l-navigation-link-back { | ||
--d2l-navigation-link-back-left-padding: 12px; | ||
} | ||
|
||
.d2l-navigation-immersive-spacing { | ||
height: calc(var(--d2l-navigation-immersive-height-main) + 5px); | ||
position: unset; | ||
|
@@ -179,10 +175,6 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) { | |
margin: 0 18px; | ||
padding: 0 18px; | ||
} | ||
d2l-navigation-link-back { | ||
--d2l-navigation-link-back-left-padding: 6px; | ||
margin: 0 | ||
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. No margin was set, so this was doing nothing. |
||
} | ||
} | ||
|
||
</style> | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,82 +1,39 @@ | ||
import './d2l-navigation-link.js'; | ||
import '@brightspace-ui/core/components/icons/icon.js'; | ||
import '@brightspace-ui/polymer-behaviors/d2l-focusable-behavior.js'; | ||
import '@brightspace-ui/localize-behavior/d2l-localize-behavior.js'; | ||
import './d2l-navigation-link-icon.js'; | ||
import { css, html, LitElement } from 'lit'; | ||
import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js'; | ||
import { LocalizeNavigationElement } from './components/localize-navigation-element.js'; | ||
|
||
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js'; | ||
import { mixinBehaviors } from '@polymer/polymer/lib/legacy/class.js'; | ||
/** | ||
`d2l-navigation-link-back` | ||
Polymer-based web component for the back button used in the navigational header. | ||
|
||
@demo demo/d2l-navigation-button.html d2l-navigation-link-back | ||
*/ | ||
class D2LNavigationLinkBack extends mixinBehaviors([D2L.PolymerBehaviors.FocusableBehavior, | ||
D2L.PolymerBehaviors.LocalizeBehavior], PolymerElement) { | ||
class NavigationLinkBack extends LocalizeNavigationElement(FocusMixin(LitElement)) { | ||
|
||
static get properties() { | ||
return { | ||
text: { | ||
type: String, | ||
value: null | ||
}, | ||
href: { | ||
type: String | ||
}, | ||
resources: { | ||
value: function() { | ||
return { | ||
'ar': { 'back': 'العودة' }, | ||
'de': { 'back': 'Zurück' }, | ||
'en': { 'back': 'Back' }, | ||
'es': { 'back': 'Volver' }, | ||
'fr': { 'back': 'Précédent' }, | ||
'ja': { 'back': '戻る' }, | ||
'ko': { 'back': '뒤로' }, | ||
'nl': { 'back': 'Terug' }, | ||
'pt': { 'back': 'Voltar' }, | ||
'sv': { 'back': 'Tillbaka' }, | ||
'tr': { 'back': 'Geri' }, | ||
'zh': { 'back': '返回' }, | ||
'zh-TW': { 'back': '返回' } | ||
}; | ||
} | ||
} | ||
text: { type: String }, | ||
href: { type: String } | ||
}; | ||
} | ||
static get template() { | ||
const template = html` | ||
<style> | ||
|
||
static get styles() { | ||
return css` | ||
:host { | ||
display: inline-block; | ||
height: 100%; | ||
white-space: nowrap; | ||
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. The |
||
} | ||
d2l-icon { | ||
color: inherit; | ||
} | ||
.d2l-navigation-link-back-text { | ||
padding-left: var(--d2l-navigation-link-back-left-padding, 5px); | ||
} | ||
:host(:dir(rtl)) .d2l-navigation-link-back-text { | ||
padding-left: 0; | ||
padding-right: var(--d2l-navigation-link-back-left-padding, 5px); | ||
:host([hidden]) { | ||
display: none; | ||
} | ||
</style> | ||
<d2l-navigation-link href="[[href]]" class="d2l-focusable" text="[[_getDisplayText(text, localize)]]"> | ||
<d2l-icon icon="tier1:chevron-left"></d2l-icon> | ||
<span class="d2l-navigation-link-back-text">[[_getDisplayText(text, localize)]]</span> | ||
</d2l-navigation-link> | ||
`; | ||
template.setAttribute('strip-whitespace', ''); | ||
return template; | ||
} | ||
|
||
_getDisplayText(text, localize) { | ||
if (text === undefined || text === null) { | ||
return localize('back'); | ||
} | ||
return text; | ||
static get focusElementSelector() { | ||
return 'd2l-navigation-link-icon'; | ||
} | ||
|
||
render() { | ||
const href = this.href ? this.href : 'javascript:void(0);'; // backwards-compatible for uses before missing "href" threw exception | ||
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 was hoping to avoid this, but there are quite a few places (including the LMS) that are abusing it. |
||
const text = this.text ? this.text : this.localize('back'); | ||
return html`<d2l-navigation-link-icon href="${href}" icon="tier1:chevron-left" text="${text}"></d2l-navigation-link-icon>`; | ||
} | ||
|
||
} | ||
customElements.define('d2l-navigation-link-back', D2LNavigationLinkBack); | ||
|
||
customElements.define('d2l-navigation-link-back', NavigationLinkBack); |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -30,6 +30,7 @@ export const highlightLinkStyles = css` | |
position: relative; | ||
text-decoration: none; | ||
vertical-align: middle; | ||
white-space: nowrap; | ||
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. This should have always been here, to avoid text/icon wrapping onto separate lines. |
||
} | ||
a:hover, | ||
a:focus { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "العودة", | ||
"next": "التالي", | ||
"previous": "السابق" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Back", | ||
"next": "Next", | ||
"previous": "Previous" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Back", | ||
"next": "Next", | ||
"previous": "Previous" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Zurück", | ||
"next": "Next", | ||
"previous": "Previous" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Back", | ||
"next": "Next", | ||
"previous": "Previous" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Volver", | ||
"next": "Siguiente", | ||
"previous": "Anterior" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Volver", | ||
"next": "Siguiente", | ||
"previous": "Anterior" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Précédent", | ||
"next": "Suivant", | ||
"previous": "Précédent" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Précédent", | ||
"next": "Suivant", | ||
"previous": "Précédent" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Back", | ||
"next": "Next", | ||
"previous": "Previous" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "戻る", | ||
"next": "Next", | ||
"previous": "Previous" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "뒤로", | ||
"next": "다음", | ||
"previous": "이전" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Terug", | ||
"next": "Next", | ||
"previous": "Previous" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Voltar", | ||
"next": "Próximo", | ||
"previous": "Anterior" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Tillbaka", | ||
"next": "Nästa", | ||
"previous": "Föregående" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "Geri", | ||
"next": "Sonraki", | ||
"previous": "Önceki" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "返回", | ||
"next": "下一页", | ||
"previous": "上一个" | ||
}; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
/* eslint quotes: 0 */ | ||
|
||
export default { | ||
"back": "返回", | ||
"next": "下一個", | ||
"previous": "上一個" | ||
}; |
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 was the only place overriding this padding value -- I checked with Jeff and he saw no need to do this.