|
| Re: [NEON] Inclusion of additional icons from font-awesome [message #1722703 is a reply to message #1722599] |
Mon, 08 February 2016 12:20   |
|
Hi Samuel
The scoutIcons.woff file contains some custom icons that are not included in Font Awesome, e.g. the magnifying glass used in the smart fields. If you simply replace the default font file without adding the SVGs in org.eclipse.scout.rt.ui.html/src/icons, the corresponding icons will be missing in the UI.
Because it is much simpler, we recommend that projects contribute their own icons in a separate file. Here is how to do it:
- Add the *.woff File to your.project.ui.html/src/main/resources/WebContent/res
- Create a custom CSS (LESS) macro:
- your.project.ui.html/src/main/js/your-project/style/fonts.css
@font-face {
font-family: awesomeIcons;
font-weight: normal;
src: url('fontAwesome.woff') format('woff');
}
.font-awesomeIcons {
font-family: awesomeIcons, @font-default-family;
}
The first rule is a CSS font-face definition which makes the font from "fontAwesome.woff" available in CSS as "awesomeIcons". The second rule is used when specifying an iconId from the scout model (the font name prefixed with "font-").
- your.project.ui.html/src/main/js/your-project-all-module.css
//@include("your-project/style/fonts.css")
Your own module only consists of one file (yet).
- your.project.ui.html/src/main/resources/WebContent/res/your-project-all-macro.css
//@include("scout-module.css")
//@include("your-project-module.css")
The first line includes all default CSS definitions from Scout, the second adds your own new custom rule set.
- Change your *.html files to use the new macro instead of the default one. Open all *.html files in your.project.ui.html/src/main/resources/WebContent/res and replace
<scout:stylesheet src="res/scout-all-macro.css" />
<scout:stylesheet src="res/your-project-all-macro.css" />
- Use the new font icons as follows
- In CSS (for hard-coded UI icons):
.my-widget::before {
content: '\F0FC';
font-family: awesomeIcons, scoutIcons, @font-default-family;
}
- In Scout model code (Java):
// Your own icon constants class
public class MyIcons extends AbstractIcons {
// Pattern: "font:<CssFontName> \u<Unicode>"
public static final String Beer = "font:awesomeIcons \uF0FC";
}
getMyWidget().setIconId(MyIcons.Beer);
Regards,
Beat
[Updated on: Tue, 09 February 2016 08:02] Report message to a moderator |
|
|
|
| Re: [NEON] Inclusion of additional icons from font-awesome [message #1722793 is a reply to message #1722749] |
Tue, 09 February 2016 08:14 |
|
Hi Samuel
Yes, you are right, not all files reside in the same directory. I have fixed a small typo in my instructions (location of fonts.css).
The macro is the file referenced in your *.html files, therefore it needs to be in the WebContent/res order. It does not necessarily need to include custom code, e.g. you could write a macro that includes the "scout-module.js" and the "third-party-module.js".
The module is the code of a single software module. By convention, we place all module files on the root of the classpath, therefore the name needs to be unique (that's why we use the "your-project-" prefix). However, you might also place your module in /src/main/js/your-project/ and simply call it "module.css".
To ease development, not all code must be contained in a single file. Instead, many small files can be included in the module. They can even be other modules. To avoid filename collisions, we use a single directory as prefix, e.g. scout/style/fonts.css is different from your-project/style/fonts.css. This is similar to Java's packages, but shorter ("org/eclipse/scout/rt/ui/html" vs. "scout").
It works alike for *.js files.
|
|
|
|
|
|
|
Powered by
FUDForum. Page generated in 0.04257 seconds
] 
Search
Help
Register
Login
Home
