💄 Site > File > Header > Add style

site/src/components/file/template.html

@@ -1,18 +1,46 @@
 <div class="file" :class="[versionsActive && isCode ? 'version-active' : '']">
+
+    <!-- Header -->
     <header>
-        <a href="#" @click.prevent="onDifferencesClick" v-if="isCode">Differences <span v-if="differencesActive">(on)</span></a>
-        <a href="#" @click.prevent="onVersionsClick" v-if="isCode">Versions <span v-if="versionsActive">(on)</span></a>
-        <a :href="downloadUrl" download>Download</a>
-        <a href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">{{ this.copied ? 'Copied' : 'Copy' }}</a>
-        {{ content.path.directory }}/{{ content.name }}
+
+        <div class="path"><span class="directory">{{ content.path.directory }}/</span><span class="name">{{ content.name }}</span></div>
+
+        <a class="versions-toggle" :class="[versionsActive ? 'active' : '']" href="#" @click.prevent="onVersionsClick" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/versions.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/versions-hover.svg" alt="">
+        </a>
+
+        <a class="differences-toggle" :class="[differencesActive ? 'active' : '']" href="#" @click.prevent="onDifferencesClick" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/differences.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/differences-hover.svg" alt="">
+        </a>
+
+        <a class="copy" :class="[copied ? 'active' : '']" href="#" @click.prevent="onCopyClick" @mouseleave="onCopyMouseleave" v-if="isCode">
+            <img class="icon default" src="../../../static/svg/copy.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/copy-hover.svg" alt="">
+        </a>
+
+        <a class="download" :href="downloadUrl" download>
+            <img class="icon default" src="../../../static/svg/download.svg" alt="">
+            <img class="icon hover" src="../../../static/svg/download-hover.svg" alt="">
+        </a>
+
     </header>
+
+    <!-- Versions -->
     <versions :file="content" :content="content.versions" v-if="versionsActive && isCode"></versions>
+
+    <!-- Viewer / Code -->
     <viewer :differences-active="differencesActive" v-if="isCode"></viewer>
+
+    <!-- Preview -->
     <div class="preview" v-if="isImage">
-    	<img :src="downloadUrl">
+        <img :src="downloadUrl">
     </div>
+
+    <!-- Can't read -->
     <div class="cant-read" v-if="!isCode && !isImage">
-    	<br>Sorry, I can't read this file.
-    	<br>But you can <a :href="downloadUrl" download>download it</a>
+        <br>Sorry, I can't read this file.
+        <br>But you can <a :href="downloadUrl" download>download it</a>
     </div>
 </div>