I am trying to solve a translation problem. Image you use the standard angular strap select example in an app:
$scope.selectedIcon = "";
$scope.selectedIcons = ["Globe","Heart"];
$scope.icons = [{"value":"Gear","label":"<i class=\"fa fa-gear\"></i> Gear"},{"value":"Globe","label":"<i class=\"fa fa-globe\"></i> Globe"},{"value":"Heart","label":"<i class=\"fa fa-heart\"></i> Heart"},{"value":"Camera","label":"<i class=\"fa fa-camera\"></i> Camera"}];
How can it be possible, to translate the text (Gear, Globe, Heart ...) in the lable variable using the angular translate?
Ok guys, I think I have solved my problem. For any who is interested in the solution:
Controller:
$scope.selectedSecurityColours = [];
$scope.securityColours = [{"value":"black","label": {text: "BLACK", icon: '<i class="fa fa-circle fa-circle-black"/>'}},
{"value":"green","label": {text: "GREEN", icon: '<i class="fa fa-circle fa-circle-green"/>'}},
{"value":"red","label": {text: "RED", icon: '<i class="fa fa-circle fa-circle-red"/>'}},
{"value":"blue","label": {text: "BLUE", icon: '<i class="fa fa-circle fa-circle-blue"/>'}},
{"value":"silver","label": {text: "SILVER", icon: '<i class="fa fa-circle fa-circle-silver"/>'}},
{"value":"gold","label": {text: "GOLD", icon: '<i class="fa fa-circle fa-circle-gold"/>'}}]
View:
<button type="button" class="btn btn-default" ng-model="selectedSecurityColours" data-html="1" data-multiple="1" data-animation="am-flip-x" max-length="4" max-length-html="{{'SELETED' | translate}}" placeholder="{{'CHOOSEAMOUNGTHEFOLLOWING' | translate}}" bs-options="securityColour.value as securityColour.label.icon + ' ' + (securityColour.label.text | translate) for securityColour in securityColours" bs-select>
</button>
The trick is to properly use the bs-options attribute. I couldn't find any documents, describing my solution, but it seems to work properly.
Related
I want to toggle this fontawesome icons
<i class="fa-solid fa-heart"></i> //when active
<i class="fa-regular fa-heart"></i> //when not active
This is my code
<i class="fs-5"
role="button"
#click="!active"
:class="[active ? 'fa-solid fa-heart' : 'fa-regular fa-heart'] "
></i>
my script
data() {
return {
active: false,
}
},
You could set active to false/true like active=!active and refactor fa-heart class:
<i class="fs-5"
role="button"
#click="active = !active"
:class="['fa-heart',active ? 'fa-solid' : 'fa-regular'] "
></i>
Change your code like this:
<button :class="active ? 'fa-solid' : 'fa-regular'" class="fs-5 fa-heart" style="appearance: none;" #click="active = !active" />
Hi i am trying to extend a Qweb template web.sign_name_and_signature and remove the option Auto.
Here is what i did.
*.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
<t t-name="digital_sign_extend.sign_name_and_signature" t-extend="web.sign_name_and_signature">
<t t-jquery="div.card-header" t-operation="replace">
<div class="card-header">
<div class="row no-gutters">
<div class="col-auto">
<a role="button" href="#" t-attf-class="o_web_sign_draw_button mr-2 btn btn-light {{ widget.signMode === 'draw' ? 'active': '' }}">
Draw
</a>
</div>
<div class="col-auto">
<a role="button" href="#" t-attf-class="o_web_sign_load_button mr-2 btn btn-light {{ widget.signMode === 'load' ? 'active': '' }}">
Load
</a>
</div>
<div t-attf-class="o_web_sign_draw_clear col-auto ml-auto {{ widget.signMode !== 'draw' ? 'd-none' : '' }}">
<a role="button" href="#" class="btn btn-link">
Clear
</a>
</div>
<div t-attf-class="o_web_sign_auto_select_style col-auto ml-auto {{ widget.signMode !== 'auto' ? 'd-none' : '' }}">
<a role="button" href="#" class="btn btn-link">
Style
</a>
</div>
<div t-attf-class="o_web_sign_load_file col-auto {{ widget.signMode !== 'load' ? 'd-none' : '' }}">
<input type="file" role="button" name="files[]" class="btn btn-link py-0"/>
</div>
</div>
</div>
</t>
</t>
</templates>
*.js
odoo.define('digital_sign_extend.signature_form',function(require){
var SignatureForm = require('portal.signature_form').SignatureForm;
var NameAndSignature = require('web.name_and_signature').NameAndSignature;
var publicWidget = require('web.public.widget');
// Extend the name and signature template to remove option auto
console.log('am here');
var BillaNameAndSignature = NameAndSignature.extend({
template: 'digital_sign_extend.sign_name_and_signature',
xmlDependencies: [
'/web/static/src/legacy/xml/name_and_signature.xml',
'/digital_sign_extend/static/src/xml/digital_sign.xml'
],
/**
* #override
* prevent autofocus on the name field, since the signature widget
* will be included in a more complex form and focusing in the middle
* of the form is weird
*/
focusName: function() {
return;
},
});
var SignatureForm_extend = SignatureForm.extend({
template: 'digital_sign_extend.sign_name_and_signature',
xmlDependencies: [
'/web/static/src/legacy/xml/name_and_signature.xml',
'/digital_sign_extend/static/src/xml/digital_sign.xml'
],
init: function (parent, options) {
this._super.apply(this, arguments);
this.csrf_token = odoo.csrf_token;
this.callUrl = options.callUrl || '';
this.rpcParams = options.rpcParams || {};
this.nameAndSignature = new BillaNameAndSignature(this,
options.nameAndSignatureOptions || {});
},
});
});
manifes.py
# -*- coding: utf-8 -*-
{
'name': "digital_sign_extend",
'summary': """
Short (1 phrase/line) summary of the module's purpose, used as
subtitle on modules listing or apps.openerp.com""",
'description': """
Long description of module's purpose
""",
'author': "My Company",
'website': "http://www.yourcompany.com",
# Categories can be used to filter modules in modules listing
# Check https://github.com/odoo/odoo/blob/14.0/odoo/addons/base/data/ir_module_category_data.xml
# for the full list
'category': 'Uncategorized',
'version': '0.1',
# any module necessary for this one to work correctly
'depends': ['base','web'],
# always loaded
'data': [
# 'security/ir.model.access.csv',
'views/views.xml',
'views/templates.xml',
],
'assets':
{'web.assets_frontend':[
# 'digital_sign_extend/static/src/xml/digital_sign.xml',
'digital_sign_extend/static/src/js/name_and_sign.js',
],
},
# only loaded in demonstration mode
'demo': [
'demo/demo.xml',
],
}
But still, it's showing the Auto option. How can I resolve this?
Finally got the solution.
odoo.define('digital_sign_extend.signature_form', function(require) {
"use strict";
var NameAndSignature = require('web.name_and_signature').NameAndSignature;
var publicWidget = require('web.public.widget');
NameAndSignature.include({
template: 'digital_sign_extend.sign_name_and_signature',
xmlDependencies: (NameAndSignature.prototype.xmlDependencies || []).concat(
['/digital_sign_extend/static/src/xml/digital_sign.xml']
),
});
});
Please consider the codes below:
sidebar_components: [
{
title: "Admin Managment",
href: "javascript:void(0)",
idAcc: "accordion-1",
value: ["this is a test 1", "this is test 2", "this is test 3"],
to: ["/testi_1/1", "/testi_1/2", "/testi_1/3"],
classDiv: "active_div_1",
class: "item_link_1",
accordion: "myAccordion1",
icon: "fas fa-user-tie",
titleHoverClass: "sidebar_title"
},
{
title: "Admin Managment",
href: "javascript:void(0)",
idAcc: "accordion-2",
value: ["this is a test 1", "this is test 2", "this is test 3"],
to: ["/testi_2/1", "/testi_2/2", "/testi_2/3"],
classDiv: "active_div_2",
class: "item_link_2",
accordion: "myAccordion2",
icon: "fas fa-users",
titleHoverClass: "sidebar_title"
},
]
and :
<ul class="sidebar_components accordion" role="tablist">
<li v-for="(item, index) in sidebar_components" :key="index">
<a
:href="item.href"
v-b-toggle="item.idAcc"
:class="[item.class, 'item_link']"
>
<i :class="item.icon"></i>
<span
class="sidebar_title_active"
:class="item.titleHoverClass"
>{{ item.title }}</span
>
</a>
<b-collapse
:id="item.idAcc"
:accordion="item.accordion"
role="tabpanel"
:class="item.classDiv"
>
<nuxt-link
:to="val"
v-for="(val, index) in item.to"
:key="index"
>
{{ val }}
</nuxt-link>
</b-collapse>
</li>
</ul>
as you can see on this
<nuxt-link :to="val" v-for="(val, index) in item.to" :key="index">
{{ val }}
</nuxt-link>
I used of val that would be link address, I'm gonna have the value of sidebar_components that its name is value, I mean these: value: ["this is a test 1", "this is test 2", "this is test 3"],
how can I extract or get access to the value of it, these arrays are for sidebar sub-items everything working fine, but I don't know how can I implement or put these value of sidebar_components on nuxt-link, it can be a span on it I know but, how can I extract it?
If you do not understand what I mean, please let me know in the
comments so that I can explain more.
Just use the index in v-for to access the sibling field value :
<nuxt-link
:to="val"
v-for="(val, index) in item.to"
:key="index"
>
{{ item.value[index] }}
</nuxt-link>
I want to use the 'dropdown' css in my nav bar, so I create a component;
Here is the header component:
<template>
<no-ssr>
<div>
<ul id='dropdown' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<div class="container">
<i class="material-icons right">home</i>Home
<ul class="right hide-on-med-and-down">
<li><a class="dropdown-button" data-activates="dropdown" data-beloworigin="true" data-hover="true">Dopdown<i
class="material-icons right">arrow_drop_down</i></a></li>
<li>About</li>
<li>Contact</li>
<li><i class="material-icons right">search</i>Search</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</no-ssr>
</template>
I didn't run npm install stuff... like that, I just import the materialize css through CDN;
Here is my nuxt.config.js:
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' },
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css'}
],
script: [
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' },
{ src: 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js' }
]
},
When I run 'npm run dev' in localhost, The 'dropdown' didn't work;
When I move my mouse on the button, nothing happened, when I click the button, nothing happened either.
And I got the error by accident,
Could anybody help me solve this problem? I really appreciate it.
First you need a Button/Link which opens your first Dropdown. (Note the "data-target"-Attribute)
<!-- Dropdown Trigger -->
<a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li>one</li>
<li>two</li>
<li class="divider" tabindex="-1"></li>
<li>three</li>
<li><i class="material-icons">view_module</i>four</li>
<li><i class="material-icons">cloud</i>five</li>
</ul>
Then you need to initialize this button:
$('.dropdown-trigger').dropdown();
See https://materializecss.com/dropdown.html
Finally, it works. I add the Initialization in mount() function,
Here is the code
mounted() {
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: true, // Does not change width of dropdown to that of the activator
hover: true, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: true, // Displays dropdown below the button
alignment: 'left', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
}
);
}
I have the following setup in Durandal for navigation:
layout.js
...
that.activate = function () {
router.map([
{ route: '', title: abp.localization.localize('HomePage', 'MyProject'), moduleId: 'viewmodels/home', nav: true, menuName: 'Home' },
{ route: 'editpage/:id', title: abp.localization.localize('EditPage', 'MyProject'), moduleId: 'viewmodels/editpage', hash: '#/editpage/id' }
]).buildNavigationModel();
pages.js
...
that.editPage = function (page) {
that.router.navigate('editpage/' + page.id());
};
pages.cshtml
<ul class="list-group" data-bind="foreach: pages">
<div class="list-group-item">
<span class="page-name" data-bind="text: name"></span>
<div class="text-right">
<!--<button type="button" class="btn btn-info btn-sm" data-bind="click: $parent.editPage">-->
<button type="button" class="btn btn-info btn-sm" data-bind="attr: {href: '#/editpage/' + id()}">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> #L("EditPage")
</button>
</div>
</div>
</ul>
I'd like to navigate to the "EditPage/:id" page when I hit the Edit Page button. However only the click binding works:
<button type="button" class="btn btn-info btn-sm" data-bind="click: $parent.editPage">
The attr href binding does not:
<button type="button" class="btn btn-info btn-sm" data-bind="attr: {href: '#/editpage/' + id()}">
I tried several ways of configuration but none of them seemed to help. I guess its just an improper syntax in the route configuration or in the hash. Couldn't figure it out.
Any help would be appreciated!
Try this
<a class="btn btn-info btn-sm" data-bind="attr: { href: '#editpage/' + id() }"></a>
1) Use href attr with a tag instead of button
2) Removed unnecessary / after #
#/editpage/ changed to #editpage/
I haven't used the hash parameter before. However, according to the router documentation (http://durandaljs.com/documentation/Using-The-Router.html), the hash you're looking for here is literally #/editpage/id and the hash you're passing is '#/editpage/' + id(). Try writing the following instead:
Router:
{ route: 'editpage/:id', title: abp.localization.localize('EditPage', 'MyProject'), moduleId: 'viewmodels/editpage', hash: '#editpage/:id' }
Page
<button type="button" class="btn btn-info btn-sm" data-bind="attr: {href: '#editpage/' + id()}">
Additionally, if you simply hyperlink to the route (as you have done) and remove the hash parameter from the route, you should be fine.