Merge "gr-confirm-rebase-dialog: Replace basic checkbox and radion with md-checkbox/md-radio"
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 a5331c0..a505180 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
@@ -32,6 +32,10 @@
import {formStyles} from '../../../styles/form-styles';
import {GrValidationOptions} from '../gr-validation-options/gr-validation-options';
import {GrChangeAutocomplete} from '../gr-change-autocomplete/gr-change-autocomplete';
+import '@material/web/radio/radio';
+import {MdRadio} from '@material/web/radio/radio';
+import {materialStyles} from '../../../styles/gr-material-styles';
+import '@material/web/checkbox/checkbox';
export interface ConfirmRebaseEventDetail {
base: string | null;
@@ -95,13 +99,13 @@
committerEmailDropdownItems: EmailInfo[] = [];
@query('#rebaseOnParentInput')
- private rebaseOnParentInput?: HTMLInputElement;
+ private rebaseOnParentInput?: MdRadio;
@query('#rebaseOnTipInput')
- private rebaseOnTipInput?: HTMLInputElement;
+ private rebaseOnTipInput?: MdRadio;
@query('#rebaseOnOtherInput')
- rebaseOnOtherInput?: HTMLInputElement;
+ rebaseOnOtherInput?: MdRadio;
@query('#rebaseAllowConflicts')
private rebaseAllowConflicts?: HTMLInputElement;
@@ -185,6 +189,7 @@
return [
formStyles,
sharedStyles,
+ materialStyles,
css`
:host {
display: block;
@@ -206,10 +211,12 @@
width: 100%;
}
.rebaseCheckbox {
- margin-top: var(--spacing-m);
+ display: flex;
+ align-items: center;
}
.rebaseOption {
- margin: var(--spacing-m) 0;
+ display: flex;
+ align-items: center;
}
.rebaseOnBehalfMsg {
margin-top: var(--spacing-m);
@@ -237,7 +244,12 @@
class="rebaseOption"
?hidden=${!this.displayParentOption()}
>
- <input id="rebaseOnParentInput" name="rebaseOptions" type="radio" />
+ <md-radio
+ id="rebaseOnParentInput"
+ name="rebaseOptions"
+ touch-target="wrapper"
+ >
+ </md-radio>
<label id="rebaseOnParentLabel" for="rebaseOnParentInput">
Rebase on parent change
</label>
@@ -257,12 +269,13 @@
class="rebaseOption"
?hidden=${!this.displayTipOption()}
>
- <input
+ <md-radio
id="rebaseOnTipInput"
name="rebaseOptions"
- type="radio"
+ touch-target="wrapper"
?disabled=${!this.displayTipOption()}
- />
+ >
+ </md-radio>
<label id="rebaseOnTipLabel" for="rebaseOnTipInput">
Rebase on top of the ${this.branch} branch<span
?hidden=${!this.hasParent || this.shouldRebaseChain}
@@ -279,12 +292,13 @@
Change is up to date with the target branch already (${this.branch})
</div>
<div id="rebaseOnOther" class="rebaseOption">
- <input
+ <md-radio
id="rebaseOnOtherInput"
name="rebaseOptions"
- type="radio"
+ touch-target="wrapper"
@click=${this.handleRebaseOnOther}
- />
+ >
+ </md-radio>
<label id="rebaseOnOtherLabel" for="rebaseOnOtherInput">
Rebase on a specific change, ref, or commit
<span ?hidden=${!this.hasParent || this.shouldRebaseChain}>
@@ -303,14 +317,14 @@
</gr-change-autocomplete>
</div>
<div class="rebaseCheckbox">
- <input
+ <md-checkbox
id="rebaseAllowConflicts"
- type="checkbox"
+ touch-target="wrapper"
@change=${() => {
this.allowConflicts = !!this.rebaseAllowConflicts?.checked;
this.loadCommitterEmailDropdownItems();
}}
- />
+ ></md-checkbox>
<label for="rebaseAllowConflicts"
>Allow rebase with conflicts</label
>
@@ -330,16 +344,16 @@
this.hasParent,
() =>
html`<div class="rebaseCheckbox">
- <input
+ <md-checkbox
id="rebaseChain"
- type="checkbox"
+ touch-target="wrapper"
@change=${() => {
this.shouldRebaseChain = !!this.rebaseChain?.checked;
if (this.shouldRebaseChain) {
this.selectedEmailForRebase = undefined;
}
}}
- />
+ ></md-checkbox>
<label for="rebaseChain">Rebase all ancestors</label>
</div>`
)}
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog_test.ts b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog_test.ts
index eaac257..5848729 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog_test.ts
@@ -60,7 +60,13 @@
<div class="header" slot="header">Confirm rebase</div>
<div class="main" slot="main">
<div class="rebaseOption" hidden="" id="rebaseOnParent">
- <input id="rebaseOnParentInput" name="rebaseOptions" type="radio" />
+ <md-radio
+ id="rebaseOnParentInput"
+ name="rebaseOptions"
+ tabindex="0"
+ touch-target="wrapper"
+ >
+ </md-radio>
<label for="rebaseOnParentInput" id="rebaseOnParentLabel">
Rebase on parent change
</label>
@@ -72,12 +78,14 @@
This change is up to date with its parent.
</div>
<div class="rebaseOption" hidden="" id="rebaseOnTip">
- <input
+ <md-radio
disabled=""
id="rebaseOnTipInput"
name="rebaseOptions"
- type="radio"
- />
+ tabindex="0"
+ touch-target="wrapper"
+ >
+ </md-radio>
<label for="rebaseOnTipInput" id="rebaseOnTipLabel">
Rebase on top of the test branch
<span hidden=""> (breaks relation chain) </span>
@@ -87,7 +95,13 @@
Change is up to date with the target branch already (test)
</div>
<div class="rebaseOption" id="rebaseOnOther">
- <input id="rebaseOnOtherInput" name="rebaseOptions" type="radio" />
+ <md-radio
+ id="rebaseOnOtherInput"
+ name="rebaseOptions"
+ tabindex="0"
+ touch-target="wrapper"
+ >
+ </md-radio>
<label for="rebaseOnOtherInput" id="rebaseOnOtherLabel">
Rebase on a specific change, ref, or commit
<span hidden=""> (breaks relation chain) </span>
@@ -97,7 +111,8 @@
<gr-change-autocomplete> </gr-change-autocomplete>
</div>
<div class="rebaseCheckbox">
- <input id="rebaseAllowConflicts" type="checkbox" />
+ <md-checkbox id="rebaseAllowConflicts" touch-target="wrapper">
+ </md-checkbox>
<label for="rebaseAllowConflicts">
Allow rebase with conflicts
</label>
