MOBILE-2430 ux: Solve minor ux problems

main
Pau Ferrer Ocaña 2018-06-19 12:29:12 +02:00
parent 757882428f
commit f189c6e815
11 changed files with 46 additions and 15 deletions

View File

@ -68,6 +68,7 @@ export class AddonModForumDiscussionPage implements OnDestroy {
};
refreshIcon = 'spinner';
syncIcon = 'spinner';
discussionStr = '';
protected cmId: number;
protected forumId: number;
@ -101,6 +102,8 @@ export class AddonModForumDiscussionPage implements OnDestroy {
this.isOnline = this.appProvider.isOnline();
});
this.isSplitViewOn = this.svComponent && this.svComponent.isOn();
this.discussionStr = translate.instant('addon.mod_forum.discussion');
}
/**

View File

@ -107,7 +107,7 @@
</ng-container>
<ion-item>
<button ion-button block (click)="submitQuestion()">{{ question.submitLabel }}</button>
<button ion-button block (click)="submitQuestion()" class="button-no-uppercase">{{ question.submitLabel }}</button>
</ion-item>
</form>
</ion-card>
@ -117,7 +117,7 @@
<ion-grid text-wrap *ngIf="pageButtons && pageButtons.length" class="addon-mod_lesson-pagebuttons">
<ion-row align-items-center>
<ion-col *ngFor="let button of pageButtons" col-12 col-md-6 col-lg-3 col-xl>
<a ion-button block outline text-wrap [id]="button.id" (click)="buttonClicked(button.data)">{{ button.content }}</a>
<a ion-button block outline text-wrap [id]="button.id" (click)="buttonClicked(button.data)" class="button-no-uppercase">{{ button.content }}</a>
</ion-col>
</ion-row>
</ion-grid>
@ -174,7 +174,7 @@
<core-format-text [text]="eolData.displayofgrade.message"></core-format-text>
</ion-item>
<ion-item text-wrap *ngIf="eolData.reviewlesson">
<a ion-button block (click)="reviewLesson(eolData.reviewlesson.pageid)">
<a ion-button block (click)="reviewLesson(eolData.reviewlesson.pageid)" class="button-no-uppercase">
<core-format-text [text]="'addon.mod_lesson.reviewlesson' | translate"></core-format-text>
</a>
</ion-item>
@ -184,7 +184,7 @@
<ion-item text-wrap *ngIf="eolData.activitylink && eolData.activitylink.value">
<ng-container *ngIf="eolData.activitylink.value.formatted">
<!-- Activity link was successfully formatted, render the button. -->
<a ion-button block color="light" [href]="eolData.activitylink.value.href" core-link [capture]="true">
<a ion-button block color="light" [href]="eolData.activitylink.value.href" core-link [capture]="true" class="button-no-uppercase">
<core-format-text [text]="eolData.activitylink.value.label"></core-format-text>
</a>
</ng-container>

View File

@ -12,10 +12,12 @@ page-addon-mod-lesson-player {
.addon-mod_lesson-pagebuttons .button-block {
contain: content;
height: auto;
height: 100%;
display: flex;
flex-direction: column;
.button-inner {
height: auto;
flex-grow: 1;
}
}
}

View File

@ -39,6 +39,10 @@
.core-big { font-size: 115%; }
.invisible { visibility: hidden; }
.button-no-uppercase {
text-transform: none;
}
@include media-breakpoint-up(sm) {
.core-center-view .scroll-content {
display: flex!important;

View File

@ -9,7 +9,7 @@ core-loading {
}
.core-loading-content {
display: unset;
display: inline;
padding-bottom: 1px; /* This makes height be real */
}
@ -21,7 +21,7 @@ core-loading {
.scroll-content > core-loading,
ion-content > .scroll-content > core-loading,
.core-loading-center {
position: unset !important;
position: static !important;
}
.scroll-content > core-loading,

View File

@ -18,6 +18,14 @@
font-size: 1.6rem;
border: 0;
span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
word-wrap: break-word;
display: block;
}
&[aria-selected=true] {
color: $core-top-tabs-color-active !important;
border: 0 !important;

View File

@ -16,7 +16,7 @@
<!-- Section selector. -->
<core-dynamic-component [component]="sectionSelectorComponent" [data]="data">
<div text-wrap *ngIf="displaySectionSelector && sections && sections.length" no-padding class="clearfix">
<button float-start ion-button (click)="showSectionSelector($event)" clear class="core-button-select">
<button float-start ion-button (click)="showSectionSelector($event)" clear class="core-button-select button-no-uppercase">
{{selectedSection && (selectedSection.formattedName || selectedSection.name) || 'core.course.sections' | translate }}
<ion-icon name="arrow-dropdown" ios="md-arrow-dropdown"></ion-icon>
</button>

View File

@ -19,7 +19,7 @@
</ion-refresher>
<core-loading [hideUntil]="coursesLoaded">
<ion-searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
<ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
</ion-searchbar>
<ion-grid no-padding>
<ion-row no-padding>

View File

@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnDestroy } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { Component, OnDestroy, ViewChild } from '@angular/core';
import { IonicPage, Searchbar, NavController } from 'ionic-angular';
import { CoreEventsProvider } from '@providers/events';
import { CoreSitesProvider } from '@providers/sites';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
@ -31,6 +31,8 @@ import { CoreCourseOptionsDelegate } from '@core/course/providers/options-delega
templateUrl: 'my-courses.html',
})
export class CoreCoursesMyCoursesPage implements OnDestroy {
@ViewChild('searchbar') searchbar: Searchbar;
courses: any[];
filteredCourses: any[];
searchEnabled: boolean;
@ -153,6 +155,11 @@ export class CoreCoursesMyCoursesPage implements OnDestroy {
this.filter = '';
this.showFilter = !this.showFilter;
this.filteredCourses = this.courses;
if (this.showFilter) {
setTimeout(() => {
this.searchbar.setFocus();
});
}
}
/**

View File

@ -80,7 +80,7 @@
</div>
</div>
<!-- Filter courses. -->
<ion-searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
<ion-searchbar #searchbar *ngIf="showFilter" [(ngModel)]="courses.filter" (ionInput)="filterChanged($event)" (ionCancel)="filterChanged()" [placeholder]="'core.courses.filtermycourses' | translate">
</ion-searchbar>
<!-- List of courses. -->
<div>

View File

@ -12,8 +12,8 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, OnDestroy } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { Component, OnDestroy, ViewChild } from '@angular/core';
import { IonicPage, Searchbar, NavController } from 'ionic-angular';
import { CoreEventsProvider } from '@providers/events';
import { CoreSitesProvider } from '@providers/sites';
import { CoreDomUtilsProvider } from '@providers/utils/dom';
@ -34,6 +34,8 @@ import * as moment from 'moment';
templateUrl: 'my-overview.html',
})
export class CoreCoursesMyOverviewPage implements OnDestroy {
@ViewChild('searchbar') searchbar: Searchbar;
firstSelectedTab: number;
siteHomeEnabled: boolean;
tabsReady = false;
@ -245,6 +247,11 @@ export class CoreCoursesMyOverviewPage implements OnDestroy {
this.showFilter = !this.showFilter;
this.courses.filter = '';
this.filteredCourses = this.courses[this.courses.selected];
if (this.showFilter) {
setTimeout(() => {
this.searchbar.setFocus();
});
}
}
/**