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

9
IonicMaterialDesign/www/lib/angular-material/modules/js/fabToolbar/bower.json Normal file
View File

@@ -0,0 +1,9 @@
{
"name": "angular-material-fabToolbar",
"version": "0.10.0",
"dependencies": {
"angular-material-core": "0.10.0",
"angular-material-fabTrigger": "0.10.0",
"angular-material-fabActions": "0.10.0"
}
}

74
IonicMaterialDesign/www/lib/angular-material/modules/js/fabToolbar/fabToolbar.css Normal file
View File

@@ -0,0 +1,74 @@
/*!
* 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-fab-toolbar {
display: block;
/*
* Closed styling
*/
/*
* Hover styling
*/ }
md-fab-toolbar .md-fab-toolbar-wrapper {
display: block;
position: relative;
overflow: hidden;
height: 6.8rem; }
md-fab-toolbar md-fab-trigger {
position: absolute;
z-index: 20; }
md-fab-toolbar md-fab-trigger button {
overflow: visible !important; }
md-fab-toolbar md-fab-trigger .md-fab-toolbar-background {
display: block;
position: absolute;
z-index: 21;
opacity: 1;
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); }
md-fab-toolbar md-fab-trigger md-icon {
position: relative;
z-index: 22;
opacity: 1;
transition: all 200ms ease-in; }
md-fab-toolbar.md-left md-fab-trigger {
left: 0; }
md-fab-toolbar.md-left .md-toolbar-tools {
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row; }
md-fab-toolbar.md-right md-fab-trigger {
right: 0; }
md-fab-toolbar.md-right .md-toolbar-tools {
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
md-fab-toolbar.md-right .md-toolbar-tools > .md-button:first-child {
margin-left: 0.6rem; }
md-fab-toolbar.md-right .md-toolbar-tools > .md-button:first-child {
margin-right: -0.8rem; }
md-fab-toolbar.md-right .md-toolbar-tools > .md-button:last-child {
margin-right: 8px; }
md-fab-toolbar md-toolbar {
background-color: transparent !important;
z-index: 23; }
md-fab-toolbar md-toolbar .md-toolbar-tools {
padding: 0 20px;
margin-top: 3px; }
md-fab-toolbar md-toolbar .md-fab-action-item {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0);
transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
transition-duration: 0.15s; }
md-fab-toolbar.md-is-open md-fab-trigger > button {
box-shadow: none; }
md-fab-toolbar.md-is-open md-fab-trigger > button md-icon {
opacity: 0; }
md-fab-toolbar.md-is-open .md-fab-action-item {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1); }

217
IonicMaterialDesign/www/lib/angular-material/modules/js/fabToolbar/fabToolbar.js vendored Normal file
View File

@@ -0,0 +1,217 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
(function( window, angular, undefined ){
"use strict";
(function() {
'use strict';
angular
.module('material.components.fabToolbar', [
'material.core',
'material.components.fabTrigger',
'material.components.fabActions'
])
.directive('mdFabToolbar', MdFabToolbarDirective)
.animation('.md-fab-toolbar', MdFabToolbarAnimation);
/**
* @ngdoc directive
* @name mdFabToolbar
* @module material.components.fabToolbar
*
* @restrict E
*
* @description
*
* The `<md-fab-toolbar>` directive is used present a toolbar of elements (usually `<md-button>`s)
* for quick access to common actions when a floating action button is activated (via hover or
* keyboard navigation).
*
* @usage
*
* <hljs lang="html">
* <md-fab-toolbar>
* <md-fab-trigger>
* <md-button aria-label="Add..."><md-icon icon="/img/icons/plus.svg"></md-icon></md-button>
* </md-fab-trigger>
*
* <md-fab-actions>
* <md-button aria-label="Add User">
* <md-icon icon="/img/icons/user.svg"></md-icon>
* </md-button>
*
* <md-button aria-label="Add Group">
* <md-icon icon="/img/icons/group.svg"></md-icon>
* </md-button>
* </md-fab-actions>
* </md-fab-toolbar>
* </hljs>
*
* @param {expression=} md-open Programmatically control whether or not the toolbar is visible.
*/
function MdFabToolbarDirective() {
FabToolbarController.$inject = ["$scope", "$element", "$animate"];
return {
restrict: 'E',
transclude: true,
template:
'<div class="md-fab-toolbar-wrapper">' +
' <div class="md-fab-toolbar-content" ng-transclude></div>' +
'</div>',
scope: {
isOpen: '=?mdOpen'
},
bindToController: true,
controller: FabToolbarController,
controllerAs: 'vm',
link: link
};
function FabToolbarController($scope, $element, $animate) {
var vm = this;
// Set the default to be closed
vm.isOpen = vm.isOpen || false;
vm.open = function() {
vm.isOpen = true;
$scope.$apply();
};
vm.close = function() {
vm.isOpen = false;
$scope.$apply();
};
// Add our class so we can trigger the animation on start
$element.addClass('md-fab-toolbar');
// Setup some mouse events so the hover effect can be triggered
// anywhere over the toolbar
$element.on('mouseenter', vm.open);
$element.on('mouseleave', vm.close);
// Watch for changes to md-open and toggle our class
$scope.$watch('vm.isOpen', function(isOpen) {
var toAdd = isOpen ? 'md-is-open' : '';
var toRemove = isOpen ? '' : 'md-is-open';
$animate.setClass($element, toAdd, toRemove);
});
}
function link(scope, element, attributes) {
// Don't allow focus on the trigger
element.find('md-fab-trigger').find('button').attr('tabindex', '-1');
// Prepend the background element to the trigger's button
element.find('md-fab-trigger').find('button')
.prepend('<div class="md-fab-toolbar-background"></div>');
}
}
function MdFabToolbarAnimation() {
var originalIconDelay;
function runAnimation(element, className, done) {
var el = element[0];
var ctrl = element.controller('mdFabToolbar');
// Grab the relevant child elements
var backgroundElement = el.querySelector('.md-fab-toolbar-background');
var triggerElement = el.querySelector('md-fab-trigger button');
var iconElement = el.querySelector('md-fab-trigger button md-icon');
var actions = element.find('md-fab-actions').children();
// If we have both elements, use them to position the new background
if (triggerElement && backgroundElement) {
// Get our variables
var color = window.getComputedStyle(triggerElement).getPropertyValue('background-color');
var width = el.offsetWidth;
var height = el.offsetHeight;
// Make a square
var scale = width * 2;
// Set some basic styles no matter what animation we're doing
backgroundElement.style.backgroundColor = color;
backgroundElement.style.borderRadius = width + 'px';
// If we're open
if (ctrl.isOpen) {
// Set the width/height to take up the full toolbar width
backgroundElement.style.width = scale + 'px';
backgroundElement.style.height = scale + 'px';
// Set the top/left to move up/left (or right) by the scale width/height
backgroundElement.style.top = -(scale / 2) + 'px';
if (element.hasClass('md-left')) {
backgroundElement.style.left = -(scale / 2) + 'px';
backgroundElement.style.right = null;
}
if (element.hasClass('md-right')) {
backgroundElement.style.right = -(scale / 2) + 'px';
backgroundElement.style.left = null;
}
// Set the next close animation to have the proper delays
backgroundElement.style.transitionDelay = '0ms';
iconElement.style.transitionDelay = '.3s';
// Apply a transition delay to actions
angular.forEach(actions, function(action, index) {
action.style.transitionDelay = (actions.length - index) * 25 + 'ms';
});
} else {
// Otherwise, set the width/height to the trigger's width/height
backgroundElement.style.width = triggerElement.offsetWidth + 'px';
backgroundElement.style.height = triggerElement.offsetHeight + 'px';
// Reset the position
backgroundElement.style.top = '0px';
if (element.hasClass('md-left')) {
backgroundElement.style.left = '0px';
backgroundElement.style.right = null;
}
if (element.hasClass('md-right')) {
backgroundElement.style.right = '0px';
backgroundElement.style.left = null;
}
// Set the next open animation to have the proper delays
backgroundElement.style.transitionDelay = '200ms';
iconElement.style.transitionDelay = '0ms';
// Apply a transition delay to actions
angular.forEach(actions, function(action, index) {
action.style.transitionDelay = (index * 25) + 'ms';
});
}
}
}
return {
addClass: function(element, className, done) {
runAnimation(element, className, done);
},
removeClass: function(element, className, done) {
runAnimation(element, className, done);
}
}
}
})();
})(window, window.angular);

6
IonicMaterialDesign/www/lib/angular-material/modules/js/fabToolbar/fabToolbar.min.css vendored Normal file
View File

@@ -0,0 +1,6 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/md-fab-toolbar{display:block}md-fab-toolbar .md-fab-toolbar-wrapper{display:block;position:relative;overflow:hidden;height:6.8rem}md-fab-toolbar md-fab-trigger{position:absolute;z-index:20}md-fab-toolbar md-fab-trigger button{overflow:visible!important}md-fab-toolbar md-fab-trigger .md-fab-toolbar-background{display:block;position:absolute;z-index:21;opacity:1;transition:all .3s cubic-bezier(.55,0,.55,.2)}md-fab-toolbar md-fab-trigger md-icon{position:relative;z-index:22;opacity:1;transition:all 200ms ease-in}md-fab-toolbar.md-left md-fab-trigger{left:0}md-fab-toolbar.md-left .md-toolbar-tools{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}md-fab-toolbar.md-right md-fab-trigger{right:0}md-fab-toolbar.md-right .md-toolbar-tools{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}md-fab-toolbar.md-right .md-toolbar-tools>.md-button:first-child{margin-left:.6rem;margin-right:-.8rem}md-fab-toolbar.md-right .md-toolbar-tools>.md-button:last-child{margin-right:8px}md-fab-toolbar md-toolbar{background-color:transparent!important;z-index:23}md-fab-toolbar md-toolbar .md-toolbar-tools{padding:0 20px;margin-top:3px}md-fab-toolbar md-toolbar .md-fab-action-item{opacity:0;-webkit-transform:scale(0);transform:scale(0);transition:all .3s cubic-bezier(.55,0,.55,.2);transition-duration:.15s}md-fab-toolbar.md-is-open md-fab-trigger>button{box-shadow:none}md-fab-toolbar.md-is-open md-fab-trigger>button md-icon{opacity:0}md-fab-toolbar.md-is-open .md-fab-action-item{opacity:1;-webkit-transform:scale(1);transform:scale(1)}

7
IonicMaterialDesign/www/lib/angular-material/modules/js/fabToolbar/fabToolbar.min.js vendored Normal file
View File

@@ -0,0 +1,7 @@
/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.0
*/
!function(t,e,n){"use strict";!function(){function n(){function t(t,e,n){var o=this;o.isOpen=o.isOpen||!1,o.open=function(){o.isOpen=!0,t.$apply()},o.close=function(){o.isOpen=!1,t.$apply()},e.addClass("md-fab-toolbar"),e.on("mouseenter",o.open),e.on("mouseleave",o.close),t.$watch("vm.isOpen",function(t){var o=t?"md-is-open":"",l=t?"":"md-is-open";n.setClass(e,o,l)})}function e(t,e,n){e.find("md-fab-trigger").find("button").attr("tabindex","-1"),e.find("md-fab-trigger").find("button").prepend('<div class="md-fab-toolbar-background"></div>')}return t.$inject=["$scope","$element","$animate"],{restrict:"E",transclude:!0,template:'<div class="md-fab-toolbar-wrapper"> <div class="md-fab-toolbar-content" ng-transclude></div></div>',scope:{isOpen:"=?mdOpen"},bindToController:!0,controller:t,controllerAs:"vm",link:e}}function o(){function n(n,o,l){var s=n[0],a=n.controller("mdFabToolbar"),i=s.querySelector(".md-fab-toolbar-background"),r=s.querySelector("md-fab-trigger button"),d=s.querySelector("md-fab-trigger button md-icon"),c=n.find("md-fab-actions").children();if(r&&i){var f=t.getComputedStyle(r).getPropertyValue("background-color"),m=s.offsetWidth,p=(s.offsetHeight,2*m);i.style.backgroundColor=f,i.style.borderRadius=m+"px",a.isOpen?(i.style.width=p+"px",i.style.height=p+"px",i.style.top=-(p/2)+"px",n.hasClass("md-left")&&(i.style.left=-(p/2)+"px",i.style.right=null),n.hasClass("md-right")&&(i.style.right=-(p/2)+"px",i.style.left=null),i.style.transitionDelay="0ms",d.style.transitionDelay=".3s",e.forEach(c,function(t,e){t.style.transitionDelay=25*(c.length-e)+"ms"})):(i.style.width=r.offsetWidth+"px",i.style.height=r.offsetHeight+"px",i.style.top="0px",n.hasClass("md-left")&&(i.style.left="0px",i.style.right=null),n.hasClass("md-right")&&(i.style.right="0px",i.style.left=null),i.style.transitionDelay="200ms",d.style.transitionDelay="0ms",e.forEach(c,function(t,e){t.style.transitionDelay=25*e+"ms"}))}}return{addClass:function(t,e,o){n(t,e,o)},removeClass:function(t,e,o){n(t,e,o)}}}e.module("material.components.fabToolbar",["material.core","material.components.fabTrigger","material.components.fabActions"]).directive("mdFabToolbar",n).animation(".md-fab-toolbar",o)}()}(window,window.angular);