An Ionic thumbnail list without using the list directive, but just plain jane HTML/CSS and Angular ng-repeat. With image lazy loadi
Forked from Ionic's Pen Thumbnail List: 1.0.0-beta.12.
| import {Component, ViewChild, Renderer, Input} from '@angular/core'; | |
| import {Platform} from 'ionic-angular'; | |
| @Component({ | |
| selector: 'canvas-draw', | |
| templateUrl: 'canvas-draw.html' | |
| }) | |
| export class CanvasDraw { | |
| @ViewChild('myCanvas') canvas: any; |
| /** | |
| * Switch from back to front cämera | |
| */ | |
| refresh(){ | |
| this.cameraPreview.switchCamera(); | |
| } | |
| /** | |
| * Back button |
| <ion-content padding> | |
| <ion-fab right top small > | |
| <button ion-fab color="danger" (click)="back()"> | |
| <ion-icon name="md-arrow-forward"></ion-icon> | |
| </button> | |
| </ion-fab> | |
| <ion-fab left top small > | |
| <button ion-fab color="danger"> | |
| <ion-icon name="ios-settings"></ion-icon> |
| page-story-photo { | |
| .fab-md-danger { | |
| color: white !important; | |
| background-color: transparent !important; | |
| box-shadow: none !important; | |
| } | |
| .fab-md-dark { | |
| background-color: white; |
| import { Component } from '@angular/core'; | |
| import {NavController, NavParams, Platform} from 'ionic-angular'; | |
| import {CameraPreview} from "@ionic-native/camera-preview"; | |
| @Component({ | |
| selector: 'page-story-photo', | |
| templateUrl: 'story-photo.html', | |
| }) | |
| export class StoryPhotoPage { |
| // this is a custom dictionary to make it easy to extend/override | |
| // provide a name for an entry, it can be anything such as 'copyAssets' or 'copyFonts' | |
| // then provide an object with a `src` array of globs and a `dest` string | |
| module.exports = { | |
| copyAssets: { | |
| src: ['{{SRC}}/assets/**/*'], | |
| dest: '{{WWW}}/assets' | |
| }, | |
| copyIndexContent: { | |
| src: ['{{SRC}}/index.html', '{{SRC}}/manifest.json', '{{SRC}}/service-worker.js'], |
| <ion-header> | |
| <ion-navbar primary> | |
| <ion-title> | |
| Galeria de Fotos | |
| </ion-title> | |
| <ion-buttons end> | |
| <button ion-button icon-only (click)="changeGrid()"> | |
| <ion-icon *ngIf="!grid" name="md-grid"></ion-icon> |
| import { Component } from '@angular/core'; | |
| import { NavController } from 'ionic-angular'; | |
| @Component({ | |
| selector: 'page-home', | |
| templateUrl: 'home.html' | |
| }) | |
| export class HomePage { | |
| images = []; |
| /** | |
| * Populate test database with sample data. | |
| * | |
| * @throws IOException | |
| */ | |
| public static void setUpDb() throws IOException { | |
| server = Ebean.getServer("default"); | |
| ServerConfig config = new ServerConfig(); | |
| config.setDdlGenerate(true); | |
| config.setDdlRun(true); |