Commit fe7b8339327c9a6eca07afc5381b4a9abc66a025

Authored by Nathan Broadbent
1 parent 5e6af8eb
Exists in master and in 1 other branch production

On apps/edit page: Replaced IssueTracker radio buttons with nicer active/inactiv…

…e icons. Added desaturated 'inactive' icons.
app/views/apps/_fields.html.haml
... ... @@ -50,18 +50,26 @@
50 50 = f.fields_for :issue_tracker do |w|
51 51 %div.issue_tracker.nested
52 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 73 %div.tracker_params.none{:class => (w.object && !(w.object.class < IssueTracker)) ? 'chosen' : nil}
66 74 %p When no issue tracker has been configured, you will be able to leave comments on errors.
67 75 %div.tracker_params.lighthouse{:class => w.object.is_a?(LighthouseTracker) ? 'chosen' : nil}
... ...
public/images/fogbugz_inactive.png 0 → 100644

4.58 KB

public/images/lighthouseapp_inactive.png 0 → 100644

1.57 KB

public/images/mingle_inactive.png 0 → 100644

1.96 KB

public/images/none_create.png 0 → 100644

799 Bytes

public/images/none_inactive.png 0 → 100644

818 Bytes

public/images/pivotal_inactive.png 0 → 100644

1.56 KB

public/images/redmine_inactive.png 0 → 100644

1.52 KB

public/javascripts/form.js
... ... @@ -7,6 +7,12 @@ $(function(){
7 7  
8 8 if($('div.issue_tracker.nested').length)
9 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 18 function activateNestedForms() {
... ... @@ -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 532 display: block !important;
533 533 }
534 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 575 /* Apps Table */
... ...