Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release 0.2.7 #85

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Release 0.2.7 #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
91304e4
Release 0.2.7
websirnik Aug 23, 2016
c8b8129
added multiple
maksyko Aug 9, 2017
02e5d16
added multiple option
maksyko Aug 10, 2017
c537b30
added multiple to color picker
maksyko Aug 10, 2017
37bc7e7
added multiple
maksyko Aug 10, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "md-color-picker",
"version": "0.2.6",
"version": "0.2.7",
"authors": [
"Brian Kelley <[email protected]>"
],
Expand Down
40 changes: 21 additions & 19 deletions demo/js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,36 +1,38 @@
var app = angular.module('plunker', ['ngMaterial','ngCookies', 'mdColorPicker']);
var app = angular.module('plunker', ['ngMaterial', 'ngCookies', 'mdColorPicker']);

app.controller('MainCtrl', function($scope) {
$scope.textConfig = {};
$scope.textConfig.fonts = [
'Arial',
'Arial Black',
'Comic Sans MS',
'Courier New',
'Georgia',
'Impact',
'Times New Roman',
'Trebuchet MS',
'Verdana'
];
$scope.textConfig = {};
$scope.textConfig.fonts = [
'Arial',
'Arial Black',
'Comic Sans MS',
'Courier New',
'Georgia',
'Impact',
'Times New Roman',
'Trebuchet MS',
'Verdana'
];

$scope.textConfig.font;
$scope.textConfig.textColor;
$scope.textConfig.textBackground;
$scope.textConfig.font;
$scope.textConfig.textColor;
$scope.textConfig.textBackground;

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

hasBackdrop: true,
clickOutsideToClose: true,
hasBackdrop: true, // Whether there should be an opaque backdrop behind the dialog. Default true.
clickOutsideToClose: true, // Whether the user can click outside the dialog to close it. Default false.
random: true,
openOnInput: true,

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

multiple: true // An option to allow this dialog to display over one that's currently open.
};
$scope.textConfig.showPreview = true;

});
});
3 changes: 1 addition & 2 deletions dist/mdColorPicker.css
View file
Open in desktop
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.6
* @version v0.2.7
* @link https://github.com/brianpkelley/md-color-picker
* @license MIT
*/
Expand Down Expand Up @@ -67,7 +67,6 @@ md-color-picker .md-color-picker-input-container .md-color-picker-clear,
}
.md-color-picker-container .md-color-picker-preview {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-weight: bold;
Expand Down
7 changes: 4 additions & 3 deletions dist/mdColorPicker.js
View file
Open in desktop
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.6
* @version v0.2.7
* @link https://github.com/brianpkelley/md-color-picker
* @license MIT
*/
Expand Down Expand Up @@ -533,7 +533,7 @@ angular.module('mdColorPicker', [])
// The only other ngModel changes

$scope.clearValue = function clearValue() {
$scope.value = '';
ngModel.$setViewValue('');
};
$scope.showColorPicker = function showColorPicker($event) {
if ( didJustClose ) {
Expand Down Expand Up @@ -888,9 +888,10 @@ angular.module('mdColorPicker', [])
options.mdColorRgb = options.mdColorRgb === undefined ? true : options.mdColorRgb;
options.mdColorHsl = options.mdColorHsl === undefined ? true : options.mdColorHsl;
options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex;
options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel;
options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel;

dialog = $mdDialog.show({
multiple: true, // An option to allow this dialog to display over one that's currently open.
templateUrl: 'mdColorPickerDialog.tpl.html',
hasBackdrop: options.hasBackdrop,
clickOutsideToClose: options.clickOutsideToClose,
Expand Down
4 changes: 2 additions & 2 deletions dist/mdColorPicker.min.css
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/mdColorPicker.min.js
View file
Open in desktop

Large diffs are not rendered by default.

136 changes: 55 additions & 81 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,116 +1,90 @@

<!DOCTYPE html>
<html>

<head>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>




<!-- Angular Material CSS now available via Google CDN; version 0.10 used here -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css">

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


</head>

<body ng-app="plunker" ng-controller="MainCtrl">
<body ng-app="plunker" ng-controller="MainCtrl">
<md-content layout-padding layout="row">
<div flex>
<h3>Angular md-color-picker</h3>
<h5>*** BETA ***</h5>
<p style="margin-bottom: 5px;">A pop up color chooser featuring:</p>
<ul>
<li>HSL Specturm</li>
<li>RGBA Sliders</li>
<li>Palette Selection</li>
<li>$cookie based history</li>
<li>Multiple output formats</li>
</ul>
<h5>Spectrum Selector</h5>
<p>Canvas based spectrum selection tool, no images or tricky css.</p>
<h5>RGBA Sliders</h5>
<p>Angular Material sliders and manual input.</p>

<h5>$cookie Based History</h5>
<p>If <code>$cookies</code> is not included in your app, the history function will fall back to an array based history that is reset on each reload.</p>

<h5>Multiple Output Formats</h5>
<p>Using <a href="https://github.com/bgrins/TinyColor">tinycolor.js</a> we can output hexadecimal, rgb(a), or hsl(a) formats.</p>

<h5>Misc.</h5>
<ul>
<li>Random Color on open (optional)</li>
<li>Input focus opens color chooser (optional)</li>
<li>Default color on open (optional)</li>
<li>Specify output type</li>
<li>Accepts label and icon for use in the generated <code>md-input-container</code></li>
</ul>
<h3>Angular md-color-picker</h3>
<h5>*** BETA ***</h5>
<p style="margin-bottom: 5px;">A pop up color chooser featuring:</p>
<ul>
<li>HSL Specturm</li>
<li>RGBA Sliders</li>
<li>Palette Selection</li>
<li>$cookie based history</li>
<li>Multiple output formats</li>
</ul>
<h5>Spectrum Selector</h5>
<p>Canvas based spectrum selection tool, no images or tricky css.</p>
<h5>RGBA Sliders</h5>
<p>Angular Material sliders and manual input.</p>
<h5>$cookie Based History</h5>
<p>If <code>$cookies</code> is not included in your app, the history function will fall back to an array based history that is reset on each reload.</p>
<h5>Multiple Output Formats</h5>
<p>Using <a href="https://github.com/bgrins/TinyColor">tinycolor.js</a> we can output hexadecimal, rgb(a), or hsl(a) formats.</p>
<h5>Misc.</h5>
<ul>
<li>Random Color on open (optional)</li>
<li>Input focus opens color chooser (optional)</li>
<li>Default color on open (optional)</li>
<li>Specify output type</li>
<li>Accepts label and icon for use in the generated <code>md-input-container</code></li>
</ul>
</div>
<div layout="column" layout-margin flex="40">
<h2>Demo</h2>

<h4>*** Text Color ***</h4>
<p>The text color field is not using the <code>openOnInput</code> attribute and you must click on the preview circle to open the color chooser. This allows you to manually type a color value without opening the color chooser.</p>
<p>The text color field is not using the <code>openOnInput</code> attribute and you must click on the preview circle to open the color chooser. This allows you to manually type a color value without opening the color chooser.</p>
<p>This field has a label and icon specified.</p>

<h4>*** Text Background ***</h4>
<p>The text background field is using the <code>openOnInput</code> and the <code>random</code> attributes. This will maket he field open to a random color if one is not already selected when the input field receives focus.</p>
<p>The text background field is using the <code>openOnInput</code> and the <code>random</code> attributes. This will maket he field open to a random color if one is not already selected when the input field receives focus.</p>
<p>This field only has the label specified.</p>
<h4>Text Style</h4>
<md-input-container>
<label>Font</label>
<md-select ng-model="textConfig.font" aria-label="Font Family">
<md-option ng-repeat="font in textConfig.fonts" ng-style="{'font-family':font}">{{font}}</md-option>
</md-select>
</md-input-container>
<div layout="row">
<div md-color-picker ng-model="textConfig.textColor" md-color-preview flex></div>
</div>
<div layout="row">
<div flex
md-color-picker="textConfig.backgroundOptions"
ng-model="textConfig.textBackground"
md-color-history="true"
md-color-alpha-channel="true"
></div>
</div>

<div>
<h5>Text Preview</h5>
<div class="md-color-picker-checkered-bg" layout="row" layout-align="center center">
<div class="text-preview" ng-style="{'background-color': textConfig.textBackground, 'color': textConfig.textColor, 'font-family': textConfig.font}" style="width: 100%; height: 100%;" layout="row" layout-align="center center" layout-padding>
The five boxing wizards jump quickly.
</div>
</div>
</div>
</div>

<span flex="10"></span>
<md-input-container>
<label>Font</label>
<md-select ng-model="textConfig.font" aria-label="Font Family">
<md-option ng-repeat="font in textConfig.fonts" ng-style="{'font-family':font}">{{font}}</md-option>
</md-select>
</md-input-container>
<div layout="row">
<div md-color-picker ng-model="textConfig.textColor" md-color-preview flex></div>
</div>
<div layout="row">
<div flex md-color-picker="textConfig.backgroundOptions" ng-model="textConfig.textBackground" md-color-history="true" md-color-alpha-channel="true"></div>
</div>
<div>
<h5>Text Preview</h5>
<div class="md-color-picker-checkered-bg" layout="row" layout-align="center center">
<div class="text-preview" ng-style="{'background-color': textConfig.textBackground, 'color': textConfig.textColor, 'font-family': textConfig.font}" style="width: 100%; height: 100%;" layout="row" layout-align="center center" layout-padding>
The five boxing wizards jump quickly.
</div>
</div>
</div>
</div>
<span flex="10"></span>
</md-content>


<script src="demo/lib/tinycolor/dist/tinycolor-min.js"></script>

<!-- Angular Material Dependencies -->
<script src="demo/lib/angular/angular.min.js"></script>
<script src="demo/lib/angular-animate/angular-animate.min.js"></script>
<script src="demo/lib/angular-aria/angular-aria.min.js"></script>
<script src="demo/lib/angular-cookies/angular-cookies.min.js"></script>


<!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
<script src="demo/lib/angular-material/angular-material.min.js"></script>

<!-- Custom Scripts -->
<script src="dist/mdColorPicker.min.js"></script>
<script src="demo/js/app.js"></script>
</body>
</body>

</html>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "md-color-picker",
"version": "0.2.6",
"version": "0.2.7",
"description": "Angular-Material inspired color picker.",
"main": "dist/mdColorPicker.min.js",
"dependencies": {
Expand Down
3 changes: 2 additions & 1 deletion src/js/mdColorPicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -881,9 +881,10 @@ angular.module('mdColorPicker', [])
options.mdColorRgb = options.mdColorRgb === undefined ? true : options.mdColorRgb;
options.mdColorHsl = options.mdColorHsl === undefined ? true : options.mdColorHsl;
options.mdColorHex = ((options.mdColorHex === undefined) || (!options.mdColorRgb && !options.mdColorHsl)) ? true : options.mdColorHex;
options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel;
options.mdColorAlphaChannel = (!options.mdColorRgb && !options.mdColorHsl) ? false : options.mdColorAlphaChannel;

dialog = $mdDialog.show({
multiple: true, // An option to allow this dialog to display over one that's currently open.
templateUrl: 'mdColorPickerDialog.tpl.html',
hasBackdrop: options.hasBackdrop,
clickOutsideToClose: options.clickOutsideToClose,
Expand Down