Use tw style for some buttons. Improved deploy key UI

Dmitriy Zaporozhets
1 parent 6e5cd8e0
Showing 8 changed files with 45 additions and 32 deletions Show diff stats
app/assets/stylesheets/gitlab_bootstrap/buttons.scss
app/assets/stylesheets/main.scss
app/views/deploy_keys/_form.html.haml
app/views/deploy_keys/index.html.haml
app/views/deploy_keys/new.html.haml
app/views/deploy_keys/show.html.haml
app/views/keys/show.html.haml
app/views/team_members/show.html.haml
 .btn {
-  background-image: -webkit-gradient(linear, 0 0, 0 26, color-stop(0.076, #f7f7f7), to(#d5d5d5));
-  background-image: -webkit-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
-  background-image: -moz-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
-  background-image: -o-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
+  @include bg-gradient(#f7f7f7, #d5d5d5);
   border-color:#aaa;
   &:hover {
     @include bg-gray-gradient;
@@ -12,10 +9,8 @@
  
   &.primary {
     background:#2a79A3;
+    @include bg-gradient(#47A7b7, #2585b5);
     border-color: #2A79A3;
-    background-image: -webkit-linear-gradient(#47A7b7 7.6%, #2585b5);
-    background-image: -moz-linear-gradient(#47A7b7 7.6%, #2585b5);
-    background-image: -o-linear-gradient(#47A7b7 7.6%, #2585b5);
     color:#fff;
     text-shadow: 0 1px 1px #268;
     &:hover {
@@ -30,16 +25,11 @@
   }
  
   &.success {
-    border-color: #4A4;
-    background-image: -webkit-linear-gradient(#82D482 7.6%, #22B442);
-    background-image: -moz-linear-gradient(#82D482 7.6%, #22B442);
-    background-image: -o-linear-gradient(#82D482 7.6%, #22B442);
-    color: #fff;
-    text-shadow: 0 1px 1px #141;
+    @extend .btn-success;
  
     &:hover {
-      background: #6C6;
-      color: #fff;
+      @extend .btn-success;
+      background: #51a351;
     }
  
     &.disabled {
@@ -62,10 +52,8 @@
     padding-right:30px;
   }
  
-  &.danger,
-  &.btn-danger {
-    color:#fff;
-    background: #DA4E49;
+  &.danger {
+    @extend .btn-danger;
     border-color: #BD362F;
  
     &:hover {
@@ -56,6 +56,13 @@ $hover: #fdf5d9;
   border-radius: $radius;
 }
  
+@mixin bg-gradient($from, $to) {
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
+  background-image: -webkit-linear-gradient($from, $to);
+  background-image: -moz-linear-gradient($from, $to);
+  background-image: -o-linear-gradient($from, $to);
+}
+
 @mixin bg-gray-gradient {
   background:#eee;
   background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
@@ -11,8 +11,13 @@
       .input= f.text_field :title
     .clearfix
       = f.label :key
-      .input= f.text_area :key, class: "xlarge"
+      .input
+        = f.text_area :key, class: [:xxlarge, :thin_area]
+        %p.hint
+          Paste a machine public key here. Read more about how generate it
+          = link_to "here", help_ssh_path
+
     .actions
-      = f.submit 'Save', class: "primary btn"
-      = link_to "Cancel", project_deploy_keys_path(@project), class: "btn"
+      = f.submit 'Save', class: "save-btn btn"
+      = link_to "Cancel", project_deploy_keys_path(@project), class: "btn cancel-btn"
  
 = render "repositories/head"
-- if can? current_user, :admin_project, @project
-  .alert-message.block-message
-    Deploy keys allow read-only access to repository.
+
+%p.slead
+  Deploy keys allow read-only access to repository. It matches perfectly for CI, staging or production servers.
+
+  - if can? current_user, :admin_project, @project
     = link_to new_project_deploy_key_path(@project), class: "btn small", title: "New Deploy Key" do
       Add Deploy Key
-
 - if @keys.any?
   %table
+    %thead
+      %tr
+        %th Keys
+        %th
+        %th
     - @keys.each do |key|
       = render(partial: 'show', locals: {key: key})
 = render "repositories/head"
  
-%h3 New Deploy key
+%h3.page_title New Deploy key
 %hr
  
 = render 'form'
 = render "repositories/head"
-%h3= @key.title
+%h3.page_title
+  Deploy key:
+  = @key.title
+  %small
+    created at
+    = @key.created_at.stamp("Aug 21, 2011")
+.back_link
+  = link_to project_deploy_keys_path(@project) do
+    &larr; To keys list
 %hr
 %pre= @key.key
-.actions
+.right
   = link_to 'Remove', project_deploy_key_path(@key.project, @key), confirm: 'Are you sure?', method: :delete, class: "danger btn delete-key"
-  .clear
@@ -10,5 +10,5 @@
 %hr
  
 %pre= @key.key
-.actions
+.right
   = link_to 'Remove', @key, confirm: 'Are you sure?', method: :delete, class: "btn danger delete-key"
@@ -3,7 +3,7 @@
  
 .team_member_show
   - if can? current_user, :admin_project, @project
-    = link_to 'Remove from team', project_team_member_path(project_id: @project, id: @team_member.id), confirm: 'Are you sure?', method: :delete, class: "right btn btn-danger"
+    = link_to 'Remove from team', project_team_member_path(project_id: @project, id: @team_member.id), confirm: 'Are you sure?', method: :delete, class: "right btn danger"
   .profile_avatar_holder
     = image_tag gravatar_icon(user.email, 60), class: "borders"
   %h3
1	1	.btn {
2		- background-image: -webkit-gradient(linear, 0 0, 0 26, color-stop(0.076, #f7f7f7), to(#d5d5d5));
3		- background-image: -webkit-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
4		- background-image: -moz-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
5		- background-image: -o-linear-gradient(#f7f7f7 7.6%, #d5d5d5);
	2	+ @include bg-gradient(#f7f7f7, #d5d5d5);
6	3	border-color:#aaa;
7	4	&:hover {
8	5	@include bg-gray-gradient;
...	...	@@ -12,10 +9,8 @@
12	9
13	10	&.primary {
14	11	background:#2a79A3;
	12	+ @include bg-gradient(#47A7b7, #2585b5);
15	13	border-color: #2A79A3;
16		- background-image: -webkit-linear-gradient(#47A7b7 7.6%, #2585b5);
17		- background-image: -moz-linear-gradient(#47A7b7 7.6%, #2585b5);
18		- background-image: -o-linear-gradient(#47A7b7 7.6%, #2585b5);
19	14	color:#fff;
20	15	text-shadow: 0 1px 1px #268;
21	16	&:hover {
...	...	@@ -30,16 +25,11 @@
30	25	}
31	26
32	27	&.success {
33		- border-color: #4A4;
34		- background-image: -webkit-linear-gradient(#82D482 7.6%, #22B442);
35		- background-image: -moz-linear-gradient(#82D482 7.6%, #22B442);
36		- background-image: -o-linear-gradient(#82D482 7.6%, #22B442);
37		- color: #fff;
38		- text-shadow: 0 1px 1px #141;
	28	+ @extend .btn-success;
39	29
40	30	&:hover {
41		- background: #6C6;
42		- color: #fff;
	31	+ @extend .btn-success;
	32	+ background: #51a351;
43	33	}
44	34
45	35	&.disabled {
...	...	@@ -62,10 +52,8 @@
62	52	padding-right:30px;
63	53	}
64	54
65		- &.danger,
66		- &.btn-danger {
67		- color:#fff;
68		- background: #DA4E49;
	55	+ &.danger {
	56	+ @extend .btn-danger;
69	57	border-color: #BD362F;
70	58
71	59	&:hover {
...	...
...	...	@@ -56,6 +56,13 @@ $hover: #fdf5d9;
56	56	border-radius: $radius;
57	57	}
58	58
	59	+@mixin bg-gradient($from, $to) {
	60	+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from($from), to($to));
	61	+ background-image: -webkit-linear-gradient($from, $to);
	62	+ background-image: -moz-linear-gradient($from, $to);
	63	+ background-image: -o-linear-gradient($from, $to);
	64	+}
	65	+
59	66	@mixin bg-gray-gradient {
60	67	background:#eee;
61	68	background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, #eee), to(#dfdfdf));
...	...
...	...	@@ -11,8 +11,13 @@
11	11	.input= f.text_field :title
12	12	.clearfix
13	13	= f.label :key
14		- .input= f.text_area :key, class: "xlarge"
	14	+ .input
	15	+ = f.text_area :key, class: [:xxlarge, :thin_area]
	16	+ %p.hint
	17	+ Paste a machine public key here. Read more about how generate it
	18	+ = link_to "here", help_ssh_path
	19	+
15	20	.actions
16		- = f.submit 'Save', class: "primary btn"
17		- = link_to "Cancel", project_deploy_keys_path(@project), class: "btn"
	21	+ = f.submit 'Save', class: "save-btn btn"
	22	+ = link_to "Cancel", project_deploy_keys_path(@project), class: "btn cancel-btn"
18	23
...	...
1	1	= render "repositories/head"
2		-- if can? current_user, :admin_project, @project
3		- .alert-message.block-message
4		- Deploy keys allow read-only access to repository.
	2	+
	3	+%p.slead
	4	+ Deploy keys allow read-only access to repository. It matches perfectly for CI, staging or production servers.
	5	+
	6	+ - if can? current_user, :admin_project, @project
5	7	= link_to new_project_deploy_key_path(@project), class: "btn small", title: "New Deploy Key" do
6	8	Add Deploy Key
7		-
8	9	- if @keys.any?
9	10	%table
	11	+ %thead
	12	+ %tr
	13	+ %th Keys
	14	+ %th
	15	+ %th
10	16	- @keys.each do \|key\|
11	17	= render(partial: 'show', locals: {key: key})
...	...
1	1	= render "repositories/head"
2	2
3		-%h3 New Deploy key
	3	+%h3.page_title New Deploy key
4	4	%hr
5	5
6	6	= render 'form'
...	...
1	1	= render "repositories/head"
2		-%h3= @key.title
	2	+%h3.page_title
	3	+ Deploy key:
	4	+ = @key.title
	5	+ %small
	6	+ created at
	7	+ = @key.created_at.stamp("Aug 21, 2011")
	8	+.back_link
	9	+ = link_to project_deploy_keys_path(@project) do
	10	+ ← To keys list
3	11	%hr
4	12	%pre= @key.key
5		-.actions
	13	+.right
6	14	= link_to 'Remove', project_deploy_key_path(@key.project, @key), confirm: 'Are you sure?', method: :delete, class: "danger btn delete-key"
7		- .clear
...	...
...	...	@@ -10,5 +10,5 @@
10	10	%hr
11	11
12	12	%pre= @key.key
13		-.actions
	13	+.right
14	14	= link_to 'Remove', @key, confirm: 'Are you sure?', method: :delete, class: "btn danger delete-key"
...	...
...	...	@@ -3,7 +3,7 @@
3	3
4	4	.team_member_show
5	5	- if can? current_user, :admin_project, @project
6		- = link_to 'Remove from team', project_team_member_path(project_id: @project, id: @team_member.id), confirm: 'Are you sure?', method: :delete, class: "right btn btn-danger"
	6	+ = link_to 'Remove from team', project_team_member_path(project_id: @project, id: @team_member.id), confirm: 'Are you sure?', method: :delete, class: "right btn danger"
7	7	.profile_avatar_holder
8	8	= image_tag gravatar_icon(user.email, 60), class: "borders"
9	9	%h3
...	...