Skip to content

Commit 8cfe548

Browse files
khang-ndkhang-nd
authored
Merge pull request #103 from khang-nd/chores
2 parents 8a58499 + deca3f2 commit 8cfe548

8 files changed

Lines changed: 537 additions & 617 deletions

File tree

‎docs/components/listview.ejs‎

Lines changed: 129 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,134 @@
11
<section class="component">
2-
<h3 id="listview">ListView</h3>
3-
<div>
4-
<blockquote>
5-
With a list view, users can view and interact with a collection of data objects, using either single
6-
selection or multiple selection.
7-
<footer>&mdash; <a href="https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-list-views">Microsoft
8-
Windows
9-
User Experience - List View</a></footer>
10-
</blockquote>
2+
<h3 id="listview">ListView (table)</h3>
3+
<div>
4+
<blockquote>
5+
With a list view, users can view and interact with a collection of data
6+
objects, using either single selection or multiple selection.
7+
<footer>
8+
&mdash;
9+
<a
10+
href="https://learn.microsoft.com/en-us/windows/win32/uxguide/ctrl-list-views"
11+
>Microsoft Windows User Experience - List View</a
12+
>
13+
</footer>
14+
</blockquote>
1115

12-
<p>Currently, the ListView is only implemented as the Details view, which styles tables.</p>
16+
<p>
17+
Currently, the ListView is only implemented as the Details view, which
18+
styles tables.
19+
</p>
1320

14-
<%- example(`
15-
<table>
16-
<thead>
17-
<tr>
18-
<th>Name</th>
19-
<th>Date Taken</th>
20-
<th class="highlighted indicator">Tags</th>
21-
<th>Size</th>
22-
<th>Rating</th>
23-
</tr>
24-
</thead>
25-
<tbody>
26-
<tr>
27-
<td>Toco Toucan</td>
28-
<td>6/24/2005 12:22 PM</td>
29-
<td>Sample; Wildlife</td>
30-
<td>113 KB</td>
31-
<td>* * * * *</td>
32-
</tr>
33-
<tr class="highlighted">
34-
<td>Dock</td>
35-
<td>6/22/2005 8:17 PM</td>
36-
<td>Sample; Ocean</td>
37-
<td>310 KB</td>
38-
<td>* * * * *</td>
39-
</tr>
40-
<tr>
41-
<td>Autumn Leaves</td>
42-
<td>11/4/2005 6:12 PM</td>
43-
<td>Sample; Landscape</td>
44-
<td>270 KB</td>
45-
<td>* * * * *</td>
46-
</tr>
47-
</tbody>
48-
</table>
49-
`) %>
21+
<%- example(`
22+
<table>
23+
<thead>
24+
<tr>
25+
<th>Name</th>
26+
<th>Date Taken</th>
27+
<th class="highlighted indicator">Tags</th>
28+
<th>Size</th>
29+
<th>Rating</th>
30+
</tr>
31+
</thead>
32+
<tbody>
33+
<tr>
34+
<td>Toco Toucan</td>
35+
<td>6/24/2005 12:22 PM</td>
36+
<td>Sample; Wildlife</td>
37+
<td>113 KB</td>
38+
<td>* * * * *</td>
39+
</tr>
40+
<tr class="highlighted">
41+
<td>Dock</td>
42+
<td>6/22/2005 8:17 PM</td>
43+
<td>Sample; Ocean</td>
44+
<td>310 KB</td>
45+
<td>* * * * *</td>
46+
</tr>
47+
<tr>
48+
<td>Autumn Leaves</td>
49+
<td>11/4/2005 6:12 PM</td>
50+
<td>Sample; Landscape</td>
51+
<td>270 KB</td>
52+
<td>* * * * *</td>
53+
</tr>
54+
</tbody>
55+
</table>
56+
`) %>
5057

51-
<p>Here's another example showcasing advanced usage, for example:</p>
52-
<ul>
53-
<li>The handling of long text (using the <code>width</code> property of the table to limit the width)</li>
54-
<li>Using the <code>has-shadow</code> class to add a shadow to the table</li>
55-
<li>Flipping the column header sort indicator by adding the <code>up</code> class</li>
56-
<li>Changing text alignment using the <code>text-align</code> property</li>
57-
<li>The <code>highlighted</code> column header style without sort indicator (I didn't want to add another table just for that)</li>
58-
</ul>
59-
<%- example(`
60-
<table class="has-shadow" style="width: 460px;">
61-
<thead>
62-
<tr>
63-
<th>Name</th>
64-
<th>Original Location</th>
65-
<th class="highlighted">Date deleted</th>
66-
<th>Size</th>
67-
<th class="highlighted indicator up">Type</th>
68-
</tr>
69-
</thead>
70-
<tbody>
71-
<tr>
72-
<td>contents_files</td>
73-
<td>D:\\Users\\user\\Documents\\contents_files</td>
74-
<td>3/29/2007 12:00 AM</td>
75-
<td style="text-align: right;">4 KB</td>
76-
<td>File Folder</td>
77-
</tr>
78-
<tr>
79-
<td>Windows Vista User Experience Guidelines</td>
80-
<td>D:\\Users\\user\\Documents\\Windows Vista User Experience Guidelines</td>
81-
<td>3/29/2007 12:00 AM</td>
82-
<td style="text-align: right;">0 KB</td>
83-
<td>File Folder</td>
84-
</tr>
85-
<tr>
86-
<td>AutoRecovery save of Document.asd</td>
87-
<td>D:\\Users\\user\\Documents\\AutoRecovery save of Document.asd</td>
88-
<td>3/23/2007 12:00 AM</td>
89-
<td style="text-align: right;">27 KB</td>
90-
<td>ASD File</td>
91-
</tr>
92-
<tr>
93-
<td>AutoRecovery save of Tree Views.asd</td>
94-
<td>D:\\Users\\user\\Documents\\AutoRecovery save of Tree Views.asd</td>
95-
<td>3/13/2007 12:00 AM</td>
96-
<td style="text-align: right;">693 KB</td>
97-
<td>ASD File</td>
98-
</tr>
99-
<tr>
100-
<td>contents</td>
101-
<td>D:\\Users\\user\\Documents\\contents</td>
102-
<td>3/29/2007 12:00 AM</td>
103-
<td style="text-align: right;">2 KB</td>
104-
<td>HTML Document</td>
105-
</tr>
106-
</tbody>
107-
</table>
108-
`) %>
109-
</div>
58+
<p>Here's another example showcasing advanced usage, for example:</p>
59+
<ul>
60+
<li>
61+
The handling of long text (using the <code>width</code> property of the
62+
table to limit the width)
63+
</li>
64+
<li>
65+
Using the <code>has-shadow</code> class to add a shadow to the table
66+
</li>
67+
<li>
68+
Flipping the column header sort indicator by adding the
69+
<code>up</code> class
70+
</li>
71+
<li>
72+
Changing text alignment using the <code>text-align</code> property
73+
</li>
74+
<li>
75+
The <code>highlighted</code> column header style without sort indicator
76+
(I didn't want to add another table just for that)
77+
</li>
78+
</ul>
79+
<%- example(`
80+
<table class="has-shadow" style="width: 460px">
81+
<thead>
82+
<tr>
83+
<th>Name</th>
84+
<th>Original Location</th>
85+
<th class="highlighted">Date deleted</th>
86+
<th>Size</th>
87+
<th class="highlighted indicator up">Type</th>
88+
</tr>
89+
</thead>
90+
<tbody>
91+
<tr>
92+
<td>contents_files</td>
93+
<td>D:\\Users\\user\\Documents\\contents_files</td>
94+
<td>3/29/2007 12:00 AM</td>
95+
<td style="text-align: right">4 KB</td>
96+
<td>File Folder</td>
97+
</tr>
98+
<tr>
99+
<td>Windows Vista User Experience Guidelines</td>
100+
<td>
101+
D:\\Users\\user\\Documents\\Windows Vista User Experience Guidelines
102+
</td>
103+
<td>3/29/2007 12:00 AM</td>
104+
<td style="text-align: right">0 KB</td>
105+
<td>File Folder</td>
106+
</tr>
107+
<tr>
108+
<td>AutoRecovery save of Document.asd</td>
109+
<td>D:\\Users\\user\\Documents\\AutoRecovery save of Document.asd</td>
110+
<td>3/23/2007 12:00 AM</td>
111+
<td style="text-align: right">27 KB</td>
112+
<td>ASD File</td>
113+
</tr>
114+
<tr>
115+
<td>AutoRecovery save of Tree Views.asd</td>
116+
<td>
117+
D:\\Users\\user\\Documents\\AutoRecovery save of Tree Views.asd
118+
</td>
119+
<td>3/13/2007 12:00 AM</td>
120+
<td style="text-align: right">693 KB</td>
121+
<td>ASD File</td>
122+
</tr>
123+
<tr>
124+
<td>contents</td>
125+
<td>D:\\Users\\user\\Documents\\contents</td>
126+
<td>3/29/2007 12:00 AM</td>
127+
<td style="text-align: right">2 KB</td>
128+
<td>HTML Document</td>
129+
</tr>
130+
</tbody>
131+
</table>
132+
`) %>
133+
</div>
110134
</section>

‎docs/sections/navigation.ejs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<li><a href="#dropdown">Dropdown</a></li>
2121
<li><a href="#groupbox">GroupBox</a></li>
2222
<li><a href="#listbox">ListBox</a></li>
23-
<li><a href="#listview">ListView</a></li>
23+
<li><a href="#listview">ListView (table)</a></li>
2424
<li>
2525
<details open>
2626
<summary><a href="#nav">Navigation</a></summary>

‎gui/_balloon.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
:root {
2-
--balloon-border-color: rgba(0, 0, 0, 0.4);
2+
--balloon-border-color: #0006;
33
--balloon-tail-top: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1.5V19.5H18.5L0.5 1.5Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H0.5V1.5L18.5 19.5H18' stroke='%23939393'/%3E%3C/svg%3E");
44
--balloon-tail-bottom: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1.5V19.5H18.5L0.5 1.5Z' fill='%23ddd' stroke='%23ddd'/%3E%3Cpath d='M1 19.5H0.5V1.5L18.5 19.5H18' stroke='%23939393'/%3E%3C/svg%3E");
55
--balloon-tail-size: 18px;

‎gui/_listview.scss‎

Lines changed: 18 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,24 @@
44
--listview-border: 1px solid;
55
--listview-border-color: #eeeeee;
66
--listview-border-color-header: #d7d7d7;
7-
--listview-background-bottom: #f0f0f0;
8-
--listview-background-middle: #fafafa;
9-
--listview-background-top: #ffffff;
107
--listview-gradient: linear-gradient(
11-
to bottom,
12-
var(--listview-background-top) 45%,
13-
var(--listview-background-middle) 45%,
14-
var(--listview-background-bottom)
15-
);
16-
--listview-border-color-highlight: #aaddfa;
17-
--listview-background-bottom-highlight: #daeefa;
18-
--listview-background-top-highlight: #f6fbfd;
19-
--listview-gradient-highlight: linear-gradient(
20-
to bottom,
21-
var(--listview-header-background-top-highlight) 45%,
22-
var(--listview-header-background-bottom-highlight)
8+
to bottom,
9+
#ffffff 45%,
10+
#fafafa 45%,
11+
#f0f0f0
2312
);
2413
--listview-header-border-color-highlight: #a7d8f5;
25-
--listview-header-background-bottom-highlight: #d9eaf5;
26-
--listview-header-background-middle-highlight: #e4f0f8;
27-
--listview-header-background-top-highlight: #f3f9fc;
2814
--listview-header-gradient-highlight: linear-gradient(
29-
to bottom,
30-
var(--listview-header-background-top-highlight) 45%,
31-
var(--listview-header-background-middle-highlight) 45%,
32-
var(--listview-header-background-bottom-highlight)
15+
to bottom,
16+
#f3f9fc 45%,
17+
#e4f0f8 45%,
18+
#d9eaf5
3319
);
34-
--listview-header-chevron-color-left: #667f91;
35-
--listview-header-chevron-color-middle: #90c1e2;
36-
--listview-header-chevron-color-right: #cce3f2;
3720
--listview-header-chevron-background: linear-gradient(
38-
to bottom right,
39-
var(--listview-header-chevron-color-left) 45%,
40-
var(--listview-header-chevron-color-middle) 65%,
41-
var(--listview-header-chevron-color-right)
21+
to bottom right,
22+
#667f91 45%,
23+
#90c1e2 65%,
24+
#cce3f2
4225
);
4326
}
4427

@@ -53,7 +36,8 @@ table {
5336
white-space: nowrap;
5437
table-layout: fixed;
5538

56-
td, th {
39+
td,
40+
th {
5741
white-space: nowrap;
5842
overflow: hidden;
5943
text-overflow: ellipsis;
@@ -75,7 +59,8 @@ table {
7559
cursor: default;
7660

7761
&.highlighted {
78-
border: var(--listview-border) var(--listview-header-border-color-highlight);
62+
border: var(--listview-border)
63+
var(--listview-header-border-color-highlight);
7964
background: var(--listview-header-gradient-highlight);
8065
border-radius: var(--border-radius);
8166

@@ -105,8 +90,8 @@ table {
10590
cursor: default;
10691

10792
&.highlighted {
108-
border: var(--listview-border) var(--listview-border-color-highlight);
109-
background: var(--listview-gradient-highlight);
93+
border: var(--listview-border) var(--item-highlighted-border);
94+
background: var(--item-highlighted-background);
11095
border-radius: var(--border-radius);
11196

11297
> *:not(:last-child) {

0 commit comments

Comments
 (0)