Lets say I have a website where I have some components and main panel. The idea is to take components and add them to the main panel (like a website builder of some sort). And the question is how do I know if I have one component on top of another? Also it would be perfect if i'd know the coverage area size
Note: I dont like the idea of checking positions for every element on this panel. If it can be done with getters or something similar i'd be happy
you can always use "inspect element" option in Google. There are so much option for developers.
and of course if you are developing something you would have an assumption about the initial position, so this is not a problem while doing.
Related
I'm creating a 1 page dashboard that will run fullscreen on a monitor on which I want to display some graphs. I made the graphs already all I need now is a proper template for the page. I was thinking something like this
I really dig the look but I'm clueless on how to make something like this using presumably css/js. Especially the lines in the background and a titlebox.
First of all, you have to code all of the man div-containers including your graphs and data-visuals. For that, a css-framework could help you managing the different views for all devices (http://getbootstrap.com/).
Later on, you could add inner divs for the title box and the background. Also get yourself some inspiration. For example: this is the admin-theme I am using for my actual project: http://admindesigns.com/framework/dashboard.html
After digging into that, you may ask some deeper questions about styling your Dashboard, so it's easier for us to respond to an actual problem ;)
Cheers,
Chris
I would like to ask if there are any examples related to Polymer's animated pages ( http://www.polymer-project.org/docs/elements/core-elements.html#core-animated-pages ) and how we can build a similar demo using the resources provided in the Angular/material repo (https://github.com/angular/material).
I would like to achieve http://www.polymer-project.org/components/core-animated-pages/demos/music.html but I don't want to use Polymer since I would like to use Angular.
Can you please provide me some directions in order to start?
What they typically do with Polymer is have two connected elements which shows only one and when you perform some action, the other gets shown (from display: none) and animates from certain dimentions to its final form. Sometimes elements also shift but it depends on whether the content is able to move to its new position or not.
You have to work with css transition, transform and display. Sometimes even custom animations. And you are mostly changing multiple divs to their final form. I think the most difficult would be animating colors (from white to pink or from yellow to green for example) as those are most difficult to do (performance-wise).
If you look at the example you've set (final link) you see there's a list of items with a detail div and once you click the item you show the detail and transform the contents to its final dimentions.
Just know that these things are pretty hard if you aren't very much into Angular or HTML/CSS/Javascript.
The framework of Polymer for Web is very much a work in progress and i wouldn't be surprised if it took a few months to get similar results for both native and web.
You can take example from things like this: https://medium.com/tictail-makers/giving-animations-life-8b20165224c5 or https://www.polymer-project.org/apps/topeka/ or http://codepen.io/collection/amheq/ . And don't forget to speed it up by using some bootstrap theme like this http://fezvrasta.github.io/bootstrap-material-design/ or something.
I've been struggling with the same problem as there isn't much to go from right now. You stated the Angular project but that will take time. If you want to do it now, you have to do quite some work (if you do, share it with us), but you might be better of with postponing this until most of the bugs and problems have been solved.
Thats what i'm doing now.
I have nested tab panels, (outer tab panel groups inner tabs), like the outer panel is Contacts, and then inside it you have a tab panel for each open contact item, another outer panel is Opportunities and in it you have a tab panel for each open opportunity.
This is confusing to users at first, so I would like to add some styling to tab panels, so users can differentiate and give meaning to outer and inner tabs.
I had zero success tough with syling a tabPanel, what is the right way to do it? bodyCfg, tbar, tbarCls, baseClass???? I never dealt with styling a widget in ExtJS and I'm struggling for half a day with no success.
Any pointers on how styling works especially for TabPanels is appreciated.
thanks,
Hazım
I find more than often you need to get your hands dirty with CSS when it comes to styling ExtJS controls.
This is the general strategy that I follow that's been working for me so far.
you need chrome debugger or similar that allows you to view HTML and change CSS styles on the fly.
look at the HTML for the widget in chrome debugger and manually tweak the styles until you find the exact DOM node that you need to style.
Look for a config variable in the widget that allows you to style that node you found in step 2. Most of the variables are named "xxxCls". This takes experience, there is no short cut, for example what you could do is set the "baseCls" and look at the resulted HTML to see where in the DOM tree that class is inserted.
quite often you will find there is no config variable available to style the thing you want (for example the line-height of the header bar in most panels). In this case you will have to overwrite the default ExtJS CSS class to the value you want. Standard good CSS practice applies.
I'm trying to figure out how layers in Ext work. The documentation is very concise and I can't find a lot about them anywhere else, other than a forum thread where Jack Slocum says they're very simple.
I have a working tree panel, and what I'm now trying to do is put that in a layer so it floats over the page (it's meant as a helper dialog that pops up next to a form element). I've only gotten as far as creating a simple layer with a <div> element in it, but can't get it to contain more advanced stuff. Looking at the Combo source, which uses a Layer for the option list, also didn't make me much wiser.
So, can someone with a little more experience on this subject please tell me: how are you really supposed to use Ext.Layer? Or am I "doing it wrong"? :)
An Ext.Layer is an extension of Ext.element, rather than being an extension of Ext.Component.
Ext.Element doesn't benefit from all the component config options and methods that say an Ext.Panel does, and so you're going to have a much harder time adding a tree panel to an Ext.Layer than if you added the tree panel to an Ext.Window which already benefits from shim and shadow (the two main reasons you would want to use an Ext.Layer).
But before I would resort to using Ext.Window to wrap the tree panel, I would take a look at the shadow config option in tree panel which should provide the 'floating' effect you want...
true (or a valid Ext.Shadow Ext.Shadow.mode value) to display a shadow behind the panel, false to display no shadow (defaults to 'sides'). Note that this option only applies when floating = true.
I'm prototyping a thin client UI using extjs and am looking for an effect that will simulate a form/pane flipping over to reveal another form/pane. Its for a details view for an object that has two major sets of properties.
I found a flex component that can do this, and can even simulate four different forms on the faces of a cube.
Just a sexier, more fun way of doing what you can already do with tabs.
This particular effect may not be available on a cross-browser basis quite yet. Doing perspective transforms on a given DOM element is only possible in two ways that I know of:
1) Renderer-specific extensions, like Webkit's -webkit-transform
2) Rendering the DOM element inside of a Canvas element and then doing transforms on that
The problem with #1 is that it's clearly not going to be cross-browser. The problem with #2 is that you'd more or less have to write your own complete markup renderer for canvas to really get everything in an arbitrary DOM element in there.
(OTOH, I wouldn't put it past some ambitious and clever JavaScript ninja to have attempted #2, so though I haven't seen it yet, I wouldn't be totally surprised if someone else can point towards something like it...)
I would stick with the tab solution if you want to get your project done within a reasonable time. This does not exist for ExtJS - the one in Flex does a 3D effect. The only solution close is to just have content in 4 cells of a table that slides into view (according to the direction of the arrow you used), within a DIV, and have the overflow property set to hide, so you can mask out the other cells and show one cell at a time. Then use the animation (fx) functions to slide the content in and out of view, perhaps with some arrows you hover over or click.