Skip to content

Commit 47402e5

Browse files
brianpkelleybrianpkelley
committed
Merge branch 'release/v0.2.5'
2 parents 8dc1e10 + d7338e2 commit 47402e5

16 files changed

+892
-596
lines changed

‎README.md

Lines changed: 63 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
# md-color-picker
22
Angular-Material based color picker with no jQuery or other DOM/utility library dependencies.
33

4-
![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/master/md-color-picker.png)
4+
[![NPM version](https://badge-me.herokuapp.com/api/npm/md-color-picker.png)](http://badges.enytc.com/for/npm/md-color-picker)
5+
[![BOWER version](https://badge-me.herokuapp.com/api/bower/brianpkelley/md-color-picker.png)](http://badges.enytc.com/for/bower/brianpkelley/md-color-picker)
6+
7+
![preview](https://raw.githubusercontent.com/brianpkelley/md-color-picker/feature/v0.2.5/md-color-picker-2.png)
58

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

26+
## Angular dependencies
27+
- [Angular Material](https://material.angularjs.org)
28+
- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional)
29+
30+
## Other dependencies
31+
The only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library.
32+
2333
## Usage
2434
- Include the css.
2535
````html
@@ -35,20 +45,64 @@ bower install md-color-picker
3545
var app = angular.module('myApp', ['ngMaterial','ngCookies', 'mdColorPicker']);
3646
````
3747

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

45-
## Angular dependencies
46-
- [Angular Material](https://material.angularjs.org)
47-
- [ngCookies](https://docs.angularjs.org/api/ngCookies) (optional)
53+
## Options
4854

49-
## Other dependencies
50-
The only other dependency is [tinycolor.js](https://github.com/bgrins/TinyColor) which is an exceptional color manipulation library.
55+
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.
56+
57+
**Setting options by scope object**
58+
```js
59+
// Controller
60+
$scope.scopeVariable.options = {
61+
label: "Choose a color",
62+
icon: "brush",
63+
default: "#f00",
64+
genericPalette: false,
65+
history: false
66+
};
67+
```
68+
```html
69+
<div md-color-picker="scopeVariable.options" ng-model="scopeVariable.color"></div>
70+
```
71+
72+
**Setting options by attribute**
73+
```html
74+
<div
75+
md-color-picker
76+
ng-model="scopeVariable.color"
77+
label="Choose a color"
78+
icon="brush"
79+
default="#f00"
80+
md-color-generic-palette="false"
81+
md-color-history="false"
82+
></div>
83+
```
5184

85+
| Option Object name | Attribute Option name | Type | Default | Description |
86+
|--------------------- |--------------------------- |------------- |-------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
87+
| type | type | Int | 0 | Default output type. 0: hex, 1: rgb, 2: hsl |
88+
| label | label | String | "" | The lable for the input. |
89+
| icon | icon | String | "" | Material Icon name. https://design.google.com/icons/ |
90+
| random | random | Boolean | false | Select a random color on open |
91+
| default | default | Color | "rgb(255,255,255)" | Default color |
92+
| 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. |
93+
| hasBackdrop | has-backdrop | Boolean | true | Dialog Backdrop. https://material.angularjs.org/latest/api/service/$mdDialog |
94+
| clickOutsideToClose | click-outside-to-close | Boolean | true | Dialog click outside to close. https://material.angularjs.org/latest/api/service/$mdDialog |
95+
| skipHide | skip-hide | Boolean | true | Allows for opening multiple dialogs. https://github.com/angular/material/issues/7262 |
96+
| preserveScope | preserve-scope | Boolean | true | Dialog preserveScope. https://material.angularjs.org/latest/api/service/$mdDialog |
97+
| clearButton | md-color-clear-button | Boolean | true | Show the "clear" button inside of the input. |
98+
| preview | md-color-preview | Boolean | true | Show the color preview circle next to the input. |
99+
| alphaChannel | md-color-alpha-channel | Boolean | true | Enable alpha channel. |
100+
| spectrum | md-color-spectrum | Boolean | true | Show the spectrum tab. |
101+
| sliders | md-color-sliders | Boolean | true | Show the sliders tab. |
102+
| genericPalette | md-color-generic-palette | Boolean | true | Show the generic palette tab. |
103+
| materialPalette | md-color-material-palette | Boolean | true | Show the material colors palette tab. |
104+
| history | md-color-history | Boolean | true | Show the history tab. |
105+
| 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> |
52106

53107

54108
## Disclaimer

‎bower.json

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "md-color-picker",
3-
"version": "0.2.1",
3+
"version": "0.2.5",
44
"authors": [
55
"Brian Kelley <kelley.brianp@gmail.com>"
66
],
@@ -10,7 +10,9 @@
1010
"dist/mdColorPicker.min.css"
1111
],
1212
"dependencies": {
13-
"tinycolor": ">=1.2.1"
13+
"tinycolor": ">=1.2.1",
14+
"angular": ">=1.5.0",
15+
"angular-material": ">=1.0.5"
1416
},
1517
"keywords": [
1618
"color-picker",

‎demo/index.html

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@
1414

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

2020

2121
</head>
2222

2323
<body ng-app="plunker" ng-controller="MainCtrl">
24-
<md-content md-theme="docs-dark" layout-padding layout="row">
24+
<md-content layout-padding layout="row">
2525
<div flex>
2626
<h3>Angular md-color-picker</h3>
2727
<h5>*** BETA ***</h5>
@@ -71,12 +71,23 @@ <h4>Text Style</h4>
7171
</md-select>
7272
</md-input-container>
7373
<div layout="row">
74-
75-
<div flex label="Text Color" md-color-picker ng-model="textColor" icon="format_color_text"></div>
74+
<div flex
75+
md-color-picker
76+
ng-model="textColor"
77+
label="Text Color"
78+
icon="format_color_text"
79+
80+
md-color-clear-button="false"
81+
md-color-spectrum="false"
82+
md-color-history="false"
83+
></div>
7684
</div>
7785
<div layout="row">
78-
<md-icon style="margin-right: 8px;">font_download</md-icon>
79-
<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>
86+
<div flex
87+
md-color-picker="backgroundOptions"
88+
ng-model="textBackground"
89+
md-color-history="true"
90+
></div>
8091
</div>
8192

8293
<div>
@@ -103,10 +114,10 @@ <h5>Text Preview</h5>
103114

104115

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

108119
<!-- Custom Scripts -->
109-
<script src="md-color-picker/mdColorPicker.min.js"></script>
120+
<script src="../mdColorPicker.min.js"></script>
110121
<script src="js/app.js"></script>
111122
</body>
112123

‎demo/js/app.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,4 +17,18 @@ app.controller('MainCtrl', function($scope) {
1717
$scope.textColor;
1818
$scope.textBackground;
1919

20+
$scope.backgroundOptions = {
21+
label: "Text Background",
22+
icon: "font_download",
23+
24+
hasBackdrop: true,
25+
clickOutsideToClose: true,
26+
random: true,
27+
openOnInput: true,
28+
29+
alphaChannel: false,
30+
history: false,
31+
defaultTab: 1
32+
}
33+
2034
});

‎dist/mdColorPicker.css

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/**
22
* md-color-picker - Angular-Material inspired color picker.
3-
* @version v0.2.1
3+
* @version v0.2.5
44
* @link https://github.com/brianpkelley/md-color-picker
55
* @license MIT
66
*/
@@ -169,7 +169,7 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear,
169169
height: 255px;
170170
padding: 0px 8px 0;
171171
}
172-
.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] {
172+
.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] {
173173
height: 100%;
174174
}
175175
.md-color-picker-container .md-color-picker-tabs.md-color-picker-colors {
@@ -215,6 +215,10 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear,
215215
overflow: hidden;
216216
width: 30px;
217217
}
218+
.md-color-picker-container .md-color-picker-colors [md-color-picker-hue].md-color-picker-wide,
219+
.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha].md-color-picker-wide {
220+
width: 67px;
221+
}
218222
.md-color-picker-container .md-color-picker-colors [md-color-picker-hue] .md-color-picker-marker,
219223
.md-color-picker-container .md-color-picker-colors [md-color-picker-alpha] .md-color-picker-marker {
220224
height: 5px;
@@ -245,28 +249,29 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear,
245249
background-color: #1560d0;
246250
border-color: #1560d0;
247251
}
248-
.md-color-picker-container .md-color-picker-material > div:not(:first-child) {
249-
margin-top: 16px;
250-
}
251-
.md-color-picker-container .md-color-picker-material .md-color-picker-material-title {
252+
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title {
252253
font-size: 22px;
253254
line-height: 75px;
254255
padding: 0 15px;
255256
color: rgba(0, 0, 0, 0.85);
257+
text-transform: capitalize;
256258
}
257-
.md-color-picker-container .md-color-picker-material .md-color-picker-material-title.dark {
259+
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title.dark {
258260
color: rgba(255, 255, 255, 0.85);
259261
}
260-
.md-color-picker-container .md-color-picker-material .md-color-picker-with-label {
262+
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-title:not(:first-child) {
263+
margin-top: 16px;
264+
}
265+
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label {
261266
font-size: 12px;
262267
line-height: 33px;
263268
padding: 0 5px;
264269
color: rgba(0, 0, 0, 0.7);
265270
}
266-
.md-color-picker-container .md-color-picker-material .md-color-picker-with-label.dark {
271+
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-with-label.dark {
267272
color: rgba(255, 255, 255, 0.7);
268273
}
269-
.md-color-picker-container .md-color-picker-material .md-color-picker-material-colors {
274+
.md-color-picker-container .md-color-picker-material-palette .md-color-picker-material-colors {
270275
position: absolute;
271276
-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;
272277
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;

0 commit comments

Comments
 (0)