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

Jump to bottom

Redesign Add Graph Button #69

Open
5 tasks
IshaGupta18 opened this issue Jul 22, 2019 · 15 comments · May be fixed by #94
Open
5 tasks

Redesign Add Graph Button #69

IshaGupta18 opened this issue Jul 22, 2019 · 15 comments · May be fixed by #94
Labels
CSS first-timers-only gci-candidate good first issue Good for newcomers HTML

Comments

@IshaGupta18
Copy link
Collaborator

IshaGupta18 commented Jul 22, 2019 •
edited

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.
image

📋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
Copy link

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

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Jul 22, 2019 via email

@VarsPhilos VarsPhilos mentioned this issue Jul 22, 2019
Closed
@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Jul 26, 2019 via email

@amnoweb
Copy link

amnoweb commented Aug 2, 2019

Do you still need help with this?

@sisohs
Copy link

sisohs commented Oct 4, 2019

Is help still required?

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Oct 4, 2019 via email

@laurenelizamax
Copy link

Hi, is this still open?

@amreshk005
Copy link

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

@sivietz
Copy link

sivietz commented Oct 19, 2019

Hello, is this issue still open?

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Oct 20, 2019 via email

@HarryKayNeezy
Copy link

hey is this issue still open? can i work on this?

@IshaGupta18
Copy link
Collaborator Author

IshaGupta18 commented Oct 24, 2019 via email

@mlvnbrj
Copy link

mlvnbrj commented Oct 25, 2019

Hello @IshaGupta18, is this issue still open? May I work for this one?

@debck
Copy link
Member

debck commented Oct 26, 2019

Yes @milbeeen , there is no active PR for this. So you can start working.
Thanks

@kaushikdivyansh kaushikdivyansh linked a pull request Oct 31, 2019 that will close this issue
Open
4 tasks
@itsgurmannatsohal
Copy link

Is this issue open? Can I work on it?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS first-timers-only gci-candidate good first issue Good for newcomers HTML
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Redesigned addGraph, createSpreadSheet & codapExport button
Redesign Add Graph Button