When we navigate to our new SAP Spartacus web site, due to the PWA nature of the app, we can choose to install the application on the device we're using. When installing the app happens, the default icon provided in the Spartacus code is used, and I can see in the Spartacus code where it looks like this file came from:
..\js-storefront\mymobilestore\src\assets\icons
The name of the file from the Spartacus code that's used is 'icon-128x128.png', and I can see this file being referenced in the following file:
..\js-storefront\mymobilestore\src\manifest.webmanifest
Here's is where I found the reference to this icon file:
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png",
"purpose": "maskable any"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"purpose": "maskable any"
},
We want to replace the default icon used when you install Spartacus on your device with a custom one that reflects our company. I figured that it would be as easy as simply putting our custom icon in the ..\js-storefront\mymobilestore\src\assets\icons folder and then update the area of the manifest.webmanifest file that references this file. Unfortunately, this is not working for me as the original Spartacus icon is still being used.
Can anyone share with me what I'm doing wrong? How do I replace the default icon used when installing our Spartacus app on a device?
I have solved the problem myself. It turns out that the icon being installed on my desktop was not the icon in the source code that I thought it was.
When initially working on replacing the icon file, I had found the actual file being used as the desktop icon, and I could see the size of that file was 128x128. I naturally assumed that all I needed to do was replace the icon-128x128.png file in source code and that would do the trick, but it did not.
I ended up replacing every one of the out of the box icons with a different icon of the appropriate size, and I updated the manifest.webmanifest file with the names of each of the new files. After then deploying my code and installing Spartacus on my desktop, I could see the 72x72 size icon file was being used.
I found the following site very useful when it came to describing installation icons for PWA applications:
https://javascript.plainenglish.io/app-icons-in-a-pwa-8fb775207ad7
I hope this helps someone else!
Related
I'm using the vscode-icons I've just installed the PostCSS Language Support plugin and CSS files now the PostCSS icon instead CSS icons. I would like to go back to the old CSS icons how can I go about doing this?
I've found the answer, in settings.json, add the following:
{
"vsicons.associations.files": [
{ "icon": "css", "extensions": ["css"], "format": "svg" }
],
}
I am maintaining a vscode scm extention. Everything works as expected. But there is one thing left. I want to have such quick action icons as shown in the screenshot below from the build in git scm. In the API documentation I didn't find anything about that.
Does anyone know how to get this to work? Or where I can find a sample code?
Thanks!
With the provided link I was able to get icons in the file list.
In the package.json I duplicated an entry in the node contributes > menues > scm > resourceState > context
{
"command": "extension.myCommand1",
"when": "scmProvider == myProvider",
"group": "inline"
}
The important information is the group property which has to be inline.
Beside that, to make this command visible you need to configure an icon.
In contributes > commands you can configure the command
{
"command": "extension.myCommand1",
"title": "Do something",
"category": "myCat",
"icon": {
"dark": "myIcon.png",
"light": "myIcon.png"
}
}
I've just installed vs code but when I write the code lines they are white, not colored...
How can I change the color?
That's how it looks:
Monican your issue isn't a background or theme issue.
You must install vuejs -> Syntax Highlight for Vue.js
I'm not a Vuejs Developer and I can't give you recommendations/
You should find which Vuejs extenstion / extensions will be your best friend(s).
Just open Extension panel and type vue.
Please contact me if you need an extra help.
Press ctrl+shift+x and search for extension(for example if you have dart then search for Dart extension), if already installed then first uninstall it >> Restart VS Code >> again now install dart extension(or any programming exe. which you using currently)>> now see issue has solved.
You need to install an extension that adds syntax highlighting (and other features) for .vue files.
You can search the extension marketplace, or click the Language indicator in the bottom right (which currently says Plain Text).
Custom Syntax Coloring for Visual Studio Code:
On VS code, go to "Preferences" --> "Settings", on the "Search Bar" type and search "Launch", then click on "Edit in settings.json" under the Launch phrase.
Then add these codes:
{
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"workbench.activityBar.visible": false,
"editor.fontSize": 18,
"workbench.colorTheme": "Absent (rainglow)"
"editor.tokenColorCustomizations":
{
"strings": "#d86464",
"keywords": "#ff00ea",
"comments": "#ddf129",
"types": "#00ff6a",
"variables": "#00c3ff",
"functions": "#00fff2",
"numbers": "#ae19f3",
"textMateRules":
[
{
"scope":
[
"" // This is for regular font
],
"settings":
{
"foreground": "#fa9c0f", // Color assigned for regular font.
},
},
{
"scope":
[
"keyword" // This is for keyword font
],
"settings":
{
"foreground": "#ffffff", // Color assigned to keyword font.
},
},
],
},
}
To change the regular plain white text color, change the hex color:
"#fa9c0f" // Color assigned for regular font.
that should do the trick.
VS Code has to be the best IDE as of right now. You can color customize literally everything, from scroll side bars to menu settings. Syntax highlighting seriously makes a developer more productive and less error prone.
You can make the perfect custom IDE however you wish with more details from:
https://code.visualstudio.com/api/references/theme-color
Go to settings and add this command: "editor.foreground": "#ff0000" to make the text in the editor red. Zyou can also load Themes and Syntax Themes to change the text colors as well. If you are displaying line numbers with your code you can change the color of the line numbers with: "editorLineNumber.foreground": "#eeff00". These statements are added to the right-hand side of the settings display.
You need to install extension for programming language you use, If extension is already installed then it may require "Reload". You can search extension and check whether if requires "Reload" or not. After reload the formatting will be fine.
leaflet-draw
"name": "leaflet-draw",
"description": "Vector drawing plugin for Leaflet",
"version": "1.0.2",
leaflet-snap
"name": "leaflet-snap",
"version": "0.0.3",
"description": "Enable snapping between layers",
leaflet-draw-toolbar
"version": "0.3.0-alpha.1"
When run with this configuration snap editing is not working - i mean the points to which it's supposed to snap are not showing up and "sticking" not happens. But if i add the leaflet-draw dependency from the same package as a leaflet-snap (L.drawVersion = '0.3.0-dev';
) then sticking is working fine, but i lose the ability to edit features, as when the dragging points are shown but moving them doesn't change the position of them. So i think there is a version compatibility issue and I tried a lot of version combinations to make everything work, without success. In my opinion Leaflet.Snap requires some older version of Leaflet.Draw while leaflet-draw-toolbar requires a higher one.
I can't seem to get my addon icon to show up when I use jpm. The relevant items in package.json are
"icon": "icon.png",
"icon64": "icon64.png",
and when I unpack the extension, I see them in install.rdf as
<em:iconURL>icon.png</em:iconURL>
<em:icon64URL>icon64.png</em:icon64URL>
They are 48x48 and 64x64px png files, respectively.
Both of those files are in the root directory of the extension. If I read the docs correctly, I shouldn't even have to specify those names, as they are the default.
I don't see any extension icon in the Addons-manager. What am I doing wrong?
This is a known issue with jpm, and I just updated that bug report asking for an update on what we can do about it. It's a mystery to me why it doesn't work as-is.
it's a bug.
If you're working on jpm 1.0.1, the only way it works is:
"icon": "resource://#youraddonname/icon.png",
rename your icon as "icon". Don't know why it works that way..
For new jpm tool, you can use like this:
"icon :" "resource://<ADDONID>/data/icon.png"
Note: In cfx you have id that is some things like jid1-O1iNqbs7ifwqvA but in new jpm tool , we dont have any id, instead the name field use instead of #jetpack...
for example for an old cfx addon with id of jid1-O1iNqbs7ifwqvA we must do like this
"id": "jid1-O1iNqbs7ifwqvA#jetpack",
"icon": "resource://jid1-O1iNqbs7ifwqvA-at-jetpack/data/icon.png"
also you can add icons for menu bar, addon page, open menu Menu like below:
"icons":{
"16":"./data/icon-16.png",
"32":"./data/icon-32.png",
"64":"./data/icon-64.png",
"128":"./data/icon-128.png",
"256":"./data/icon-256.png",
"512":"./data/icon-512.png"
},
useful Links:
Learn Make Package.json
file
JPM Manual