💄 Site > Viewer > Add removed line icon

2017-09-03 22:28:39 +02:00
parent db8c5c7c93
commit 37895a9ab7
5 changed files with 49 additions and 5 deletions
@@ -1,3 +1,3 @@
 <template src="./template.html"></template>
 <script src="./script.js"></script>
-<style src="./style.styl" lang="stylus"></style>
+<style src="./style.styl" lang="stylus" scoped></style>
@@ -1,2 +1,12 @@
 .name
-    cursor pointer
+    cursor pointer
+
+.icon
+    display inline-block
+    width 12px
+    height 12px
+
+    img
+        display inline-block
+        width 100%
+        height 100%
@@ -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
@@ -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>
@@ -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>