mirrors/zotero
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Remove shadow root from PublicationsLicenseInfo #3082

Browse source 
* Fix legacy css path
 * Rename license-info.scss -> publicationsLicenseInfo.scss to match element name
This commit is contained in:
Tom Najdek 2023-04-26 15:15:49 +02:00
parent 842f474939
commit a8c30362a1
No known key found for this signature in database
GPG key ID: EEC61A7B4C667D77
5 changed files with 51 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
chrome/content/zotero/elements/publicationsLicenseInfo.js
View file

@ -123,22 +123,22 @@
} }
get licenseName() { get licenseName() {
return this.shadowRoot.querySelector('.license-name').getAttribute('label') return this.querySelector('.license-name').getAttribute('label')
? this.shadowRoot.querySelector('.license-name').getAttribute('label') ? this.querySelector('.license-name').getAttribute('label')
: this.shadowRoot.querySelector('.license-name').textContent; : this.querySelector('.license-name').textContent;
} }
async init() { async init() {
this.license = this.getAttribute('license'); this.license = this.getAttribute('license');
this.shadowRoot.getElementById('license-info').addEventListener('click', this.onURLInteract.bind(this)); this.querySelector('#license-info').addEventListener('click', this.onURLInteract.bind(this));
this.shadowRoot.getElementById('license-info').addEventListener('keydown', this.onURLInteract.bind(this)); this.querySelector('#license-info').addEventListener('keydown', this.onURLInteract.bind(this));
} }
update() { update() {
const { url, name, img, id } = getLicenseData(this.license); const { url, name, img, id } = getLicenseData(this.license);
const licenseInfoEl = makeLicenseInfo(url, name, img, id); const licenseInfoEl = makeLicenseInfo(url, name, img, id);
const licenseMoreEl = makeLicenseMoreInfo(this.license); const licenseMoreEl = makeLicenseMoreInfo(this.license);
this.shadowRoot.getElementById('license-info').replaceChildren(licenseInfoEl, licenseMoreEl); this.querySelector('#license-info').replaceChildren(licenseInfoEl, licenseMoreEl);
} }
onURLInteract(ev) { onURLInteract(ev) {

2
chrome/content/zotero/publicationsDialog.xhtml
View file

@ -26,7 +26,7 @@
<!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd"> <!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?> <?xml-stylesheet href="chrome://zotero-platform/content/zotero.css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml"

1
scss/_zotero.scss
View file

@ -55,6 +55,7 @@
@import "elements/itemBox"; @import "elements/itemBox";
@import "elements/noteEditor"; @import "elements/noteEditor";
@import "elements/notesBox"; @import "elements/notesBox";
@import "elements/publicationsLicenseInfo";
@import "elements/quickSearchTextbox"; @import "elements/quickSearchTextbox";
@import "elements/richlistCheckbox"; @import "elements/richlistCheckbox";
@import "elements/styleConfigurator"; @import "elements/styleConfigurator";

43
scss/elements/_publicationsLicenseInfo.scss Normal file
View file

@ -0,0 +1,43 @@
publications-license-info {
display: block;
width: 100%;
.license-info {
display: flex;
padding: var(--license-info-padding, 0 20px);
margin: var(--license-info-margin, 1em 0 0 0);
.license-icon {
flex: 0 1 auto;
>img {
max-width: var(--license-icon-max-width, 88px);
}
}
.license-name {
margin-left: var(--license-info-name-margin-left, 12px);
flex: 1 1 auto;
display: flex;
align-items: center;
}
}
.license-more-info {
margin: var(--license-more-info-margin, 1.5em 0 0 0);
font-size: var(--license-more-info-font-size, 11px);
}
a {
display: inline;
color: var(--license-info-link-color, -moz-nativehyperlinktext);
text-decoration: var(--license-info-link-decoration, none);
&:hover,
&:active,
&:focus {
outline: none;
text-decoration: var(--license-info-link-decoration-hover, $link-hover-decoration);
}
}
}

50
scss/elements/license-info.scss
View file

@ -1,50 +0,0 @@
@import "../abstracts/variables";
@import "../abstracts/functions";
@import "../abstracts/mixins";
@import "../abstracts/placeholders";
@import "../abstracts/utilities";
@import "../themes/light";
:host {
display: block;
width: 100%;
}
.license-info {
display: flex;
padding: var(--license-info-padding, 0 20px);
margin: var(--license-info-margin, 1em 0 0 0);
.license-icon {
flex: 0 1 auto;
> img {
max-width: var(--license-icon-max-width, 88px);
}
}
.license-name {
margin-left: var(--license-info-name-margin-left, 12px);
flex: 1 1 auto;
display: flex;
align-items: center;
}
}
.license-more-info {
margin: var(--license-more-info-margin, 1.5em 0 0 0);
font-size: var(--license-more-info-font-size, 11px);
}
a {
display: inline;
color: var(--license-info-link-color, -moz-nativehyperlinktext);
text-decoration: var(--license-info-link-decoration, none);
&:hover,
&:active,
&:focus {
outline: none;
text-decoration: var(--license-info-link-decoration-hover, $link-hover-decoration);
}
}