Download as
Browse Code »

Commit ac98d74adba93332d198572e432e548ddfb83a9f

Authored by Dmitriy Zaporozhets
2 parents 05c5b770 76ad6046
Exists in spb-stable and in 3 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb

Merge branch 'file_css' into 'master' 

Better css class names for diff elements
Showing 10 changed files with 407 additions and 408 deletions   Show diff stats
app/assets/javascripts/main.js.coffee
  Diff comments   View file @ac98d74
... ... @@ -117,11 +117,11 @@ $ ->
117 117  
118 118  
119 119 # Commit show suppressed diff
120   - $(".content").on "click", ".supp_diff_link", ->
  120 + $(".diff-content").on "click", ".supp_diff_link", ->
121 121 $(@).next('table').show()
122 122 $(@).remove()
123 123  
124   - $(".content").on "click", ".js-details-expand", ->
  124 + $(".diff-content").on "click", ".js-details-expand", ->
125 125 $(@).next('.js-details-contain').removeClass("hide")
126 126 $(@).remove()
127 127  
... ...
app/assets/stylesheets/application.scss
  Diff comments   View file @ac98d74
... ... @@ -48,6 +48,7 @@
48 48 @import "sections/header.scss";
49 49 @import "sections/nav.scss";
50 50 @import "sections/commits.scss";
  51 +@import "sections/diff.scss";
51 52 @import "sections/issues.scss";
52 53 @import "sections/projects.scss";
53 54 @import "sections/snippets.scss";
... ...
app/assets/stylesheets/sections/commits.scss
  Diff comments   View file @ac98d74
... ... @@ -10,336 +10,6 @@
10 10 }
11 11 }
12 12  
13   -.file {
14   - border: 1px solid #CCC;
15   - margin-bottom: 1em;
16   -
17   - .header {
18   - @extend .clearfix;
19   - background: #DDD;
20   - border-bottom: 1px solid #CCC;
21   - padding: 5px 5px 5px 10px;
22   - color: #555;
23   -
24   - > span {
25   - font-family: $monospace_font;
26   - font-size: 14px;
27   - line-height: 2;
28   - }
29   -
30   - .diff-btn-group {
31   - float: right;
32   -
33   - .btn {
34   - background-color: #EEE;
35   - color: #666;
36   - font-weight: bolder;
37   - }
38   - }
39   -
40   - .commit-short-id {
41   - font-family: $monospace_font;
42   - font-size: smaller;
43   - }
44   -
45   - .file-mode {
46   - font-family: $monospace_font;
47   - }
48   - }
49   - .content {
50   - overflow: auto;
51   - overflow-y: hidden;
52   - background: #FFF;
53   - color: #333;
54   - font-size: 12px;
55   - .old {
56   - span.idiff {
57   - background-color: #FAA;
58   - }
59   - }
60   - .new {
61   - span.idiff {
62   - background-color: #AFA;
63   - }
64   - }
65   -
66   - table {
67   - width: 100%;
68   - font-family: $monospace_font;
69   - border: none;
70   - margin: 0px;
71   - padding: 0px;
72   - td {
73   - line-height: 18px;
74   - font-size: 12px;
75   - }
76   - }
77   - .old_line, .new_line, .diff_line {
78   - margin: 0px;
79   - padding: 0px;
80   - border: none;
81   - background: #EEE;
82   - color: #666;
83   - padding: 0px 5px;
84   - border-right: 1px solid #ccc;
85   - text-align: right;
86   - min-width: 35px;
87   - max-width: 50px;
88   - width: 35px;
89   - @include user-select(none);
90   - a {
91   - float: left;
92   - width: 35px;
93   - font-weight: normal;
94   - color: #666;
95   - &:hover {
96   - text-decoration: underline;
97   - }
98   - }
99   - &.new {
100   - background: #CFD;
101   - }
102   - &.old {
103   - background: #FDD;
104   - }
105   - }
106   - .diff_line {
107   - padding: 0;
108   - }
109   - .line_holder {
110   - &.old .old_line,
111   - &.old .new_line {
112   - background: #FCC;
113   - border-color: #E7BABA;
114   - }
115   - &.new .old_line,
116   - &.new .new_line {
117   - background: #CFC;
118   - border-color: #B9ECB9;
119   - }
120   - }
121   - .line_content {
122   - display: block;
123   - white-space: pre;
124   - height: 18px;
125   - margin: 0px;
126   - padding: 0px 0.5em;
127   - border: none;
128   - &.new {
129   - background: #CFD;
130   - }
131   - &.old {
132   - background: #FDD;
133   - }
134   - &.matched {
135   - color: #ccc;
136   - background: #fafafa;
137   - }
138   - &.parallel {
139   - display: table-cell;
140   - overflow: hidden;
141   - width: 50%;
142   - }
143   - }
144   - }
145   - .image {
146   - background: #ddd;
147   - text-align: center;
148   - padding: 30px;
149   - .wrap{
150   - display: inline-block;
151   - }
152   -
153   - .frame {
154   - display: inline-block;
155   - background-color: #fff;
156   - line-height: 0;
157   - img{
158   - border: 1px solid #FFF;
159   - background: url('trans_bg.gif');
160   - max-width: 100%;
161   - }
162   - &.deleted {
163   - border: 1px solid $deleted;
164   - }
165   -
166   - &.added {
167   - border: 1px solid $added;
168   - }
169   - }
170   - .image-info{
171   - font-size: 12px;
172   - margin: 5px 0 0 0;
173   - color: grey;
174   - }
175   -
176   - .view.swipe{
177   - position: relative;
178   -
179   - .swipe-frame{
180   - display: block;
181   - margin: auto;
182   - position: relative;
183   - }
184   - .swipe-wrap{
185   - overflow: hidden;
186   - border-left: 1px solid #999;
187   - position: absolute;
188   - display: block;
189   - top: 13px;
190   - right: 7px;
191   - }
192   - .frame{
193   - top: 0;
194   - right: 0;
195   - position: absolute;
196   - &.deleted{
197   - margin: 0;
198   - display: block;
199   - top: 13px;
200   - right: 7px;
201   - }
202   - }
203   - .swipe-bar{
204   - display: block;
205   - height: 100%;
206   - width: 15px;
207   - z-index: 100;
208   - position: absolute;
209   - cursor: pointer;
210   - &:hover{
211   - .top-handle{
212   - background-position: -15px 3px;
213   - }
214   - .bottom-handle{
215   - background-position: -15px -11px;
216   - }
217   - };
218   - .top-handle{
219   - display: block;
220   - height: 14px;
221   - width: 15px;
222   - position: absolute;
223   - top: 0px;
224   - background: url('swipemode_sprites.gif') 0 3px no-repeat;
225   - }
226   - .bottom-handle{
227   - display: block;
228   - height: 14px;
229   - width: 15px;
230   - position: absolute;
231   - bottom: 0px;
232   - background: url('swipemode_sprites.gif') 0 -11px no-repeat;
233   - }
234   - }
235   - } //.view.swipe
236   - .view.onion-skin{
237   - .onion-skin-frame{
238   - display: block;
239   - margin: auto;
240   - position: relative;
241   - }
242   - .frame.added, .frame.deleted {
243   - position: absolute;
244   - display: block;
245   - top: 0px;
246   - left: 0px;
247   - }
248   - .controls{
249   - display: block;
250   - height: 14px;
251   - width: 300px;
252   - z-index: 100;
253   - position: absolute;
254   - bottom: 0px;
255   - left: 50%;
256   - margin-left: -150px;
257   -
258   - .drag-track{
259   - display: block;
260   - position: absolute;
261   - left: 12px;
262   - height: 10px;
263   - width: 276px;
264   - background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
265   - }
266   -
267   - .dragger {
268   - display: block;
269   - position: absolute;
270   - left: 0px;
271   - top: 0px;
272   - height: 14px;
273   - width: 14px;
274   - background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
275   - cursor: pointer;
276   - }
277   -
278   - .transparent {
279   - display: block;
280   - position: absolute;
281   - top: 2px;
282   - right: 0px;
283   - height: 10px;
284   - width: 10px;
285   - background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
286   - }
287   -
288   - .opaque {
289   - display: block;
290   - position: absolute;
291   - top: 2px;
292   - left: 0px;
293   - height: 10px;
294   - width: 10px;
295   - background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
296   - }
297   - }
298   - } //.view.onion-skin
299   - }
300   - .view-modes{
301   -
302   - padding: 10px;
303   - text-align: center;
304   -
305   - background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
306   - background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
307   - background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
308   - background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
309   - background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
310   -
311   - ul, li{
312   - list-style: none;
313   - margin: 0;
314   - padding: 0;
315   - display: inline-block;
316   - }
317   -
318   - li{
319   - color: grey;
320   - border-left: 1px solid #c1c1c1;
321   - padding: 0 12px 0 16px;
322   - cursor: pointer;
323   - &:first-child{
324   - border-left: none;
325   - }
326   - &:hover{
327   - text-decoration: underline;
328   - }
329   - &.active{
330   - &:hover{
331   - text-decoration: none;
332   - }
333   - cursor: default;
334   - color: #333;
335   - }
336   - &.disabled{
337   - display: none;
338   - }
339   - }
340   - }
341   -}
342   -
343 13 /** COMMIT BLOCK **/
344 14 .commit-title{
345 15 display: block;
... ...
app/assets/stylesheets/sections/diff.scss 0 → 100644
  Diff comments   View file @ac98d74
... ... @@ -0,0 +1,329 @@
  1 +.diff-file {
  2 + border: 1px solid #CCC;
  3 + margin-bottom: 1em;
  4 +
  5 + .diff-header {
  6 + @extend .clearfix;
  7 + background: #DDD;
  8 + border-bottom: 1px solid #CCC;
  9 + padding: 5px 5px 5px 10px;
  10 + color: #555;
  11 +
  12 + > span {
  13 + font-family: $monospace_font;
  14 + font-size: 14px;
  15 + line-height: 2;
  16 + }
  17 +
  18 + .diff-btn-group {
  19 + float: right;
  20 +
  21 + .btn {
  22 + background-color: #EEE;
  23 + color: #666;
  24 + font-weight: bolder;
  25 + }
  26 + }
  27 +
  28 + .commit-short-id {
  29 + font-family: $monospace_font;
  30 + font-size: smaller;
  31 + }
  32 +
  33 + .file-mode {
  34 + font-family: $monospace_font;
  35 + }
  36 + }
  37 + .diff-content {
  38 + overflow: auto;
  39 + overflow-y: hidden;
  40 + background: #FFF;
  41 + color: #333;
  42 + font-size: 12px;
  43 + .old {
  44 + span.idiff {
  45 + background-color: #FAA;
  46 + }
  47 + }
  48 + .new {
  49 + span.idiff {
  50 + background-color: #AFA;
  51 + }
  52 + }
  53 +
  54 + table {
  55 + width: 100%;
  56 + font-family: $monospace_font;
  57 + border: none;
  58 + margin: 0px;
  59 + padding: 0px;
  60 + td {
  61 + line-height: 18px;
  62 + font-size: 12px;
  63 + }
  64 + }
  65 + .old_line, .new_line, .diff_line {
  66 + margin: 0px;
  67 + padding: 0px;
  68 + border: none;
  69 + background: #EEE;
  70 + color: #666;
  71 + padding: 0px 5px;
  72 + border-right: 1px solid #ccc;
  73 + text-align: right;
  74 + min-width: 35px;
  75 + max-width: 50px;
  76 + width: 35px;
  77 + @include user-select(none);
  78 + a {
  79 + float: left;
  80 + width: 35px;
  81 + font-weight: normal;
  82 + color: #666;
  83 + &:hover {
  84 + text-decoration: underline;
  85 + }
  86 + }
  87 + &.new {
  88 + background: #CFD;
  89 + }
  90 + &.old {
  91 + background: #FDD;
  92 + }
  93 + }
  94 + .diff_line {
  95 + padding: 0;
  96 + }
  97 + .line_holder {
  98 + &.old .old_line,
  99 + &.old .new_line {
  100 + background: #FCC;
  101 + border-color: #E7BABA;
  102 + }
  103 + &.new .old_line,
  104 + &.new .new_line {
  105 + background: #CFC;
  106 + border-color: #B9ECB9;
  107 + }
  108 + }
  109 + .line_content {
  110 + display: block;
  111 + white-space: pre;
  112 + height: 18px;
  113 + margin: 0px;
  114 + padding: 0px 0.5em;
  115 + border: none;
  116 + &.new {
  117 + background: #CFD;
  118 + }
  119 + &.old {
  120 + background: #FDD;
  121 + }
  122 + &.matched {
  123 + color: #ccc;
  124 + background: #fafafa;
  125 + }
  126 + &.parallel {
  127 + display: table-cell;
  128 + overflow: hidden;
  129 + width: 50%;
  130 + }
  131 + }
  132 + }
  133 + .image {
  134 + background: #ddd;
  135 + text-align: center;
  136 + padding: 30px;
  137 + .wrap{
  138 + display: inline-block;
  139 + }
  140 +
  141 + .frame {
  142 + display: inline-block;
  143 + background-color: #fff;
  144 + line-height: 0;
  145 + img{
  146 + border: 1px solid #FFF;
  147 + background: url('trans_bg.gif');
  148 + max-width: 100%;
  149 + }
  150 + &.deleted {
  151 + border: 1px solid $deleted;
  152 + }
  153 +
  154 + &.added {
  155 + border: 1px solid $added;
  156 + }
  157 + }
  158 + .image-info{
  159 + font-size: 12px;
  160 + margin: 5px 0 0 0;
  161 + color: grey;
  162 + }
  163 +
  164 + .view.swipe{
  165 + position: relative;
  166 +
  167 + .swipe-frame{
  168 + display: block;
  169 + margin: auto;
  170 + position: relative;
  171 + }
  172 + .swipe-wrap{
  173 + overflow: hidden;
  174 + border-left: 1px solid #999;
  175 + position: absolute;
  176 + display: block;
  177 + top: 13px;
  178 + right: 7px;
  179 + }
  180 + .frame{
  181 + top: 0;
  182 + right: 0;
  183 + position: absolute;
  184 + &.deleted{
  185 + margin: 0;
  186 + display: block;
  187 + top: 13px;
  188 + right: 7px;
  189 + }
  190 + }
  191 + .swipe-bar{
  192 + display: block;
  193 + height: 100%;
  194 + width: 15px;
  195 + z-index: 100;
  196 + position: absolute;
  197 + cursor: pointer;
  198 + &:hover{
  199 + .top-handle{
  200 + background-position: -15px 3px;
  201 + }
  202 + .bottom-handle{
  203 + background-position: -15px -11px;
  204 + }
  205 + };
  206 + .top-handle{
  207 + display: block;
  208 + height: 14px;
  209 + width: 15px;
  210 + position: absolute;
  211 + top: 0px;
  212 + background: url('swipemode_sprites.gif') 0 3px no-repeat;
  213 + }
  214 + .bottom-handle{
  215 + display: block;
  216 + height: 14px;
  217 + width: 15px;
  218 + position: absolute;
  219 + bottom: 0px;
  220 + background: url('swipemode_sprites.gif') 0 -11px no-repeat;
  221 + }
  222 + }
  223 + } //.view.swipe
  224 + .view.onion-skin{
  225 + .onion-skin-frame{
  226 + display: block;
  227 + margin: auto;
  228 + position: relative;
  229 + }
  230 + .frame.added, .frame.deleted {
  231 + position: absolute;
  232 + display: block;
  233 + top: 0px;
  234 + left: 0px;
  235 + }
  236 + .controls{
  237 + display: block;
  238 + height: 14px;
  239 + width: 300px;
  240 + z-index: 100;
  241 + position: absolute;
  242 + bottom: 0px;
  243 + left: 50%;
  244 + margin-left: -150px;
  245 +
  246 + .drag-track{
  247 + display: block;
  248 + position: absolute;
  249 + left: 12px;
  250 + height: 10px;
  251 + width: 276px;
  252 + background: url('onion_skin_sprites.gif') -4px -20px repeat-x;
  253 + }
  254 +
  255 + .dragger {
  256 + display: block;
  257 + position: absolute;
  258 + left: 0px;
  259 + top: 0px;
  260 + height: 14px;
  261 + width: 14px;
  262 + background: url('onion_skin_sprites.gif') 0px -34px repeat-x;
  263 + cursor: pointer;
  264 + }
  265 +
  266 + .transparent {
  267 + display: block;
  268 + position: absolute;
  269 + top: 2px;
  270 + right: 0px;
  271 + height: 10px;
  272 + width: 10px;
  273 + background: url('onion_skin_sprites.gif') -2px 0px no-repeat;
  274 + }
  275 +
  276 + .opaque {
  277 + display: block;
  278 + position: absolute;
  279 + top: 2px;
  280 + left: 0px;
  281 + height: 10px;
  282 + width: 10px;
  283 + background: url('onion_skin_sprites.gif') -2px -10px no-repeat;
  284 + }
  285 + }
  286 + } //.view.onion-skin
  287 + }
  288 + .view-modes{
  289 +
  290 + padding: 10px;
  291 + text-align: center;
  292 +
  293 + background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
  294 + background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
  295 + background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
  296 + background-image: -ms-linear-gradient(#eee 6.6%, #dfdfdf);
  297 + background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
  298 +
  299 + ul, li{
  300 + list-style: none;
  301 + margin: 0;
  302 + padding: 0;
  303 + display: inline-block;
  304 + }
  305 +
  306 + li{
  307 + color: grey;
  308 + border-left: 1px solid #c1c1c1;
  309 + padding: 0 12px 0 16px;
  310 + cursor: pointer;
  311 + &:first-child{
  312 + border-left: none;
  313 + }
  314 + &:hover{
  315 + text-decoration: underline;
  316 + }
  317 + &.active{
  318 + &:hover{
  319 + text-decoration: none;
  320 + }
  321 + cursor: default;
  322 + color: #333;
  323 + }
  324 + &.disabled{
  325 + display: none;
  326 + }
  327 + }
  328 + }
  329 +}
... ...
app/assets/stylesheets/sections/notes.scss
  Diff comments   View file @ac98d74
... ... @@ -47,13 +47,13 @@ ul.notes {
47 47 .discussion-body {
48 48 margin-left: 50px;
49 49  
50   - .file,
  50 + .diff-file,
51 51 .discussion-hidden,
52 52 .notes {
53 53 @extend .borders;
54 54 background-color: #F9F9F9;
55 55 }
56   - .file .notes {
  56 + .diff-file .notes {
57 57 /* reset */
58 58 background: inherit;
59 59 border: none;
... ... @@ -114,7 +114,7 @@ ul.notes {
114 114 }
115 115 }
116 116  
117   -.file .notes_holder {
  117 +.diff-file .notes_holder {
118 118 font-size: 13px;
119 119 line-height: 18px;
120 120 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
... ... @@ -184,7 +184,7 @@ ul.notes {
184 184 }
185 185 }
186 186 }
187   -.file .note .note-actions {
  187 +.diff-file .note .note-actions {
188 188 right: 0;
189 189 top: 0;
190 190 }
... ... @@ -195,7 +195,7 @@ ul.notes {
195 195 * Line note button on the side of diffs
196 196 */
197 197  
198   -.file tr.line_holder {
  198 +.diff-file tr.line_holder {
199 199 .add-diff-note {
200 200 background: url("diff_note_add.png") no-repeat left 0;
201 201 height: 22px;
... ... @@ -235,22 +235,25 @@ ul.notes {
235 235 .reply-btn {
236 236 @extend .btn-primary;
237 237 }
238   -.file .content tr.line_holder:hover {
239   - &> td.line_content {
240   - background: $hover !important;
241   - border-color: darken($hover, 10%) !important;
  238 +.diff-file .diff-content {
  239 + tr.line_holder:hover {
  240 + &> td.line_content {
  241 + background: $hover !important;
  242 + border-color: darken($hover, 10%) !important;
  243 + }
  244 + &> td.new_line,
  245 + &> td.old_line {
  246 + background: darken($hover, 4%) !important;
  247 + border-color: darken($hover, 10%) !important;
  248 + }
242 249 }
243   - &> td.new_line,
244   - &> td.old_line {
245   - background: darken($hover, 4%) !important;
246   - border-color: darken($hover, 10%) !important;
  250 +
  251 + tr.line_holder:hover > td .line_note_link {
  252 + opacity: 1.0;
  253 + filter: alpha(opacity=100);
247 254 }
248 255 }
249   -.file .content tr.line_holder:hover > td .line_note_link {
250   - opacity: 1.0;
251   - filter: alpha(opacity=100);
252   -}
253   -.file,
  256 +.diff-file,
254 257 .discussion {
255 258 .new_note {
256 259 margin: 0;
... ...
app/views/projects/commits/_diffs.html.haml
  Diff comments   View file @ac98d74
... ... @@ -44,8 +44,8 @@
44 44 - file = project.repository.blob_at(@commit.id, diff.new_path)
45 45 - file = project.repository.blob_at(@commit.parent_id, diff.old_path) unless file
46 46 - next unless file
47   - .file{id: "diff-#{i}"}
48   - .header
  47 + .diff-file{id: "diff-#{i}"}
  48 + .diff-header
49 49 - if diff.deleted_file
50 50 %span= diff.old_path
51 51  
... ... @@ -70,7 +70,7 @@
70 70 %span.commit-short-id= @commit.short_id(6)
71 71  
72 72  
73   - .content
  73 + .diff-content
74 74 -# Skipp all non non-supported blobs
75 75 - next unless file.respond_to?('text?')
76 76 - if file.text?
... ...
app/views/projects/notes/_discussion.html.haml
  Diff comments   View file @ac98d74
... ... @@ -36,21 +36,17 @@
36 36 .discussion-body
37 37 - if note.for_diff_line?
38 38 - if note.active?
39   - .content
40   - .file= render "projects/notes/discussion_diff", discussion_notes: discussion_notes, note: note
  39 + = render "projects/notes/discussion_diff", discussion_notes: discussion_notes, note: note
41 40 - else
42 41 = link_to 'show outdated discussion', '#', class: 'js-show-outdated-discussion'
43 42 %div.hide.outdated-discussion
44   - .content
45   - .notes{ rel: discussion_notes.first.discussion_id }
46   - = render discussion_notes
47   -
  43 + .notes{ rel: discussion_notes.first.discussion_id }
  44 + = render discussion_notes
48 45  
49 46 - else
50   - .content
51   - .notes{ rel: discussion_notes.first.discussion_id }
52   - = render discussion_notes
53   - = render "projects/notes/discussion_reply_button", note: discussion_notes.first
  47 + .notes{ rel: discussion_notes.first.discussion_id }
  48 + = render discussion_notes
  49 + = render "projects/notes/discussion_reply_button", note: discussion_notes.first
54 50  
55 51 -# will be shown when the other one is hidden
56 52 .discussion-hidden.content.hide
... ... @@ -59,4 +55,3 @@
59 55 = link_to "javascript:;", class: "js-details-target js-toggler-target" do
60 56 %i.icon-eye-open
61 57 Show
62   -
... ...
app/views/projects/notes/_discussion_diff.html.haml
  Diff comments   View file @ac98d74
1 1 - diff = note.diff
2   -.header
3   - - if diff.deleted_file
4   - %span= diff.old_path
5   - - else
6   - %span= diff.new_path
7   - - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
8   - %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
9   - %br/
10   -.content
11   - %table
12   - - each_diff_line_near(diff, note.diff_file_index, note.line_code) do |line, type, line_code, line_new, line_old|
13   - %tr.line_holder{ id: line_code }
14   - - if type == "match"
15   - %td.old_line= "..."
16   - %td.new_line= "..."
17   - %td.line_content.matched= line
18   - - else
19   - %td.old_line= raw(type == "new" ? " " : line_old)
20   - %td.new_line= raw(type == "old" ? " " : line_new)
21   - %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw "#{line}  "
  2 +.diff-file
  3 + .diff-header
  4 + - if diff.deleted_file
  5 + %span= diff.old_path
  6 + - else
  7 + %span= diff.new_path
  8 + - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
  9 + %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
  10 + %br/
  11 + .diff-content
  12 + %table
  13 + - each_diff_line_near(diff, note.diff_file_index, note.line_code) do |line, type, line_code, line_new, line_old|
  14 + %tr.line_holder{ id: line_code }
  15 + - if type == "match"
  16 + %td.old_line= "..."
  17 + %td.new_line= "..."
  18 + %td.line_content.matched= line
  19 + - else
  20 + %td.old_line= raw(type == "new" ? " " : line_old)
  21 + %td.new_line= raw(type == "old" ? " " : line_new)
  22 + %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw "#{line}  "
22 23  
23   - - if line_code == note.line_code
24   - = render "projects/notes/diff_notes_with_reply", notes: discussion_notes
  24 + - if line_code == note.line_code
  25 + = render "projects/notes/diff_notes_with_reply", notes: discussion_notes
... ...
features/steps/shared/diff_note.rb
  Diff comments   View file @ac98d74
... ... @@ -2,7 +2,7 @@ module SharedDiffNote
2 2 include Spinach::DSL
3 3  
4 4 Given 'I cancel the diff comment' do
5   - within(".file") do
  5 + within(".diff-file") do
6 6 find(".js-close-discussion-note-form").click
7 7 end
8 8 end
... ... @@ -13,14 +13,14 @@ module SharedDiffNote
13 13 end
14 14  
15 15 Given 'I haven\'t written any diff comment text' do
16   - within(".file") do
  16 + within(".diff-file") do
17 17 fill_in "note[note]", with: ""
18 18 end
19 19 end
20 20  
21 21 Given 'I leave a diff comment like "Typo, please fix"' do
22 22 find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_29_14"]').click
23   - within(".file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
  23 + within(".diff-file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
24 24 fill_in "note[note]", with: "Typo, please fix"
25 25 find(".js-comment-button").trigger("click")
26 26 sleep 0.05
... ... @@ -29,7 +29,7 @@ module SharedDiffNote
29 29  
30 30 Given 'I preview a diff comment text like "Should fix it :smile:"' do
31 31 find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_29_14"]').click
32   - within(".file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
  32 + within(".diff-file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_29_14']") do
33 33 fill_in "note[note]", with: "Should fix it :smile:"
34 34 find(".js-note-preview-button").trigger("click")
35 35 end
... ... @@ -38,7 +38,7 @@ module SharedDiffNote
38 38 Given 'I preview another diff comment text like "DRY this up"' do
39 39 find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_57_41"]').click
40 40  
41   - within(".file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_57_41']") do
  41 + within(".diff-file form[rel$='586fb7c4e1add2d4d24e27566ed7064680098646_57_41']") do
42 42 fill_in "note[note]", with: "DRY this up"
43 43 find(".js-note-preview-button").trigger("click")
44 44 end
... ... @@ -53,13 +53,13 @@ module SharedDiffNote
53 53 end
54 54  
55 55 Given 'I write a diff comment like ":-1: I don\'t like this"' do
56   - within(".file") do
  56 + within(".diff-file") do
57 57 fill_in "note[note]", with: ":-1: I don\'t like this"
58 58 end
59 59 end
60 60  
61 61 Given 'I submit the diff comment' do
62   - within(".file") do
  62 + within(".diff-file") do
63 63 click_button("Add Comment")
64 64 end
65 65 end
... ... @@ -67,49 +67,49 @@ module SharedDiffNote
67 67  
68 68  
69 69 Then 'I should not see the diff comment form' do
70   - within(".file") do
  70 + within(".diff-file") do
71 71 page.should_not have_css("form.new_note")
72 72 end
73 73 end
74 74  
75 75 Then 'I should not see the diff comment preview button' do
76   - within(".file") do
  76 + within(".diff-file") do
77 77 page.should have_css(".js-note-preview-button", visible: false)
78 78 end
79 79 end
80 80  
81 81 Then 'I should not see the diff comment text field' do
82   - within(".file") do
  82 + within(".diff-file") do
83 83 page.should have_css(".js-note-text", visible: false)
84 84 end
85 85 end
86 86  
87 87 Then 'I should only see one diff form' do
88   - within(".file") do
  88 + within(".diff-file") do
89 89 page.should have_css("form.new_note", count: 1)
90 90 end
91 91 end
92 92  
93 93 Then 'I should see a diff comment form with ":-1: I don\'t like this"' do
94   - within(".file") do
  94 + within(".diff-file") do
95 95 page.should have_field("note[note]", with: ":-1: I don\'t like this")
96 96 end
97 97 end
98 98  
99 99 Then 'I should see a diff comment saying "Typo, please fix"' do
100   - within(".file .note") do
  100 + within(".diff-file .note") do
101 101 page.should have_content("Typo, please fix")
102 102 end
103 103 end
104 104  
105 105 Then 'I should see a discussion reply button' do
106   - within(".file") do
  106 + within(".diff-file") do
107 107 page.should have_link("Reply")
108 108 end
109 109 end
110 110  
111 111 Then 'I should see a temporary diff comment form' do
112   - within(".file") do
  112 + within(".diff-file") do
113 113 page.should have_css(".js-temp-notes-holder form.new_note")
114 114 end
115 115 end
... ... @@ -119,37 +119,37 @@ module SharedDiffNote
119 119 end
120 120  
121 121 Then 'I should see an empty diff comment form' do
122   - within(".file") do
  122 + within(".diff-file") do
123 123 page.should have_field("note[note]", with: "")
124 124 end
125 125 end
126 126  
127 127 Then 'I should see the cancel comment button' do
128   - within(".file form") do
  128 + within(".diff-file form") do
129 129 page.should have_css(".js-close-discussion-note-form", text: "Cancel")
130 130 end
131 131 end
132 132  
133 133 Then 'I should see the diff comment preview' do
134   - within(".file form") do
  134 + within(".diff-file form") do
135 135 page.should have_css(".js-note-preview", visible: false)
136 136 end
137 137 end
138 138  
139 139 Then 'I should see the diff comment edit button' do
140   - within(".file") do
  140 + within(".diff-file") do
141 141 page.should have_css(".js-note-edit-button", visible: true)
142 142 end
143 143 end
144 144  
145 145 Then 'I should see the diff comment preview button' do
146   - within(".file") do
  146 + within(".diff-file") do
147 147 page.should have_css(".js-note-preview-button", visible: true)
148 148 end
149 149 end
150 150  
151 151 Then 'I should see two separate previews' do
152   - within(".file") do
  152 + within(".diff-file") do
153 153 page.should have_css(".js-note-preview", visible: true, count: 2)
154 154 page.should have_content("Should fix it")
155 155 page.should have_content("DRY this up")
... ...
spec/features/notes_on_merge_requests_spec.rb
  Diff comments   View file @ac98d74
... ... @@ -166,7 +166,7 @@ describe "On a merge request diff", js: true, focus: true do
166 166 end
167 167  
168 168 it "should be removed when canceled" do
169   - within(".file form[rel$='4735dfc552ad7bf15ca468adc3cad9d05b624490_172_185']") do
  169 + within(".diff-file form[rel$='4735dfc552ad7bf15ca468adc3cad9d05b624490_172_185']") do
170 170 find(".js-close-discussion-note-form").trigger("click")
171 171 end
172 172  
... ...