EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-2309 sitehome: Style changes

main
Pau Ferrer Ocaña 2018-01-24 11:35:49 +01:00 committed by Dani Palou
parent 3cb62c748c
commit 347a849551
14 changed files with 134 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/addon/calendar/pages/event/event.html
View File

@ -7,7 +7,7 @@
<ion-refresher [enabled]="eventLoaded" (ionRefresh)="refreshEvent($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="eventLoaded" class="core-loading-center">
<core-loading [hideUntil]="eventLoaded">
<ion-card>
<ion-card-content>
<ion-card-title text-wrap>

2
src/addon/calendar/pages/list/list.html
View File

@ -16,7 +16,7 @@
<ion-refresher [enabled]="eventsLoaded" (ionRefresh)="refreshEvents($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
<core-loading [hideUntil]="eventsLoaded" class="core-loading-center">
<core-loading [hideUntil]="eventsLoaded">
<core-empty-box *ngIf="!filteredEvents || !filteredEvents.length" icon="calendar" [message]="'addon.calendar.noevents' | translate">
</core-empty-box>

5
src/app/app.ios.scss
View File

@ -16,6 +16,11 @@
color: $toolbar-ios-button-color;
}
.item-ios ion-spinner[item-start],
.item-ios ion-spinner[item-end] {
@include margin($item-ios-padding-icon-top, null, $item-ios-padding-icon-bottom, 0);
}
// Highlights inside the input element.
@if ($core-text-input-ios-show-highlight) {
.card-ios, .list-ios {

5
src/app/app.md.scss
View File

@ -16,6 +16,11 @@
color: $toolbar-md-button-color;
}
.item-md ion-spinner[item-start] + .item-inner,
.item-md ion-spinner[item-start] + .item-input {
@include margin-horizontal($item-md-padding-start + ($item-md-padding-start / 2) - 1, null);
}
// Highlights inside the input element.
@if ($core-text-input-md-show-highlight) {
.card-md, .list-md {

5
src/app/app.wp.scss
View File

@ -15,3 +15,8 @@
.bar-buttons core-context-menu .button-clear-wp {
color: $toolbar-wp-button-color;
}
.item-wp ion-spinner[item-start] + .item-inner,
.item-wp ion-spinner[item-start] + .item-input {
@include margin-horizontal(($item-wp-padding-start / 2), null);
}

4
src/components/loading/loading.scss
View File

@ -15,8 +15,8 @@ core-loading {
}
}
.scroll-content > .padding > core-loading > .core-loading-container,
ion-content[padding] > .scroll-content > core-loading > .core-loading-container,
.scroll-content > core-loading > .core-loading-container,
ion-content > .scroll-content > core-loading > .core-loading-container,
.core-loading-center .core-loading-container {
position: absolute;
top: 0;

15
src/components/tabs/tab.ts
View File

@ -12,8 +12,10 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ContentChild, TemplateRef } from '@angular/core';
import { Component, Input, Output, OnInit, OnDestroy, ElementRef, EventEmitter, ContentChild, TemplateRef,
ViewChild } from '@angular/core';
import { CoreTabsComponent } from './tabs';
import { Content } from 'ionic-angular';
/**
* A tab to use inside core-tabs. The content of this tab will be displayed when the tab is selected.
@ -49,6 +51,7 @@ export class CoreTabComponent implements OnInit, OnDestroy {
@Output() ionSelect: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>();
@ContentChild(TemplateRef) template: TemplateRef<any> // Template defined by the content.
@ContentChild(Content) scroll: Content;
element: HTMLElement; // The core-tab element.
loaded = false;
@ -76,8 +79,18 @@ export class CoreTabComponent implements OnInit, OnDestroy {
*/
selectTab() {
this.element.classList.add('selected');
this.loaded = true;
this.ionSelect.emit(this);
// Setup tab scrolling.
setTimeout(() => {
if (this.scroll) {
this.scroll.getScrollElement().onscroll = (e) => {
this.tabs.showHideTabs(e);
}
}
}, 1);
}
/**

4
src/components/tabs/tabs.html
View File

@ -1,5 +1,5 @@
<core-loading [hideUntil]="hideUntil">
<div class="core-tabs-bar">
<core-loading [hideUntil]="hideUntil" class="core-loading-center">
<div class="core-tabs-bar" #topTabs>
<ng-container *ngFor="let tab of tabs; let idx = index">
<a *ngIf="tab.show" [attr.aria-selected]="selected == idx" (click)="selectTab(idx)">
<ion-icon *ngIf="tab.icon" [name]="tab.icon"></ion-icon>

15
src/components/tabs/tabs.scss
View File

@ -1,7 +1,6 @@
core-tabs {
.core-tabs-bar {
@include position(null, null, 0, 0);
z-index: $z-index-toolbar;
display: flex;
width: 100%;
@ -21,11 +20,19 @@ core-tabs {
}
}
}
.core-tabs-content-container {
height: 100%;
}
&.tabs-hidden {
.core-tabs-bar {
display: none !important;
}
.core-tabs-content-container {
padding-bottom: 0 !important;
}
}
core-tab {
display: none;
height: 100%;
@ -35,3 +42,7 @@ core-tabs {
}
}
}
.scroll-content.no-scroll {
overflow: hidden !important;
}

44
src/components/tabs/tabs.ts
View File

@ -15,6 +15,7 @@
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, AfterViewInit, ViewChild, ElementRef,
SimpleChange } from '@angular/core';
import { CoreTabComponent } from './tab';
import { Content } from 'ionic-angular';
/**
* This component displays some tabs that usually share data between them.
@ -43,6 +44,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
@Input() hideUntil: boolean; // Determine when should the contents be shown.
@Output() ionChange: EventEmitter<CoreTabComponent> = new EventEmitter<CoreTabComponent>(); // Emitted when the tab changes.
@ViewChild('originalTabs') originalTabsRef: ElementRef;
@ViewChild('topTabs') topTabs: ElementRef;
tabs: CoreTabComponent[] = []; // List of tabs.
selected: number; // Selected tab number.
@ -50,13 +52,27 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
protected initialized = false;
protected afterViewInitTriggered = false;
constructor() {}
protected topTabsElement: HTMLElement; // The container of the original tabs. It will include each tab's content.
protected tabBarHeight;
protected tabBarElement: HTMLElement; // Host element.
protected tabsShown = true;
protected scroll: HTMLElement; // Parent scroll element (if core-tabs is inside a ion-content).
constructor(element: ElementRef, content: Content) {
this.tabBarElement = element.nativeElement;
setTimeout(() => {
if (content) {
this.scroll = content.getScrollElement();
}
}, 1);
}
/**
* Component being initialized.
*/
ngOnInit() {
this.originalTabsContainer = this.originalTabsRef.nativeElement;
this.topTabsElement = this.topTabs.nativeElement;
}
/**
@ -144,9 +160,35 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges {
this.selectTab(selectedIndex);
}
// Setup tab scrolling.
this.tabBarHeight = this.topTabsElement.offsetHeight;
this.originalTabsContainer.style.paddingBottom = this.tabBarHeight + 'px';
if (this.scroll) {
this.scroll.classList.add('no-scroll');
}
this.initialized = true;
}
/**
* Show or hide the tabs. This is used when the user is scrolling inside a tab.
*
* @param {any} e Scroll event.
*/
showHideTabs(e: any) : void {
if (e.target.scrollTop < this.tabBarHeight) {
if (!this.tabsShown) {
this.tabBarElement.classList.remove('tabs-hidden');
this.tabsShown = true;
}
} else {
if (this.tabsShown) {
this.tabBarElement.classList.add('tabs-hidden');
this.tabsShown = false;
}
}
}
/**
* Remove a tab from the list of tabs.
*

1
src/core/courses/pages/categories/categories.html
View File

@ -23,7 +23,6 @@
<ion-icon name="folder" item-start></ion-icon>
<h2><core-format-text [text]="category.name"></core-format-text></h2>
<ion-badge item-end *ngIf="category.coursecount > 0" color="light">{{category.coursecount}}</ion-badge>
<ion-icon item-end name="arrow-forward" md="ios-arrow-forward" class="icon-accessory"></ion-icon>
</a>
</section>
</div>

16
src/core/courses/pages/my-courses/my-courses.html
View File

@ -19,11 +19,19 @@
</ion-refresher>
<core-loading [hideUntil]="coursesLoaded">
<ion-item *ngIf="showFilter" class="item-transparent">
<ion-icon name="funnel" class="placeholder-icon" item-start></ion-icon>
<ion-input type="text" name="filter" placeholder="{{ 'core.courses.filtermycourses' | translate }}" [(ngModel)]="filter" (ngModelChange)="filterChanged($event)"></ion-input>
<div no-padding padding-bottom *ngIf="showFilter">
<ion-item class="item-transparent">
<ion-label item-start><ion-icon name="funnel" class="placeholder-icon"></ion-icon></ion-label>
<ion-input type="text" name="filter" clearInput [(ngModel)]="filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input>
</ion-item>
<core-courses-course-progress *ngFor="let course of filteredCourses" [course]="course" showSummary="true"></core-courses-course-progress>
</div>
<ion-grid no-padding>
<ion-row no-padding>
<ion-col *ngFor="let course of filteredCourses" no-padding col-12 col-sm-6 col-md-6 col-lg-4 col-xl-4 align-self-stretch>
<core-courses-course-progress [course]="course" class="core-courseoverview"></core-courses-course-progress>
</ion-col>
</ion-row>
</ion-grid>
<core-empty-box *ngIf="!courses || !courses.length" icon="ionic" [message]="'core.courses.nocourses' | translate">
<p *ngIf="searchEnabled">{{ 'core.courses.searchcoursesadvice' | translate }}</p>
</core-empty-box>

2
src/core/courses/pages/my-overview/my-overview.html
View File

@ -82,7 +82,7 @@
<!-- Filter courses. -->
<div no-padding padding-bottom [hidden]="!showFilter">
<ion-item>
<ion-label><ion-icon name="funnel" class="placeholder-icon"></ion-icon></ion-label>
<ion-label item-start><ion-icon name="funnel" class="placeholder-icon"></ion-icon></ion-label>
<ion-input type="text" name="filter" clearInput [(ngModel)]="courses.filter" (ngModelChange)="filterChanged($event)" [placeholder]="'core.courses.filtermycourses' | translate"></ion-input>
</ion-item>
</div>

18
src/core/sitehome/components/index/index.html
View File

@ -5,34 +5,38 @@
<core-loading [hideUntil]="dataLoaded">
<ion-list>
<!-- Site home main contents. -->
<ion-card *ngIf="section && section.hasContent">
<ng-container *ngIf="section && section.hasContent">
<ion-item text-wrap *ngIf="section.summary">
<core-format-text [text]="section.summary"></core-format-text>
</ion-item>
<core-course-module *ngFor="let module of section.modules" [module]="module" [courseId]="siteHomeId"></core-course-module>
</ion-card>
</ng-container>
<!-- Site home items: news, categories, courses, etc. -->
<ion-card *ngIf="items.length > 0">
<ng-container *ngIf="items.length > 0">
<ion-item-divider color="light" *ngIf="section && section.hasContent"></ion-item-divider>
<ng-container *ngFor="let item of items">
<core-sitehome-all-course-list *ngIf="item == 'all-course-list'"></core-sitehome-all-course-list>
<core-sitehome-all-course-list class="item" *ngIf="item == 'all-course-list'"></core-sitehome-all-course-list>
<core-sitehome-categories *ngIf="item == 'categories'"></core-sitehome-categories>
<core-sitehome-course-search *ngIf="item == 'course-search'"></core-sitehome-course-search>
<core-sitehome-enrolled-course-list *ngIf="item == 'enrolled-course-list'"></core-sitehome-enrolled-course-list>
<core-sitehome-news *ngIf="item == 'news'"></core-sitehome-news>
</ng-container>
</ion-card>
</ng-container>
<!-- Site home block. -->
<ion-card *ngIf="block && block.hasContent">
<ng-container *ngIf="block && block.hasContent">
<ion-item-divider color="light" *ngIf="(section && section.hasContent) || items.length > 0"></ion-item-divider>
<ion-item text-wrap *ngIf="block.summary">
<core-format-text [text]="block.summary"></core-format-text>
</ion-item>
<core-course-module *ngFor="let module of block.modules" [module]="module" [courseId]="siteHomeId"></core-course-module>
</ion-card>
</ng-container>
</ion-list>
<core-empty-box *ngIf="!hasContent" icon="qr-scanner" [message]="'core.course.nocontentavailable' | translate"></core-empty-box>
</core-loading>