Currently im using ng2-date-picker node modules, also im using theme="dp-material" theme for this components. i want to override the css for that date picker components. Please help me on this. I tried the below css but no luck.
dp-date-picker {
color: #000;
&.dp-material{
&.dp-day-calendar{
color:red;
}
}
}
I used to do this for override this date picker ( ng2-date-picker ) an other css from module that are hard to change :
In *.ts
constructor(private elRef: ElementRef) {}
couleurBouton() {
var header = this.elRef.nativeElement.querySelector('.dp-nav-header');
if (header) {
header.style.color = "#c8960f";
}
var current = this.elRef.nativeElement.querySelector('.dp-current-month');
if (current) {
current.style.border = "1px solid #c8960f";
}
var selected = this.elRef.nativeElement.querySelector('.dp-selected');
if (selected) {
selected.style.background = "#c8960f";
}
}
In template :
<dp-date-picker (click)="couleurBouton()" theme="dp-material" mode="month" [(ngModel)]="selectedDate" placeholder="Date par mois" [config]="datePickerConfig"></dp-date-picker>
If someone have a solution more clean it will be a pleasure
Related
I am converting a custom element dropdown over to lit-element. The way the existing element shows the dropdown options is by setting an expanded boolean attribute on the element, and the options are shown/hidden via css:
my-element:not([expanded]) .options-container {
display: none;
}
my-element[expanded] .options-container {
display: block;
}
The component doesn't need to do any rerenders because the logic is all in the css.
How can I achieve this behavior with lit-element, and not rerender the component? Rerendering can be costly if there are a lot of dropdown options.
I have tried implementing a shouldUpdate that returns false if only expanded has changed - but this causes lit-element not to reflect expanded to the attribute when set via a property, which is necessary in order to show/hide via css.
This is what I have, which doesn't work:
class MyDropdown extends LitElement {
static get properties() {
return {
expanded: { type: Boolean, reflect: true },
...
};
}
shouldUpdate(changedProperties) {
if (changedProperties.has('expanded') && changedProperties.size === 1) {
return false;
}
return true;
}
// disable shadow-dom
createRenderRoot() {
return this;
}
}
Note that I am not using shadow dom yet, not sure if that would change the solution. I'm on lit-element 2.2.1.
The idea is to not use LitElement's static properties or #Property decorator. Write your own property implementation like this:
class MyDropdown extends LitElement {
_expanded = false;
get expanded() {
return this._expanded;
}
set expanded(val) {
this._expanded = val;
// Manually setting the property and reflecting attribute.
if (val) {
this.setAttribute('expanded', '');
} else {
this.removeAttribute('expanded');
}
}
// disable shadow-dom
createRenderRoot() {
return this;
}
}
Similarly, you can listen for attributeChangedCallback lifecycle event and adjust _expanded property whenever user changes the attribute and not property.
I want to load a custom font in a tornadofx-app with typesafe css, is this possible?
Thanks and best regards.
As long as a font is loaded, it can be used in CSS, so we've added a loadFont helper in TornadoFX that can be used like so:
class FontTest : App(Main::class, Styles::class)
class Main : View("Font Test") {
override val root = stackpane {
label("This is my Label") {
addClass(Styles.custom)
}
}
}
class Styles : Stylesheet() {
companion object {
val custom by cssclass()
// Note that loadFont() returns Font?
val riesling = loadFont("/fonts/riesling.ttf", 48.0)
}
init {
custom {
padding = box(25.px)
riesling?.let { font = it }
// or if you just want to set the font family:
// riesling?.let { fontFamily = it.family }
}
}
}
If you know for sure the font exists (e.g. you're including in your build), that can be simplified to:
class Styles : Stylesheet() {
companion object {
val custom by cssclass()
val riesling = loadFont("/fonts/riesling.ttf", 48.0)!!
}
init {
custom {
padding = box(25.px)
font = riesling
// or if you just want to set the font family:
// fontFamily = riesling.family
}
}
}
By the way since 29 days as Ruckus T-Boom answered this question he added the loadFont function :) , with which it's possible to write:
class Styles : Stylesheet() {
private val customFont = loadFont("/fonts/custom-font.ttf", 14)!!
init {
root {
font = customFont
fontSize = 11.px
}
}
}
I'm building a html-app for Android and I have an issue with the :active css rule. It works like it should BUT when I hide an element that is ':active'. the state is never dismissed.
For example:
I have a button with this css:
.button:active { background-color:rgba(0,0,0,0.5); }
and this javascript:
$(".button").on("click",function(evt){
$(evt.originalEvent.target).css("display","none");
});
When I tap the button it is hidden. But when I un-hide it, it will still have the .button:active css rule applied.
Help?
Try the following
$(".button").on("click",function(evt){
$(evt.originalEvent.target).removeClass("active");/*Or whatever your class name is**/
$(evt.originalEvent.target).css("display","none");
});
I think I got it working with a MAJOR workaround (because event.target for touches returns the element the user tapped on which may very well be a childnode of the actual element that binds the events (see example below, it will return the [img] elem, not the [div]). Seufs.
PS: #Richa's answer did help me to do a workaround instead of hoping there would be a fix for :active
HTML (snippet)
<div class='button activatablel'><img src='someicon.png'></div>
CSS
.activatablel { /* nothing, just used to find the elements with jquery) */ }
.activatablel_active {
background:#f00;
}
JAVASCRIPT
elems = $(".activatablel");
for (var i in elems) {
var elem = elems[i];
elem.ontouchstart = function(evt) {
// Now we have to find the ACTUAL element that bound this event
// because somebody decided it's useful to not do this &$*((#^#))_
var foundTheActualTarget = false;
var thetarget = evt.target;
var whilenum = 0;
while (!foundTheActualTarget) {
if (thetarget.className) {
if (thetarget.className.indexOf("activatablel")>=0) {
foundTheActualTarget = true;
break;
}
}
thetarget = thetarget.parentNode;
whilenum++;
if (whilenum>256) { break; } // TODO: unless we intend to do this job in Reno, we're in Barney
}
if ($(thetarget).hasClass("activatablel_active")) { return; }
$(thetarget).addClass("activatablel_active");
}
elem.ontouchend = function(evt) {
$("*").removeClass("activatablel_active");
}
elem.ontouchcancel = elem.ontouchend;
}
I have a main application (Flex 4.6), in which I intend to use any number of widgets. The widgets are .swf files (s:Module OR s:Application, Flex 4.6).
My problem is that the loaded widget does NOT inherit the styles of the application which is using it.
To put it briefly, I load the widget as an .swf file from the sever (using URLLoader class). After downloading it, I create the instances of the widgets (whereas a single widget can be cointained in the main application on several various places - multiply).
In the main application, the following CSS file is used:
<fx:Style source="css/common.css" />
common.css content is:
s|TextInput {
contentBackgroundColor: #9FD1F2;
focusColor: #8FD7F9;
skinClass: ClassReference("skins.textInputTestSkin");
}
s|Label {
color: #2211FF;
}
And this is how I create and load the widgets:
private var bytesLoader:Loader = null;
public var loadedApp:SystemManager = null;
public var loadedModule:Module = null;
...
bytesLoader.addEventListener(Event.COMPLETE, onBytesLoaderComplete);
var context:LoaderContext = new LoaderContext(false, ApplicationDomain.currentDomain);
bytesLoader.loadBytes(urlLoader.data, context);
...
private function onBytesLoaderComplete(e:Event):void {
var dataContent:DisplayObject = bytesLoader.content;
//(Application)
if(dataContent && (dataContent is SystemManager)) {
loadedApp = dataContent as SystemManager;
loadedApp.addEventListener(FlexEvent.APPLICATION_COMPLETE,appWidgetCreationComplete);
appHolder.addChild(dataContent);
} else if(dataContent is IFlexModuleFactory) {
//(Module)
var moduleLoader:LoaderInfo = LoaderInfo(e.target);
moduleLoader.content.addEventListener("ready", moduleWidgetReadyHandler);
}
}
private function moduleWidgetReadyHandler(e:Event):void {
var factory:IFlexModuleFactory = IFlexModuleFactory(e.target);
if(factory) {
loadedModule = factory.create() as Module;
if(loadedModule) {
this.addElement(loadedModule);
}
}
}
My question is first, in what way can I apply the styles of the parents on the widget and secondly(s:Module), in what way is it possible for me to apply the styles of the parents on the widget (s:Application).
UPDATE 1
If I change getter moduleFactory (as seen below) in every single of the widgets, the styles are set just right. Meaning the textInput in the widget (Module and Application) has the same skin as in the main application.
override public function get moduleFactory():IFlexModuleFactory {
return FlexGlobals.topLevelApplication.moduleFactory;
}
It's workaround? It's good solution?
Ok, here is a solution:
Add before bytesLoader.loadBytes(urlLoader.data, context);
//init - moduleFactory
bytesLoader.contentLoaderInfo.addEventListener(Event.INIT, onContentLoaderInfoInit);
private function onContentLoaderInfoInit(e:Event):void {
if(bytesLoader && bytesLoader.contentLoaderInfo) {
bytesLoader.contentLoaderInfo.removeEventListener(Event.INIT, onContentLoaderInfoInit);
}
var loaderInfo:LoaderInfo = LoaderInfo(e.target);
loaderInfo.content.addEventListener(Request.GET_PARENT_FLEX_MODULE_FACTORY_REQUEST, onGetParentModuleFactoryRequest);
}
private function onGetParentModuleFactoryRequest(r:Request):void {
if(isGlobalStyleAllowed) {
if ("value" in r) {
r["value"] = FlexGlobals.topLevelApplication.moduleFactory;
}
}
//remove eventListener
if(bytesLoader && bytesLoader.contentLoaderInfo) {
var loaderInfo:LoaderInfo = LoaderInfo(bytesLoader.contentLoaderInfo);
loaderInfo.content.removeEventListener(Request.GET_PARENT_FLEX_MODULE_FACTORY_REQUEST, onGetParentModuleFactoryRequest);
}
}
It's works.
I'm creating a new Flex component (Flex 3). I'd like it to have a default style. Is there a naming convention or something for my .cs file to make it the default style? Am I missing something?
Christian's right about applying the CSS, but if you're planning on using the component in a library across projects, you're gonna want to write a default css file for that library. Here's how you do it:
Create a css file called "defaults.css" (Only this file name will work!) and put it at the top level under the "src" folder of your library. If the css file references any assets, they have to be under "src" as well.
(IMPORTANT!) Go to library project's Properties > Flex Library Build Path > Assets and include the css file and all assets.
That's how the Adobe team sets up all their default styles, now you can do it too. Just figured this out- huge
Two ways, generally. One's just by referencing the class name directly -- so for example, if you'd created a new component class MyComponent in ActionScript, or indirectly by making an MXML component extending another UIComponent called MyComponent, in both cases, the component would pick up the styles declared in your external stylesheet, provided that stylesheet's been imported into your application (e.g., via Style source):
MyComponent
{
backgroundColor: #FFFFFF;
}
Another way is by setting the UIComponent's styleName property (as a string):
public class MyComponent
{
// ...
this.styleName = "myStyle";
// ...
}
... and defining the style in the CSS file like so (note the dot notation):
.myStyle
{
backgroundColor: #FFFFFF;
}
Make sense?
In addition to what Christian Nunciato suggested, another option is to define a static initializer for your Flex component's styles. This allows you to set the default styles without requiring the developer to include a CSS file.
private static function initializeStyles():void
{
var styles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("ExampleComponent");
if(!styles)
{
styles = new CSSStyleDeclaration();
}
styles.defaultFactory = function():void
{
this.exampleNumericStyle = 4;
this.exampleStringStyle = "word to your mother";
this.exampleClassStyle = DefaultItemRenderer //make sure to import it!
}
StyleManager.setStyleDeclaration("ExampleComponent", styles, false);
}
//call the static function immediately after the declaration
initializeStyles();
A refinement of what joshtynjala suggested:
public class CustomComponent extends UIComponent {
private static var classConstructed:Boolean = classConstruct();
private static function classConstruct():Boolean {
if (!StyleManager.getStyleDeclaration("CustomComponent")) {
var cssStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
cssStyle.defaultFactory = function():void {
this.fontFamily = "Tahoma";
this.backgroundColor = 0xFF0000;
this.backgroundAlpha = 0.2;
}
StyleManager.setStyleDeclaration("CustomComponent", cssStyle, true);
}
return true;
}
}
I've read this in the docs somewhere; the classContruct method gets called automatically.
You may want to override default styles using the <fx:Style> tag or similar. If that's the case, a CSSStyleDeclaration may already exist by the time classConstructed is checked. Here's a solution:
private static var classConstructed:Boolean = getClassConstructed ();
private static function getClassConstructed ():Boolean {
var defaultCSSStyles:Object = {
backgroundColorGood: 0x87E224,
backgroundColorBad: 0xFF4B4B,
backgroundColorInactive: 0xCCCCCC,
borderColorGood: 0x333333,
borderColorBad: 0x333333,
borderColorInactive: 0x666666,
borderWeightGood: 2,
borderWeightBad: 2,
borderWeightInactive: 2
};
var cssStyleDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration ("StatusIndicator");
if (!cssStyleDeclaration) {
cssStyleDeclaration = new CSSStyleDeclaration ("StatusIndicator", FlexGlobals.topLevelApplication.styleManager, true);
}
for (var i:String in defaultCSSStyles) {
if (cssStyleDeclaration.getStyle (i) == undefined) {
cssStyleDeclaration.setStyle (i, defaultCSSStyles [i]);
}
}
return (true);
}
To create a default style you can also have a property in your class and override the styleChanged() function in UIComponent, eg to only draw a background color across half the width of the component:
// this metadata helps flex builder to give you auto complete when writing
// css for your CustomComponent
[Style(name="customBackgroundColor", type="uint", format="color", inherit="no")]
public class CustomComponent extends UIComponent {
private static const DEFAULT_CUSTOM_COLOR:uint = 0x00FF00;
private var customBackgroundColor:uint = DEFAULT_CUSTOM_COLOR;
override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
var allStyles:Boolean = (!styleProp || styleProp == "styleName");
if(allStyles || styleProp == "customBackgroundColor")
{
if(getStyle("customBackgroundColor") is uint);
{
customBackgroundColor = getStyle("customBackgroundColor");
}
else
{
customBackgroundColor = DEFAULT_CUSTOM_COLOR;
}
invalidateDisplayList();
}
// carry on setting any other properties you might like
// check out UIComponent.styleChanged() for more examples
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.clear();
graphics.beginFill(customBackgroundColor);
graphics.drawRect(0,0,unscaledWidth/2,unscaledHeight);
}
}
You could also create a setter for the customBackgroundColor that called invalidateDisplayList(), so you could also set the customBackgroundColor property programatically as well as through css.