Change all static Lit `styles` to getters
We have not fully understood why, but we problems with `styles` being
after optimized compile. This seems to fix the issue.
Release-Notes: skip
Change-Id: I69b565fae7409dce2730b9ed2d098a9124fe3a54
diff --git a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
index ff7a528..0e75b84 100644
--- a/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
+++ b/polygerrit-ui/app/elements/admin/gr-permission/gr-permission.ts
@@ -142,65 +142,67 @@
}
}
- static override styles = [
- sharedStyles,
- paperStyles,
- formStyles,
- menuPageStyles,
- css`
- :host {
- display: block;
- margin-bottom: var(--spacing-m);
- }
- .header {
- align-items: baseline;
- display: flex;
- justify-content: space-between;
- margin: var(--spacing-s) var(--spacing-m);
- }
- .rules {
- background: var(--table-header-background-color);
- border: 1px solid var(--border-color);
- border-bottom: 0;
- }
- .editing .rules {
- border-bottom: 1px solid var(--border-color);
- }
- .title {
- margin-bottom: var(--spacing-s);
- }
- #addRule,
- #removeBtn {
- display: none;
- }
- .right {
- display: flex;
- align-items: center;
- }
- .editing #removeBtn {
- display: block;
- margin-left: var(--spacing-xl);
- }
- .editing #addRule {
- display: block;
- padding: var(--spacing-m);
- }
- #deletedContainer,
- .deleted #mainContainer {
- display: none;
- }
- .deleted #deletedContainer {
- align-items: baseline;
- border: 1px solid var(--border-color);
- display: flex;
- justify-content: space-between;
- padding: var(--spacing-m);
- }
- #mainContainer {
- display: block;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ paperStyles,
+ formStyles,
+ menuPageStyles,
+ css`
+ :host {
+ display: block;
+ margin-bottom: var(--spacing-m);
+ }
+ .header {
+ align-items: baseline;
+ display: flex;
+ justify-content: space-between;
+ margin: var(--spacing-s) var(--spacing-m);
+ }
+ .rules {
+ background: var(--table-header-background-color);
+ border: 1px solid var(--border-color);
+ border-bottom: 0;
+ }
+ .editing .rules {
+ border-bottom: 1px solid var(--border-color);
+ }
+ .title {
+ margin-bottom: var(--spacing-s);
+ }
+ #addRule,
+ #removeBtn {
+ display: none;
+ }
+ .right {
+ display: flex;
+ align-items: center;
+ }
+ .editing #removeBtn {
+ display: block;
+ margin-left: var(--spacing-xl);
+ }
+ .editing #addRule {
+ display: block;
+ padding: var(--spacing-m);
+ }
+ #deletedContainer,
+ .deleted #mainContainer {
+ display: none;
+ }
+ .deleted #deletedContainer {
+ align-items: baseline;
+ border: 1px solid var(--border-color);
+ display: flex;
+ justify-content: space-between;
+ padding: var(--spacing-m);
+ }
+ #mainContainer {
+ display: block;
+ }
+ `,
+ ];
+ }
override render() {
if (!this.section || !this.permission) {
diff --git a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
index 1cb25ea..8d72a97 100644
--- a/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
+++ b/polygerrit-ui/app/elements/change/gr-change-metadata/gr-change-metadata.ts
@@ -212,104 +212,106 @@
this.queryHashtag = (input: string) => this.getHashtagSuggestions(input);
}
- static override styles = [
- sharedStyles,
- fontStyles,
- changeMetadataStyles,
- css`
- :host {
- display: table;
- }
- gr-submit-requirements {
- --requirements-horizontal-padding: var(--metadata-horizontal-padding);
- }
- gr-editable-label {
- max-width: 9em;
- }
- gr-weblink {
- display: block;
- }
- gr-account-chip[disabled],
- gr-linked-chip[disabled] {
- opacity: 0;
- pointer-events: none;
- }
- .hashtagChip {
- padding-bottom: var(--spacing-s);
- }
- /* consistent with section .title, .value */
- .hashtagChip:not(last-of-type) {
- padding-bottom: var(--spacing-s);
- }
- .hashtagChip:last-of-type {
- display: inline;
- vertical-align: top;
- }
- .parentList.merge {
- list-style-type: decimal;
- padding-left: var(--spacing-l);
- }
- .parentList gr-commit-info {
- display: inline-block;
- }
- .hideDisplay,
- #parentNotCurrentMessage {
- display: none;
- }
- .icon {
- margin: -3px 0;
- }
- .icon.help,
- .icon.notTrusted {
- color: var(--warning-foreground);
- }
- .icon.invalid {
- color: var(--negative-red-text-color);
- }
- .icon.trusted {
- color: var(--positive-green-text-color);
- }
- .parentList.notCurrent.nonMerge #parentNotCurrentMessage {
- --arrow-color: var(--warning-foreground);
- display: inline-block;
- }
- .oldSeparatedSection {
- margin-top: var(--spacing-l);
- padding: var(--spacing-m) 0;
- }
- .separatedSection {
- padding: var(--spacing-m) 0;
- }
- .hashtag gr-linked-chip,
- .topic gr-linked-chip {
- --linked-chip-text-color: var(--link-color);
- }
- gr-reviewer-list {
- --account-max-length: 100px;
- max-width: 285px;
- }
- .metadata-title {
- color: var(--deemphasized-text-color);
- padding-left: var(--metadata-horizontal-padding);
- }
- .metadata-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- /* The goal is to achieve alignment of the owner account chip and the
+ static override get styles() {
+ return [
+ sharedStyles,
+ fontStyles,
+ changeMetadataStyles,
+ css`
+ :host {
+ display: table;
+ }
+ gr-submit-requirements {
+ --requirements-horizontal-padding: var(--metadata-horizontal-padding);
+ }
+ gr-editable-label {
+ max-width: 9em;
+ }
+ gr-weblink {
+ display: block;
+ }
+ gr-account-chip[disabled],
+ gr-linked-chip[disabled] {
+ opacity: 0;
+ pointer-events: none;
+ }
+ .hashtagChip {
+ padding-bottom: var(--spacing-s);
+ }
+ /* consistent with section .title, .value */
+ .hashtagChip:not(last-of-type) {
+ padding-bottom: var(--spacing-s);
+ }
+ .hashtagChip:last-of-type {
+ display: inline;
+ vertical-align: top;
+ }
+ .parentList.merge {
+ list-style-type: decimal;
+ padding-left: var(--spacing-l);
+ }
+ .parentList gr-commit-info {
+ display: inline-block;
+ }
+ .hideDisplay,
+ #parentNotCurrentMessage {
+ display: none;
+ }
+ .icon {
+ margin: -3px 0;
+ }
+ .icon.help,
+ .icon.notTrusted {
+ color: var(--warning-foreground);
+ }
+ .icon.invalid {
+ color: var(--negative-red-text-color);
+ }
+ .icon.trusted {
+ color: var(--positive-green-text-color);
+ }
+ .parentList.notCurrent.nonMerge #parentNotCurrentMessage {
+ --arrow-color: var(--warning-foreground);
+ display: inline-block;
+ }
+ .oldSeparatedSection {
+ margin-top: var(--spacing-l);
+ padding: var(--spacing-m) 0;
+ }
+ .separatedSection {
+ padding: var(--spacing-m) 0;
+ }
+ .hashtag gr-linked-chip,
+ .topic gr-linked-chip {
+ --linked-chip-text-color: var(--link-color);
+ }
+ gr-reviewer-list {
+ --account-max-length: 100px;
+ max-width: 285px;
+ }
+ .metadata-title {
+ color: var(--deemphasized-text-color);
+ padding-left: var(--metadata-horizontal-padding);
+ }
+ .metadata-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ /* The goal is to achieve alignment of the owner account chip and the
commit message box. Their top border should be on the same line. */
- margin-bottom: var(--spacing-s);
- }
- .show-all-button gr-icon {
- color: inherit;
- font-size: 18px;
- }
- gr-vote-chip {
- --gr-vote-chip-width: 14px;
- --gr-vote-chip-height: 14px;
- }
- `,
- ];
+ margin-bottom: var(--spacing-s);
+ }
+ .show-all-button gr-icon {
+ color: inherit;
+ font-size: 18px;
+ }
+ gr-vote-chip {
+ --gr-vote-chip-width: 14px;
+ --gr-vote-chip-height: 14px;
+ }
+ `,
+ ];
+ }
override render() {
if (!this.change) return nothing;
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts
index 7723327..77a2cf5 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-conflict-dialog/gr-confirm-cherrypick-conflict-dialog.ts
@@ -27,23 +27,25 @@
* @event cancel
*/
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- .main {
- display: flex;
- flex-direction: column;
- width: 100%;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ .main {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
index 891209e..080eb0c 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-cherrypick-dialog/gr-confirm-cherrypick-dialog.ts
@@ -154,75 +154,77 @@
}
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- label {
- cursor: pointer;
- }
- .main {
- display: flex;
- flex-direction: column;
- width: 100%;
- }
- .main label,
- .main input[type='text'] {
- display: block;
- width: 100%;
- }
- iron-autogrow-textarea {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- width: 73ch; /* Add a char to account for the border. */
- }
- .cherryPickTopicLayout {
- display: flex;
- align-items: center;
- margin-bottom: var(--spacing-m);
- }
- .cherryPickSingleChange,
- .cherryPickTopic {
- margin-left: var(--spacing-m);
- }
- .cherry-pick-topic-message {
- margin-bottom: var(--spacing-m);
- }
- label[for='messageInput'],
- label[for='baseInput'] {
- margin-top: var(--spacing-m);
- }
- .title {
- font-weight: var(--font-weight-bold);
- }
- tr > td {
- padding: var(--spacing-m);
- }
- th {
- color: var(--deemphasized-text-color);
- }
- table {
- border-collapse: collapse;
- }
- tr {
- border-bottom: 1px solid var(--border-color);
- }
- .error {
- color: var(--error-text-color);
- }
- .error-message {
- color: var(--error-text-color);
- margin: var(--spacing-m) 0 var(--spacing-m) 0;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ label {
+ cursor: pointer;
+ }
+ .main {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ }
+ .main label,
+ .main input[type='text'] {
+ display: block;
+ width: 100%;
+ }
+ iron-autogrow-textarea {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ width: 73ch; /* Add a char to account for the border. */
+ }
+ .cherryPickTopicLayout {
+ display: flex;
+ align-items: center;
+ margin-bottom: var(--spacing-m);
+ }
+ .cherryPickSingleChange,
+ .cherryPickTopic {
+ margin-left: var(--spacing-m);
+ }
+ .cherry-pick-topic-message {
+ margin-bottom: var(--spacing-m);
+ }
+ label[for='messageInput'],
+ label[for='baseInput'] {
+ margin-top: var(--spacing-m);
+ }
+ .title {
+ font-weight: var(--font-weight-bold);
+ }
+ tr > td {
+ padding: var(--spacing-m);
+ }
+ th {
+ color: var(--deemphasized-text-color);
+ }
+ table {
+ border-collapse: collapse;
+ }
+ tr {
+ border-bottom: 1px solid var(--border-color);
+ }
+ .error {
+ color: var(--error-text-color);
+ }
+ .error-message {
+ color: var(--error-text-color);
+ margin: var(--spacing-m) 0 var(--spacing-m) 0;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
index 6ad416e..7bbfd93 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
@@ -160,39 +160,41 @@
}
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- width: 30em;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- label {
- cursor: pointer;
- }
- .message {
- font-style: italic;
- }
- .parentRevisionContainer label,
- .parentRevisionContainer input[type='text'] {
- display: block;
- width: 100%;
- }
- .rebaseCheckbox {
- margin-top: var(--spacing-m);
- }
- .rebaseOption {
- margin: var(--spacing-m) 0;
- }
- .rebaseOnBehalfMsg {
- margin-top: var(--spacing-m);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ width: 30em;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ label {
+ cursor: pointer;
+ }
+ .message {
+ font-style: italic;
+ }
+ .parentRevisionContainer label,
+ .parentRevisionContainer input[type='text'] {
+ display: block;
+ width: 100%;
+ }
+ .rebaseCheckbox {
+ margin-top: var(--spacing-m);
+ }
+ .rebaseOption {
+ margin: var(--spacing-m) 0;
+ }
+ .rebaseOnBehalfMsg {
+ margin-top: var(--spacing-m);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts
index e421c9c..c01d89f 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-revert-dialog/gr-confirm-revert-dialog.ts
@@ -66,43 +66,45 @@
private readonly getPluginLoader = resolve(this, pluginLoaderToken);
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: block;
- }
- :host([disabled]) {
- opacity: 0.5;
- pointer-events: none;
- }
- label {
- cursor: pointer;
- display: block;
- width: 100%;
- }
- .revertSubmissionLayout {
- display: flex;
- align-items: center;
- }
- .label {
- margin-left: var(--spacing-m);
- }
- iron-autogrow-textarea {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- width: 73ch; /* Add a char to account for the border. */
- }
- .error {
- color: var(--error-text-color);
- margin-bottom: var(--spacing-m);
- }
- label[for='messageInput'] {
- margin-top: var(--spacing-m);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: block;
+ }
+ :host([disabled]) {
+ opacity: 0.5;
+ pointer-events: none;
+ }
+ label {
+ cursor: pointer;
+ display: block;
+ width: 100%;
+ }
+ .revertSubmissionLayout {
+ display: flex;
+ align-items: center;
+ }
+ .label {
+ margin-left: var(--spacing-m);
+ }
+ iron-autogrow-textarea {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ width: 73ch; /* Add a char to account for the border. */
+ }
+ .error {
+ color: var(--error-text-color);
+ margin-bottom: var(--spacing-m);
+ }
+ label[for='messageInput'] {
+ margin-top: var(--spacing-m);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
index adea275..f6f3706 100644
--- a/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
+++ b/polygerrit-ui/app/elements/change/gr-file-list-header/gr-file-list-header.ts
@@ -139,99 +139,101 @@
);
}
- static override styles = [
- sharedStyles,
- css`
- .prefsButton {
- float: right;
- }
- .patchInfoOldPatchSet.patchInfo-header {
- background-color: var(--emphasis-color);
- }
- .patchInfo-header {
- align-items: center;
- display: flex;
- padding: var(--spacing-s) var(--spacing-l);
- }
- .patchInfo-left {
- align-items: baseline;
- display: flex;
- }
- .patchInfoContent {
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- }
- .latestPatchContainer a {
- text-decoration: none;
- }
- .mobile {
- display: none;
- }
- .patchInfo-header .container {
- align-items: center;
- display: flex;
- }
- .downloadContainer,
- .uploadContainer {
- margin-right: 16px;
- }
- .uploadContainer.hide {
- display: none;
- }
- .rightControls {
- align-self: flex-end;
- margin: auto 0 auto auto;
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- font-weight: var(--font-weight-normal);
- justify-content: flex-end;
- }
- #collapseBtn,
- .allExpanded #expandBtn,
- .fileViewActions {
- display: none;
- }
- .someExpanded #expandBtn {
- margin-right: 8px;
- }
- .someExpanded #collapseBtn,
- .allExpanded #collapseBtn,
- .openFile .fileViewActions {
- align-items: center;
- display: flex;
- }
- .rightControls gr-button,
- gr-patch-range-select {
- margin: 0 -4px;
- }
- .fileViewActions gr-button {
- margin: 0;
- --gr-button-padding: 2px 4px;
- }
- .flexContainer {
- align-items: center;
- display: flex;
- }
- .label {
- font-weight: var(--font-weight-bold);
- margin-right: 24px;
- }
- gr-commit-info,
- gr-edit-controls {
- margin-right: -5px;
- }
- .fileViewActionsLabel {
- margin-right: var(--spacing-xs);
- }
- @media screen and (max-width: 50em) {
- .patchInfo-header .desktop {
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ .prefsButton {
+ float: right;
+ }
+ .patchInfoOldPatchSet.patchInfo-header {
+ background-color: var(--emphasis-color);
+ }
+ .patchInfo-header {
+ align-items: center;
+ display: flex;
+ padding: var(--spacing-s) var(--spacing-l);
+ }
+ .patchInfo-left {
+ align-items: baseline;
+ display: flex;
+ }
+ .patchInfoContent {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ .latestPatchContainer a {
+ text-decoration: none;
+ }
+ .mobile {
display: none;
}
- }
- `,
- ];
+ .patchInfo-header .container {
+ align-items: center;
+ display: flex;
+ }
+ .downloadContainer,
+ .uploadContainer {
+ margin-right: 16px;
+ }
+ .uploadContainer.hide {
+ display: none;
+ }
+ .rightControls {
+ align-self: flex-end;
+ margin: auto 0 auto auto;
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ font-weight: var(--font-weight-normal);
+ justify-content: flex-end;
+ }
+ #collapseBtn,
+ .allExpanded #expandBtn,
+ .fileViewActions {
+ display: none;
+ }
+ .someExpanded #expandBtn {
+ margin-right: 8px;
+ }
+ .someExpanded #collapseBtn,
+ .allExpanded #collapseBtn,
+ .openFile .fileViewActions {
+ align-items: center;
+ display: flex;
+ }
+ .rightControls gr-button,
+ gr-patch-range-select {
+ margin: 0 -4px;
+ }
+ .fileViewActions gr-button {
+ margin: 0;
+ --gr-button-padding: 2px 4px;
+ }
+ .flexContainer {
+ align-items: center;
+ display: flex;
+ }
+ .label {
+ font-weight: var(--font-weight-bold);
+ margin-right: 24px;
+ }
+ gr-commit-info,
+ gr-edit-controls {
+ margin-right: -5px;
+ }
+ .fileViewActionsLabel {
+ margin-right: var(--spacing-xs);
+ }
+ @media screen and (max-width: 50em) {
+ .patchInfo-header .desktop {
+ display: none;
+ }
+ }
+ `,
+ ];
+ }
override render() {
if (!this.change || !this.diffPrefs) {
diff --git a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
index f41236b..a9c472f 100644
--- a/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-reply-dialog/gr-reply-dialog.ts
@@ -354,223 +354,225 @@
private readonly shortcuts = new ShortcutController(this);
- static override styles = [
- sharedStyles,
- modalStyles,
- css`
- :host {
- background-color: var(--dialog-background-color);
- display: block;
- max-height: 90vh;
- --label-score-padding-left: var(--spacing-xl);
- }
- :host([disabled]) {
- pointer-events: none;
- }
- :host([disabled]) .container {
- opacity: 0.5;
- }
- section {
- border-top: 1px solid var(--border-color);
- flex-shrink: 0;
- padding: var(--spacing-m) var(--spacing-xl);
- width: 100%;
- }
- section.labelsContainer {
- /* We want the :hover highlight to extend to the border of the dialog. */
- padding: var(--spacing-m) 0;
- }
- .stickyBottom {
- background-color: var(--dialog-background-color);
- box-shadow: 0px 0px 8px 0px rgba(60, 64, 67, 0.15);
- margin-top: var(--spacing-s);
- bottom: 0;
- position: sticky;
- /* @see Issue 8602 */
- z-index: 1;
- }
- .stickyBottom.newReplyDialog {
- margin-top: unset;
- }
- .actions {
- display: flex;
- justify-content: space-between;
- }
- .actions .right gr-button {
- margin-left: var(--spacing-l);
- }
- .peopleContainer,
- .labelsContainer {
- flex-shrink: 0;
- }
- .peopleContainer {
- border-top: none;
- display: table;
- }
- .peopleList {
- display: flex;
- }
- .peopleListLabel {
- color: var(--deemphasized-text-color);
- margin-top: var(--spacing-xs);
- min-width: 6em;
- padding-right: var(--spacing-m);
- }
- gr-account-list {
- display: flex;
- flex-wrap: wrap;
- flex: 1;
- }
- #reviewerConfirmationModal {
- padding: var(--spacing-l);
- text-align: center;
- }
- .reviewerConfirmationButtons {
- margin-top: var(--spacing-l);
- }
- .groupName {
- font-weight: var(--font-weight-bold);
- }
- .groupSize {
- font-style: italic;
- }
- .textareaContainer {
- min-height: 12em;
- position: relative;
- }
- .newReplyDialog.textareaContainer {
- min-height: unset;
- }
- textareaContainer,
- gr-endpoint-decorator[name='reply-text'] {
- display: flex;
- width: 100%;
- }
- gr-endpoint-decorator[name='reply-text'] {
- flex-direction: column;
- }
- #checkingStatusLabel,
- #notLatestLabel {
- margin-left: var(--spacing-l);
- }
- #checkingStatusLabel {
- color: var(--deemphasized-text-color);
- font-style: italic;
- }
- #notLatestLabel,
- #savingLabel {
- color: var(--error-text-color);
- }
- #savingLabel {
- display: none;
- }
- #savingLabel.saving {
- display: inline;
- }
- #pluginMessage {
- color: var(--deemphasized-text-color);
- margin-left: var(--spacing-l);
- margin-bottom: var(--spacing-m);
- }
- #pluginMessage:empty {
- display: none;
- }
- .attention .edit-attention-button {
- vertical-align: top;
- --gr-button-padding: 0px 4px;
- }
- .attention .edit-attention-button gr-icon {
- color: inherit;
- /* The line-height:26px hack (see below) requires us to do this.
+ static override get styles() {
+ return [
+ sharedStyles,
+ modalStyles,
+ css`
+ :host {
+ background-color: var(--dialog-background-color);
+ display: block;
+ max-height: 90vh;
+ --label-score-padding-left: var(--spacing-xl);
+ }
+ :host([disabled]) {
+ pointer-events: none;
+ }
+ :host([disabled]) .container {
+ opacity: 0.5;
+ }
+ section {
+ border-top: 1px solid var(--border-color);
+ flex-shrink: 0;
+ padding: var(--spacing-m) var(--spacing-xl);
+ width: 100%;
+ }
+ section.labelsContainer {
+ /* We want the :hover highlight to extend to the border of the dialog. */
+ padding: var(--spacing-m) 0;
+ }
+ .stickyBottom {
+ background-color: var(--dialog-background-color);
+ box-shadow: 0px 0px 8px 0px rgba(60, 64, 67, 0.15);
+ margin-top: var(--spacing-s);
+ bottom: 0;
+ position: sticky;
+ /* @see Issue 8602 */
+ z-index: 1;
+ }
+ .stickyBottom.newReplyDialog {
+ margin-top: unset;
+ }
+ .actions {
+ display: flex;
+ justify-content: space-between;
+ }
+ .actions .right gr-button {
+ margin-left: var(--spacing-l);
+ }
+ .peopleContainer,
+ .labelsContainer {
+ flex-shrink: 0;
+ }
+ .peopleContainer {
+ border-top: none;
+ display: table;
+ }
+ .peopleList {
+ display: flex;
+ }
+ .peopleListLabel {
+ color: var(--deemphasized-text-color);
+ margin-top: var(--spacing-xs);
+ min-width: 6em;
+ padding-right: var(--spacing-m);
+ }
+ gr-account-list {
+ display: flex;
+ flex-wrap: wrap;
+ flex: 1;
+ }
+ #reviewerConfirmationModal {
+ padding: var(--spacing-l);
+ text-align: center;
+ }
+ .reviewerConfirmationButtons {
+ margin-top: var(--spacing-l);
+ }
+ .groupName {
+ font-weight: var(--font-weight-bold);
+ }
+ .groupSize {
+ font-style: italic;
+ }
+ .textareaContainer {
+ min-height: 12em;
+ position: relative;
+ }
+ .newReplyDialog.textareaContainer {
+ min-height: unset;
+ }
+ textareaContainer,
+ gr-endpoint-decorator[name='reply-text'] {
+ display: flex;
+ width: 100%;
+ }
+ gr-endpoint-decorator[name='reply-text'] {
+ flex-direction: column;
+ }
+ #checkingStatusLabel,
+ #notLatestLabel {
+ margin-left: var(--spacing-l);
+ }
+ #checkingStatusLabel {
+ color: var(--deemphasized-text-color);
+ font-style: italic;
+ }
+ #notLatestLabel,
+ #savingLabel {
+ color: var(--error-text-color);
+ }
+ #savingLabel {
+ display: none;
+ }
+ #savingLabel.saving {
+ display: inline;
+ }
+ #pluginMessage {
+ color: var(--deemphasized-text-color);
+ margin-left: var(--spacing-l);
+ margin-bottom: var(--spacing-m);
+ }
+ #pluginMessage:empty {
+ display: none;
+ }
+ .attention .edit-attention-button {
+ vertical-align: top;
+ --gr-button-padding: 0px 4px;
+ }
+ .attention .edit-attention-button gr-icon {
+ color: inherit;
+ /* The line-height:26px hack (see below) requires us to do this.
Normally the gr-icon would account for a proper positioning
within the standard line-height:20px context. */
- top: 5px;
- }
- .attention a,
- .attention-detail a {
- text-decoration: none;
- }
- .attentionSummary {
- display: flex;
- justify-content: space-between;
- }
- .attentionSummary {
- /* The account label for selection is misbehaving currently: It consumes
+ top: 5px;
+ }
+ .attention a,
+ .attention-detail a {
+ text-decoration: none;
+ }
+ .attentionSummary {
+ display: flex;
+ justify-content: space-between;
+ }
+ .attentionSummary {
+ /* The account label for selection is misbehaving currently: It consumes
26px height instead of 20px, which is the default line-height and thus
the max that can be nicely fit into an inline layout flow. We
acknowledge that using a fixed 26px value here is a hack and not a
great solution. */
- line-height: 26px;
- }
- .attentionSummary gr-account-label,
- .attention-detail gr-account-label {
- --account-max-length: 120px;
- display: inline-block;
- padding: var(--spacing-xs) var(--spacing-m);
- user-select: none;
- --label-border-radius: 8px;
- }
- .attentionSummary gr-account-label {
- margin: 0 var(--spacing-xs);
- line-height: var(--line-height-normal);
- vertical-align: top;
- }
- .attention-detail .peopleListValues {
- line-height: calc(var(--line-height-normal) + 10px);
- }
- .attention-detail gr-account-label {
- line-height: var(--line-height-normal);
- }
- .attentionSummary gr-account-label:focus,
- .attention-detail gr-account-label:focus {
- outline: none;
- }
- .attentionSummary gr-account-label:hover,
- .attention-detail gr-account-label:hover {
- box-shadow: var(--elevation-level-1);
- cursor: pointer;
- }
- .attention-detail .attentionDetailsTitle {
- display: flex;
- justify-content: space-between;
- }
- .attention-detail .selectUsers {
- color: var(--deemphasized-text-color);
- margin-bottom: var(--spacing-m);
- }
- .attentionTip {
- padding: var(--spacing-m);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- margin-top: var(--spacing-m);
- background-color: var(--line-item-highlight-color);
- }
- .attentionTip div gr-icon {
- margin-right: var(--spacing-s);
- }
- .patchsetLevelContainer {
- width: 80ch;
- border-radius: var(--border-radius);
- box-shadow: var(--elevation-level-2);
- }
- .patchsetLevelContainer.resolved {
- background-color: var(--comment-background-color);
- }
- .patchsetLevelContainer.unresolved {
- background-color: var(--unresolved-comment-background-color);
- }
- .privateVisiblityInfo {
- display: flex;
- justify-content: center;
- background-color: var(--info-background);
- padding: var(--spacing-s) 0;
- }
- .privateVisiblityInfo gr-icon {
- margin-right: var(--spacing-m);
- color: var(--info-foreground);
- }
- `,
- ];
+ line-height: 26px;
+ }
+ .attentionSummary gr-account-label,
+ .attention-detail gr-account-label {
+ --account-max-length: 120px;
+ display: inline-block;
+ padding: var(--spacing-xs) var(--spacing-m);
+ user-select: none;
+ --label-border-radius: 8px;
+ }
+ .attentionSummary gr-account-label {
+ margin: 0 var(--spacing-xs);
+ line-height: var(--line-height-normal);
+ vertical-align: top;
+ }
+ .attention-detail .peopleListValues {
+ line-height: calc(var(--line-height-normal) + 10px);
+ }
+ .attention-detail gr-account-label {
+ line-height: var(--line-height-normal);
+ }
+ .attentionSummary gr-account-label:focus,
+ .attention-detail gr-account-label:focus {
+ outline: none;
+ }
+ .attentionSummary gr-account-label:hover,
+ .attention-detail gr-account-label:hover {
+ box-shadow: var(--elevation-level-1);
+ cursor: pointer;
+ }
+ .attention-detail .attentionDetailsTitle {
+ display: flex;
+ justify-content: space-between;
+ }
+ .attention-detail .selectUsers {
+ color: var(--deemphasized-text-color);
+ margin-bottom: var(--spacing-m);
+ }
+ .attentionTip {
+ padding: var(--spacing-m);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ margin-top: var(--spacing-m);
+ background-color: var(--line-item-highlight-color);
+ }
+ .attentionTip div gr-icon {
+ margin-right: var(--spacing-s);
+ }
+ .patchsetLevelContainer {
+ width: 80ch;
+ border-radius: var(--border-radius);
+ box-shadow: var(--elevation-level-2);
+ }
+ .patchsetLevelContainer.resolved {
+ background-color: var(--comment-background-color);
+ }
+ .patchsetLevelContainer.unresolved {
+ background-color: var(--unresolved-comment-background-color);
+ }
+ .privateVisiblityInfo {
+ display: flex;
+ justify-content: center;
+ background-color: var(--info-background);
+ padding: var(--spacing-s) 0;
+ }
+ .privateVisiblityInfo gr-icon {
+ margin-right: var(--spacing-m);
+ color: var(--info-foreground);
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts b/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
index 7723c66..02d5124 100644
--- a/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
+++ b/polygerrit-ui/app/elements/diff/gr-apply-fix-dialog/gr-apply-fix-dialog.ts
@@ -149,38 +149,40 @@
);
}
- static override styles = [
- sharedStyles,
- modalStyles,
- css`
- .diffContainer {
- padding: var(--spacing-l) 0;
- border-bottom: 1px solid var(--border-color);
- }
- .file-name {
- display: block;
- padding: var(--spacing-s) var(--spacing-l);
- background-color: var(--background-color-secondary);
- border-bottom: 1px solid var(--border-color);
- }
- gr-button {
- margin-left: var(--spacing-m);
- }
- .fix-picker {
- display: flex;
- align-items: center;
- margin-right: var(--spacing-l);
- }
- .info {
- background-color: var(--info-background);
- padding: var(--spacing-l) var(--spacing-xl);
- }
- .info gr-icon {
- color: var(--selected-foreground);
- margin-right: var(--spacing-xl);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ modalStyles,
+ css`
+ .diffContainer {
+ padding: var(--spacing-l) 0;
+ border-bottom: 1px solid var(--border-color);
+ }
+ .file-name {
+ display: block;
+ padding: var(--spacing-s) var(--spacing-l);
+ background-color: var(--background-color-secondary);
+ border-bottom: 1px solid var(--border-color);
+ }
+ gr-button {
+ margin-left: var(--spacing-m);
+ }
+ .fix-picker {
+ display: flex;
+ align-items: center;
+ margin-right: var(--spacing-l);
+ }
+ .info {
+ background-color: var(--info-background);
+ padding: var(--spacing-l) var(--spacing-xl);
+ }
+ .info gr-icon {
+ color: var(--selected-foreground);
+ margin-right: var(--spacing-xl);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
index 1d46841..d8c3abe 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.ts
@@ -59,21 +59,23 @@
super.disconnectedCallback();
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- /* Used to remove horizontal whitespace between the icons. */
- display: flex;
- }
- gr-button.selected gr-icon {
- color: var(--link-color);
- }
- gr-icon {
- font-size: 1.3rem;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ /* Used to remove horizontal whitespace between the icons. */
+ display: flex;
+ }
+ gr-button.selected gr-icon {
+ color: var(--link-color);
+ }
+ gr-icon {
+ font-size: 1.3rem;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts b/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts
index 89513e3..747f3eb 100644
--- a/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts
+++ b/polygerrit-ui/app/elements/settings/gr-account-info/gr-account-info.ts
@@ -60,41 +60,43 @@
private readonly restApiService = getAppContext().restApiService;
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- gr-avatar {
- height: 120px;
- width: 120px;
- margin-right: var(--spacing-xs);
- vertical-align: -0.25em;
- }
- div section.hide {
- display: none;
- }
- gr-hovercard-account-contents {
- display: block;
- max-width: 600px;
- margin-top: var(--spacing-m);
- background: var(--dialog-background-color);
- border: 1px solid var(--border-color);
- border-radius: var(--border-radius);
- box-shadow: var(--elevation-level-5);
- }
- iron-autogrow-textarea {
- background-color: var(--view-background-color);
- color: var(--primary-text-color);
- }
- .lengthCounter {
- font-weight: var(--font-weight-normal);
- }
- p {
- max-width: 65ch;
- margin-bottom: var(--spacing-m);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ gr-avatar {
+ height: 120px;
+ width: 120px;
+ margin-right: var(--spacing-xs);
+ vertical-align: -0.25em;
+ }
+ div section.hide {
+ display: none;
+ }
+ gr-hovercard-account-contents {
+ display: block;
+ max-width: 600px;
+ margin-top: var(--spacing-m);
+ background: var(--dialog-background-color);
+ border: 1px solid var(--border-color);
+ border-radius: var(--border-radius);
+ box-shadow: var(--elevation-level-5);
+ }
+ iron-autogrow-textarea {
+ background-color: var(--view-background-color);
+ color: var(--primary-text-color);
+ }
+ .lengthCounter {
+ font-weight: var(--font-weight-normal);
+ }
+ p {
+ max-width: 65ch;
+ margin-bottom: var(--spacing-m);
+ }
+ `,
+ ];
+ }
override render() {
if (!this.account || this.loading) return nothing;
diff --git a/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts b/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts
index 53548f8..568e7c3 100644
--- a/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-change-table-editor/gr-change-table-editor.ts
@@ -36,28 +36,30 @@
private readonly getConfigModel = resolve(this, configModelToken);
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- #changeCols {
- width: auto;
- }
- #changeCols .visibleHeader {
- text-align: center;
- }
- .checkboxContainer {
- cursor: pointer;
- text-align: center;
- }
- .checkboxContainer input {
- cursor: pointer;
- }
- .checkboxContainer:hover {
- outline: 1px solid var(--border-color);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ #changeCols {
+ width: auto;
+ }
+ #changeCols .visibleHeader {
+ text-align: center;
+ }
+ .checkboxContainer {
+ cursor: pointer;
+ text-align: center;
+ }
+ .checkboxContainer input {
+ cursor: pointer;
+ }
+ .checkboxContainer:hover {
+ outline: 1px solid var(--border-color);
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts b/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts
index b9f59bf..1c4fd30 100644
--- a/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-email-editor/gr-email-editor.ts
@@ -29,35 +29,37 @@
readonly restApiService = getAppContext().restApiService;
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- th {
- color: var(--deemphasized-text-color);
- text-align: left;
- }
- #emailTable .emailColumn {
- min-width: 32.5em;
- width: auto;
- }
- #emailTable .preferredHeader {
- text-align: center;
- width: 6em;
- }
- #emailTable .preferredControl {
- cursor: pointer;
- height: auto;
- text-align: center;
- }
- #emailTable .preferredControl .preferredRadio {
- height: auto;
- }
- .preferredControl:hover {
- outline: 1px solid var(--border-color);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ th {
+ color: var(--deemphasized-text-color);
+ text-align: left;
+ }
+ #emailTable .emailColumn {
+ min-width: 32.5em;
+ width: auto;
+ }
+ #emailTable .preferredHeader {
+ text-align: center;
+ width: 6em;
+ }
+ #emailTable .preferredControl {
+ cursor: pointer;
+ height: auto;
+ text-align: center;
+ }
+ #emailTable .preferredControl .preferredRadio {
+ height: auto;
+ }
+ .preferredControl:hover {
+ outline: 1px solid var(--border-color);
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="gr-form-styles">
diff --git a/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts b/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
index 32b32e2..da1f758 100644
--- a/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-gpg-editor/gr-gpg-editor.ts
@@ -49,34 +49,36 @@
private readonly restApiService = getAppContext().restApiService;
- static override styles = [
- formStyles,
- sharedStyles,
- modalStyles,
- css`
- .keyHeader {
- width: 9em;
- }
- .userIdHeader {
- width: 15em;
- }
- #viewKeyModal {
- padding: var(--spacing-xxl);
- width: 50em;
- }
- .closeButton {
- bottom: 2em;
- position: absolute;
- right: 2em;
- }
- #existing {
- margin-bottom: var(--spacing-l);
- }
- iron-autogrow-textarea {
- background-color: var(--view-background-color);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ formStyles,
+ sharedStyles,
+ modalStyles,
+ css`
+ .keyHeader {
+ width: 9em;
+ }
+ .userIdHeader {
+ width: 15em;
+ }
+ #viewKeyModal {
+ padding: var(--spacing-xxl);
+ width: 50em;
+ }
+ .closeButton {
+ bottom: 2em;
+ position: absolute;
+ right: 2em;
+ }
+ #existing {
+ margin-bottom: var(--spacing-l);
+ }
+ iron-autogrow-textarea {
+ background-color: var(--view-background-color);
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts b/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts
index 7f67ea8..4c8e8da 100644
--- a/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts
+++ b/polygerrit-ui/app/elements/settings/gr-identities/gr-identities.ts
@@ -36,37 +36,39 @@
private readonly restApiService = getAppContext().restApiService;
- static override styles = [
- sharedStyles,
- formStyles,
- modalStyles,
- css`
- tr th.emailAddressHeader,
- tr th.identityHeader {
- width: 15em;
- padding: 0 10px;
- }
- tr td.statusColumn,
- tr td.emailAddressColumn,
- tr td.identityColumn {
- word-break: break-word;
- }
- tr td.emailAddressColumn,
- tr td.identityColumn {
- padding: 4px 10px;
- width: 15em;
- }
- .deleteButton {
- float: right;
- }
- .deleteButton:not(.show) {
- display: none;
- }
- .space {
- margin-bottom: var(--spacing-l);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ modalStyles,
+ css`
+ tr th.emailAddressHeader,
+ tr th.identityHeader {
+ width: 15em;
+ padding: 0 10px;
+ }
+ tr td.statusColumn,
+ tr td.emailAddressColumn,
+ tr td.identityColumn {
+ word-break: break-word;
+ }
+ tr td.emailAddressColumn,
+ tr td.identityColumn {
+ padding: 4px 10px;
+ width: 15em;
+ }
+ .deleteButton {
+ float: right;
+ }
+ .deleteButton:not(.show) {
+ display: none;
+ }
+ .space {
+ margin-bottom: var(--spacing-l);
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="gr-form-styles">
diff --git a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts
index 9c23857..b00529a 100644
--- a/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts
+++ b/polygerrit-ui/app/elements/settings/gr-menu-editor/gr-menu-editor.ts
@@ -48,31 +48,33 @@
);
}
- static override styles = [
- formStyles,
- sharedStyles,
- fontStyles,
- menuPageStyles,
- css`
- .buttonColumn {
- width: 2em;
- }
- .moveUpButton,
- .moveDownButton {
- width: 100%;
- }
- tbody tr:first-of-type td .moveUpButton,
- tbody tr:last-of-type td .moveDownButton {
- display: none;
- }
- td.urlCell {
- word-break: break-word;
- }
- .newUrlInput {
- min-width: 23em;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ formStyles,
+ sharedStyles,
+ fontStyles,
+ menuPageStyles,
+ css`
+ .buttonColumn {
+ width: 2em;
+ }
+ .moveUpButton,
+ .moveDownButton {
+ width: 100%;
+ }
+ tbody tr:first-of-type td .moveUpButton,
+ tbody tr:last-of-type td .moveDownButton {
+ display: none;
+ }
+ td.urlCell {
+ word-break: break-word;
+ }
+ .newUrlInput {
+ min-width: 23em;
+ }
+ `,
+ ];
+ }
override render() {
const unchanged = deepEqual(this.menuItems, this.originalPrefs.my);
diff --git a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
index c6c023e..435eb44 100644
--- a/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
+++ b/polygerrit-ui/app/elements/settings/gr-registration-dialog/gr-registration-dialog.ts
@@ -68,50 +68,52 @@
}
}
- static override styles = [
- sharedStyles,
- formStyles,
- css`
- :host {
- display: block;
- }
- main {
- max-width: 46em;
- }
- :host(.loading) main {
- display: none;
- }
- .loadingMessage {
- display: none;
- font-style: italic;
- }
- :host(.loading) .loadingMessage {
- display: block;
- }
- hr {
- margin-top: var(--spacing-l);
- margin-bottom: var(--spacing-l);
- }
- header {
- border-bottom: 1px solid var(--border-color);
- font-weight: var(--font-weight-bold);
- margin-bottom: var(--spacing-l);
- }
- .container {
- padding: var(--spacing-m) var(--spacing-xl);
- }
- footer {
- display: flex;
- justify-content: flex-end;
- }
- footer gr-button {
- margin-left: var(--spacing-l);
- }
- input {
- width: 20em;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ formStyles,
+ css`
+ :host {
+ display: block;
+ }
+ main {
+ max-width: 46em;
+ }
+ :host(.loading) main {
+ display: none;
+ }
+ .loadingMessage {
+ display: none;
+ font-style: italic;
+ }
+ :host(.loading) .loadingMessage {
+ display: block;
+ }
+ hr {
+ margin-top: var(--spacing-l);
+ margin-bottom: var(--spacing-l);
+ }
+ header {
+ border-bottom: 1px solid var(--border-color);
+ font-weight: var(--font-weight-bold);
+ margin-bottom: var(--spacing-l);
+ }
+ .container {
+ padding: var(--spacing-m) var(--spacing-xl);
+ }
+ footer {
+ display: flex;
+ justify-content: flex-end;
+ }
+ footer gr-button {
+ margin-left: var(--spacing-l);
+ }
+ input {
+ width: 20em;
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="container gr-form-styles">
diff --git a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
index 24a18c9..29203d0 100644
--- a/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
+++ b/polygerrit-ui/app/elements/settings/gr-settings-view/gr-settings-view.ts
@@ -303,43 +303,45 @@
});
}
- static override styles = [
- sharedStyles,
- paperStyles,
- fontStyles,
- formStyles,
- menuPageStyles,
- pageNavStyles,
- css`
- :host {
- color: var(--primary-text-color);
- }
- h2 {
- font-family: var(--header-font-family);
- font-size: var(--font-size-h2);
- font-weight: var(--font-weight-h2);
- line-height: var(--line-height-h2);
- }
- .newEmailInput {
- width: 20em;
- }
- #email {
- margin-bottom: var(--spacing-l);
- }
- .filters p {
- margin-bottom: var(--spacing-l);
- }
- .queryExample em {
- color: violet;
- }
- .toggle {
- align-items: center;
- display: flex;
- margin-bottom: var(--spacing-l);
- margin-right: var(--spacing-l);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ paperStyles,
+ fontStyles,
+ formStyles,
+ menuPageStyles,
+ pageNavStyles,
+ css`
+ :host {
+ color: var(--primary-text-color);
+ }
+ h2 {
+ font-family: var(--header-font-family);
+ font-size: var(--font-size-h2);
+ font-weight: var(--font-weight-h2);
+ line-height: var(--line-height-h2);
+ }
+ .newEmailInput {
+ width: 20em;
+ }
+ #email {
+ margin-bottom: var(--spacing-l);
+ }
+ .filters p {
+ margin-bottom: var(--spacing-l);
+ }
+ .queryExample em {
+ color: violet;
+ }
+ .toggle {
+ align-items: center;
+ display: flex;
+ margin-bottom: var(--spacing-l);
+ margin-right: var(--spacing-l);
+ }
+ `,
+ ];
+ }
override render() {
const isLoading = this.loading || this.loading === undefined;
diff --git a/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts b/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts
index 07209db..9045dd6 100644
--- a/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts
+++ b/polygerrit-ui/app/elements/shared/gr-account-list/gr-account-list.ts
@@ -158,32 +158,34 @@
);
}
- static override styles = [
- sharedStyles,
- css`
- gr-account-chip {
- display: inline-block;
- margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
- }
- gr-account-entry {
- display: flex;
- flex: 1;
- min-width: 10em;
- margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
- }
- .group {
- --account-label-suffix: ' (group)';
- }
- .newlyAdded {
- font-style: italic;
- }
- .list {
- align-items: center;
- display: flex;
- flex-wrap: wrap;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ gr-account-chip {
+ display: inline-block;
+ margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
+ }
+ gr-account-entry {
+ display: flex;
+ flex: 1;
+ min-width: 10em;
+ margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
+ }
+ .group {
+ --account-label-suffix: ' (group)';
+ }
+ .newlyAdded {
+ font-style: italic;
+ }
+ .list {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ }
+ `,
+ ];
+ }
override render() {
return html`<div class="list">
diff --git a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
index fd1311c..210b91c 100644
--- a/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
+++ b/polygerrit-ui/app/elements/shared/gr-autocomplete/gr-autocomplete.ts
@@ -201,59 +201,63 @@
.inputElement as HTMLInputElement;
}
- static override styles = [
- sharedStyles,
- css`
- paper-input.borderless {
- border: none;
- padding: 0;
- }
- paper-input {
- background-color: var(--view-background-color);
- color: var(--primary-text-color);
- border: 1px solid var(--prominent-border-color, var(--border-color));
- border-radius: var(--border-radius);
- padding: var(--spacing-s);
- --paper-input-container_-_padding: 0;
- --paper-input-container-input_-_font-size: var(--font-size-normal);
- --paper-input-container-input_-_line-height: var(--line-height-normal);
- /* This is a hack for not being able to set height:0 on the underline
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ paper-input.borderless {
+ border: none;
+ padding: 0;
+ }
+ paper-input {
+ background-color: var(--view-background-color);
+ color: var(--primary-text-color);
+ border: 1px solid var(--prominent-border-color, var(--border-color));
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s);
+ --paper-input-container_-_padding: 0;
+ --paper-input-container-input_-_font-size: var(--font-size-normal);
+ --paper-input-container-input_-_line-height: var(
+ --line-height-normal
+ );
+ /* This is a hack for not being able to set height:0 on the underline
of a paper-input 2.2.3 element. All the underline fixes below only
actually work in 3.x.x, so the height must be adjusted directly as
a workaround until we are on Polymer 3. */
- height: var(--line-height-normal);
- --paper-input-container-underline-height: 0;
- --paper-input-container-underline-wrapper-height: 0;
- --paper-input-container-underline-focus-height: 0;
- --paper-input-container-underline-legacy-height: 0;
- --paper-input-container-underline_-_height: 0;
- --paper-input-container-underline_-_display: none;
- --paper-input-container-underline-focus_-_height: 0;
- --paper-input-container-underline-focus_-_display: none;
- --paper-input-container-underline-disabled_-_height: 0;
- --paper-input-container-underline-disabled_-_display: none;
- /* Hide label for input. The label is still visible for
+ height: var(--line-height-normal);
+ --paper-input-container-underline-height: 0;
+ --paper-input-container-underline-wrapper-height: 0;
+ --paper-input-container-underline-focus-height: 0;
+ --paper-input-container-underline-legacy-height: 0;
+ --paper-input-container-underline_-_height: 0;
+ --paper-input-container-underline_-_display: none;
+ --paper-input-container-underline-focus_-_height: 0;
+ --paper-input-container-underline-focus_-_display: none;
+ --paper-input-container-underline-disabled_-_height: 0;
+ --paper-input-container-underline-disabled_-_display: none;
+ /* Hide label for input. The label is still visible for
screen readers. Workaround found at:
https://github.com/PolymerElements/paper-input/issues/478 */
- --paper-input-container-label_-_display: none;
- }
- paper-input.showBlueFocusBorder:focus {
- border: 2px solid var(--input-focus-border-color);
- /*
+ --paper-input-container-label_-_display: none;
+ }
+ paper-input.showBlueFocusBorder:focus {
+ border: 2px solid var(--input-focus-border-color);
+ /*
* The goal is to have a thicker blue border when focused and a thinner
* gray border when blurred. To avoid shifting neighboring elements
* around when the border size changes, a negative margin is added to
* compensate. box-sizing: border-box; will not work since there is
* important padding to add around the content.
*/
- margin: -1px;
- }
- paper-input.warnUncommitted {
- --paper-input-container-input_-_color: var(--error-text-color);
- --paper-input-container-input_-_font-size: inherit;
- }
- `,
- ];
+ margin: -1px;
+ }
+ paper-input.warnUncommitted {
+ --paper-input-container-input_-_color: var(--error-text-color);
+ --paper-input-container-input_-_font-size: inherit;
+ }
+ `,
+ ];
+ }
override connectedCallback() {
super.connectedCallback();
diff --git a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
index e880531..405409d 100644
--- a/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
+++ b/polygerrit-ui/app/elements/shared/gr-formatted-text/gr-formatted-text.ts
@@ -56,67 +56,70 @@
* Note: Do not use sharedStyles or other styles here that should not affect
* the generated HTML of the markdown.
*/
- static override styles = [
- css`
- a {
- color: var(--link-color);
- }
- p,
- ul,
- code,
- blockquote {
- margin: 0 0 var(--spacing-m) 0;
- max-width: var(--gr-formatted-text-prose-max-width, none);
- }
- p:last-child,
- ul:last-child,
- blockquote:last-child,
- pre:last-child {
- margin: 0;
- }
- blockquote {
- border-left: var(--spacing-xxs) solid var(--comment-quote-marker-color);
- padding: 0 var(--spacing-m);
- }
- code {
- background-color: var(--background-color-secondary);
- border: var(--spacing-xxs) solid var(--border-color);
- display: block;
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-code);
- line-height: var(--line-height-mono);
- margin: var(--spacing-m) 0;
- padding: var(--spacing-xxs) var(--spacing-s);
- overflow-x: auto;
- /* Pre will preserve whitespace and line breaks but not wrap */
- white-space: pre;
- }
- /* Non-multiline code elements need display:inline to shrink and not take
+ static override get styles() {
+ return [
+ css`
+ a {
+ color: var(--link-color);
+ }
+ p,
+ ul,
+ code,
+ blockquote {
+ margin: 0 0 var(--spacing-m) 0;
+ max-width: var(--gr-formatted-text-prose-max-width, none);
+ }
+ p:last-child,
+ ul:last-child,
+ blockquote:last-child,
+ pre:last-child {
+ margin: 0;
+ }
+ blockquote {
+ border-left: var(--spacing-xxs) solid
+ var(--comment-quote-marker-color);
+ padding: 0 var(--spacing-m);
+ }
+ code {
+ background-color: var(--background-color-secondary);
+ border: var(--spacing-xxs) solid var(--border-color);
+ display: block;
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-code);
+ line-height: var(--line-height-mono);
+ margin: var(--spacing-m) 0;
+ padding: var(--spacing-xxs) var(--spacing-s);
+ overflow-x: auto;
+ /* Pre will preserve whitespace and line breaks but not wrap */
+ white-space: pre;
+ }
+ /* Non-multiline code elements need display:inline to shrink and not take
a whole row */
- :not(pre) > code {
- display: inline;
- }
- li {
- margin-left: var(--spacing-xl);
- }
- gr-account-chip {
- display: inline;
- }
- .plaintext {
- font: inherit;
- white-space: var(--linked-text-white-space, pre-wrap);
- word-wrap: var(--linked-text-word-wrap, break-word);
- }
- .markdown-html {
- /* code overrides white-space to pre, everything else should wrap as
+ :not(pre) > code {
+ display: inline;
+ }
+ li {
+ margin-left: var(--spacing-xl);
+ }
+ gr-account-chip {
+ display: inline;
+ }
+ .plaintext {
+ font: inherit;
+ white-space: var(--linked-text-white-space, pre-wrap);
+ word-wrap: var(--linked-text-word-wrap, break-word);
+ }
+ .markdown-html {
+ /* code overrides white-space to pre, everything else should wrap as
normal. */
- white-space: normal;
- /* prose will automatically wrap but inline <code> blocks won't and we
+ white-space: normal;
+ /* prose will automatically wrap but inline <code> blocks won't and we
should overflow in that case rather than wrapping or leaking out */
- overflow-x: auto;
- }
- `,
- ];
+ overflow-x: auto;
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
index 95f1b8a..c29417e 100644
--- a/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
+++ b/polygerrit-ui/app/elements/shared/gr-textarea/gr-textarea.ts
@@ -175,53 +175,55 @@
}
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- display: flex;
- position: relative;
- }
- :host(.monospace) {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-mono);
- line-height: var(--line-height-mono);
- font-weight: var(--font-weight-normal);
- }
- :host(.code) {
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-code);
- /* usually 16px = 12px + 4px */
- line-height: calc(var(--font-size-code) + var(--spacing-s));
- font-weight: var(--font-weight-normal);
- }
- #emojiSuggestions {
- font-family: var(--font-family);
- }
- #textarea {
- background-color: var(--view-background-color);
- width: 100%;
- }
- #hiddenText #emojiSuggestions {
- visibility: visible;
- white-space: normal;
- }
- iron-autogrow-textarea {
- position: relative;
- }
- #textarea.noBorder {
- border: none;
- }
- #hiddenText {
- display: block;
- float: left;
- position: absolute;
- visibility: hidden;
- width: 100%;
- white-space: pre-wrap;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ display: flex;
+ position: relative;
+ }
+ :host(.monospace) {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-mono);
+ line-height: var(--line-height-mono);
+ font-weight: var(--font-weight-normal);
+ }
+ :host(.code) {
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-code);
+ /* usually 16px = 12px + 4px */
+ line-height: calc(var(--font-size-code) + var(--spacing-s));
+ font-weight: var(--font-weight-normal);
+ }
+ #emojiSuggestions {
+ font-family: var(--font-family);
+ }
+ #textarea {
+ background-color: var(--view-background-color);
+ width: 100%;
+ }
+ #hiddenText #emojiSuggestions {
+ visibility: visible;
+ white-space: normal;
+ }
+ iron-autogrow-textarea {
+ position: relative;
+ }
+ #textarea.noBorder {
+ border: none;
+ }
+ #hiddenText {
+ display: block;
+ float: left;
+ position: absolute;
+ visibility: hidden;
+ width: 100%;
+ white-space: pre-wrap;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
index ff068a7..ea67661 100644
--- a/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
+++ b/polygerrit-ui/app/elements/shared/gr-user-suggestion-fix/gr-user-suggestion-fix.ts
@@ -25,42 +25,44 @@
export class GrUserSuggetionFix extends LitElement {
private readonly flagsService = getAppContext().flagsService;
- static override styles = [
- css`
- .header {
- background-color: var(--background-color-primary);
- border: 1px solid var(--border-color);
- padding: var(--spacing-xs) var(--spacing-xl);
- display: flex;
- align-items: center;
- border-top-left-radius: var(--border-radius);
- border-top-right-radius: var(--border-radius);
- }
- .header .title {
- flex: 1;
- }
- .copyButton {
- margin-right: var(--spacing-l);
- }
- code {
- max-width: var(--gr-formatted-text-prose-max-width, none);
- background-color: var(--background-color-secondary);
- border: 1px solid var(--border-color);
- border-top: 0;
- display: block;
- font-family: var(--monospace-font-family);
- font-size: var(--font-size-code);
- line-height: var(--line-height-mono);
- margin-bottom: var(--spacing-m);
- padding: var(--spacing-xxs) var(--spacing-s);
- overflow-x: auto;
- /* Pre will preserve whitespace and line breaks but not wrap */
- white-space: pre;
- border-bottom-left-radius: var(--border-radius);
- border-bottom-right-radius: var(--border-radius);
- }
- `,
- ];
+ static override get styles() {
+ return [
+ css`
+ .header {
+ background-color: var(--background-color-primary);
+ border: 1px solid var(--border-color);
+ padding: var(--spacing-xs) var(--spacing-xl);
+ display: flex;
+ align-items: center;
+ border-top-left-radius: var(--border-radius);
+ border-top-right-radius: var(--border-radius);
+ }
+ .header .title {
+ flex: 1;
+ }
+ .copyButton {
+ margin-right: var(--spacing-l);
+ }
+ code {
+ max-width: var(--gr-formatted-text-prose-max-width, none);
+ background-color: var(--background-color-secondary);
+ border: 1px solid var(--border-color);
+ border-top: 0;
+ display: block;
+ font-family: var(--monospace-font-family);
+ font-size: var(--font-size-code);
+ line-height: var(--line-height-mono);
+ margin-bottom: var(--spacing-m);
+ padding: var(--spacing-xxs) var(--spacing-s);
+ overflow-x: auto;
+ /* Pre will preserve whitespace and line breaks but not wrap */
+ white-space: pre;
+ border-bottom-left-radius: var(--border-radius);
+ border-bottom-right-radius: var(--border-radius);
+ }
+ `,
+ ];
+ }
override render() {
if (!this.flagsService.isEnabled(KnownExperimentId.SUGGEST_EDIT)) {
diff --git a/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts
index 5695f4d..e4afd23 100644
--- a/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/embed/diff-old/gr-context-controls/gr-context-controls.ts
@@ -99,112 +99,123 @@
linesToExpand: number;
}>();
- static override styles = css`
- :host {
- display: flex;
- justify-content: center;
- flex-direction: column;
- position: relative;
- }
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
+ }
- :host([showConfig='above']) {
- justify-content: flex-end;
- margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: var(--gr-context-controls-margin-bottom);
- height: calc(var(--line-height-normal) + var(--spacing-s));
- .horizontalFlex {
- align-items: end;
- }
- }
+ :host([showConfig='above']) {
+ justify-content: flex-end;
+ margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: var(--gr-context-controls-margin-bottom);
+ height: calc(var(--line-height-normal) + var(--spacing-s));
+ .horizontalFlex {
+ align-items: end;
+ }
+ }
- :host([showConfig='below']) {
- justify-content: flex-start;
- margin-top: 1px;
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- .horizontalFlex {
- align-items: start;
- }
- }
+ :host([showConfig='below']) {
+ justify-content: flex-start;
+ margin-top: 1px;
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ .horizontalFlex {
+ align-items: start;
+ }
+ }
- :host([showConfig='both']) {
- margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- height: calc(
- 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
- var(--divider-height)
- );
- .horizontalFlex {
- align-items: center;
- }
- }
+ :host([showConfig='both']) {
+ margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ height: calc(
+ 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
+ var(--divider-height)
+ );
+ .horizontalFlex {
+ align-items: center;
+ }
+ }
- .contextControlButton {
- background-color: var(--default-button-background-color);
- font: var(--context-control-button-font, inherit);
- }
+ .contextControlButton {
+ background-color: var(--default-button-background-color);
+ font: var(--context-control-button-font, inherit);
+ }
- paper-button {
- text-transform: none;
- align-items: center;
- background-color: var(--background-color);
- font-family: inherit;
- margin: var(--margin, 0);
- min-width: var(--border, 0);
- color: var(--diff-context-control-color);
- border: solid var(--border-color);
- border-width: 1px;
- border-radius: var(--border-radius);
- padding: var(--spacing-s) var(--spacing-l);
- }
+ paper-button {
+ text-transform: none;
+ align-items: center;
+ background-color: var(--background-color);
+ font-family: inherit;
+ margin: var(--margin, 0);
+ min-width: var(--border, 0);
+ color: var(--diff-context-control-color);
+ border: solid var(--border-color);
+ border-width: 1px;
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s) var(--spacing-l);
+ }
- paper-button:hover {
- /* same as defined in gr-button */
- background: rgba(0, 0, 0, 0.12);
- }
- paper-button:focus-visible {
- /* paper-button sets this to 0, thus preventing focus-based styling. */
- outline-width: 1px;
- }
+ paper-button:hover {
+ /* same as defined in gr-button */
+ background: rgba(0, 0, 0, 0.12);
+ }
+ paper-button:focus-visible {
+ /* paper-button sets this to 0, thus preventing focus-based styling. */
+ outline-width: 1px;
+ }
- .aboveBelowButtons {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-left: var(--spacing-m);
- position: relative;
- }
- .aboveBelowButtons:first-child {
- margin-left: 0;
- /* Places a default background layer behind the "all button" that can have opacity */
- background-color: var(--default-button-background-color);
- }
+ .aboveBelowButtons {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: var(--spacing-m);
+ position: relative;
+ }
+ .aboveBelowButtons:first-child {
+ margin-left: 0;
+ /* Places a default background layer behind the "all button" that can have opacity */
+ background-color: var(--default-button-background-color);
+ }
- .horizontalFlex {
- display: flex;
- justify-content: center;
- align-items: var(--gr-context-controls-horizontal-align-items, center);
- }
+ .horizontalFlex {
+ display: flex;
+ justify-content: center;
+ align-items: var(
+ --gr-context-controls-horizontal-align-items,
+ center
+ );
+ }
- .aboveButton {
- border-bottom-width: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- }
- .belowButton {
- border-top-width: 0;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
- }
- .belowButton:first-child {
- margin-top: 0;
- }
- .breadcrumbTooltip {
- white-space: nowrap;
- }
- `;
+ .aboveButton {
+ border-bottom-width: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ }
+ .belowButton {
+ border-top-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
+ }
+ .belowButton:first-child {
+ margin-top: 0;
+ }
+ .breadcrumbTooltip {
+ white-space: nowrap;
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
index 43c8113..b2c0fcb 100644
--- a/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
+++ b/polygerrit-ui/app/embed/diff/gr-context-controls/gr-context-controls.ts
@@ -99,112 +99,123 @@
linesToExpand: number;
}>();
- static override styles = css`
- :host {
- display: flex;
- justify-content: center;
- flex-direction: column;
- position: relative;
- }
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ position: relative;
+ }
- :host([showConfig='above']) {
- justify-content: flex-end;
- margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: var(--gr-context-controls-margin-bottom);
- height: calc(var(--line-height-normal) + var(--spacing-s));
- .horizontalFlex {
- align-items: end;
- }
- }
+ :host([showConfig='above']) {
+ justify-content: flex-end;
+ margin-top: calc(-1px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: var(--gr-context-controls-margin-bottom);
+ height: calc(var(--line-height-normal) + var(--spacing-s));
+ .horizontalFlex {
+ align-items: end;
+ }
+ }
- :host([showConfig='below']) {
- justify-content: flex-start;
- margin-top: 1px;
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- .horizontalFlex {
- align-items: start;
- }
- }
+ :host([showConfig='below']) {
+ justify-content: flex-start;
+ margin-top: 1px;
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ .horizontalFlex {
+ align-items: start;
+ }
+ }
- :host([showConfig='both']) {
- margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
- margin-bottom: calc(0px - var(--line-height-normal) - var(--spacing-s));
- height: calc(
- 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
- var(--divider-height)
- );
- .horizontalFlex {
- align-items: center;
- }
- }
+ :host([showConfig='both']) {
+ margin-top: calc(0px - var(--line-height-normal) - var(--spacing-s));
+ margin-bottom: calc(
+ 0px - var(--line-height-normal) - var(--spacing-s)
+ );
+ height: calc(
+ 2 * var(--line-height-normal) + 2 * var(--spacing-s) +
+ var(--divider-height)
+ );
+ .horizontalFlex {
+ align-items: center;
+ }
+ }
- .contextControlButton {
- background-color: var(--default-button-background-color);
- font: var(--context-control-button-font, inherit);
- }
+ .contextControlButton {
+ background-color: var(--default-button-background-color);
+ font: var(--context-control-button-font, inherit);
+ }
- paper-button {
- text-transform: none;
- align-items: center;
- background-color: var(--background-color);
- font-family: inherit;
- margin: var(--margin, 0);
- min-width: var(--border, 0);
- color: var(--diff-context-control-color);
- border: solid var(--border-color);
- border-width: 1px;
- border-radius: var(--border-radius);
- padding: var(--spacing-s) var(--spacing-l);
- }
+ paper-button {
+ text-transform: none;
+ align-items: center;
+ background-color: var(--background-color);
+ font-family: inherit;
+ margin: var(--margin, 0);
+ min-width: var(--border, 0);
+ color: var(--diff-context-control-color);
+ border: solid var(--border-color);
+ border-width: 1px;
+ border-radius: var(--border-radius);
+ padding: var(--spacing-s) var(--spacing-l);
+ }
- paper-button:hover {
- /* same as defined in gr-button */
- background: rgba(0, 0, 0, 0.12);
- }
- paper-button:focus-visible {
- /* paper-button sets this to 0, thus preventing focus-based styling. */
- outline-width: 1px;
- }
+ paper-button:hover {
+ /* same as defined in gr-button */
+ background: rgba(0, 0, 0, 0.12);
+ }
+ paper-button:focus-visible {
+ /* paper-button sets this to 0, thus preventing focus-based styling. */
+ outline-width: 1px;
+ }
- .aboveBelowButtons {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-left: var(--spacing-m);
- position: relative;
- }
- .aboveBelowButtons:first-child {
- margin-left: 0;
- /* Places a default background layer behind the "all button" that can have opacity */
- background-color: var(--default-button-background-color);
- }
+ .aboveBelowButtons {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ margin-left: var(--spacing-m);
+ position: relative;
+ }
+ .aboveBelowButtons:first-child {
+ margin-left: 0;
+ /* Places a default background layer behind the "all button" that can have opacity */
+ background-color: var(--default-button-background-color);
+ }
- .horizontalFlex {
- display: flex;
- justify-content: center;
- align-items: var(--gr-context-controls-horizontal-align-items, center);
- }
+ .horizontalFlex {
+ display: flex;
+ justify-content: center;
+ align-items: var(
+ --gr-context-controls-horizontal-align-items,
+ center
+ );
+ }
- .aboveButton {
- border-bottom-width: 0;
- border-bottom-right-radius: 0;
- border-bottom-left-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- }
- .belowButton {
- border-top-width: 0;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
- padding: var(--spacing-xxs) var(--spacing-l);
- margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
- }
- .belowButton:first-child {
- margin-top: 0;
- }
- .breadcrumbTooltip {
- white-space: nowrap;
- }
- `;
+ .aboveButton {
+ border-bottom-width: 0;
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ }
+ .belowButton {
+ border-top-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+ padding: var(--spacing-xxs) var(--spacing-l);
+ margin-top: calc(var(--divider-height) + 2 * var(--spacing-xxs));
+ }
+ .belowButton:first-child {
+ margin-top: 0;
+ }
+ .breadcrumbTooltip {
+ white-space: nowrap;
+ }
+ `,
+ ];
+ }
constructor() {
super();
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts
index 645de1b..4f05cca 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-image-viewer.ts
@@ -150,211 +150,218 @@
// TODO(hermannloose): Make GrLibLoader a singleton.
private static readonly libLoader = new GrLibLoader();
- static override styles = css`
- :host {
- display: grid;
- grid-template-rows: 1fr auto;
- grid-template-columns: 1fr auto;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- text-align: initial !important;
- font-size: var(--font-size-normal);
- --image-border-width: 2px;
- }
- .imageArea {
- grid-row-start: 1;
- grid-column-start: 1;
- box-sizing: border-box;
- flex-grow: 1;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- align-items: center;
- margin: var(--spacing-m);
- padding: var(--image-border-width);
- max-height: 100%;
- position: relative;
- }
- #spacer {
- visibility: hidden;
- }
- gr-zoomed-image {
- border: var(--image-border-width) solid;
- margin: calc(-1 * var(--image-border-width));
- box-sizing: content-box;
- position: absolute;
- overflow: hidden;
- cursor: pointer;
- }
- gr-zoomed-image.base {
- border-color: var(--base-image-border-color, rgb(255, 205, 210));
- }
- gr-zoomed-image.revision {
- border-color: var(--revision-image-border-color, rgb(170, 242, 170));
- }
- #automatic-blink-button {
- position: absolute;
- right: var(--spacing-xl);
- bottom: var(--spacing-xl);
- opacity: 0;
- transition: opacity 200ms ease;
- --paper-fab-background: var(--primary-button-background-color);
- --paper-fab-keyboard-focus-background: var(
- --primary-button-background-color
- );
- }
- #automatic-blink-button.show,
- #automatic-blink-button:focus-visible {
- opacity: 1;
- }
- .checkerboard {
- --square-size: var(--checkerboard-square-size, 10px);
- --square-color: var(--checkerboard-square-color, #808080);
- background-color: var(--checkerboard-background-color, #aaaaaa);
- background-image: linear-gradient(
- 45deg,
- var(--square-color) 25%,
- transparent 25%
- ),
- linear-gradient(-45deg, var(--square-color) 25%, transparent 25%),
- linear-gradient(45deg, transparent 75%, var(--square-color) 75%),
- linear-gradient(-45deg, transparent 75%, var(--square-color) 75%);
- background-size: calc(var(--square-size) * 2) calc(var(--square-size) * 2);
- background-position: 0 0, 0 var(--square-size),
- var(--square-size) calc(-1 * var(--square-size)),
- calc(-1 * var(--square-size)) 0;
- }
- .dimensions {
- grid-row-start: 2;
- justify-self: center;
- align-self: center;
- background: var(--primary-button-background-color);
- color: var(--primary-button-text-color);
- font-family: var(--font-family);
- font-size: var(--font-size-small);
- line-height: var(--line-height-small);
- border-radius: var(--border-radius, 4px);
- margin: var(--spacing-s);
- padding: var(--spacing-xxs) var(--spacing-s);
- }
- .controls {
- grid-column-start: 2;
- flex-grow: 0;
- display: flex;
- flex-direction: column;
- align-self: flex-start;
- margin: var(--spacing-m);
- padding-bottom: var(--spacing-xl);
- }
- paper-button {
- padding: var(--spacing-m);
- font: var(--image-diff-button-font);
- text-transform: var(--image-diff-button-text-transform, uppercase);
- outline: 1px solid transparent;
- border: 1px solid var(--primary-button-background-color);
- }
- paper-button.unelevated {
- color: var(--primary-button-text-color);
- background-color: var(--primary-button-background-color);
- }
- paper-button.outlined {
- color: var(--primary-button-background-color);
- }
- #version-switcher {
- display: flex;
- align-items: center;
- margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
- /* Start a stacking context to contain FAB below. */
- z-index: 0;
- }
- #version-switcher paper-button {
- flex-grow: 1;
- margin: 0;
- /*
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: grid;
+ grid-template-rows: 1fr auto;
+ grid-template-columns: 1fr auto;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ text-align: initial !important;
+ font-size: var(--font-size-normal);
+ --image-border-width: 2px;
+ }
+ .imageArea {
+ grid-row-start: 1;
+ grid-column-start: 1;
+ box-sizing: border-box;
+ flex-grow: 1;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin: var(--spacing-m);
+ padding: var(--image-border-width);
+ max-height: 100%;
+ position: relative;
+ }
+ #spacer {
+ visibility: hidden;
+ }
+ gr-zoomed-image {
+ border: var(--image-border-width) solid;
+ margin: calc(-1 * var(--image-border-width));
+ box-sizing: content-box;
+ position: absolute;
+ overflow: hidden;
+ cursor: pointer;
+ }
+ gr-zoomed-image.base {
+ border-color: var(--base-image-border-color, rgb(255, 205, 210));
+ }
+ gr-zoomed-image.revision {
+ border-color: var(--revision-image-border-color, rgb(170, 242, 170));
+ }
+ #automatic-blink-button {
+ position: absolute;
+ right: var(--spacing-xl);
+ bottom: var(--spacing-xl);
+ opacity: 0;
+ transition: opacity 200ms ease;
+ --paper-fab-background: var(--primary-button-background-color);
+ --paper-fab-keyboard-focus-background: var(
+ --primary-button-background-color
+ );
+ }
+ #automatic-blink-button.show,
+ #automatic-blink-button:focus-visible {
+ opacity: 1;
+ }
+ .checkerboard {
+ --square-size: var(--checkerboard-square-size, 10px);
+ --square-color: var(--checkerboard-square-color, #808080);
+ background-color: var(--checkerboard-background-color, #aaaaaa);
+ background-image: linear-gradient(
+ 45deg,
+ var(--square-color) 25%,
+ transparent 25%
+ ),
+ linear-gradient(-45deg, var(--square-color) 25%, transparent 25%),
+ linear-gradient(45deg, transparent 75%, var(--square-color) 75%),
+ linear-gradient(-45deg, transparent 75%, var(--square-color) 75%);
+ background-size: calc(var(--square-size) * 2)
+ calc(var(--square-size) * 2);
+ background-position: 0 0, 0 var(--square-size),
+ var(--square-size) calc(-1 * var(--square-size)),
+ calc(-1 * var(--square-size)) 0;
+ }
+ .dimensions {
+ grid-row-start: 2;
+ justify-self: center;
+ align-self: center;
+ background: var(--primary-button-background-color);
+ color: var(--primary-button-text-color);
+ font-family: var(--font-family);
+ font-size: var(--font-size-small);
+ line-height: var(--line-height-small);
+ border-radius: var(--border-radius, 4px);
+ margin: var(--spacing-s);
+ padding: var(--spacing-xxs) var(--spacing-s);
+ }
+ .controls {
+ grid-column-start: 2;
+ flex-grow: 0;
+ display: flex;
+ flex-direction: column;
+ align-self: flex-start;
+ margin: var(--spacing-m);
+ padding-bottom: var(--spacing-xl);
+ }
+ paper-button {
+ padding: var(--spacing-m);
+ font: var(--image-diff-button-font);
+ text-transform: var(--image-diff-button-text-transform, uppercase);
+ outline: 1px solid transparent;
+ border: 1px solid var(--primary-button-background-color);
+ }
+ paper-button.unelevated {
+ color: var(--primary-button-text-color);
+ background-color: var(--primary-button-background-color);
+ }
+ paper-button.outlined {
+ color: var(--primary-button-background-color);
+ }
+ #version-switcher {
+ display: flex;
+ align-items: center;
+ margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
+ /* Start a stacking context to contain FAB below. */
+ z-index: 0;
+ }
+ #version-switcher paper-button {
+ flex-grow: 1;
+ margin: 0;
+ /*
The floating action button below overlaps part of the version buttons.
This min-width ensures the button text still appears somewhat balanced.
*/
- min-width: 7rem;
- }
- #version-switcher paper-fab {
- /* Round button overlaps Base and Revision buttons. */
- z-index: 1;
- margin: 0 -12px;
- /* Styled as an outlined button. */
- color: var(--primary-button-background-color);
- border: 1px solid var(--primary-button-background-color);
- --paper-fab-background: var(--primary-background-color);
- --paper-fab-keyboard-focus-background: var(--primary-background-color);
- }
- #version-explanation {
- color: var(--deemphasized-text-color);
- text-align: center;
- margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
- }
- #highlight-changes {
- margin: var(--spacing-m) var(--spacing-xl);
- }
- gr-overview-image {
- min-width: 200px;
- min-height: 150px;
- margin-top: var(--spacing-m);
- }
- #zoom-control {
- margin: 0 var(--spacing-xl);
- }
- paper-item {
- cursor: pointer;
- }
- paper-item:hover {
- background-color: var(--hover-background-color);
- }
- #follow-mouse {
- margin: var(--spacing-m) var(--spacing-xl);
- }
- .color-picker {
- margin: var(--spacing-m) var(--spacing-xl) 0;
- }
- .color-picker .label {
- margin-bottom: var(--spacing-s);
- }
- .color-picker .options {
- display: flex;
- /* Ignore selection border for alignment, for visual balance. */
- margin-left: -3px;
- }
- .color-picker-button {
- border-width: 2px;
- border-style: solid;
- border-color: transparent;
- border-radius: 50%;
- width: 24px;
- height: 24px;
- padding: 1px;
- }
- .color-picker-button.selected {
- border-color: var(--primary-button-background-color);
- }
- .color-picker-button:focus-within:not(.selected) {
- /* Not an actual outline, as those do not follow border-radius. */
- border-color: var(--outline-color-focus);
- }
- .color-picker-button .color {
- border: 1px solid var(--border-color);
- border-radius: 50%;
- width: 100%;
- height: 100%;
- box-sizing: border-box;
- }
- #source-plus-highlight-container {
- position: relative;
- }
- #source-plus-highlight-container img {
- position: absolute;
- top: 0;
- left: 0;
- }
- `;
+ min-width: 7rem;
+ }
+ #version-switcher paper-fab {
+ /* Round button overlaps Base and Revision buttons. */
+ z-index: 1;
+ margin: 0 -12px;
+ /* Styled as an outlined button. */
+ color: var(--primary-button-background-color);
+ border: 1px solid var(--primary-button-background-color);
+ --paper-fab-background: var(--primary-background-color);
+ --paper-fab-keyboard-focus-background: var(
+ --primary-background-color
+ );
+ }
+ #version-explanation {
+ color: var(--deemphasized-text-color);
+ text-align: center;
+ margin: var(--spacing-xl) var(--spacing-xl) var(--spacing-m);
+ }
+ #highlight-changes {
+ margin: var(--spacing-m) var(--spacing-xl);
+ }
+ gr-overview-image {
+ min-width: 200px;
+ min-height: 150px;
+ margin-top: var(--spacing-m);
+ }
+ #zoom-control {
+ margin: 0 var(--spacing-xl);
+ }
+ paper-item {
+ cursor: pointer;
+ }
+ paper-item:hover {
+ background-color: var(--hover-background-color);
+ }
+ #follow-mouse {
+ margin: var(--spacing-m) var(--spacing-xl);
+ }
+ .color-picker {
+ margin: var(--spacing-m) var(--spacing-xl) 0;
+ }
+ .color-picker .label {
+ margin-bottom: var(--spacing-s);
+ }
+ .color-picker .options {
+ display: flex;
+ /* Ignore selection border for alignment, for visual balance. */
+ margin-left: -3px;
+ }
+ .color-picker-button {
+ border-width: 2px;
+ border-style: solid;
+ border-color: transparent;
+ border-radius: 50%;
+ width: 24px;
+ height: 24px;
+ padding: 1px;
+ }
+ .color-picker-button.selected {
+ border-color: var(--primary-button-background-color);
+ }
+ .color-picker-button:focus-within:not(.selected) {
+ /* Not an actual outline, as those do not follow border-radius. */
+ border-color: var(--outline-color-focus);
+ }
+ .color-picker-button .color {
+ border: 1px solid var(--border-color);
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ }
+ #source-plus-highlight-container {
+ position: relative;
+ }
+ #source-plus-highlight-container img {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ `,
+ ];
+ }
private renderColorPickerButton(color: string, colorPicked: () => void) {
const selected =
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts
index 21a7cf8..a05b5e2 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-overview-image.ts
@@ -75,39 +75,43 @@
}
);
- static override styles = css`
- :host {
- --background-color: var(--overview-image-background-color, #000);
- --frame-color: var(--overview-image-frame-color, #f00);
- display: flex;
- }
- * {
- box-sizing: border-box;
- }
- ::slotted(*) {
- display: block;
- }
- .content-box {
- border: 1px solid var(--background-color);
- background-color: var(--background-color);
- width: 100%;
- position: relative;
- }
- .content {
- position: absolute;
- cursor: pointer;
- }
- .content-transform {
- position: absolute;
- transform-origin: top left;
- will-change: transform;
- }
- .frame {
- border: 1px solid var(--frame-color);
- position: absolute;
- will-change: transform;
- }
- `;
+ static override get styles() {
+ return [
+ css`
+ :host {
+ --background-color: var(--overview-image-background-color, #000);
+ --frame-color: var(--overview-image-frame-color, #f00);
+ display: flex;
+ }
+ * {
+ box-sizing: border-box;
+ }
+ ::slotted(*) {
+ display: block;
+ }
+ .content-box {
+ border: 1px solid var(--background-color);
+ background-color: var(--background-color);
+ width: 100%;
+ position: relative;
+ }
+ .content {
+ position: absolute;
+ cursor: pointer;
+ }
+ .content-transform {
+ position: absolute;
+ transform-origin: top left;
+ will-change: transform;
+ }
+ .frame {
+ border: 1px solid var(--frame-color);
+ position: absolute;
+ will-change: transform;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts
index 7b46c51..3b778b1 100644
--- a/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts
+++ b/polygerrit-ui/app/embed/diff/gr-diff-image-viewer/gr-zoomed-image.ts
@@ -25,25 +25,29 @@
@state() protected imageStyles: StyleInfo = {};
- static override styles = css`
- :host {
- display: block;
- }
- ::slotted(*) {
- display: block;
- }
- #clip {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- }
- #transform {
- position: absolute;
- transform-origin: top left;
- will-change: transform;
- }
- `;
+ static override get styles() {
+ return [
+ css`
+ :host {
+ display: block;
+ }
+ ::slotted(*) {
+ display: block;
+ }
+ #clip {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ }
+ #transform {
+ position: absolute;
+ transform-origin: top left;
+ will-change: transform;
+ }
+ `,
+ ];
+ }
override render() {
return html`
diff --git a/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts b/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts
index 68aa3b4..756f6fa 100644
--- a/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts
+++ b/polygerrit-ui/app/embed/diff/gr-selection-action-box/gr-selection-action-box.ts
@@ -40,20 +40,22 @@
this.addEventListener('mousedown', e => this.handleMouseDown(e));
}
- static override styles = [
- sharedStyles,
- css`
- :host {
- cursor: pointer;
- font-family: var(--font-family);
- position: absolute;
- white-space: nowrap;
- }
- gr-tooltip[invisible] {
- visibility: hidden;
- }
- `,
- ];
+ static override get styles() {
+ return [
+ sharedStyles,
+ css`
+ :host {
+ cursor: pointer;
+ font-family: var(--font-family);
+ position: absolute;
+ white-space: nowrap;
+ }
+ gr-tooltip[invisible] {
+ visibility: hidden;
+ }
+ `,
+ ];
+ }
override render() {
return html`
