70 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
			
		
		
	
	
			70 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Plaintext
		
	
	
	
	
	
= 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
 | 
						|
style modules] for UI CSS-based customization.
 | 
						|
 | 
						|
PolyGerrit UI implements number of styling endpoints, which apply CSS mixins
 | 
						|
link:https://tabatkins.github.io/specs/css-apply-rule/[using @apply] to its
 | 
						|
direct contents.
 | 
						|
 | 
						|
NOTE: Only items (i.e. CSS properties and mixin targets) documented here are
 | 
						|
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
 | 
						|
a bug] stating your use case to track and maintain for future releases.
 | 
						|
 | 
						|
Plugins should be html-based and imported following PolyGerrit's
 | 
						|
link:pg-plugin-dev.html#loading[dev guide].
 | 
						|
 | 
						|
Plugins should provide Style Module, for example:
 | 
						|
 | 
						|
``` html
 | 
						|
  <dom-module id="some-style">
 | 
						|
    <style>
 | 
						|
      :root {
 | 
						|
        --css-mixin-name: {
 | 
						|
          property: value;
 | 
						|
        }
 | 
						|
      }
 | 
						|
    </style>
 | 
						|
  </dom-module>
 | 
						|
```
 | 
						|
 | 
						|
Plugins should register style module with a styling endpoint using
 | 
						|
`Plugin.prototype.registerStyleModule(endpointName, styleModuleName)`, for
 | 
						|
example:
 | 
						|
 | 
						|
``` js
 | 
						|
  Gerrit.install(function(plugin) {
 | 
						|
    plugin.registerStyleModule('some-endpoint', 'some-style');
 | 
						|
  });
 | 
						|
```
 | 
						|
 | 
						|
== Available styling endpoints
 | 
						|
=== change-metadata
 | 
						|
Following custom CSS mixins are recognized:
 | 
						|
 | 
						|
* `--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
 | 
						|
support via integration test]:
 | 
						|
 | 
						|
* `display`
 | 
						|
+
 | 
						|
can be set to `none` to hide a section.
 |