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

Added Welcome Message when rules are empty #31

Merged
merged 5 commits into from
Sep 17, 2024
Merged

Added Welcome Message when rules are empty #31

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5683c21
Added Welcome Message when rules are empty
nikitha1999 Sep 5, 2024
a23a159
Modified Welcome Page
nikitha1999 Sep 17, 2024
03b211b
Addressed Comments
nikitha1999 Sep 17, 2024
94602e7
Re-Added Tags
nikitha1999 Sep 17, 2024
0725c30
Fixing ES Lint issues
nikitha1999 Sep 17, 2024
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
3 changes: 2 additions & 1 deletion .env
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
BROWSER=none
GENERATE_SOURCEMAP=false
PUBLIC_URL=.
SKIP_PREFLIGHT_CHECK=true
SKIP_PREFLIGHT_CHECK=true
DISABLE_ESLINT_PLUGIN=true
SaharMehrpour marked this conversation as resolved.
Show resolved Hide resolved
Binary file added public/rules.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
95 changes: 60 additions & 35 deletions src/ui/tableOfContents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,42 +15,67 @@ class TableOfContents extends Component {
render() {
return (
<div>
<div className={"well well-sm"}>
<h4>Tags</h4>
</div>
<ul className={"list-inline"} id={"tags_list"}>
{this.props.tags.map((tag, i) =>
(<li key={i}
onClick={() =>
window.location.hash = `#/${hashConst.tag}/${tag.ID}`
}>{tag.tagName}</li>),
)}
</ul>

<div className={"well well-sm"}>
<h4>Rules</h4>
</div>
<div className={"ist-inline"}>
<table>
<tbody>
{this.props.rules.map((rule, i) =>
<tr key={i}>
<td className={"list-group-item"}>{rule.title}</td>
</tr>,
)}
</tbody>
</table>
<div style={{padding: "10px 0 10px 0", clear: "both"}}>
<Button style={{padding: "0 5px"}}
onClick={() => {
window.location.hash = `#/${hashConst.rules}`;
this.props.onAddNewRule();
}}>
<MdPlaylistAdd className={"react-icons"} size={35}/>
Add a New Rule
</Button>
{this.props.rules.length > 0 ? (
<>
SaharMehrpour marked this conversation as resolved.
Show resolved Hide resolved
<div className={"well well-sm"}>
<h4>Rules</h4>
</div>
<div className={"ist-inline"}>
<table>
<tbody>
{this.props.rules.map((rule, i) => (
<tr key={i}>
<td className={"list-group-item"}>{rule.title}</td>
</tr>
))}
</tbody>
</table>
</div>
</>
) : (
<div>
<p>"Welcome to the Rules Dashboard! This tool helps you manage design rules for your projects."</p>
SaharMehrpour marked this conversation as resolved.
Show resolved Hide resolved
<p>Explore how easy it is to create, view, and manage design rules with the intuitive interface.</p>
<br></br>
<div style={{marginTop: "20px"}}>
<h4>How Active Documentation Works ?</h4>
<p>
ActiveDocumentation seamlessly integrates into your IDE and codebase, automatically monitoring and enforcing design rules.
</p>
<h5>Components</h5>
SaharMehrpour marked this conversation as resolved.
Show resolved Hide resolved
<ul>
<li><b>IDE Plugin:</b> Install plugin for your editor and click Mine rules to handles data transfer between the app and your development environment.</li>
<div style={{marginTop: "20px", color: "red"}}>
<p><b>Have not installed Plugin yet?</b></p>
<p>Please check out the <a href={"https://github.com/ourcodeinc/ActiveDocumentation-webapp/wiki/User-Manual"}>installation process here</a> to install the plugin and get started.</p>
</div>
<li><b>Web App:</b> The core interface where rules are defined, violations are displayed, and design decisions are documented.</li>
</ul>
<p>
To get started, add a new rule by clicking the button above. You can also explore the detailed explanation of how rules work by visiting the <a href={`#/${hashConst.learnDesignRules}`}>Learn Design Rules</a> section.
</p>
</div>
<div>
<div>
<img src={`${process.env.PUBLIC_URL}/rules.png`} alt="Rules Dashboard Screenshot" style={{width: "450px", height: "400px", borderRadius: "10px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" }}/>
</div>
<br></br>
<p>Start by creating a rule to begin!</p>
<div className={"ist-inline"}>
<div style={{padding: "10px 0 10px 0", clear: "both"}}>
<Button style={{padding: "0 5px"}}
onClick={() => {
window.location.hash = `#/${hashConst.rules}`;
this.props.onAddNewRule();
}}>
<MdPlaylistAdd className={"react-icons"} size={35}/>
Add a New Rule
</Button>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
}
Expand Down