thomaslindstrom / color-picker Goto Github PK
View Code? Open in Web Editor NEWA color picker for the Atom Editor. Right click a color and select color picker to open it.
License: MIT License
A color picker for the Atom Editor. Right click a color and select color picker to open it.
License: MIT License
It would be really helpful if there were a CHANGELOG
to be able to see at a glance what was added / fixed / changed in each version. Thanks! 😃
Not sure what's up, but I can't get the picker to open, whether by key shortcut or by going through the command list.
atom.workspaceView is no longer available.
In most cases you will not need the view. See the Workspace docs for
alternatives: https://atom.io/docs/api/latest/Workspace.
If you do need the view, please use atom.views.getView(atom.workspace)
,
which returns an HTMLElement.
Atom.Object.defineProperty.get (/Applications/Atom.app/Contents/Resources/app/src/atom.js:55:11)
Object.activate (/Users/jmp/.atom/packages/color-picker/lib/ColorPicker.coffee:18:21)
Currently if I have a setup of less varaibles like this:
@site-wide-color: #123456
@specific-color-that-could-change: @site-wide-color
The @specific-color-that-could-change
is not evaluated to a color. Are there plans to support this? I may be able to help with a patch if this feature desired. I think a phase one of just showing the value is a good start.
Here is what I see:
The real issue is when I use the @specific-color-that-could-change
outside that file. I tried to look it up, and it wouldn't do the lookup.
Currently a function [ex: lighten($var, 20%);] shows just the base color ($var), not the result of the function. Could a use highlight a whole function, open Color Picker and the result of the function be displayed?
On opening the color picker via shortcut, it appears for a moment, then dies with this error:
Uncaught TypeError: Cannot read property '0' of undefined /[my home folder]/.atom/packages/color-picker/lib/ColorPicker-view.coffee:171
It started this morning, and is still happening after the latest release (3 hours ago coincidentally)
This is on OSX if it matters. Thanks!
Just a heads up, they just updated atom to atom-shell 0.15 which upgrades to version 36 of Chromium. Chromium 36 no longer allows colors for <canvas> tags to use quirks mode, which means you need to include a leading hash mark with your colors. So when atom 0.121 is released you'll probably run into this issue.
In particular, color-picker will crash at startup with this error:
"Error: Failed to execute 'addColorStop' on 'CanvasGradient': The value provided ('FF0000') could not be parsed as a color.
on line color-picker\lib\ColorPicker-hueSelector.coffee:27:.
Here is info on the relevant change to Chromium:
http://src.chromium.org/viewvc/blink?view=revision&revision=171791
You probably just need to add hash marks to the list of _hexes, although I haven't done any extensive testing.
Use Workspace::getActivePaneItem instead
WorkspaceView.getActivePaneItem (/Applications/Atom.app/Contents/Resources/app/src/workspace-view.js:564:7)
<unknown> (/Users/aaronransley/.atom/packages/color-picker/lib/variable-inspector.coffee:48:44)
_fulfilled (/Applications/Atom.app/Contents/Resources/app/node_modules/q/q.js:787:54)
self.promiseDispatch.done (/Applications/Atom.app/Contents/Resources/app/node_modules/q/q.js:816:30)
Promise.promiseDispatch (/Applications/Atom.app/Contents/Resources/app/node_modules/q/q.js:749:13)
<unknown> (/Applications/Atom.app/Contents/Resources/app/node_modules/q/q.js:557:44)
flush (/Applications/Atom.app/Contents/Resources/app/node_modules/q/q.js:108:17)
process._tickCallback (node.js:349:11)
atom.workspaceView is no longer available.
In most cases you will not need the view. See the Workspace docs for
alternatives: https://atom.io/docs/api/latest/Workspace.
If you do need the view, please use atom.views.getView(atom.workspace)
,
which returns an HTMLElement.
Atom.Object.defineProperty.get (/Users/james/Downloads/Atom.app/Contents/Resources/app/src/atom.js:55:11)
Object.activate (/Users/james/.atom/packages/color-picker/lib/ColorPicker.coffee:18:21)
My gut says I want it to scroll with the page. But maybe closing would work too. Can hook editorView.verticalScrollbar.on('scroll', @onEditorScrolled)
[Enter steps to reproduce below:]
Atom Version: 0.165.0
System: Mac OS X 10.10.1
Thrown From: color-picker package, v1.1.0
Uncaught TypeError: Cannot read property 'reset' of null
At /Users/reberhardt/.atom/packages/color-picker/lib/ColorPicker.coffee:100
TypeError: Cannot read property 'reset' of null
at Object.module.exports.open (/Users/reberhardt/.atom/packages/color-picker/lib/ColorPicker.coffee:100:22)
at atom-workspace.<anonymous> (/Users/reberhardt/.atom/packages/color-picker/lib/ColorPicker.coffee:19:69)
at atom-workspace.handler (/Applications/Atom.app/Contents/Resources/app/src/space-pen-extensions.js:115:32)
at atom-workspace.jQuery.event.dispatch (/Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4681:9)
at atom-workspace.elemData.handle (/Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4359:46)
at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (/Applications/Atom.app/Contents/Resources/app/src/command-registry.js:243:29)
at /Applications/Atom.app/Contents/Resources/app/src/command-registry.js:3:61
at KeymapManager.module.exports.KeymapManager.dispatchCommandEvent (/Applications/Atom.app/Contents/Resources/app/node_modules/atom-keymap/lib/keymap-manager.js:549:16)
at KeymapManager.module.exports.KeymapManager.handleKeyboardEvent (/Applications/Atom.app/Contents/Resources/app/node_modules/atom-keymap/lib/keymap-manager.js:391:22)
at HTMLDocument.module.exports.WindowEventHandler.onKeydown (/Applications/Atom.app/Contents/Resources/app/src/window-event-handler.js:167:20)
2x -0:03.7 editor:newline (input.hidden-input)
-0:00.0 color-picker:open (input.hidden-input)
{
"core": {
"disabledPackages": [
"linter"
],
"useReactEditor": true,
"themes": [
"atom-dark-ui",
"monokai"
]
}
}
# User
autocomplete-plus, v0.21.0
color-picker, v1.1.0
go-plus, v2.0.10
language-matlab, v0.1.0
monokai, v0.7.0
# Dev
No dev packages
/cc @atom/core
Hi there,
I've noticed that ver since I've installed color-picker, Atom is slightly slower on load. While investigating the Timecop logs, I noticed that color-picker is taking a lot to activate (45-60ms).
This should definitely be optimised in order to stop influencing the speed of Atom.
Anything you can do regarding this?
Thanks in advance!
Can the upcoming Saas/Less variable support also handle Stylus variables?
What about the built-in functions like lighten(color, amount)? :D
I find HSLA to be one the most intuitive color formats to work with by allowing to directly manipulate Hue, Saturation and Lightness. Any chance this plugin could gain support for this?
Hi there !
Thanks a lot for the improvement with Sass/LESS variables !
A cool feature will be to allow us to directly choose a variable color instead of a color value!
For illustrated my demand, imagine that I have @beautiful-red: #903;
. Then if I use the color-picker and go to channels near to that value (ex. #CC0000
or rgb(204, 0, 0)
), it propose me @beautiful-red
.
I imagine that is really tricky but it will be awesome! ;-)
Would it be possible that you add support for SVG files, Coffee and JS support?
Uncaught TypeError: Cannot call method 'matchesAttributes' of undefined /Applications/Atom.app/Contents/Resources/app/src/editor.js:1880
module.exports.Editor.handleMarkerCreated /Applications/Atom.app/Contents/Resources/app/src/editor.js:1880
(anonymous function) /Applications/Atom.app/Contents/Resources/app/src/editor.js:3
(anonymous function) /Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:133
module.exports.Emitter.emit /Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:132
module.exports.DisplayBuffer.handleBufferMarkerCreated /Applications/Atom.app/Contents/Resources/app/src/display-buffer.js:1136
(anonymous function) /Applications/Atom.app/Contents/Resources/app/src/display-buffer.js:5
(anonymous function) /Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:133
module.exports.Emitter.emit /Applications/Atom.app/Contents/Resources/app/node_modules/emissary/lib/emitter.js:132
module.exports.MarkerManager.createMarker /Applications/Atom.app/Contents/Resources/app/node_modules/text-buffer/lib/marker-manager.js:173
module.exports.MarkerManager.markRange /Applications/Atom.app/Contents/Resources/app/node_modules/text-buffer/lib/marker-manager.js:87
module.exports.TextBuffer.markRange /Applications/Atom.app/Contents/Resources/app/node_modules/text-buffer/lib/text-buffer.js:927
module.exports.DisplayBuffer.markBufferRange /Applications/Atom.app/Contents/Resources/app/src/display-buffer.js:863
module.exports.Editor.markBufferRange /Applications/Atom.app/Contents/Resources/app/src/editor.js:1056
module.exports.Editor.addSelectionForBufferRange /Applications/Atom.app/Contents/Resources/app/src/editor.js:1157
module.exports.ColorPickerView.selectColor ColorPicker-view.coffee:424
module.exports.ColorPickerView.replaceColor ColorPicker-view.coffee:439
(anonymous function) ColorPicker-view.coffee:176
jQuery.event.dispatch /Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4676
elemData.handle /Applications/Atom.app/Contents/Resources/app/node_modules/space-pen/vendor/jquery.js:4360
The following does not work:
@some-colour: green;
Deprecation cop is not happy with color-picker in the latest Atom.
keymaps/color-picker.cson
Use theatom-workspace
tag instead of theworkspace
class.
Unless Alpha is Edited RGB is not an option
Just went to a blank white box... no apparent reason.
I was trying to use it in a sass file.
Any ideas?
The preview image on https://atom.io/packages/color-picker is dead. Maybe it should point to the same thing as the repo homepage?
...would be lovely, otherwise this is the hands down the best color picker i've ever seen in a text editor. thanks!
Steps to reproduce:
ctrl
+k
, left
)Versions:
Uncaught TypeError: Cannot call method 'matchesAttributes' of undefined /usr/share/atom/resources/app/src/editor.js:2037
Uncaught TypeError: Cannot call method 'matchesAttributes' of undefined /usr/share/atom/resources/app/src/editor.js:2037
module.exports.Editor.handleMarkerCreated /usr/share/atom/resources/app/src/editor.js:2037
(anonymous function) /usr/share/atom/resources/app/src/editor.js:3
(anonymous function) /usr/share/atom/resources/app/node_modules/emissary/lib/emitter.js:133
module.exports.Emitter.emit /usr/share/atom/resources/app/node_modules/emissary/lib/emitter.js:132
module.exports.DisplayBuffer.handleBufferMarkerCreated /usr/share/atom/resources/app/src/display-buffer.js:1411
(anonymous function) /usr/share/atom/resources/app/src/display-buffer.js:5
(anonymous function) /usr/share/atom/resources/app/node_modules/emissary/lib/emitter.js:133
module.exports.Emitter.emit /usr/share/atom/resources/app/node_modules/emissary/lib/emitter.js:132
module.exports.MarkerManager.createMarker /usr/share/atom/resources/app/node_modules/text-buffer/lib/marker-manager.js:183
module.exports.MarkerManager.markRange /usr/share/atom/resources/app/node_modules/text-buffer/lib/marker-manager.js:87
module.exports.TextBuffer.markRange /usr/share/atom/resources/app/node_modules/text-buffer/lib/text-buffer.js:928
module.exports.DisplayBuffer.markBufferRange /usr/share/atom/resources/app/src/display-buffer.js:1095
module.exports.Editor.markBufferRange /usr/share/atom/resources/app/src/editor.js:1152
module.exports.Editor.addSelectionForBufferRange /usr/share/atom/resources/app/src/editor.js:1269
module.exports.ColorPickerView.selectColor ColorPicker-view.coffee:425
module.exports.ColorPickerView.replaceColor ColorPicker-view.coffee:440
(anonymous function) ColorPicker-view.coffee:177
jQuery.event.dispatch /usr/share/atom/resources/app/node_modules/space-pen/vendor/jquery.js:4676
elemData.handle
First off, thank you for the awesome package!
The keyboard binding of cmd-shift-c
does not do anything when the cursor is over a hex code or when the hex code is selected, until the first time we right click and choose Color Picker.
After that, cmd-shift-c
keeps opening the last opened color regardless of the position of the cursor.
"This package added 500ms to startup time."
After updating to .133, when viewing the settings page I see the Picker UI appear at random, for a second at best, repeatedly over the Package List on the left.
First: this thing is awesome.
color-picker (9 deprecations)
atom.workspaceView is no longer available. In most cases you will not need the view. See the Workspace docs for alternatives: https://atom.io/docs/api/latest/Workspace. If you do need the view, please use atom.views.getView(atom.workspace), which returns an HTMLElement.
Called 1 timeCreate Issue on color-picker repo
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
Object.activate - /home/david/.atom/packages/color-picker/lib/ColorPicker.coffee:18:21
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
ColorPickerView.initialize - /home/david/.atom/packages/color-picker/lib/ColorPicker-view.coffee:39:18
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
Object. - /home/david/.atom/packages/color-picker/lib/ColorPicker-saturationSelector.coffee:6:19
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
Object. - /home/david/.atom/packages/color-picker/lib/ColorPicker-saturationSelector.coffee:7:26
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
Object. - /home/david/.atom/packages/color-picker/lib/ColorPicker-alphaSelector.coffee:6:19
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
Object. - /home/david/.atom/packages/color-picker/lib/ColorPicker-alphaSelector.coffee:7:26
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
Object. - /home/david/.atom/packages/color-picker/lib/ColorPicker-hueSelector.coffee:7:19
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
Object. - /home/david/.atom/packages/color-picker/lib/ColorPicker-hueSelector.coffee:8:26
Atom.Object.defineProperty.get - /usr/share/atom/resources/app/src/atom.js:55:11
ColorPickerView.bind - /home/david/.atom/packages/color-picker/lib/ColorPicker-view.coffee:154:17
Is there support for searching the project tree for variables? Most of my variables are in a variables.sass file in another directory. Is it possible to have these variables recognized as well?
I just wiped my atom settings to start from a clean slate and discovered an issue when installing this plugin. On a fresh install of atom (v100) on Ubuntu 14.04, immediately after the plugin is downloaded, the atom editor will turn black and nothing will be rendered.
Restarting atom does not fix this, and the only way I've found so far to fix the issue is by disabling the plugin manually and not using it.
Deprecation cop has a problem with you code.
atom.workspaceView is no longer available.
In most cases you will not need the view. See the Workspace docs for
alternatives: https://atom.io/docs/api/latest/Workspace.
If you do need the view, please use atom.views.getView(atom.workspace)
,
which returns an HTMLElement.
Atom.Object.defineProperty.get (/usr/share/atom/resources/app/src/atom.js:55:11)
Object.activate (/home/fiws/dotfiles/atom.symlink/packages/color-picker/lib/ColorPicker.coffee:18:21)
Same warning for these lines:
/color-picker/lib/ColorPicker-view.coffee:39:18
/color-picker/lib/ColorPicker-saturationSelector.coffee:6:19
/color-picker/lib/ColorPicker-saturationSelector.coffee:7:26
/color-picker/lib/ColorPicker-alphaSelector.coffee:6:19
/color-picker/lib/ColorPicker-alphaSelector.coffee:7:26
/color-picker/lib/ColorPicker-hueSelector.coffee:7:19
/color-picker/lib/ColorPicker-hueSelector.coffee:8:26
/color-picker/lib/ColorPicker-view.coffee:154:17
This error appears when I try to use the Color Picker. I click right on the property value then the color picker opens but it's immediately closed and the Chrome console opens itself.
The error is located to : _.atom/packages/color-picker/lib/ColorPicker-view.coffee:171_
So, if I let my console open and I try again to use the picker, it works like a charm.
If I use color picker to choose a color such as #333333
, scss-lint complains about it and wants #333
. It would be cool if there were an option in the Color Picker package that would dump out abbreviated hexes.
Something like:
Convert to HSL
Convert to RGBA
...
It would be great if other packages could benefit of the great work you did on detecting less/sass variables in files. I didn't dug much in the codebase but I believe this feature could be extracted as a npm module.
To go further, I think it would be awesome if it could lead to some kind of unified API to read variables content accross a project for the 3 main preprocessor (less, sass, stylus).
To be frank, I was considering implementing something like that in my color highlighting package to be able to provides something like a project palette, and, why not, dynamic snippets, where you can start typing something like color:
to open a palette dialog when you can select the color to insert from the project palette.
Maybe we can share the work on that, what do you think of it ?
When switching themes in Atom on the Settings tab the color picker shows up and disappears.
This is not a huge problem, but if the cursor position is low enough, the picker is placed such that it hides the position, sorta snapped to the bottom of the viewport. It'd be nice if the picker would be e.g. offset horizontally such that the color value in the source would always be visible.
atom.workspaceView is no longer available.
In most cases you will not need the view. See the Workspace docs for
alternatives: https://atom.io/docs/api/latest/Workspace.
If you do need the view, please use atom.views.getView(atom.workspace)
,
which returns an HTMLElement.
Atom.Object.defineProperty.get (/Applications/Atom.app/Contents/Resources/app/src/atom.js:55:11)
Object.<anonymous> (/Users/jawad/.atom/packages/color-picker/lib/ColorPicker-saturationSelector.coffee:7:26)
When I open the picker and then scroll the editor using the normal two-finger swipe, the picker stays in the same position relative to the viewport even though the viewport contents scroll. Probably #2 implements closing on cursor move since that works, but this would be nice too.
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.