brianpkelley / md-color-picker Goto Github PK
View Code? Open in Web Editor NEWAngular-Material based color picker
License: MIT License
Angular-Material based color picker
License: MIT License
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.
It seems beyond the scope of the directive to manage history and a tough ask to fit every users needs.
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.
Eventually an option for specifying your own palettes here would be good, optionally defaulting to the generic/material palettes.
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
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.
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.
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 :
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.