Init highlgiht js and render for blob. Improve css for it

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

Init highlgiht js and render for blob. Improve css for it
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent b95a56c1
Showing 3 changed files with 25 additions and 27 deletions Show diff stats
app/assets/javascripts/main.js.coffee
app/assets/stylesheets/generic/files.scss
app/views/projects/blob/_text.html.haml
@@ -59,6 +59,8 @@ $ -&gt;
   # Click a .one_click_select field, select the contents
   $(".one_click_select").on 'click', -> $(@).select()
  
+  hljs.initHighlightingOnLoad()
+
   $('.remove-row').bind 'ajax:success', ->
     $(this).closest('li').fadeOut()
  
@@ -144,7 +144,7 @@
     &.code {
       padding: 0;
  
-      table.lines {
+      .highlighted-data {
         border: none;
         box-shadow: none;
         margin: 0px;
@@ -158,47 +158,34 @@
           font-size: 12px !important;
           line-height: 16px !important;
           margin: 0;
-          padding: 10px 0;
         }
-        td {
-          border: none;
-          margin: 0;
-          padding: 0;
-          vertical-align: top;
  
-          &:first-child {
-            background: #eee;
-            width: 50px;
-          }
-          &:last-child {
-          }
-        }
-        tr:hover {
-          background: none;
+        .hljs {
+          padding: 0;
         }
  
-        pre.line_numbers {
-          color: #666;
-          padding: 10px 6px 10px 0;
+        .line-numbers {
+          padding: 10px;
           text-align: right;
-          background: #EEE;
+          float: left;
+          width: 60px;
  
           a {
-            color: #666;
+            display: block;
+            font-size: 12px !important;
+            line-height: 16px !important;
  
             i {
               display: none;
-              font-size: 14px;
-              line-height: 14px;
             }
+
             &:hover i {
-              display: inherit;
+              display: inline;
             }
           }
         }
  
         .highlight {
-          border-left: 1px solid #DEE2E3;
           overflow: auto;
           overflow-y: hidden;
  
@@ -8,7 +8,16 @@
 - else
   .file-content.code
     - unless blob.empty?
-      %div{class: user_color_scheme_class}
-        = raw blob.colorize(formatter: :gitlab)
+      %div.highlighted-data{class: user_color_scheme_class}
+        .line-numbers
+          - blob.data.lines.size.times do |index|
+            - i = index + 1
+            = link_to "#L#{i}", id: "L#{i}", rel: "#L#{i}" do
+              %i.icon-link
+              = i
+        .highlight
+          %pre
+            %code
+              = raw blob.data
     - else
       %p.nothing_here_message Empty file
...	...	@@ -59,6 +59,8 @@ $ ->
59	59	# Click a .one_click_select field, select the contents
60	60	$(".one_click_select").on 'click', -> $(@).select()
61	61
	62	+ hljs.initHighlightingOnLoad()
	63	+
62	64	$('.remove-row').bind 'ajax:success', ->
63	65	$(this).closest('li').fadeOut()
64	66
...	...
...	...	@@ -144,7 +144,7 @@
144	144	&.code {
145	145	padding: 0;
146	146
147		- table.lines {
	147	+ .highlighted-data {
148	148	border: none;
149	149	box-shadow: none;
150	150	margin: 0px;
...	...	@@ -158,47 +158,34 @@
158	158	font-size: 12px !important;
159	159	line-height: 16px !important;
160	160	margin: 0;
161		- padding: 10px 0;
162	161	}
163		- td {
164		- border: none;
165		- margin: 0;
166		- padding: 0;
167		- vertical-align: top;
168	162
169		- &:first-child {
170		- background: #eee;
171		- width: 50px;
172		- }
173		- &:last-child {
174		- }
175		- }
176		- tr:hover {
177		- background: none;
	163	+ .hljs {
	164	+ padding: 0;
178	165	}
179	166
180		- pre.line_numbers {
181		- color: #666;
182		- padding: 10px 6px 10px 0;
	167	+ .line-numbers {
	168	+ padding: 10px;
183	169	text-align: right;
184		- background: #EEE;
	170	+ float: left;
	171	+ width: 60px;
185	172
186	173	a {
187		- color: #666;
	174	+ display: block;
	175	+ font-size: 12px !important;
	176	+ line-height: 16px !important;
188	177
189	178	i {
190	179	display: none;
191		- font-size: 14px;
192		- line-height: 14px;
193	180	}
	181	+
194	182	&:hover i {
195		- display: inherit;
	183	+ display: inline;
196	184	}
197	185	}
198	186	}
199	187
200	188	.highlight {
201		- border-left: 1px solid #DEE2E3;
202	189	overflow: auto;
203	190	overflow-y: hidden;
204	191
...	...
...	...	@@ -8,7 +8,16 @@
8	8	- else
9	9	.file-content.code
10	10	- unless blob.empty?
11		- %div{class: user_color_scheme_class}
12		- = raw blob.colorize(formatter: :gitlab)
	11	+ %div.highlighted-data{class: user_color_scheme_class}
	12	+ .line-numbers
	13	+ - blob.data.lines.size.times do \|index\|
	14	+ - i = index + 1
	15	+ = link_to "#L#{i}", id: "L#{i}", rel: "#L#{i}" do
	16	+ %i.icon-link
	17	+ = i
	18	+ .highlight
	19	+ %pre
	20	+ %code
	21	+ = raw blob.data
13	22	- else
14	23	%p.nothing_here_message Empty file
...	...