From a functional point of view, I display four buttons that can be selected or not, independently.
I tried several solutions with simple buttons, or using _doClick and a function to change the properties of the rectangle. I also tried a simple node.
I opted for checkBoxes that allow the buttons to be independent.
I used the rectangle icon but I can't make it fit the dimensions of the button. It always seems to be square.
I would also like to center the text in the middle of the button.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>LLDynp</title>
<meta name="description" content="Nodes with varying lists of ports on each of four sides." />
<!-- Copyright 1998-2017 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://unpkg.com/gojs/release/go-debug.js"></script>
<body onload="init()">
<script id="code">
var myFont = "16px sans-serif";
var myFontSmall = "14px sans-serif";
var myFontBold = "bold 16px sans-serif";
var colors = {
'blueUnitBorder': "rgb(65, 116, 217",
'blueUnit': "rgb(0, 0, 200)",
'red': '#ff0000',
'green': '#52ce60',
'blue': '#6ea5f8',
'black': 'rgb(0, 0, 0)',
'lightred': '#fd8852',
'lightblue': '#afd4fe',
'lightgreen': '#b9e986',
'pink': '#faadc1',
'purple': '#d689ff',
'orange': '#fdb400'
};
var flowTypeArray=
[{key: 0, text: "Ask for", selected: false, color: colors.red},
{key: 1, text: "Deliver", selected: false, color: colors.black},
{key: 2, text: "Ask for $", selected: false, color: colors.green},
{key: 3, text: "$", selected: false, color: colors.blue}
];
var nextNeedNumber=0;
var referenceNeedRow=null;
var referenceNeedName=null;
var maxNeeds=5;
var emptyNeedName = "new need name?";
function init() {
var $ = go.GraphObject.make; //for conciseness in defining node templates
myBannerODIP =
$(go.Diagram, "myBannerODIPDiv",
{ layout: $(go.GridLayout, { wrappingColumn: 4, alignment: go.GridLayout.Position })});
myBannerODIP.nodeTemplate =
$(go.Node, "Auto", { name: "theNode"},
$("CheckBox", "checked", { name: "theCheckBox"},
{ "Button.width": 85, "Button.height": 50,
"_buttonFillOver" : "pink", "ButtonBorder.strokeWidth": 2,
"ButtonIcon.figure": "Rectangle", "ButtonIcon.fill": "yellow",
"ButtonIcon.strokeWidth": 4, "ButtonIcon.width": 55, "ButtonIcon.height": 40,
},
new go.Binding("ButtonIcon.stroke", "key", function(s) { return flowTypeArray[s].color; }).ofObject(),// OK
$(go.TextBlock, { name: "theTextBlock"}, {textAlign: "center", margin: new go.Margin (0, 0, 0, -75)},
new go.Binding("text", "key", function(s) { return flowTypeArray[s].text; }).ofObject(),// OK
new go.Binding("stroke", "key", function(s) { return flowTypeArray[s].color; }),// OK
new go.Binding("font", "checked", function(s) { return s ? myFontBold : myFont; })// OK no ofObject
),
)
);// end horizontal ODIP panel
myBannerODIP.model.nodeDataArray
ODIPNodesArray = [
{key: 0, "checked": false},// checked OK; isSelected bad; choice à l'envers!
{key: 1, "checked": true},
{key: 2 },
{key: 3 },
];
ODIPLinksArray = [];
myBannerODIP.model = new go.GraphLinksModel(ODIPNodesArray, ODIPLinksArray);
};
</script>
</head>
<body onload="init()">
<div id="container" style= "display: grid; grid-template-columns: 1fr 5fr; margin:0 ;
height: 800px; width:1080px; font-size:0; position: relative; ">
<div id="For banner & placeholder save..." style:"grid-column-start: 1;">
<div id="myBannerODIPDiv" style="display: inline-block; width: 400px; height:70px; background: whitesmoke; margin-right: 6px; border: solid 0px black;">
</div>
</div>
</div>
</body>
</html>
I'm unclear what it is that you want. Have you seen all of the customizations at https://gojs.net/latest/extensions/Checkboxes.html ? You can change the properties of both the "ButtonBorder" and the "ButtonIcon". For exampke:
$("CheckBox", "choice6",
{
"Button.width": 20, "Button.height": 20,
"ButtonBorder.figure": "Circle", "ButtonBorder.stroke": "blue",
"ButtonIcon.figure": "Circle", "ButtonIcon.fill": "blue",
"ButtonIcon.strokeWidth": 0, "ButtonIcon.desiredSize": new go.Size(10, 10)
},
$(go.TextBlock, "blue circle")
),
Related
The code below successfully display users div messages at the bottom of the page when clicked Users button serially (Eg User1, User2, user3 etc.)
Here is my issue: When I click the Users Button randomly (Eg. User1, user6, user5, user12 etc.) The Div message box gets scattered all over the page as can be seen in the screenshot below.
I do not know if the issue is from css or react components.
Please how do I get each of the users message DIV to be displayed correctly at the bottom whether the users button is clicked serially or randomly
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="build/browser.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mainArea {
position: fixed;
width: 80%;
bottom: 0%
}
.contact_box {
position: relative;
bottom: -5px;
width: 250px;
background: black;
color: red;
border-radius: 5px 5px 0px 0px;
bottom: 0px;
display: inline-block;
}
</style>
<div id="app"></div>
<script type="text/babel">
class Application extends React.Component {
constructor(props) {
super(props);
this.state = {
arr: [
{ id: 1, name: "user1"},
{ id: 2, name: "user2"},
{ id: 3, name: "user3"},
{ id: 4, name: "user4"},
{ id: 5, name: "user5"},
{ id: 6, name: "user6"},
{ id: 7, name: "user7"},
{ id: 8, name: "user8"},
{ id: 9, name: "user9"},
{ id: 10, name: "user10"},
{ id: 11, name: "user11"},
{ id: 12, name: "user12"},
{ id: 13, name: "user13"},
{ id: 14, name: "user14"},
{ id: 15, name: "user15"}
],
popStatus: false,
};
this.popIt = this.popIt.bind(this);
}
popIt(id) {
this.state.arr[id].popStatus = true;
this.setState({
popStatus: true
});
}
render() {
return (
<div>
<h3>List of users Records</h3>
<div class="sidebar">
<ul>
{this.state.arr.map((obj, i) => (
<li key={i}>
{obj.name} - {obj.name}
<button
type="button"
onClick={() => { this.popIt(i); }}
className=""
>
{obj.name}
</button>
</li>
))}
</ul>
</div>
<div className="mainArea">
{this.state.arr.map((obj, i) => (
<div key={i} className="contact_box" >
{obj.popStatus === true && <div className="">
<b>Username:</b> {obj.name}<br />
Message .........<br />
Message .........<br />
Message .........<br />
Message .........<br />
Message .........<br />
Message .........<br />
</div>
}
</div>
))}
</div>
</div>
);
}
}
ReactDOM.render(<Application />, document.getElementById('app'));
</script>
</body>
</html>
Your issue is partly the result of your CSS and partly the result of your conditional rendering logic in your JSX.
CSS
You have a styled wrapper that displays for every user regardless of whether popStatus is true. That styled wrapper has a fixed width so it takes up space on the page whether or not anything actually renders inside of it.
More specifically, you’re rendering this div for every user:
<div key={i} className="contact_box" >
Take a look at where this line sits in your JSX.
The column gaps you see between user info boxes are these div being rendered. You can use whatever CSS you want just keep in mind if you include an element wrapping your conditional check for popStatus in your render then it will show for each user.
The most straightforward solution is to just remove it or move it down inside the render after your conditional check.
Conditional Rendering
When you map over users you can perform your conditional check for popStatus first.
This way, you will only render something when the condition is met.
Also better to set the key to be the user id to uniquely identify the user rather than use an index.
NOTE: You should avoid mutating state directly. This line: this.state.arr[id].popStatus = true; should be moved inside setState and you should return a new copy when performing this update.
NOTE: It's unclear what the popStatus prop on the top level object in your state is doing as it seems irrelevant to your problem. I commented it out from the demo.
The demo below should get you going in the right direction I think.
Example/Demo (View at the link below)
https://codesandbox.io/s/user-list-pop-example-vuyx59
styles.css
.App {
font-family: sans-serif;
text-align: center;
}
.main-area {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.contact-box {
background: black;
color: red;
border-radius: 5px 5px 0px 0px;
padding: 10px;
}
App.js
import "./styles.css";
import { useState } from "react";
const initialState = {
users: [
{ id: 1, name: "user1", popStatus: false },
{ id: 2, name: "user2", popStatus: false },
{ id: 3, name: "user3", popStatus: false },
{ id: 4, name: "user4", popStatus: false },
{ id: 5, name: "user5", popStatus: false },
{ id: 6, name: "user6", popStatus: false },
{ id: 7, name: "user7", popStatus: false },
{ id: 8, name: "user8", popStatus: false },
{ id: 9, name: "user9", popStatus: false },
{ id: 10, name: "user10", popStatus: false },
{ id: 11, name: "user11", popStatus: false },
{ id: 12, name: "user12", popStatus: false },
{ id: 13, name: "user13", popStatus: false },
{ id: 14, name: "user14", popStatus: false },
{ id: 15, name: "user15", popStatus: false }
]
// what was this for?
// popStatus: false
};
export default function App() {
const [state, setState] = useState(initialState);
function popIt(id) {
setState((prev) => {
return {
...prev,
users: prev.users.map((user) =>
user.id === id ? { ...user, popStatus: true } : user
)
};
});
}
return (
<div className="App">
<h3>List of users Records</h3>
<ul style={{ listStyle: "none" }}>
{state.users.map((user) => (
<li key={user.id}>
{user.name}{" "}
<button
type="button"
onClick={() => {
popIt(user.id);
}}
>
{user.name}
</button>
</li>
))}
</ul>
<div className="main-area">
{state.users.map(
(user) =>
user.popStatus && (
<div key={user.id} className="contact-box">
<b>Username:</b>
{user.name}
<br />
Message .........
<br />
Message .........
</div>
)
)}
</div>
</div>
);
}
Screenshot of how user info is displayed in sequence no matter what order users are clicked:
You have an issue with your map function:
{this.state.arr.map((obj, i) => (
<div key={i} className="contact_box" >
{obj.popStatus === true && <div className="">
<b>Username:</b> {obj.name}<br />
First you print contact_box div, and later you check popStatus, and based on that you print content. Because you set CSS for the cotact_box, which is printed always, you have these blank spots.
Just move contact_box div inside if statement, and it should be fine:
{this.state.arr.map((obj, i) => (
{obj.popStatus === true &&
<div key={i} className="contact_box" >
<b>Username:</b> {obj.name}<br />
// rest of the box
</div>
}
)}
In the process, you can rid of this additional div.
Also, I recommend using functional component and hooks, it will be simpler to manage the state, and it is recommended for newer React versions.
I want to use react-quill for my react rich text editor but I couldn't find a way to add a color picker in the toolbar.
I'm also using typescript.
here is my component:
const modules = {
toolbar: [
[{ font: ['', 'times-new-roman', 'arial'] }],
[{ header: [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link'],
['clean']
],
}
function RichTextEditor() {
return <ReactQuill theme="snow" modules={modules} formats={formats} preserveWhitespace />
}
You can use custom toolbar with javascript like this, it might works!
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block'],
[{
'color': ['#F00', '#0F0', '#00F', '#000', '#FFF', 'color-picker']
}]
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
function showColorPicker(value) {
if (value === 'color-picker') {
var picker = document.getElementById('color-picker');
if (!picker) {
picker = document.createElement('input');
picker.id = 'color-picker';
picker.type = 'color';
picker.style.display = 'none';
picker.value = '#FF0000';
document.body.appendChild(picker);
picker.addEventListener('change', function() {
quill.format('color', picker.value);
}, false);
}
picker.click();
} else {
quill.format('color', value);
}
}
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('color', showColorPicker);
#editor-container {
height: 375px;
}
.ql-color .ql-picker-options [data-value=color-picker]:before {
content: 'Pick Color';
}
.ql-color .ql-picker-options [data-value=color-picker] {
background: none !important;
width: 100% !important;
height: 25px !important;
text-align: center;
color: blue;
text-decoration: underline;
}
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet" />
<div id="editor-container">
</div>
This is an example with javascript, you can convert into typescript if you want.
Thank you.
I am creating a list that contains fonts using angular directive
<li ng-repeat='o in options'><button class='btn btn-blue checked-dropdown' style='font-family: {{o.css}}; width: 100%' type='button' ng-click='action($event, o.css)'><i ng-if='o.active' class='fa fa-check'></i>{{o.name}}</button></li>
options: [
{ name: 'Sans-Serif', css: 'Arial, Helvetica, sans-serif' },
{ name: 'Serif', css: "'times new roman', serif" },
{ name: 'Wide', css: "'arial black', sans-serif" },
{ name: 'Narrow', css: "'arial narrow', sans-serif" },
{ name: 'Comic Sans MS', css: "'comic sans ms', sans-serif" },
{ name: 'Courier New', css: "'courier new', monospace" },
{ name: 'Garamond', css: 'garamond, serif' },
{ name: 'Georgia', css: 'georgia, serif' },
{ name: 'Tahoma', css: 'tahoma, sans-serif' },
{ name: 'Trebuchet MS', css: "'trebuchet ms', sans-serif" },
{ name: "Helvetica", css: "'Helvetica Neue', Helvetica, Arial, sans-serif" },
{ name: 'Verdana', css: 'verdana, sans-serif' },
{ name: 'Proxima Nova', css: 'proxima_nova_rgregular' }
]
when I click on button then the full font list is shown with their css applied on it.
It is working fine in Chrome but in IE only the font name is shown in plain text
IE Image Chrome Image
Instead of attaching model value to specific property in style attr, you can make use of ng-style directive & call the function on ng-style as: ng-style = "mystyle($index)"
$scope.mystyle = function(index){
return {
'font-family': $scope.options[index].css,
'width': "100%"
}
}
http://plnkr.co/edit/Ew8VyCWojAiyCqaU55qM?p=preview
I have created one line chart using angular-chartjs. In that when I don't have any data its showing blank graph. I need to show one message "No data to show". Let me know how to do this.
Code:
js code
$scope.linesOption = {
chart: {
type: 'lineChart',
height: 250,
margin: {
top: 20,
right: 20,
bottom: 40,
left: 55
},
reduceXTicks: false,
x: function (d) {
return d.date;
//return d3.time.format()(d.date);
},
y: function (d) {
return d.value;
},
duration: 100,
xAxis: {
axisLabel: 'Date',
ticks: d3.time.days,
tickFormat: function (d) {
return d3.time.format("%A")(new Date(d));
}
},
yAxis: {
axisLabel: 'deliveries',
axisLabelDistance: -10
},
showLegend: false
},
title: {
enable: true,
text: 'No of Delivery',
css: {
'text-align': 'left',
'font-size': '14px',
'margin-left': '20px'
}
}
};
$scope.linesData = [];
$scope.linesLabels = ["Mon", "Tue", "Wed", "Thr", "Fri" , "Sat", "Sun"];
HTML code
<div class="panel panel-ocean" style="margin: 2% 1.5%;">
<div class="panel-heading"><b>Delivery</b></div>
<div class="panel-body">
<canvas id="delivery-chart" class="chart chart-line" chart-data="linesData" chart-labels="linesLabels"
chart-options="lineOptions"
chart-colors="['#BD762A']" width="480" height="250"
chart-dataset-override="datasetOverride">
</canvas>
</div>
</div>
I need a message in the middle of the blank space saying "No data to show."
Thanks,
Sandy
Here's the plunkr:
https://plnkr.co/edit/vWZwfehDNhv6Q3YBZL7m?p=preview
You can set the text 'no data available' by changing the css top & right.
<canvas id="line" ng-show="isDataAvaiable" class="chart chart-line" chart-data="plot.data" chart-labels="plot.labels" chart-legend="true" chart-colors="plot.color" chart-series="plot.series" chart-options="plot.options" chart-click="plot.callback()" height="250"></canvas>
<b class="no-data-available" ng-hide="isDataAvaiable">No Data Available</b>
Here's the css :
.no-data-available {
position: absolute;
top: 49%;
right: 45%;
}
I am using react-chart for rendering line chart in my application. line chart in not showing up. Its creating a canvas inside div tag with id "main1".
lchart.js file:
var React = require('React');
var LineChart = require("react-chart").Line;
var ReactDOM = require('ReactDOM');
var Chart = require('chart.js');
Chart.defaults.global.responsive = true;
var chartData = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
];
var LChart = React.createClass({
render: function() {
return (<LineChart data={chartData} width="600" height="250" redraw/>);
}
});
ReactDOM.render(<LChart />, document.getElementById('main1'));
index.html file :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="main1"></div>
<script src="lchart.js"></script>
</body>
</html>
Assuming you are using react-chartjs V1:
The data you pass into the LineChart component <LineChart ... /> should follow this pattern:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
For more information visit the Chart.js V 1.1.1 documentation Chart.js V1.1.1: Line Chart documentation