diff --git a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html index 1c55aafb3..8852c7a00 100644 --- a/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html +++ b/src/addons/block/myoverview/components/myoverview/addon-block-myoverview.html @@ -71,7 +71,7 @@ + icon="fas-arrow-down-short-wide" class="no-border"> {{'addon.block_myoverview.title' | translate}} diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.scss b/src/addons/block/myoverview/components/myoverview/myoverview.scss index 9592ab859..563fadfbd 100644 --- a/src/addons/block/myoverview/components/myoverview/myoverview.scss +++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss @@ -10,24 +10,19 @@ } ion-button, - core-combobox ::ng-deep ion-button { - --border-width: 0; + core-combobox ::ng-deep ion-select { --a11y-min-target-size: 40px; margin: 0; + } + + ion-button { + --border-width: 0; - .select-icon { - display: none; - } ion-icon { font-size: 20px; } } - core-combobox ::ng-deep ion-select { - margin: 0; - --a11y-min-target-size: 40px; - } - ion-searchbar { padding: 0; --height: 40px; diff --git a/src/addons/block/timeline/components/timeline/addon-block-timeline.html b/src/addons/block/timeline/components/timeline/addon-block-timeline.html index 4aca795d0..0b7d03d0d 100644 --- a/src/addons/block/timeline/components/timeline/addon-block-timeline.html +++ b/src/addons/block/timeline/components/timeline/addon-block-timeline.html @@ -36,7 +36,7 @@ + icon="fas-arrow-down-short-wide" class="no-border"> {{ option.name | translate }} diff --git a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png index 87aa8ca9c..e801c2db6 100644 Binary files a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png and b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png differ diff --git a/src/core/components/combobox/combobox.scss b/src/core/components/combobox/combobox.scss index 80c9379ad..9e61dfed6 100644 --- a/src/core/components/combobox/combobox.scss +++ b/src/core/components/combobox/combobox.scss @@ -5,30 +5,94 @@ display: block; @include margin-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right)); + &.no-border { + --core-combobox-border-width: 0px; + + ion-select.combobox-icon-only { + --padding-start: 8px; + + &::part(icon) { + display: none; + } + + &::part(label) { + position: static; + } + + ion-icon { + margin: var(--icon-margin); + font-size: 20px; + } + } + } + + ion-select, ion-button { --icon-margin: 0 4px; - --background: var(--core-combobox-background); - --background-hover: black; - --background-activated: black; - --background-focused: black; - --background-hover-opacity: .04; + --background: var(--core-combobox-background); + + --border-color: var(--core-combobox-border-color); + --border-style: solid; + --border-width: var(--core-combobox-border-width); + --border-radius: var(--core-combobox-radius); + + --box-shadow: var(--core-combobox-box-shadow); + + --padding-start: 16px; + --padding-end: 8px; + --padding-top: 8px; + --padding-bottom: 8px; + + background: var(--background); + color: var(--color); + text-overflow: ellipsis; + white-space: nowrap; + min-height: var(--a11y-min-target-size); + overflow: hidden; + box-shadow: var(--box-shadow); + + &:focus, + &:focus-within { + @include core-focus-style(); + } + } + + ion-select { + border-color: var(--border-color); + border-style: var(--border-style); + border-width: var(--border-width); + border-radius: var(--core-combobox-radius); + margin: 8px; + + &.combobox-icon-only { + &::part(text) { + display: none; + } + } + + &::part(label) { + position: absolute; + margin-inline: 0px; + } + + &::part(icon) { + margin: var(--icon-margin); + opacity: 1; + } + } + + ion-button { --color: var(--core-combobox-color); --color-activated: var(--core-combobox-color); --color-focused: currentcolor; --color-hover: currentcolor; - --border-color: var(--core-combobox-border-color); - --border-style: solid; - --border-width: var(--core-combobox-border-width); - --border-radius: var(--radius-xs); - - --box-shadow: var(--core-combobox-box-shadow); - - --padding-top: 8px; - --padding-end: 8px; - --padding-bottom: 8px; + --background-hover: black; + --background-activated: black; + --background-focused: black; + --background-hover-opacity: .04; &.md { --background-activated-opacity: 0; @@ -39,97 +103,36 @@ --background-activated-opacity: .12; --background-focused-opacity: .15; } - } - ion-button { - --padding-start: 8px; - } - - ion-select { - --padding-start: 16px; - } -} - -ion-select, -ion-button { - background: var(--background); - color: var(--color); - text-overflow: ellipsis; - white-space: nowrap; - min-height: var(--a11y-min-target-size); - overflow: hidden; - box-shadow: var(--box-shadow); - - &:focus, - &:focus-within { - @include core-focus-style(); - } -} - -ion-select { - border-color: var(--border-color); - border-style: var(--border-style); - border-width: var(--border-width); - border-radius: var(--core-combobox-radius); - margin: 8px; - - &::part(icon) { - margin: var(--icon-margin); - opacity: 1; - } - - &::after { - @include button-state(); - transition: var(--transition); - z-index: -1; - } - - &:hover::after { - color: var(--color-hover); - background: var(--background-hover); - opacity: var(--background-hover-opacity); - } - - &:focus::after, - &:focus-within::after { - color: var(--color-focused); - background: var(--background-focused); - opacity: var(--background-focused-opacity); - } - - &[hidden] { - display: none !important; - } -} - -ion-button { - border-radius: var(--core-combobox-radius); - margin: 4px 8px; - - flex: 1; - - &::part(native) { - text-transform: none; - font-weight: 400; - font-size: 16px; - line-height: 20px; border-radius: var(--core-combobox-radius); + margin: 4px 8px; + + flex: 1; + + &::part(native) { + text-transform: none; + font-weight: 400; + font-size: 16px; + line-height: 20px; + border-radius: var(--core-combobox-radius); + } + + .select-text { + @include margin-horizontal(null, auto); + overflow: hidden; + text-overflow: ellipsis; + } + .sr-only { + @include sr-only(); + } + + &.ion-activated { + --color: var(--color-activated); + } + + ion-icon { + margin: var(--icon-margin); + } } - .select-text { - @include margin-horizontal(null, auto); - overflow: hidden; - text-overflow: ellipsis; - } - .sr-only { - @include sr-only(); - } - - &.ion-activated { - --color: var(--color-activated); - } - - ion-icon { - margin: var(--icon-margin); - } } diff --git a/src/core/components/combobox/combobox.ts b/src/core/components/combobox/combobox.ts index 97414ae21..ddf7e75e8 100644 --- a/src/core/components/combobox/combobox.ts +++ b/src/core/components/combobox/combobox.ts @@ -12,11 +12,10 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { Component, EventEmitter, Input, Output, ViewChild } from '@angular/core'; +import { Component, EventEmitter, Input, Output } from '@angular/core'; import { Translate } from '@singletons'; import { ModalOptions } from '@ionic/core'; import { CoreDomUtils } from '@services/utils/dom'; -import { IonSelect } from '@ionic/angular'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; /** @@ -51,8 +50,6 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; }) export class CoreComboboxComponent implements ControlValueAccessor { - @ViewChild(IonSelect) select?: IonSelect; - @Input() interface: 'popover' | 'modal' = 'popover'; @Input() label = Translate.instant('core.show'); // Aria label. @Input() disabled = false; @@ -112,30 +109,25 @@ export class CoreComboboxComponent implements ControlValueAccessor { /** * Shows combobox modal. * - * @param event Event. * @returns Promise resolved when done. */ - async openSelect(event?: UIEvent): Promise { + async openModal(): Promise { this.touch(); - if (this.interface === 'modal') { - if (this.expanded || !this.modalOptions) { - return; - } - this.expanded = true; + if (this.expanded || !this.modalOptions) { + return; + } + this.expanded = true; - if (this.listboxId) { - this.modalOptions.id = this.listboxId; - } + if (this.listboxId) { + this.modalOptions.id = this.listboxId; + } - const data = await CoreDomUtils.openModal(this.modalOptions); - this.expanded = false; + const data = await CoreDomUtils.openModal(this.modalOptions); + this.expanded = false; - if (data) { - this.onValueChanged(data); - } - } else if (this.select) { - this.select.open(event); + if (data) { + this.onValueChanged(data); } } diff --git a/src/core/components/combobox/core-combobox.html b/src/core/components/combobox/core-combobox.html index 8d0868bc5..212de4608 100644 --- a/src/core/components/combobox/core-combobox.html +++ b/src/core/components/combobox/core-combobox.html @@ -1,18 +1,17 @@ - - - - + [interface]="interface" [disabled]="disabled" [class.combobox-icon-only]="icon" [interfaceOptions]="{alignment: 'start', arrow: false}"> +
+ {{ label }} +
+
+ [attr.aria-expanded]="expanded" (click)="openModal()" [disabled]="disabled" expand="block" role="combobox">