I'm creating a master-detail table.
Before an item has been chosen, the details should not be visible, only becoming visible on clicking of an item.
The reason I'm using a class is because the table is normally 100% width, and it changes size when the detail pops up. This is not implemented yet. Right now, I just want the 'with-details' class to be inserted into the div when I click in the < li >
Here is a rough twiddle:
https://ember-twiddle.com/f35bb4b593394d955460a83a10f092a4
In my template, the < li > has an action:
<li {{action 'showDetails'}}>
which fires the showDetails action in my controller (I know it's firing because of the :) in console):
withDetails: false,
actions: {
showDetails: function() {
console.log(":)");
this.set('withDetails', true);
}
}
which should add the with-detail class to my details div:
<div {{bind-attr class=":game-details withDetails"}} >
which should match my CSS:
.game-details {
display: none;
border: 1px solid red;
}
.game-details.with-details {
display: block;
border: 1px solid green;
}
It should be that easy. What am I missing?
[ EDIT ] I just learned this trick:
Wrong:
<div class="game-details" {{bind-attr class="withDetails"}}>
Right:
<div {{bind-attr class=":game-details withDetails"}}>
which shows the div, but does not attach a with-details class I can target.
bind-attr is deprecated since 1.13 and disabled since 2.0. Instead, you should use embedded {{if}} in your class attribute, like so:
<div class="game-details {{if withDetails "with-details"}}">
{{outlet}}
</div>
Related
I'm trying to test a simple header component that has a button and when being focused - opens a dropdown using just css visibility property.
This is the html:
<nav class="navigation">
<button type="button">
<span>click here</span>
</button>
<ul>
<li> Text </li>
<li> Text </li>
<li> Text </li>
</ul>
</nav>
This is the scss style:
button {
span {
margin-right: 10px;
}
&:focus {
+ ul {
visibility: visible;
}
}
}
ul {
position: absolute;
list-style: none;
z-index: 1000;
visibility: hidden;
transition: visibility 0.1s linear;
background-color: $color-primary;
}
And this is the test:
it('should open dropdown on focus', () => {
let button = fixture.debugElement.query(By.css('button'));
button.triggerEventHandler('focus', null);
fixture.detectChanges();
let dropdownElement = fixture.debugElement.query(By.css('ul')).nativeElement;
console.log(dropdownElement);
console.log(dropdownElement.style);
expect(dropdownElement.style['visibility']).toBe('visible');
});
When I run the test I can see that console.log(dropdownElement) exists and that console.log(button.nativeElement) returns the CSSStyleDeclaration object - but ALL the properties have an empty string as a value:
CSSStyleDeclaration {
alignContent: ""
alignSelf: ""
...
...
...
color: ""
visibility: ""
...
...
}
So basically what I need is to trigger the focus event on the button and then see if the value of the dropdown's css/style property "visibility" is "visible".
I can't figure what's wrong, cause i can see that everything is rendering fine in Karma-Debug but all the style properties are empty... any idea what's the problem?
I've had similar problem in runtime (not tests).
Style property is static and based on initial style attribute on html element so this is not updated dynamically.
Solution is to use Window.getComputedStyle(). This function calculates (current!) styles from stylesheets.
If I have a list of "simple" cards that is rendered using ng-repeat,
what would be the recommended way to do a transition to a detailed view of one of those cards?
Does such a transition imply that the same HTML / DOM element needs to stay on screen and its content needs to change?
Does such a transition imply that the collection upon which ng-repeat is based needs to change so that it only includes that single item that we are transitioning to or does the rendering of the rest of the items should use some version of ng-if="item.id=focused_item_id"?
It doesn't need to be the same DOM element, and arguably shouldn't be. Animating width or height will cause repaints/reflows and will greatly hinder performance.
You could use ng-animate (https://docs.angularjs.org/api/ngAnimate) with a single detail element that gets populated with the relevant details from whatever object was clicked.
Something like this:
HTML
<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
<div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
<div>Details for {{currentItem}}</div>
</div>
CSS
.details {
position: fixed;
width: 100%;
transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
opacity: 0;
transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
opacity: 1;
transform: scale(1);
}
So getDetails() would do something like set $scope.showDetails = true; and set $scope.currentItem = el; Then you could have a close button that resets those two scope variables and destroys the detail element.
Hope that helps!
I have done what you are describing using CSS transitions on the DOM element in question. I have a list of elements, and when you click on one, the backing object has an 'expand' property set to true, which makes extra content visible and adjusts the size.
HTML
<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
<div ng-click="el.expand = !el.expand">Summary</div>
<div ng-if="el.expand">Details</div>
</div>
CSS
div.element {
transition: 0.5s linear all;
height: 200px;
}
div.element.expand {
height: 500px;
}
Try clicking on 'Summary 1' or 'Summary 2' in the plunkr
https://plnkr.co/cDkuNjTbE83L5bDJccsJ
I am new to Ember. I want when i hover the mouse over a .png file to be transparent and to exist there on the right corner an 'X' button and when you press it, it will be removed from the store. Any ideas or any example? I have these files:
showactivecamp.hbs
<style type="text/css">
.image {
width: 190px;
height: 190px;
opacity: 1;
}
.image:hover {
opacity: 0.3;
}
i.fa-remove {
#extend . image : hover;
color: #fff;
background-color: #808080;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 8px;
right: 8px;
padding: 2px;
z-index: 1;
cursor: pointer;
}
</style>
<div class="thmb-prev">
<button type="button" class="fa fa-remove" {{action "removeCampaign" on="click"}}>
</button>
<img src="/assets/images/photos/media2.png" class="image" alt="">
</div>
controllers\showactivecamp.js
import Ember from 'ember';
export default Ember.ObjectController.extend({
needs: ['campaign'],
actions: {
removeCampaign: function (campaign) {
var camp = this.get('model');
camp.deleteRecord();
camp.save();
}
},
getactivecamp: function () {
return this.store.findAll('campaign');
}.property()
});
views\showactivecamp.js
import Ember from 'ember';
export default Ember.View.extend({
click: function (evt) {
this.get('controller').send('click', this.get('campaign'));
}
});
I believe something like this would be best handled with a CSS solution rather than creating the unnecessary views in Javascript
http://emberjs.jsbin.com/jecew/1
You posted your code but not mentioned about the issue. I am not sure what is the issue you are getting.
Have a look into this jsbin http://jsbin.com/xumomu/1. I have used FixtureAdapter.
UPDATE:
http://jsbin.com/xumomu/2/
I have wrapped image and close icon in a view called 'image'. X icon will be shown on mouse enter and will be hidden on mouse leave using jQuery.
As Ember guide says, Use View when you need sophisticated handling of user events.
I suggest you to go through documentation to get clear idea about View and Event handling in ember.
I'd like to create a treeview with columns as part of the node template. Essentially, I have supplemental data that I want displayed along with the treeview so that the data lines up in columns after the initial node text.
I'm using the Kendo treeview because I need to be able to reorder the items easily using the drag and drop the treeview provides. I've tried using CSS positioning in a Kendo treeview template, but regardless of what I try, the columns to the right of the node are always displayed relative to the node itself.
Any ideas how I can create a treeview that has columnar data as part of the node template that aligns correctly? Using tables messes with the treeview and absolute positioning doesn't seem to work, either. I've tried doing this using table layouts in css:
css ---
.layout-container {
display: table;
}
.layout-row {
display: table-row;
}
.layout-cell {
display: table-cell;
padding-left: 10px;
}
html ----
<div id="treeview" class="layout-container"></div>
<script id="treeview-template" type="text/kendo-ui-template">
<div class="layout-row">
<div class="layout-cell">#: item.text #</div>
<div class="layout-cell">#: item.dept #</div>
<div class="layout-cell">#: item.owner #</div>
</div>
</script>
Here's a jsFiddle of what I have so far: http://jsfiddle.net/trentballew/oc9qsnyc/.
With the help of the Telerik folks, I found the answer by using a conditional template like this to fix the indenting of the second column in the node:
Template:
<div class="item-styling item-text">#: item.text #</div>
# if (item.rowLevel === 2) { #
<div class="item-styling move"> #: item.dept #</div>
# } else { #
<div class="item-styling"> #: item.dept #</div>
# } #
CSS
.item-styling{
display: inline-block;
text-align: left;
width: 150px;
}
.move{
margin-left: 17px;
}
The updated fiddle with the solution is here: http://jsfiddle.net/trentballew/oc9qsnyc/6/.
I have tried the following code to create an active button in F5, but its NOT giving active class effect, please let me know why?
<ul class="button-group radius small">
<li class="active">Button 1</li>
<li>Button 2</li>
<li>Button 3</li>
<li>Button 4</li>
</ul>
Zurb foundation does not have any active classes for button groups. You can see here http://foundation.zurb.com/docs/components/button_groups.html
If you want add an active class create one class add to your active buttons,
.activebutton{
background-color: #970b0e;
}
Elaborating on #chinmayahd's answer, for the convenience of anyone looking:
button.active, .button.active { background-color: /*primary active color*/ }
button.secondary.active, .button.secondary.active { background-color: /*secondary active color*/ }
button.success.active, .button.success.active { background-color: /*success active color*/ }
button.alert.active, .button.alert.active { background-color: /*alert active color*/ }
button.warning.active, .button.warning.active { background-color: /*warning active color*/ }
button.info.active, .button.info.active { background-color: /*info active color*/ }
Add your respective active colors, and you're good to go! (I recommend grabbing the hover/focus colors from your foundation.css file.)