a bit of restyling. Replace some images with icons. Simplify note form

Dmitriy Zaporozhets
1 parent 315fd7d7
Showing 14 changed files with 50 additions and 80 deletions Show diff stats
app/assets/images/home_icon.PNG
app/assets/images/icon-attachment.png
app/assets/javascripts/notes.js
app/assets/stylesheets/common.scss
app/assets/stylesheets/sections/nav.scss
app/assets/stylesheets/sections/notes.scss
app/views/layouts/admin.html.haml
app/views/layouts/application.html.haml
app/views/layouts/group.html.haml
app/views/layouts/profile.html.haml
app/views/layouts/project_resource.html.haml
app/views/layouts/user_team.html.haml
app/views/notes/_form.html.haml
app/views/notes/_note.html.haml
@@ -20,12 +20,12 @@ var NoteList = {
  
     if(NoteList.reversed) {
       var form = $(".js-main-target-form");
-      form.find(".buttons, .note_options").hide();
+      form.find(".note-form-actions").hide();
       var textarea = form.find(".js-note-text");
       textarea.css("height", "40px");
       textarea.on("focus", function(){
         textarea.css("height", "80px");
-        form.find(".buttons, .note_options").show();
+        form.find(".note-form-actions").show();
       });
     }
  
@@ -338,10 +338,6 @@ li.note {
     li {
       border-bottom:none !important;
     }
-    .attachment {
-      padding-left: 20px;
-      background:url("icon-attachment.png") no-repeat left center;
-    }
   }
 }
  
@@ -6,8 +6,7 @@ ul.main_menu {
   margin: auto;
   margin: 30px 0;
   margin-top: 10px;
-  border-bottom: 1px solid #DDD;
-  height: 37px;
+  height: 38px;
   position: relative;
   overflow: hidden;
   .count {
@@ -33,6 +32,7 @@ ul.main_menu {
     margin: 0;
     display: table-cell;
     width: 1%;
+    border-bottom: 2px solid #EEE;
     &.active {
       border-bottom: 2px solid #474D57;
       a {
@@ -42,10 +42,8 @@ ul.main_menu {
  
     &.home {
       a {
-        background: url(home_icon.PNG) no-repeat center center;
-        text-indent:-9999px;
-        min-width: 20px;
-        img {
+        i {
+          font-size: 20px;
           position: relative;
           top: 4px;
         }
@@ -56,7 +54,7 @@ ul.main_menu {
     display: block;
     text-align: center;
     font-weight: normal;
-    height: 35px;
+    height: 36px;
     line-height: 36px;
     color: #777;
     text-shadow: 0 1px 1px white;
@@ -81,14 +81,6 @@ ul.notes {
     .attachment {
       font-size: 14px;
       margin-top: -20px;
-
-      .icon-attachment {
-        @extend .icon-paper-clip;
-        font-size: 24px;
-        position: relative;
-        text-align: right;
-        top: 6px;
-      }
     }
     .note-body {
       margin-left: 45px;
@@ -229,11 +221,6 @@ ul.notes {
 .discussion {
   .new_note {
     margin: 8px 5px 8px 0;
-
-    .note_options {
-      // because of the smaller width and the extra "cancel" button
-      margin-top: 8px;
-    }
   }
 }
 .new_note {
@@ -246,37 +233,6 @@ ul.notes {
   .clearfix {
     margin-bottom: 0;
   }
-  .note_options {
-    h6 {
-      @extend .left;
-      line-height: 20px;
-      padding-right: 16px;
-      padding-bottom: 16px;
-    }
-    label {
-      padding: 0;
-    }
-
-    .attachment {
-      @extend .pull-right;
-      position: relative;
-      width: 350px;
-      height: 50px;
-      margin:0 0 5px !important;
-
-      // hide the actual file field
-      input {
-        display: none;
-      }
-
-      .choose-btn {
-        float: right;
-      }
-    }
-    .notify_options {
-      @extend .pull-right;
-    }
-  }
   .note_text_and_preview {
     // makes the "absolute" position for links relative to this
     position: relative;
@@ -315,3 +271,17 @@ ul.notes {
   @extend .thumbnail;
   margin-left: 45px;
 }
+
+
+.note-form-actions {
+  background: #F9F9F9;
+  height: 45px;
+  padding: 0 5px;
+
+  .note-form-option {
+    margin-top: 8px;
+    margin-left: 15px;
+    @extend .pull-left;
+    @extend .span4;
+  }
+}
@@ -7,7 +7,8 @@
     .container
       %ul.main_menu
         = nav_link(controller: :dashboard, html_options: {class: 'home'}) do
-          = link_to "Stats", admin_root_path
+          = link_to admin_root_path, title: "Stats" do
+            %i.icon-home
         = nav_link(controller: :projects) do
           = link_to "Projects", admin_projects_path
         = nav_link(controller: :teams) do
@@ -7,7 +7,8 @@
     .container
       %ul.main_menu
         = nav_link(path: 'dashboard#show', html_options: {class: 'home'}) do
-          = link_to "Home", root_path, title: "Home"
+          = link_to root_path, title: "Home" do
+            %i.icon-home
         = nav_link(path: 'dashboard#projects') do
           = link_to projects_dashboard_path do
             Projects
@@ -7,7 +7,8 @@
     .container
       %ul.main_menu
         = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
-          = link_to "Home", group_path(@group), title: "Home"
+          = link_to group_path(@group), title: "Home" do
+            %i.icon-home
         = nav_link(path: 'groups#issues') do
           = link_to issues_group_path(@group) do
             Issues
@@ -7,7 +7,8 @@
     .container
       %ul.main_menu
         = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
-          = link_to "Profile", profile_path
+          = link_to profile_path, title: "Profile" do
+            %i.icon-home
         = nav_link(path: 'profiles#account') do
           = link_to "Account", account_profile_path
         = nav_link(controller: :keys) do
@@ -12,7 +12,8 @@
     .container
       %ul.main_menu
         = nav_link(html_options: {class: "home #{project_tab_class}"}) do
-          = link_to @project.path, project_path(@project), title: "Project"
+          = link_to project_path(@project), title: "Project" do
+            %i.icon-home
  
         - if @project.repo_exists?
           - if can? current_user, :download_code, @project
@@ -7,7 +7,8 @@
     .container
       %ul.main_menu
         = nav_link(path: 'teams#show', html_options: {class: 'home'}) do
-          = link_to "Home", team_path(@team), title: "Home"
+          = link_to team_path(@team), title: "Home" do
+            %i.icon-home
  
         = nav_link(path: 'teams#issues') do
           = link_to issues_team_path(@team) do
@@ -15,30 +15,30 @@
     = f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input turn-on'
     .note_preview.js-note-preview.turn-off
  
-  .buttons
-    = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
-    %a.btn.grouped.js-close-discussion-note-form Cancel
   .hint
     .pull-right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
   .clearfix
  
-  .note_options
-    .attachment
-      %h6 Attachment:
-      .file_name.js-attachment-filename File name...
-      %a.choose-btn.btn.btn-small.js-choose-note-attachment-button Choose File ...
-      .hint Any file up to 10 MB
+  .note-form-actions
+    .buttons
+      = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
+      %a.btn.grouped.js-close-discussion-note-form Cancel
  
-      = f.file_field :attachment, class: "js-note-attachment-input"
-
-    .notify_options
-      %h6 Notify via email:
+    .note-form-option
       = label_tag :notify do
         = check_box_tag :notify, 1, !@note.for_commit?
-        Project team
+        %span.light Notify team via email
  
       .js-notify-commit-author
         = label_tag :notify_author do
           = check_box_tag :notify_author, 1 , @note.for_commit?
-          Commit author
-  .clearfix
+          %span.light Notify commit author
+    .note-form-option
+      %a.choose-btn.btn.btn-small.js-choose-note-attachment-button
+        %i.icon-paper-clip
+        %span Choose File ...
+      &nbsp;
+      %span.file_name.js-attachment-filename File name...
+      = f.file_field :attachment, class: "js-note-attachment-input hide"
+
+    .clearfix
@@ -32,6 +32,6 @@
       = image_tag note.attachment.url, class: 'note-image-attach'
     .attachment.pull-right
       = link_to note.attachment.url, target: "_blank" do
-        %i.icon-attachment
+        %i.icon-paper-clip
         = note.attachment_identifier
   .clear
...	...	@@ -20,12 +20,12 @@ var NoteList = {
20	20
21	21	if(NoteList.reversed) {
22	22	var form = $(".js-main-target-form");
23		- form.find(".buttons, .note_options").hide();
	23	+ form.find(".note-form-actions").hide();
24	24	var textarea = form.find(".js-note-text");
25	25	textarea.css("height", "40px");
26	26	textarea.on("focus", function(){
27	27	textarea.css("height", "80px");
28		- form.find(".buttons, .note_options").show();
	28	+ form.find(".note-form-actions").show();
29	29	});
30	30	}
31	31
...	...
...	...	@@ -338,10 +338,6 @@ li.note {
338	338	li {
339	339	border-bottom:none !important;
340	340	}
341		- .attachment {
342		- padding-left: 20px;
343		- background:url("icon-attachment.png") no-repeat left center;
344		- }
345	341	}
346	342	}
347	343
...	...
...	...	@@ -6,8 +6,7 @@ ul.main_menu {
6	6	margin: auto;
7	7	margin: 30px 0;
8	8	margin-top: 10px;
9		- border-bottom: 1px solid #DDD;
10		- height: 37px;
	9	+ height: 38px;
11	10	position: relative;
12	11	overflow: hidden;
13	12	.count {
...	...	@@ -33,6 +32,7 @@ ul.main_menu {
33	32	margin: 0;
34	33	display: table-cell;
35	34	width: 1%;
	35	+ border-bottom: 2px solid #EEE;
36	36	&.active {
37	37	border-bottom: 2px solid #474D57;
38	38	a {
...	...	@@ -42,10 +42,8 @@ ul.main_menu {
42	42
43	43	&.home {
44	44	a {
45		- background: url(home_icon.PNG) no-repeat center center;
46		- text-indent:-9999px;
47		- min-width: 20px;
48		- img {
	45	+ i {
	46	+ font-size: 20px;
49	47	position: relative;
50	48	top: 4px;
51	49	}
...	...	@@ -56,7 +54,7 @@ ul.main_menu {
56	54	display: block;
57	55	text-align: center;
58	56	font-weight: normal;
59		- height: 35px;
	57	+ height: 36px;
60	58	line-height: 36px;
61	59	color: #777;
62	60	text-shadow: 0 1px 1px white;
...	...
...	...	@@ -81,14 +81,6 @@ ul.notes {
81	81	.attachment {
82	82	font-size: 14px;
83	83	margin-top: -20px;
84		-
85		- .icon-attachment {
86		- @extend .icon-paper-clip;
87		- font-size: 24px;
88		- position: relative;
89		- text-align: right;
90		- top: 6px;
91		- }
92	84	}
93	85	.note-body {
94	86	margin-left: 45px;
...	...	@@ -229,11 +221,6 @@ ul.notes {
229	221	.discussion {
230	222	.new_note {
231	223	margin: 8px 5px 8px 0;
232		-
233		- .note_options {
234		- // because of the smaller width and the extra "cancel" button
235		- margin-top: 8px;
236		- }
237	224	}
238	225	}
239	226	.new_note {
...	...	@@ -246,37 +233,6 @@ ul.notes {
246	233	.clearfix {
247	234	margin-bottom: 0;
248	235	}
249		- .note_options {
250		- h6 {
251		- @extend .left;
252		- line-height: 20px;
253		- padding-right: 16px;
254		- padding-bottom: 16px;
255		- }
256		- label {
257		- padding: 0;
258		- }
259		-
260		- .attachment {
261		- @extend .pull-right;
262		- position: relative;
263		- width: 350px;
264		- height: 50px;
265		- margin:0 0 5px !important;
266		-
267		- // hide the actual file field
268		- input {
269		- display: none;
270		- }
271		-
272		- .choose-btn {
273		- float: right;
274		- }
275		- }
276		- .notify_options {
277		- @extend .pull-right;
278		- }
279		- }
280	236	.note_text_and_preview {
281	237	// makes the "absolute" position for links relative to this
282	238	position: relative;
...	...	@@ -315,3 +271,17 @@ ul.notes {
315	271	@extend .thumbnail;
316	272	margin-left: 45px;
317	273	}
	274	+
	275	+
	276	+.note-form-actions {
	277	+ background: #F9F9F9;
	278	+ height: 45px;
	279	+ padding: 0 5px;
	280	+
	281	+ .note-form-option {
	282	+ margin-top: 8px;
	283	+ margin-left: 15px;
	284	+ @extend .pull-left;
	285	+ @extend .span4;
	286	+ }
	287	+}
...	...
...	...	@@ -7,7 +7,8 @@
7	7	.container
8	8	%ul.main_menu
9	9	= nav_link(controller: :dashboard, html_options: {class: 'home'}) do
10		- = link_to "Stats", admin_root_path
	10	+ = link_to admin_root_path, title: "Stats" do
	11	+ %i.icon-home
11	12	= nav_link(controller: :projects) do
12	13	= link_to "Projects", admin_projects_path
13	14	= nav_link(controller: :teams) do
...	...
...	...	@@ -12,7 +12,8 @@
12	12	.container
13	13	%ul.main_menu
14	14	= nav_link(html_options: {class: "home #{project_tab_class}"}) do
15		- = link_to @project.path, project_path(@project), title: "Project"
	15	+ = link_to project_path(@project), title: "Project" do
	16	+ %i.icon-home
16	17
17	18	- if @project.repo_exists?
18	19	- if can? current_user, :download_code, @project
...	...
...	...	@@ -15,30 +15,30 @@
15	15	= f.text_area :note, size: 255, class: 'note_text js-note-text js-gfm-input turn-on'
16	16	.note_preview.js-note-preview.turn-off
17	17
18		- .buttons
19		- = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
20		- %a.btn.grouped.js-close-discussion-note-form Cancel
21	18	.hint
22	19	.pull-right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
23	20	.clearfix
24	21
25		- .note_options
26		- .attachment
27		- %h6 Attachment:
28		- .file_name.js-attachment-filename File name...
29		- %a.choose-btn.btn.btn-small.js-choose-note-attachment-button Choose File ...
30		- .hint Any file up to 10 MB
	22	+ .note-form-actions
	23	+ .buttons
	24	+ = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
	25	+ %a.btn.grouped.js-close-discussion-note-form Cancel
31	26
32		- = f.file_field :attachment, class: "js-note-attachment-input"
33		-
34		- .notify_options
35		- %h6 Notify via email:
	27	+ .note-form-option
36	28	= label_tag :notify do
37	29	= check_box_tag :notify, 1, !@note.for_commit?
38		- Project team
	30	+ %span.light Notify team via email
39	31
40	32	.js-notify-commit-author
41	33	= label_tag :notify_author do
42	34	= check_box_tag :notify_author, 1 , @note.for_commit?
43		- Commit author
44		- .clearfix
	35	+ %span.light Notify commit author
	36	+ .note-form-option
	37	+ %a.choose-btn.btn.btn-small.js-choose-note-attachment-button
	38	+ %i.icon-paper-clip
	39	+ %span Choose File ...
	40	+
	41	+ %span.file_name.js-attachment-filename File name...
	42	+ = f.file_field :attachment, class: "js-note-attachment-input hide"
	43	+
	44	+ .clearfix
...	...
...	...	@@ -32,6 +32,6 @@
32	32	= image_tag note.attachment.url, class: 'note-image-attach'
33	33	.attachment.pull-right
34	34	= link_to note.attachment.url, target: "_blank" do
35		- %i.icon-attachment
	35	+ %i.icon-paper-clip
36	36	= note.attachment_identifier
37	37	.clear
...	...