| ... | ... |
@@ -46,6 +46,18 @@ |
| 46 | 46 |
padding:10px; |
| 47 | 47 |
margin-bottom:20px; |
| 48 | 48 |
} |
| 49 |
+.labels-edit-label-id {
|
|
| 50 |
+ width:400px; |
|
| 51 |
+ padding:9px; |
|
| 52 |
+ border-radius:3px; |
|
| 53 |
+ border: 1px solid #ddd; |
|
| 54 |
+} |
|
| 55 |
+.labels-edit-label-color {
|
|
| 56 |
+ width:100px; |
|
| 57 |
+ padding:8px; |
|
| 58 |
+ border-radius:3px; |
|
| 59 |
+ border: 1px solid #ddd; |
|
| 60 |
+} |
|
| 49 | 61 |
.labels-create-label-id {
|
| 50 | 62 |
width:400px; |
| 51 | 63 |
padding:6px; |
| ... | ... |
@@ -85,7 +97,7 @@ |
| 85 | 97 |
} |
| 86 | 98 |
|
| 87 | 99 |
.labels-left {
|
| 88 |
- width:50%; |
|
| 100 |
+ width:60%; |
|
| 89 | 101 |
float:left; |
| 90 | 102 |
} |
| 91 | 103 |
.labels-tag {
|
| ... | ... |
@@ -96,7 +108,7 @@ |
| 96 | 108 |
border:1px solid #dddddd; |
| 97 | 109 |
} |
| 98 | 110 |
.labels-right {
|
| 99 |
- width:50%; |
|
| 111 |
+ width:40%; |
|
| 100 | 112 |
float:left; |
| 101 | 113 |
text-align:right; |
| 102 | 114 |
} |
| ... | ... |
@@ -20,12 +20,22 @@ |
| 20 | 20 |
$('.labels-new-btn').on('click', function () {
|
| 21 | 21 |
$('.labels-create-panel').toggle();
|
| 22 | 22 |
}); |
| 23 |
- }); |
|
| 24 |
- |
|
| 25 |
- $(document).ready(function () {
|
|
| 23 |
+ |
|
| 26 | 24 |
$('.labels-create-cancel-btn').on('click', function () {
|
| 27 | 25 |
$('.labels-create-panel').hide();
|
| 28 | 26 |
}); |
| 27 |
+ |
|
| 28 |
+ $('.labels-edit').on('click', function () {
|
|
| 29 |
+ $(this).closest('li').find('.labels-display-area').hide();
|
|
| 30 |
+ $(this).closest('li').find('.labels-edit-area').show();
|
|
| 31 |
+ }); |
|
| 32 |
+ |
|
| 33 |
+ $('.labels-edit-cancel-btn').on('click', function () {
|
|
| 34 |
+ $(this).closest('li').find('.labels-display-area').show();
|
|
| 35 |
+ $(this).closest('li').find('.labels-edit-area').hide();
|
|
| 36 |
+ }); |
|
| 37 |
+ |
|
| 38 |
+ // labels-edit-save-btn |
|
| 29 | 39 |
}); |
| 30 | 40 |
% end |
| 31 | 41 |
|
| ... | ... |
@@ -55,18 +65,34 @@ |
| 55 | 65 |
<li><%= @$labels %> labels</li> |
| 56 | 66 |
% for my $label (@$labels) {
|
| 57 | 67 |
<li> |
| 58 |
- <div class="labels-left"> |
|
| 59 |
- <div class="labels-tag" style="background:<%= $label->{color} %>;">
|
|
| 60 |
- <i class="icon icon-tag"></i> |
|
| 61 |
- <%= $label->{id} %>
|
|
| 68 |
+ <div class="labels-display-area"> |
|
| 69 |
+ <div class="labels-left"> |
|
| 70 |
+ <div class="labels-tag" style="background:<%= $label->{color} %>;">
|
|
| 71 |
+ <i class="icon icon-tag"></i> |
|
| 72 |
+ <%= $label->{id} %>
|
|
| 73 |
+ </div> |
|
| 74 |
+ </div> |
|
| 75 |
+ <div class="labels-right"> |
|
| 76 |
+ <div class="labels-edit"> |
|
| 77 |
+ <a href="javascript:void(0)"><i class="icon icon-edit"></i> Edit</a> |
|
| 78 |
+ </div> |
|
| 79 |
+ <div class="labels-delete"> |
|
| 80 |
+ <a href="javascript:void(0)"><i class="icon icon-remove"></i> Delete</a> |
|
| 81 |
+ </div> |
|
| 62 | 82 |
</div> |
| 63 | 83 |
</div> |
| 64 |
- <div class="labels-right"> |
|
| 65 |
- <div class="labels-edit"> |
|
| 66 |
- <a href="javascript:void(0)"><i class="icon icon-edit"></i> Edit</a> |
|
| 84 |
+ <div class="labels-edit-area" style="display:none"> |
|
| 85 |
+ <div class="labels-left"> |
|
| 86 |
+ <%= input_tag 'label-id' => $label->{id}, class => 'labels-edit-label-id' %>
|
|
| 87 |
+ <%= input_tag 'color' => $label->{color}, class => 'labels-edit-label-color' %>
|
|
| 67 | 88 |
</div> |
| 68 |
- <div class="labels-delete"> |
|
| 69 |
- <a href="javascript:void(0)"><i class="icon icon-remove"></i> Delete</a> |
|
| 89 |
+ <div class="labels-right"> |
|
| 90 |
+ <div class="labels-edit-cancel-btn btn"> |
|
| 91 |
+ Cancel |
|
| 92 |
+ </div> |
|
| 93 |
+ <div class="labels-edit-save-btn btn btn-success"> |
|
| 94 |
+ Save changes |
|
| 95 |
+ </div> |
|
| 70 | 96 |
</div> |
| 71 | 97 |
</div> |
| 72 | 98 |
</li> |