Repository: nobitagit/react-material-floating-button Branch: master Commit: e735370b70f0 Files: 36 Total size: 58.6 KB Directory structure: gitextract_ymj1386v/ ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .jshintrc ├── .npmignore ├── .travis.yml ├── Gruntfile.js ├── LICENSE ├── README.md ├── demo/ │ ├── index.css │ ├── index.html │ └── index.js ├── gulpfile.js ├── index.js ├── mfb/ │ ├── .gitignore │ ├── .npmignore │ ├── Gruntfile.js │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src/ │ │ ├── _/ │ │ │ ├── _fountain.scss │ │ │ ├── _slidein-spring.scss │ │ │ ├── _slidein.scss │ │ │ └── _zoomin.scss │ │ ├── index.css │ │ ├── index.html │ │ ├── lib/ │ │ │ └── modernizr.touch.js │ │ └── mfb.js │ └── test/ │ └── unit.js ├── package.json └── src/ ├── child-button.js ├── main-button.js ├── menu.js └── utils/ ├── children-validator.js ├── get-children.js └── get-classes.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # top-most EditorConfig file root = true [*] indent_style = space end_of_line = lf trim_trailing_whitespace = true [*.js] indent_style = space indent_size = 2 [package.json] indent_style = space indent_size = 2 [*.md] trim_trailing_whitespace = false ================================================ FILE: .eslintrc ================================================ { "ecmaFeatures": { "jsx": true }, "rules": { "semi": [2, "always"], "quotes": [2, "single"], "strict": [2, "global"], "no-underscore-dangle": 0 }, "env": { "es6": true, "browser": true, "node": true } } ================================================ FILE: .gitignore ================================================ .DS_Store node_modules bower_components .sass-cache/ .grunt dist npm-debug.log build/ gh-pages_temp/ demo/bundle.js mfb.css* mfb.scss ================================================ FILE: .jshintrc ================================================ { "curly": true, "eqeqeq": true, "eqnull": true, "expr": true, "latedef": true, "onevar": true, "noarg": true, "node": true, "trailing": true, "undef": true, "unused": true, "jasmine" : true, "indent": 2 , "globals": { "define" : true } } ================================================ FILE: .npmignore ================================================ index.css index.html showcase.html .sass-cache/ .jshintrc .gitignore .grunt test/ mfb/test/ demo/ build/ bower_components .sass-cache/ .grunt dist npm-debug.log build/ gh-pages_temp/ ================================================ FILE: .travis.yml ================================================ sudo: false language: node_js node_js: - 'iojs' - '0.12' - '0.10' ================================================ FILE: Gruntfile.js ================================================ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), watch: { css: { files: '**/*.scss', tasks: ['sass:base'] }, js: { files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'], tasks: ['jshint:all'] } }, sass: { base: { files: { 'src/styles/style.css': 'src/styles/style.scss' } } }, clean: { check: ['.grunt/grunt-gh-pages/gh-pages/check'], live: 'gh-pages_temp' }, jshint: { options: { jshintrc : true }, all: ['Gruntfile.js', 'build/mfb-menu.js'] }, useminPrepare: { html: 'gh-pages_tem/index.html', options: { //dest: 'gh-pages_tem/index.html' } }, usemin: { html: ['gh-pages_temp/index.html'] }, copy: { live: { files: [{ src: ['demo/index.html', 'demo/index.css', 'demo/bundle.js'], dest: 'gh-pages_temp', expand: true, flatten: true },{ src: ['mfb/src/*.css', 'mfb/src/*.css.map', 'mfb/src/lib/**/*.js'], dest: 'gh-pages_temp', expand: true, flatten: true }] } }, 'gh-pages': { options: { base: 'gh-pages_temp/', }, 'live': { src: ['*'] }, 'check': { options: { push: false }, src: ['*'] } } }); grunt.loadNpmTasks('grunt-gh-pages'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-usemin'); // Publish this to live site grunt.registerTask('live', [ 'clean:live', 'useminPrepare', 'copy:live', 'usemin', 'gh-pages:live' ]); // Live site dry run grunt.registerTask('livecheck', [ 'clean:check', 'useminPrepare', 'copy:live', 'usemin', 'clean:check','gh-pages:check' ]); grunt.registerTask('watch-css', ['watch:css']); grunt.registerTask('watch-js', ['watch:js']); grunt.registerTask('default', []); }; ================================================ FILE: LICENSE ================================================ The MIT License (MIT) Copyright (c) 2014 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # React Material Floating Button Material design floating action button implemented as a React component. Made to be fast and easy to customize. ~~Shamelessly~~ inspired by action buttons from Google Inbox, Evernote and Path. Clone/download the repo from Github or just use npm: ``` npm install react-mfb --save ``` Docs are still to come (but hopefully will be there soon). In the meantime if you want to play with it check the project homepage source code for hints on how to use the component. ## Demo See the [project page](http://nobitagit.github.io/react-material-floating-button/) or just look at this awesome gif: **Other versions** - [Vanilla html](https://github.com/nobitagit/material-floating-button) (original, upstream version of the component) - [Angular directive](https://github.com/nobitagit/ng-material-floating-button) Demo icons courtesy of [Ionicons](http://ionicons.com) ================================================ FILE: demo/index.css ================================================ html, body{ height: 100%; min-height: 100%; } html{ background: #E9EBEC; font-family: 'Raleway', sans-serif; font-weight: 200; } body{ display: -webkit-flex; -webkit-align-items: center; -webkit-justify-content: center; display: flex; align-items: center; justify-content: center; } h1{ margin: 0.2em 0; color: rgba(40, 33, 33, .7); color: rgba(124, 98, 152, 1); font-weight: 400; } header{ background: #00C8BE; padding: 0.3em 1em; position: relative; z-index: 20; } .viewCode header{ box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); } .showcode{ background: rgb(232, 216, 49); color: rgba(124, 98, 152, 1); width: 40px; height: 40px; text-align: center; position: absolute; right: 1em; bottom: 0; margin-bottom: -15px; border-radius: 100%; font-size: 16px; cursor: pointer; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); transition: all .3s; } .viewCode .showcode{ -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); box-shadow: 0px -2px 5px 0 rgba(0, 0, 0, 0.26); } .icon-nocode, .icon-yepcode{ transition: opacity .3s; position: absolute; left: 0; display: block; width: 100%; line-height: 40px; } .icon-nocode{ opacity: 0; } .viewCode .icon-nocode{ opacity: 1; } .viewCode .icon-yepcode{ opacity: 0; } .panel{ width: 90%; position: relative; max-width: 650px; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); background: #F5F5F5; border-radius: 3px; overflow: hidden; } article{ min-height: 180px; padding: 1em; font-weight: 200; line-height: 1.5em; position: relative; } footer{ padding: 0.3em 1em 1em; } footer a, footer a:active, footer a:visited{ color: inherit; } .code{ position: absolute; top: 0; top: 0; left: 0; right: 0; height: 100%; overflow: scroll; background: rgba(124, 98, 152, 0.94); color: rgba(245, 247, 247, 0.92); padding: 0em 1em; transition: all .4s; -webkit-transform: translateY(-100%); transform: translateY(-100%); } .code p:first-child{ margin-top: 2em; } .code a{ color: rgba(232, 216, 49, 0.9); } .viewCode .code{ -webkit-transform: translateY(0); transform: translateY(0); box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.36); } .actions{ font-weight: 300; text-transform: uppercase; font-size: 0.8em; padding: 1em; border: none; background: none; transition: color .2s; cursor: pointer; } .actions:hover{ color: rgb(30, 30, 171); background: #F5F5F5; box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); } code, pre { background: rgba(255,255,255,0.1); color: rgba(232, 216, 49, 0.9); font-family: "Source Code Pro", Monaco, Menlo, Consolas, "Courier New",monospace; padding: 0.5em; border-radius: 3px; margin: 1em 0; } code{ display: inline; vertical-align: middle; margin: 0; } pre{ display: block; } .striked{ text-decoration: line-through; } .mfb-component--tl{ animation: fromTop 1s 1; -webkit-animation: fromTop 1s 1; } .mfb-component--tr{ animation: fromTop 1.3s 1; -webkit-animation: fromTop 1.3s 1; } .mfb-component--br{ animation: fromBottom 1.6s 1; -webkit-animation: fromBottom 1.6s 1; } .mfb-component--bl{ animation: fromBottom 1.9s 1; -webkit-animation: fromBottom 1.9s 1; } @keyframes fromBottom { 0% { transform: translateY(250px); } 100% { transform: translateY(0); } } @keyframes fromTop { 0% { transform: translateY(-250px); } 100% { transform: translateY(0); } } @-webkit-keyframes fromBottom { 0% { transform: translateY(250px); } 100% { transform: translateY(0); } } @-webkit-keyframes fromTop { 0% { transform: translateY(-250px); } 100% { transform: translateY(0); } } ================================================ FILE: demo/index.html ================================================ React Material Floating Button - by Nobita

React Material Floating Button

Material floating action button implemented as a React component. Also available in vanilla html and Angularjs directive.
Shamelessly Openly inspired by Google Inbox, Evernote and Path.

To add Material Floating Buttons to any project just download or clone the repo from Github. Click on the yellow button here above for a code preview or choose an effect from the dropdown below and interact with any button on the corners of the screen.

To add Material Floating Buttons to any project just download the files from here below or clone the repo from Github. 

git clone https://github.com/nobitagit/react-material-floating-button.git

Run npm install and after referencing the styles in your header drop the MFB markup in your HTML like so: 

var component = React.createElement(MfbMenu, yourOpts);
React.render( component, document.getElementById('someId') );

The yourOpts object passed as a second param to the createElement function provide the configuration for the component such as position, labels, icons, links and callbacks. All the other styles and configurations are just css.

The best way to customise the styles is to build them directly from the source as the scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css.

================================================ FILE: demo/index.js ================================================ 'use strict'; var React = require('react'); var ReactDOM = require('react-dom'); var Menu = require('../').Menu; var MainButton = require('../').MainButton; var ChildButton = require('../').ChildButton; var panel = document.getElementById('panel'), showcode = document.getElementById('showcode'), selectFx = document.getElementById('selections-fx'), selectPos = document.getElementById('selections-pos'), selectMethod = document.getElementById('selections-method'); // demo defaults var effect = 'zoomin', pos = 'br', method = 'hover'; function renderMenu(){ var component = ( ); ReactDOM.render(component, document.getElementById('menu')); } renderMenu(); function switchEffect(){ effect = this.options[this.selectedIndex].value; renderMenu(); } function switchPosition(){ pos = this.options[this.selectedIndex].value; renderMenu(); } function switchMethod(){ method = this.options[this.selectedIndex].value; renderMenu(); } function toggleCode() { panel.classList.toggle('viewCode'); } showcode.addEventListener('click', toggleCode); selectFx.addEventListener('change', switchEffect); selectPos.addEventListener('change', switchPosition); selectMethod.addEventListener('change', switchMethod); ================================================ FILE: gulpfile.js ================================================ 'use strict'; var gulp = require('gulp'); var babel = require('gulp-babel'); gulp.task('js', function(){ return gulp.src('./src/**/*.js') .pipe(babel()) .pipe(gulp.dest('build')); }); gulp.task('css', function(){ return gulp.src(['./mfb/src/mfb.css', './mfb/src/mfb.css.map', './mfb/src/mfb.scss']) .pipe(gulp.dest('./')); }); gulp.task('default', ['js', 'css']); ================================================ FILE: index.js ================================================ 'use strict'; module.exports = { Menu: require('./build/menu'), MainButton: require('./build/main-button'), ChildButton: require('./build/child-button') }; ================================================ FILE: mfb/.gitignore ================================================ .DS_Store node_modules .sass-cache/ .grunt ================================================ FILE: mfb/.npmignore ================================================ test/ index.css index.html showcase.html .sass-cache/ .jshintrc .gitignore .grunt ================================================ FILE: mfb/Gruntfile.js ================================================ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), watch: { css: { files: '**/*.scss', tasks: ['sass:base', 'cssmin'] } }, sass: { base: { files: { 'src/mfb.css': 'src/mfb.scss' } } }, clean: { check: ['.grunt/grunt-gh-pages/gh-pages/check'], live: ['.grunt/grunt-gh-pages/gh-pages/live'] }, cssmin: { main: { files: [{ expand: true, cwd: 'src', src: ['mfb.css', '!*.min.css'], dest: 'src', ext: '.min.css' }] } }, uglify: { main: { files: { 'src/mfb.min.js': ['src/mfb.js'] } } }, livePages: [ 'index.html', 'index.css', '*.css', '**/*.map', 'mfb.js', 'lib/modernizr.touch.js'], 'gh-pages': { options: { base: 'src', }, 'live': { src: ['<%= livePages %>'] }, 'check': { options: { push: false }, src: ['<%= livePages %>'] } } }); grunt.loadNpmTasks('grunt-gh-pages'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); // Publish this to live site grunt.registerTask('live', ['clean:live','gh-pages:live']); // Live site dry run: test locally before pushing. // In .grunt look for the folder 'check' grunt.registerTask('livecheck', ['clean:check','gh-pages:check']); grunt.registerTask('build', [ 'sass', 'cssmin', 'uglify' ]); grunt.registerTask('watch-css', ['watch:css']); grunt.registerTask('default', []); }; ================================================ FILE: mfb/LICENSE ================================================ The MIT License (MIT) Copyright (c) 2014 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: mfb/README.md ================================================ Material Floating Button ======================== Material design floating button action implementation. Made to be semantic, fast and easy to customize. ~~Shamelessly~~ inspired by action buttons from Google Inbox, Evernote and Path. See a demo [here](http://nobitagit.github.io/material-floating-button/) to see it in action or just take a look at this awesome gif: Test all the available effects to date in the [demo](http://nobitagit.github.io/material-floating-button/). ##Other versions## Also available as: - [Angular directive](https://github.com/nobitagit/ng-material-floating-button) - [React Component](https://github.com/nobitagit/react-material-floating-button) ##How to use## ###Basic usage### Clone/download the repo from Github or just use npm: ``` npm install mfb --save ``` (Optionally) run `npm install` to have access to the configured Grunt tasks if you use them, then reference the basic css styles in your `` like so: ```html ``` Use the appropriate html structure (better explained later), for example: ```html ``` Everything should already work fine. You may or may not want to include the provided `mfb.js` script depending on the need to support click/touch. ```html ``` For a breakdown on why and when you need to include the script please refer to [Toggling options and touch devices support](#toggling-opts). ###Customising the component### ####HTML#### The basic structure of the component is the following (the customisable classes/attributes are in curly braces): ```html ``` ####SCSS/CSS#### Although you can use the provided css as is, it's highly likely that you will want to customise the looks and behavior of the component by changing its underlying css. A number of variables is provided for your convenience in the SASS file. The best way to tweak them is leave the `src/mfb.scss` source as is, import it in your own style sheet and define your custom variables before the `@import` statement right there. For example: ```scss // your .scss working file $main-color: #4991EF; @import "path/to/src/mfb.scss"; ``` This will leave the core files unchanged from the source. You will then be able to keep this repo as upstream and pull in any future changes without having to worry about overwriting your changes. Here below is a breakdown of all the variables currently available, along with their defaults. #####Basic##### Variable name | Default value | Explanation --- | --- | --- $main-color | #E40A5D | main/primary color of the component $bright-text | rgba(255, 255, 255, 0.8) | color of icons and text $number-of-child-buttons | 4 | how many child buttons the component supports #####Effects##### **n.b.** - set to true to include the effect styles in the compiled .css file. To actually activate the desired effect you need to reference the corresponding class in the markup (see [here](#html)) Variable name | Default value --- | --- $effects-zoomin | true $effects-slidein | true $effects-slidein-spring | true $effects-fountain | true As a suggestion, try to only include the animation you're using in production in order to have a much lighter css. #####Speeds##### Variable name | Default value | Explanation --- | --- | --- $delay-staggering-inflate | 0.1s | each child button can appear with a slight, more natural delay (set to 0 for no-delay) $slide-speed | 0.5s | the child buttons animate at this speed $label-hover-off | 0.5s | the child buttons labels fade *in* at this speed $label-hover-on | 0.3s | the child buttons labels fade *out* at this speed #####Sizes##### Variable name | Default value | Explanation --- | --- | --- $main_button_size | 25px | the distance of the main button from the closest corners of the screen $labels-font-size | 13px |font-size for all labels $labels-padding-vertical | 4px | top & bottom padding for the labels $labels-padding-horizontal | 10px | left & right padding for the labels You can compile the final css on your own or use the provided, pre-configured Grunt tasks for it. After installing all dependencies (by running `npm install` from the terminal) type `grunt sass` (on time compilation) or `grunt watch-css` (live reload triggered after the scss files are changed). ####Toggling options and touch devices support#### The menu can be customised to be activated either on hover or on click/tap. To assign the desired toggling method the component provides some attributes to add this functionality in a declarative way right from the markup. #####Hover toggling##### If you're only interested in desktop support and want the menu to be activated on hover you won't need to include any scripts as that animation is CSS-based and included in the stylesheet provided. Just set the `data-mfb-toggle` attribute to `hover` like so: ```html