Skip to content

Commit 5816c64

Browse files
vedansh-5vedansh-5
committed
settings button
Signed-off-by: Vedansh Saini <[email protected]>
1 parent e318831 commit 5816c64

File tree

7 files changed

+353
-70
lines changed

7 files changed

+353
-70
lines changed

‎src/icons/settings-light.png

23.1 KB
Loading

‎src/icons/settings-night.png

65.8 KB
Loading

‎src/index.css

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,4 +181,161 @@ body,input,div,h3,h4,p,label,hr, #scrumReport{
181181
/* Dark mode for cache info */
182182
.dark-mode .cache-info {
183183
color: #9ca3af;
184+
}
185+
#cacheInput {
186+
transition: border-color 0.2s ease;
187+
}
188+
189+
#cacheInput:focus {
190+
outline: none;
191+
border-color: #3b82f6;
192+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
193+
}
194+
195+
/* Update the settings button styles: */
196+
#settingsToggle {
197+
transition: all 0.2s ease;
198+
border: none;
199+
cursor: pointer;
200+
background: none !important;
201+
}
202+
203+
#settingsToggle:hover {
204+
transform: scale(1.05);
205+
background: none !important;
206+
}
207+
208+
#settingsToggle:active {
209+
transform: scale(0.95);
210+
}
211+
212+
#settingsToggle img {
213+
transition: transform 0.2s ease;
214+
filter: brightness(0.9);
215+
}
216+
217+
#settingsToggle.active img {
218+
transform: rotate(45deg);
219+
filter: brightness(1);
220+
}
221+
222+
.dark-mode #settingsToggle {
223+
background: none !important;
224+
}
225+
226+
.dark-mode #settingsToggle:hover {
227+
background: none !important;
228+
}
229+
230+
.dark-mode #settingsToggle img {
231+
filter: brightness(0.9);
232+
}
233+
234+
.dark-mode #settingsToggle.active img {
235+
filter: brightness(1);
236+
}
237+
238+
.tooltip-container {
239+
position: relative;
240+
display: inline-block;
241+
margin-left: 4px;
242+
}
243+
244+
.question-icon {
245+
color: #6b7280;
246+
font-size: 14px;
247+
cursor: help;
248+
transition: color 0.2s ease;
249+
}
250+
251+
.question-icon:hover {
252+
color: #3b82f6;
253+
}
254+
255+
.tooltip-bubble {
256+
visibility: hidden;
257+
opacity: 0;
258+
position: absolute;
259+
background-color: #1f2937;
260+
color: white;
261+
text-align: left;
262+
padding: 12px;
263+
border-radius: 8px;
264+
font-size: 12px;
265+
line-height: 1.4;
266+
white-space: normal;
267+
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
268+
z-index: 1000;
269+
transition: opacity 0.3s ease, visibility 0.3s ease;
270+
width: 280px;
271+
}
272+
273+
.tooltip-bubble {
274+
bottom: 125%;
275+
left: 150%;
276+
transform: translateX(-50%);
277+
}
278+
279+
.tooltip-bubble::after {
280+
content: "";
281+
position: absolute;
282+
top: 100%;
283+
left: 50%;
284+
margin-left: -5px;
285+
border-width: 5px;
286+
border-style: solid;
287+
border-color: #1f2937 transparent transparent transparent;
288+
}
289+
290+
.tooltip-container.tooltip-bottom .tooltip-bubble {
291+
top: 125%;
292+
bottom: auto;
293+
}
294+
295+
.tooltip-container.tooltip-bottom .tooltip-bubble::after {
296+
top: -10px;
297+
border-color: transparent transparent #1f2937 transparent;
298+
}
299+
300+
.tooltip-container.tooltip-right .tooltip-bubble {
301+
top: -5px;
302+
left: 125%;
303+
bottom: auto;
304+
transform: none;
305+
}
306+
307+
.tooltip-container.tooltip-right .tooltip-bubble::after {
308+
top: 15px;
309+
left: -10px;
310+
border-color: transparent #1f2937 transparent transparent;
311+
}
312+
313+
.tooltip-container:hover .tooltip-bubble {
314+
visibility: visible;
315+
opacity: 1;
316+
}
317+
318+
.dark-mode .question-icon {
319+
color: #9ca3af;
320+
}
321+
322+
.dark-mode .question-icon:hover {
323+
color: #60a5fa;
324+
}
325+
326+
.dark-mode .tooltip-bubble {
327+
background-color: #374151;
328+
border: 1px solid #4b5563;
329+
}
330+
331+
.dark-mode .tooltip-bubble::after {
332+
border-color: #374151 transparent transparent transparent;
333+
}
334+
335+
.dark-mode .tooltip-container.tooltip-bottom .tooltip-bubble::after {
336+
border-color: transparent transparent #374151 transparent;
337+
}
338+
339+
.dark-mode .tooltip-container.tooltip-right .tooltip-bubble::after {
340+
border-color: transparent #374151 transparent transparent;
184341
}

‎src/popup.html

Lines changed: 90 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -28,78 +28,99 @@ <h3 class="text-3xl font-semibold ">Scrum Helper</h3>
2828
<p class="">Report your development progress by auto-fetching your Git activity for a selected period</p>
2929
</div>
3030

31-
<div class="center mt-2 ">
32-
<label class="flex items-center justify-center gap-2">
31+
<div class="center mt-2 flex justify-between">
32+
<label class="flex items-center justify-center gap-2 ">
3333
Disable
34-
<input type="checkbox" value="" id="enable" class="sr-only peer" checked>
34+
<input type="checkbox" value="" id="enable" class="sr-only peer" >
3535
<div class="relative w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-600"></div>
3636
<span class=""></span>
3737
Enable
3838
</label>
39+
<button id="settingsToggle">
40+
<img id="settingsIcon" src="icons/settings-light.png" alt="Settings" class="w-7 h-7 mx-3 cursor-pointer">
41+
</button>
3942
</div>
4043
</div>
4144

4245
<div class="rounded-2xl">
4346
<div class=" border-gray-100 border-2 bg-white rounded-3xl px-4 py-4 mx-2 my-2">
44-
<div>
45-
<h4>Your Project Name</h4>
46-
<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">
47-
</div>
48-
<div>
49-
<h4>Your Github Username</h4>
50-
<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">
51-
</div>
52-
53-
<div>
54-
<p class="text-sm">Fetch your contributions between:</p>
55-
<div class="flex justify-between items-center my-2 mx-4">
56-
<div class="flex items-center gap-2">
57-
<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
58-
<label for="lastWeekContribution">Last 7 days</label>
59-
</div>
60-
<div class="flex items-center gap-2">
61-
<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
62-
<label for="yesterdayContribution">Last 1 day</label>
63-
</div>
47+
48+
<div id="reportSection" class="tab-content">
49+
<div>
50+
<h4>Your Project Name</h4>
51+
<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">
52+
</div>
53+
<div>
54+
<h4>Your Github Username</h4>
55+
<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">
6456
</div>
6557

66-
<div id="customDateContainer" class="flex justify-between items-center mt-2">
67-
<div>
68-
<label for="startingDate">Start Date:</label>
69-
<input type="date" id="startingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
58+
<div>
59+
<p class="text-sm">Fetch your contributions between:</p>
60+
<div class="flex justify-between items-center my-2 mx-4">
61+
<div class="flex items-center gap-2">
62+
<input type="radio" id="lastWeekContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
63+
<label for="lastWeekContribution">Last 7 days</label>
64+
</div>
65+
<div class="flex items-center gap-2">
66+
<input type="radio" id="yesterdayContribution" name="timeframe" class="form-radio" onclick="toggleRadio(this)">
67+
<label for="yesterdayContribution">Last 1 day</label>
68+
</div>
7069
</div>
71-
<div>
72-
<label for="endingDate">End Date:</label>
73-
<input type="date" id="endingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
70+
71+
<div id="customDateContainer" class="flex justify-between items-center mt-2">
72+
<div>
73+
<label for="startingDate">Start Date:</label>
74+
<input type="date" id="startingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
75+
</div>
76+
<div>
77+
<label for="endingDate">End Date:</label>
78+
<input type="date" id="endingDate" class="border-2 border-gray-200 bg-gray-200 rounded-xl p-1">
79+
</div>
7480
</div>
7581
</div>
76-
</div>
77-
78-
<div class="col s12">
79-
<br />
80-
<input type="checkbox" id="showOpenLabel" class="form-checkbox h-4 w-4 text-blue-600">
81-
<label id="checkboxLabel" for="showOpenLabel" class="text-gray-700 font-medium text-sm">Show Open/Closed Label</label>
82-
</div>
83-
<div class="my-4">
84-
<p class="text-sm font-medium">What is blocking you from making progress?</p>
85-
<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1" placeholder="Enter your reason">
86-
<hr class="border-t-2 border-gray-700 mt-1 ">
87-
</div>
88-
<div>
82+
83+
<div class="col s12">
84+
<br />
85+
<input type="checkbox" id="showOpenLabel" class="form-checkbox h-4 w-4 text-blue-600">
86+
<label id="checkboxLabel" for="showOpenLabel" class="text-gray-700 font-medium text-sm">Show Open/Closed Label</label>
87+
</div>
88+
<div class="my-4">
89+
<p class="text-sm font-medium">What is blocking you from making progress?</p>
90+
<input id="userReason" type="text" class="w-full text-gray-800 mt-3 rounded-xl px-4 py-1" placeholder="Enter your reason">
91+
<hr class="border-t-2 border-gray-700 mt-1 ">
92+
</div>
8993
<div>
90-
<h6 class="text-base font-semibold">Scrum Report</h6>
91-
<div id="scrumReport"
92-
contenteditable="true"
93-
class="min-h-[200px] overflow-y-auto whitespace-pre-wrap border-2 border-gray-200 bg-gray-100 rounded-xl text-gray-800 p-2 my-2">
94+
<div>
95+
<h6 class="text-base font-semibold">Scrum Report</h6>
96+
<div id="scrumReport"
97+
contenteditable="true"
98+
class="min-h-[200px] overflow-y-auto whitespace-pre-wrap border-2 border-gray-200 bg-gray-100 rounded-xl text-gray-800 p-2 my-2">
99+
</div>
100+
</div>
101+
<div class="flex justify-between gap-2">
102+
<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">
103+
<i class="fa fa-refresh"></i> Generate Report
104+
</button>
105+
<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">
106+
<i class="fa fa-copy"></i> Copy Report
107+
</button>
94108
</div>
95109
</div>
96-
<div class="flex justify-between gap-2">
97-
<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">
98-
<i class="fa fa-refresh"></i> Generate Report
99-
</button>
100-
<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">
101-
<i class="fa fa-copy"></i> Copy Report
102-
</button>
110+
</div>
111+
112+
<div id="settingsSection" class="tab-content hidden">
113+
114+
<div class="">
115+
<p class="text-sm font-medium">Enter cache TTL
116+
<span class="tooltip-container">
117+
<i class="fa fa-question-circle question-icon"></i>
118+
<span class="tooltip-bubble">
119+
We are caching the data to avoid redundant calls. By default the cache expires after 10 minutes, you can change it here to your desired time. We have given a refresh cache button in case you want to fetch fresh data right now.
120+
</span>
121+
</span>
122+
</p>
123+
<input type="text" id="cacheInput" class="w-full border-2 border-gray-200 bg-gray-200 rounded-xl text-gray-800 p-2 my-2" placeholder="Write Cache TTL in minutes (Default 10 minutes)">
103124
</div>
104125
<div class="">
105126
<button id="refreshCache" class="w-full mt-3 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded flex items-center justify-center gap-2 transition-colors duration-200">
@@ -108,21 +129,24 @@ <h6 class="text-base font-semibold">Scrum Report</h6>
108129
</button>
109130
<p class="cache-info">
110131
<i class="fa fa-info-circle"></i>
111-
Data is cached for 10 minutes. Use this button to fetch fresh data immediately.
132+
Use this button to fetch fresh data immediately.
112133
</p>
113134
</div>
114-
<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
115-
<div>
116-
<h4 class="font-semibold text-xl">Note:</h4>
117-
<ul class="text-xs list-disc list-inside">
118-
<li>The PRs fetched are based on the most recent review by any contributor. If you reviewed a PR 10 days ago and someone else reviewed it 2 days ago, it will still appear in your activity for the past week. (<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">See this issue</a>.)
119-
</li>
120-
<li>Please note that some discrepancies may occur in the generated SCRUM. We recommend manually reviewing and editing the report to ensure accuracy before sharing
121-
</li>
122-
</ul>
123-
</div>
135+
136+
</div>
137+
138+
<!-- asdfghjklkjhgfdsasdfghjkjhgfdsasdfghjk -->
139+
<div class="border-gray-100 border-2 bg-white rounded-3xl px-4 py-2 mx-2 my-2">
140+
<div>
141+
<h4 class="font-semibold text-xl">Note:</h4>
142+
<ul class="text-xs list-disc list-inside">
143+
<li>The PRs fetched are based on the most recent review by any contributor. If you reviewed a PR 10 days ago and someone else reviewed it 2 days ago, it will still appear in your activity for the past week. (<a target="_blank" href="https://github.com/fossasia/scrum_helper/issues/20">See this issue</a>.)
144+
</li>
145+
<li>Please note that some discrepancies may occur in the generated SCRUM. We recommend manually reviewing and editing the report to ensure accuracy before sharing
146+
</li>
147+
</ul>
124148
</div>
125-
</div>
149+
</div>
126150
</div>
127151

128152
<div class="mt-6 border-t border-gray-300">

0 commit comments

Comments
 (0)