Fix editor form, styles and JS

Riyad Preukschas
1 parent 7caf4de2
Showing 2 changed files with 58 additions and 14 deletions Show diff stats
app/assets/stylesheets/sections/editor.scss
app/views/tree/edit.html.haml
 .file-editor {
   #editor{
     border: none;
+    border-radius: 0;
     height: 500px;
     margin: 0;
     padding: 0;
     position: relative;
     width: 100%;
   }
-  .editor-commit-comment {
-    padding-top:20px;
+
+  .cancel-btn {
+    color: #B94A48;
+    &:hover {
+      color: #B94A48;
+    }
+  }
+  .commit-button-annotation {
+    @extend .alert;
+    @extend .alert-info;
+    display: inline-block;
+    margin: 0;
+    padding: 2px;
+
+    > * {
+      float: left;
+    }
+
+    .commit-btn {
+      @extend .save-btn;
+    }
+    .message {
+      display: inline-block;
+      margin: 5px 8px 0 8px;
+    }
+  }
+  .commit_message-group {
+    margin-top: 20px;
+
+    label {
+      font-size: 16px;
+      line-height: 20px;
+    }
     textarea {
-      width: 50%;
-      margin-left: 20px;
+      @extend .span8;
     }
   }
 }
 .file-editor
-  = form_tag(project_tree_path(@project, @id), :method => :put) do
+  = form_tag(project_tree_path(@project, @id), method: :put, class: "form-horizontal") do
     .file_holder
       .file_title
         %i.icon-file
         %span.file_name
-          = "#{@tree.path} (#{@ref})"
+          = @tree.path
+          %small
+            on
+            %strong= @ref
+        %span.options
+          .btn-group.tree-btn-group
+            = link_to "Cancel", project_tree_path(@project, @id), class: "btn very_small cancel-btn", confirm: "Are you sure?"
       .file_content.code
         %pre#editor= @tree.data
-    .editor-commit-comment
-      = label_tag 'commit_message' do
-        %p.slead Commit message
-      = text_area_tag 'commit_message', '', :required => true
+    .control-group.commit_message-group
+      = label_tag 'commit_message', class: "control-label" do
+        Commit message
+      .controls
+        = text_area_tag 'commit_message', '', placeholder: "Update #{@tree.name}", required: true, rows: 3
     .form-actions
       = hidden_field_tag 'last_commit', @last_commit
-      = hidden_field_tag 'content', '', :id => :file_content
-      = button_tag "Commit", class: 'btn save-btn'
+      = hidden_field_tag 'content', '', id: :file_content
+      .commit-button-annotation
+        = button_tag "Commit", class: 'btn commit-btn js-commit-button'
+        .message
+          to branch
+          %strong= @ref
       = link_to "Cancel", project_tree_path(@project, @id), class: "btn cancel-btn", confirm: "Are you sure?"
 :javascript
@@ -25,7 +36,9 @@
     editor.getSession().setMode('ace/mode/' + ace_mode);
   }
-  $(".save-btn").click(function(){
+  disableButtonIfEmptyField("#commit_message", ".js-commit-button");
+
+  $(".js-commit-button").click(function(){
     $("#file_content").val(editor.getValue());
-    $(".form_editor form").submit();
+    $(".file-editor form").submit();
   });
1	.file-editor {	1	.file-editor {
2	#editor{	2	#editor{
3	border: none;	3	border: none;
		4	+ border-radius: 0;
4	height: 500px;	5	height: 500px;
5	margin: 0;	6	margin: 0;
6	padding: 0;	7	padding: 0;
7	position: relative;	8	position: relative;
8	width: 100%;	9	width: 100%;
9	}	10	}
10	- .editor-commit-comment {
11	- padding-top:20px;	11	+
		12	+ .cancel-btn {
		13	+ color: #B94A48;
		14	+ &:hover {
		15	+ color: #B94A48;
		16	+ }
		17	+ }
		18	+ .commit-button-annotation {
		19	+ @extend .alert;
		20	+ @extend .alert-info;
		21	+ display: inline-block;
		22	+ margin: 0;
		23	+ padding: 2px;
		24	+
		25	+ > * {
		26	+ float: left;
		27	+ }
		28	+
		29	+ .commit-btn {
		30	+ @extend .save-btn;
		31	+ }
		32	+ .message {
		33	+ display: inline-block;
		34	+ margin: 5px 8px 0 8px;
		35	+ }
		36	+ }
		37	+ .commit_message-group {
		38	+ margin-top: 20px;
		39	+
		40	+ label {
		41	+ font-size: 16px;
		42	+ line-height: 20px;
		43	+ }
12	textarea {	44	textarea {
13	- width: 50%;
14	- margin-left: 20px;	45	+ @extend .span8;
15	}	46	}
16	}	47	}
17	}	48	}