Skip to content

Commit

Permalink
Merge branch 'release/v0.2.5'
Browse files Browse the repository at this point in the history
  • Loading branch information
@brianpkelley
brianpkelley committed Apr 4, 2016
2 parents 8dc1e10 + d7338e2 commit 47402e5
Show file tree
Hide file tree
Showing 16 changed files with 892 additions and 596 deletions.
72 changes: 63 additions & 9 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
# md-color-picker
Angular-Material based color picker with no jQuery or other DOM/utility library dependencies.

![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/master/md-color-picker.png)
[![NPM version](https://badge-me.herokuapp.com/api/npm/md-color-picker.png)](http://badges.enytc.com/for/npm/md-color-picker)
[![BOWER version](https://badge-me.herokuapp.com/api/bower/brianpkelley/md-color-picker.png)](http://badges.enytc.com/for/bower/brianpkelley/md-color-picker)

![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/feature/v0.2.5/md-color-picker-2.png)

## Demo
Try out the demo here: **[GitHub Page](http://brianpkelley.github.io/md-color-picker/)**
Expand All @@ -20,6 +23,13 @@ npm install md-color-picker
bower install md-color-picker
```

## Angular dependencies
- [Angular Material](https://material.angularjs.org)
- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional)

## Other dependencies
The only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library.

## Usage
- Include the css.
````html
Expand All @@ -35,20 +45,64 @@ bower install md-color-picker
var app = angular.module('myApp', ['ngMaterial','ngCookies', 'mdColorPicker']);
````

- Place the directive wherever it is needed.
_note:_ this breaks the old version 0.1 as it now uses _ng-model_ instead of _value_

- Place the directive wherever it is needed. _note:_ this breaks the old version 0.1 as it now uses _ng-model_ instead of _value_
````html
<div md-color-picker ng-model="valueObj"></div>
````

## Angular dependencies
- [Angular Material](https://material.angularjs.org)
- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional)
## Options

## Other dependencies
The only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library.
Options may be set either by an options object on the `md-color-picker` attribute and/or using attributes. If an option is present on both the options object and as an attribute, the attribute will take precedence.

**Setting options by scope object**
```js
// Controller
$scope.scopeVariable.options = {
label: "Choose a color",
icon: "brush",
default: "#f00",
genericPalette: false,
history: false
};
```
```html
<div md-color-picker="scopeVariable.options" ng-model="scopeVariable.color"></div>
```

**Setting options by attribute**
```html
<div
md-color-picker
ng-model="scopeVariable.color"
label="Choose a color"
icon="brush"
default="#f00"
md-color-generic-palette="false"
md-color-history="false"
></div>
```

| Option Object name | Attribute Option name | Type | Default | Description |
|--------------------- |--------------------------- |------------- |-------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| type | type | Int | 0 | Default output type. 0: hex, 1: rgb, 2: hsl |
| label | label | String | "" | The lable for the input. |
| icon | icon | String | "" | Material Icon name. https://design.google.com/icons/ |
| random | random | Boolean | false | Select a random color on open |
| default | default | Color | "rgb(255,255,255)" | Default color |
| openOnInput | open-on-input | Boolean | true | Open color picker when user clicks on the input field. If disabled, color picker will only open when clicking on the preview. |
| hasBackdrop | has-backdrop | Boolean | true | Dialog Backdrop. https://material.angularjs.org/latest/api/service/$mdDialog |
| clickOutsideToClose | click-outside-to-close | Boolean | true | Dialog click outside to close. https://material.angularjs.org/latest/api/service/$mdDialog |
| skipHide | skip-hide | Boolean | true | Allows for opening multiple dialogs. https://github.com/angular/material/issues/7262 |
| preserveScope | preserve-scope | Boolean | true | Dialog preserveScope. https://material.angularjs.org/latest/api/service/$mdDialog |
| clearButton | md-color-clear-button | Boolean | true | Show the "clear" button inside of the input. |
| preview | md-color-preview | Boolean | true | Show the color preview circle next to the input. |
| alphaChannel | md-color-alpha-channel | Boolean | true | Enable alpha channel. |
| spectrum | md-color-spectrum | Boolean | true | Show the spectrum tab. |
| sliders | md-color-sliders | Boolean | true | Show the sliders tab. |
| genericPalette | md-color-generic-palette | Boolean | true | Show the generic palette tab. |
| materialPalette | md-color-material-palette | Boolean | true | Show the material colors palette tab. |
| history | md-color-history | Boolean | true | Show the history tab. |
| defaultTab | md-color-default-tab | String, Int | "spectrum" | Which tab should be selected when opening. Can either be a string or index. If the value is an index, do not count hidden/disabled tabs. <ul><li>spectrum</li><li>sliders</li><li>genericPalette</li><li>materialPalette</li><li>history</li></ul> |


## Disclaimer
Expand Down
6 changes: 4 additions & 2 deletions bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "md-color-picker",
"version": "0.2.1",
"version": "0.2.5",
"authors": [
"Brian Kelley <[email protected]>"
],
Expand All @@ -10,7 +10,9 @@
"dist/mdColorPicker.min.css"
],
"dependencies": {
"tinycolor": ">=1.2.1"
"tinycolor": ">=1.2.1",
"angular": ">=1.5.0",
"angular-material": ">=1.0.5"
},
"keywords": [
"color-picker",
Expand Down
27 changes: 19 additions & 8 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,14 @@

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400,500,700,400italic">
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="md-color-picker/mdColorPicker.min.css">
<link rel="stylesheet" href="../mdColorPicker.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">


</head>

<body ng-app="plunker" ng-controller="MainCtrl">
<md-content md-theme="docs-dark" layout-padding layout="row">
<md-content layout-padding layout="row">
<div flex>
<h3>Angular md-color-picker</h3>
<h5>*** BETA ***</h5>
Expand Down Expand Up @@ -71,12 +71,23 @@ <h4>Text Style</h4>
</md-select>
</md-input-container>
<div layout="row">

<div flex label="Text Color" md-color-picker ng-model="textColor" icon="format_color_text"></div>
<div flex
md-color-picker
ng-model="textColor"
label="Text Color"
icon="format_color_text"

md-color-clear-button="false"
md-color-spectrum="false"
md-color-history="false"
></div>
</div>
<div layout="row">
<md-icon style="margin-right: 8px;">font_download</md-icon>
<div flex label="Text Background" md-color-picker has-backdrop="true" click-outside-to-close="true" random="true" ng-model="textBackground" open-on-input="true"></div>
<div flex
md-color-picker="backgroundOptions"
ng-model="textBackground"
md-color-history="true"
></div>
</div>

<div>
Expand All @@ -103,10 +114,10 @@ <h5>Text Preview</h5>


<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.js"></script>

<!-- Custom Scripts -->
<script src="md-color-picker/mdColorPicker.min.js"></script>
<script src="../mdColorPicker.min.js"></script>
<script src="js/app.js"></script>
</body>

Expand Down
14 changes: 14 additions & 0 deletions demo/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,18 @@ app.controller('MainCtrl', function($scope) {
$scope.textColor;
$scope.textBackground;

$scope.backgroundOptions = {
label: "Text Background",
icon: "font_download",

hasBackdrop: true,
clickOutsideToClose: true,
random: true,
openOnInput: true,

alphaChannel: false,
history: false,
defaultTab: 1
}

});
25 changes: 15 additions & 10 deletions dist/mdColorPicker.css
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/**
* md-color-picker - Angular-Material inspired color picker.
* @version v0.2.1
* @version v0.2.5
* @link https://github.com/brianpkelley/md-color-picker
* @license MIT
*/
Expand Down Expand Up @@ -169,7 +169,7 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear,
height: 255px;
padding: 0px 8px 0;
}
.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-template] {
.md-color-picker-container .md-color-picker-tabs md-tabs:not(.md-no-tab-content):not(.md-dynamic-height) md-tabs-content-wrapper md-tab-content [md-tabs-template] {
height: 100%;
}
.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors {
Expand Down Expand Up @@ -215,6 +215,10 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear,
overflow: hidden;
width: 30px;
}
.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide,
.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide {
width: 67px;
}
.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker,
.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker {
height: 5px;
Expand Down Expand Up @@ -245,28 +249,29 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear,
background-color: #1560d0;
border-color: #1560d0;
}
.md-color-picker-container .md-color-picker-material > div:not(:first-child) {
margin-top: 16px;
}
.md-color-picker-container .md-color-picker-material .md-color-picker-material-title {
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title {
font-size: 22px;
line-height: 75px;
padding: 0 15px;
color: rgba(0, 0, 0, 0.85);
text-transform: capitalize;
}
.md-color-picker-container .md-color-picker-material .md-color-picker-material-title.dark {
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark {
color: rgba(255, 255, 255, 0.85);
}
.md-color-picker-container .md-color-picker-material .md-color-picker-with-label {
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child) {
margin-top: 16px;
}
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label {
font-size: 12px;
line-height: 33px;
padding: 0 5px;
color: rgba(0, 0, 0, 0.7);
}
.md-color-picker-container .md-color-picker-material .md-color-picker-with-label.dark {
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark {
color: rgba(255, 255, 255, 0.7);
}
.md-color-picker-container .md-color-picker-material .md-color-picker-material-colors {
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors {
position: absolute;
-webkit-transition: left cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, right cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, bottom cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
transition: left cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, right cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, top cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s, bottom cubic-bezier(0.25, 0.8, 0.25, 1) 0.25s;
Expand Down
Loading

0 comments on commit 47402e5

Please sign in to comment.