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,11 +117,11 @@ $ ->
117 117
118 118
119 # Commit show suppressed diff 119 # Commit show suppressed diff
120 - $(".content").on "click", ".supp_diff_link", -> 120 + $(".diff-content").on "click", ".supp_diff_link", ->
121 $(@).next('table').show() 121 $(@).next('table').show()
122 $(@).remove() 122 $(@).remove()
123 123
124 - $(".content").on "click", ".js-details-expand", -> 124 + $(".diff-content").on "click", ".js-details-expand", ->
125 $(@).next('.js-details-contain').removeClass("hide") 125 $(@).next('.js-details-contain').removeClass("hide")
126 $(@).remove() 126 $(@).remove()
127 127
app/assets/stylesheets/application.scss
  Diff comments   View file @ac98d74
@@ -48,6 +48,7 @@ @@ -48,6 +48,7 @@
48 @import "sections/header.scss"; 48 @import "sections/header.scss";
49 @import "sections/nav.scss"; 49 @import "sections/nav.scss";
50 @import "sections/commits.scss"; 50 @import "sections/commits.scss";
  51 +@import "sections/diff.scss";
51 @import "sections/issues.scss"; 52 @import "sections/issues.scss";
52 @import "sections/projects.scss"; 53 @import "sections/projects.scss";
53 @import "sections/snippets.scss"; 54 @import "sections/snippets.scss";
app/assets/stylesheets/sections/commits.scss
  Diff comments   View file @ac98d74
@@ -10,336 +10,6 @@ @@ -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 /** COMMIT BLOCK **/ 13 /** COMMIT BLOCK **/
344 .commit-title{ 14 .commit-title{
345 display: block; 15 display: block;
app/assets/stylesheets/sections/diff.scss 0 → 100644
  Diff comments   View file @ac98d74
@@ -0,0 +1,329 @@ @@ -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,13 +47,13 @@ ul.notes {
47 .discussion-body { 47 .discussion-body {
48 margin-left: 50px; 48 margin-left: 50px;
49 49
50 - .file, 50 + .diff-file,
51 .discussion-hidden, 51 .discussion-hidden,
52 .notes { 52 .notes {
53 @extend .borders; 53 @extend .borders;
54 background-color: #F9F9F9; 54 background-color: #F9F9F9;
55 } 55 }
56 - .file .notes { 56 + .diff-file .notes {
57 /* reset */ 57 /* reset */
58 background: inherit; 58 background: inherit;
59 border: none; 59 border: none;
@@ -114,7 +114,7 @@ ul.notes { @@ -114,7 +114,7 @@ ul.notes {
114 } 114 }
115 } 115 }
116 116
117 -.file .notes_holder { 117 +.diff-file .notes_holder {
118 font-size: 13px; 118 font-size: 13px;
119 line-height: 18px; 119 line-height: 18px;
120 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 120 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -184,7 +184,7 @@ ul.notes { @@ -184,7 +184,7 @@ ul.notes {
184 } 184 }
185 } 185 }
186 } 186 }
187 -.file .note .note-actions { 187 +.diff-file .note .note-actions {
188 right: 0; 188 right: 0;
189 top: 0; 189 top: 0;
190 } 190 }
@@ -195,7 +195,7 @@ ul.notes { @@ -195,7 +195,7 @@ ul.notes {
195 * Line note button on the side of diffs 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 .add-diff-note { 199 .add-diff-note {
200 background: url("diff_note_add.png") no-repeat left 0; 200 background: url("diff_note_add.png") no-repeat left 0;
201 height: 22px; 201 height: 22px;
@@ -235,22 +235,25 @@ ul.notes { @@ -235,22 +235,25 @@ ul.notes {
235 .reply-btn { 235 .reply-btn {
236 @extend .btn-primary; 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 .discussion { 257 .discussion {
255 .new_note { 258 .new_note {
256 margin: 0; 259 margin: 0;
app/views/projects/commits/_diffs.html.haml
  Diff comments   View file @ac98d74
@@ -44,8 +44,8 @@ @@ -44,8 +44,8 @@
44 - file = project.repository.blob_at(@commit.id, diff.new_path) 44 - file = project.repository.blob_at(@commit.id, diff.new_path)
45 - file = project.repository.blob_at(@commit.parent_id, diff.old_path) unless file 45 - file = project.repository.blob_at(@commit.parent_id, diff.old_path) unless file
46 - next unless file 46 - next unless file
47 - .file{id: "diff-#{i}"}  
48 - .header 47 + .diff-file{id: "diff-#{i}"}
  48 + .diff-header
49 - if diff.deleted_file 49 - if diff.deleted_file
50 %span= diff.old_path 50 %span= diff.old_path
51 51
@@ -70,7 +70,7 @@ @@ -70,7 +70,7 @@
70 %span.commit-short-id= @commit.short_id(6) 70 %span.commit-short-id= @commit.short_id(6)
71 71
72 72
73 - .content 73 + .diff-content
74 -# Skipp all non non-supported blobs 74 -# Skipp all non non-supported blobs
75 - next unless file.respond_to?('text?') 75 - next unless file.respond_to?('text?')
76 - if file.text? 76 - if file.text?
app/views/projects/notes/_discussion.html.haml
  Diff comments   View file @ac98d74
@@ -36,21 +36,17 @@ @@ -36,21 +36,17 @@
36 .discussion-body 36 .discussion-body
37 - if note.for_diff_line? 37 - if note.for_diff_line?
38 - if note.active? 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 - else 40 - else
42 = link_to 'show outdated discussion', '#', class: 'js-show-outdated-discussion' 41 = link_to 'show outdated discussion', '#', class: 'js-show-outdated-discussion'
43 %div.hide.outdated-discussion 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 - else 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 -# will be shown when the other one is hidden 51 -# will be shown when the other one is hidden
56 .discussion-hidden.content.hide 52 .discussion-hidden.content.hide
@@ -59,4 +55,3 @@ @@ -59,4 +55,3 @@
59 = link_to "javascript:;", class: "js-details-target js-toggler-target" do 55 = link_to "javascript:;", class: "js-details-target js-toggler-target" do
60 %i.icon-eye-open 56 %i.icon-eye-open
61 Show 57 Show
62 -  
app/views/projects/notes/_discussion_diff.html.haml
  Diff comments   View file @ac98d74
1 - diff = note.diff 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,7 +2,7 @@ module SharedDiffNote
2 include Spinach::DSL 2 include Spinach::DSL
3 3
4 Given 'I cancel the diff comment' do 4 Given 'I cancel the diff comment' do
5 - within(".file") do 5 + within(".diff-file") do
6 find(".js-close-discussion-note-form").click 6 find(".js-close-discussion-note-form").click
7 end 7 end
8 end 8 end
@@ -13,14 +13,14 @@ module SharedDiffNote @@ -13,14 +13,14 @@ module SharedDiffNote
13 end 13 end
14 14
15 Given 'I haven\'t written any diff comment text' do 15 Given 'I haven\'t written any diff comment text' do
16 - within(".file") do 16 + within(".diff-file") do
17 fill_in "note[note]", with: "" 17 fill_in "note[note]", with: ""
18 end 18 end
19 end 19 end
20 20
21 Given 'I leave a diff comment like "Typo, please fix"' do 21 Given 'I leave a diff comment like "Typo, please fix"' do
22 find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_29_14"]').click 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 fill_in "note[note]", with: "Typo, please fix" 24 fill_in "note[note]", with: "Typo, please fix"
25 find(".js-comment-button").trigger("click") 25 find(".js-comment-button").trigger("click")
26 sleep 0.05 26 sleep 0.05
@@ -29,7 +29,7 @@ module SharedDiffNote @@ -29,7 +29,7 @@ module SharedDiffNote
29 29
30 Given 'I preview a diff comment text like "Should fix it :smile:"' do 30 Given 'I preview a diff comment text like "Should fix it :smile:"' do
31 find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_29_14"]').click 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 fill_in "note[note]", with: "Should fix it :smile:" 33 fill_in "note[note]", with: "Should fix it :smile:"
34 find(".js-note-preview-button").trigger("click") 34 find(".js-note-preview-button").trigger("click")
35 end 35 end
@@ -38,7 +38,7 @@ module SharedDiffNote @@ -38,7 +38,7 @@ module SharedDiffNote
38 Given 'I preview another diff comment text like "DRY this up"' do 38 Given 'I preview another diff comment text like "DRY this up"' do
39 find('a[data-line-code="586fb7c4e1add2d4d24e27566ed7064680098646_57_41"]').click 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 fill_in "note[note]", with: "DRY this up" 42 fill_in "note[note]", with: "DRY this up"
43 find(".js-note-preview-button").trigger("click") 43 find(".js-note-preview-button").trigger("click")
44 end 44 end
@@ -53,13 +53,13 @@ module SharedDiffNote @@ -53,13 +53,13 @@ module SharedDiffNote
53 end 53 end
54 54
55 Given 'I write a diff comment like ":-1: I don\'t like this"' do 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 fill_in "note[note]", with: ":-1: I don\'t like this" 57 fill_in "note[note]", with: ":-1: I don\'t like this"
58 end 58 end
59 end 59 end
60 60
61 Given 'I submit the diff comment' do 61 Given 'I submit the diff comment' do
62 - within(".file") do 62 + within(".diff-file") do
63 click_button("Add Comment") 63 click_button("Add Comment")
64 end 64 end
65 end 65 end
@@ -67,49 +67,49 @@ module SharedDiffNote @@ -67,49 +67,49 @@ module SharedDiffNote
67 67
68 68
69 Then 'I should not see the diff comment form' do 69 Then 'I should not see the diff comment form' do
70 - within(".file") do 70 + within(".diff-file") do
71 page.should_not have_css("form.new_note") 71 page.should_not have_css("form.new_note")
72 end 72 end
73 end 73 end
74 74
75 Then 'I should not see the diff comment preview button' do 75 Then 'I should not see the diff comment preview button' do
76 - within(".file") do 76 + within(".diff-file") do
77 page.should have_css(".js-note-preview-button", visible: false) 77 page.should have_css(".js-note-preview-button", visible: false)
78 end 78 end
79 end 79 end
80 80
81 Then 'I should not see the diff comment text field' do 81 Then 'I should not see the diff comment text field' do
82 - within(".file") do 82 + within(".diff-file") do
83 page.should have_css(".js-note-text", visible: false) 83 page.should have_css(".js-note-text", visible: false)
84 end 84 end
85 end 85 end
86 86
87 Then 'I should only see one diff form' do 87 Then 'I should only see one diff form' do
88 - within(".file") do 88 + within(".diff-file") do
89 page.should have_css("form.new_note", count: 1) 89 page.should have_css("form.new_note", count: 1)
90 end 90 end
91 end 91 end
92 92
93 Then 'I should see a diff comment form with ":-1: I don\'t like this"' do 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 page.should have_field("note[note]", with: ":-1: I don\'t like this") 95 page.should have_field("note[note]", with: ":-1: I don\'t like this")
96 end 96 end
97 end 97 end
98 98
99 Then 'I should see a diff comment saying "Typo, please fix"' do 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 page.should have_content("Typo, please fix") 101 page.should have_content("Typo, please fix")
102 end 102 end
103 end 103 end
104 104
105 Then 'I should see a discussion reply button' do 105 Then 'I should see a discussion reply button' do
106 - within(".file") do 106 + within(".diff-file") do
107 page.should have_link("Reply") 107 page.should have_link("Reply")
108 end 108 end
109 end 109 end
110 110
111 Then 'I should see a temporary diff comment form' do 111 Then 'I should see a temporary diff comment form' do
112 - within(".file") do 112 + within(".diff-file") do
113 page.should have_css(".js-temp-notes-holder form.new_note") 113 page.should have_css(".js-temp-notes-holder form.new_note")
114 end 114 end
115 end 115 end
@@ -119,37 +119,37 @@ module SharedDiffNote @@ -119,37 +119,37 @@ module SharedDiffNote
119 end 119 end
120 120
121 Then 'I should see an empty diff comment form' do 121 Then 'I should see an empty diff comment form' do
122 - within(".file") do 122 + within(".diff-file") do
123 page.should have_field("note[note]", with: "") 123 page.should have_field("note[note]", with: "")
124 end 124 end
125 end 125 end
126 126
127 Then 'I should see the cancel comment button' do 127 Then 'I should see the cancel comment button' do
128 - within(".file form") do 128 + within(".diff-file form") do
129 page.should have_css(".js-close-discussion-note-form", text: "Cancel") 129 page.should have_css(".js-close-discussion-note-form", text: "Cancel")
130 end 130 end
131 end 131 end
132 132
133 Then 'I should see the diff comment preview' do 133 Then 'I should see the diff comment preview' do
134 - within(".file form") do 134 + within(".diff-file form") do
135 page.should have_css(".js-note-preview", visible: false) 135 page.should have_css(".js-note-preview", visible: false)
136 end 136 end
137 end 137 end
138 138
139 Then 'I should see the diff comment edit button' do 139 Then 'I should see the diff comment edit button' do
140 - within(".file") do 140 + within(".diff-file") do
141 page.should have_css(".js-note-edit-button", visible: true) 141 page.should have_css(".js-note-edit-button", visible: true)
142 end 142 end
143 end 143 end
144 144
145 Then 'I should see the diff comment preview button' do 145 Then 'I should see the diff comment preview button' do
146 - within(".file") do 146 + within(".diff-file") do
147 page.should have_css(".js-note-preview-button", visible: true) 147 page.should have_css(".js-note-preview-button", visible: true)
148 end 148 end
149 end 149 end
150 150
151 Then 'I should see two separate previews' do 151 Then 'I should see two separate previews' do
152 - within(".file") do 152 + within(".diff-file") do
153 page.should have_css(".js-note-preview", visible: true, count: 2) 153 page.should have_css(".js-note-preview", visible: true, count: 2)
154 page.should have_content("Should fix it") 154 page.should have_content("Should fix it")
155 page.should have_content("DRY this up") 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,7 +166,7 @@ describe "On a merge request diff", js: true, focus: true do
166 end 166 end
167 167
168 it "should be removed when canceled" do 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 find(".js-close-discussion-note-form").trigger("click") 170 find(".js-close-discussion-note-form").trigger("click")
171 end 171 end
172 172