Searched for it, as a result there is a file systray.xml in that three templates are there. that is all i found but when i try to add anything just like that file, it doesn't work.
I found a solution for this, what needs to be done is first create a template in an XML file, then render it using javascript widget.
XML file
<templates>
<t t-name="Icon">
<li>
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false" title="Icon" href="#">
<i class="fa fa-envelope-open-o"/>
</a>
</li>
</t>
</templates>
JS file
odoo.define('your_module_name.icons', function (require) {
var SystrayMenu = require('web.SystrayMenu');
var Widget = require('web.Widget');
// Appends Icon template in system tray (navbar)
var IconMenu = Widget.extend({
template:'Icon',
});
SystrayMenu.Items.push(IconMenu);
});
This will do the work.
Related
How can i make shopify gird view and list view? I already done html and collection-list.liquid for list view.
Here is the button code-->
<div class="collection-view">
<button type="button" title="Grid view" class="change-view{% unless template contains 'list' %} change-view--active{% endunless %}" data-view="grid">
<span class="icon-fallback-text">
<span class="icon icon-grid-view" aria-hidden="true"></span>
<span class="fallback-text">Grid View</span>
</span>
List View
I need jquery or javascript code for control the gird view and list view on shopify.
example button--> http://prntscr.com/8lfkvh
You could add a class using JavaScript to the .collection-view using a click event of one of the buttons to toggle between the two different views.
I have an Ember helper which is literally defined as this:
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right" data-title="{{text}}"></span>
It's used to render a Bootstrap tooltip. It renders the following HTML:
<div id="ember572" class="ember-view">
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="right"
data-title="<script id='metamorph-35-start' type='text/x-placeholder'></script>
When a project is archived, no new items can be created in it.
<script id='metamorph-35-end' type='text/x-placeholder'></script>"
data-original-title="" title="" aria-describedby="tooltip416856">
</span>
</div>
How can I stop the helper rendering the containing div?
Create a Component with tagName: 'span' instead of <span> in it's template:
Component:
App.TooltipElementComponent = Em.Component.extend({
tagName: 'span',
attributeBindings: ['data-toggle', 'data-placement', 'data-title']
});
Now, you can use following:
{{tooltip-element data-toggle='tooltip' data-placement='right' data-title='When a project is archived, no new items can be created in it.'}}
Which produces following HTML:
<span id="ember257" class="ember-view" data-toggle="tooltip" data-placement="right" data-title="When a project is archived, no new items can be created in it."></span>
Notice you can still use bindings(data-title=text):
{{tooltip-element data-toggle='tooltip' data-placement='right' data-title=text}}
Working demo.
I'm trying to DRY up my templates by creating views for common layout elements. I have the following views defined
App.SplitListView = Em.View.extend({
tagName: 'div',
classNames: [ 'panel', 'panel-default' ]
});
App.SplitListHeaderView = Em.View.extend({
classNames: [ 'panel-heading' ],
templateName: 'split-list-header-view-layout'
});
The template for the SplitListView is a simple {{yield}}
The template for the SplitListHeaderView is
<span class="panel-title">{{view.headerText}}</span>
{{#if view.showCreateButton}}
<span class="pull-right">
<button type="button" class="btn btn-primary btn-sm">
<i class="fa fa-plus fa-lg" style="padding-right: 10px;"></i>{{view.createButtonText}}
</button>
</span>
{{/if}}
Then the template for the submodule:
{{#view App.SplitListView}}
{{view App.SplitListHeaderView headerTextBinding="Sandwiches" showCreateButtonBinding=true createButtonTextBinding="Make me a sandwich!"}}
{{/view}}
The desired end result is that I'd like to use the SplitListView and SplitListHeaderView everywhere in my app that I use that layout and just set the relevant bits of text via the controller. But so far it's just not working. I feel like this should be easy to do and I'm just missing something. I found this question which looks to be along the same lines as my question but the solution did not work for me.
Does anyone have any experience with something like this or am I off my rocker in trying to use views in this manner?
I believe you have three options here:
1) Use a component instead of a view. Components are reusable, self-contained 'modules' that allow you to bind properties from the component's context in exactly the same manner as you are trying with your view.
2) If the only thing you're reusing between the current non-DRY templates is the html/handlebars you should use a {{partial}} instead of a view because that doesn't create any scope within the view hierarchy and will allow you to bind the handlebars in the partial directly to route's view/controller properties without specifying additional property bindings or scope.
3) Use a Em.Handlebars.helper to accept three arguments (headerText, buttonText, and showCreateButton) and return a new Handlebars.SafeString('some html string'); or something along those lines.
A solution
If I were you, I would utilize methods 2 and 3 together as follows:
First, use a helper (I'm using a helper with a globally accessible method) instead of App.SplitListView to wrap some html around the buffer (i.e. content) inside of the opening and closing handlebars:
// Handy method you can use across many different areas of the app
// to wrap content in simple html
Utils.wrapBuffer = function(open, close, options, context) {
options.data.buffer.push('\n' + open);
if (options.fn(context)) {
options.data.buffer.push('\n' + options.fn(context));
}
options.data.buffer.push('\n' + close);
}
Then the actual helper
App.Handlebars.helper('split-list', function(options) {
var open = '<div class="panel panel-default">;
var close = '</div>';
Utils.wrapBuffer(open, close, options, this);
});
Now, your template will look like:
{{#split-list}}
// This is where our content will go
{{/split-list}}
This has the advantage of wrapping what is inbetween the handlebars opening and closing tags with html without adding or changing scope. Thus, property bindings will work seamlessly.
Now, replace App.SplitListheaderView with a component set up in a similar manner:
App.SplitListHeaderComponent = Em.Component.extend({
classNames: ['panel-heading'],
headerText: null,
createButtonText: null,
showCreateButton: false,
});
You layout (components use layouts, not templates) will be located at templates/components/split-list-header.hbs. it will look as follows:
<span class="panel-title">{{headerText}}</span>
{{#if showCreateButton}}
<span class="pull-right">
<button type="button" class="btn btn-primary btn-sm">
<i class="fa fa-plus fa-lg" style="padding-right: 10px;"></i>{{createButtonText}}
</button>
</span>
{{/if}}
Note, that properties are something not view.something and each property is declared allowing it to be overwritten in the handlebars helper. Now your submodule's template will look like:
{{#split-list}}
{{split-list-header
headerText='Sandwiches'
showCreateButton=true
createButtonText='Make me a sandwich!'
}}
{{/split-list}}
If you wanted, you could bing these properties to a property on your controller or view instead of writing them in the template every time.
Another Improvement
You could go one step further and scrap the wrapping helper all together because it's not doing anything except adding HTML. In this case, the component would look like {{split-list headerText=blah...}} and would have the following template:
<div class="panel-heading">
<span class="panel-title">{{view.headerText}}</span>
{{#if view.showCreateButton}}
<span class="pull-right">
<button type="button" class="btn btn-primary btn-sm">
<i class="fa fa-plus fa-lg" style="padding-right: 10px;"></i>{{view.createButtonText}}
</button>
</span>
{{/if}}
</div>
I have a header with some login/signup forms that popup when you click the respective buttons.
While it was working fine using just jQuery, I've now started to integrate Ember into the application and I'm running into some trouble with some simple toggle functionality.
Here's the basic HTML markup:
<header>
<h1>Page Title<h1>
<nav>
<a id="toggles-login" class="button {{active_class_binding}}">Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}">Signup</a>
</nav>
<div id="popup-forms">
<div id="login-form"></div>
<div id="signup-form"></div>
</div>
<header>
I'm completely new to Ember and I really have no idea how to set this up. The only thing I want is to be able to set the popup forms up as Ember.View objects and toggle them with some action helpers.
I really am lost on this one.
A simple solution would be to trigger simple actions to show the respective forms:
<a id="toggles-login" class="button {{active_class_binding}}" {{action showLoginForm target="view"}}>Login</a>
<a id="toggles-signup" class="button {{active_class_binding}}" {{action showSignupForm target="view"}}>Signup</a>
The corresponding view would have to implement both actions:
App.YourView = Ember.View.extend({
showLoginForm : function(){
this.$("#login-form").toggle();
},
showSignupForm : function(){
this.$("#signup-form").toggle();
}
});
Hi there i have a small question that belonging to my small ember application.
JSFiddle upload is here. I used bootstrap accordion to visualize my tickets. When i click on the "click" it adds another accordion into my view. But sadly it cannot be opened or used. Every accordion i dynamically created cannot be opened or closed. There is no error or exception thrown and from my point of view everything should work fine. My click-function looks like this:
click: function() {
this.counter++,
name = this.name+this.counter.toString(),
tre = App.Ticket.create({
Text: "try",
id: name
});
this.pushObject(tre);
}});
The belonging html is here:
<div class="accordion-group">
{{#each content}}
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" {{bindAttr href="id"}}>
Ticket ID/Störfall
</a>
</div>
<div {{bindAttr id="id"}} class="accordion-body collapse in ">
<div class="accordion-inner">
{{Text}}
</div>
</div>
{{/each}}
</div>
I hope you can help me.
You can add an action helper to the accordion link title
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordion2"
{{bindAttr href="item.id"}}
{{action "click" item target="view"}}>
Ticket ID/Störfall
</a>
Then implement a click handler event in your view
App.TicketView = Em.View.extend({
click:function(context) {
var el = this.$('a[href='+context.get('id')+']');
el.toggleClass('collapsed');
this.$('#'+el.attr('href')).toggleClass('in');
}
});
Here's a working fiddle