Adding commenting functionality to Streak

emgoto · Oct 4, 2019 · 98d4964 · 98d4964
1 parent 6c1636f
commit 98d4964
Show file tree

Hide file tree

Showing 30 changed files with 521 additions and 5,763 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,5 +2,4 @@ Gemfile
 Gemfile.lock
 _site/
 app.js
-node_modules/
-package.json
+node_modules/
diff --git a/README.md b/README.md
@@ -2,5 +2,25 @@
 
 Streak is a Trello Power-up to track your habits!
 
-![Streak example 2](https://habit-tracker-trello.herokuapp.com/img/example-3.png)
-![Streak example 1](https://habit-tracker-trello.herokuapp.com/img/example-1.png) 
+![Streak example](https://emgoto.github.io/streak-test/img/streak-example.png)
+
+## Accessing this Power-Up
+
+This Power-Up's docs folder is published using Github Pages and can be accessed from this URL: https://emgoto.github.io/streak-test/ You'll need to put that link in your Trello Power-ups admin page.
+
+## Testing the power-up locally with Jekyll and ngrok
+
+Github pages uses Jekyll so you'll need to do a few things to test this locally:
+
+```
+gem install github-pages
+jekyll serve
+./ngrok http 4000 #in another terminal window
+```
+[See a full explanation here](https://www.emgoto.com/testing-trello-power-ups-on-github-pages/)
+
+## Pushing your changes
+
+Make sure to run `npm run build` before pushing changes. This will use the settings in `webpack.config.js` and put your js files into the `docs/js` folder.
+
+We use docs instead of public as this is a limitation of the way Github Pages works.
diff --git a/calendar.html → docs/calendar.html b/calendar.html → docs/calendar.html
@@ -30,8 +30,7 @@
 
  </div>
  <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="js/moment.js"></script>
- <script src="js/pikaday.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
  <script src="js/calendar.js"></script>
  </body>
 </html>
diff --git a/datepicker.css → docs/datepicker.css b/datepicker.css → docs/datepicker.css
@@ -19,6 +19,17 @@
  float: right;
  margin-right: 0;
 }
+
+.datepicker-confirm-btns {
+ margin-top: -8px;
+ display: flex;
+ justify-content: flex-end;
+}
+
+#remove-btn {
+ margin-right: 8px;
+}
+
 .pika-single {
  display: block;
  position: relative;
@@ -150,16 +161,15 @@
 }
 .pika-single .is-selected .pika-button {
  color: #fff;
- background: #61BD4F; /* blue 500 */
+ background: #61BD4F;
 }
 .pika-single .is-selected .pika-button:hover {
- background: #7BC86C; /* blue 400 */
+ background: #7BC86C;
 }
 .pika-single .is-disabled .pika-button {
- color: #999;
- cursor: default;
- opacity: .3;
+ color: #fff;
  pointer-events: none;
+ background-color: #61BD4F;
 }
 .pika-single .pika-button:hover {
  background-color: #D6DADC;
@@ -175,12 +185,26 @@
  background-color: #F5F6F7; 
 }
 
-#how-to-use {
- text-align: right;
+.how-to-use {
+ float: right;
  padding-top: 8px;
 }
 
-#how-to-use:hover {
+.how-to-use:hover {
  color: #78909e;
  cursor:pointer;
-}
+}
+
+.commentContainer {
+ display: flex;
+}
+
+.enableButton {
+ margin: 0;
+ margin-left: 8px;
+ height: 33px;
+}
+
+#disabled-form {
+ text-align: center
+}
diff --git a/img/comet.png → docs/img/comet.png b/img/comet.png → docs/img/comet.png
diff --git a/img/example-1.png → docs/img/example-1.png b/img/example-1.png → docs/img/example-1.png
diff --git a/img/example-2.png → docs/img/example-2.png b/img/example-2.png → docs/img/example-2.png
diff --git a/img/example-3.png → docs/img/example-3.png b/img/example-3.png → docs/img/example-3.png
diff --git a/img/fire_icon.png → docs/img/fire_icon.png b/img/fire_icon.png → docs/img/fire_icon.png
diff --git a/img/icon.svg → docs/img/icon.svg b/img/icon.svg → docs/img/icon.svg
diff --git a/docs/img/streak-example.png b/docs/img/streak-example.png
diff --git a/index.html → docs/index.html b/index.html → docs/index.html
@@ -15,9 +15,9 @@
  <body>
  <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="https://p.trellocdn.com/power-up.min.js"></script>
- <script src="js/moment.js"></script>
- <script src="js/moment-timezone-with-data-2012-2022.js"></script>
- <script src="js/client.js"></script>
- <script src="js/util.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data-2012-2022.min.js"></script>
+ <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+ <script src="js/index.js"></script>
  </body>
 </html>
diff --git a/docs/js/calendar.js b/docs/js/calendar.js
diff --git a/docs/js/index.js b/docs/js/index.js
diff --git a/docs/js/settings.js b/docs/js/settings.js
diff --git a/modal.html → docs/modal.html b/modal.html → docs/modal.html
@@ -19,23 +19,27 @@
  <h3>Setting up Streak</h3>
 
  <p>
- To set up Streak, press the <b>Save</b> button on the settings pop-up. 
+ To get started, open a card and press the <b>Enable</b> button on the Streak settings pop-up in the card's side menu. 
  You will need to do this per card that you want a streak on.
  </p>
-
+ 
  <p>
- Streak allows you to track habits that you don't do every day with the <b>Days in week</b> option.</b>
- You can also customise whether your week starts on a Sunday or a Monday.
+ Once you've enabled Streak, you can track your habits using the calendar.
+ If you don't need to do a habit every day, you can change the <b>days a week</b> number. 
+ Setting it to 0 allows you to never break your streak. 
  </p>
 
  <p>
- Your streak will be deleted if you delete the card that it is tracked on, or if you press the <b>Delete</b> button.
- This is an irreversible action.
+ If you want to use Streak on the go, or you want more detailed notes about the habits you are tracking, 
+ you can also enable any comments you make on your card to count towards your streak.
  </p>
 
- <br>
-
- <p>I hope you enjoy this Power-up! If you have any questions or suggestions for Streak, feel free to email me at [email protected].</p>
+ <p>
+ I hope you enjoy this Power-up!
+ If you have any questions or suggestions for Streak, feel free to reach out to me via
+ <a href="mailto:[email protected]">email</a> or
+ <a href="https://twitter.com/emma_goto" target="_blank">Twitter</a>
+ </p>
  </div>
  </body>
 </html>
diff --git a/privacy.html → docs/privacy.html b/privacy.html → docs/privacy.html
@@ -9,31 +9,35 @@
  gtag('js', new Date());
 
  gtag('config', 'UA-139056183-1');
- </script>  
+ </script> 
  <meta charset="utf-8">
  </head>
  <body>
  <h2>Streak Privacy Policy</h2>
  This policy applies to all information collected or submitted on the Streak Power-up for Trello.
  <h2>Information we collect</h2>
+ <h3> Google Analytics</h3>
  <p>
  Streak uses Google Analytics, which stores cookies on your computer. The data that is collected includes your IP address and the time of your visit.
  </p>
  <p>This information is not shared with third parties. </p>
 
  <p>If you wish to opt out of Google Analytics, there is a <a href="https://tools.google.com/dlpage/gaoptout" target="_blank">browser add-on</a> that will allow you to do so.</p>
-
+ <h3>Your Trello data</h3>
+ <p> Streak provides the optional feature where Trello's API is used to collect all comments on a card and see if they can count towards a streak, based off of the user's provided filter.</p>
+ <p> This data is not stored anywhere or shared with third parties, and is only used if the user has opted-in by authenticating with the Streak Power-Up.</p>
  <h2>Your consent</h2>
  By using the Streak Trello Power-up, you consent to our privacy policy.
  <h2>Contact us</h2>
- For questions regarding this privacy policy, please email contact@emgoto.com.
+ For questions regarding this privacy policy, please email hello@emgoto.com.
  <h2>Changes</h2>
  If we decide to change our privacy policy, we will post those changes on this page.
 
  <p>Summary of changes so far:</p>
  <ul>
  <li>Saturday 20th April: First published.</li>
  <li>Thursday 25th April: Added information about usage of Google Analytics</li>
+ <li>Saturday 5th October: Added information about usage of user comments.</li>
  </ul>
  </body>
 </html>
diff --git a/settings.html → docs/settings.html b/settings.html → docs/settings.html
@@ -15,32 +15,47 @@
  <script src="https://p.trellocdn.com/power-up.min.js"></script>
  </head>
  <body style="overflow:hidden;">
- <div>
+ <div id="enabled-form" class="u-hidden">
  <form id="settings_form">
-  Days in week: <select name="daysInWeek">
+ <select name="daysInWeek">
  <option value="7">7</option>
  <option value="6">6</option>
  <option value="5">5</option>
  <option value="4">4</option>
  <option value="3">3</option>
  <option value="2">2</option>
  <option value="1">1</option>
- </select> 
+ <option value="0">0</option>
+ </select> days a week
  <br> First day of week:
  <select name="firstDayOfWeek">
  <option value="MONDAY">Monday</option>
  <option value="SUNDAY">Sunday</option>
- </select> 
- <div class="datepicker-confirm-btns" style="margin-top:4px;">
+ </select>
+ <br> Use comments for streak completion:
+ <div class="commentContainer">
+ <input id="filter-input" name="commentFilter" type="text" placeholder="Set a filter or leave blank for all comments" name="lname" disabled>
+ <button id="auth-btn" class="mod-bottom enableButton" type="button">Enable</button>
+ </div>
+
+ <div class="datepicker-confirm-btns">
+ <button id="remove-btn" class="mod-bottom remove-date js-remove-date" type="button">Remove</button>
  <button id="save-btn" class="mod-primary mod-bottom">Save</button>
- <button id="remove-btn" class="mod-danger mod-bottom remove-date js-remove-date u-hidden" type="button">Remove</button>
  </div>
  </form>
  <div id="how-to-use" class="how-to-use" class="quiet">
  How to use Streak
  </div>
  </div>
+ <div id="disabled-form" class="u-hidden">
+ <button id="enable-btn" class="mod-primary mod-bottom">Enable</button>
+ <br><div id="how-to-use-before-enable" class="how-to-use" class="quiet">
+ How to use Streak
+ </div>
+ </div>
+
  <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="js/settings.js"></script>
+ <script src="https://trello.com/1/client.js?key=bd1e7e486269d148ecd1be71ad5a3f1a"></script>
  </body>
 </html>
diff --git a/js/calendar.js b/js/calendar.js