Improve select UI

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

Improve select UI
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Dmitriy Zaporozhets
1 parent bd2ca33d
Showing 6 changed files with 38 additions and 17 deletions Show diff stats
app/assets/stylesheets/common.scss
app/assets/stylesheets/sections/merge_requests.scss
app/assets/stylesheets/selects.scss
app/helpers/application_helper.rb
app/views/projects/edit.html.haml
app/views/projects/merge_requests/_form.html.haml
@@ -358,3 +358,8 @@ table {
   background: #555;
   color: #BBB;
 }
+
+.project-refs-form .chosen-container .chosen-single span {
+  font-weight: bold;
+  color: #555;
+}
@@ -110,9 +110,29 @@
 .merge-request-angle {
   text-align: center;
-  margin: 0;
+  margin: 0 auto;
+  background: #eee;
+  border-radius: 100px;
+  width: 60px;
+  line-height: 60px;
+  color: #777;
+  text-shadow: 0 1px 2px #FFF;
 }
 .merge-request-form-info {
-  padding: 15px 0;
+  padding-top: 15px;
+}
+
+.merge-request-branches {
+  .commit-row-message {
+    font-weight: normal !important;
+  }
+
+  .chosen-container .chosen-single {
+    padding: 2px 0 2px 10px;
+    span {
+      font-weight: bold;
+      color: #555;
+    }
+  }
 }
@@ -71,8 +71,9 @@
   .chosen-drop {
     margin: 7px 0;
     min-width: 200px;
-    border: 1px solid #bbb;
+    border: 1px solid #CCC;
     @include border-radius(0);
+    box-shadow: inset 0 1px 0 #fff, 0 1px 5px #f1f1f1;
     .chosen-results {
       margin-top: 5px;
@@ -80,9 +81,10 @@
       .group-result {
         color: $style_color;
-        border-bottom: 1px solid #EEE;
-        padding: 8px;
+        font-size: 14px;
+        line-height: 1.5;
       }
+
       .active-result {
         @include border-radius(0);
@@ -91,8 +93,8 @@
           color: $style_color;
         }
         &.result-selected {
+          font-weight: bolder;
           background: #EEE;
-          border-left: 4px solid #CCC;
         }
       }
     }
@@ -118,17 +120,13 @@
   span {
     font-weight: normal;
+    text-shadow: 0 1px 2px #FFF;
   }
 }
 /** Select2 styling **/
 .select2-container .select2-choice {
-  background: #f1f1f1;
-  background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, whitesmoke), to(#e1e1e1));
-  background-image: -webkit-linear-gradient(whitesmoke 6.6%, #e1e1e1);
-  background-image: -moz-linear-gradient(whitesmoke 6.6%, #e1e1e1);
-  background-image: -ms-linear-gradient(whitesmoke 6.6%, #e1e1e1);
-  background-image: -o-linear-gradient(whitesmoke 6.6%, #e1e1e1);
+  @include bg-light-gray-gradient;
 }
 .select2-container .select2-choice div {
@@ -84,8 +84,8 @@ module ApplicationHelper
     repository = @project.repository
     options = [
-      ["Branch", repository.branch_names ],
-      [ "Tag", repository.tag_names ]
+      ["Branches", repository.branch_names],
+      ["Tags", repository.tag_names]
     ]
     # If reference is commit id -
@@ -124,7 +124,7 @@
                   %span Namespace
                 .controls
                   .control-group
-                    = f.select :namespace_id, namespaces_options(@project.namespace_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}
+                    = f.select :namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace' }, { class: 'chosen' }
                   %ul
                     %li Be careful. Changing the project's namespace can have unintended side effects.
                     %li You can only transfer the project to namespaces you manage.
@@ -13,7 +13,6 @@
             = f.select(:source_project_id,[[@merge_request.source_project.path_with_namespace,@merge_request.source_project.id]] , {}, {class: 'source_project chosen span3'})
           .pull-left
             &nbsp;
-            %i.icon-code-fork
             = f.select(:source_branch, @merge_request.source_project.repository.branch_names, { include_blank: "Select branch" }, {class: 'source_branch chosen span2'})
         .mr_source_commit.prepend-top-10
       .span2
@@ -26,7 +25,6 @@
             = f.select(:target_project_id, projects.map { |proj| [proj.path_with_namespace,proj.id] }, {include_blank: "Select Target Project" }, {class: 'target_project chosen span3'})
           .pull-left
             &nbsp;
-            %i.icon-code-fork
             = f.select(:target_branch, @target_branches, { include_blank: "Select branch" }, {class: 'target_branch chosen span2'})
         .mr_target_commit.prepend-top-10
	@@ -358,3 +358,8 @@ table {		@@ -358,3 +358,8 @@ table {
358	background: #555;	358	background: #555;
359	color: #BBB;	359	color: #BBB;
360	}	360	}
		361	+
		362	+.project-refs-form .chosen-container .chosen-single span {
		363	+ font-weight: bold;
		364	+ color: #555;
		365	+}
	@@ -110,9 +110,29 @@		@@ -110,9 +110,29 @@
110		110
111	.merge-request-angle {	111	.merge-request-angle {
112	text-align: center;	112	text-align: center;
113	- margin: 0;	113	+ margin: 0 auto;
		114	+ background: #eee;
		115	+ border-radius: 100px;
		116	+ width: 60px;
		117	+ line-height: 60px;
		118	+ color: #777;
		119	+ text-shadow: 0 1px 2px #FFF;
114	}	120	}
115		121
116	.merge-request-form-info {	122	.merge-request-form-info {
117	- padding: 15px 0;	123	+ padding-top: 15px;
		124	+}
		125	+
		126	+.merge-request-branches {
		127	+ .commit-row-message {
		128	+ font-weight: normal !important;
		129	+ }
		130	+
		131	+ .chosen-container .chosen-single {
		132	+ padding: 2px 0 2px 10px;
		133	+ span {
		134	+ font-weight: bold;
		135	+ color: #555;
		136	+ }
		137	+ }
118	}	138	}
	@@ -124,7 +124,7 @@		@@ -124,7 +124,7 @@
124	%span Namespace	124	%span Namespace
125	.controls	125	.controls
126	.control-group	126	.control-group
127	- = f.select :namespace_id, namespaces_options(@project.namespace_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}	127	+ = f.select :namespace_id, namespaces_options(@project.namespace_id), { prompt: 'Choose a project namespace' }, { class: 'chosen' }
128	%ul	128	%ul
129	%li Be careful. Changing the project's namespace can have unintended side effects.	129	%li Be careful. Changing the project's namespace can have unintended side effects.
130	%li You can only transfer the project to namespaces you manage.	130	%li You can only transfer the project to namespaces you manage.