Skip to content

Commit 99a3622

Browse files
marjune163marjune163
committed
feat(tpl): add sort control for frontend
1 parent 4781af1 commit 99a3622

File tree

5 files changed

+84
-24
lines changed

5 files changed

+84
-24
lines changed

‎src/serverHandler/sortState.go‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ func (info SortState) NextTimeSort() template.HTML {
7575
return info.mergeDirWithKey(nextKey)
7676
}
7777

78+
func (info SortState) DirSort() dirSort {
79+
return info.dirSort
80+
}
81+
7882
func (info SortState) Key() template.HTML {
7983
return template.HTML(info.key)
8084
}

‎src/tpl/assert/main.css‎

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -208,7 +208,8 @@ em {
208208
background: #f5f5f5;
209209
}
210210

211-
.item-list a {
211+
.item-list .detail,
212+
.item-list .delete {
212213
display: flex;
213214
flex-flow: row nowrap;
214215
align-items: center;
@@ -217,11 +218,11 @@ em {
217218
zoom: 1;
218219
}
219220

220-
.has-deletable .link {
221+
.has-deletable .detail {
221222
padding-right: 2.2em;
222223
}
223224

224-
.item-list span {
225+
.item-list .field {
225226
margin: 0 0 0 1em;
226227
flex-shrink: 0;
227228
}
@@ -264,14 +265,35 @@ em {
264265
background: #fee;
265266
}
266267

268+
.item-list .header:hover {
269+
background: none;
270+
}
271+
272+
.item-list .header .detail {
273+
background: #fcfcfc;
274+
}
275+
276+
.item-list .header .field {
277+
display: inline-block;
278+
margin: 0;
279+
font-size: 1.5em;
280+
color: #808080;
281+
overflow: hidden;
282+
}
283+
284+
.item-list .header .time {
285+
width: 6.5em;
286+
text-align: center;
287+
}
288+
267289
.error {
268290
margin: 1em;
269291
padding: 1em;
270292
background: #ffc;
271293
}
272294

273295
@media only screen and (max-width: 350px) {
274-
.item-list .time {
296+
.item-list .detail .time {
275297
display: none;
276298
}
277299
}

‎src/tpl/assert/main.css.go‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -178,18 +178,19 @@ zoom: 1;
178178
.item-list li:hover {
179179
background: #f5f5f5;
180180
}
181-
.item-list a {
181+
.item-list .detail,
182+
.item-list .delete {
182183
display: flex;
183184
flex-flow: row nowrap;
184185
align-items: center;
185186
border-bottom: 1px #f5f5f5 solid;
186187
overflow: hidden;
187188
zoom: 1;
188189
}
189-
.has-deletable .link {
190+
.has-deletable .detail {
190191
padding-right: 2.2em;
191192
}
192-
.item-list span {
193+
.item-list .field {
193194
margin: 0 0 0 1em;
194195
flex-shrink: 0;
195196
}
@@ -226,13 +227,30 @@ padding: 0.25em 0.3125em;
226227
.item-list .delete:hover {
227228
background: #fee;
228229
}
230+
.item-list .header:hover {
231+
background: none;
232+
}
233+
.item-list .header .detail {
234+
background: #fcfcfc;
235+
}
236+
.item-list .header .field {
237+
display: inline-block;
238+
margin: 0;
239+
font-size: 1.5em;
240+
color: #808080;
241+
overflow: hidden;
242+
}
243+
.item-list .header .time {
244+
width: 6.5em;
245+
text-align: center;
246+
}
229247
.error {
230248
margin: 1em;
231249
padding: 1em;
232250
background: #ffc;
233251
}
234252
@media only screen and (max-width: 350px) {
235-
.item-list .time {
253+
.item-list .detail .time {
236254
display: none;
237255
}
238256
}

‎src/tpl/page.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,27 @@
5454
</script>
5555
{{end}}
5656
<ul class="item-list{{if .HasDeletable}} has-deletable{{end}}">
57+
<li class="header">{{$dirSort := .SortState.DirSort}}{{$sortKey := .SortState.Key}}
58+
<span class="detail">
59+
<a class="field dir" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextDirSort}}">Dir{{if eq $dirSort -1}}&uarr;{{else if eq $dirSort 1}}&darr;{{end}}</a>
60+
<a class="field name" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextNameSort}}">Name{{if eq $sortKey "n"}}&uarr;{{else if eq $sortKey "N"}}&darr;{{end}}</a>
61+
<a class="field size" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextSizeSort}}">Size{{if eq $sortKey "s"}}&uarr;{{else if eq $sortKey "S"}}&darr;{{end}}</a>
62+
<a class="field time" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextTimeSort}}">Time{{if eq $sortKey "t"}}&uarr;{{else if eq $sortKey "T"}}&darr;{{end}}</a>
63+
</span>
64+
</li>
5765
<li class="dir parent">
58-
<a href="{{if .IsRoot}}./{{else}}../{{end}}{{.ContextQueryString}}" class="link">
59-
<span class="name">../</span>
60-
<span class="size"></span>
61-
<span class="time"></span>
66+
<a href="{{if .IsRoot}}./{{else}}../{{end}}{{.ContextQueryString}}" class="detail">
67+
<span class="field name">../</span>
68+
<span class="field size"></span>
69+
<span class="field time"></span>
6270
</a>
6371
</li>
6472
{{range .SubItemsHtml}}
6573
<li class="{{.Type}}">
66-
<a href="{{.Url}}" class="link">
67-
<span class="name">{{.DisplayName}}</span>
68-
<span class="size">{{.DisplaySize}}</span>
69-
<span class="time">{{.DisplayTime}}</span>
74+
<a href="{{.Url}}" class="detail">
75+
<span class="field name">{{.DisplayName}}</span>
76+
<span class="field size">{{.DisplaySize}}</span>
77+
<span class="field time">{{.DisplayTime}}</span>
7078
</a>
7179
{{if .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)">x</a>{{end}}
7280
</li>

‎src/tpl/page.html.go‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -60,19 +60,27 @@ return confirm('Delete?\n' + name);
6060
</script>
6161
{{end}}
6262
<ul class="item-list{{if .HasDeletable}} has-deletable{{end}}">
63+
<li class="header">{{$dirSort := .SortState.DirSort}}{{$sortKey := .SortState.Key}}
64+
<span class="detail">
65+
<a class="field dir" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextDirSort}}">Dir{{if eq $dirSort -1}}&uarr;{{else if eq $dirSort 1}}&darr;{{end}}</a>
66+
<a class="field name" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextNameSort}}">Name{{if eq $sortKey "n"}}&uarr;{{else if eq $sortKey "N"}}&darr;{{end}}</a>
67+
<a class="field size" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextSizeSort}}">Size{{if eq $sortKey "s"}}&uarr;{{else if eq $sortKey "S"}}&darr;{{end}}</a>
68+
<a class="field time" href="{{.SubItemPrefix}}{{"?sort="}}{{.SortState.NextTimeSort}}">Time{{if eq $sortKey "t"}}&uarr;{{else if eq $sortKey "T"}}&darr;{{end}}</a>
69+
</span>
70+
</li>
6371
<li class="dir parent">
64-
<a href="{{if .IsRoot}}./{{else}}../{{end}}{{.ContextQueryString}}" class="link">
65-
<span class="name">../</span>
66-
<span class="size"></span>
67-
<span class="time"></span>
72+
<a href="{{if .IsRoot}}./{{else}}../{{end}}{{.ContextQueryString}}" class="detail">
73+
<span class="field name">../</span>
74+
<span class="field size"></span>
75+
<span class="field time"></span>
6876
</a>
6977
</li>
7078
{{range .SubItemsHtml}}
7179
<li class="{{.Type}}">
72-
<a href="{{.Url}}" class="link">
73-
<span class="name">{{.DisplayName}}</span>
74-
<span class="size">{{.DisplaySize}}</span>
75-
<span class="time">{{.DisplayTime}}</span>
80+
<a href="{{.Url}}" class="detail">
81+
<span class="field name">{{.DisplayName}}</span>
82+
<span class="field size">{{.DisplaySize}}</span>
83+
<span class="field time">{{.DisplayTime}}</span>
7684
</a>
7785
{{if .DeleteUrl}}<a href="{{.DeleteUrl}}" class="delete" onclick="return confirmDelete(this)">x</a>{{end}}
7886
</li>

0 commit comments

Comments
 (0)