Raataar/Ionic-Material
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

ionic-Material Design , Codecanyon

Browse Source
This commit is contained in:
Carsten Hilmer
2016-08-22 12:59:56 +02:00
parent 7cd84fe179
commit 92601ec169
1440 changed files with 482763 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
IonicMaterialDesign/www/lib/angular-material/modules/closure/toast/toast-default-theme.css Normal file
View File

@@ -0,0 +1,18 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
/* mixin definition ; sets LTR and RTL within the same style call */
md-toast.md-THEME_NAME-theme {
background-color: #323232;
color: '{{background-50}}'; }
md-toast.md-THEME_NAME-theme .md-button {
color: '{{background-50}}'; }
md-toast.md-THEME_NAME-theme .md-button.md-highlight {
color: '{{primary-A200}}'; }
md-toast.md-THEME_NAME-theme .md-button.md-highlight.md-accent {
color: '{{accent-A200}}'; }
md-toast.md-THEME_NAME-theme .md-button.md-highlight.md-warn {
color: '{{warn-A200}}'; }

119
IonicMaterialDesign/www/lib/angular-material/modules/closure/toast/toast.css Normal file
View File

@@ -0,0 +1,119 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
/* mixin definition ; sets LTR and RTL within the same style call */
md-toast {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
position: absolute;
box-sizing: border-box;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
min-height: 48px;
padding-left: 24px;
padding-right: 24px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
border-radius: 2px;
font-size: 14px;
cursor: default;
max-width: 100%;
max-height: 40px;
height: 24px;
z-index: 90;
opacity: 1;
-webkit-transform: translate3d(0, 0, 0) rotateZ(0deg);
transform: translate3d(0, 0, 0) rotateZ(0deg);
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
/* Transition differently when swiping */ }
md-toast.md-capsule {
border-radius: 24px; }
md-toast.ng-leave-active {
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-toast.md-swipeleft, md-toast.md-swiperight, md-toast.md-swipeup, md-toast.md-swipedown {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
md-toast.ng-enter {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: 0; }
md-toast.ng-enter.md-top {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
md-toast.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1; }
md-toast.ng-leave.ng-leave-active {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0); }
md-toast.ng-leave.ng-leave-active.md-top {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0); }
md-toast.ng-leave.ng-leave-active.md-swipeleft {
-webkit-transform: translate3d(-100%, 0%, 0);
transform: translate3d(-100%, 0%, 0); }
md-toast.ng-leave.ng-leave-active.md-swiperight {
-webkit-transform: translate3d(100%, 0%, 0);
transform: translate3d(100%, 0%, 0); }
md-toast .md-action {
line-height: 19px;
margin-left: 24px;
cursor: pointer;
text-transform: uppercase;
float: right; }
md-toast .md-action.md-button {
min-width: 0; }
@media (max-width: 600px) {
md-toast {
left: 0;
right: 0;
width: 100%;
max-width: 100%;
min-width: 0;
border-radius: 0;
bottom: 0; }
md-toast.md-top {
bottom: auto;
top: 0; } }
@media (min-width: 600px) {
md-toast {
min-width: 288px;
/*
* When the toast doesn't take up the whole screen,
* make it rotate when the user swipes it away
*/ }
md-toast.md-bottom {
bottom: 8px; }
md-toast.md-left {
left: 8px; }
md-toast.md-right {
right: 8px; }
md-toast.md-top {
top: 8px; }
md-toast.ng-leave.ng-leave-active.md-swipeleft {
-webkit-transform: translate3d(-100%, 25%, 0) rotateZ(-15deg);
transform: translate3d(-100%, 25%, 0) rotateZ(-15deg); }
md-toast.ng-leave.ng-leave-active.md-swiperight {
-webkit-transform: translate3d(100%, 25%, 0) rotateZ(15deg);
transform: translate3d(100%, 25%, 0) rotateZ(15deg); }
md-toast.ng-leave.ng-leave-active.md-top.md-swipeleft {
-webkit-transform: translate3d(-100%, 0, 0) rotateZ(-15deg);
transform: translate3d(-100%, 0, 0) rotateZ(-15deg); }
md-toast.ng-leave.ng-leave-active.md-top.md-swiperight {
-webkit-transform: translate3d(100%, 0, 0) rotateZ(15deg);
transform: translate3d(100%, 0, 0) rotateZ(15deg); } }
@media (min-width: 1200px) {
md-toast {
max-width: 568px; } }
@media screen and (-ms-high-contrast: active) {
md-toast {
border: 1px solid #fff; } }

265
IonicMaterialDesign/www/lib/angular-material/modules/closure/toast/toast.js vendored Normal file
View File

@@ -0,0 +1,265 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
goog.provide('ng.material.components.toast');
goog.require('ng.material.components.button');
goog.require('ng.material.core');
/**
* @ngdoc module
* @name material.components.toast
* @description
* Toast
*/
angular.module('material.components.toast', [
'material.core',
'material.components.button'
])
.directive('mdToast', MdToastDirective)
.provider('$mdToast', MdToastProvider);
function MdToastDirective() {
return {
restrict: 'E'
};
}
/**
* @ngdoc service
* @name $mdToast
* @module material.components.toast
*
* @description
* `$mdToast` is a service to build a toast notification on any position
* on the screen with an optional duration, and provides a simple promise API.
*
*
* ## Restrictions on custom toasts
* - The toast's template must have an outer `<md-toast>` element.
* - For a toast action, use element with class `md-action`.
* - Add the class `md-capsule` for curved corners.
*
* @usage
* <hljs lang="html">
* <div ng-controller="MyController">
* <md-button ng-click="openToast()">
* Open a Toast!
* </md-button>
* </div>
* </hljs>
*
* <hljs lang="js">
* var app = angular.module('app', ['ngMaterial']);
* app.controller('MyController', function($scope, $mdToast) {
* $scope.openToast = function($event) {
* $mdToast.show($mdToast.simple().content('Hello!'));
* // Could also do $mdToast.showSimple('Hello');
* };
* });
* </hljs>
*/
/**
* @ngdoc method
* @name $mdToast#showSimple
*
* @description
* Convenience method which builds and shows a simple toast.
*
* @returns {promise} A promise that can be resolved with `$mdToast.hide()` or
* rejected with `$mdToast.cancel()`.
*
*/
/**
* @ngdoc method
* @name $mdToast#simple
*
* @description
* Builds a preconfigured toast.
*
* @returns {obj} a `$mdToastPreset` with the chainable configuration methods:
*
* - $mdToastPreset#content(string) - sets toast content to string
* - $mdToastPreset#action(string) - adds an action button, which resolves the promise returned from `show()` if clicked.
* - $mdToastPreset#highlightAction(boolean) - sets action button to be highlighted
* - $mdToastPreset#capsule(boolean) - adds 'md-capsule' class to the toast (curved corners)
* - $mdToastPreset#theme(boolean) - sets the theme on the toast to theme (default is `$mdThemingProvider`'s default theme)
*/
/**
* @ngdoc method
* @name $mdToast#updateContent
*
* @description
* Updates the content of an existing toast. Useful for updating things like counts, etc.
*
*/
/**
* @ngdoc method
* @name $mdToast#build
*
* @description
* Creates a custom `$mdToastPreset` that you can configure.
*
* @returns {obj} a `$mdToastPreset` with the chainable configuration methods for shows' options (see below).
*/
/**
* @ngdoc method
* @name $mdToast#show
*
* @description Shows the toast.
*
* @param {object} optionsOrPreset Either provide an `$mdToastPreset` returned from `simple()`
* and `build()`, or an options object with the following properties:
*
* - `templateUrl` - `{string=}`: The url of an html template file that will
* be used as the content of the toast. Restrictions: the template must
* have an outer `md-toast` element.
* - `template` - `{string=}`: Same as templateUrl, except this is an actual
* template string.
* - `scope` - `{object=}`: the scope to link the template / controller to. If none is specified, it will create a new child scope.
* This scope will be destroyed when the toast is removed unless `preserveScope` is set to true.
* - `preserveScope` - `{boolean=}`: whether to preserve the scope when the element is removed. Default is false
* - `hideDelay` - `{number=}`: How many milliseconds the toast should stay
* active before automatically closing. Set to 0 or false to have the toast stay open until
* closed manually. Default: 3000.
* - `position` - `{string=}`: Where to place the toast. Available: any combination
* of 'bottom', 'left', 'top', 'right', 'fit'. Default: 'bottom left'.
* - `controller` - `{string=}`: The controller to associate with this toast.
* The controller will be injected the local `$hideToast`, which is a function
* used to hide the toast.
* - `locals` - `{string=}`: An object containing key/value pairs. The keys will
* be used as names of values to inject into the controller. For example,
* `locals: {three: 3}` would inject `three` into the controller with the value
* of 3.
* - `bindToController` - `bool`: bind the locals to the controller, instead of passing them in. These values will not be available until after initialization.
* - `resolve` - `{object=}`: Similar to locals, except it takes promises as values
* and the toast will not open until the promises resolve.
* - `controllerAs` - `{string=}`: An alias to assign the controller to on the scope.
* - `parent` - `{element=}`: The element to append the toast to. Defaults to appending
* to the root element of the application.
*
* @returns {promise} A promise that can be resolved with `$mdToast.hide()` or
* rejected with `$mdToast.cancel()`.
*/
/**
* @ngdoc method
* @name $mdToast#hide
*
* @description
* Hide an existing toast and resolve the promise returned from `$mdToast.show()`.
*
* @param {*=} response An argument for the resolved promise.
*
* @returns {promise} a promise that is called when the existing element is removed from the DOM
*
*/
/**
* @ngdoc method
* @name $mdToast#cancel
*
* @description
* Hide the existing toast and reject the promise returned from
* `$mdToast.show()`.
*
* @param {*=} response An argument for the rejected promise.
*
* @returns {promise} a promise that is called when the existing element is removed from the DOM
*
*/
function MdToastProvider($$interimElementProvider) {
var activeToastContent;
var $mdToast = $$interimElementProvider('$mdToast')
.setDefaults({
methods: ['position', 'hideDelay', 'capsule' ],
options: toastDefaultOptions
})
.addPreset('simple', {
argOption: 'content',
methods: ['content', 'action', 'highlightAction', 'theme', 'parent'],
options: /* ngInject */ ["$mdToast", "$mdTheming", function($mdToast, $mdTheming) {
var opts = {
template: [
'<md-toast md-theme="{{ toast.theme }}" ng-class="{\'md-capsule\': toast.capsule}">',
'<span flex>{{ toast.content }}</span>',
'<md-button class="md-action" ng-if="toast.action" ng-click="toast.resolve()" ng-class="{\'md-highlight\': toast.highlightAction}">',
'{{ toast.action }}',
'</md-button>',
'</md-toast>'
].join(''),
controller: /* ngInject */ ["$scope", function mdToastCtrl($scope) {
var self = this;
$scope.$watch(function() { return activeToastContent; }, function() {
self.content = activeToastContent;
});
this.resolve = function() {
$mdToast.hide();
};
}],
theme: $mdTheming.defaultTheme(),
controllerAs: 'toast',
bindToController: true
};
return opts;
}]
})
.addMethod('updateContent', function(newContent) {
activeToastContent = newContent;
});
toastDefaultOptions.$inject = ["$timeout", "$animate", "$mdToast", "$mdUtil"];
return $mdToast;
/* ngInject */
function toastDefaultOptions($timeout, $animate, $mdToast, $mdUtil) {
return {
onShow: onShow,
onRemove: onRemove,
position: 'bottom left',
themable: true,
hideDelay: 3000
};
function onShow(scope, element, options) {
element = $mdUtil.extractElementByName(element, 'md-toast');
// 'top left' -> 'md-top md-left'
activeToastContent = options.content;
element.addClass(options.position.split(' ').map(function(pos) {
return 'md-' + pos;
}).join(' '));
options.parent.addClass(toastOpenClass(options.position));
options.onSwipe = function(ev, gesture) {
//Add swipeleft/swiperight class to element so it can animate correctly
element.addClass('md-' + ev.type.replace('$md.',''));
$timeout($mdToast.cancel);
};
element.on('$md.swipeleft $md.swiperight', options.onSwipe);
return $animate.enter(element, options.parent);
}
function onRemove(scope, element, options) {
element.off('$md.swipeleft $md.swiperight', options.onSwipe);
options.parent.removeClass(toastOpenClass(options.position));
return $animate.leave(element);
}
function toastOpenClass(position) {
return 'md-toast-open-' +
(position.indexOf('top') > -1 ? 'top' : 'bottom');
}
}
}
MdToastProvider.$inject = ["$$interimElementProvider"];
ng.material.components.toast = angular.module("material.components.toast");