brianpkelley / md-color-picker Goto Github PK

When doing a npm install the following warning is displayed:

npm WARN package.json [email protected] license should be a valid SPDX license expression

Valid expressions are listed here.

mdColorPicker.js line 482
if (newVal !== '' && typeof newVal !== 'undefined' && newVal && newVal !== oldVal) {
Why did you use this in condition? This means I could never return to default background

When you set a predefined value the clear button goes below the input container, but when you clear and select another color it looks fine.

The color picker was working perfectly, then one day the little color icon disappeared. Then today we got a report from a user and here's the message that we're seeing:

vendor.js:25 Error: [$compile:nonassign] Expression 'undefined' in attribute 'mdColorPreview' used with directive 'mdColorPicker' is non-assignable!

Any idea what that might mean?

For [email protected], the md-tabs has a padding-bottom of 48px, which shifts the contents up, such that they overlay the RGB/HSL/HEX value.

Suggested CSS correction (just to give you a direction):

[md-color-picker-dialog] md-tabs {
    padding-bottom: 0 !important;
}

Great library, tanks!

When the popup opens, it auto selects the value at the top. This brings up the keyboard when you are doing it on mobile. Is there anyway to disable this auto selection?

Hi Brian,

Great work on this directive. I just wanted to give some general thoughts as it's still at a (relatively) early stage.

Remove/separate the history functionality

It seems beyond the scope of the directive to manage history and a tough ask to fit every users needs.

Simplify input template

The key part(s) of the directive is the dialog. The preview/icon/clear button could be separated to allow more flexible implementations and customisation. For instance removing the floating label etc.

Consolidate generic/material pallete tabs

Eventually an option for specifying your own palettes here would be good, optionally defaulting to the generic/material palettes.

Switch from LESS to SCSS

SCSS is used in the Angular Material project so it'd be easier to integrate into projects and allow for use of their variables.

I'd be great to get your thoughts then perhaps I can contribute some.

Thanks,
James

We are launching the colour picker from another modal "md-dialog"
This causes the calling dialog to be closed and we can't return to it once the colour picker has been closed

Is there any way to configure or set up the colour picker in order to work together with other modal dialogs ?

Thanks

Currently translations are not working.

label="{{LABEL | translate}}"

Does not work yet.

I would like to get the value as #RGBA and not as rgba(R, G, B, A).

Any chance we can add some options to allow customisation of the UI?
For example

1. hide elements of the UI we dont want to make available..
2. limit the colors to a specific pallet
3. hide the heading, tabs etc

That sort of thing....

If I use this in a md-dialog form, then the dialog vanishes when trying to select the color

Hi,

Great directive.

Can anything be done about all the logging to console? Especially in the minified version..?

O am running the latest angular material and I included angular material icons for safe measure why do I then get text and not the icons.

Hello,

Could you make sure NPM is up to date? The package page says it was last published 4 months ago, and when I installed it seems to be a few commits behind.

https://www.npmjs.com/package/md-color-picker

Thanks!

it is a small wish.
of course, you can write

.md-color-picker-clear{
    display: none;
}

but it's a little crutch.
ps. great thanks

Title pretty much sums up:

With md-color-alpha-channel="false", the alpha slider is present.
Withmd-color-alpha-channel="true", the alpha slider is not.

The option works well with the spectrum pallet, not with the slider one.

Is there any way to launch the color picker from a button instead of the input/preview?

I installed latest version tinycolor and imported(included) this in my app. All worked fine.
then I was installing md-color-picker and tried include md-color-picker, but got the error. 'tinycolor is not defined'. I am tried download tinycolor with bower and npm. nothing changed...

I need to translate button label in different languages, but i don't see this possibility.
Can i suggest the https://github.com/angular-translate/angular-translate module?

Thak you

I have installed color picker and have been following your instructions on the main page. However, I was keep getting the same error for your options, more to the point at the history.

$scope.navbarBgColor.options = {
        label: "Choose a color",
        icon: "brush",
        default: "#f00",
        genericPalette: false,
        history: false
      }

with <div md-color-picker="navbarBgColor.options" ng-model="navbarBColor.color"></div>.

The error also occurs when I implement the options as an attribute of the div.

It's takes about a second to open the dialog. What's wrong with it?
How can I speed it up?

setting preserveScope and skipHide to true while opening the color picker from an open mdDialog will keep the dialog component open for a user to select a color, and return to the original dialog

I can't validate md-color in a form because is missing the name attribute in the input filed.
Also i can't put inside ng-messages and add a custom validation (By directive) on input field.

Es.
<md-input-container class="md-block" > <label>Label</label> <input type="email" ** name="name"** ng-model="model" **custom-validator** /> **<ng-messages> <ng-message><ng-message> </ng-messages>** </md-input-container>

I'm trying to solve this by using another version of template mdColorPicker.tpl.html in order to put inside the the missing elements, but is not a good solution.

Do you have a suggestion?

Thanks

Angular material is missing.

When passing a boolean to the directive it is interpenetrated as a string. mdDialog is treating "false" as true. Need to cast the value to boolean when "true" or "false"

Hi there,

I was wondering if there is a way to import the package using ES6 module loaders, I am attempting to use it with Meteor with no success.

Thanks in advance

Hi.
When dialog is loaded is seems to be everything ok, but when browsing through tabs, the palette tab seems to be empty. Debug shows that palette is created correctly from template but cell containing de colors have a 0px width value (value rendered by browser from css configuration):

If template forces a width value as does with heigh it works, line 879:
<div ng-repeat="col in row track by $index" flex="10" style="height: 25.5px;width: 25.5px;" ng-style="{\'background\': col};" ng-click="setPaletteColor($event)"></div>' +
But this is probably not the most elegant way to do it. It seems that flex is not working. Please, could you give some instructions to solve the problem?

Thanks.

Your component is amazing! But I'm currently working in a project from a printing company and they use CMYK color pattern, I know I can convert hex to CMYK after the user picks a color, but I want to know if it's possible to show the CMYK value directly in the component input area.

Both angular.js and angular-material are licensed under MIT.

GPL-2.0 requires that the source of the application in which this module is used is also made available under the GPL license. I think this will prevent a substantial group of users to use this module. The MIT license is much more permissive.

I am trying the demo, and using the spectrum I can't seem to be able to select pure white or pure black. The upper left corner is something like "#fffefe" instead of "#ffffff".

I've tried using Firefox, Chrome and IE11 on Win7.

Add a tab, or change your grid tab to show material design colors outlined here
https://www.google.com/design/spec/style/color.html

I tried color picker with material 1.0.3 and angular 1.4.8 and all layout becomes askew.
In both parts editor and dialog.

Hi! color picker not selecting properly in ionic framework on the tablet. Any help?
Thanks!!!

I have installed md-color-picker through npm. My .js file does not contain all the features you have in v0.2.6. I noticed that files in your master branch are not the same with your develop branch. Could you fix npm installation so it will have all the features?

P.S. Specifically, I am interested in hiding RGB and HSL tabs, but code for this functionality is not included in npm installation.

The number input should have set the following min and max attributes and optional the step attribute (default is 1). Furthermore for better mobile support set the pattern attribute: http://bradfrost.com/blog/mobile/better-numerical-inputs-for-mobile-forms/

R: <input type="number" min="0" max="255" pattern="[0-9]*">
G: <input type="number" min="0" max="255" pattern="[0-9]*">
B: <input type="number" min="0" max="255" pattern="[0-9]*">

A: <input type="number" min="0" max="1" step="0.05" pattern="[0-9]*">
(step increase/decrease by 5%).

When open a color picker inside a mdDialog he close his parent. Anyone has any suggestions?

Example in the documentation is using "value" rather than "ng-model."

When doing a npm install the following warning is displayed:

npm WARN deprecated [email protected]: Please use gulp-cssnano instead.

Link to gulp-cssnano.

This is (http://plnkr.co/edit/hPxmahoKTKascaFTLaZg?p=preview) a plunker with angular material 1.0.5.
Some elements are not correctly displayed :

• Popup: input filed, history button
• Field: cancel button

Thank you

The functionality I was really looking for was similar to that in the date picker demo:
https://material.angularjs.org/latest/demo/datepicker

Can you explain your design decision? This is a feature I am interested in. I'd be happy to contribute.

I've tried md-color-picker with the latest available Angular Material 0.11.2.
Layouts in demo and md-color-picker popup are broken.
Demo: http://embed.plnkr.co/MFpIsj/

You can not choose color on edge, its always follow the mouse position, and if you click to a color nothing happend.

When running the plunker demo example you will already see that some tabs (second and third tab) are not rendered well in IE 11.
Seems some styling/css issues?

This obviously isn't a bug with this directive but on line 768 you are looping through the app's material palette and have the backgroundColor set to the 3 RGB values via value['500'].value[0,1,2]. If the app has a custom palette defined that is not configured per the angular spec (as mine is I think. I just use the hex not RGB values) then there is only a single value['500'].value[0] which eventually will throw an error when the 2nd value is not there.

e.g

var green = $mdThemingProvider.extendPalette('green', { '500' : '#028015'});
$mdThemingProvider.definePalette('green', 'green'); //was overriding but is not configured correctly.

Love the work you have done so far!

Add option to enable/disable transparency

Good day!
This colorpicker is inactive when I put md-color-input into the modal?
It opens and seems fine, but I am not able to select any of colors, but when I close the modal it is able to select colors. Need help.
Do anyone have some suggestions?

Regards, Vadim.