I have the following html code but it doesn't seem to work.
I'm trying to add a linear gradient over a dynamic background image url using Angular 6.
<header *ngIf="user?.backgroundPhotoUrl != null && user?.backgroundPhotoUrl !== ''"
[style.background-image]="'linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('+ user?.backgroundPhotoUrl +')'">
But it just comes back blank. Any help?
Take a look at the browser's console. Likely it will contain the following Angular warning:
WARNING: sanitizing unsafe style value linear-gradient(rgba(0, 0, 0, 0.3),.... (see http://g.co/ng/security#xss).
If this is the case, Angular will simply have removed your style rule because the Angular team decided that any custom style binding may potentially be harmful i.e. when the value would be derived from user input.
You will have to declare your bounded style rule as save, by wrapping that value like this:
<header [style]="headerStyle"> ...</header>
get headerStyle() {
return this.sanitizer.bypassSecurityTrustStyle(
' background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3)), url(' + this.backgroundPhotoUrl + '); '
);
}
this.sanitizer is an injected DomSanitizer.
Related
I am using plantuml in org, and it works fine. However, I am trying to make some change by adding some HTML tag automatically, just before the #+RESULTS output tag, so that can get a beautiful HTML output effect.
My example code as following:
#+BEGIN_SRC plantuml :file test.png
#startuml
package "Some Group" {
HTTP - [First Component]
[Another Component]
}
node "Other Groups" {
FTP - [Second Component]
[First Component] --> FTP
}
cloud {
[Example 1]
}
database "MySql" {
folder "This is my folder" {
[Folder 3]
}
frame "Foo" {
[Frame 4]
}
}
[Another Component] --> [Example 1]
[Example 1] --> [Folder 3]
[Folder 3] --> [Frame 4]
#enduml
#+END_SRC
After "C-c C-c" of plantuml, you will get the following output just below the plantuml code block:
#+RESULTS:
[[file:test.png]]
However, I want it automatically appended the above #+RESULT tags as following, which would be show bellow the plantuml source-block in the Emacs:
#+ATTR_HTML: :width 80%
#+ATTR_ORG: :width 80%
#+ATTR_HTML: :style background-color: white; border-radius: 8px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
#+RESULTS:
[[file:test.png]]
Then, I can output the org file to HTML by "C-c C-e h o" and get a beautiful HTML.
How can I make it?
Thanks !
The standard technique is to give a name to the source block:
#+NAME: foo
#+BEGIN_SRC plantuml :file test.png
#startuml
...
#+END_SRC
When you evaluate the code block, it will produce a #+RESULTS: header like this:
#+RESULTS: foo
[[file:test.png]]
Now you can add your #+ATTR_* declarations before the result:
#+ATTR_HTML: :width 80%
#+ATTR_ORG: :width
#+ATTR_HTML: :style background-color: white; border-radius: 8px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
#+RESULTS: foo
[[file:test.png]]
Rerunning the code block will put the file link in the same place and will leave the #+ATTR-* stuff alone. You can then export and get a "beautiful HTML"!
EDIT: the main thrust of the above is avoiding the manual work that would be required if the block is NOT named: you would have to keep moving the attribute declarations to the newly generated #+RESULTS: section after each re-evaluation of the source block (and cleaning up the old results). From my POV, that's the annoying part, and the naming of the block takes care of it very nicely.
The addition of the attribute declarations then becomes a one-time task that I don't particularly wish to automate, mainly because the attributes are bound to be different for different blocks, so anything that I do for one block will have to be changed entirely for another: I'd rather do the one-time tasks manually.
That said, you can automate the attribute insertion partially, e.g. by creating a function to do the insertions and binding it to a key:
(defun insert-attr-decls ()
(interactive)
(insert "#+ATTR_HTML: :width 80%\n")
(insert "#+ATTR_ORG: :width 80%\n")
(insert "#+ATTR_HTML: :style background-color: white; border-radius: 8px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n"))
(define-key org-mode-map [f10] 'insert-attr-decls)
Then after the first evaluation, place point just before the #+RESULTS: foo line that is generated and press F10. From my POV, this is where I would stop (if I went this far).
The next step would be to search for the place where the insertion should go and then call the function above - something like this although I'm sure it can be improved:
(defun insert-attr-decls ()
(insert "#+ATTR_HTML: :width 80%\n")
(insert "#+ATTR_ORG: :width 80%\n")
(insert "#+ATTR_HTML: :style background-color: white; border-radius: 8px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n"))
(defun insert-attr-decls-at (s)
(let ((case-fold-search t))
(if (search-forward s nil t)
(progn
(search-backward s nil t)
(insert-attr-decls)))))
(defun insert-attr-decls-at-results ()
(interactive)
(save-excursion
(insert-attr-decls-at "#+RESULTS:")))
(define-key org-mode-map [f10] 'insert-attr-decls-at-results)
That already is a quantum jump in complexity and it probably contains bugs: what will happen e.g. if there is no #+RESULTS: string in the buffer? I have not tested. So if somebody else is willing to spend the time to produce a "perfect" function, then yes, maybe I'll take it and use it. But unless this is going to be my bread-and-butter work, I'd rather spend my time elsewhere: you can always automate it later if it indeed proves to be a time sink.
The next step (which I would not do) would be to have C-c C-c evaluate the block and add the attribute declarations. You can do that by adding insert-attr-decls-at-results to the org-babel-after-execute-hook variable:
(add-hook 'org-babel-after-execute-hook 'insert-attr-decls-at-results)
The trouble here is that at every evaluation, you'd get one more attribute declaration block added: you really have to rewrite the insertion function to check whether there is an attribute declaration block already and if so, do nothing. That's left as an exercise.
The moral of the story AFAIAC is: you can automate everything, but not everything is worth automating.
I love Sass's indented syntax (as opposed to SCSS, which is whitespace agnostic and uses brackets and semicolons). I think it's much cleaner.
There's one issue I have with it. If I have a really long line, there's no way to split it into multiple lines (obeying the 80 character limit, for example)
Take this example of a really long mixin declaration, first written in SCSS.
#mixin col($cols, $mleft: 0, $mright: 0, $include-margin: false, $border: 0,
$pleft: 0, $pright: 0, $include-padding: true, $extra: 0,
$clear: false, $lead: true, $container: false) {
color: red;
display: block;
}
I'm able to split up one long declaration in to multiple lines. With the indented syntax, I don't think there's a way. I have to put the declaration on one line, which is way less readable.
#mixin col($cols, $mleft: 0, $mright: 0, $include-margin: false, $border: 0, $pleft: 0, $pright: 0, $include-padding: true, $extra: 0, $clear: false, $lead: true, $container: false)
color: red
display: block
Is there some way I don't know of? :(
Multiline is not supported by sass. Reading the doc, there is one exception, when it comes to multiple css selectors like in this example:
.users #userTab,
.posts #postTab
width: 100px
height: 30px
Read the doc here: http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html#multiline_selectors
So, sadly: There is no possibility to get multi-line support for an argument list in sass.
First: do not create mixins with so many arguments. Divide it to many small mixins or insert some similar arguments as arrays (Sass have data maps for it).
Second: you can use temporary variables just for readability of your large code.
For example:
=mixin($argument)
body::before
content: $argument
$v1: 'foo-'
$v2: 'bar-'
$v3: 'baz.'
$var: $v1+$v2+$v3
+mixin($var)
This will get you mixin with all your $v# strings joined to one $var.
body::before {
content: 'foo-bar-baz';
}
If someone knows better way to join many strings into one in indented Sass syntax, I will be happy to know. Because I write complex gradients and inline generated SVG with this.
Why I can't change value of another control in access form in afterupdate function?
Private Sub cNPSrate_AfterUpdate() 'Form_new_opinion_in!
If Not IsNull(cNPSRate) Then
Select Case cNPSRate
Case 1 To 6
cNPSRate.BackColor = RGB(255, 0, 0) And cSegmentNPS.Text = "KRYTYK"
Case 7 To 8
cNPSRate.BackColor = RGB(255, 255, 0) And cSegmentNPS.Text = "NEUTRALNY"
Case 9 To 10
cNPSRate.BackColor = RGB(0, 255, 0) And cSegmentNPS.Text = "PROMOTOR"
End Select
Else
cNPSRate.BackColor = RGB(255, 255, 255) And cSegmentNPS.Text = Null
End If
End Sub
The code works if I remove And cSegmentNPS.Text. Can't I use another control in this function or I make some mistake?
cNPSRate and cSegmentNPS are TEXTBOXes
A text box's .Text property is only available when that text box has focus. At any other time, use its .Value property instead.
I would also put each action on its own line instead of combining them with And on one line.
So I suggest you revise your code to follow this pattern ...
cNPSRate.BackColor = RGB(255, 0, 0)
cSegmentNPS.Value = "KRYTYK"
Hi I have an Switch expression on a textbox to give a percentage:
=Switch(
Sum(Fields!TheoCostPriceValue.Value) = 0 AND
Sum(Fields!VarianceCostPriceValue.Value) = 0, 0,
Sum(Fields!TheoCostPriceValue.Value) = 0 Or
Sum(fields!VarianceCostPriceValue.Value) = 0, 1,
Sum(Fields!VarianceCostPriceValue.Value) > 0 AND Sum(Fields!TheoCostPriceValue.Value) <> 0,
ABS(Sum(Fields!VarianceCostPriceValue.Value) / Sum(Fields!TheoCostPriceValue.Value))
)
Basically if both TheoCostPriceValue and VarianceCostPriceValue are 0 then the result should be 0, if either of them is 0 then it should be 1.
If both of them are not 0 I will check to see if the VarianceCostPriceValue is positive or negative and then do the correct calculation.
My problem is that when I have a TheoCostPriceValue of 0 and a VarianceCostPriceValue of 2.35 the expression returns #Error, rather then 100% (which is what I expect).
I can't see any issues with my switch, however why would it return #Error rather then 100%?
I'm using SQL Reporting service 2008.
After some experimenting, I found that it only returns #Error after adding:
ABS(Sum(Fields!VarianceCostPriceValue.Value) / Sum(Fields!TheoCostPriceValue.Value)),
Before that it works fine, and if I turn this into a value like 0.5 it works correctly.
Okay, this seems to be a bit of a strange one, even though I'm checking to see if TheoCostPriceValue is not 0, it still seems to be passed through somehow.
I updated the Expression to this:
=Switch(
Sum(Fields!TheoCostPriceValue.Value) = 0 AND Sum(Fields!VarianceCostPriceValue.Value) = 0,
0,
Sum(Fields!TheoCostPriceValue.Value) = 0 OR Sum(Fields!VarianceCostPriceValue.Value) = 0,
1,
Sum(Fields!VarianceCostPriceValue.Value) > 0 AND Sum(Fields!TheoCostPriceValue.Value) <> 0,
ABS(Sum(Fields!VarianceCostPriceValue.Value) /
IIF(Sum(Fields!TheoCostPriceValue.Value) = 0,
1,
Sum(Fields!TheoCostPriceValue.Value))))
and it started working.
I don't know why this happens but it seems that making sure the TheoCostPriceValue can't be 0 fixed it.
I maintain a Desktop application using MapXtreme 7.0 and I have
trouble finding much documentation or useful examples (I do have the
pdfs, samples etc that come on the install discs)
Currently I am trying to programmaticly apply an IndividualValueTheme
to a FeatureLayer. I can apply a standard default theme, I can also
show a ModifyIndValueThemeDlg and let the user change the theme.
However what I want to do is apply my own theme to the layer without
user intervention.
The following code attempts to do this but results in the Layer
showing with the default IndividualValueTheme (ie not with my styles)
Any help would be greatly appreciated
void ApplyTheme(FeatureLayer lyr)
{
if (lyr.Modifiers.Contains(HarvOpsTheme) || lyr.Modifiers.Contains(HarvOpsRangedTheme))
return;
HarvOpsTheme = new IndividualValueTheme(lyr, "iOperationType","HarvOpsTheme");
lyr.Modifiers.Append(HarvOpsTheme);
HarvOpsTheme.Bins[0].Style.ApplyStyle(GetHollowAreaStyle(Color.FromArgb(255, 255, 0)));
HarvOpsTheme.Bins[1].Style.ApplyStyle(GetHollowAreaStyle(Color.FromArgb(0, 255, 0)));
HarvOpsTheme.Bins[2].Style.ApplyStyle(GetHollowAreaStyle(Color.FromArgb(128, 128, 0)));
HarvOpsTheme.Bins[3].Style.ApplyStyle(GetHollowAreaStyle(Color.FromArgb(192, 128, 0)));
HarvOpsTheme.Bins[4].Style.ApplyStyle(GetHollowAreaStyle(Color.FromArgb(0, 128, 0)));
HarvOpsTheme.Bins[5].Style.ApplyStyle(GetHollowAreaStyle(Color.FromArgb(0, 205, 128)));
HarvOpsTheme.Bins[6].Style.ApplyStyle(GetHollowAreaStyle(Color.FromArgb(255, 0, 0)));
HarvOpsTheme.Apply(HarvOpsTheme);
HarvOpsTheme.RecomputeStyles();
lyr.Invalidate();
}
AreaStyle GetHollowAreaStyle(Color color)
{
return new AreaStyle
{
Interior = StockStyles.HollowFillStyle(),
Border = new SimpleLineStyle(new LineWidth(1,LineWidthUnit.Pixel), 1, color)
};
}
For Individual Theme only,recomputing styles causes to regenerate the first theming result.After user changes styles by [Bins] you do not need to recompute them again.
In short, simply remove the line and let the magic happen
HarvOpsTheme.RecomputeStyles();
Best Regards