Skip to content

Commit 87139de

Browse files
marc0l92marc0l92
committed
Table dark theme #6 
1 parent 28472a7 commit 87139de

File tree

3 files changed

+214
-11
lines changed

3 files changed

+214
-11
lines changed

‎src/processor.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -196,7 +196,7 @@ export class JiraIssueProcessor {
196196
}
197197

198198
private renderSearchResultsTable(el: HTMLElement, query: string, searchResults: IJiraSearchResults): void {
199-
const table = createEl('table', { cls: 'table is-bordered is-striped is-narrow is-hoverable is-fullwidth' })
199+
const table = createEl('table', { cls: `table is-bordered is-striped is-narrow is-hoverable is-fullwidth ${this.getTheme()}` })
200200
const header = createEl('tr', { parent: createEl('thead', { parent: table }) })
201201
createEl('th', { text: 'Key', parent: header })
202202
createEl('th', { text: 'Summary', parent: header })

‎styles.css

+57-9
Original file line numberDiff line numberDiff line change
@@ -208,45 +208,54 @@
208208
background-color: transparent;
209209
}
210210

211-
.jira-issue-container .table.is-bordered tr:last-child td, .table.is-bordered tr:last-child th {
211+
.jira-issue-container .table.is-bordered tr:last-child td,
212+
.jira-issue-container .table.is-bordered tr:last-child th {
212213
border-bottom-width: 1px;
213214
}
214-
.jira-issue-container .table.is-narrow td, .table.is-narrow th {
215+
.jira-issue-container .table.is-narrow td,
216+
.jira-issue-container .table.is-narrow th {
215217
padding: 0.25em 0.5em;
216218
}
217-
.jira-issue-container .table.is-bordered td, .table.is-bordered th {
219+
.jira-issue-container .table.is-bordered td,
220+
.jira-issue-container .table.is-bordered th {
218221
border-width: 1px;
219222
}
220223
.jira-issue-container .table th:not([align]) {
221224
text-align: inherit;
222225
}
223-
.jira-issue-container .table thead td, .table thead th {
226+
.jira-issue-container .table thead td,
227+
.jira-issue-container .table thead th {
224228
border-width: 0 0 2px;
225229
color: #363636;
226230
}
227-
.jira-issue-container table td:not([align]), table th:not([align]) {
231+
.jira-issue-container table td:not([align]),
232+
.jira-issue-container table th:not([align]) {
228233
text-align: inherit;
229234
}
230235
.jira-issue-container .table th {
231236
color: #363636;
232237
white-space: nowrap;
233238
}
234-
.jira-issue-container .table td, .table th {
239+
.jira-issue-container .table td,
240+
.jira-issue-container .table th {
235241
border: 1px solid #dbdbdb;
236242
border-width: 0 0 1px;
237243
padding: 0.5em 0.75em;
238244
vertical-align: top;
239245
}
240-
.jira-issue-container td:not([align]), th:not([align]) {
246+
.jira-issue-container td:not([align]),
247+
th:not([align]) {
241248
text-align: inherit;
242249
}
243250
.jira-issue-container table th {
244251
color: #363636;
245252
}
246-
.jira-issue-container table td, table th {
253+
.jira-issue-container table td,
254+
table th {
247255
vertical-align: top;
248256
}
249-
.jira-issue-container td, th {
257+
.jira-issue-container td,
258+
th {
250259
padding: 0;
251260
}
252261

@@ -266,4 +275,43 @@
266275
}
267276
.jira-issue-container .table.is-hoverable tbody tr:not(.is-selected):hover {
268277
background-color: #fafafa;
278+
}
279+
280+
.jira-issue-container .table.is-dark {
281+
background-color: #000000;
282+
color: #dadada;
283+
}
284+
285+
.jira-issue-container .table.is-dark thead td,
286+
.jira-issue-container .table.is-dark thead th {
287+
color: #dadada;
288+
}
289+
290+
.jira-issue-container .table.is-dark td,
291+
.jira-issue-container .table.is-dark th {
292+
border: 1px solid #333333;
293+
}
294+
295+
.jira-issue-container table.is-dark th {
296+
color: #dadada;
297+
}
298+
299+
.jira-issue-container .table.is-striped.is-dark tbody tr:not(.is-selected):nth-child(even) {
300+
background-color: #141414;
301+
}
302+
303+
.jira-issue-container .table.is-hoverable.is-striped.is-dark tbody tr:not(.is-selected):hover:nth-child(even) {
304+
background-color: #242424;
305+
}
306+
307+
.jira-issue-container .table.is-hoverable.is-striped.is-dark tbody tr:not(.is-selected):hover {
308+
background-color: #242424;
309+
}
310+
311+
.jira-issue-container .table.is-striped.is-dark tbody tr:not(.is-selected):nth-child(even) {
312+
background-color: #141414;
313+
}
314+
315+
.jira-issue-container .table.is-hoverable.is-dark tbody tr:not(.is-selected):hover {
316+
background-color: #141414;
269317
}

‎test.html

+156-1
Original file line numberDiff line numberDiff line change
@@ -115,10 +115,49 @@
115115
transform: rotate(360deg);
116116
}
117117
}
118+
119+
.jira-issue-container .table.is-dark {
120+
background-color: #000000;
121+
color: #dadada;
122+
}
123+
124+
.jira-issue-container .table.is-dark thead td,
125+
.jira-issue-container .table.is-dark thead th {
126+
color: #dadada;
127+
}
128+
129+
.jira-issue-container .table.is-dark td,
130+
.jira-issue-container .table.is-dark th {
131+
border: 1px solid #333333;
132+
}
133+
134+
.jira-issue-container table.is-dark th {
135+
color: #dadada;
136+
}
137+
138+
.jira-issue-container .table.is-striped.is-dark tbody tr:not(.is-selected):nth-child(even) {
139+
background-color: #141414;
140+
}
141+
142+
.jira-issue-container .table.is-hoverable.is-striped.is-dark tbody tr:not(.is-selected):hover:nth-child(even) {
143+
background-color: #242424;
144+
}
145+
146+
.jira-issue-container .table.is-hoverable.is-striped.is-dark tbody tr:not(.is-selected):hover {
147+
background-color: #242424;
148+
}
149+
150+
.jira-issue-container .table.is-striped.is-dark tbody tr:not(.is-selected):nth-child(even) {
151+
background-color: #141414;
152+
}
153+
154+
.jira-issue-container .table.is-hoverable.is-dark tbody tr:not(.is-selected):hover {
155+
background-color: #141414;
156+
}
118157
</style>
119158
</head>
120159

121-
<body>
160+
<body class="jira-issue-container">
122161
<section class="section">
123162
<div class="container">
124163
<div class="tags has-addons">
@@ -160,6 +199,64 @@
160199
<span class="tag is-light">39</span>
161200
</div>
162201
</div>
202+
<div class="container">
203+
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth is-dark">
204+
<thead>
205+
<tr>
206+
<th>Key</th>
207+
<th>Summary</th>
208+
<th><abbr title="Type">T</abbr></th>
209+
<th>Created</th>
210+
<th>Updated</th>
211+
<th>Reporter</th>
212+
<th>Assignee</th>
213+
<th><abbr title="Priority">P</abbr></th>
214+
<th>Status</th>
215+
<th>Due Date</th>
216+
</tr>
217+
</thead>
218+
<tfoot>
219+
<tr>
220+
<th colspan="9" style="text-align: right;">Total Results:</th>
221+
<td>350</td>
222+
</tr>
223+
</tfoot>
224+
<tbody>
225+
<tr>
226+
<th>OPEN-111</th>
227+
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
228+
title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
229+
</td>
230+
<td>38</td>
231+
<td>23</td>
232+
<td>12</td>
233+
<td>3</td>
234+
<td>68</td>
235+
<td>+32</td>
236+
<td>81</td>
237+
<td>Qualification for the <a
238+
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
239+
title="2016–17 UEFA Champions League">Champions League group stage</a></td>
240+
</tr>
241+
<tr>
242+
<th>OPEN-111</th>
243+
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
244+
title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
245+
</td>
246+
<td>38</td>
247+
<td>23</td>
248+
<td>12</td>
249+
<td>3</td>
250+
<td>68</td>
251+
<td>+32</td>
252+
<td>81</td>
253+
<td>Qualification for the <a
254+
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
255+
title="2016–17 UEFA Champions League">Champions League group stage</a></td>
256+
</tr>
257+
</tbody>
258+
</table>
259+
</div>
163260
<div class="container">
164261
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
165262
<thead>
@@ -258,6 +355,64 @@
258355
<span class="tag is-dark">Loading ...</span>
259356
</div>
260357
</div>
358+
<div class="container">
359+
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth is-dark">
360+
<thead>
361+
<tr>
362+
<th>Key</th>
363+
<th>Summary</th>
364+
<th><abbr title="Type">T</abbr></th>
365+
<th>Created</th>
366+
<th>Updated</th>
367+
<th>Reporter</th>
368+
<th>Assignee</th>
369+
<th><abbr title="Priority">P</abbr></th>
370+
<th>Status</th>
371+
<th>Due Date</th>
372+
</tr>
373+
</thead>
374+
<tfoot>
375+
<tr>
376+
<th colspan="9" style="text-align: right;">Total Results:</th>
377+
<td>350</td>
378+
</tr>
379+
</tfoot>
380+
<tbody>
381+
<tr>
382+
<th>OPEN-111</th>
383+
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
384+
title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
385+
</td>
386+
<td>38</td>
387+
<td>23</td>
388+
<td>12</td>
389+
<td>3</td>
390+
<td>68</td>
391+
<td>+32</td>
392+
<td>81</td>
393+
<td>Qualification for the <a
394+
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
395+
title="2016–17 UEFA Champions League">Champions League group stage</a></td>
396+
</tr>
397+
<tr>
398+
<th>OPEN-111</th>
399+
<td><a href="https://en.wikipedia.org/wiki/Leicester_City_F.C."
400+
title="Leicester City F.C.">Leicester City</a> <strong>(C)</strong>
401+
</td>
402+
<td>38</td>
403+
<td>23</td>
404+
<td>12</td>
405+
<td>3</td>
406+
<td>68</td>
407+
<td>+32</td>
408+
<td>81</td>
409+
<td>Qualification for the <a
410+
href="https://en.wikipedia.org/wiki/2016%E2%80%9317_UEFA_Champions_League#Group_stage"
411+
title="2016–17 UEFA Champions League">Champions League group stage</a></td>
412+
</tr>
413+
</tbody>
414+
</table>
415+
</div>
261416
</section>
262417
</body>
263418

0 commit comments

Comments
 (0)