Merge pull request #1769 from adrium/feat-icons

Add colorized file type icons

frontend/package.json

@@ -17,7 +17,7 @@
     "js-base64": "^2.5.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",
-    "material-design-icons": "^3.0.1",
+    "material-icons": "^1.10.5",
     "moment": "^2.24.0",
     "normalize.css": "^8.0.1",
     "noty": "^3.2.0-beta",

frontend/src/components/files/ListingItem.vue

@@ -9,6 +9,7 @@
     @drop="drop"
     @click="itemClick"
     :data-dir="isDir"
+    :data-type="type"
     :aria-label="name"
     :aria-selected="isSelected"
   >
@@ -17,7 +18,7 @@
         v-if="readOnly == undefined && type === 'image' && isThumbsEnabled"
         v-lazy="thumbnailUrl"
       />
-      <i v-else class="material-icons">{{ icon }}</i>
+      <i v-else class="material-icons"></i>
     </div>
 
     <div>
@@ -67,14 +68,6 @@ export default {
     isSelected() {
       return this.selected.indexOf(this.index) !== -1;
     },
-    icon() {
-      if (this.isDir) return "folder";
-      if (this.type === "image") return "insert_photo";
-      if (this.type === "audio") return "volume_up";
-      if (this.type === "video") return "movie";
-      if (this.type === "pdf") return "picture_as_pdf";
-      return "insert_drive_file";
-    },
     isDraggable() {
       return this.readOnly == undefined && this.user.perm.rename;
     },

frontend/src/css/_variables.css

@@ -4,4 +4,11 @@
   --red: #F44336;
   --dark-red: #D32F2F;
   --moon-grey: #f2f2f2;
+
+  --icon-red: #da4453;
+  --icon-orange: #f47750;
+  --icon-yellow: #fdbc4b;
+  --icon-green: #2ecc71;
+  --icon-blue: #1d99f3;
+  --icon-violet: #9b59b6;
 }

frontend/src/css/fonts.css

@@ -166,7 +166,7 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 
-@import "~material-design-icons/iconfont/material-icons.css";
+@import '~material-icons/iconfont/filled.css';
 
 .material-icons {
   font-size: 1.5rem;

frontend/src/css/listing-icons.css

@@ -0,0 +1,203 @@
+/* Icons */
+
+/* General */
+
+#listing [aria-label^="."] { opacity: 0.33 }
+#listing [aria-label$=".bak"] { opacity: 0.33 }
+
+#listing [data-type=audio] i::before { content: 'volume_up' }
+#listing [data-type=blob] i::before { content: 'insert_drive_file' }
+#listing [data-type=image] i::before { content: 'image' }
+#listing [data-type=pdf] i::before { content: 'description' }
+#listing [data-type=text] i::before { content: 'description' }
+#listing [data-type=video] i::before { content: 'movie' }
+
+/* #f90 - Image */
+
+#listing [aria-label$=".ai"] i::before,
+#listing [aria-label$=".odg"] i::before,
+#listing [aria-label$=".xcf"] i::before
+{ content: 'image' }
+
+/* #f90 - Presentation */
+
+#listing [aria-label$=".odp"] i::before,
+#listing [aria-label$=".ppt"] i::before,
+#listing [aria-label$=".pptx"] i::before
+{ content: 'slideshow' }
+
+/* #0f0 - Spreadsheet/Database */
+
+#listing [aria-label$=".csv"] i::before,
+#listing [aria-label$=".db"] i::before,
+#listing [aria-label$=".odb"] i::before,
+#listing [aria-label$=".ods"] i::before,
+#listing [aria-label$=".xls"] i::before,
+#listing [aria-label$=".xlsx"] i::before
+{ content: 'border_all' }
+
+/* #00f - Document */
+
+#listing [aria-label$=".doc"] i::before,
+#listing [aria-label$=".docx"] i::before,
+#listing [aria-label$=".log"] i::before,
+#listing [aria-label$=".odt"] i::before,
+#listing [aria-label$=".rtf"] i::before
+{ content: 'description' }
+
+/* #999 - Code */
+
+#listing [aria-label$=".c"] i::before,
+#listing [aria-label$=".cpp"] i::before,
+#listing [aria-label$=".cs"] i::before,
+#listing [aria-label$=".css"] i::before,
+#listing [aria-label$=".go"] i::before,
+#listing [aria-label$=".h"] i::before,
+#listing [aria-label$=".html"] i::before,
+#listing [aria-label$=".java"] i::before,
+#listing [aria-label$=".js"] i::before,
+#listing [aria-label$=".json"] i::before,
+#listing [aria-label$=".kt"] i::before,
+#listing [aria-label$=".php"] i::before,
+#listing [aria-label$=".py"] i::before,
+#listing [aria-label$=".rb"] i::before,
+#listing [aria-label$=".rs"] i::before,
+#listing [aria-label$=".vue"] i::before,
+#listing [aria-label$=".xml"] i::before,
+#listing [aria-label$=".yml"] i::before
+{ content: 'code' }
+
+/* #999 - Executable */
+
+#listing [aria-label$=".apk"] i::before,
+#listing [aria-label$=".bat"] i::before,
+#listing [aria-label$=".exe"] i::before,
+#listing [aria-label$=".jar"] i::before,
+#listing [aria-label$=".ps1"] i::before,
+#listing [aria-label$=".sh"] i::before
+{ content: 'web_asset' }
+
+/* #999 - Installer */
+
+#listing [aria-label$=".deb"] i::before,
+#listing [aria-label$=".msi"] i::before,
+#listing [aria-label$=".pkg"] i::before,
+#listing [aria-label$=".rpm"] i::before
+{ content: 'archive' }
+
+/* #999 - Compressed */
+
+#listing [aria-label$=".7z"] i::before,
+#listing [aria-label$=".bz2"] i::before,
+#listing [aria-label$=".cab"] i::before,
+#listing [aria-label$=".gz"] i::before,
+#listing [aria-label$=".rar"] i::before,
+#listing [aria-label$=".tar"] i::before,
+#listing [aria-label$=".xz"] i::before,
+#listing [aria-label$=".zip"] i::before,
+#listing [aria-label$=".zst"] i::before
+{ content: 'folder_zip' }
+
+/* #999 - Disk */
+
+#listing [aria-label$=".ccd"] i::before,
+#listing [aria-label$=".dmg"] i::before,
+#listing [aria-label$=".iso"] i::before,
+#listing [aria-label$=".mdf"] i::before,
+#listing [aria-label$=".vdi"] i::before,
+#listing [aria-label$=".vhd"] i::before,
+#listing [aria-label$=".vmdk"] i::before,
+#listing [aria-label$=".wim"] i::before
+{ content: 'album' }
+
+/* #999 - Font */
+
+#listing [aria-label$=".otf"] i::before,
+#listing [aria-label$=".ttf"] i::before,
+#listing [aria-label$=".woff"] i::before,
+#listing [aria-label$=".woff2"] i::before
+{ content: 'font_download' }
+
+/* Colors */
+
+/* General */
+
+#listing [data-type=audio] i  { color: var(--icon-yellow) }
+#listing [data-type=image] i { color: var(--icon-orange) }
+#listing [data-type=video] i { color: var(--icon-violet) }
+
+/* #f00 - Adobe/Oracle */
+
+#listing [aria-label$=".ai"] i,
+#listing [aria-label$=".java"] i,
+#listing [aria-label$=".jar"] i,
+#listing [aria-label$=".psd"] i,
+#listing [aria-label$=".rb"] i,
+#listing [data-type=pdf] i
+{ color: var(--icon-red) }
+
+/* #f90 - Image/Presentation */
+
+#listing [aria-label$=".html"] i,
+#listing [aria-label$=".odg"] i,
+#listing [aria-label$=".odp"] i,
+#listing [aria-label$=".ppt"] i,
+#listing [aria-label$=".pptx"] i,
+#listing [aria-label$=".vue"] i,
+#listing [aria-label$=".xcf"] i
+{ color: var(--icon-orange) }
+
+/* #ff0 - Various */
+
+#listing [aria-label$=".css"] i,
+#listing [aria-label$=".js"] i,
+#listing [aria-label$=".json"] i,
+#listing [aria-label$=".zip"] i
+{ color: var(--icon-yellow) }
+
+/* #0f0 - Spreadsheet/Google */
+
+#listing [aria-label$=".apk"] i,
+#listing [aria-label$=".dex"] i,
+#listing [aria-label$=".go"] i,
+#listing [aria-label$=".ods"] i,
+#listing [aria-label$=".xls"] i,
+#listing [aria-label$=".xlsx"] i
+{ color: var(--icon-green) }
+
+/* #00f - Document/Microsoft/Apple/Closed */
+
+#listing [aria-label$=".aac"] i,
+#listing [aria-label$=".bat"] i,
+#listing [aria-label$=".cab"] i,
+#listing [aria-label$=".cs"] i,
+#listing [aria-label$=".dmg"] i,
+#listing [aria-label$=".doc"] i,
+#listing [aria-label$=".docx"] i,
+#listing [aria-label$=".emf"] i,
+#listing [aria-label$=".exe"] i,
+#listing [aria-label$=".ico"] i,
+#listing [aria-label$=".mp2"] i,
+#listing [aria-label$=".mp3"] i,
+#listing [aria-label$=".mp4"] i,
+#listing [aria-label$=".mpg"] i,
+#listing [aria-label$=".msi"] i,
+#listing [aria-label$=".odt"] i,
+#listing [aria-label$=".ps1"] i,
+#listing [aria-label$=".rtf"] i,
+#listing [aria-label$=".vob"] i,
+#listing [aria-label$=".wim"] i
+{ color: var(--icon-blue) }
+
+/* #60f - Various */
+
+#listing [aria-label$=".iso"] i,
+#listing [aria-label$=".php"] i,
+#listing [aria-label$=".rar"] i
+{ color: var(--icon-violet) }
+
+/* Overrides */
+
+#listing [data-dir=true] i { color: var(--icon-blue) }
+#listing [data-dir=true] i::before { content: 'folder' }
+#listing [aria-selected=true] i { color: var(--item-selected) }

frontend/src/css/listing.css

@@ -1,3 +1,7 @@
+#listing {
+  --item-selected: white;
+}
+
 #listing h2 {
   margin: 0 0 0 0.5em;
   font-size: .9em;
@@ -127,7 +131,7 @@
 
 #listing .item[aria-selected=true] {
   background: var(--blue) !important;
-  color: #fff !important;
+  color: var(--item-selected) !important;
 }
 
 #listing.list .item div:first-of-type {
@@ -238,5 +242,5 @@
 
 #listing #multiple-selection p,
 #listing #multiple-selection i {
-  color: #fff;
+  color: var(--item-selected);
 }

frontend/src/css/styles.css

@@ -10,6 +10,7 @@
 @import "./base.css";
 @import "./header.css";
 @import "./listing.css";
+@import "./listing-icons.css";
 @import "./dashboard.css";
 @import "./login.css";