atom-material / atom-material-ui Goto Github PK
View Code? Open in Web Editor NEWA dynamic UI theme for Atom that follows Google's Material Design Guidelines
License: MIT License
A dynamic UI theme for Atom that follows Google's Material Design Guidelines
License: MIT License
Thanks for a great theme. I find this improves the UI a bit (clear sans could be substituted with Roboto although clear sans is better for UI.
@font-size: 13px;
@font-family: 'Clear Sans';
body, atom-workspace {
font-size: @font-size;
font-family: @font-family;
}
.tree-view,
.tab-bar .tab,
atom-text-editor[mini],
.btn,
.author {
font-size: @font-size;
font-family: @font-family;
letter-spacing: 0.03em;
}
minimal tree view
.tree-view {
padding-left: 0;
margin-left: -5px;
margin-top: 5px;
&.list-tree.has-collapsable-children .list-nested-item {
> .list-item:before {
content: "";
}
&.collapsed > .list-item:before {
content: "";
}
> .list-tree > li {
padding-left: 10px;
}
}
}
Just meant as inspiration. Close when read ๐
Hey, I prefer to have the syntax alongside One Dark UI, it does looks great.
Would be pretty cool if you could implement a way to set which palette one does want to use, currently it's sets to teal
by default.
It would be nice if there was an option to always show the file icon in the tab instead of only when the tab is active.
I can't load this theme anymore
Stacktrace:
Atom Version: 1.0.2
System: Microsoft Windows 8.1 Pro
Thrown From: atom-material-ui package, v0.5.9
Failed to activate the atom-material-ui theme
At Unrecognised input in C:\Users\15753\.atom\packages\atom-material-ui\styles\autocomplete.less:-1:0
LessError: Unrecognised input
at C:\Users\15753\.atom\packages\atom-material-ui\styles\autocomplete.less:-1:0
-1:31.7.0 find-and-replace:select-next (atom-text-editor.editor.is-focused)
-1:30.2.0 editor:duplicate-lines (atom-text-editor.editor.is-focused)
6x -1:29.4.0 core:move-left (atom-text-editor.editor.is-focused)
-1:28 editor:select-to-beginning-of-word (atom-text-editor.editor.is-focused)
12x -1:24.6.0 editor:move-to-beginning-of-word (atom-text-editor.editor.is-focused)
5x -1:22.1.0 core:delete (atom-text-editor.editor.is-focused)
-1:18.7.0 core:save (atom-text-editor.editor.is-focused.autocomplete-active)
2x -1:06.0 core:delete (atom-text-editor.editor.is-focused)
2x -1:05.6.0 core:move-down (atom-text-editor.editor.is-focused)
2x -1:05.0 core:delete (atom-text-editor.editor.is-focused)
-1:04.6.0 core:move-down (atom-text-editor.editor.is-focused)
-1:03.9.0 core:save (atom-text-editor.editor.is-focused)
2x -0:35.1.0 core:move-left (atom-text-editor.editor.mini.is-focused)
6x -0:34.4.0 core:delete (atom-text-editor.editor.mini.is-focused)
-0:25.8.0 core:confirm (atom-text-editor.editor.mini.is-focused)
-0:20.5.0 application:show-settings (atom-text-editor.editor.is-focused)
{
"core": {
"themes": [
"atom-material-ui",
"viriato"
],
"fileEncoding": "iso88591",
"disabledPackages": [
"wrap-guide",
"refactor",
"refactor",
"open-conemu-here"
],
"autoHideMenuBar": true,
"ignoredNames": [
".git",
".hg",
".svn",
".DS_Store",
"Thumbs.db",
".codekit-cache",
"bower_components",
"node_modules"
]
},
"atom-material-ui": {
"altCmdPalette": true,
"depth": true,
"panelContrast": true,
"slimScrollbar": true,
"tabSize": "Small"
}
}
# User
atom-beautify, v0.28.8
atom-pair, v1.1.6
color-picker, v2.0.11
css-snippets, v0.8.0
emmet, v2.3.12
file-icons, v1.5.8
grunt-runner, v0.11.0
highlight-line, v0.11.0
highlight-selected, v0.10.1
jshint, v1.3.9
linter-csslint, v0.0.14
minimap, v4.12.0
one-tab, v0.6.0
project-manager, v1.15.11
Sass-Syntax-Highlight, v0.1.1
Sublime-Style-Column-Selection, v1.3.0
svn, v0.0.7
tool-bar, v0.1.8
tool-bar-main, v0.0.8
viriato, v0.11.0
# Dev
No dev packages
The background color of the dropdown menus is white -- rendering the text unreadable. It is also fairly ugly, and it can be fixed. The other themes seem to change the background of the dropdowns fine, so I know it can be done.
Here's a screenie with the Atom Material Theme:
Here's a screenie with the Atom Dark Theme:
Edit:
I took a look at your index.less file... It seems as though you aren't including the dropdowns.less file. Is that the issue?
Is it possiable to make the tab size customisable. Like SuperLarge, Large, Normal, Small, SuperSmall
Please change the background in the command palette to match the new background of the cards mentioned in #17
I know #61 introduced icons in, however some people use icon packages and that release doesn't allow those packages to work anymore. Possible to give an option?
I don't think the close tab button should be removed, at least not without the option to re-enable it (and not have to go writing custom CSS to undo what the theme did). Note that this only applies when animations are off.
I don't think it's the place of a theme to disable any features in an editor.
Adding an option to toggle the tab animations would be most appreciated. The current animations are really distracting.
When using the package https://atom.io/packages/file-icons the icons are shown below the filename in the tab.
Atom 1.0.2
atom-material-ui 0.5.9
monokai 0.15.0
Dropdowns have a white background and a very light text color which makes it unreadable, luckily hovering over the items gives the hovered item a blue background so this doesn't really means it's unusable, just though you should know though you probably already knew.
Note that I'm using OneDark which comes with Atom so not a weird syntax theme and the same thing happens with all the other preinstalled syntax themes like Atom Dark and Solarized Dark.
I'm using Atom 1.0.0 in Windows 8.1.
It look worse in monokai syntax theme, which makes the text color white so you can't see the text at all, but I understand it's a third party plugin, just letting you know.
im using the package https://atom.io/packages/file-icons which adds file icons to every tab.
while using atom-material-ui it only displays an icon on the active tab.
a big reason why i like file icons is that it makes it quicker to search through all the open tabs, because the icons provide an additional visual aid. (for example if youre looking for a .js file, you can identify the right tab much quicker by only looking at .js icons)
i'd like an option to restore icons on every tab.
Autocomplete provider - the icon left to the suggestion method isn't noticeable when selected.
AtomLinter just got a major update today (got rewrited basically) and features an inline notification for errors, currently the text of the notification doesn't display, as opposed to One Dark:
The title is pretty self-explanatory for this one. But basically the animations for each tab on the left are unchanged regardless of the setting.
I know it's just a visually pleasing effect but I notice after updating the UI that the ripple from tabs is gone yet the animated underline remains present.
I assume you had good reason to remove it, but I would request that you add it back in and instead put it behind a configuration option. I quite like it, and it was one of the main things that really attracted me to the UI in the first place (although I'm not going to move away without it, it was nice to have).
When animations are disabled you can no longer access the tab controls when hovering over a tab.
I'd also love to see an option to have file icons be shown all the time. It's a little bit jarring for them to suddenly appear when you focus on a tab since it causes the tab width to change and it shifts neighboring tabs. Animations help this a bit, but it's still not ideal.
The font size is too small compare with one dark theme. Maybe add a font size in setting page.
An image explains it better.
Using the "alternative command palette background" option fixes it though, as expected. But right out of the box with the dark Material syntax gives me that. I suspect this has to do with the ongoing work in #11?
Something I've noticed whilst using the UI and Syntax for the last few days in that there is no clear divide between the File Finder and the main editor. The two just blend together.
Just wondering if there would be some value in adding a subtle dividing line between the two? This should make it easier when it comes to resizing the file finder.
There is a very subtle dividing line within the settings panel currently, its only subtle but it really helps divide the settings tabs and the content of each tab.
I love this UI and Syntax by the way, thanks for putting the time in to make this.
I have Show Invisibles is turned on, however they're extremely hard to see.
Invisibles turn on: http://i.imgur.com/DCDLPp5.png
Invisibles turn off: http://i.imgur.com/5hYXwID.png
The user interface should be readable and usable with light syntax themes. Especially those shipped with Atom:
Is it possible to use the same icons of the inspired Sublime Theme?
https://github.com/equinusocio/material-theme
Is it possible to use the same icons of the inspired Sublime Theme?
https://github.com/equinusocio/material-theme
I use One Light. If you open a project that has a git repository with ignored items, those ignored items will be rendered in a dark color (in the tree view).
I've added this to my stylesheets:
.list-group li:not(.list-nested-item).status-ignored,
.list-tree li:not(.list-nested-item).status-ignored,
.list-group li.list-nested-item.status-ignored > .list-item,
.list-tree li.list-nested-item.status-ignored > .list-item {
color: #B2B2B2;
}
Not sure if it's the best color, but works for me!
The theme style switch in the settings doesn't work for me anymore. I'm on OS X 10.10, Atom 1.0.5 (fresh install). All other switches seem to work just fine. Let me know if you need anymore information than that.
Cheers for a great package!
/edit: should say, that I'm not sure it ever worked. I might have just switched to a darker syntax or mixed up my memories with Sublime Text..
I never found the icons on the tabs distracting. Would it be possible to get a setting for this?
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.