Redesign Add Graph Button

[IshaGupta18]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

Problem

The current Add Graph button is a simple bootstrap primary button.

📋Solution

<button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button>

Change the above line in

simple-data-grapher/src/View.js

Line 347 in fa222a4

this.element.innerHTML = '<div class="body_container"><div class="main_heading_container"><h2 class="main_heading"> Simple Data Grapher</h2><p class="sub_heading">Plot and Export Graphs with CSV data</p></div><div class="heading_container"><ul class="headings"><li class="item-1">Upload CSV Data</li><li class="item-2">Select Columns & Graph Type</li><li class="item-3">Plotted Graph & Export Options</li></ul></div><div id=' + this.carousalId + ' class="carousel ' + this.carousalClass + ' slide" data-ride="carousel"><div class="indicators"><ol class="carousel-indicators"> <li data-target="#' + this.carousalId + '" data-slide-to="0" class="active" id="up"></li> <li data-target="#' + this.carousalId + '" data-slide-to="1"></li> <li data-target="#' + this.carousalId + '" data-slide-to="2"></li></ol></div><div class="carousel-inner"><div class="carousel-item active"><div class="main_container"><div class="container_drag_drop"><span class="btn btn-outline-primary btn-file input_box"><p class="drag_drop_heading" id=' + this.dragDropHeadingId + '> <u> Choose a csv file </u> or drag & drop it here </p><input type="file" class="csv_file" id=' + this.elementId + "_csv_file" + ' accept=".csv"></span></div><h6 class="or"><span>OR</span></h6><div class="container_remote_link"><input type="text" class="remote_file text_field" placeholder="url of remote file" id=' + this.elementId + "_remote_file" + ' ></div><h6 class="or"><span>OR</span></h6><div class="container_csv_string"><textarea class="csv_string text_field" id=' + this.elementId + "_csv_string" + ' placeholder="Paste a CSV string here" ></textarea></div><h6 class="or"><span>OR</span></h6><div class="container_google_sheet"><input type="text" class="google_sheet text_field" id=' + this.elementId + "_google_sheet" + ' placeholder="Link of published Google Sheet" ></div><div class="upload_button"><button type="button" class="btn btn-primary" id=' + this.uploadButtonId + ' >Upload CSV</button></div></div></div><div class="carousel-item tables"><div class="button_container"><div><input type="checkbox" name=' + this.xyToggleName + ' checked data-toggle="toggle" class="xytoggle" data-width="150" data-onstyle="success" data-offstyle="warning" data-height="40"></div><div class="plot_button"><button type="button" class="btn btn-primary" id=' + this.plotGraphId + ' >Plot Graph</button></div></div><div class="table_container"><div id=' + this.tableXParentId + ' ><table id=' + this.tableXId + ' class="table"></table></div><div id=' + this.tableYParentId + ' class="hidden"><table id=' + this.tableYId + ' class="table"></table></div><div><table id=' + this.graphMenuId + ' class="table table-dark"></table></div></div></div><div class="carousel-item graph"><div class="feature_buttons"><button type="button" class="btn btn-primary" id=' + this.addGraphButtonId + '> Add Graph</button><button type="button" class="btn btn-success" id=' + this.createSpreadsheetButtonId + '> Create Spreadsheet<i class="fa fa-plus" aria-hidden="true"></i></button><button type="button" class="btn btn-success" id=' + this.gsheetId + '> Export as Google </button><div class="g-signin2" data-onsuccess=' + this.onSignIn + '></div></div><div id=' + this.canvasContinerId + ' ></div></div></div></div></div>';

By adding some styling, probably a fa fa-icon or some other color!

• 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

• 📝 Update

• 💾 Commit your changes

• 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• 🏁 Done Ask in comments for a review :)

🤔❓ Questions?

Leave a comment below!

Is someone else already working on this?

We encourage you to link to this issue by mentioning the issue # in your pull request, so we can see if someone's already started on it. If someone seem stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

[VarsPhilos]

first-timer here, I would like to fix this issue.

[IshaGupta18]

Go right ahead! Do let us know if you face any issues at all!

…

On Tue, Jul 23, 2019, 1:28 AM Vars ***@***.***> wrote: first-timer here, I would like to fix this issue. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#69?email_source=notifications&email_token=AJXHQZYR4QYJJHQKY2HHPZLQAYGPLA5CNFSM4IFYN3HKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD2Q7R3I#issuecomment-513931501>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJXHQZ7YLMRDXELODQDKIT3QAYGPLANCNFSM4IFYN3HA> .

[IshaGupta18]

I think he is, let's wait for him to respond!

…

On Fri, Jul 26, 2019, 10:23 AM Sreekanth Manda ***@***.***> wrote: @VarsPhilos <https://github.com/VarsPhilos> are you still doing this? if not I would like to work. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#69?email_source=notifications&email_token=AJXHQZ6Q247O57MUVEEATPTQBJ7NNA5CNFSM4IFYN3HKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD23PVSI#issuecomment-515308233>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJXHQZ3VLJ3UAZYBEVXEJW3QBJ7NNANCNFSM4IFYN3HA> .

[amnoweb]

Do you still need help with this?

[sisohs]

Is help still required?

[IshaGupta18]

Yes, would appreciate your help! Give it a shot!

…

On Fri, Oct 4, 2019, 1:57 PM S!$0 ***@***.***> wrote: Is help still required? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#69?email_source=notifications&email_token=AJXHQZ3E2LAMYLRIOLQLZ4LQM347FA5CNFSM4IFYN3HKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAK5EHQ#issuecomment-538300958>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJXHQZZOXZNR6XJL2PM7NU3QM347FANCNFSM4IFYN3HA> .

[laurenelizamax]

Hi, is this still open?

[amreshk005]

@IshaGupta18 is it still open if yes can I can take it?

[sivietz]

Hello, is this issue still open?

[IshaGupta18]

Feel free to brainstorm!

…

On Sat, Oct 19, 2019, 2:41 PM sivietz ***@***.***> wrote: Hello, is this issue still open? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#69?email_source=notifications&email_token=AJXHQZZHK6BCJBDAGLEJVW3QPLFM7A5CNFSM4IFYN3HKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBXJNNY#issuecomment-544118455>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJXHQZ3CKJDC6AMLHFH3NL3QPLFM7ANCNFSM4IFYN3HA> .