opendev/gerrit
Code Issues Proposed changes

Move gr-custom-plugin-header and gr-theme-api to typescript

Browse Source 
Change-Id: Ie2002bcb4d8d4c20eb762b625edbc9aae60636e9
This commit is contained in:
Tao Zhou
2020-08-05 13:06:08 +02:00
parent ccf65b0381
commit 41bc986c68
2 changed files with 59 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
polygerrit-ui/app/elements/plugins/gr-theme-api/gr-custom-plugin-header.ts
View File

@@ -14,39 +14,40 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import {PolymerElement} from '@polymer/polymer/polymer-element.js'; import {PolymerElement} from '@polymer/polymer/polymer-element';
import {html} from '@polymer/polymer/lib/utils/html-tag.js'; import {html} from '@polymer/polymer/lib/utils/html-tag';
import {customElement, property} from '@polymer/decorators';
class CustomPluginHeader extends PolymerElement { declare global {
static get is() { interface HTMLElementTagNameMap {
return 'gr-custom-plugin-header'; 'gr-custom-plugin-header': GrCustomPluginHeader;
}
static get properties() {
return {
logoUrl: String,
title: String,
};
}
static get template() {
return html`
<style>
img {
width: 1em;
height: 1em;
vertical-align: middle;
}
.title {
margin-left: var(--spacing-xs);
}
</style>
<span>
<img src="[[logoUrl]]" hidden\$="[[!logoUrl]]">
<span class="title">[[title]]</span>
</span>
`;
} }
} }
customElements.define(CustomPluginHeader.is, CustomPluginHeader); @customElement('gr-custom-plugin-header')
export class GrCustomPluginHeader extends PolymerElement {
@property({type: String})
logoUrl = '';
@property({type: String})
title = '';
static get template() {
return html`
<style>
img {
width: 1em;
height: 1em;
vertical-align: middle;
}
.title {
margin-left: var(--spacing-xs);
}
</style>
<span>
<img src="[[logoUrl]]" hidden$="[[!logoUrl]]" />
<span class="title">[[title]]</span>
</span>
`;
}
}

40
polygerrit-ui/app/elements/plugins/gr-theme-api/gr-theme-api.ts
View File

@@ -14,21 +14,33 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import './gr-custom-plugin-header.js'; import './gr-custom-plugin-header';
import {GrCustomPluginHeader} from './gr-custom-plugin-header';
/** @constructor */ // TODO(TS): replace with Plugin once gr-public-js-api migrated
export function GrThemeApi(plugin) { interface PluginApi {
this.plugin = plugin; hook(
endpointName: string,
option: {replace?: boolean}
): {
onAttached(callback: (el: Element) => void): void;
};
} }
GrThemeApi.prototype.setHeaderLogoAndTitle = function(logoUrl, title) { /**
this.plugin.hook('header-title', {replace: true}).onAttached( * Defines api for theme, can be used to set header logo and title.
element => { */
const customHeader = export class GrThemeApi {
document.createElement('gr-custom-plugin-header'); constructor(private readonly plugin: PluginApi) {}
customHeader.logoUrl = logoUrl;
customHeader.title = title;
element.appendChild(customHeader);
});
};
setHeaderLogoAndTitle(logoUrl: string, title: string) {
this.plugin.hook('header-title', {replace: true}).onAttached(element => {
const customHeader: GrCustomPluginHeader = document.createElement(
'gr-custom-plugin-header'
);
customHeader.logoUrl = logoUrl;
customHeader.title = title;
element.appendChild(customHeader);
});
}
}