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

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

@@ -14,20 +14,23 @@
* 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() { @customElement('gr-custom-plugin-header')
return { export class GrCustomPluginHeader extends PolymerElement {
logoUrl: String, @property({type: String})
title: String, logoUrl = '';
};
} @property({type: String})
title = '';
static get template() { static get template() {
return html` return html`
@@ -42,11 +45,9 @@ class CustomPluginHeader extends PolymerElement {
} }
</style> </style>
<span> <span>
<img src="[[logoUrl]]" hidden\$="[[!logoUrl]]"> <img src="[[logoUrl]]" hidden$="[[!logoUrl]]" />
<span class="title">[[title]]</span> <span class="title">[[title]]</span>
</span> </span>
`; `;
} }
} }
customElements.define(CustomPluginHeader.is, CustomPluginHeader);

34
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) {}
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.logoUrl = logoUrl;
customHeader.title = title; customHeader.title = title;
element.appendChild(customHeader); element.appendChild(customHeader);
}); });
}; }
}