#/mapping/date.js
import { translationMacro as t } from "ember-i18n";
export default {
i18n: Ember.inject.service(),
DateFilter: {
today: "Today",
yesterday: "Yesterday",
thisWeek: "This Week",
lastWeek: "Last Week",
thisMonth: "This Month",
lastMonth: "Last Month",
none: "None"
}
I have tried using helper as {{t "Today"}}, macros as(t "Today") and service injection as this.get('i18n').t('Today').toString(), where 'Today' is a key, but none of them are working.
Also, how to translate strings in .scss file? For example 'Open file' in below code.
&::after{
position: absolute;
content: 'Open file';
font-size: 12px;
color: $secondary-button;
bottom: 16px;
left: 16px;
}
Unless you specify "Today" as one of the keys in your-locale/translation.js, this will not work.
I guess you might want to use the property instead of a hard-coded string in the {{t}} helper. Use {{t DateFilter.today}}. DateFilter.today is a controller property that will return the string 'today'
Related
Is there any way to style the text message within an ionic 2 toast?
I have tried this:
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true
});
toast.onDismiss(() => {
console.log('Dismissed toast');
});
this.nav.present(toast);
}
But clearly you can't use html in the text so I am guessing the answer to my question is no?
You must add 'cssClass: "yourCssClassName"' in your toastCtrl function.
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true,
cssClass: "yourCssClassName",
});
than you can add any feature to the your css class. But your css feature went outside the default page'css. Exmp:
page-your.page.scss.name {
//bla bla
}
.yourCssClassName {
text-align:center;
}
I was able to achieve a toaster color change by adding a custom class on the toaster create
let toast = this.toastCtrl.create({
message: 'Foobar was successfully added.',
duration: 5000,
cssClass: "toast-success"
});
toast.present();
}
In that pages scss file i then went outside the default nested page name ( because the toaster is NOT inside the root of ion page name thing). And all though this is a bit hacky i just explicitly targeted the next div element after the custom class that i added
.toast-success {
> div{
background-color:#32db64!important;
}
}
I say its hacky because you have to use the !important on it. You can avoid the !important by wrapping the .toast-success with .md,.ios,.wp{...
You can override the style default by overriding the main toaster variables in the theme/variables.scss file.
$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);
This will only override the default value though and not a custom value. there are a few more variables that can be styled as well.
First, import toast controller from ionic-angular and make object of that in constructor.
import { ToastController } from "ionic-angular";
constructor(private _tc: ToastController) {
}
After that wherever you want to show your toast message write that.
let options = {
message: "Your toast message show here",
duration: 3000,
cssClass: "toast.scss"
};
this._tc.create(options).present();
Here is my scss:
.toast-message {
text-align: center;
}
Or you can check best example from this link. I think it will help you. :)
Or else check the answer on this link.
If you define your own css class in app.scss (not in page.scss)
you can style it with .toast-wrapper and .toast.message
No need to use > div{
Example:
.yourtoastclass {
.toast-wrapper {
background: blue;
opacity: 0.8;
border-radius: 5px;
text-align: center;
}
.toast-message {
font-size: 3.0rem;
color: white;
}
}
in theme/variables.scss you can make a default
Example (red and little transparent):
$toast-width: 75%; /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
Ionic 2 provide a very useful way to override their component style you can override the toaster SASS variable in src/theme/variables.scss by adding
$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;
this will override the default style please refer to this Overriding Ionic Sass variable
You can accomplish, however you need to modify the toast component template itself.
Via explorer:
\node_modules\ionic-angular\components\toast\toast.js
Change line 194 (template):
{{d.message}} to <div [innerHTML]='d.message'></div>
You should be able to change any of the message styling in the css using .toast-message selector:
.toast-message {
font-family: Helvetica,
color: red
}
Or, if you look at the docs (http://ionicframework.com/docs/v2/api/components/toast/Toast/) there is a cssClass property you can use to assign your toast a specific class and then style that.
Change toast background color and opacity:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'changeToast'
});
and add app.scss:
.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};
It's used with .toast-message
I tried all above, still didn't work, therefore I come across a new solution, you need cssClass outside of page css declaration:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'toastcolor'
});
post-list.scss like this
page-post-list {
}
.toastcolor .toast-message {
background-color:skyblue;
}
Not sure about old Ionic versions, but in Ionic 5 you can't directly change inner CSS since it's encapsulated in the shadow
<ion-select>
#shadow-root
<div class="toast-container" part="container">
...
</div>
</ion-select>
so, to change .toast-container (for example) in your cssClass you should use:
.my-custom-class::part(container) {
flex-direction: column;
}
.my-custom-class {
.toast-container {
flex-direction: column; // will not work
}
}
I'm using ionic v5 with angular and
according to: https://ionicframework.com/docs/api/toast#css-shadow-parts
you can do something like this:
::ng-deep{
ion-toast::part(container) {
...
}
ion-toast::part(message) {
...
}
}
Can we display a message using highcharts, when the data set does not return any data?
For example : "No Data Available"
It is now supported in Highcharts since v3.0.8
You need to load the no-data module and then, you can specify a custom message through the lang.noData option:
Highcharts.setOptions({lang: {noData: "Your custom message"}});
This has been added per the uservoice entry.
I used a little workaround to solve this problem. Basically I'm overlaying a div containing the message "No Data to Display".
.noChartData {
display: hidden;
position: absolute;
z-index: 99;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: normal;
color: #CCC;
}
<div class="noChartData">No Data to Display</div>
When the page loads I'm using JQuery to find the position of the chart then offsetting the "No Data" div and revealing it accordingly.
var chartPosition = $("#myChart").position();
$(".noChartData").css("left", chartPosition.left + 400);
$(".noChartData").css("top", chartPosition.top + 150);
You'll need to vary the offsets accordingly depending on the size of your chart. I am using an AJAX call to pull in the series and category data so I know just before I bind the chart whether or not to reveal the floating "No Data" div.
A very simple example:
Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
series: [{
data: []
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<div id="container" style="height: 250px"></div>
Hope this helps someone
I have a listboxfor in my application which works greats. But to make multiple selection I need to press ctrl and click on the item. How can I change this behavior, so every time I click on the item in the list it selects it and when press again it deselects but only one of the selected items.
My listbox:
#Html.ListBoxFor(m => m.selectedCharts, new SelectList(#Model.Graphs.ToList() )
, new { #class = "select_change" }
)
Or maybe I should use different control for this purpose?
Many thanks
I've used Bootstrap Multiselect before, with great success.
If it cannot be a drop down, use this Checkbox list instead.
I have managed to complete a nice looking listbox where user don't need to press ctrl button to select multiple elements. I want to share with you my work. I have used suggested by MartinHN an amazing extension CheckBoxListFor. You can find it on this website MvcCheckBoxList.
My View Code
#{
var htmlListInfo = new HtmlListInfo(HtmlTag.vertical_columns, 0 , new { #class="styled_list" });
#Html.CheckBoxListFor(model => model.ReportSettings.Ids,
model => model.AvailableGraphs,
graph => graph.Id,
graph => graph.Name,
model => model.SelectedGraphs,
new { #class="styled_checkbox" },
htmlListInfo,
null,
x => x.Name)
}
My CSS:
input.styled_checkbox, input[type="checkbox"]
{
visibility: hidden;
width: 0px;
}
.styled_list
{
background: #aeeefb;
border-radius:5px;
padding: 10px 10px 10px 0;
color: White;
font-weight: bold;
}
.styled_checkbox
{
background: #69D2E7;
cursor: pointer;
display: inline-block;
vertical-align: middle;
margin: 3px 0 3px 0;
padding: 5px;
position: relative;
width: 250px;
border-radius:5px;
}
.styled_checkbox:hover
{
opacity: 0.7;
}
.styled_checkbox:checked+label
{
background: #1a9eed;
}
The check boxes are hidden and labels indicates that element is selected or not. I can't insert pictures but it looks good, but you can off course edit style to your own needs.
Hope that helps anyone
I want to add one icon to placeholder like this
$("#tag_list").select2({
allowClear: true,
placeholder: "<i class='icon-group'></i> inout your tags...",
tags: ['a', 'b', 'c'],
});
But it renders plain text in select2, so how to render html text for placeholder?
Select2 automatically escapes HTML markup.
$("#tag_list").select2({
allowClear: true,
placeholder: "<i class='icon-group'></i> inout your tags...",
tags: ['a', 'b', 'c'],
escapeMarkup : function(markup) { return markup; } // let our custom formatter work
});
By overriding the 'escapeMarkup' parameter you can force it to render plain HTML instead (by returning the unescaped HTML as is). This will affect both the placeholder AND the select data (select2 handles the placeholder as any data, thus escaping it).
For more information, check the AJAX data example:
Examples - Select2 | LoadingRemoteData
You can specify a placeholder object, rather than only the text. This will render the HTML.
So in your case, the placeholder might look something like this.
$("#tag_list").select2({
placeholder: {
id: "-1",
text: '<i class="icon-group"></i> input your tags...'
}
});
Im guessing your are trying to use font-awesome.
They have a cheatsheet with unicodes here: http://fortawesome.github.io/Font-Awesome/cheatsheet/
This can be placed in the placeholder in html:
<input name="username" placeholder="">
Remember to add the on the input element:
font-family: 'FontAwesome'
This is not supported by all browsers so you might want to do a fallbackhack with the :before element.
.wrapper:before {
font-family: 'FontAwesome';
color:red;
position:relative;
content: "\f042";
}
Last fallback is to actually use an image like this:
background-image: url(http://www.levenmetwater.nl/static/global/images/icon-search.png);
background-position: 10px center;
background-repeat: no-repeat;
If you want it to remove the icon on focus, add this:
input:focus {
background-position: -20px center;
text-indent: 0;
width: 50%;
}
function format(state){
if (!state.id) {
return state.text; // optgroup
} else {
return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
}
}
$("#tag_list").select2({
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) { return m; }
});
http://ivaynberg.github.io/select2/
I have an H1 selector that I'm replacing with sIFR. Within some of the H1 selectors are < strong>< /strong> selectors; e.g.:
<h1>Hello world, <strong>this is some bold text</strong> and this is normal text</h1>
Everything outside of the < strong>< /strong> tags is replaced fine -- and the text within the tags does not display. I'd like to apply different styling to the < strong> text. Is this possible?
Here is my relevant sIFR code from sifr-config.js:
sIFR.replace(avenir_black, {
selector: 'h1',
css: '.sIFR-root { color: #000000; text-transform:uppercase; }',
wmode: 'transparent'
});
I tried adding this, but no luck:
sIFR.replace(avenir_black, {
selector: 'h1 strong',
css: '.sIFR-root { color: #cc0000; text-transform:uppercase; }',
wmode: 'transparent'
});
sIFR makes text inside <strong> tags bold. For the text to show up, the bold glyphs of the font need to have been exported. When creating the sIFR Flash movie, make sure to select a character and make it bold.