2019-12-13 10:42:46 +01:00
|
|
|
:linkattrs:
|
2017-10-02 11:51:41 +01:00
|
|
|
= Gerrit Code Review - PolyGerrit Plugin Styling
|
|
|
|
|
|
|
|
== Plugin styles
|
|
|
|
|
|
|
|
Plugins may provide
|
|
|
|
link:https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules[Polymer
|
2019-12-10 18:01:31 +01:00
|
|
|
style modules,role=external,window=_blank] for UI CSS-based customization.
|
2017-10-02 11:51:41 +01:00
|
|
|
|
|
|
|
PolyGerrit UI implements number of styling endpoints, which apply CSS mixins
|
2019-12-10 18:01:31 +01:00
|
|
|
link:https://tabatkins.github.io/specs/css-apply-rule/[using @apply,role=external,window=_blank] to its
|
2017-10-02 11:51:41 +01:00
|
|
|
direct contents.
|
|
|
|
|
2017-12-05 11:11:09 -08:00
|
|
|
NOTE: Only items (i.e. CSS properties and mixin targets) documented here are
|
2017-10-02 11:51:41 +01:00
|
|
|
guaranteed to work in the long term, since they are covered by integration
|
|
|
|
tests. + When there is a need to add new property or endpoint, please
|
|
|
|
link:https://bugs.chromium.org/p/gerrit/issues/entry?template=PolyGerrit%20Issue[file
|
2019-12-10 18:01:31 +01:00
|
|
|
a bug,role=external,window=_blank] stating your use case to track and maintain for future releases.
|
2017-10-02 11:51:41 +01:00
|
|
|
|
2017-12-05 11:11:09 -08:00
|
|
|
Plugins should be html-based and imported following PolyGerrit's
|
2017-10-02 11:51:41 +01:00
|
|
|
link:pg-plugin-dev.html#loading[dev guide].
|
|
|
|
|
2017-12-05 11:11:09 -08:00
|
|
|
Plugins should provide Style Module, for example:
|
2017-10-02 11:51:41 +01:00
|
|
|
|
|
|
|
``` html
|
|
|
|
<dom-module id="some-style">
|
2019-07-02 21:37:09 +02:00
|
|
|
<template>
|
|
|
|
<style>
|
2019-07-08 12:15:09 +02:00
|
|
|
html {
|
2019-07-02 21:37:09 +02:00
|
|
|
--css-mixin-name: {
|
|
|
|
property: value;
|
|
|
|
}
|
2017-10-02 11:51:41 +01:00
|
|
|
}
|
2019-07-02 21:37:09 +02:00
|
|
|
</style>
|
|
|
|
</template>
|
2017-10-02 11:51:41 +01:00
|
|
|
</dom-module>
|
|
|
|
```
|
|
|
|
|
2017-12-05 11:11:09 -08:00
|
|
|
Plugins should register style module with a styling endpoint using
|
2017-10-02 11:51:41 +01:00
|
|
|
`Plugin.prototype.registerStyleModule(endpointName, styleModuleName)`, for
|
|
|
|
example:
|
|
|
|
|
|
|
|
``` js
|
|
|
|
Gerrit.install(function(plugin) {
|
|
|
|
plugin.registerStyleModule('some-endpoint', 'some-style');
|
|
|
|
});
|
|
|
|
```
|
|
|
|
|
|
|
|
== Available styling endpoints
|
|
|
|
=== change-metadata
|
2017-12-05 11:11:09 -08:00
|
|
|
Following custom CSS mixins are recognized:
|
2017-10-02 11:51:41 +01:00
|
|
|
|
|
|
|
* `--change-metadata-assignee`
|
|
|
|
+
|
|
|
|
is applied to `gr-change-metadata section.assignee`
|
|
|
|
* `--change-metadata-label-status`
|
|
|
|
+
|
|
|
|
is applied to `gr-change-metadata section.labelStatus`
|
|
|
|
* `--change-metadata-strategy`
|
|
|
|
+
|
|
|
|
is applied to `gr-change-metadata section.strategy`
|
|
|
|
* `--change-metadata-topic`
|
|
|
|
+
|
|
|
|
is applied to `gr-change-metadata section.topic`
|
|
|
|
|
|
|
|
Following CSS properties have
|
|
|
|
link:https://gerrit.googlesource.com/gerrit/+/master/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata-it_test.html[long-term
|
2019-12-10 18:01:31 +01:00
|
|
|
support via integration test,role=external,window=_blank]:
|
2017-10-02 11:51:41 +01:00
|
|
|
|
|
|
|
* `display`
|
|
|
|
+
|
|
|
|
can be set to `none` to hide a section.
|