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

MOBILE-2795 ux: Fix fab button placement

main
Pau Ferrer Ocaña 2019-01-04 16:39:09 +01:00
parent 49d0b3a121
commit 64a812f822
9 changed files with 66 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addon/files/pages/list/list.html
View File

@ -3,7 +3,7 @@
<ion-title><core-format-text [text]="title"></core-format-text></ion-title>
</ion-navbar>
</ion-header>
<ion-content [class.has-fab]="showUpload && root != 'site' && !path">
<ion-content>
<ion-refresher [enabled]="filesLoaded && (showPrivateFiles || showSiteFiles)" (ionRefresh)="refreshData($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
@ -36,7 +36,7 @@
</core-loading>
<!-- Upload a private file. -->
<ion-fab bottom end *ngIf="showUpload && root != 'site' && !path">
<ion-fab core-fab bottom end *ngIf="showUpload && root != 'site' && !path">
<button ion-fab (click)="uploadFile()" [attr.aria-label]="'core.fileuploader.uploadafile' | translate">
<ion-icon name="add"></ion-icon>
</button>

2
src/addon/mod/data/components/index/addon-mod-data-index.html
View File

@ -92,7 +92,7 @@
</core-loading>
<ion-fab bottom end *ngIf="canAdd">
<ion-fab core-fab bottom end *ngIf="canAdd">
<button ion-fab (click)="gotoAddEntries($event)" [attr.aria-label]="'addon.mod_data.addentries' | translate">
<ion-icon name="add"></ion-icon>
</button>

4
src/addon/mod/forum/components/index/addon-mod-forum-index.html
View File

@ -12,7 +12,7 @@
<!-- Content. -->
<core-split-view>
<ion-content [class.has-fab]="forum && forum.cancreatediscussions">
<ion-content>
<ion-refresher [enabled]="loaded" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
@ -87,7 +87,7 @@
<core-infinite-loading [enabled]="canLoadMore" (action)="fetchMoreDiscussions($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading>
<ion-fab bottom end *ngIf="forum && forum.cancreatediscussions">
<ion-fab core-fab bottom end *ngIf="forum && forum.cancreatediscussions">
<button ion-fab (click)="openNewDiscussion()" [attr.aria-label]="addDiscussionText">
<ion-icon name="add"></ion-icon>
</button>

4
src/addon/mod/glossary/components/index/addon-mod-glossary-index.html
View File

@ -16,7 +16,7 @@
<!-- Content. -->
<core-split-view>
<ion-content [class.has-fab]="canAdd">
<ion-content>
<ion-refresher [enabled]="loaded" (ionRefresh)="doRefresh($event)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>
@ -59,7 +59,7 @@
<core-infinite-loading [enabled]="canLoadMore" (action)="loadMoreEntries($event)" [error]="loadMoreError"></core-infinite-loading>
</core-loading>
<ion-fab bottom end *ngIf="canAdd">
<ion-fab core-fab bottom end *ngIf="canAdd">
<button ion-fab (click)="openNewEntry()" [attr.aria-label]="'addon.mod_glossary.addentry' | translate">
<ion-icon name="add"></ion-icon>
</button>

2
src/addon/mod/wiki/components/index/addon-mod-wiki-index.html
View File

@ -73,7 +73,7 @@
</core-loading>
<ion-fab bottom end *ngIf="canEdit">
<ion-fab core-fab bottom end *ngIf="canEdit">
<button ion-fab (click)="goToNewPage()" [attr.aria-label]="'addon.mod_wiki.createpage' | translate">
<ion-icon name="add"></ion-icon>
</button>

6
src/app/app.scss
View File

@ -678,12 +678,6 @@ ion-app.app-root {
padding-bottom: 56px;
}
.scroll-content ion-fab {
position: fixed;
margin-bottom: 56px;
}
// For some reason, in iOS the pages don't inherit the background-color from ion-app, set it explicitly.
.ion-page {
background-color: $background-color;

4
src/core/login/pages/sites/sites.html
View File

@ -12,7 +12,7 @@
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content class="has-fab">
<ion-content>
<ion-list>
<a ion-item (click)="login(site.id)" *ngFor="let site of sites; let idx = index" detail-none>
<ion-avatar item-start>
@ -27,7 +27,7 @@
</button>
</a>
</ion-list>
<ion-fab bottom end>
<ion-fab core-fab bottom end>
<button ion-fab (click)="add()" [attr.aria-label]="'core.add' | translate">
<ion-icon name="add"></ion-icon>
</button>

3
src/directives/directives.module.ts
View File

@ -16,6 +16,7 @@ import { NgModule } from '@angular/core';
import { CoreAutoFocusDirective } from './auto-focus';
import { CoreDownloadFileDirective } from './download-file';
import { CoreExternalContentDirective } from './external-content';
import { CoreFabDirective } from './fab';
import { CoreFormatTextDirective } from './format-text';
import { CoreLinkDirective } from './link';
import { CoreKeepKeyboardDirective } from './keep-keyboard';
@ -30,6 +31,7 @@ import { CoreSupressEventsDirective } from './supress-events';
CoreAutoFocusDirective,
CoreDownloadFileDirective,
CoreExternalContentDirective,
CoreFabDirective,
CoreFormatTextDirective,
CoreKeepKeyboardDirective,
CoreLinkDirective,
@ -44,6 +46,7 @@ import { CoreSupressEventsDirective } from './supress-events';
CoreAutoFocusDirective,
CoreDownloadFileDirective,
CoreExternalContentDirective,
CoreFabDirective,
CoreFormatTextDirective,
CoreKeepKeyboardDirective,
CoreLinkDirective,

53
src/directives/fab.ts 100644
View File

@ -0,0 +1,53 @@
// (C) Copyright 2015 Martin Dougiamas
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Directive, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { Content } from 'ionic-angular';
/**
* Directive to move ion-fab components as direct children of the nearest ion-content.
*
* Example usage:
*
* <ion-fab core-fab>
*/
@Directive({
selector: 'ion-fab[core-fab]'
})
export class CoreFabDirective implements OnInit, OnDestroy {
protected element: HTMLElement;
constructor(el: ElementRef, protected content: Content) {
this.element = el.nativeElement;
}
/**
* Initialize Component.
*/
ngOnInit(): void {
if (this.content) {
this.content.getNativeElement().classList.add('has-fab');
this.content.getFixedElement().appendChild(this.element);
}
}
/**
* Destroy component.
*/
ngOnDestroy(): void {
if (this.content) {
this.content.getNativeElement().classList.remove('has-fab');
}
}
}