gr-confirm-rebase-dialog: Replace basic checkbox and radion with md-checkbox/md-radio Will create a consistent UI accross different browsers and OS. Release-Notes: gr-confirm-rebase-dialog: Replace basic checkbox and radion with md-checkbox/md-radio Change-Id: I03f7b61e7be0dbaaae2dd802f1c515f8370504ed
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>