How to configure ABP Framework to use Bootswatch in RTL languages - css

With a reference to Jonathan Potts ABP Bootswatch article there is a clear and good approach to switching Bootstrap with Bootswatch in ABP Framework. However, it is not working when it comes to using Bootswatch in RTL languages like Arabic or Farsi.
I wonder what am I missing and what is the best practice to solve this problem?
Project's UI is based on MVC Razor Pages
Here is my BundleContributor:
public class BootswatchStyleContributor : BundleContributor
{
public override void ConfigureBundle(BundleConfigurationContext context)
{
var theme = "minty";
var bootstrap = "/libs/bootstrap/css/bootstrap.css";
var bootswatch = $"/libs/bootswatch/{theme}/bootstrap.css";
context.Files.ReplaceOne(bootstrap, bootswatch);
}
}
And Configuration:
private void ConfigureBundles()
{
Configure<AbpBundlingOptions>(options =>
{
options.StyleBundles.Configure(
BasicThemeBundles.Styles.Global,
bundle =>
{
bundle.AddFiles("/global-styles.css");
bundle.AddContributors(typeof(BootswatchStyleContributor));
}
);
});
}
Here is the result in LTR which is working fine:
But not work after changing the language to an RTL language such as Arabic:

i used #Engincan idea
using CultureHelper.IsRtl is fine

Related

.Net Core 3.1 Remove Schema on Swagger UI

I have .Net 3.1 Web Api, I would like to remove this sections "Schemas" on Swagger UI.
How to do it?
No need for a schema filter. After busting on it for days I have found out:
All needs to be done is in
app.UseSwaggerUI(options =>
{
options.DefaultModelsExpandDepth(-1);
});
Note: It is DefaultModels (plural) not DefaultModel (singular). Difference is DefaultModels is the default expansion depth for the model on the model-example section, whereas DefaultModels is the expansion depth for models.
On Adding Swagger UI just add the following line:
app.UseSwaggerUI(c => {
c.DefaultModelsExpandDepth(-1);
});
After a lot of breaking my head, using the user's suggestion "CoffeeCodeConverterImpl" I made the class like this:
public class RemoveSchemasFilter : IDocumentFilter
{
public void Apply(OpenApiDocument swaggerDoc, DocumentFilterContext context)
{
IDictionary<string, OpenApiSchema> _remove = swaggerDoc.Components.Schemas;
foreach (KeyValuePair<string, OpenApiSchema> _item in _remove)
{
swaggerDoc.Components.Schemas.Remove(_item.Key);
}
}
}
Implementation:
c.DocumentFilter<RemoveSchemasFilter>();
Add a custom IDocumentFilter implementation to your swagger configuration:
services.AddSwaggerGen(options => options.DocumentFilter<RemoveSchemasFilter>());
In the Apply method of RemoveSchemasFilter you should then be able to identify the elements of the OpenApiDocument you want to remove and do so accordingly.

ResourceManifest SetDependecies doesn't work in Orchard module

I Use Orchard 1.10.1 CMS. I have created a widget module in code. In the ResourceManifest file I added this code
public void BuildManifests(ResourceManifestBuilder builder)
{
var manifest = builder.Add();
manifest.DefineStyle("ShareButtons").SetUrl("ShareButtons.css").SetDependencies("font-awesome.css");
}
and in template cshml I added this code
#{
Style.Require("ShareButtons");
}
Problem is in this case file font-awesome.css won't come in the page's source files.
what am I doing wrong here?
And when I use this code in template it works fine and font-awesome.css will come in the page's source files
#{
Style.Include("font-awesome.css");
Style.Include("ShareButtons.css");
}
ps: In the Style folder of my module project I have ShareButtons.css and font-awesome.css.
Your setup is wrong. You must either register a depency yourself (just like your ShareButton-Style), or in your case use the correct FontAwesome resource from Orchard.Resources.
So your code would look like this:
manifest.DefineStyle("ShareButtons")
.SetUrl("ShareButtons.css")
.SetDependencies("FontAwesome");
Here's the setup of FontAwesome you're requiring as dependency from Orchard.Resources:
namespace Orchard.Resources {
public class FontAwesome : IResourceManifestProvider {
public void BuildManifests(ResourceManifestBuilder builder) {
var manifest = builder.Add();
manifest.DefineStyle("FontAwesome").SetUrl("font-awesome.min.css", "font-awesome.css").SetVersion("4.4.0").SetCdn("//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css", "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css", true);
}
}
}

CDN Failover for Boostrap Javascript using AspNet.Web.Optimization

The AspNet.Web.Optimization bundling and minification package supports the use of a CDN and local failover.
public static void RegisterBundles(BundleCollection bundles)
{
bundles.UseCdn = true;
BundleTable.EnableOptimizations = true; //force optimization while debugging
var jquery = new ScriptBundle("~/bundles/jquery", "//ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js").Include(
"~/Scripts/jquery-{version}.js");
jquery.CdnFallbackExpression = "window.jQuery";
bundles.Add(jquery);
//...
}
All the examples provided that I have found, have focused on using this for jQuery but I am trying to find the appropriate CdnFallbackExpression for failover on the javascript file for Bootstrap when hosted on a CDN.
Anyone found a solution for this?
bootstrap.CdnFallbackExpression = "$.fn.modal";
Checking for the modal function should work, and seems to be the most common method on the interwebs (e.g. how to fallback twitter-bootstrap cdn to local copy).
That should write out something like:
<script> $.fn.modal || document.write('<script src="Script/bootstrap.min.js"><script>')</script>
If you also wanted something for css, then you could do it manually. This snippet might help: https://github.com/MaxCDN/bootstrap-cdn/issues/110
Or, there's this github project: https://github.com/EmberConsultingGroup/StyleBundleFallback

Translating views with HotTowel (Durandal framework) + VS2012

I develop an ASP.NET MVC solution with Durandal and Breeze. I need to translate frontend to french and dutch. How to proceed with Durandal/knockout?
In a classic ASP.NET MVC solution we have the opportunity to have the views rendered server side (thanks to razor).
Thanks for your help.
To expand on Rob's answer of trying the i18n.js plugin for require.js, here's the steps I followed (I'm working off the Durandal starter template in Visual Studio).
Download the i18n.js plugin and put it in the App folder.
Create an App/nls folder, which is where you will put the require.js resource bundles, e.g. App/nls/welcomeBundle.js.
define({
"root": {
"displayName": "Welcome to the Durandal Starter Project!"
},
"fr-fr": true
});
You'll see I added a line to tell require.js that there's a French version available. This will be created in App/nls/fr-fr/welcomeBundle.js, which I kinda did below (changed the to le :D)
define({
"displayName": "Welcome to le Durandal Starter Project!"
});
require.js needs to be configured initially with the locale (can't be done dynamically). So in the main.js file, I declare the below getLocale() function, which I use to configure the locale for require.js:
function getLocale() {
var locale = 'en-us';
if (localStorage) {
var storedLocale = localStorage.getItem('locale');
locale = storedLocale || locale;
}
return locale;
}
requirejs.config({
paths: {
'text': 'durandal/amd/text'
},
locale: getLocale()
});
In the welcome.js module I then load the bundle and use it for the displayName property:
define(function(require) {
var bundle = require('i18n!nls/welcomeBundle');
return {
displayName: bundle.displayName,
...
}
});
I then set the locale to French and reload the page via JavaScript:
localStorage.setItem('locale', 'fr-fr');
location.reload();
Hope that helps :)
Edit: 2013-04-04: I updated the above to initialize the locale in the main.js file and not in the shell.js module, as for some reason the locale wasn't being used correctly when loading the bundle in the shell module. Figure that it should be configured as soon as possible anyway.

ASP.NET MVC4 Bundling with Twitter Bootstrap

I'm trying to use the new bundling feature in MVC 4 with Twitter bootstrap and it seems to me like the paths to the glyphicons png-files int the css get's messed up in some way. Heres my code:
bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
"~/Static/Css/bootstrap/bootstrap.css",
"~/Static/Css/bootstrap/bootstrap-padding-top.css",
"~/Static/Css/bootstrap/bootstrap-responsive.css",
"~/Static/Css/bootstrap/docs.css"));
bundles.Add(new ScriptBundle("~/bundles/publicjs").Include(
"~/Static/Js/jquery-1.7.2.js",
"~/Static/Js/bootstrap/bootstrap.js",
"~/Static/Js/cookie/jquery.cookie.js"));
I'm not seeing any icons on buttons and likewise. Am I doing something wrong here? Any suggestions?
The issue is most likely that the icons/images in the css files are using relative paths, so if your bundle doesn't live in the same app relative path as your unbundled css files, they become broken links.
We have rebasing urls in css on our todo list, but for now, the easist thing to do is to have your bundle path look like the css directory so the relative urls just work, i.e:
new StyleBundle("~/Static/Css/bootstrap/bundle")
Update: We have added support for this in the 1.1beta1 release, so to automatically rewrite the image urls, you can add a new ItemTransform which does this rebasing automatically.
bundles.Add(new StyleBundle("~/bundles/publiccss").Include(
"~/Static/Css/bootstrap/bootstrap.css",
"~/Static/Css/bootstrap/bootstrap-padding-top.css",
"~/Static/Css/bootstrap/bootstrap-responsive.css",
"~/Static/Css/bootstrap/docs.css", new CssRewriteUrlTransform()));
The 'CssRewriteUrlTransform' works just fine for applications that DON'T run on top of a virtual directory.
So, if your app runs on http://your-site.com/ it runs just fine, but if it runs on http://your-site.com/your-app/ you'll have 404 for all your images because the default 'CssFixRewriteUrlTransform' is referencing your images with a '/'.
To solve this issue, I have implemented my own version of 'CssRewriteUrlTransform' like this:
public class CssFixRewriteUrlTransform : IItemTransform {
private static string ConvertUrlsToAbsolute(string baseUrl, string content) {
if (string.IsNullOrWhiteSpace(content)) {
return content;
}
var regex = new Regex("url\\(['\"]?(?<url>[^)]+?)['\"]?\\)");
return regex.Replace(content, match => string.Concat("url(", RebaseUrlToAbsolute(baseUrl, match.Groups["url"].Value), ")"));
}
public string Process(string includedVirtualPath, string input) {
if (includedVirtualPath == null) {
throw new ArgumentNullException("includedVirtualPath");
}
var directory = VirtualPathUtility.GetDirectory(includedVirtualPath);
return ConvertUrlsToAbsolute(directory, input);
}
private static string RebaseUrlToAbsolute(string baseUrl, string url) {
if (string.IsNullOrWhiteSpace(url) || string.IsNullOrWhiteSpace(baseUrl) || url.StartsWith("/", StringComparison.OrdinalIgnoreCase)) {
return url;
}
if (!baseUrl.EndsWith("/", StringComparison.OrdinalIgnoreCase)) {
baseUrl = string.Concat(baseUrl, "/");
}
return VirtualPathUtility.ToAbsolute(string.Concat(baseUrl, url));
}
}
UPDATE: thanks to superjos who pointed out that there was another solution out there:
public class CssRewriteUrlTransformWrapper : IItemTransform
{
public string Process(string includedVirtualPath, string input)
{
return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);
}
}
What you can do is you can go to the customize page and change #iconSpritePath and #iconWhiteSpritePath in the Sprites section and, of course, download the new style.
I've put my images in the folder Content/Images folder and I've changed the path in:
/Content/Images/glyphicons-halflings.png
/Content/Images/glyphicons-halflings-white.png
Another alternative is to download all the LESS files from github, change the same variables in the variables.less file and recompile the bootrap.less file with a tool like SimpLESS.
Fix for this now added to my AspNetBundling NuGet package which resolves a bunch of other issues in the standard transformer, particularly around using data-uris. Open-sourced on GitHub too.
Just do:
Install-Package AspNetBundling
Replace CssRewriteUrlTransform with CssRewriteUrlTransformFixed

Resources