feat(defaultTheme): add item list icon

Author: marjune163

src/tpl/defaultTheme/frontend/index.css

@@ -417,11 +417,81 @@ html.dragging::before {
 	padding-right: 2.2em;
 }
 
+.item-list .detail {
+	gap: 1em;
+}
+
 .item-list .field {
-	margin: 0 0 0 1em;
 	flex-shrink: 0;
 }
 
+/* icon */
+.item-list .icon {
+	position: relative;
+	width: 1em;
+	height: 1em;
+	color: #999;
+	border: 1px currentColor solid;
+}
+
+.item-list .icon::before {
+	content: '';
+	border: inherit;
+}
+
+/* icon - parent */
+.item-list .parent .icon {
+	border-top-color: transparent;
+	border-right-color: transparent;
+	border-bottom-left-radius: 0.3em;
+}
+
+.item-list .parent .icon::before {
+	position: absolute;
+	left: -0.32em;
+	top: -2px;
+	width: 0;
+	height: 0;
+	border-width: 0 0.3em 0.6em;
+	border-left-color: transparent;
+	border-right-color: transparent;
+}
+
+/* icon - dir */
+.item-list .dir .icon,
+.item-list .dir .icon::before {
+	background-image: linear-gradient(to bottom, #ffd, #fec);
+}
+
+.item-list .dir .icon::before {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 1em;
+	margin: 0 0 -1px -1px;
+	height: 0.6em;
+	transform: skewX(-30deg);
+	transform-origin: left bottom;
+}
+
+/* icon - file */
+.item-list .file .icon {
+	border-top-right-radius: 0.4em;
+	background-image: linear-gradient(to bottom, #fff, #f1f1f1);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.item-list .file .icon::before {
+	width: 0.7em;
+	height: 0.25em;
+	border-width: 1px 0;
+	border-style: dotted;
+}
+
+/* icon end */
+
 .item-list .name {
 	flex-grow: 1;
 	flex-shrink: 1;
@@ -438,6 +508,10 @@ html.dragging::before {
 	color: #666;
 }
 
+.item-list .size:empty {
+	display: none;
+}
+
 .item-list .time {
 	color: #999;
 	text-align: right;
@@ -564,6 +638,23 @@ html.dragging::before {
 		border-bottom-color: #222;
 	}
 
+	.item-list .icon {
+		color: #444;
+	}
+
+	.item-list .parent .icon {
+		color: #999
+	}
+
+	.item-list .dir .icon,
+	.item-list .dir .icon::before {
+		background-image: linear-gradient(to bottom, #c96, #a74)
+	}
+
+	.item-list .file .icon {
+		background-image: linear-gradient(to bottom, #ccc, #bbb)
+	}
+
 	.item-list .size {
 		color: #999;
 	}

src/tpl/defaultTheme/frontend/index.html

@@ -111,18 +111,20 @@ <h3>{{.Trans.UploadLabel}}</h3>
 	</li>
 	<li class="parent">
 		<a href="{{if .IsRoot}}./{{else}}../{{end}}{{$contextQueryString}}" class="detail">
-			<span class="field name" translate="no">../</span>
-			<span class="field size"></span>
-			<span class="field time"></span>
+		<span class="icon" aria-hidden="true"></span>
+		<span class="field name" translate="no">../</span>
+		<span class="field size"></span>
+		<span class="field time"></span>
 		</a>
 	</li>
 	{{end}}
 	{{range .SubItemsHtml}}
 	<li class="{{.Type}}">
 		<a href="{{.Url}}" class="detail">
-			<span class="field name" translate="no">{{.DisplayName}}</span>
-			<span class="field size">{{.DisplaySize}}</span>
-			<span class="field time">{{.DisplayTime}}</span>
+		<span class="icon" aria-hidden="true"></span>
+		<span class="field name" translate="no">{{.DisplayName}}</span>
+		<span class="field size">{{.DisplaySize}}</span>
+		<span class="field time">{{.DisplayTime}}</span>
 		</a>
 		{{if and (not $isSimple) .DeleteUrl}}<form class="delete" method="post" action="{{$SubItemPrefix}}?delete" onsubmit="return confirmDelete(event)"><input type="hidden" name="name" value="{{.DeleteUrl}}"/><input type="hidden" name="contextquerystring" value="{{$contextQueryString}}"/><button type="submit">x</button></form>{{end}}
 	</li>