Is it possible to customize core Spartacus components like cx-icon? I need to extend cx-icon to add functionality to support Material Icons, so whenever I use cx-icon in the app, Material Icons are rendered and not FontAwesome icons
PS - Material icons cannot be configured in cx-icon as it doesn't use CSS classes like FontAwesome, rather it uses text ligatures
I'm not sure, but you can try to figure it out with SVG sprite. You just need to download Material Icons in SVG sprite format (more details here https://google.github.io/material-design-icons/) and to configure IconModule with custom matIconConfig like this (more details here https://sap.github.io/spartacus-docs/icon-library/):
export const matIconConfig: IconConfig = {
icon: {
symbols: {
INFO: 'info', // Here you should add actual xlink to SVS symbol
},
resources: [
{
type: IconResourceType.SVG,
url: './assets/mat-icons.svg',
types: [ICON_TYPE.INFO],
},
],
},
};
And then merge it to global configuration by:
ConfigModule.withConfig(matIconConfig);
Of course, during debugging, maybe you will need to apply some additional styles, but I can't provide which exactly.
Related
I am developing an internal company app that does not reach out to the internet, therefore I can not use CDNs or Google Fonts.
In my developer console for Chrome (and not Firefox for some reason) I get errors pointing to the fact it get the following urls
https://dcn.jsdeliver.net/npm/#mdi/font#latest/materialdesignicons.min.css
and
https://fonts.googleapis.com/css?family=Roberto:100,300,400,500,700,900&display=swap
How (in nuxt/vuetify) can I turn these off?
First of all you need to set nuxtjs/vuetify to offline mode with this configuration:
{
buildModules: [
'#nuxtjs/vuetify'
],
vuetify: {
defaultAssets: false // <= this will disable autoloading Google font and MDI icons
}
}
Then you can import these icons and fonts as here.
I'm using Vue with Vuetify 1.5.14 and I'm trying to customize my theme. I just follow the docs to do this. When I apply color="primary" to my v-card component, it correctly uses the custom primary base color. However when I apply the dark property to it, it still show the base color instead of the darken1 color. This is my vuetify.js file:
Vue.use(Vuetify, {
iconfont: 'md',
theme: {
primary: {
base: '#673ab7',
darken1: '#320b86',
lighten1: '#9a67ea'
},
secondary: {
base: '#00bcd4',
darken1: '#008ba3',
lighten1: '#62efff'
},
accent: '#ffeb3b',
error: '#f44336',
warning: '#ffc107',
info: '#009688',
success: '#8bc34a'
}
});
Anyone has an idea how to properly customize the light theme colors?
From v1.5.14 docs:
Custom theme variants
While Vuetify automatically generates lighten and darken variants for theme colors, you may want to control this yourself. Simply pass a theme object that contains the variants that you wish to modify. Anything not provided will still be generated for you.
// src/theme.js
import colors from 'vuetify/es5/util/colors'
export default {
primary: {
base: colors.purple.base, // modifies `primary`
darken1: colors.purple.darken2 // modifies `primary darken-1`
},
When you set colors predefined by vuetify then light and dark variants are automatically set for you.
Modifying these options in vuetify v1 just change your custom lightening or darkening of your color i.e. primary lighten-1.
So in dark theme (i.e. <v-app dark) you would use them like so:
:color="$vuetify.dark ? 'primary darken-1' : 'primary'"
$vuetify.dark is a property which determines if you are using dark theme.
If you need this per component (i.e. you want to pass dark property to a component), then you need to manually extend a component to support that feature.
Automatic toggle between custom dark and light theme colors will be supported in v2. (already works in beta)
I'm using SeedStack to create a web application. In order to do that, I use W20 to develop my frontend. I need specific JavaScript libraries into that project. How can I inject an external javascript library into it ? I want to use Chart.js http://www.chartjs.org/ to visualize data into charts. To do that, I suppose that I have to inject ChartJS as a dependency module in Angular.
Thank you for your help.
Before getting to the specific answer, please note that SeedStack already has an add-on for charts. As for integrating a library with W20, you have two main things to do:
Configure RequireJS to load the JS file and be able to inject it as a dependency.
Integrate the library with the AngularJS framework, which is often done by writing some directive.
Fortunately for you, Angular directives are already available for Chart.js, thanks to the angular-chart.js library. You just need to configure RequireJS to load it. Add a requireConfig section to the manifest of one of your fragments:
{
"id": "my-fragment",
...
"requireConfig": {
"paths": {
"{angular-chart.js}": "${components-path:bower_components}/angular-chart.js/dist",
"{chart.js}": "${components-path:bower_components}/chart.js/dist"
},
"map": {
"{angular-chart.js}/angular-chart": {
"angular": "{angular}/angular",
"chart": "{chart.js}/Chart"
}
}
}
}
The paths section declares locations of the two Chart.js libraries. Note that we use a variable named components-path with a default value of bower_components here. This is useful when using the W20 bridge add-on.
The map section declares a mapping between the expected and the real paths for dependencies of angular-chart.js.
You can then use the angular-chart.js library according to its documentation:
define([
'{angular}/angular',
'{angular-chart.js}/angular-chart',
], function(angular) {
var module = angular.module('myModule', ['ngResource', 'chart.js']);
module.controller('ContentController', [ '$scope', function($scope) {
// your JS code here
// (with your markup in a corresponding angular template)
}]);
});
All,
In messing with the new cards found in 2.0p5, I noticed there is no longer a template available to alter the header or the content of the actual card.
Can someone confirm this is not available, just want to make sure I am not missing it anywhere...
There really is no way to alter the display of the card?
Just for clarity of the post, in 2.0p2 you could do a buildContent function or buildHeader function inside Ext.define of the Card.
The card no longer has a template that you can modify directly, however you can create a custom CardContent plugin to display custom html:
Ext.define('Rally.ui.cardboard.plugin.MyCardContent', {
alias: 'plugin.rallymycardcontent',
extend: 'Rally.ui.cardboard.plugin.CardContent',
getHtml: function() {
var html = this.callParent(arguments);
return html + '<span>mycontent</span>';
}
});
Then configure your CardBoard to use the custom plugin:
Ext.create('Rally.ui.cardboard.CardBoard', {
types: ['User Story', 'Defect'],
attribute: "ScheduleState",
fieldNames: ['Tasks'], // display task information inline on card
cardConfig: {
// overriding plugins to add the custom plugin
// be sure to include the default plugins.
plugins: [
{ptype: 'rallycardheader'},
{ptype: 'rallymycardcontent'},
{ptype: 'rallycardpopover'}
]
}
});
With Sencha Touch, i want to use some of the icons in the directory resources/themes/images/default/pictos/ for iconCls in my footer navigation. But from what I've read, it says I need to set up a ruby on rails server just to compile the right stylesheets and javascript files to use them?
I don't have the least bit knowledge of how to set up my own servers or set up my own RoR server. Is there anyway else to do this? I just want 3 icons from that directory...setting up a whole server seems a bit overkill.
Yes, you need to install Ruby and RubyGems (only if you're on Windows because they are pre bundled on Mac)
Then you just need to open the right scss file in touch/resources/sass (depending on what them you're using) and to add the following line to it :
#include pictos-iconmask(PICTOS_NAME);
Finally you need to open a terminal in that folder and to execute the following command :
compass compile // Run it every time you change something in the .scss
or
compass watch // Will automatically recompile every time you save
More information about Sencha-Touch Theming here
I used the following CSS
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(/resources/themes/images/default/pictos/TV.png)}
Actually... to be perfectly honest, I didn't map my CSS to the image, but rather converted the image to Base64 and embedded it in the CSS. The reason for this was that I only needed 4 of the icons and I didn't want to move them all around every time.
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V2*/
.x-tab .x-button-icon.tv,.x-button .x-button-icon.x-icon-mask.tv{-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAFmUlEQVRoBe2aX6hURRzH75p/qCjLMLKk7CoZEgmikHjLSxbqWz30B6SXzF6ieujPg0FFfzB66KUSfO4hJAqKKDSp25USi6hESCoKUyr6Z4lalnn7fJadbTxnz+7Zc3fv3T34gw8zZ87Mb+Y7c87MnNmtjI2NDbRrlUplJmVugfNhKxzAT/uOKJjXqLNC3rlwOxyCV6nSsD2zne1CDY/A76DIj2AIzmjXT978+q7VMUponYfhybzl43xTKFjE5lNoeq3gMsLNsJRBKOqv5iod1HwurtVxbS3HVMKL07lzpMTq88ZxuwI+hRNgj8t+WAfT8vpplU9f4CP8DYR6rNO6V7Qq3+h+249zcEKFy2EX/AuhMb8S3wAzQr6ioT7ADtRn8H+S+GewvLDfogUthw3CCMQjfZTrTTCrqG/KOhnq4wgEsdYxAvOL+q22eTyFqw4GBhbQiNfgHwiN+5P4Fpjdrn/KzILn4S8I/vT9Bixo118yf+FHOnZEQ84CJ67jEBpp+DpcEudtFifvXLDzYh/61PfMZmXz3uuIYCvDHJlH4RjEDd7JdcvHkDy+HtsTZX1SnoHCr0eyIzomuCbaWfU++A1i0a7VVyYrD9fcWwi7E2Vc5++HcU+AoZ5qG+OLTsVp5M3gUuKsGoTvMz1ZB2lrYW+UzzKWvQs6tsSFejs6wsGpIbYGvoZY9Hdc3xDyEV8JpoVOMa/r+eqQp9Nh1wTXRF9N4z+MBCnsF3gYHoIfIYg13AVLOi0y9tdVwTXRVyBC0fFIOxlJEOu9z2Fh3LhuxCu1Rg2wZz2TCt2j+lXSSVPMHHgBboSkf0W/A/fC9zAFOmn6P4FOO3hgKkKnEw6DjXEd7HSFuKzuxAwV75dPbKZpj4Ed3mnT/wF0voXoEZ3fCgchPF5lDb9C4xpHcwiKfWpRsI9skLauVXA33tte7Ae1TsvzzpzogdbnaWeuZjZz9AUetsFP4HudnF1JmhCz7nNhNSwZb41Zgj/GsZuDUWa2MIuOt67C5Zlh7ewt8BzcBD6ehSyr4Jt429sLYlVFOxzlg+Bafhhic0D2w+OwEq6BjeD+PGVZI/wlOY+kck9ugqJtk0dKwRTrq3c37KZfqvd4ID7h+l14Cq6H+sDWIyTG5q4kdhzfm8x4sr3uyxW1K4i1ccSdaD3oexYcvLolHdRv9EHEY5898AECHf1TjKS/SXD0345v9LNgR/EH8Owry7znQULd+lmw889cOLuuJh3xrM08detnwR4nLYbhupoowsTl15/r9qoo+f/ZK07so/hM2vog4objNnM9g+ulsB4G43tZy1Kcp5fjfmougq2I3E64E1xhroNVcDmcYv0uWDHuwi6EdeDhocupW9GGVgbBQZjCm01g1XxlEuzy4yN9HIbgIkhZP8/SsZg/uNgMfljcAU/DIUhZGQS7y/oZXmZ3dRLcbLwP+yBlZRDsu3seDDNTeyjpzD0P5kPKyvIOX4CyjTAPPLC4E5y5U1YWwY7yHHggpTCRUIZHOiGp+eVpwc37p//vnh7h/h/D5grKMksfQ+YO8GdZ12G3lf4XNLW9LINgd1r+sL4J/J+IS9RV4PdwKQWjq/oz7FG2lYofY7fl8a2krEyTliPb0sokuKVYM5RJcOpsulEPZAnOVbiRw0lKU0dyAm74iCczhfZ66pfVGSHPZISeVyUHQ2GzYT2T1SuEYZa+lHjKsgRfRk4PsT0u6RVTiMeyjdp8Dun31CDItqxRvI0ii+ixrPvZHrt3x5PIDaC4wtaot3Tmov0ivIRo/zDmSDd8J0jvtlnvIKyHZeBOqrBlCdahP2O4Y2m4gJthAk3RzdqauymtnNib4+rR3C2ZoIy+oz6uvfjjd6e7QI3HFTwK/sex7HYAgTt8XL8FBftl4Ulfq8ecLH1lfjq+B0/Atv8AOeLFDQ1OlmYAAAAASUVORK5CYII=);}
Now, when you're creating your TabPanel you want do do something along these lines.
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},
items: [{
title: 'Video',
iconCls: 'tv' // the icon class string is appended to the CSS
// '.x-icon-mask.[iconCls string]'
// in this case
// '.x-icon-mask.tv'
// as seen in the CSS above
}]
});
EDIT
Looking over my old Sencha Touch V1 code base (as per your comment below) you will want to use the following CSS for Sencha Touch V1
/* TV icon for Videos */
/* USED IN SENCHA TOUCH V1*/
.x-tab img.tv,.x-button img.x-icon-mask.tv{-webkit-mask-image:url('/resources/themes/images/default/pictos/TV.png');}