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">
- {{ label }}:
+ {{ label }},
{{selection}}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 37c3e2adf..a1543e5b2 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1027,7 +1027,6 @@ input[type=radio],
--border-width: 2px;
--outer-border-width: 2px;
--border-style: solid;
- --inner-border-radius: 50%;
--size: 20px;
&:not(.ion-color) {
@@ -1045,10 +1044,10 @@ input[type=radio],
}
.ios ion-radio {
- width: var(--size);
- height: var(--size);
-
&::part(container) {
+ width: var(--size);
+ height: var(--size);
+
margin: 0px;
border-radius: var(--border-radius);
border-width: var(--outer-border-width);
@@ -1155,6 +1154,13 @@ ion-select {
}
ion-select-popover {
+ ion-list ion-radio-group ion-item.select-interface-option ion-radio.hydrated::part(container) {
+ opacity: 1;
+ }
+
+ ion-item {
+ font-size: 14px;
+ }
ion-item.core-select-option-border-bottom {
border-bottom: 1px solid var(--stroke);
}
@@ -1645,6 +1651,7 @@ ion-item.item {
// Change default outline.
:focus-visible {
@include core-focus-style();
+ border-radius: inherit;
outline: none;
}