Commit fe7b8339327c9a6eca07afc5381b4a9abc66a025
1 parent
5e6af8eb
Exists in
master
and in
1 other branch
On apps/edit page: Replaced IssueTracker radio buttons with nicer active/inactiv…
…e icons. Added desaturated 'inactive' icons.
Showing
10 changed files
with
75 additions
and
13 deletions
Show diff stats
app/views/apps/_fields.html.haml
| @@ -50,18 +50,26 @@ | @@ -50,18 +50,26 @@ | ||
| 50 | = f.fields_for :issue_tracker do |w| | 50 | = f.fields_for :issue_tracker do |w| |
| 51 | %div.issue_tracker.nested | 51 | %div.issue_tracker.nested |
| 52 | %div.choose | 52 | %div.choose |
| 53 | - = w.radio_button :type, "IssueTracker", 'data-section' => 'none' | ||
| 54 | - = label_tag :type_none, '(None)', :for => label_for_attr(w, 'type_issuetracker') | ||
| 55 | - = w.radio_button :type, "LighthouseTracker", 'data-section' => 'lighthouse' | ||
| 56 | - = label_tag :type_lighthouseapp, 'Lighthouse', :for => label_for_attr(w, 'type_lighthousetracker') | ||
| 57 | - = w.radio_button :type, "RedmineTracker", 'data-section' => 'redmine' | ||
| 58 | - = label_tag :type_redmine, 'Redmine', :for => label_for_attr(w, 'type_redminetracker') | ||
| 59 | - = w.radio_button :type, "PivotalTracker", 'data-section' => 'pivotal' | ||
| 60 | - = label_tag :type_pivotal, 'Pivotal Tracker', :for => label_for_attr(w, 'type_pivotaltracker') | ||
| 61 | - = w.radio_button :type, "FogbugzTracker", 'data-section' => 'fogbugz' | ||
| 62 | - = label_tag :type_fogbugz, 'FogBugz', :for => label_for_attr(w, 'type_fogbugztracker') | ||
| 63 | - = w.radio_button :type, "MingleTracker", 'data-section' => 'mingle' | ||
| 64 | - = label_tag :type_fogbugz, 'Mingle', :for => label_for_attr(w, 'type_mingletracker') | 53 | + = label_tag :type_none, :for => label_for_attr(w, 'type_issuetracker'), :class => "label_radio none" do |
| 54 | + = w.radio_button :type, "IssueTracker", 'data-section' => 'none' | ||
| 55 | + (None) | ||
| 56 | + = label_tag :type_lighthouseapp, :for => label_for_attr(w, 'type_lighthousetracker'), :class => "label_radio lighthouseapp" do | ||
| 57 | + = w.radio_button :type, "LighthouseTracker", 'data-section' => 'lighthouse' | ||
| 58 | + Lighthouse | ||
| 59 | + = label_tag :type_redmine, :for => label_for_attr(w, 'type_redminetracker'), :class => "label_radio redmine" do | ||
| 60 | + = w.radio_button :type, "RedmineTracker", 'data-section' => 'redmine' | ||
| 61 | + Redmine | ||
| 62 | + = label_tag :type_pivotal, :for => label_for_attr(w, 'type_pivotallabstracker'), :class => "label_radio pivotal" do | ||
| 63 | + = w.radio_button :type, "PivotalLabsTracker", 'data-section' => 'pivotal' | ||
| 64 | + Pivotal Tracker | ||
| 65 | + %br | ||
| 66 | + = label_tag :type_fogbugz, :for => label_for_attr(w, 'type_fogbugztracker'), :class => "label_radio fogbugz" do | ||
| 67 | + = w.radio_button :type, "FogbugzTracker", 'data-section' => 'fogbugz' | ||
| 68 | + FogBugz | ||
| 69 | + = label_tag :type_fogbugz, :for => label_for_attr(w, 'type_mingletracker'), :class => "label_radio mingle" do | ||
| 70 | + = w.radio_button :type, "MingleTracker", 'data-section' => 'mingle' | ||
| 71 | + Mingle | ||
| 72 | + | ||
| 65 | %div.tracker_params.none{:class => (w.object && !(w.object.class < IssueTracker)) ? 'chosen' : nil} | 73 | %div.tracker_params.none{:class => (w.object && !(w.object.class < IssueTracker)) ? 'chosen' : nil} |
| 66 | %p When no issue tracker has been configured, you will be able to leave comments on errors. | 74 | %p When no issue tracker has been configured, you will be able to leave comments on errors. |
| 67 | %div.tracker_params.lighthouse{:class => w.object.is_a?(LighthouseTracker) ? 'chosen' : nil} | 75 | %div.tracker_params.lighthouse{:class => w.object.is_a?(LighthouseTracker) ? 'chosen' : nil} |
4.58 KB
1.57 KB
1.96 KB
799 Bytes
818 Bytes
1.56 KB
1.52 KB
public/javascripts/form.js
| @@ -7,6 +7,12 @@ $(function(){ | @@ -7,6 +7,12 @@ $(function(){ | ||
| 7 | 7 | ||
| 8 | if($('div.issue_tracker.nested').length) | 8 | if($('div.issue_tracker.nested').length) |
| 9 | activateTypeSelector('issue_tracker', 'tracker_params'); | 9 | activateTypeSelector('issue_tracker', 'tracker_params'); |
| 10 | + | ||
| 11 | + $('body').addClass('has-js'); | ||
| 12 | + $('.label_radio').click(function(){ | ||
| 13 | + activateLabelIcons(); | ||
| 14 | + }); | ||
| 15 | + activateLabelIcons(); | ||
| 10 | }); | 16 | }); |
| 11 | 17 | ||
| 12 | function activateNestedForms() { | 18 | function activateNestedForms() { |
| @@ -96,3 +102,15 @@ function activateCheckboxHooks() { | @@ -96,3 +102,15 @@ function activateCheckboxHooks() { | ||
| 96 | }); | 102 | }); |
| 97 | } | 103 | } |
| 98 | 104 | ||
| 105 | + | ||
| 106 | +function activateLabelIcons() { | ||
| 107 | + if ($('.label_radio input').length) { | ||
| 108 | + $('.label_radio').each(function(){ | ||
| 109 | + $(this).removeClass('r_on'); | ||
| 110 | + }); | ||
| 111 | + $('.label_radio input:checked').each(function(){ | ||
| 112 | + $(this).parent('label').addClass('r_on'); | ||
| 113 | + }); | ||
| 114 | + }; | ||
| 115 | +}; | ||
| 116 | + |
public/stylesheets/application.css
| @@ -532,8 +532,44 @@ div.nested .chosen { | @@ -532,8 +532,44 @@ div.nested .chosen { | ||
| 532 | display: block !important; | 532 | display: block !important; |
| 533 | } | 533 | } |
| 534 | div.nested .choose { | 534 | div.nested .choose { |
| 535 | - margin-bottom: 0.5em; | 535 | + margin-bottom: 1em; |
| 536 | +} | ||
| 537 | +div.issue_tracker.nested img { | ||
| 538 | + vertical-align: middle; | ||
| 539 | +} | ||
| 540 | + | ||
| 541 | +/* Icons for Issue Tracker Radio Buttons */ | ||
| 542 | +div.issue_tracker.nested label.label_radio { | ||
| 543 | + color: #777777; | ||
| 544 | + padding-left: 33px; | ||
| 545 | + background: url(/images/lighthouseapp_create.png) no-repeat; | ||
| 546 | + line-height: 30px; | ||
| 547 | + margin-bottom: 6px; | ||
| 548 | + margin-right: 8px; | ||
| 536 | } | 549 | } |
| 550 | +div.issue_tracker.nested .label_radio input { | ||
| 551 | + position: absolute; left: -9999px; | ||
| 552 | +} | ||
| 553 | + | ||
| 554 | +div.issue_tracker.nested label.r_on { | ||
| 555 | + color: #262626; | ||
| 556 | +} | ||
| 557 | + | ||
| 558 | + | ||
| 559 | +/* Inactive icons */ | ||
| 560 | +div.issue_tracker.nested label.none { background: url(/images/none_inactive.png) no-repeat; } | ||
| 561 | +div.issue_tracker.nested label.redmine { background: url(/images/redmine_inactive.png) no-repeat; } | ||
| 562 | +div.issue_tracker.nested label.lighthouseapp { background: url(/images/lighthouseapp_inactive.png) no-repeat; } | ||
| 563 | +div.issue_tracker.nested label.mingle { background: url(/images/mingle_inactive.png) no-repeat; } | ||
| 564 | +div.issue_tracker.nested label.fogbugz { background: url(/images/fogbugz_inactive.png) no-repeat; } | ||
| 565 | +div.issue_tracker.nested label.pivotal { background: url(/images/pivotal_inactive.png) no-repeat; } | ||
| 566 | +/* Active icons */ | ||
| 567 | +div.issue_tracker.nested label.r_on.none { background: url(/images/none_create.png) no-repeat; } | ||
| 568 | +div.issue_tracker.nested label.r_on.redmine { background: url(/images/redmine_create.png) no-repeat; } | ||
| 569 | +div.issue_tracker.nested label.r_on.lighthouseapp { background: url(/images/lighthouseapp_create.png) no-repeat; } | ||
| 570 | +div.issue_tracker.nested label.r_on.mingle { background: url(/images/mingle_create.png) no-repeat; } | ||
| 571 | +div.issue_tracker.nested label.r_on.fogbugz { background: url(/images/fogbugz_create.png) no-repeat; } | ||
| 572 | +div.issue_tracker.nested label.r_on.pivotal { background: url(/images/pivotal_create.png) no-repeat; } | ||
| 537 | 573 | ||
| 538 | 574 | ||
| 539 | /* Apps Table */ | 575 | /* Apps Table */ |