I need to change the background of the toolbox
I tried to change in (it doesn`t work)
<style>
#blockly {
position: fixed;
}
#blocklyMask {
background-color: #f0f8ff;
}
</style>
In addition I need to change the border colors of blocks. Tried to play with stroke parameters with no progress
Blockly.defineBlocksWithJsonArray([{
"type": "ball_number",
"lastDummyAlign0": "CENTRE",
"message0": "ball_number%1",
"strokeColour": "#00ff00",
"strokeWidth": "5",
"args0": [{
"type": "field_number",
"name": "NUMBER",
"value": 0,
"min": 1,
"max": 100
}],
"previousStatement": "ball_attribute",
"nextStatement": "ball_attribute",
"colour": "#48d1cc",
"tooltip": "Type the ball number. In range [1...100]",
"helpUrl": ""
},
I found this https://groups.google.com/forum/#!topic/blockly/CvcHpS5v9bA
but it is for ios
use the following css
div#blocklyDiv .blocklyToolboxDiv {
background: #c2c2ff;
}
Related
I am trying to develope a simple messagaging extension app for Microsoft Teams. With the use of Task Modules I can load a simple Adative Card. Works as designed. The only problem I have with it, is that my Adaptive Card has a color issue withing Microsoft Teams in Dark Mode.
Take a look at the image below. 1 shows a very simple Adaptive Card designed via https://adaptivecards.io/designer/ (preview mode). 2 the very same Adaptive Card but now an actual snippet from Microsoft Teams. As you can see the card below has some color issues which makes the input hard to see.
Here is the code I've used:
public async handleTeamsMessagingExtensionFetchTask(
context: TurnContext,
action: any
): Promise<any> {
const adaptiveCard = CardFactory.adaptiveCard({
"type": "AdaptiveCard",
"body": [
{
"type": "TextBlock",
"size": "Medium",
"weight": "Bolder",
"text": "${title}"
},
{
"type": "Input.Text",
"placeholder": "Placeholder text"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Submit"
}
],
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.3"
});
return {
task: {
type: 'continue',
value: {
card: adaptiveCard,
height: 535,
title: '${title}',
url: null,
width: 500
}
}
};
}
There's not much that can be done about the input box itself in this case, but maybe try changing the colour of the label above it, something like this (I've changed some of your property names as well, as they were invalid case - things like "medium" instead of "Medium":
"size": "medium",
"weight": "bolder",
"text": "${title}",
"color": "good"
Color allows the following values:
"default"
"dark"
"light"
"accent"
"good"
"warning"
"attention"
If you nest your Text input into a Container, you are able change the Container's style to provide a coloured background upon which the Text input sits.
It's not necessarily right for your use case, but it could be a workaround of interest
Container Style colour options
{
"type": "Container",
"style": "emphasis",
"bleed": true,
"items": [
{
"type": "TextBlock",
"text": "Request New Ticket",
"wrap": true,
"fontType": "Default",
"style": "heading",
"size": "Large",
"color": "Good",
"weight": "Bolder",
"horizontalAlignment": "Center"
}
]
}
In documentation of VS Code Extensions, it is mentioned that you can define your own color: https://code.visualstudio.com/api/references/contribution-points#contributes.colors
How can I use this color in the Color Theme I create?
For example, I have the following in package.json
"contributes": {
"themes": [
{
"label": "My Color Theme",
"uiTheme": "vs-dark",
"path": "./themes/my-color-theme.json"
}
],
"colors": [
{
"id": "color.gold",
"description": "Gold",
"defaults": {
"dark": "#FFB71B",
"light": "#FFB71B",
"highContrast": "#FFB71B"
}
}
]
}
And the following in my-color-theme.json (I would like to use "gold" for one of the item but it does not work):
{
"name": "My Color Theme",
"type": "dark",
"colors": {
"editor.background": "#000000",
"editor.foreground": "#FFFFFF",
"sideBarTitle.foreground": "color.gold",
},
...
}
Thanks
Color entries can only contain color values of the form #RGB, #RGBA, #RRGGBB or #RRGGBBAA, nothing else. No other color format (hsl etc.) or named color is supported. Hence "sideBarTitle.foreground": "color.gold" is an invalid entry.
I have a bar chart with 3 kinds of bar: FOO, BAR and BAZ.
Horizontal axis are quarters.
BAR and BAZ use the same series. BAR (blue) becoming BAZ (orange) after Q1-17.
"rules": [{
"rule": "%kv > 1",
"background-color":"orange"
}]
How can I add BAZ (orange) to the legend?
zingchart.THEME = "classic";
var myConfig = {
"graphset": [{
"type": "bar",
"background-color": "white",
"plotarea": {
"margin": "80 60 100 60",
"y": "125px"
},
"legend": {
"layout": "x3",
"y": "13%",
"x": "34.5%",
"overflow": "page",
"toggle-action": "remove",
},
"scale-x": {
"labels": [
"Q4-16",
"Q1-17",
"Q2-17",
"Q3-17"
],
"markers": [{
"value-range": true,
"range": [1.5],
"line-color": "red",
"line-width": 1,
"line-style": "solid",
"type": "line"
}]
},
"series": [{
"values": [
37.47,
57.59,
45.65,
37.43
],
"background-color": "#8993c7",
"text": "FOO"
},
{
"values": [
13.4,
14.11,
14.89,
16.86
],
"background-color": "blue",
"text": "BAR",
"rules": [{
"rule": "%kv > 1",
"background-color": "orange"
}]
}
]
}]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: 500,
width: 725
});
.zc-ref {
display: none;
}
<html>
<head>
<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
<script>
zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "ee6b7db5b51705a13dc2339db3edaf6d"];
</script>
</head>
<body>
<div id='myChart'><a class="zc-ref" href="https://www.zingchart.com/">Charts by ZingChart</a></div>
</body>
</html>
So one way to do it is split up your data. The easiest way to explain this is to make another series for "BAZ" and in the first two quarters have null values.
demo here
The main reason for doing it this way is maintaining the built in legend toggling functionality. This way when you click it wont turn off the whole series (blue and orange bars.) Which I assume is the intended functionality.
If you don't mind turning off blue and orange bars at the same time you can do the following to add another legend item. Add the text and color inside the series object. Essentially, create a blank series object.
...{
"text":"BAZ",
"background-color":"orange"
}...
non interactive legend demo here
If you are looking for something in between these two demos it will take some custom Javascript using the ZingChart API.
I use ZingCharts for my dashboard charts and I am stucked on this problem. I made a codepen to show my problem. I got array of strings which represent average respond time for some task in hours and I cant figure out why my chart never show 1st string value of array as you can see on codepen.
Here i also post my angular function for this chart
//bar chart with average task time respond
$scope.avgRespondTaskTime = {
gui: {
contextMenu: {
empty: true,
}
},
type: 'bar',
legend: {
//width: "100%",
layout: "center",
position: "50%",
margin: "0px 0px 0px 0px",
borderColor: "transparent",
backgroundColor: "transparent",
marker: {
borderRadius: 10,
borderColor: "transparent"
}
},
tooltip: {
text: "%v hours"
},
"scale-x": {
"label": {
"text": "Project name",
},
"labels": projectNames
},
"scale-y": {
"label": {
"text": "Average Time",
},
},
series: [
{
text: "Completed in Time",
values: $scope.avg_respondTime,
backgroundColor: "#00a65a"
},
]
};
https://codepen.io/spsrulez/pen/ygEvNg
So I solved my problem with using moment.js using this function
moment.duration("your string represent time").asHours()
which I store into array $scope.avg_respondTime
Hope it helps someone in future.
Looking for a script or action for changing font face for a particular word or text in a paragraph.
I have multiple .psd files (80+) where I need to change font for a specific text say "Hello" from Arial to Tahoma and also make it bold.
Really appreciate a help!
You could try "jam" framework. There is class for manipulating with text. http://www.tonton-pixel.com/JSON%20Action%20Manager/jsDoc/symbols/jamText.html
You are looking for textStyleRange.
var text = "Bonjour !";
var layerText =
{
"layerText":
{
"textKey": text,
"textClickPoint": { "horizontal": 50, "vertical": 95 },
"antiAlias": "antiAliasCrisp",
"textShape":
[
{ "textType": "point", "orientation": "horizontal" }
],
"textStyleRange":
[
{
"from": 0,
"to": text.length,
"textStyle":
{
"fontPostScriptName": "Myriad-Italic",
"size": 288,
"color": { "red": 144, "green": 0, "blue": 255 }
}
}
],
"paragraphStyleRange":
[
{
"from": 0,
"to": text.length,
"paragraphStyle": { "alignment": "center" }
}
]
},
"typeUnit": "pixelsUnit"
};
jamText.setLayerText (layerText);
You need:
- create loop which checks all layers
- read one text layer
- find on which character index substring starts, where is end
- apply jamText.setLayerText
- read next layer
It goes also without framework. The structure is analogous. The code will be uglier.