Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improvement in the demo example #4

Closed
wants to merge 3 commits into from
Closed

Improvement in the demo example #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f710fb2
Improve demo example using longer texts.
AyanGhatak Jan 3, 2017
460c5f9
Improve demo example using longer texts.
AyanGhatak Jan 3, 2017
6ac3066
Merge branch 'feature/improve-demo-example' into develop
AyanGhatak Jan 3, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions example/src/components/html-text-live-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ var React = require('react');
class HTMLTextLiveDemo extends React.Component {
constructor(props) {
super(props);

this.state = {
text: 'a quick brown fox'
text: 'A quick brown fox. A quick brown fox. A quick brown fox. A quick brown fox.A quick brown fox. A quick brown fox. A quick brown fox.'
};
}

Expand Down
4 changes: 2 additions & 2 deletions example/src/components/svg-text-live-demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ var React = require('react'),
class SVGTextLiveDemo extends React.Component {
constructor(props) {
super(props);

this.state = {
text: 'a quick brown fox',
text: 'A quick brown fox. A quick brown fox. A quick brown fox. A quick brown fox.A quick brown fox. A quick brown fox. A quick brown fox.',
ellipsis: true,
wrap: true
};
Expand Down
7 changes: 7 additions & 0 deletions example/src/example.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,13 @@ label {
font-weight: 500;
}

.demo-instruction {
background: rgba(249, 167, 26, 0.46);
border: 1px solid #f1b650;
padding: 7px;
border-radius: 2px;
}

.fc-demo-pane-text {
font-size: 12px;
}
Expand Down
38 changes: 19 additions & 19 deletions example/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,21 +15,21 @@ <h2>
<a href="https://github.com/fusioncharts/fusioncharts-smartlabel">View Documentation on GitHub</a>
<a href="http://www.fusioncharts.com/" style="float: right">Checkout FusionCharts</a>
</h2>

<div class='fc-sl-demo-container'>
<p class="demo-heading">
What happens if a text is rendered in a <code>div</code> which has specific height and width.
</p>
<div id="html-auto-text-ops-demo-1" style="float: left; width: 30%"></div>
<div class="demo-desc">
<p>
This example uses basic html elements to render the concept.
<p>
This example uses basic html elements to render the concept.
</p>
<p>
<p>
What happens when the text is made long so that it can't be contained in the <code>div</code> ? DOM automatically breaks it and position the remaining part in the following line.
</p>
<p>
Change the text in the textbox to see the effect.
<p class="demo-instruction">
Change the text in the textbox to see the effect.
</p>
</div>
</div>
Expand All @@ -40,14 +40,14 @@ <h2>
</p>
<div id="svg-def-text-ops-demo-1" style="float: left; width: 30%"></div>
<div class="demo-desc">
<p>
This example uses svg elements to render the concept.
<p>
This example uses svg elements to render the concept.
</p>
<p>
<p>
What happens when the text is made long so that it can't be contained in the <code>svg bound box</code> ? Unlike the text contained in the div, <b>it does not get wrapped automatically</b>. This is the sole reason for label overlapping in a visualization library
</p>
<p>
Change the text in the textbox to see the effect.
<p class="demo-instruction">
Change the text in the textbox to see the effect.
</p>
</div>
</div>
Expand All @@ -58,22 +58,22 @@ <h2>
</p>
<div id="svg-sl-def-text-ops-demo-1" style="float: left; width: 30%"></div>
<div class="demo-desc">
<p>
This example uses svg elements to render the concept.
<p>
This example uses svg elements to render the concept.
</p>
<p>
<p>
With <code>SmartLabel</code> a text cant be wrapped if a bound box is defined. More over if a bound box is completely exhausted the text can be truncated with or without ellipsis.
</p>
<p>
Change the text in the textbox to see the effect.
<p class="demo-instruction">
Change the text in the textbox to see the effect.
</p>
</div>
</div>

<div class="hint">

</div>

<div class="footer">
Copyright &copy; 2016 FusionCharts Technologies &lt;support@fusioncharts.com&gt;.
</div>
Expand Down