Skip to content

Commit 2bf0e18

Browse files
vedansh-5vedansh-5
committed
added standalone and changed some ui elements, working condition, 1 day selector not working
Signed-off-by: Vedansh Saini <[email protected]>
1 parent 3984b48 commit 2bf0e18

File tree

4 files changed

+504
-273
lines changed

4 files changed

+504
-273
lines changed

‎src/popup.html

Lines changed: 83 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<link rel="stylesheet" href="./tailwindcss.css">
8-
<link href="materialize/css/materialize.min.css" type="text/css" rel="stylesheet">
8+
<!-- <link href="materialize/css/materialize.min.css" type="text/css" rel="stylesheet"> -->
99
<link rel="stylesheet" type="text/css" href="index.css">
1010
<script src="./scripts/fontawesome.js"></script>
1111
<style type="text/css">
@@ -18,15 +18,16 @@
1818
</style>
1919
</head>
2020
<body>
21-
<div class="px-4 py-4 rounded-2xl bg-cyan-400">
22-
<div class="flex justify-between items-center">
23-
<h6 class="center bg-red-500">SCRUM Helper</h4>
24-
<h6>DAY/Night logo</h4>
21+
<div class="pl-4 py-4 rounded-2xl bg-cyan-400">
22+
<div class="flex justify-between py-2">
23+
<h3 class="text-3xl font-semibold ">Scrum Helper</h3>
24+
<img src="../icons/night-mode.png" alt="Night Mode" class="w-7 h-7 mx-3">
2525
</div>
26-
<h6 class="center">
27-
SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.
28-
</h6>
29-
<br />
26+
<div>
27+
<p class="font-semibold">SCRUM helper prefills the Scrums in google groups, with your FOSSASIA's contributions.</p>
28+
</div>
29+
30+
<!-- Change from here -->
3031
<div class="row center">
3132
<div class="switch">
3233
<label>
@@ -45,63 +46,95 @@ <h6 class="center">
4546
</ul>
4647
</div>
4748
</div>
49+
50+
<!-- Till here -->
4851
<div class="bg-yellow-100 rounded-2xl">
49-
<div class="row">
50-
<div class="input-field col s12">
51-
<input placeholder="Your Project Name" id="projectName" type="text">
52-
<label for="projectName">Your Project Name</label>
52+
<div class=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
53+
<div>
54+
<h4>Your Project Name</h4>
55+
<input id="projectName" type="text" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" placeholder="Enter your project name">
5356
</div>
54-
<div class="input-field col s12">
55-
<input placeholder="Required for getting data from github" id="githubUsername" type="text">
56-
<label for="githubUsername">Your Github Username</label>
57+
<div>
58+
<h4>Your Github Username</h4>
59+
<input id="githubUsername" type="text" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" placeholder="Required for fetching your contributions">
5760
</div>
58-
<div class="col s12"><span>Fetch your contributions between:</span>
59-
<input type="checkbox" class="filled-in" id="lastWeekContribution"/>
60-
<label for="lastWeekContribution">Show past <span id="noDays"></span> from today</label>
61-
</div>
62-
63-
<div class="input-field col s6">
64-
<div>Starting Date:</div>
65-
<input id="startingDate" type="date" class="datepicker" placeholder=" ">
61+
62+
<div>
63+
<p class="text-sm">Fetch your contributions between:</p>
64+
<div class="flex justify-between items-center my-2 mx-4">
65+
<div class="flex items-center gap-2">
66+
<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio">
67+
<label for="lastWeekContribution">Last 7 days</label>
68+
</div>
69+
<div class="flex items-center gap-2">
70+
<input type="radio" id="yesterday" name="timeframe" class="form-radio">
71+
<label for="yesterday">Last 1 day</label>
72+
</div>
73+
</div>
6674

75+
<div class="flex justify-between items-center mt-2">
76+
<div>
77+
<label for="start-date">Start Date:</label>
78+
<input type="date" id="startingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
79+
</div>
80+
<div>
81+
<label for="end-date">End Date:</label>
82+
<input type="date" id="endingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
83+
</div>
84+
</div>
6785
</div>
68-
<div class="input-field col s6">
69-
<div>Ending Date</div>
70-
<input id="endingDate" type="date" class="datepicker" placeholder=" ">
71-
</div>
86+
7287
<div class="col s12">
7388
<br />
74-
<input type="checkbox" class="filled-in" id="showOpenLabel"/>
75-
<label for="showOpenLabel">Show Open/Closed Label</label>
89+
<input type="checkbox" id="showOpenLabel" class="form-checkbox h-4 w-4 text-blue-600">
90+
<label id="checkboxLabel" for="showOpenLabel" class="text-gray-700 font-medium text-sm">Show Open/Closed Label</label>
7691
</div>
77-
<div class="input-field col s12">
78-
<input placeholder="Reason" id="userReason" type="text">
79-
<label for="userReason">What is stopping you from doing your work?</label>
92+
<div class="my-4">
93+
<p class="text-sm font-medium">What is stopping you from doing your work?</p>
94+
<input id="userReason" type="text" class="w-full text-gray-800 mt-3" placeholder="Enter your reason">
95+
<hr class="border-t-2 border-gray-700 mt-1 ">
8096
</div>
81-
<div class="col s12">
97+
<div>
98+
<div>
99+
<h6 class="text-base font-semibold">Scrum Report</h6>
100+
<div id="scrumReport"
101+
contenteditable="true"
102+
class="min-h-[200px] overflow-y-auto whitespace-pre-wrap border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2">
103+
</div>
104+
</div>
105+
<div class="flex justify-between gap-2">
106+
<button id="generateReport" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
107+
<i class="fa fa-refresh"></i> Generate Report
108+
</button>
109+
<button id="copyReport" class="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded">
110+
<i class="fa fa-copy"></i> Copy Report
111+
</button>
112+
</div>
113+
82114

83-
<h5>Note:</h5>
84-
<h6>
85-
<ul>
86-
<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.
87-
</li>
88-
<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.
89-
</li>
90-
</ul>
91-
</h6>
92-
</div>
115+
<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
116+
<div>
117+
<h4 class="font-semibold text-xl">Note:</h4>
118+
<ul class="text-xs list-disc list-inside">
119+
<li>The PRs fetched are according to the date last reviewed by anyone. So if you reviewed a PR 10 days back, and someone reviewed it 2 days back, it will appear in your last week's activity. See <a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">this issue</a>.
120+
</li>
121+
<li>By using the extension you understand that there might be discrepancies in the SCRUM generated. You are advised to edit the SCRUM afterwards to remove any discrepancies.
122+
</li>
123+
</ul>
124+
</div>
125+
</div>
93126
</div>
94127
</div>
95128

96-
<hr />
97-
<footer>
98-
<div class="center">
99-
<a target="_blank" href="https://github.com/fossasia/scrum_helper"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
100-
</div>
101-
</footer>
129+
<hr class="border-t-2 border-black">
130+
<div class="flex items-center justify-center text-xl">
131+
<a target="_blank" href="https://github.com/fossasia/scrum_helper" class="flex items-center"><h6><i class="fa fa-github" aria-hidden="true"></i> view code</h6></a>
132+
</div>
102133
</div>
103134
<script src="scripts/jquery-3.2.1.min.js"></script>
104135
<script type="text/javascript" type="text/javascript" src="materialize/js/materialize.min.js"></script>
105136
<script src="scripts/main.js"></script>
137+
<script src="scripts/scrumHelper.js"></script>
138+
<script src="scripts/popup.js"></script>
106139
</body>
107140
</html>

‎src/scripts/popup.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
document.addEventListener('DOMContentLoaded', function() {
2+
const generateBtn = document.getElementById('generateReport');
3+
const copyBtn = document.getElementById('copyReport');
4+
5+
generateBtn.addEventListener('click', function() {
6+
this.innerHTML = '<i class"fa fa-spinner fa-spi"></i> Generating...';
7+
this.disabled = true;
8+
9+
window.generateScrumReport();
10+
});
11+
12+
copyBtn.addEventListener('click', function() {
13+
const scrumReport = document.getElementById('scrumReport');
14+
15+
const tempDiv = document.createElement('div');
16+
tempDiv.innerHTML = scrumReport.innerHTML;
17+
18+
const links = tempDiv.getElementsByTagName('a');
19+
Array.from(links).forEach(link => {
20+
const title = link.textContent;
21+
const url = link.href;
22+
const markdownLink = `[${title}](${url})`;
23+
link.outerHTML = markdownLink;
24+
});
25+
26+
const stateButtons = tempDiv.getElementsByClassName('State');
27+
Array.from(stateButtons).forEach(button => {
28+
button.remove();
29+
});
30+
31+
tempDiv.innerHTML = tempDiv.innerHTML.replace(/<br\s*\/?>/gi, '\n');
32+
33+
const listItems = tempDiv.getElementsByTagName('li');
34+
Array.from(listItems).forEach(item => {
35+
item.innerHTML = '\n- '+ item.innerHTML;
36+
});
37+
38+
tempDiv.innerHTML = tempDiv.innerHTML.replace(/<\/?ul>/gi, '\n');
39+
let textContent = tempDiv.textContent;
40+
textContent = textContent.replace(/\n\s*\n/g, '\n\n');
41+
textContent = textContent.trim();
42+
43+
const textArea = document.createElement('textarea');
44+
textArea.value = textContent;
45+
document.body.appendChild(textArea);
46+
textArea.select();
47+
document.execCommand('copy');
48+
document.body.removeChild(textArea);
49+
50+
51+
})
52+
53+
54+
55+
56+
57+
})

0 commit comments

Comments
 (0)