From 37895a9ab7c579983ef1b50ad5cc9e0130c721d3 Mon Sep 17 00:00:00 2001
From: brunosimon <simon.bruno.77@gmail.com>
Date: Sun, 3 Sep 2017 22:28:39 +0200
Subject: [PATCH] :lipstick: Site > Viewer > Add removed line icon

---
 site/src/components/files-tree-file/index.vue |  2 +-
 .../components/files-tree-folder/style.styl   | 12 +++++++++++-
 site/src/components/viewer/style.styl         | 17 +++++++++++++++--
 site/src/components/viewer/template.html      |  4 +++-
 site/static/svg/removed.svg                   | 19 +++++++++++++++++++
 5 files changed, 49 insertions(+), 5 deletions(-)
 create mode 100644 site/static/svg/removed.svg

diff --git a/site/src/components/files-tree-file/index.vue b/site/src/components/files-tree-file/index.vue
index a6fe49a..246515d 100644
--- a/site/src/components/files-tree-file/index.vue
+++ b/site/src/components/files-tree-file/index.vue
@@ -1,3 +1,3 @@
 <template src="./template.html"></template>
 <script src="./script.js"></script>
-<style src="./style.styl" lang="stylus"></style>
\ No newline at end of file
+<style src="./style.styl" lang="stylus" scoped></style>
\ No newline at end of file
diff --git a/site/src/components/files-tree-folder/style.styl b/site/src/components/files-tree-folder/style.styl
index 5ed3174..37b4cf2 100644
--- a/site/src/components/files-tree-folder/style.styl
+++ b/site/src/components/files-tree-folder/style.styl
@@ -1,2 +1,12 @@
 .name
-    cursor pointer
\ No newline at end of file
+    cursor pointer
+
+.icon
+    display inline-block
+    width 12px
+    height 12px
+
+    img
+        display inline-block
+        width 100%
+        height 100%
\ No newline at end of file
diff --git a/site/src/components/viewer/style.styl b/site/src/components/viewer/style.styl
index 70b5d9d..a30fa7e 100644
--- a/site/src/components/viewer/style.styl
+++ b/site/src/components/viewer/style.styl
@@ -59,8 +59,21 @@
 
         .removed
             height 1px
-            background #FD4141
-            opacity 0.4
+
+            &::after
+                content ''
+                position absolute
+                top 0
+                left 0
+                width 100%
+                height 100%
+                background #FD4141
+                opacity 0.4
+
+            .icon
+                position absolute
+                left 8px
+                top -8px
 
         .active
             height 20px
diff --git a/site/src/components/viewer/template.html b/site/src/components/viewer/template.html
index 6a7988a..08c5794 100644
--- a/site/src/components/viewer/template.html
+++ b/site/src/components/viewer/template.html
@@ -4,7 +4,9 @@
             <div class="line" v-for="line in linesCount">
                 <span class="highlight active" v-if="line === currentLine">!</span>
                 <span class="highlight added" v-if="version.addedLines.indexOf(line - 1) !== -1 && differencesActive"></span>
-                <span class="highlight removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive"></span>
+                <span class="highlight removed" v-if="version.removedLines.indexOf(line - 1) !== -1 && differencesActive">
+                    <img width="7" height="17" class="icon" src="../../../static/svg/removed.svg" alt="">
+                </span>
                 <span class="index">{{ line }}.</span>
                 <span class="question" @click.prevent="onLineClick(line)">?</span>
             </div>
diff --git a/site/static/svg/removed.svg b/site/static/svg/removed.svg
new file mode 100644
index 0000000..8d18ce2
--- /dev/null
+++ b/site/static/svg/removed.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="7px" height="17px" viewBox="0 0 7 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Ligne supp</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.599999964">
+        <g id="03.2.5---Questions-ouvert-click-styles.ccs:6" transform="translate(-300.000000, -251.000000)" fill="#FD4141">
+            <g id="Code" transform="translate(290.000000, 57.000000)">
+                <g id="Ligne-supp" transform="translate(10.000000, 194.000000)">
+                    <g id="Page-1">
+                        <path d="M3.49997934,0 C3.77469237,0 3.99591093,0.207185059 3.99591093,0.46454049 L3.99591093,5.89548336 L6.15294884,3.87497998 C6.34722178,3.69300399 6.66002236,3.69300399 6.8542953,3.87497998 C7.04856823,4.05695598 7.04856823,4.34995715 6.8542953,4.53193314 L3.85268588,7.34354897 C3.78074274,7.41090734 3.6925661,7.45314956 3.60019058,7.47061628 C3.56778972,7.47674822 3.53492598,7.48 3.50202919,7.48 C3.50163244,7.48 3.50120263,7.47996903 3.50080589,7.47993806 C3.50050833,7.47993806 3.50024383,7.48 3.49997934,7.48 C3.49630944,7.48 3.49280486,7.47956643 3.48920109,7.47950449 C3.47604237,7.4792877 3.46288365,7.47891607 3.44979106,7.47770827 C3.44754284,7.47749148 3.44536074,7.47702694 3.44314558,7.47677919 C3.42889581,7.47532363 3.4146791,7.47337256 3.40059465,7.47074016 C3.39871011,7.47036853 3.39689169,7.46984205 3.39504021,7.46947042 C3.3806582,7.46662123 3.3663423,7.46327654 3.35222478,7.45918859 L3.35215866,7.45918859 C3.33675172,7.454729 3.32154315,7.44955711 3.30656602,7.44364196 C3.24880652,7.42094142 3.19448548,7.38774226 3.14733891,7.34354897 L0.145729498,4.53193314 C-0.0485764992,4.34995715 -0.0485764992,4.05695598 0.145729498,3.87497998 C0.340002432,3.69300399 0.652836079,3.69300399 0.847109014,3.87497998 L3.00404775,5.89535948 L3.00404775,0.46454049 C3.00404775,0.207185059 3.22523324,0 3.49997934,0" id="Path"></path>
+                        <path d="M3.99591093,9.98454049 L3.99591093,15.4154834 L6.15294884,13.39498 C6.34722178,13.213004 6.66002236,13.213004 6.8542953,13.39498 C7.04856823,13.576956 7.04856823,13.8699571 6.8542953,14.0519331 L3.85268588,16.863549 C3.78074274,16.9309073 3.6925661,16.9731496 3.60019058,16.9906163 C3.56778972,16.9967482 3.53492598,17 3.50202919,17 C3.47604237,16.9992877 3.46288365,16.9989161 3.44979106,16.9977083 C3.42889581,16.9953236 3.4146791,16.9933726 3.40059465,16.9907402 C3.3806582,16.9866212 3.3663423,16.9832765 3.35222478,16.9791886 C3.33675172,16.974729 3.32154315,16.9695571 3.30656602,16.963642 C3.24880652,16.9409414 3.19448548,16.9077423 3.14733891,16.863549 L0.145729498,14.0519331 C-0.0485764992,13.8699571 -0.0485764992,13.576956 0.145729498,13.39498 C0.340002432,13.213004 0.652836079,13.213004 0.847109014,13.39498 L3.00404775,15.4153595 L3.00404775,9.98454049 C3.00404775,9.72718506 3.22523324,9.52 3.49997934,9.52 C3.77469237,9.52 3.99591093,9.72718506 3.99591093,9.98454049 Z" id="Path-Copy" transform="translate(3.500000, 13.260000) rotate(-180.000000) translate(-3.500000, -13.260000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file