I am trying to use angular material,
I read everything in the documentation's theming section revied most of the demos and directive docs and even tried to have a look into the source code and I was wandering if there is a guide somewhere that explains how each angular material ui directive uses the different intention palettes and hues set in a theme.
The reason I am asking for this is that it feels like as long as we choose standard palettes everything plays nice but the moment we want to make any change we are blind as to the implications.
(e.g. how to prevent a situation where you choose a background color the ends up being the same color as some accent color used for example as the underline color for a textbox causing the undeline not to be visible.)
There is one part in the mentioned documentation that comes to mind.
Specifying Custom Hues For Color Intentions
You can specify the hues from a palette that will be used by an intention group by default and for the md-hue-1, md-hue-2, md-hue-3 classes.
By default, shades 500, 300 800 and A100 are used for primary and warn intentions, while A200, A100, A400 and A700 are used for accent.
You can check the hues/shades used by each component in the source. There is a *-theme.scss file for each component: https://github.com/angular/material/blob/master/src/components/input/input-theme.scss
And there is the official material design style guide, telling you which hues/shades are used for what.
https://material.google.com/style/color.html#color-color-palette
Related
When experimenting with the theme I often want to try to set the colour of a specific part of a component to a different colour. For example, the inner, grey, borders for a DataGrid component.
If I want to do this across the entire app, the generally best method seems to be to use the palette to set the colour, making it so that any other similar scenario will use that same colour. (Supposing there was a "lite" data-grid that uses the grey borders, for example.)
However, finding out what part of the palette that component involves a huge amount of trial and error, changing all parts of the palette to bright colours until finally the component I'm looking at changes. This is especially time consuming if it turns out that the colour doesn't come from the palette at all.
I've not found any mention on the documentation about what palette colours a component uses.
Is there some way I can easily find out where the colour for a part of a component's coming from?
I'm using the com.codename1.charts lib but there isn't a whole lot of documentation. None of the chart demos use dashed or dotted lines and I assumed you could use BasicStroke.DASHED but changing this constant value does not seem to make a difference and keeps the line solid.
I'm using the following code:
colors.add(ColorUtil.GRAY);
styles.add(PointStyle.POINT);
strokes.add(BasicStroke.DASHED);
lineWeight.add(3);
XYMultipleSeriesRenderer renderer = buildRenderer(colors, styles, strokes, lineWeight);
There doesn't seem to be support for that. The charts were ported from Android and use a compatibility layer. That stroke class is an Android compatibility class that includes some functionality we don't support yet specifically intervals for a stroke.
You can file an issue to enhance that, basically the BasicStroke includes an mIntervals variable that isn't matched in Stroke. The fix is obviously harder as the draw method in Graphics would need to account for that too and that would mean implementing that in all the native platform ports.
I'm not sure if there is a simple workaround for this.
Comparing Extjs crisp and classic themes, apart from styling, the there is a difference with size / scale of ui.
The Crisp theme looks its zoomed up 110% of classic.
Is it possible to scale down the size of crisp theme to that of classic ?
I realize that with styling comes padding, borders and image sizes which would be set for compoentns under each theme.
But i would still like to know if scaling down the size is possible ?
Thanks in advance
Yes, the font size is larger (13px in crisp, 12px in classic), plus each them is using a different font scheme, which will add a bit of a difference as well.
To your question of scaling down the font size, the answer, of course, is yes this is possible. You could go down a bad road of creating a bunch of CSS rules to override what's already in crisp, and that would certainly work.
However, the better option would be to create your own theme altogether. You could create a theme that extends crisp, and then simply tweak the various areas that you want to be different (font sizes, paddings on different components, etc). If you do this, keep in mind that the crisp theme extends the neptune theme, while classic only extends neutral (which neptune also extends). I say this because if you look at the actual crisp theme, it's pretty bare in terms of the things you're looking to tweak (padding, margins, etc). That's because the majority of these derive from the neptune theme, so you'll probably do yourself a favor to become acquainted with both themes in order to most efficiently achieve the result you're after.
If you've not done a custom Ext JS theme before, be sure to check out the guide here: http://docs.sencha.com/extjs/5.0/core_concepts/theming.html. This guide also has a nice chart that illustrates the theme inheritance for the default theme packages, so be sure to take a look at that as well.
Hope that helps!
ExtJS has a very useful layout mechanism called flex. It works by summing all the things on a row or in a column. Then the space is parceled out using the flex value divided by the sum of all the flex values. This results in a layout like below:
The Red box is an hbox layout, the blocks E and F have the given flex values that sum up to 3, so E gets 1/3 the width of the screen, and F gets 2/3rds.
The Blue box is another hbox layout, where all 4 pieces (A-D) have the same flex so each one gets 25% of the space.
What isn't shown is the surrounding vbox layout where the blue box has a flex of 22 and the red box has a flex of 78.
Is there anything like this kind of layout in Angular? If there isn't, how would you put this together in Angular?
Additional information based on some of the answers below:
I want to be able to replace extjs with Angular. To do that I need some functionality that I have in extjs that I don't know exists in Angular. I've found ways to watch for screen size, change to adjust the overall display size, but I haven't seen a good example yet of a directive that essentially introspects its constituent directives for this flex value and sets their size based on a size change event of the container. Flex doesn't work from inside the divs, it works inside the container of the divs, because it has to go across all the divs in the container to divide the space correctly. I haven't seen an angular directive that does this yet.
I have no actual development experience with Angular yet (I've watched many of the videos from http://egghead.io, I've read documentation and tutorials, listened to this podcast: JSJ-Angular) and so I don't know if this is something that is easy to solve, or hard to solve, or if someone has already solved it. This flex layout is wickedly cool and easy to use, in fact for full page apps, I'm not sure there is an easier way to lay them out so that they stay full screen and are malleable to screen size changes. Grid systems are great for some things, but they don't address what the flex system addresses.
I'm trying to see if there is a way to leap from extjs to Angular without really making my life difficult.
Additional discovered information:
Looks like flex is becoming a display type now in the form of the CSS display: flex or display: inline-flex (with prefixes at the moment)
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Interesting to see the illustration calls it the Holy Grail Layout example. Of course IE won't implement it right, or in a timely fashion, but my customers don't mind using Chrome if it gets the job done.
Turns out someone has create one and it does MOST of what I was looking for.
http://ngmodules.org/modules/flexy-layout
You missing the point. Angular is only JS library that helps you with:
modularization your code
allow you load content asynchronously
change content using "magic" (two-way bindings)
etc.
It doesn't describe style of your site. You have to do it by yourself or use one of popular fluid/responsive CSS frameworks, i.e.:
Bootstrap by Twitter
Zurb Foundation
Inuit.css
Pure
Gumby
Metro UI
etc.
Just choose yourself and then apply to your site. Using that also make your design independent from JS (which is very bad) and JS framework (which is 9th circle of hell).
How do you deal with the different XP themes when designing a WinForms UI? Do you avoid hard coded color values or just accept that your UI will not look good on non standard themes?
For instance, I have a light blue gradient panel that looks good against the standard control background color but would clash with other custom themes. What's a good approach to take?
Avoid hex colors and colors with names like "White" or "Green". The color picker for most objects should be able to show you colors with names like "ActiveWindow" or "ForegroundText". Those are the colors you want to be using. They are available via code also, and you want to choose them so that the names have some relationship to how they're used. For example, don't set "ForegroundText" as your background color just because you want a black background. If you have a gradient, then use those colors to build the gradient. Also, there's an event you may need to handle for when the theme changes.
That's if you choose to respect the themes. If you have a really out-there interface then you may want to specify your own colors. In that case, never use the windows colors, because they won't be reliable and you might end up with something real ugly. That means you'll need to go and change all the defaults in the standard controls, but if you're doing this you probably have your own controls anyway.
In summary, the thing to remember is that it's an all or nothing shot: either respect themes and always use colors defined based on Windows widget elements, or don't use themes and never use those colors at all.